• доступно о веб-разработке
03.10.2012 HTML, Технологии , , , , ,

Гранит HTML

Поскольку уже появляются те, кто просит начать непосредственное программирование, то так тому и быть. Кто-то грызет гранит науки, а мы  с вами с сегодняшнего дня вместе будем грызть гранит HTML.

Эта аббревиатура расшифровывается как HyperText Markup Language, то есть «язык гипертекстовой разметки».

Вообще, после того, как западная культура (или её отсутствие) обрушилась на нас в лихие 90-ые, слова «супер» и «гипер» стали символом чего-то дико крутого.

На самом деле, так и есть, потому что гипертекст — это настолько крутой текст, что в нем вы можете расширить привычное представление гипер-ссылками.

На этом построен весь Интернет. Одни страницы ссылаются на другие, и наоборот.

Так как же выглядит этот гипертекст?

Вот вы сейчас читаете этот материал и не подозреваете, что у него есть изнанка.

К примеру, этот текст вдруг выделен курсивом, а этот жирным. Как это делается? При помощи тегов.

Теги

Запомните это понятие раз и навсегда. Тег — это нечто между скобочек, простым языком. Правильнее в данном контексте называть их HTML-теги, то есть теги гипертекстового языка разметки.

Сейчас проведем эксперимент. Нажмите на клавиатуре Ctrl+U и вместо данной страницы вы увидите её разметку.

Пауза.

Нажали? Страшно стало? Не пугайтесь от обилия тегов. Со временем вы начнете понимать, что каждый из них значит.

Полный их список доступен по ссылке:

http://htmlbook.ru/html

Вообще, вам не надо учить их как-то специально. Их нужно запоминать по мере появления задачи, в контексте.

Теги бывают открытыми и закрытыми.

Открытые обрамляют какой-то текст или другие теги. Например, <b>это жирный текст</b>.

Закрытые теги не имеют внутреннего содержимого. Например, такой тег <img src=»https://storage.yandexcloud.net/codemotion/uploads/2012/09/logo.jpg»/> выведет следующее изображение:

Уловили суть?

Как видите, теги могут иметь атрибуты.

К примеру, тег img без атрибута src не покажет картинки, потому что для него атрибут src является обязательным.

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

Обратите внимание, что многие теги и их атрибуты являются сокращениями английских слов.

Например, img — image, изображение. А src — source, источник. То есть источник изображения.

Таким образом просто запомнить все основные теги.

Давайте еще поэкспериментируем.

<img src="https://storage.yandexcloud.net/codemotion/uploads/2012/09/logo.jpg"  width="225" height="62" alt="Для тех, у кого не загрузилось изображение" title="Наведите мышь!"/>

Для тех, у кого не загрузилось изображение

Поняли, что я сделал? Уменьшил при помощи нужных атрибутов размер изображения, установил обязательный текст, который будет отображаться пока изображение грузится (сегодня это доля секунды), а также установил заголовок, который будет виден при наведении мыши.

В конце тег закрывается косой чертой и последней скобкой — />.

Пока хватит, к этим основам мы будем регулярно возвращаться.

Страница

Итак, задание. Сейчас мы с вами создадим вашу, возможно, первую HTML-страницу.

Для этого выйдите на рабочий стол (клавиши Win+D, обратно Alt+Tab), и правой кнопкой кликните в пустом месте.

Далее выберите «Создать» и текстовый файл.

Файлу присвойте имя «index.html» (без кавычек).

Расширение файла (его тип, указанный после названия и точки) говорит о том, что это HTML-документ. В прошлом веке еще можно было использовать расширение .htm, но оно давно стало атавизмом.

Это ваша первая страница, поздравляю! Но пока она пуста.

Теперь, если вы дважды кликните на ней, то она откроется в браузере (программе для просмотра Интернета).

Внимание! Это еще не веб-сайт. Это просто страница, открытая в браузере.

Поэтому адрес у неё будет такой, как в адресной строке выше.

Заполним её базовым содержимым.

Структура

Любая страница имеет структуру. HTML с момента своего появления претерпел несколько версий. На данный момент идет плавный переход с 4 на 5-ую. Когда я учился основам, это была версия 3.2.

Опустим не столь важные пока детали, и опишем базовую структуру.

Внутри <!— —> размещены комментарии, которые не обрабатываются браузером.
Самая первая строка <!DOCTYPE  html> тегом не является, но говорит браузеру по своду каких правил отображать страницу. В нашем случае — это модный HTML5.

<!DOCTYPE  html>
<html>
<!-- html — это корневой обрамляющий тег. Без него страница не будет читаться -->
<!-- Мета-информация. Она влияет на такие вещи, как: -->
<head>
<title>Это заголовок страницы</title> <!-- Заголовок страницы -->
<meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <!-- Кодировка страницы -->
</head>
<!-- Непосредственно тело страницы. То, что мы видим в окне. -->
<body>
<img src="https://storage.yandexcloud.net/codemotion/uploads/2012/09/logo.jpg"  width="225" height="62" alt="Для тех, у кого не загрузилось изображение" title="Наведите мышь!"/> <!-- Наше изображение из примеров выше -->
<h1>Привет мир!</h1> <!-- Заголовок перового уровня -->
<p> <!-- Параграф -->
Меня зовут <b>ДвижКод</b>!  <!-- Впишите вместо «ДвижКод» своё имя -->
</p>
</body>
</html>

Вот теперь вернитесь к файлу на рабочем столе.

Правой кнопкой на нем щелкните. Выберите «Edit with Notepad++»:

Вставьте указанный выше код в файл и нажмите «Файл » Сохранить» или же просто Ctrl+S на клавиатуре.

Вуаля! Поздравляю, вот теперь это действительно ваша первая страница.

Вот так она будет выглядеть, если вы вызовете её в бразуере, дважды кликнув на файле (или правой кнопкой → «Открыть»):

Вы узнали, как грызть гранит HTML. Далее перед вами открывается непаханое поле, которое нам еще предстоит вспахать.

Настоятельно рекомендую использовать браузеры Google Chrome или Firefox для разработки. Первый сегодня самый популярный за счет скорости работы.

Кто справился с заданием? Кого можно поздравить?

P.S. Внимание!

Если ваши HTML файлы открываются в виде текста или же не открываются браузером вовсе, то смотрите первый видеоурок.

Поделиться

Комментарии Правила дискуссии

Читайте ранее:
Блокнот — орудие разработки
Блокнот — орудие разработки

Опытные программисты, узревшие иллюстрацию к посту, могут расслабиться. Меня могли бы счесть хардкодером (программистом-программистом), если бы было написано «Блокнот —...

Закрыть