Основы HTML

Всемирная паутина – самое значительное достижение 20 века. Она была создана в конце 80-х годов прошлого столетия, но технологии работы с ней все еще развиваются. Фундаментом этих технологий является HTML (HyperText Markup Language – язык гипертекстовой разметки).

Используя HTML, можно создавать статические страницы и сайты.

В HTML, как и в любом другом языке, есть свои правила, которыми руководствуются все вебмастера интернета. Эти правила призваны установить «взаимопонимание» между кодером и браузером.

Основные понятия HTML

1. Код.

HTML-код – уникальная последовательность символов, благодаря которой веб-страница приобретает свой неповторимый внешний вид. Код для веб-страницы – все равно, что ДНК для человека.

Код любой веб-страницы можно просмотреть тремя способами:

    1. Вызвать контекстное меню браузера, и выбрать пункт о просмотре исходного кода.
    2. Нажать сочетание клавиш Ctrl + U.
    3. Открыть страницу с помощью блокнота.

Второй способ не работает в Internet Explorer. А последний способ доступен только в том случае, если страница сохранена на носителе вашего компьютера.

2. Элемент

Элемент – это основа HTML, звено для построения кода, его неделимая единица. Любой код, который вы напишете для создания веб-страницы, будет состоять из элементов. Абсолютно любой.

Элемент HTML представляет собой символ или сочетание символов.

Набор применяемых в HTML элементов строго ограничен. В своем коде вы можете использовать только их.  Посмотреть полный список >>

3. Тег

Тегом называется элемент, заключенный в угловые скобки. В коде страниц пишутся именно теги, а не сами элементы.

В примере показаны так называемые открывающие теги. В большинстве случаев для завершенности фрагмента кода к открывающему тегу требуется прибавить закрывающий тег.

Регистр букв в написании тегов не имеет никакого значения. Т.е. записи <b> и <B> абсолютно идентичны.

Контейнер – это совокупность открывающего и закрывающего тегов.

Lorem ipsum – это текст, расположенный внутри контейнера, который в общем случае может быть любым.

Забегая вперед, скажу, что контейнер элемента p в приведенном выше примере создает абзац с текстом lorem ipsum. При этом открывающий тег <p> определяет начало абзаца, а закрывающий </p> - его конец.

5. Одиночный тег.

Одиночный тег – это тот, которому не требуется закрывающий тег. Он не создает контейнеров.

В примере – тег переноса строки. Это аналог символа enter в текстовом редакторе. У обрыва строки и начало и конец всегда находятся в одном месте, поэтому тег и является одиночным.

6. Параметр тега

Параметры позволяют регулировать способ отображения информации, добавляемой с помощью тега. Например, тег <p> позволяет добавлять на страницу абзац. А использование параметра align этого тега дает возможность выравнивать абзац по левому, или правому краю:

В результате помещения этой конструкции в код, абзац на веб-странице будет выровнен по левому краю.

А этот код выровняет абзац по правому краю.

Параметрами могут обладать только открывающие теги.

7. Значение параметра

Значения параметров задаются в кавычках сразу после знака равенства. Одни параметры могут иметь ограниченный набор значений, другие – абсолютно любые значения. Есть и третьи параметры, которые могут принимать любые значения из конкретного множества. Например, из множества целых чисел.

Не закрывая блокнот, перейдите к открытой ранее веб-странице и нажмите F5 (обновить). Поздравляю, вы создали первую в вашей жизни веб-страницу! Из таких же страниц состоит и весь интернет, только расположены они не на вашем компьютере, а на серверных компьютерах.

Теперь вернитесь в блокнот и поменяйте слово white на lightyellow, после чего нажмите Ctrl + s. Затем переключайтесь на браузер и жмите F5. Фон сменился на светло-желтый!

Вот так проще всего работать с html-кодом: редактируемая веб-страница должна быть открыта и в блокноте и в браузере одновременно. В блокноте вы изменяете код, а в браузере проверяете результат этого изменения. Зачастую приходится менять по одному тегу или параметру за один шаг; поэтому, повторюсь: обязательно держите страницу открытой и в блокноте и в браузере, закрывая эти окна только по завершении работы со страницей.

Переключаться между блокнотом и браузером удобнее при помощи комбинации Alt + Tab. Вообще, работать с кодом всегда лучше при помощи клавиатуры. При больших объемах работы вы на этом значительно сэкономите свое время. Вот сочетания клавиш, которыми пользуюсь я сам:

Ctrl + C – скопировать
Сtrl + V – вставить
Ctrl + X – вырезать
Ctrl + A – выделить все
Ctrl + Z – отменить
Ctrl + S – сохранить
Ctrl + W – закрыть файл

F5 – обновить страницу
Сtrl + Tab – переключиться между вкладками
Ctrl + W – закрыть вкладку
F11 – переключиться в полноэкраннный режим
Ctrl + U – просмотреть исходный код страницы

Сочетание Ctrl + u особенно интересно, поскольку позволяет быстро перейти к коду просматриваемой страницы, вне зависимости от того, где она находится и как написана. Зайдите сейчас на страницу вашего любимого сайта и нажмите там это сочетание клавиш. Просто, не правда ли?

Есть и другой способ вызова исходного кода – через контекстное меню. Однако в интернете существуют страницы с законспирированным кодом; на таких страницах благодаря стараниям их создателей контекстное меню вызвать просто невозможно. В таком случае вас выручит сочетание Ctrl + u, против которого нет средства.

И последнее сочетание, полезное как в браузере (во время просмотра исходного кода), так и в блокноте: Ctrl + F – поиск.

При редактировании объемного кода нецелесообразно искать необходимый фрагмент глазами. Вместо этого проще осуществить поиск по определенному ориентиру. Например, вы знаете, что рядом с тегом, который вы ищите, находится словосочетание «основы html». Тогда вы, нажав Ctrl + F, находите это сочетание, а вместе с ним и необходимый фрагмент кода. В определенных ситуациях такая методика поиска поможет сэкономить вам кучу времени.