Урок 1.1: Создание простой web-страницы

Что такое HTML? Из описания: HTML - язык разметки гипертакста (или язык гипертекстовой разметки).

Так давайте познакомимся с ним поближе.

Для начала создайте у себя на компьютере файл с любым названием и расширением .html (название должно быть на английском языке - например index.html). Что бы создать такой файл - создайте обычный текстовый документ ("Пуск" - "Все программы" - "Стандартные" - "Блокнот") и сохраните ("Файл" - "Сохранить как") его в любом месте, введя название и расширение (бывает, что при введении расширения блокнот все равно сохраняет его как текстовый файл, а нам нужет web файл. Для этого перед сохранением выберите тип файла - "Все файлы(*.*)").

Диалоговое окно: сохранение документа

Это не обязательное условие (так как в настройках сервера можно поменять название первой страницы), а правило хорошего тона. Название первой страницы желательно именно index (index.html), так как сервер, при обращении к нему, выдает файл с таким именем - index.

При правильном сохранении, значок файла должен поменяться на значок браузера (по умолчанию Internet Explorer).

Теперь откройте этот файл через блокнот и скопируйте туда такой код.

<html>   
<body>     
Это первая web-страница!   
</body> 
</html>

Сохраните и откройте через браузер.

Поздравляю, вы только что создали свою первую web-страницу.

Текст "Это первая web-страница!" можете поменять на любой другой, например так - "Это моя первая web-страница!!!". сохраняем, обновляем браузер, любуемся результатом.

Но у нашей страницы нет загаловка.

Фото страницы без загаловка

Надо это исправить - немного подправим код, вернее добавим в него "Голову сайта", используя теги <head> и <title>.

<html>   
 <head>     
  <title>Первая страница</title>   
 </head>   
 <body>     
  Это моя первая web-страница!!!   
 </body> 
</html>

Сохраняем, обновляем, любуемся. Теперь у нашей страницы есть загаловок.

Фото страницы с загаловком

Пример здесь.

Описание тегов.

Самый первый тег это <html> (этот тег парный, т.е. закрывающий тег </html> обязателен) - он используется как контейнер, внутри которого находится все содержимое страницы (текст, изображения и прочее). Хотя этот тег (<html> и </html>) необязателен, но его использование говорит о правиле хорошего тона. Поэтому и вам советую его использовать.

Следующий тег - <head>. Это тоже парный тег (<head> и </head>). Этот тег не отображается на странице (кроме заголовка), но он необходим для указания дополнительный параметров страницы - описание страницы (используется поисковиками), ключевые слова (используется поисковиками), стили, скрипты, заголовок и прочее.

Тег <title> - парный тег (<title> и </title>), необходим для указания заголовка страницы. Причем этот тег нужно размещать только внутри тега <head>!

И последний, в нашем коде, тег - <body>. Тоже парный тег (<body> и </body>), внутри которого находится вся видимая часть сайта, т.е. тексты, картинки, ссылки, в общем информация которую вы хотите разместить на сайте.

В следующем уроке мы поговорим о видах тегов и правило их написания.

Список уроков