Для первого теста в редакторе по вашему выбору создайте новый файл. Если вы используете редактор Windows, откройте его через Пуск > Все программы > Стандартные приложения > Блокнот.
Затем выберите Файл > Сохранить как. Важно правильно указать в поле Тип файла.
Здесь обязательно необходимо выбрать Все файлы. В поле Имя файла введите index.htm. Теперь вы можете сохранить файл в нужном месте. Этот файл теперь будет вашим рабочим файлом, вашим первым файлом HTML, который пока еще пуст. Это скоро изменится.
Если вы используете Dreamweaver, лучше непосредственно при запуске программы указать, что вы хотите создать файл HTML.
HTML-основы
Перед тем как начать изучение основ HTML, важное замечание о семантике, используемой в этой серии и в мире HTML. Вы постоянно столкнетесь с терминами тег и элемент, которые к сожалению часто неправильно интерпретируются. Пример:
<a href="news.htm">На новостной портал</a>
Этот синтаксис показывает элемент a, а именно <a href="news.htm">На новостной портал</a>. Этот элемент состоит из открывающего тега a, то есть <a> или полностью <a href="news.htm">, содержимого элемента На новостной портал и закрывающего тега a </a>. Кроме того, элемент a имеет атрибут href со значением атрибута news.htm.
Приведенный пример показывает определение гиперссылки в HTML через элемент a. Этот элемент a отмечен открывающим тегом <a> и закрывающим тегом </a>. Таким образом, вы видите, что использовать термины элемент и тег правильно вовсе не так сложно.
Теперь же начнем. Откройте сохраненный ранее файл HTML в вашем редакторе. Каждый HTML-документ имеет определенную структуру.
Вот прежде всего сама эта структура во всей своей красе:
<!DOCTYPE html> <html lang="de"> <head> <title>PSD-Tutorials.de</title> <meta charset="UTF-8" /> </head> <body> </body> </html>
Что означают отдельные записи? Давайте начнем с так называемой декларации типа документа.
<!DOCTYPE html>
Через такую декларацию типа документа вы сообщаете браузеру, в котором позднее будет отображаться ваш веб-сайт, какой HTML-стандарт вы используете. В данном случае речь идет о HTML5. Если бы вы использовали HTML 4.01, указание DOCTYPE выглядело бы так:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Именно то, что касается декларации типа документа, зачастую вводит в замешательство начинающих в HTML, потому что существует довольно много различных вариантов. Однако все просто: воспринимайте декларацию типа документа как своего рода инструкцию по построению, в которой описывается, какие элементы могут содержаться в документе.
Я всегда рекомендую использовать краткое указание HTML5.
<!DOCTYPE html>
Современные браузеры распознают его и отображают страницы, в которых он используется, в стандартном режиме. Тем не менее вам также нужно действительно определять только те HTML-элементы, которые разрешены в HTML5. Об этом мы поговорим позже.
Теперь перейдем к элементу html.
<html lang="de"> … </html>
Этот элемент окружает весь документ. Заметим, что присутствует атрибут lang. Через него указывается язык, используемый в документе. Вот несколько сокращений lang для немецкоговорящего сообщества.
• de – немецкий (стандартный)
• de-ch – немецкий (Швейцария)
• de-at – немецкий (Австрия)
• de-lu – немецкий (Люксембург)
• de-li – немецкий (Лихтенштейн)
Также существует больше различных сокращений lang для английского.
• en-us – английский (США)
• en-gb – английский (Великобритания)
• en-au – английский (Австралия)
• en-ca – английский (Канада)
• en-nz – английский Новая Зеландия)
• en-ie – английский (Ирландия)
• en-z – английский (Южная Африка)
• en-jm – английский (Ямайка)
• en – английский (Карибские острова)
Не важно, используете ли вы двухбуквенные сокращения de, gb и т. д., или предпочитаете составленные сокращения, показанные ранее, в конечном итоге решать вам. Я предпочитаю двухбуквенные.
В элементе head ожидаются метаданные документа.
<head> … </head>
Заголовочные данные звучат, должно быть, немного громоздко, но всё быстро объяснено. Сюда включаются, в частности, такие вещи, которые более детально описывают документ. К примеру, это заголовок и используемый шрифт. Также здесь можно включить скрипты и таблицы стилей, а также определить общие метаданные. Но об этом чуть позже.
Особенно важен элемент title.
<title>Учебные пособия по работе с изображениями в Photoshop, веб-дизайн & фотография - PSD-Tutorials.de </title>
Через него определяется заголовок, который необходим в самых разных местах.
• В строке заголовка браузера.
• Когда создаётся закладка в браузере.
• И, конечно, заголовок играет очень важную роль с точки зрения оптимизации для поисковых систем.
Таким образом, видно, насколько важен заголовок. Выбирайте заголовок кратким и содержательным.
Для подробного описания страницы можно использовать метаданные. Подробная информация по этому поводу будет представлена позже.
Теперь переходим к используемому шрифту.
<meta charset="UTF-8" />
Это указание важно для браузеров. Только так они знают, как необходимо кодировать символы для их правильного отображения. Только при указании правильного шрифта, например, буквы с умляутами и специальные символы будут отображаться правильно. Обычно здесь указывают UTF-8.
Теперь переходим к фактическому содержанию веб-страницы, то есть к тому, что посетители действительно видят. Всё это определяется в элементе body.
<body> … </body>
Для демонстрационных целей просто добавьте следующее между открывающим и закрывающим тегом <body>:
<h1>PSD-Tutorials.de</h1>
Документ должен выглядеть следующим образом:
<!DOCTYPE html>
<html lang="de">
<head>
<title>Пример основного HTML5 - www.html-seminar.de</title>
<meta charset="UTF-8" />
</head>
<body>
<h1>PSD-Tutorials.de</h1>
</body>
</html>Сохраните изменения и откройте файл в браузере.
Как видите, теперь PSD-Tutorials.de действительно отображается. Таким образом, вы создали свой первый собственный HTML-документ.
