Данным циклом я хочу открыть серию уроков, посвященных HTML . Я принял такое решение, потому что мне хотелось бы попробовать обучить создавать пользователей сайты с нуля. Такая мысль была у меня в голове уже довольное долгое время. Лишь вставал вопрос, с чего начать, с HTML или непосредственно приступить к установке движка и дальнейшей его настройки.
Но если начинать с изучения движка, то некоторая часть пользователей, которая не знает HTML , окажется обделена. Поэтому я решил начать с основ и сделать это так, чтобы даже любой новичок мог разобраться что да как.
Итак, что же такое HTML ?
Сама аббревиатура расшифровывается как Н урегТ ехt M arkиp L aпguage (язык гипертекстовой разметки ).
А если выражаться просто, то HTML – это специальный язык разметки, который объясняет браузеру, как отображать ту или иную веб-страничку . Т. е. каким шрифтом показывать текст, в каком порядке компоновать элементы, какие элементы отображать подчеркнутыми и т. д. И в зависимости от того, какой элемент будет встречаться браузеру, в соответствии с заложенными в сам браузер правилами, этот элемент так и будет отображаться. Однако, эти правила потом можно будет поменять, но об этом я уже буду говорить в своих следующих уроках, которые будут посвящены CSS .
Предлагаю для начала рассмотреть пример самой простой веб-странички , которая может быть. Сейчас вы не должны заострять свое внимание на том, что обозначают те или иные тэги . Всему свое время, для начала просто обратите внимание на то, где что находится в коде и как это всё соотносится с тем, что отображается в браузере. Рассмотрим пример документа HTML :
Один день из моей жизни
Подготовка к концерту
Сегодня я проснулся рано, так как предстоял тяжелый день. Ведь сегодня я должен выступить на концерте перед сотней зрителей. А чтобы убедиться в том, что всё пройдёт хорошо, я должен повторить репетиционную программу
Репетиция
Всё прошло без сучка и задоринки. Из нашей команды никто не сбивался с ритма, и как оказалось все напрасно волновались.
Концерт
Все выступили отлично, хотя мне кажется был такой момент, когда наш барабанщик сбился с темпа. Но мы ловко выкрутились из ситуации.
Для начала вам надо будет набрать этот текст в каком-нибудь текстовом редакторе (наиболее удобным я считаю является Notepad ++ ) и сохранить файл под именем index .html где-нибудь у себя на диске. При двойном щелчке на сохраненном файле у вас откроется страничка примерно такого вида.
Обратите внимание на то, что сами тэги при этом не отображаются, а отображается сам контент, который находится между ними. А отсюда вы можете сделать вывод, что тэги выступают в HTML в качестве оформительского элемента.
Посмотрите на исходный код. Как вы могли уже заметить, в нем перед словом “Один”, есть небольшой отступ. Однако браузер его не учел, он просто его проглотил молча, как будто и не было его никогда. Более того, если вы попробуете поставить множество пробелов между словами, то они все будут восприняты браузером как один пробел, - у HTML есть такая особенность.
И вот ещё такой совет, - когда пишите HTML -код, приучайте себя к тому, чтобы делать отступы в тех тэгах, которые являются вложенными в другие. Например, тэги title и body вложены в тэг html . Значит, когда будете писать эти тэги, то не забывайте делать соответствующие отступы. Обычно они делаются с помощью двух пробелов, либо табуляции, - это уже дело вкуса. Зачем это нужно? Сейчас, в том небольшом кусочке документа, который я привёл как пример выше - информации немного, поэтому и запутаться там довольно проблематично. Однако, если на страничке будет находиться множество вложенных элементов, то не будет ничего проще, как заплутать в этом огромном коде и с трудом сообразить, в какой части документа вы сейчас находитесь. Так что лучше приучать себя к хорошему стилю сразу, потом вы это сами поймете и вам это сыграет в дальнейшем хорошую службу.
Стоит также указать и самый необходимый минимум тэгов, которые должны быть в HTML -документе. Я говорю про эту часть:
Но даже если этой части и не будет, то большинство браузеров посмотрит на все это сквозь пальцы и всё равно отобразит вашу страничку. Однако такой фривольный стиль написания кода, при котором человек пропускает большое количество тэгов, является дурным тоном написания, поэтому желательно, чтобы все эти элементы были на вашей странице в любом случае. Иначе это может грозить проблемой совместимости с другими браузерами, что в результате сможет повлиять на внешний вид вашего сайта, и как следствие – посещаемости.
Кроме того, вы можете писать комментарии в HTML -документ, - это чисто служебная информация, которая предназначена исключительно для вас. Обычно это какие-то важные пометки, которые служат для вас напоминанием или просто чем-то, на что стоит обратить своё внимание. Комментарии не обрабатываются браузером и, а это значит что пользователь их не увидит. Пишутся они обычно вот так:
А теперь попробуем разобрать сами, какой тэг нашего примера выше за что отвечает.
Тэг html означает, что начинается вывод html кода.
head – раздел служебной информации. В числе прочего здесь находится title , который отвечает за текст в заголовке окна браузера. К этому разделу можно отнестись ещё как к информации, которую мы хотим рассказать браузеру о данной страничке.
body – начинается основная часть документа.
h 1 – заголовок.
h 2 – подзаголовок.
p – абзац.
На этом пожалуй всё! Если это был ваш первый HTML -документ, то я вас поздравляю! Да, он выглядит не так здорово, как нам бы того хотелось. Но тем не менее, у нас есть материал, над которым мы уже можем работать. А в следующих уроках, всё будет ещё интереснее, и мы потихоньку коснёмся работе с каскадными таблицами стилей (CSS ) .
- < Назад
Для комментирования, вам необходимо зарегистрироваться.
HTML - язык разметки гипертекста, который сделал интернет таким, каким мы его знаем и любим. Именно благодаря этому замечательному инструменту сайты выглядят красиво и современно, а также обеспечивается удобство их использования. Язык HTML просто компонует элементы веб-страницы в удобный для пользователя вариант. Его работа сравнима с тем, что делают типа MS Word или OpenOffice. Они превращают безликую массу букв в документ, в котором есть абзацы, жирный текст, курсив, таблицы и даже изображения. Примерно то же самое делает язык HTML, с той лишь разницей, что его документы отображаются в браузере, да и возможности этого инструмента гораздо шире, чем у текстового редактора. Для разметки используются теги — специальные команды, описывающие структуру веб-страницы. Они заключены в угловые скобки - <тег>, чтобы браузер мог отличить их от общей массы текста. Далее мы рассмотрим основы HTML для начинающих.
Визуальные редакторы
Новички, только ступившие на путь изучения HTML, часто начинают свою работу с программ, позволяющих создавать сайты без каких-либо знаний. В них можно просто расположить элементы на экране так, как они будут отображаться в браузере. Казалось бы, вот он — источник вечной благодати, позволяющий избавиться от большинства веб-разработчиков. Но не всё так просто, так как у визуальных редакторов есть масса недостатков, которые делают невозможным их использование в серьёзных проектах.
Все эти программы создают много ненужных тегов, которые делают конечный вариант страницы громоздким и неоптимальным. Конечно, в наш век скоростного интернета это имеет меньшее значение, чем раньше, но есть ряд причин, по которым лаконичный и грамотно написанный сайт получается более практичным, чем его собрат, созданный в визуальном редакторе. Веб-страница, сделанная в такой программе, будет плохо обрабатываться поисковыми роботами, так как для них важен каждый килобайт кода, а громоздкий и нелогичный код с кучей едва ли придётся им по вкусу. Помимо этого, редакторы часто отстают от времени, становясь неактуальными, а тратить ресурсы на их развитие нецелесообразно, так как ни один профессионал не пользуется этими продуктами. Поэтому каждый, кто хочет работать в сфере создания сайтов, должен знать основы HTML.
Теги
Как упоминалось выше, теги описывают браузеру структуру веб-страницы. Большинство из них имеют открывающий и закрывающий тег, но далеко не все. Например,
Встречаются также одиночные теги, которые не нужно закрывать. В них содержимое находится внутри, так же как и может быть прописан для большинства HTML-тегов и задаёт свойства элемента. Обозначается он в открывающем теге и выглядит примерно так: атрибут=«...», где вместо точек находится значение атрибута. Знание тегов является первым и самым важным шагом для освоения HTML. Основы этого искусства также подразумевают понимание структуры веб-страницы.
Структура документа
Каждый документ HTML имеет соответствующее расширение, например, Index.html. Так браузер сможет понять, с чем он имеет дело, и правильно отобразит страницу. Все файлы, используемые для создания сайта, желательно хранить в одной директории, что в дальнейшем существенно облегчит вам жизнь. Основы языка разметки гипертекста HTML предполагают чёткое понимание структуры документа. Начинается он с тега , сообщающего браузеру версию HTML, которая используется в этом документе. На данный момент актуальна пятая версия языка, так что тут не нужно ничего выдумывать, можно смело вставлять приведённый выше тег в начало любой страницы.
Потом идут основные парные структуры, составляющие «скелет» сайта. Первый тег, в который вложены все остальные — .... Всё, что находится за его пределами, не распознаётся браузером как веб-страница, так что он открывает документ и закрывает его. Этот тег является обязательным для любого документа. В нём также содержатся ещё несколько обязательных тегов, которые будут рассмотрены ниже.
Head
Внутри тега
... содержится информация технического характера, которая не будет отображаться на странице, но, тем не менее, является важной частью документа HTML. Основы сайта закладываются именно в этом месте, здесь выбирается кодировка и вводится название страницы. Оно содержится внутри обязательного тегаLink
Знание основ HTML также предполагает использование каскадных стилей оформления, или css. В них задаются свойства элементов, которые будут отображены на странице. Современный подход к этой задаче предполагает вынесение таких характеристик, как цвет, высота и местоположение элемента, во внешний файл для большего удобства. Для подключения css-файла используется тег . В готовом виде это выглядит примерно вот так: , где href указывает на местоположение файла, а type - на его тип.
Body
Именно в этой части HTML-документа создаётся видимая часть страницы. Всё, что делается внутри «тела», будет показано браузером. В
используется огромное количество тегов HTML. Основы — это форматирование текста, работа со ссылками и простейшие инструменты для структурирования веб-страницы. Чтобы приступить к работе в HTML, достаточно знать основные теги и уметь ими пользоваться. Ниже приведены самые популярные из них:- - применяется для выделения подстроки, на которую будет распространяться особый стиль, описанный в css;
- - создаёт ссылку на веб-странице; адрес перехода задаётся атрибутом href;
- - один из популярнейших тегов современности; каждый, кто решил изучить основы языка HTMLl, должен уделить ему особое внимание, поскольку это блочный элемент, на основе которого сделана львиная доля современных сайтов (параметры для блоковзадаются в css, и внутри этого тега могут располагаться другие блоки);
Выделяет абзац из текста; содержимое абзаца находится между открывающим и закрывающим тегами;
- - нумерованный список, элементы которого заключаются в парный тег
- - маркированный список, в котором, так же как и в нумерованном, элементы обозначаются тегом
-
- заголовки документа (цифра обозначает уровень заголовка, то есть
- главный заголовок, а последующие варианты являются его подзаголовками, кстати, заголовки уровней
,
почти невозможно встретить на просторах интернета), также важно помнить, что на странице может быть лишь один заголовок
;
- - жирный текст;
- - курсив;
- - вставка картинки на интернет страницу (это единичный тег, ему не требуется закрывающий, но в нём обязательно нужно указать атрибут alt, в котором указывается текст для изображения);
Это далеко не все теги, необходимые для создания собственной веб-страницы, но их вполне достаточно, чтобы заложить основы HTML для начинающих.
CSS
Развитие языка HTML привело к тому, что каждый тег обзавёлся массой атрибутов, да и требования к внешнему виду веб-страниц существенно возросли. Код стал громоздким и неудобным, сложно было прочитать его, не то что адаптировать или изменить. К тому же, если на вашем сайте десять страниц, на которых много заголовков, отмеченных зелёным цветом, а вам вдруг захотелось сделать их красными, то придётся попотеть, изменяя каждый вручную. С появлением каскадных таблиц стилей этот процесс стал простым и логичным, да и HTML-код стал куда более читаемым.
Применение CSS
Для создания веб-страниц необходимо знать основы HTML и CSS, так как сейчас без знания каскадных таблиц стилей делать в этой сфере нечего. В них задаются атрибуты для любого элемента, распространяющиеся на весь документ. Таким образом, можно задать цвет сразу для всех элементов
Для того чтобы подключить файл css к документу, существует тег link. Чуть выше был описан принцип его использования, но он не является единственным вариантом объединения всех стилей в одном месте. Есть ещё тег