Всех приветствую! Если Вы попали в этот раздел, и читаете эту статью, то возможно Вас заинтересовало Web-программирование, и Вы захотели создавать самостоятельно сайты. Не прочитав статьи в этом разделе и не проделав все примеры вручную самостоятельно на своей собственной странице, Вы не сможете продвинуться дальше. HTML разметка, это основа любого сайта, так сказать начало без которого не может существовать не один сайт. Разметку HTML можно считать скелетом, на котором все и держится.
HTML - (от англ. HyperText Markup Language — «язык гипертекстовой разметки») это стандартный язык который используется в документах большинства веб-страниц.
И так С чего же начинать?
Для начала нам нужно выбрать редактор в котором мы и будем создавать веб-страницы. Можно выбрать любой понравившийся вам редактор, например HTMLPad, Блокнот, Bred, Notepad++, PHPDesigner , который позволит нам работать с HTML-кoдoм напрямую.
Начав изучать HTML я выбрал редактор Notepad++ он простой в использовании и имеет удобную подсветку кода. Однако со временем я перешел на PHPDesigner.v7.2.5, который заменил стандартный блокнот Notepad++. PHPDesigner обладает множеством разных настроек - панели инструментов, неограниченное число отмены действий, есть подсветка HTML тегов и кода других языков WEB-программирования. PHPDesigner разработан именно для веб-разработки, и, еще, у него есть возможность создавать Интернет-проекты на PHP, CSS, JS и HTML.
И так начнем! Вы уже запустили свой редактор, в нем и создадим каркас нашей первой HTML- страницы. Берем код, который показан ниже и вставляем его в редактор.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Первая HTML страница</title>
</head>
<body>
</body>
</html>
Чтобы не запутаться создадим отдельную папку для работы HTML и в эту папку сохраним наш файл который назовем index.html . Файл главной страницы всегда носит имя index и расширение html. Расширение может также меняться, например на PHP, если в нем присутствует PHP код, но об этом немного позже. А пока разберем код, который мы сохранили в наш файл.
Первая строка показывает браузеру тип создаваемого документа !DOCTYPE, далее указывается, что документ создан на языке HTML 4.01 с версией 4.01 и под версией Transitional - это переходная подверсия которая позволяет использовать как все устаревшие теги, так и новые теги версии 4.01.
Существует несколько типов документа !DOCTYPE и отличаются они версиями языка. Углубляться, мы тут не будет, а только скажу, что в последнее время используется версия HTML5 и для нее используется совсем простой вид, который показан ниже.
<!DOCTYPE HTML>
Дальше идет наш каркас, который состоит из Тегов.
Что такое HTML тег? – это конструкция языка, которая указывает браузеру, что нужно делать, то есть с помощью тега мы показываем, где на странице обычный параграф с текстом, заголовок, таблица, или форма для обратной связи.
И первый тег это <html>, обратите внимание что для него в самом низу есть, соответствующий ему, закрывающейся тег </html> (добавляется обратный слеш в начале).
Отсюда, мы должны знать, что есть парные теги – это открывающий соответствующий ему закрывающий тег и есть одинарные теги например тег <img> используемый для вывода изображения.
Тег <html> - это тег, в котором содержатся все остальные теги языка. И следующей тег, который идет это <head>, что в переводе c английского обозначает голова. Данный тег является парным тегом и должен обязательно иметь закрывающий тег </head>. В теге head указываются специальные теги (метатеги), указывающие на кодировку, в которой создана страница, заголовок страницы, а так же все подключаемые файлы со скриптами и стилями.
У нас в шаблоне выше указаны два специальных тега: первый тег - <meta>, который содержит атрибут charset=utf-8", определяющиий кодировку страницы. utf-8 - это универсальная кодировка которая будет правильно отображаться во всех браузерах. !!! Имейте ввиду что, выбрав кодировку utf-8, вы должны задать эту же кодировку файлу, в котором вы работаете. Второй тег - это <title> </title>, с помощью него указывается заголовок нашей страницы.
Тег <body> имеет парный закрывающийся тег </body>. Это еще один контейнер, в котором и будут содержаться форматирующие теги, ссылки, картинки, абзацы, заголовки и др. В этой части находятся те теги, которые создают видимую часть страницы, все что видит пользователь. В переводе с английского body обозначает тело.
На этом со вступлением мы завершим, а дальше мы будем работать в основном с видимой частью страницы с тегами, которые будут находится внутри каркаса <body>.
Скачать исходник: Скачать
CSS