Язык HTML и его теги. HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов.
Язык HTML и его теги
Изучать HTML лучше всего на примере. Так что давайте сразу же создадим нашу первую Web-страничку. Благо Windows уже содержит необходимый для этого инструмент — Блокнот.
НА ЗАМЕТКУ
Вообще, для создания Web-страниц существует множество специальных программ — Web-редакторов. Они позволяют работать с Web-страницами, даже не зная HTML, — как с документами Microsoft Word, просто набирая текст и форматируя его. Также они следят за правильностью расстановки тегов, помогут быстро создать сложный элемент Web-страницы и даже опубликовать готовый Web-сайт в Сети. К таким программам принадлежит, в частности, известный Web-редактор Adobe Dreamweaver. Однако мы пока что будем пользоваться простейшим текстовым редактором Блокнот. Это позволит нам лучше познакомиться с HTML.
Откроем Блокнот и наберем в нем текст (или, как говорят бывалые программисты, код), приведенный в листинге 1.1.
Листинг 1.1
<!DOCTYPE html>
<HTML>
<HEAD>
<META HTTP-EQUIV=»Content-Type» CONTENT=»text/html; charset=utf-8″>
<TITLE>Пример Web-страницы</TITLE>
</HEAD>
<BODY>
<h2>Справочник по HTML</h2>
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке
<STRONG>HTML</STRONG>.</P>
</BODY>
</HTML>
Проверим набранный код на ошибки и сохраним в файл с именем 1.1.htm. Только сделаем при этом две важные вещи.
1. Сохраним HTML-код в кодировке UTF-8. Для этого в диалоговом окне сохранения файла Блокнота найдем раскрывающийся список Кодировка и выберем в нем пункт UTF-8.
2. Заключим имя файла в кавычки. Иначе Блокнот добавит к нему расширение txt, и наш файл получит имя 1.1.htm.txt.
Все, наша первая Web-страница готова! Теперь осталось открыть ее в Web-обозревателе и посмотреть на результат.
Мы можем использовать стандартно поставляемый в составе Windows Web- обозреватель Microsoft Internet Explorer. Но Internet Explorer на данный момент не поддерживает HTML 5; его поддержку обещают только в версии 9, которая пока находится в разработке. HTML 5 поддерживают последние версии Mozilla Firefox, Opera, Apple Safari и Google Chrome, поэтому предпочтительнее какая-либо из этих программ.
Откроем же Web-страницу в выбранном Web-обозревателе (автор выбрал Firefox) и посмотрим на нее (рис. 1.3).
Рис. 1.3. Наша первая Web-страница
Видите? Мы создали Web-страницу, содержащую большой «кричащий» заголовок,
абзац текста, который автоматически разбивается на строки и содержит фрагмент текста, выделенный полужирным шрифтом (аббревиатура «HTML»). И все это — в «голом» тексте, набранном в Блокноте!
Теперь посмотрим, что же мы такое написали в файле 1.1.htm. Пока что ограни- чимся небольшим фрагментом HTML-кода (листинг 1.2).
Листинг 1.2
<h2>Справочник по HTML</h2>
<P>Приветствуем на нашем Web-сайте всех, кто занимается Web-дизайном! Здесь вы сможете найти информацию обо всех интернет-технологиях, применяемых при создании Web-страниц. В частности, о языке <STRONG>HTML</STRONG>.</P>
Здесь мы видим текст заголовка и абзаца. И еще странные слова, взятые в угловые скобки — символы < и >. Что это такое?
Это и есть теги HTML, о которых упоминалось ранее. Они превращают тот или иной фрагмент HTML-кода в определенный элемент Web-страницы: абзац, заголовок или текст, выделенный полужирным шрифтом.
Начнем с тегов <h2> и </h2>, поскольку они идут первыми. Эти теги превращают фрагмент текста, находящийся между ними, в заголовок. Тег <h2> помечает начало фрагмента, на который распространяется действие тега, и называется открывающим. А тег </h2> устанавливает конец «охватываемого» фрагмента и называется закрывающим. Что касается самого фрагмента, заключенного между открывающим и закрывающим тегами, то он называется содержимым тега. Именно к содержимому применяется действие тега.
Все теги HTML представляют собой символы < и >, внутри которых находится имя тега, определяющее назначение тега. Закрывающий тег должен иметь то же имя, что и открывающий; единственное отличие закрывающего тега — символ /, который ставится между символом < и именем тега.
Рассмотренные нами теги <h2> и </h2> в HTML фактически считаются одним тегом <h2>. Такой тег называется парным.
Поехали дальше. Парный тег <P> создает на Web-странице абзац; содержимое тега станет текстом этого абзаца. Такой абзац будет отображаться с отступами сверху и снизу. Если он полностью помещается по ширине в окне Web-обозревателя, то отобразится в одну строку; в противном случае сам Web-обозреватель разобьет его на несколько более коротких строк. (То же справедливо и для заголовка.)
Парный тег <STRONG> выводит свое содержимое полужирным шрифтом. Как мы видим, тег <STRONG> вложен внутрь содержимого тега <P>. Это значит, что содержи- мое тега <STRONG> будет отображаться как часть абзаца (тега <P>).
Давайте ради интереса выделим слова «Web-дизайном» курсивом. Для этого поместим соответствующий фрагмент текста абзаца в парный тег <EM>:
<P>Приветствуем на нашем Web-сайте всех, кто занимается
<EM>Web-дизайном</EM>! Здесь вы сможете найти информацию обо всех
.
Сохраним исправленную Web-страницу и обновим содержимое окна Web-обозревателя, нажав клавишу <F5>. Получилось! Да мы уже стали Web-дизайнерами!
Осталось рассмотреть важнейшие правила, согласно которым пишется HTML-код.
— Имена тегов можно писать как прописными (большими), так и строчными (малыми) буквами. Традиционно в языке HTML имена тегов пишут прописными буквами.
— Между символами <, >, / и именами тегов, а также внутри имен тегов не допускаются пробелы и переносы строк.
— В обычном тексте, не являющемся тегом, не должны присутствовать символы < и >. (Эти символы называют недопустимыми.) В противном случае Web- обозреватель сочтет фрагмент текста, где встречается один из этих символов, тегом и отобразит Web-страницу некорректно.
На этом пока закончим. Впоследствии, изучив другие языковые элементы HTML, мы пополним список этих правил.
Данный текст является ознакомительным фрагментом.
Продолжение на ЛитРесКак создать html страницу? Что такое атрибут и теги html?
Как запустить видеоурок:- Разархивировать скачанный файл.
- Открыть папку index.
- Запустить файл index.html в браузере.
Создание папки сайта.
- Открываем нужную нам директорию (папку, каталог), то есть ту директорию, где будет располагаться папка нашего сайта. В моем случае — это рабочий стол.
- Для того что бы создать папку нажимаем правой клавишей мыши. Нажимаем в выпадающем меню «Создать», и нажимаем «Папка».
- Папка создана. Вводим ей название, допустим «Site». Жмем «Enter».
Как создать html страницу?
- Для этого переходим в блокнот или в программу Notepad++ .
- Для того чтобы создать html документ, жмем в верхнем левом углу вкладку «Файл», далее «Новый». Либо Ctrl+N.
- Теперь я введу структуру данной html страницы, а вы повторяйте за мной.
<html> <head> <title>Главная страница </title> </head> <body> <p align="center"> Добро пожаловать на мой сайт </p> <p><h3><font></font></h3></p> <br> <h2> Рад вас видеть. </h2> </body> </html>
- После того как мы переписали структуру этого документа, давайте сохраним его. Нажимаем «Файл», далее «Сохранить как…». Либо Ctrl+Alt+S.
- Выходит окно сохранения, и выбираем нужную нам папку, ту, куда будем сохранять. В нашем случае это папка «Site».
- Вводим имя файла, «index.html», не забываем вводить расширение файла, сейчас расширение «html», иначе файл сохранится в текстовом формате. Жмем «Сохранить».
Теперь перейдем в папку нашего сайта, откроем нашу страницу в браузере, и проверяем. Видим, что все работает.
Что такое атрибут и теги html?
Что такое теги html?
Грубо говоря, тег это все, что находится между открывающей и закрывающей треугольными скобками — < и >. В данном случае, это тег <html> является обязательным тегом, а так же для него требуется закрывающий тег </html>.
Большинство тегов имеют закрывающие теги, но есть и исключения. Как, например тег <br> — что означает перенос на следующую строку. Теги будем разбирать по ходу курса пока что их вам не нужно запоминать. Например тег <p> означает параграф. Перейдем в наш код:
- Тег
<br>означает перенос на следующую строку. Можем перейти в браузер и посмотреть (скрины находятся в галерее, внизу статьи). Переходим обратно в код. - Тег
<h2>отвечает за заголовки. Чем меньше число в теге, тем больше заголовок. Как видно в браузере заголовок «Рад вас видеть» самый большой.
Что такое атрибут html?
Атрибут (лат. attribuo — придаю, наделяю) наделяют дополнительными свойствами наши теги. Атрибут «align» имеет значение «center». Это значит, что текст, находящийся между открывающимся тегом <p> и закрывающимся </p> будет находиться по центру. Если изменим значение атрибута «align» и вместо «center» поставим «right», жмем кнопку «Сохранить», и открываем браузер. Нажимаем кнопку обновить. Как видите текст «Добро пожаловать на мой сайт» располагается справа. Как вы уже поняли, атрибут «align» отвечает за расположение текста на нашей html странице.
Тег html. Структура тега html
А сейчас мы разберем структуру html документа (тега <html>). Думаю, вы знаете, что у всех, почти у всех людей есть голова :). У головы есть глаза, рот, нос, уши. Также у всех людей есть тело. Из тела исходят руки, ноги. Так же как и у html документа. Голова, в нашем случае, это тег <head> и закрывающий тег </head>, также в свою очередь туда входит тег <title> и другие. Эти теги можно принимать за нос, уши, глаза то есть то, что находится на голове. У html документа, как говорилось, есть тело. Тело документа находится между тегами </body>. У него тоже есть свои теги: <p>, <br>, <font>, <h2>, <h3> и другие, их очень много. В html документе тело и голова заключены в обязательный тег <html> и </html>
Забыл сказать, что тег <title> отвечает за название нашей страницы. Это можно посмотреть в одном из браузеров, которые мы разбирали в прошлом видеоуроке.
Переходим в html код и рассмотрим последний пункт – порядок расположения тегов. Сейчас вы видите на экране теги и закрывающие теги <p><h3><font></font></h3></p>. Нужно соблюдать порядок тегов, например, если мы переместим <p><h3><font></h3></font></p>, то страница будет отображаться некорректно. Поэтому, нужно соблюдать чтобы одни теги были внутри других, и не менять этот порядок.
На этом, мы заканчиваем урок, подводя итог тому, чему научились:
- Научились создавать папку для сайта.
- Создавать, сохранять и изменять html страницы.
- Разобрались с тем, что такое атрибут и теги html.
- Узнали, что есть обязательные теги.
- Каждые теги имеют закрывающие теги, но есть и исключения.
- Разобрали структуру html документа, проведя аналогию с человеком.
- Узнали, что нужно соблюдать порядок расположения тегов.
До встречи в следующем видеоуроке, в котором мы разберем элемент DOCTYPE и раздел HEAD! 🙂
Как создать html страницу — пожалуй, первый вопрос будущих веб-мастеров. Что такое атрибут и теги html — второй вопрос. Заходите к нам и мы ответим Вам!
Работа с языком в HTML (руководство)
Работа с языком в HTML (руководство)Целевая аудитория: XHTML/HTML и CSS кодеры, веб-разработчики (PHP, JSP, и т. д.), а также все, кому необходимо руководство по объявлению и использованию языковой информации в HTML. Предполагается, что вы имеете базовое знакомство с HTML и CSS.
Данное руководство объединяет и организует ссылки на статьи, которые, все вместе, помогут вам понять основные аспекты работы с языковой информацией при создании HTML и CSS.
Всегда добавляйте lang атрибут к тэгу html для того, чтобы установить язык по умолчанию вашей страницы.
Если это XHTML 1.x или HTML5 Polyglot документ, используемый, как XML, вам следует также использовать xml:lang атрибут (с тем же значением). Если ваша страница используется только, как XML, то просто используйте xml:lang атрибут.
Не используйте meta элемент с http-equiv, установленным в значение Content-Language.
Выбирайте тэги из списка IANA Subtag Registry и следуйте правилам синтаксиса BCP 47 при использовании структур более сложных, чем просто языковой тэг. Держите свои языковые теги как можно более короткими.
Используйте :lang свойство в CSS, чтобы применять стили, зависящие от языка вашего контента.
Эта часть руководства объясняет мотивы для дальнейшего чтения. Если вы спешите и просто хотите знать, что делать, без теории, то начните читать раздел Как объявить язык страницы или элемента.
Браузеры и другие приложения могут использовать информацию о языке контента для предоставления пользователям наиболее подходящей информации или предоставления информации пользователям наиболее подходящим образом. Чем больше контента будет размечено и размечено правильно, тем более полезными и распространенными такие приложения станут.
Зачем использовать атрибут языка? содержит примеры того, как языковая информация может быть полезной.
Вам следует устанавливать язык текста на странице, используя языковые атрибуты. К сожалению, существует более, чем один атрибут, а также есть несколько вещей, которые необходимо прояснить. Этот раздел обсуждает различные варианты: те, которые следует использовать, и те, которых следует избегать (и почему).
Объявление языка в HTML предоставляет итоговую информацию о том, как объявлять язык, используя атрибуты.
HTTP заголовки, мета элементы и информация о языке описывает, как языковые метаданные отличаются от действительного языка текста, а также Content-Language, используемый в HTTP заголовках и мета элементах.
В этом разделе рассматривается, как выбирать и создавать языковые теги, то есть значения, используемые для атрибутов языка.
Чтобы быть уверенным в том, что все юзер агенты понимают, какой язык вы имеете в виду, вам необходимо следовать стандартным подходам при предоставлении языковых значений. Вам, вероятно, потребуется рассмотреть, как относиться к диалектным различиям, например между американским и британским английским, которые содержат существенные различия в орфографии и произношении.
Языковые тэги в HTML и XML описывает синтаксис языковых тэгов, использующих спецификацию BCP 47.
Выбор языкового тэга предоставляет практическую информацию о том, как выбрать корректный тэг из тысяч доступных, для представления необходимого вам языка.
Когда ваш браузер получает документ из Сети, он отправляет HTTP запрос на сервер. Вместе с запросом, браузер также посылает информацию о своих языковых настройках. Эти настройки могут влиять на то, какой контент будет отправлен вам обратно. Узнайте, как устанавливать и изменять эти настройки.
Установка языковых настроек в браузере
Вам зачастую необходимо применять различные стили для текста на различных языках (например, шрифт или высота строки, или, вероятно, различные стили выделения и так далее). Если вы задействуете атрибуты для определения языка контента, то вы сможете использовать некоторые мощные CSS селекторы для автоматического применения различных стилей при изменении языка контента. Следующая статья рассматривает различные способы того, как это сделать.
Стилизация с использованием языковых атрибутов
Приступаете к работе? Язык в Сети
Ссылки по теме, Разработка HTML и CSS
HTML-команды для создания сайтов
Аббревиатура HTML расшифровывается как HyperText Markup Language. HTML — это не язык программирования, это язык разметки сайта.
Все браузеры умеют преобразовывать эту разметку в удобный вид для пользователя.
В этом языке используются специальные команды, называемые тегами. У каждого тега своя функция. Существует огромное количество тегов. В идеале нужно выучить все. Но для начинающего разработчика базовых знаний вполне достаточно.
Основные команды HTML
Список HTML-команд очень большой. Но основных не так много. Для того чтобы начать писать код, вам нужен редактор. Можно использовать «Блокнот». Рекомендуется использовать Notepad++. Он выглядит вот так.
Преимущество в том, что в специальных редакторах теги подсвечиваются определенным цветом, в зависимости от категории. Команды для создания сайта HTML в блокноте или любой другой программе одни и те же. Язык используется везде одинаковый. Среда разработки — это лишь инструмент.
В языке HTML есть закрывающиеся и незакрывающиеся теги. Также в этом языке существует понятие вложенности. Каждый объект в коде — это элемент. У элемента есть открывающий тег, закрывающий и содержимое. Более того, у тега есть свои дополнительные атрибуты со своими значениями.
На рисунке видно два тега <html> и </html>. Запомните, что открывающий и закрывающий пишутся одинаково, но отличаются только «/». Если тег не закрыть, то обработчик будет всё остальное считать продолжением именно этого элемента. Это очень важно. Особенно в ссылках. Их мы рассмотрим немного дальше.
Тег <html> обязательный. Его всегда нужно писать. А вот закрывать не обязательно. По стандартам надо, но если не закрыть, работать всё равно будет.
Есть и другие основные теги: head и body.
Эти HTML-команды являются каркасом для страницы. Они обязательны. Они также закрываются.
Название тегов соответствует смыслу. Head — голова. В этом разделе указывается служебная и важная информация, которую не видно. Раздел body — тело документа. Здесь содержимое, которое отображается пользователю. Старайтесь закрывать теги сразу, чтобы потом не было путаницы.
В служебном разделе указывается:
- заголовок документа;
- файлы стилей;
- файлы скриптов;
- мета-теги;
- указания для поисковых систем;
- указания для роботов;
- любая другая информация, которая может использоваться программистами, но не пользователям.
Файл стилей подключается вот так:
<link rel = “stylesheet” href = “style.css” type = “text/css”>
Файл скриптов следующим образом:
<script type=»text/javascript» src=’main.js’></script>
У текста обязательно должен быть заголовок. Его указываем вот так:
<title>Заголовок страницы</title>
Этот текст будет отображаться в названии вкладки браузера. Также этот заголовок выводится в результате выдачи поисковой системы.
Теги для оформления текста
Текст нужно размещать в теге абзаца. Он обозначается как <p>Текст</p>. Для текста также можно использовать <span>Строка</span>.
Оформлять текст можно, как и в «Ворде»:
- <i>курсив</i>
- <strong>жирный текст</strong>
- <s>перечеркнутый текст</s>
- <u>подчеркнутый текст</u>
Текст можно оформлять стилями. Их мы рассмотрим в конце, после обзора других элементов.
Использование заголовков
Есть и другие важные HTML-команды. Для создания сайтов обязательно используют заголовки. Они указываются при помощи тега <h2>Заголовок первого уровня</h2>. Существуют уровни от 1 до 6. Важно понимать, что в заголовках должна быть вложенность.
Пример на рисунке.
Имейте в виду, что рекомендуется использовать только один заголовок h2. При этом он должен совпадать с тегом <title>. Разумеется, вы можете указать 200 заголовков h2, но тогда к вам будут применены санкции со стороны поисковых систем.
Использование изображений
Изображения являются неотъемлемой частью веб-страниц. На примере показано, как можно вставить какую-нибудь фотографию.
Как видите, на примере детально показано, что и как называется.
Использование ссылок
Если вы учите HTML-команды, то знать тег-ссылки вы просто обязаны. Это один из главнейших элементов, который составляет Всемирную паутину.
Ссылка обозначается тегом <a>. Но его обязательно нужно закрывать. Кроме этого, у этого элемента есть обязательный атрибут href, в котором и указывается адрес ссылки.
В примере, указанном выше, видно, что вместо текста ссылки указана картинка. То есть можно ставить как текст, так и картинку.
Ссылки можно также форматировать при помощи классов стилей или обычных тегов (курсив, жирный, подчеркивание и перечеркивание).
Использование таблиц
Таблицы используются также очень часто. Изначально они предназначались для представления информации в удобном виде. Но затем верстальщики их использовали для размещения различных элементов страницы.
Таблица создается следующим образом:
<table border=»1″>
<tr>
<td>Текст ячейки</td>
<td>Текст ячейки</td>
</tr>
<tr>
<td>Текст ячейки</td>
<td>Текст ячейки</td>
</tr>
</table>
Атрибут width указывает ширину таблицы. Она может быть в процентах или пикселях. Border указывает толщину рамки.
Структура указывается следующим образом. Тег tr является строкой. Тег td ячейкой. А всё вместе — это таблица.
Таблицу можно выравнивать. Для этого используется атрибут align, который может принимать три значения: Left, Center, Right. Пример использования указан ниже.
Эти HTML-команды (ширина и выравнивание) подходят и для других элементов. Толщина рамки также указывается у изображений.
Использование списков
Используя HTML-команды, можно создать различные виды списков. Практически точно так же, как и в редакторе Word.
В языке Html существуют упорядоченные и неупорядоченные списки (маркированные). Пример такого списка.
<ul>
<li>Первое</li>
<li>Второе</li>
<li>Третье</li>
</ul>
Результат будет такой:
- Первое
- Второе
- Третье
Тип списка | Код в языке HTML |
В виде круга | <ul type=»disc»> |
В виде окружности | <ul type=»circle»> |
С квадратными маркерами | <ul type=»square»> |
Упорядоченные списки создаются точно так же, но только вместо <ul>, используем тег <ol>.
Здесь также можно задать тип вывода списка:
- «1» – арабские числа 1, 2, 3 …
- «A» – заглавные буквы A, B, C …
- «a» – строчные буквы a, b, c …
- «I» – большие римские числа I, II, III …
- «i» – маленькие римские числа i, ii, iii …
Стандартно выводятся арабские цифры.
Поскольку это нумерованные списки, у них есть атрибут start, в котором указывается начальное значение списка. Например, можно выводить список начиная с 10-го или 20-го числа.
Использование стилей
HTML-команды для сайта весьма разнообразны, но все они подчиняются стилям. Стили можно указывать в виде файла в разделе head: <link rel = “stylesheet” href = “style.css” type = “text/css”> или прописать сразу готовый стиль.
Обратите внимание, что между этими определениями стилей есть разница. Файл стилей можно указывать во всех страницах сайта. Как только вы внесете в него изменения, то это обновление коснется всего сайта в целом. Если вы укажете стили на конкретной странице, то изменения и использование этих классов будет только внутри этого файла. За пределы него ваши настройки не выйдут.
Представьте, что у вас 20 страниц HTML и вы решили сделать заголовок на 2 пикселя больше. Если у вас всё в файле стилей, то правку внести нужно только там. Если везде индивидуально, то обновлять придется все 20 страниц.
Указывать только для одной страницы можно следующим образом.
Данный способ использовать не рекомендуется.
Основы HTML для начинающих
Данная статья не претендует быть исчерпывающим руководством по языку разметки документов HTML. В ней описываются основы HTML — базовые принципы, понятия и определения данной технологии, освоив которые, можно без труда двигаться дальше в изучении HTML кодинга.
Поделиться
Твитнуть
Поделиться
Класснуть
Запинить
Для изучения урока, скачайте архив с необходимыми файлами.
HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.
Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.
Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.
Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.
HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.
Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?
На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.
Этакий Word для HTML. Такие визуальные редакторы называются:
WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.
Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.
Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:
- Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
- HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
- Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
- Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
- Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.
Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.
Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.
Структура документа HTML
Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.
Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?
Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:
<!doctype html> <html> <head> <title>Заголовок</title> <meta charset="UTF-8"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="style.css"> <script src="script.js" type="text/javascript"></script> </head> <body> Тело документа </body> </html>Обратите внимание, документы HTML имеют расширение .html.
Итак, по порядку из примера.
<!doctype html> — тип документа (доктайп)
<!doctype html>
Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.
Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.
В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.
<html> — начало документа
<html>
Первый тег, который мы встречаем после доктайпа, это <html>.
HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.
Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.
Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.
Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.
Тег <head>
<head>
Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:
<тег> содержание или другие теги </тег>
Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.
Тег <title> — заголовок документа
<title>Заголовок</title>
Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.
Метатег <meta charset=»UTF-8″ >
<meta charset="UTF-8" >
Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.
Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.
Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.
Фавиконка (favicon)
<link rel="icon" href="favicon.ico" >
Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.
CSS стили документа
<link rel="stylesheet" href="style.css">
Подключает к документу CSS файл со стилями оформления HTML.
CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.
Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.
Тег <script>
<script src="script.js" type="text/javascript"></script>
Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.
В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.
Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.
</head>
Закрываем тег <head> и шагаем дальше.
Тело aka body
<body>
Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.
Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.
Тег <body> может содержать любые HTML теги, необходимые для оформления документа и обеспечения его функционала (формы). Приведу таблицу наиболее используемых тегов и вкратце опишу каждый. Вы можете сразу выполнять приведенные примеры в редакторе.
Тег |
Описание |
<a> |
Тег для создания ссылок в документе. Пример: <a href="http://webdesign-master.ru">текст ссылки</a>Атрибут href указывает документ, на который будет вести данная ссылка. |
<em>, <strong> |
Делает текст курсивом или жирным (акцентируемым). Пример: <em>текст курсивом</em> <strong>жирный (акцентируемый) текст</strong> |
<h2>, <h3>, <h4>, <h5>, <h5>, <h6> |
Заголовки документа. Всего существует 6 уровней заголовков, но на практике используются только от h2 до h5. В документе должен быть только один заголовок, выделенный тегом h2, как главный заголовок документа. Примеры: <h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> ... и т. д. |
<ol>, <ul> |
Списки документа. Представляют собой нумерованный или маркированный список. Элементом такого списка является тег <li> Примеры: <ul> <li>Элемент маркированного списка 1</li> <li>Элемент маркированного списка 2</li> </ul> <ol> <li>Элемент нумерованного списка 1</li> <li>Элемент нумерованного списка 2</li> </ol> |
<p> |
Абзац. Данный тег определяет абзац текста, отбитый от остальных абзацев. Закрывать данный тег очень желательно. Пример: <p>Внешний вид HTML разметки во многом определяется CSS стилями.</p> <p>Тем не менее, некоторые веб-мастера предпочитают не использовать стили на первых этапах проекта.</p> |
<img> |
Картинка. С помощью данного тега в HTML разметку можно вставить картинку. Обязательно указывайте у всех изображений альтернативный текст — атрибут «alt». Данный тег «самозакрывающийся». Пример: <img src="путь_до_картинки.jpg" alt="Текст"> |
<form> + <input> + <textarea> |
Формы и элементы ввода. Формы предназначены для ввода информации в систему на сервере. Этакая обратная связь пользователя и сайта. Например, формы используются, когда нужно отправить какое-то сообщение на сервер. Кроме того, формы могут выполнять и другие функции, но основная задача — отправка данных на сервер. Пример — простая форма отправки сообщения, в которой пользователь сайта указывает свое имя, E-mail и какой-то текст: <form action="ссылка_на_скрипт_обработки_формы"> <input type="text" name="name"> <input type="text" name="email"> <textarea name="text"> Текст сообщения </textarea> <input type="submit" value="Написать"> </form> |
<span> |
Определяет подстроку в строке. Применяется для определения стиля части строки посредством CSS. Один из самых часто используемых тегов. Без оформления, ни как не проявляет себя в браузере. Пример: Изучение HTML, в большинстве случаев, не вызывает <span>ни каких сложностей</span> у новичков. |
<video>, <audio> |
Теги предназначены для вставки видео и аудио в документ. Обязателен закрывающий тег. Примеры: <video src="rolik_chuma.mp4" controls></video> <audio src="muzichka.mp3" controls></audio>Параметр controls говорит нам о том, что на странице должны отображаться элементы управления медиаконтентом, как в обычном аудио/видео плеере. |
<div> |
Во истину, королевский тег. Самый используемый и популярный тег в HTML разметке страницы. Это блочный элемент, предназначенн для управления блоками на сайте. Часто употребляется понятие «дивной» верстки — это значит, что все блоки на сайте сверстаны с использованием данных тегов. Может содержать другие теги <div>. Пример: <div> <div> Текст во вложенном блоке </div> </div>Все элементы <div>, в большинстве случаев, оформляются свойствами CSS стилей. Обязателен закрывающий тег </div>. |
<iframe> |
Данный тег загружает внешнюю страницу в документ. Пример: <iframe src="http://rtfm.org.ru"></iframe> |
Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.
Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.
Например, не:
<video src="ролик чума.mp4" controls></video>
а:
<video src="rolik_chuma.mp4" controls></video>
Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.
Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.
Практическое задание по HTML верстке
Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.
- Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
- Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
- Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.
На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.
Премиум уроки от WebDesign Master
Другие уроки по теме «HTML и CSS»
Иллюстрированный самоучитель по созданию сайтов › Как создают веб-страницы › Простейшие средства создания веб-страниц [страница — 10] | Самоучители по работе в Internet
Простейшие средства создания веб-страниц
В предыдущем разделе мы рассмотрели программы, предназначенные для просмотра веб-страниц. Теперь, прежде чем приступить непосредственно к их созданию, давайте рассмотрим, какие программы мы сможем для этого использовать.
Как уже говорилось выше, веб-страницы кодируются на языке гипертекстовой разметки – HTML. Вообще говоря, чтобы написать HTML-файл, достаточно иметь любой текстовый редактор, лишь бы он умел не добавлять в текст свои специальные символы. Самый простой вариант – это редактор Notepad (Блокнот), входящий в стандартную поставку Windows (рис. 1.7). Собственно говоря, это именно то, что нужно, – простейшая программа, сохраняющая написанный текст именно в том виде, в котором он был введен, и ничего лишнего. (Тем, кто не работает под Windows, в качестве замены Блокноту подойдет почти “все что угодно”: Edit – для MS-DOS, vi или jed – для Linux, Kedit – для Linux/KDE и т. д.)
Рис. 1.7. Код HTML в текстовом редакторе Блокнот
Однако в очень простых текстовых редакторах типа Блокнота весь HTML-текст приходится писать вручную, а многим хотелось бы какую-то часть работы автоматизировать. Учитывая это желание, разработчики создали специализированные средства, призванные облегчить труд веб-программиста (как иногда называют тех, кто пишет код HTML, в отличие от веб-дизайнеров, которые придумывают внешний вид и иногда даже пытаются воплотить его, используя программы работы с графикой). Давайте сначала кратко опишем несколько простых программ, а потом остановимся на лучших из них.
Веб-редактор TextPad
Итак, начнем. Тем, кто предпочитает набирать код HTML вручную, но кому не хватает функциональности Блокнота и подобных ему программ, можно посоветовать программу под названием TextPad, которую можно загрузить, обратившись по адресу www.textpad.com. Эта программа по сути весьма похожа на Блокнот, однако разработчики специально предусмотрели некоторые удобства для того, чтобы писать код HTML (а также языков Java, С, C++, Perl и еще некоторых). Это выражается в том, что при написании HTML – документа все теги автоматически подсвечиваются синим цветом, их атрибуты – темно-синим, а значения атрибутов – зеленым (цвета можно настроить по собственному желанию, так же, как и шрифт). Это очень удобно. К примеру, если автор случайно ошибется в имени тега или атрибута, то оно останется черным, и он сразу поймет, что здесь что-то не то. Правда, проверка не является “ интеллектуальной”: программа может спокойно “разрешить” приписать тегу какое-либо свойство, которого у него в принципе быть не может (спокойно подсвечивает абракадабру типа <BR ALIGN=»top»> или </BR>).
В отличие от Блокнота, TextPad – редактор многооконный. В нем можно открыть сразу несколько документов и работать, легко переключаясь между ними с помощью списка в левой части окна или вкладок в нижней части.
Веб-редактор TextPad позволяет автоматизировать набор многих тегов. Если не хочется набирать их вручную (многие этого не любят просто из-за того, что приходится переключаться на латинский шрифт), то обратите внимание на левую нижнюю часть окна программы. Там приведен список наиболее распространенных HTML-тегов, которые можно вставлять в свой основной текст двойным щелчком мыши. Правда, в списке указаны не сами теги, а их описание. Например, чтобы вставить тег <BR>, нужно выбрать из списка пункт Block › Break Line. Однако к этому быстро привыкаешь. Почти все пункты списка вставляют теги вместе с закрывающим парным тегом. Например, если выбрать пункт Block › Preformatted, в текст автоматически будут добавлены теги и <PRE> и </PRE>. Некоторые пункты добавляют сразу целые блоки-заготовки. Если, к примеру, выбрать пункт Table (Таблица), в текст будет вставлен такой код:
<TABLE ALIGN="left" BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="100%">
<TR ALIGN="left" VALIGN="middle">
<TH></TH>
<TH>?</TH>
<TR ALIGN="left" VALIGN=middle ">
<TD>? </TD>
<TD>? </TD>
</TABLE>
Title компьютер title — создание сайта в блокноте.
Не привычный заголовок для статьи? Речь пойдёт не о компьютерах, речь в статье пойдёт об элементарном HTML-сайте. Рассмотрим то, как с помощью блокнота, встроенного в стандартный пакет программ для Windows, создать простой сайт.
Создание WEB-сайта «Компьютер»
Создадим элементарный сайт на HTML про компьютеры. Пусть это будет WEB-сайт про персональный компьютер, на котором мы хотим рассказать о том, что такое Персональный Компьютер (ПК), создадим соответствующие страницы: главную, страницу о программном обеспечении и о компьютерных терминах. Начнём создавать сайт с самого начала, для этого нажимаем на меню компьютера «Пуск» — «Все программы» — «Стандартные» — «Блокнот», запускаем блокнот и начинаем разбираться с программированием сайта.
Самое первое в создании сайта
Итак, мы хотим создать свой сайт с помощью блокнота. Для этого следует знать, что WEB-страница формируется с помощью специальных тегов. Теги должны быть заключены в угловые скобки, представляющие из себя знаки больше или меньше. Теги страницы могут быть парными или одиночными. Парные теги должны иметь открывающий и закрывающий тег — всё вместе это называется контейнер. Например, два тега
— это контейнер.
Закрывающий тег от открывающего отличается тем, что перед ним обязательно указывается прямой слэш, то есть знак «/». Все теги могут быть записаны как с помощью прописных, так и с помощью строчных букв.
Весь html-код страницы должен быть помещён внутри контейнера
Без указания этих тегов браузеры не смогут правильно интерпретировать содержимое страницы.
Далее что следует знать — web-страницы делятся на две логические части. Это заголовок и содержимое.
Заголовок страницы и TITLE
Есть такой контейнер
— это заголовок WEB-страницы. Заголовок содержит в себе название документа и некоторую справочную информацию о данной странице. Это может быть информация об используемой кодировке, указание не файл стилей, об используемом программном обеспечении сайта и так далее. Пока что эта информация нам не особо полезна.
Также есть специальный контейнер
— между этим открывающим и закрывающим тегом указывается название веб-страницы. Данное название отображается в строке заголовка браузера. Допусти, указав
<ТIТLE>Компьютер</ТIТLЕ>
<ТIТLE>Компьютер</ТIТLЕ> |
мы увидим в заголовке в браузере название «Компьютер».
Итак, заголовок нашей страницы принимает такой вид:
<HEAD> <ТIТLE>Компьютер</ТIТLЕ> </HEAD>
<HEAD> <ТIТLE>Компьютер</ТIТLЕ> </HEAD> |
Содержимое веб-страницы
— это контейнер, куда помещается всё основное содержимое страницы сайта. Данный контейнер может содержать таблицы, бегущие строки, ссылки на звуковые, видео и графические файлы, текст и так далее.
Чтобы понимать принцип создания сайта с нуля в блокноте, поместит в основной контейнер текст:
<BODY> Компьютер — это электронное вычислительное устройство. </BODY>
<BODY> Компьютер — это электронное вычислительное устройство. </BODY> |
Основа WEB-страницы
Итак, со структурой мы разобрались. Открываем блокнот и вносим туда следующий текст:
<HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Компьютер — это электронное вычислительное устройство. </BODY> </HTML>
<HTML> <HEAD> <TITLE>Компьютер</TITLE> </HEAD> <BODY> Компьютер — это электронное вычислительное устройство. </BODY> </HTML> |
Чтобы было удобнее — для размещения сайта создать также отдельную папку, куда можно будет складывать все файлы сайта. Сохраняем в эту папку созданную в блокноте страницу с именем файла index.htm или index.html. Таким названием принято называть титульный файл сайта.
Чтобы увидеть созданную и сохранённую страницу сайта — открываем файл index.htm или index.html с помощью браузера. Создание других страниц и дальнейшую проработку сайта рассмотрим в следующих статьях.
базовых HTML-тегов | Infopeople
Первый тег в любом HTML-файле — это тег . Это сообщает веб-браузерам, что документ является файлом HTML.
Второй тег — это тег . Информация между тегами HEAD не отображается в окне браузера, но по-прежнему важна. Это называется мета информации. Самая важная метаинформация в теге HEAD — это тег