Сегодня я хочу поговорить о языке гипертекстовой разметки HTML. Аббревиатура переводится как HyperText Markup Language — язык разметки гипертекста, а его основная функция — создание каркаса web-страницы. Если Вы, уважаемые читатели, заинтересованы в создании собственных сайтов, то Вам необходимо выучить основы этого довольно несложного языка. В сегодняшней статье речь пойдет о истории создания этого языка, его разновидностях, будут рассмотрены основы HTML, базовые теги, а также мы с Вами попробуем создать простую WEB-страницу.
История создания языка HTML
Вы будите удивлены, но язык гипертекста на заре своего создания не использовался так, как мы привыкли. Он создавался для обмена научной и технической документации, а его базовые теги понимали люди, которые не являлись профессиональными верстальщиками. HTML был разработан в 1986-1991 годах британским ученым Тимом Бернеросом-Ли. Изначально этом язык задумывался независимым от различного оборудования: везде он должен был отображаться одинаково.
Однако эта идея шла не прижилась, в силу того, что мультимедийные и графические потребности возрастали и платформонезависимость отошла на второй план. Если изначально тег <table> должен был использоваться для построения таблиц, то сейчас его еще используют так одну из разновидностей верстки(на таблицах). В девяностых годах прошлого столетия HTML претерпел ряд нововведений, в настоящее время используется версия конца !девяностых годов html 4.
У этой четвертой версии тоже есть ряд «подверсий», однако вдаваться в подробности я не буду, это не столь важно. В 2014 обещают закончить работу над HTML 5. Эта версия, по словам разработчиков, должна быть оптимизирована под современные условия web-разработки а также включать в себя все лучшие стороны четвертой версии.
Валидатор W3C и спецификация XHTML
Не стоит пугаться слова XHTML. Еще одна буква X — eXtensible, говорит о том, что это расширенная версия html. Отличия прежде всего касаются жесткости этой версии: все теги должны быть закрыты и написаны строчными буквами, что в XHTML стало принципиально. По сути все то же самое, только введены более строгие правила в написании тегов, чтобы все web-разработчики следовали единым стандартам. Более подробно можно посмотреть в Википедии, заострять внимание на этом вопросе я не буду.
Что такое валидатор W3C? Это инструмент, который проверяет на валидность(корректность) html документ, основываясь на технических нормах и стандартах определенной спецификации HTML. На официальном сайте www.w3.org можно загрузить свою web-страницу и проверить ее на наличие ошибок. Вообще браузер понимает какая версия HTML только по загаловку content-type о котором мы поговорим ниже.
Даже если валидатор нашел ошибки на странице, это не смертельно, современные браузеры все равно их отобразят, но лучше конечно, чтоб их было как можно меньше. Вообще кому интересно на официальном сайте w3c можно посмотреть какие теги парные, какие не парные, какие нужно закрывать, а какие нет. Плюс Вы можете найти рекомендации по использованию каких-либо тегов. Например, свойство FONT не рекомендуется использовать, так как роль HTML только в создании каркаса страницы, а за оформление отвечает CSS(Таблица каскадных стилей).
Создаем первую Web-страницу. Каркас документа
Если Вы хотите научиться создавать сайты или редактировать уже имеющиеся, то Вам просто необходимы базовые знания языка гипертекста HTML. При желании основы можно усвоить за 2-3 недели.
Переходим к практической части статьи, где мы с Вами научимся создавать простые web-страницы(документы).
Откройте какой-нибудь текстовый редактор(я рекомендую пользоваться NotePad++) и создайте в нем новый документ с расширением .html. Напечатайте или скопируйте следующее содержимое:
<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 4.01 Transitional//EN»
«http://www.w3.org/TR/html4/loose.dtd»>
<html>
<head>
<!—Здесь то, что мы не видим на странице—>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<title>Документ без названия</title>
</head>
<body>
<h1>Привет!!!! Это моя первая web-страница</h1>
<!—Здесь то, что мы видим на странице—>
</body>
</html>
Напечатали? Отлично! Теперь сохраните документ и откройте его в Вашем браузере. Если все правильно сделали, то увидите текст, заключенный в теги h1(h1-h6 — теги заголовков). Теперь давайте вместе разбираться из чего же состоит эта web-страница.
Вначале поговорим об основных тегах, которые всегда будут на любой веб странице.Взгляните на иллюстрацию:
Это и есть каркас простой веб страницы. Теперь обо все по порядку:
- 1-2 сточки — тип документа. В моем случае это HTML 4.01 Transitional — переходный вариант, на мой взгляд более гибкий, чем другие спецификации. Это стандартная строка, ее запоминать не обязательно.
- Открывающийся(3 строка) и закрывающийся(15 строка) тег <html> описывает границы документа. Перед и после этих тегов html код не действует. Это тег обязателен на всех страницах.
- Открывающийся и закрывающийся тег(строка 4 -8) <head> нужен для того, чтобы вписать служебную информацию для браузера, которая не будет видна на странице.Это может быть заголовок страницы(title), мета тег(6 строка) http-equive, в котором заключена информация о кодировки станицы(в моем случае utf-8). Здесь может размещаться тег <link> для подключения внешних файлов: таблиц стилей, скриптов. Для поисковых роботов используется мета тег name, содержащий информацию о ключевых словах страницы, ее описание.
- На 9-14 строчках «»сидит» тег <body>, содержимое которого будет отображаться браузером. Внутри этого тега мы прописываем все то, что хотим видеть на странице: таблицы, списки, абзацы, ссылки, картинки и т.д.
Вот собственно и все, и на чем «держится» каркас web-страницы. Вы ждали 50 страниц технически сложного текста, непонятному 90% людей? Оказалось, что все гораздо легче, чем кажется с первого взгляда и любой желающий сможет изучить основы html.
Основные теги, которые должен знать каждый!
- <p></p> — Тег абзаца, от слова параграф.
- <br /> — Перенос на следующую строчку.
- <h1><h1> — теги заголовков, имеют нумерацию от 1 до 6. С увеличение числа в теге, уменьшается сам заголовок.
- <img> — непарный тег, отвечающий за вывод картинки. Общий вид: <img src=«источник картинки(абсолютный или относительный путь до файла)» атрибуты: alt, title, width, height>
- <a></a> — Прописываю ссылки. Ссылками может быть как текст, так и графический элемент(картинка). Общий вид: <a href=«Путь до web-страницы» Атрибуты: title, target>Якорь ссылки(можно вставить <img>)</a>
- <ol><ol> — создание всевозможных списков.
Это конечно же лишь малая часть всех тегов языка html. Здесь я привел те, которыми Вы уже можете начинать пользоваться без подробного объяснения.
На сегодня Все!!!
