Стандартный html код. Создаем HTML документ
Всем доброго времени суток! Сегодня мы научимся создать каркас нашей первой HTML страницы. А точнее разберемся с базовой структуры html страницы, узнаем, из чего она состоит. Но прежде всего, поговорим немного о тегах.
Что такое тег в HTML?
Тег это базовый элемент языка HTML. То есть HTML состоит именно из тегов и для того чтобы учить HTML, достаточно изучить основные теги, которые чаще всего используются. Если сравнивать с примером из реальной жизни, то тег в HTML это как кирпич для дома. Кирпич это основной элемент, который используется для строительства дома. То же самое и в HTML, тег это базовый элемент для создания html страницы. С помощью тега мы указываем браузеру, как правильно отобразить содержание html страницы.
Существует два типа тегов это парные теги и одинарные теги :
- Парные теги
это теги, которые состоит из открывающего тега и закрывающего тега. По короче это теги, которые имеют закрывающего тега.
Примеры: и ;
и ; и ;и ; ;
- Одинарные теги
это теги, которые не имею закрывающего тега.
Примеры одинарных тегов:
.
У html страницы есть базовая структура . Базовая структура на всех страницах сайта, выглядит одинаково. Единственное что может отличаться в базовой структуре страниц от сайта к сайту, это элемент DOCTYPE. Для того чтобы узнать что такое DOCTYPE и какие типы существуют, прочитайте эту статью . Если не укажем этот элемент то браузер отобразит страницу некорректно.
Вот как выглядит базовый каркас html страницы:
Сейчас если откроем данную страницу в браузере, то она будет пуста. Теперь добавим пару строк кода внутри тега body , и откроем еще раз эту страницу в браузере.
Моя первая html страница
Вот как выглядит страница в браузере после того как изменили ее код:
Анализируем данный пример
В начале страницы, перед тегом html всегда указываем DOCTYPE , то есть тип документа.
Каждая html страница начинается с тега < html> и заканчивается тегом html> и состоит из заголовка < head>head> и тела < body>body> .
Внутри заголовка пишется служебные элементы, которые не отображаются на странице в браузере. В основном это:
- Мета теги . Главные из них это мета-тег кодировки , через которого указываем кодировку страницы (), мета теги для поисковых систем, это мета-тег c описанием страницы (description) и ключевые слова для страницы (keywords) .
- Заголовок страницы, который указывается внутри тега < title>title> . Этот заголовок отображается во вкладке браузера.
- Блок с внутренними стилями. < style type=” text/ css”>Внутренние стили.
- Одинарный тег < link /> , через которого подключаем внешние файлы.
- А также блок < script src =" library.js " type =" text/javascript " > script> в котором пишутся различные скрипты JavaScript .
Внутри тега < body>body> пишется контент страницы. Контент может содержать текст, изображения, таблицы, списки, ссылки и другие элементы которые отображаются на странице в браузере.
Имена тегов можно писать в любом регистре, то есть если напишем < BODY>, < bOdY>,< Body> или < body> , то результат будет один и тот же, но рекомендуется всегда писать в нижнем регистре, то есть < body> .
Пожалуй, на этом все. Из этой маленькой, но очень важной статьи вы узнали, как выглядит базовая структура html страницы.
HTML страница и ее структура, определяемая основными тегами
Посмотрим, как выглядит самая обычная интернет-страница изнутри.
- Структура HTML по большому счету лежит в основе каждой web - страницы.
- Сегодня существует несколько типов HTML документов. Каждому типу документа соответствует его собственная HTML структура (подробности внизу страницы).
- Правильная начальная структура HTML является залогом кросс-браузерности сайта .
В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот . Конечно же, это не единственное средство для написания кода, но на этом этапе вам нужен именно он.
Пример структуры документа:
Рассмотрим HTML теги, определяющие структуру страницы
- - обязательные, определяют HTML документ.
- - определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.
-
- определяют заголовок 3-го уровня.- - определяют параграф. Смотрите урок HTML параграфы
Структура HTML документа | Пишем код страницы
Последовательность действий следующая:
1. Пишeм в Блокноте код HTML страницы:
4. Открываем IE (Internet Explorer) или другой установленный по умолчанию браузер. В его меню пробуем найти и открыть сохраненный на компьютере файл index.html . Найти и открыть файл в любом браузере можно также в окошке, которое появится после набора на клавиатуре комбинации из двух клавиш: Ctrl и O - удерживаем Ctrl и после этого жмем латинскую букву O .
Д
ля дальнейшего изучения материала необходимо следующее:
Вы просто обязаны иметь у себя на компьютере несколько различных браузеров.
Качаем бесплатно Mozilla Firefox ,
Opera и продолжаем наш урок.
Открываем index.html при помощи Firefox. В ранних версиях этого браузера вы бы не смогли прочитать написанный вами текст, так отображались бы непонятные символы. Устраняется данная некорректность простым включением в HTML код двух тегов с набором атрибутов, которые также являются обязательными.
Правильная структура HTML 4.01
Такой должна быть начальная структура HTML страницы :
|
|
Самостоятельно добавьте параграфы, заголовок и посмотрите, что вышло. Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки в Mozilla Firefox или кнопки в Internet Explorer, или F5, чтобы изменения вступали в силу.
У вас все получилось? - Значит вы были внимательны и все сделали правильно.
Если вы создаете шаблон с нуля, то надо от чего-то отталкиваться. Учитывая, что стандарт HTML5 «широко шагает по стране», я в этой статье приведу пример пустого шаблона HTML5.
В новом стандарте многое упростилось и теперь базовая часть выглядит так:
Новые теги HTML5
В HTML5 для структуры кода введено несколько новых тегов: