Создание простого html-документа в блокноте
1) Для того чтобы сделать свою первую html страницу откройте блокнот и сохраните его под каким-то именем (например, index.html). Это важно: тип файла необходимо выбрать "все файлы", а после имени дописать ".html" или ".htm", но лучше придерживаться первого варианта (хотя разницы нету). Должно получиться следующие имя: "index.html". В принципе это уже можно назвать html документом, однако в нем ничего нету, поэтому переходим к шагу два - наполнение страницы.
2) Отрываем созданный файл через блокнот и вписываем в него следующее (просто скопируйте):
<html>
<head>
<title>Пример создания страницы html в блокноте</title>
</head>
<body>
У меня получилось сделать первую страницу!
</body>
</html> |
После этого сохраните этот файл. Теперь откройте index.html через любой браузер, в отрывшейся вкладке должна появиться надпись "У меня получилось сделать первую страницу!", а в заголовке будет написано "Пример создания страницы html в блокноте". Такой документ можно уже выкладывать в интернет. Как видите, ничего сложного нет, все просто.
Теперь вкратце поговорим о структуре любого html-документа.
Структура html-документа
1. Любой html документ должен иметь теги
<html> - открывающий тег документа (располагается самым первым), </html> - закрывающий тег документа (должен быть самым последним). Вообще в html практически все теги состоят из двух элементов: открывающий <ТЕГ> и закрывающий </ТЕГ>.
Теги можно писать с большой буквы, а можно и с маленькой, поскольку браузеры не воспринимают регистры. То есть, если Вы напишите так:
То это будет равносильно тому, что было написано чуть выше, но никому не рекомендую так писать. Придерживайтесь одного из двух стилей: либо все теги с маленькой буквы, либо с большой.
2. Любой html документ можно разделить на две части
- Заголовок страницы. Это невидимая для пользователя часть страницы, не является обязательной (однако, для продвижения сайта и оптимизации кода страницы она очень важна). Синтаксис заголовочной части:
<head>
...
заголовочные теги
...
</head> |
Между тегами <head> и </head> располагаются следующие элементы:
• метатеги html (meta),
• заголовок страницы title (см. как правильно написать тег Title),
• подключаемые яваскрипты (JavaScript)
• подключаемые стили (link) и т.д.
Все эти элементы подробно разобраны в специальном уроке по заголовочным тегам.
Примечание: заголовочные теги обязательно должен располагаться перед телом страницы! Сразу после закрывающего тега </head> должно идти основная часть страницы.
- Тело страницы (или основная часть). Является видимой для пользователя частью. Её синтаксис:
<body>
...
Здесь располагается контент страницы
...
</body> |
<body> - открывающий тег тела страницы. Сразу после него идет то, что видит пользователь: дизайн и контент страницы. Тело и, собственно, весь html-документ должны заканчиваться последовательностью:
Все теги, которые можно писать в этой части рассмотрены в уроке 3 - самые основные html теги.
----------------------------- -------------------------------------------------------------------------------------------------------
Уважаемый читатель, я думаю, что теперь Вы имеете небольшое представление о html-документе. Далее Вам предстоит узнать множество других тегов, которые необходимы для работы. Это был вводный урок, целью которого было ознакомление с html. Теперь советую перейти к следующим урокам.
Следующий урок: Урок 2. Пример создание простой html-страницы
← Перейти в каталог html уроков и советов
