Основы HTML

Данная статья не претендует быть исчерпывающим руководством по языку разметки документов HTML. В ней описываются основы HTML — базовые принципы, понятия и определения данной технологии, освоив которые, можно без труда двигаться дальше в изучении HTML кодинга.

Для изучения урока, скачайте архив с необходимыми файлами.

HTML — это язык разметки документов. Правильное произношение — Эйч Ти Эм Эль.

Вы, наверняка, работали когда-нибудь в редакторе документов Word или подобных офисных приложениях? Наверное вы знаете, что данный вид редакторов имеет богатые возможности для редактирования текста, расположения элементов, вставки картинок и т. д.

Зачем, спросите вы, писать в статье, посвященной HTML о текстовых процессорах? А вот зачем. Если разобраться, что такое офисный редактор? Это приложение для редактирования и отображения документов.

Ключевое слово здесь — документ. То есть, мы создаем, редактируем и просматриваем документ в какой-то программе, в данном случае — в офисном редакторе. Если открыть такой документ в простом текстовом редакторе, например, в Блокноте, то мы увидим множество странных символов и знаков. Эта каша из символов непонятна человечеству, но понятна компьютерам. Благодаря этому внутреннему языку, документ Word приобретает определенную структуру и вид в самом редакторе, а документ предстает перед нами во всей своей красе с отформатированным текстом и картинками на своем месте.

HTML — это язык разметки документов для браузера. Word’ом здесь выступает браузер, а документом — HTML страничка. Это самая основа технологии HTML, понимание которой необходимо для того, чтобы не путать язык разметки веб документов с языками программирования. Название говорит за себя — с помощью HTML мы размечаем, где на странице будет показан элемент, картинка или текст, и в каком порядке они будут следовать друг за другом.

Да, простой набор и форматирование текста в офисных приложениях не имеют ни чего общего с программированием. Но наблюдательный читатель заметит важную деталь — в текстовом процессоре мы набираем, редактируем и форматируем текст и картинки с помощью визуальных кнопочек и меню, но почему же HTML код пишется вручную? Зачем изучать так много технических деталей написания разметки для документа?

На самом деле, существует масса редакторов, с помощью которых можно создавать и редактировать HTML странички по аналогии с Word. То есть исходный HTML код для нас скрыт и в него мы не лезем.

Этакий Word для HTML. Такие визуальные редакторы называются:

WYSIWYG редакторы — What You See Is What You Get. То есть, если перевести на русский: что видим, то и получаем.

Я их называю «вузивуги». Хоть это фонетически и не правильно, зато ярко свидетельствует о бессмысленности данного изобретения. Новички очень часто используют такие редакторы для создания своих первых сайтов. Конечно, это удобно — не нужно углубляться в изучение тегов, стилей оформления и прочих, на первый взгляд, неприятных и сложных вещей. Редактор сам автоматически преобразует наши действия в HTML код.

Но, как говорится, ни чего просто так не бывает. А если конкретнее — у такого подхода есть очень серьезные недостатки. Что же мешает всем подряд использовать визуальные редакторы для оформления HTML страничек? Дело в том, что сформированные таким образом страницы имеют, как правило, очень много лишнего кода, очень много ошибок с семантической точки зрения. Сейчас, конечно, нет проблем со скоростным интернет соединением и разница в размере странички в 400 кб и 100 кб не существенна для скорости, однако оптимизированный и правильно написанный HTML код избавляет от множества проблем и дает массу преимуществ, а именно:

• Грамотный HTML код положительно влияет на поисковую оптимизацию, скорость сканирования поисковым роботом сайта. Сгенерированные вузивугой килобайты кода здесь не приемлемы и даже вредны;
• HTML код, сгенерированный WYSIWYG редактором имеет множество семантических ошибок. То есть, теги, генерируемые таким редактором используются не по назначению, там где нужно использовать, например, списки <ul>, редактор сгенерирует нам другой, ненужный нам тег. Зависит, конечно, от редактора, но здесь имеются ввиду комплексные решения для создания сайтов, а не простого редактирования текста в текстовой области средствами WYSIWYG.
• Генерируется много лишних тегов и структура документа получается раздутой. Допустим, вы передвигаете элемент в такой программе сначала вправо, потом влево, потом по центру — от каждого действия остается след в исходном HTML коде. Редактор — это программа и он не может знать, что именно вы хотите получить в результате, он формирует тонны кода с учетом всех возможных вариантов поведения документа в браузере.
• Как правило, редакторы для визуального оформления HTML кода, быстро устаревают. А ввиду отсутствия интереса со стороны профессионалов — вообще лишаются поддержки и останавливаются в развитии. А HTML развивается. Все развивается, кроме вузивуги. Соответственно, они не могут генерировать правильный и современный код, в котором были бы задействованы новые фишки и решения.
• Поддерживать такие проекты и развивать — кара небесная. Об использовании паттернов и повторном использовании кода речи вообще быть не может.

Так что, HTML будем писать только ручками. Адекватных инструментов для визуального редактирования HTML еще не придумали, да и врядли они появятся. Язык разметки HTML прост в освоении и понимании, а средств автоматизации написания HTML кода множество, но об этом в других уроках.

Повозившись немного с WYSIWYG редактором, юные HTML-гуру оставляют это бесперспективное занятие и двигаются дальше.

Структура документа HTML

Рекомендую для занятий скачать и установить редактор Sublime Text. Крайне не рекомендую использовать для HTML верстки встроенный в Windows «Блокнот», если вы не хотите сломать себе психику на ранних порах изучения HTML.

Мы решили, что код HTML документа будем писать вручную, то есть верстать. HTML Верстка — процесс создания HTML документа. В простонародье и осведомленных кругах — просто верстка. Любой документ имеет структуру и определенные правила построения. Из каких же элементов состоит код, какая структура у HTML?

Давайте создадим на компьютере первоначальный шаблон — файл index.html, откроем с помощью редактора и вставим в него следующий код:

<!doctype html>   <html>   <head>    <title>Заголовок</title>    <meta charset="UTF-8">    <link rel="icon" href="favicon.ico">    <link rel="stylesheet" href="style.css">    <script src="script.js" type="text/javascript"></script>   </head>   <body>    Тело документа   </body>   </html>

Обратите внимание, документы HTML имеют расширение .html.

Итак, по порядку из примера.

<!doctype html> — тип документа (доктайп)

<!doctype html>

Данная конструкция всегда указывается в начале документа для правильного «понимания» браузером того, какая версия HTML используется при построении документа.

Ввиду того, что HTML постоянно развивается, он имеет несколько версий, как и любой программный продукт. Текущая версия HTML — пятая и приведенный в примере доктайп является актуальным.

В принципе, углубляться в изучение типов документа нет ни какого смысла, ибо с выходом HTML5 данная конструкция стала стандартом. Просто вставляйте ее в начало документа каждый раз, когда начинаете верстать макет сайта.

<html> — начало документа

<html>

Первый тег, который мы встречаем после доктайпа, это <html>.

HTML тег — структурная единица разметки HTML документа. Код HTML складывается из кирпичиков, которые именуются тегами. Каждый тег имеет свою функцию, а изучение языка разметки HTML, в конечном счете, заключается именно в изучении тегов и их свойств в документе.

Хотелось бы отметить, что изучение HTML не такое сложное занятие, как может показаться на первый взгляд. Выучить используемые в разметке документа теги — не такая уж и большая нагрузка на мозг.

Итак, разметка документа начинается с тега <html> и заканчивается закрывающим тегом </html>. Каждый тег, который содержит в себе другие теги или элементы должен закрываться закрывающим тегом. Например, <html></html>, <p></p>, <div></div>, и т. д.

Тег <html> является обязательным, так как содержит всю структуру документа и является оболочкой для остальных элементов.

Тег <head>

<head>

Далее, мы видим тег <head>, который содержит другие, пока не понятные нам элементы. Содержит другие элементы — это значит, что элементы или теги находятся между открывающим и закрывающим тегом конструкции:

<тег>    содержание или другие теги   </тег>

Тег <head> предназначен для хранения метаинформации HTML документа, то есть информации, которая не отображается в самом документе, но является важной и во многом определяет, как документ будет выглядеть и как себя вести.
Данный тег обязателен в документе.

Тег <title> — заголовок документа

<title>Заголовок</title>

Заголовок <title> является обязательным тегом, содержащим текстовую метаинформацию, которая отображается в заголовке браузера или вкладки. Тег <title> должен находиться в теге <head>. Также, содержимое данного тега используется поисковыми системами для отображения документа в результатах выдачи.

Метатег <meta charset=»UTF-8″ >

<meta charset="UTF-8" >

Метатег, содержащий информацию о кодировке документа. Очень желательно указывать данный тег во всех создаваемых документах для правильного отображения. Отсутствие данного тега может привести к тому, что вместо слов, на странице будут отображены неведомые символы и текст перестанет быть разборчивым и человекопонятным.

Метатег — специализированный тег, предназначенный для предоставления структурированных данных о странице. Метатеги чаще всего используются в теге <head>. Метатеги не являются обязательными в структуре HTML документа.

Рекомендую во всех HTML документах изначально использовать кодировку UTF-8, как в примере выше.

Фавиконка (favicon)

<link rel="icon" href="favicon.ico" >

Подключает к документу файл с изображением фавиконки. Фавиконка (favicon) — миниатюрный значок, отображаемый рядом с названием документа во вкладке браузера. Фавиконка — это графический файл, размером 16 x 16 (или 32 x 32) пикселей, который может иметь различные форматы, такие, как png, jpg, ico, gif. Традиционно используется формат ico. Анимированные фавиконки — это gif файлы, содержащие анимацию. Наблюдать анимированный фавикон можно, например, ВКонтакте, когда приходит новое сообщение.

CSS стили документа

<link rel="stylesheet" href="style.css">

Подключает к документу CSS файл со стилями оформления HTML.

CSS — каскадные стили оформления HTML документа. У каждого тега, который находится в теге <body>, имеется набор свойств, такие как — цвет, ширина, высота, положение относительно других элементов. Все эти свойства и есть стили CSS, которые можно вынести во внешний файл. Конструкция <link> подключает внешние файлы к документу HTML, в том числе и стили CSS.

Примечание: свойство href конструкции <link > указывает расположение внешнего файла. В нашем примере, файл style.css и favicon.ico, находятся в той-же папке, что и файл index.html. <link> не имеет закрывающего тега.

Тег <script>

<script src="script.js" type="text/javascript"></script>

Тег <script> содержит код или ссылку на файл javaScript и чаще всего используется внутри тега <head>, хотя инструмент оптимизации скорости загрузки страниц от Google, рекомендует данный тег использовать в конце документа, перед закрывающим тегом </body>.

В нашем примере подключается внешний файл script.js, который находится в той-же папке, что и основной файл index.html.

Итак, друзья, мы рассмотрели основные элементы, которые используются в теге <head> чаще всего. Кроме этих элементов, для <head> есть ряд других, более специфичных и не обязательных.

</head>

Закрываем тег <head> и шагаем дальше.

Тело aka body

<body>

Вот здесь то и начинается все самое интересное и визуально осязаемое в HTML верстке документа.

Перейдем, непосредственно, к верстке видимой части страницы. Все, что мы пишем и верстаем внутри тега <body> будет отображено в браузере. Откроем наш файл index.html в браузере для того, чтобы наглядно видеть, что мы делаем в редакторе.

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

<a>

<a href="http://webdesign-master.ru">текст ссылки</a>

<em>,  <strong>

<em>текст курсивом</em>

<strong>жирный (акцентируемый) текст</strong>

<h1>,  <h2>,  <h3>,  <h4>,  <h5>,  <h6>

<h1>Заголовок первого уровня</h1>   <h2>Заголовок второго уровня</h2>   <h3>Заголовок третьего уровня</h3>   ... и т. д.

<ol>,  <ul>

<ul>    <li>Элемент маркированного списка 1</li>    <li>Элемент маркированного списка 2</li>   </ul>     <ol>    <li>Элемент нумерованного списка 1</li>    <li>Элемент нумерованного списка 2</li>   </ol>   

<p>

<p>Внешний вид HTML разметки во многом   определяется CSS стилями.</p>     <p>Тем не менее, некоторые веб-мастера   предпочитают не использовать стили на первых   этапах проекта.</p>

<img>

<img src="путь_до_картинки.jpg" alt="Текст">

<form>   + <input>   + <textarea>

<form action="ссылка_на_скрипт_обработки_формы">    <input type="text" name="name">    <input type="text" name="email">    <textarea name="text">    Текст сообщения    <textarea>    <input type="submit" value="Написать">   </form>

<span>

Изучение HTML, в большинстве случаев, не вызывает  <span>ни каких сложностей</span> у новичков.

<video>,  <audio>

<video src="rolik_chuma.mp4" controls></video>   <audio src="muzichka.mp3" controls></audio>

<div>

<div>   	<div>   		Текст во вложенном блоке   	</div>   </div>

<iframe>

<iframe src="http://rtfm.org.ru"></iframe>

Мы рассмотрели далеко не все теги, да это и не нужно на данном этапе. Главное — понять основную идею HTML, научиться использовать представленные выше теги, а потом двигаться дальше.

Обратите внимание на то, что все названия в подключаемых файлах должны писаться латинскими символами, без пробелов.

Например, не:

<video src="ролик чума.mp4" controls></video>

а:

<video src="rolik_chuma.mp4" controls></video>

Это необходимо для большей совместимости содержимого страницы. К тому-же, стандарты написания HTML кода, диктуют.

Итак, теперь мы знаем некоторые основы HTML: какая структура должна быть у типового HTML документа, знаем некоторые наиболее ходовые теги, пора приступить к самому вкусному — а именно, печенькам.

Практическое задание по HTML верстке

Если вы еще не скачали архив с примерами, сделайте это. Для примера, можете подглядывать в файл example.html, который также находился в архиве.

1. Распакуйте архив и в папке с распакованными файлами создайте файл index.html. Откройте созданный файл с помощью текстового редактора Sublime Text;
2. Создайте первоначальную структуру документа с доктайпом, тегом <html>, содержащим <header> и <body> и перейдите к редактированию содержимого тега <body>;
3. Откройте файл readme.txt и выполните соответствующие задания в созданном вами файле index.html. Для проверки результата, откройте index.html в вашем любимом браузере.

На этом урок по основам HTML окончен, в следующем уроке «Основы CSS» мы научимся управлять стилями элементов документа, познакомимся ближе с каскадными таблицами стилей, научимся использовать классы стилей и сделаем нашу верстку красивой и красочной.

До новых встреч, друзья!

webdesign-master.ru

С чего начинается работа

На самом деле одной строкой дело не обходится. После объявления версии и типа документа необходимо обозначить его начало и конец. Это делается с помощью тега-контейнера <HTML>. Необходимо отметить, что любой HTML-документ открывется тегом <HTML> и им же закрывается.

Затем, между тегами <HTML> и </HTML> следует разместить заголовок и тело документа. Вот и все! Начало положено – вы получили прекрасную заготовку. Вот как должен выглядеть ваш базовый HTML-файл перед началом работы:

<!DOCTYPE HTML PUBLIC «-//W3C//DTD HTML 3.2 Final//EN»> <HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD> <BODY> Текст документа </BODY> </HTML>

Если приведенный выше пример пояснить схематически, получится следующее:

Из схемы видно, что документ состоит из двух основных блоков – «заголовка» и «тела документа». Заголовок определяется с помощью элемента HEAD, а тело – элементом BODY.

Заголовок содержит «техническую» информацию о документе, хотя чаще всего используется только для обозначения его названия (см. элемент TITLE).

Тело документа – святая святых. Именно в нем находится все то, что отображается на странице: текст, картинки, таблицы. Соответственно, делаем вывод: большинство ваших HTML-экспериментов будет проводиться в пространстве между тегами <BODY> и </BODY>

Билет№14

Основное назначение внешней памяти компьютера – долговременное хранение большого количества различных файлов (программ, данных и т.д.). Устройство, которое обеспечивает запись/считывание информации, называется накопителем, а хранится информация на носителях. Наиболее распространенными являются накопители следующих типов:

• Накопители на гибких магнитных дисках (НГМД) двух различных типов, рассчитанные на диски диаметром 5,25” (емкость 1,2 Мб) и диски диаметром 3,5“(емкость 1,44 Мб);

• Накопители на жестких магнитных дисках (НЖМД) информационной емкостью от 1 до десятков Гб;

• Накопители CD-ROM емкостью 640 Мб;

• Накопители DVD-ROM емкостью до 17 Гб.

Билет№15 Группы базовых функций для текстовых процессоров

Нижний уровень иерархии составляют редакторы (ТП уровня 1) для ввода и сборки текстов программ. Основное требование пользователя на этом уровне, прямо влияющее на производительность труда, — удобные средства работы с блоками текста, позволяющие быстро размножать повторяющиеся фрагменты программы, составлять ее из частей других программных файлов. Этими средствами вполне обладают текстовые редакторы Personal Editor II (IBM Corp., 1985), Kedit (Mansfield Software Group, 1985), Norton Editor (S. Reifel & Co, 1985), Ted Programming Editor (Morgan Сотр.), встроенные редакторы систем программирования Turbo (Borland International), Quick (Microsoft Corp.) и многие др. Для подготовки статей с однородным текстом (без графики и сложных формул) нужно дополнить функции ТП уровня 1 как минимум средствами форматирования абзацев (включая перенос и выравнивание по правому краю текста) и разбивки текста на страницы (до или во время печати). Пример — многофункциональные редакторы MultiEdit v.2.01 (American Cybernetics), MultiMate (Ashton-Tate, 1988). Отметим также чрезвычайно популярный WordStar 2000 v.2.0 (MicroPro Int. Corp., 1986), выравнивающий строки по правому краю при наборе текста, и известный процессор Lexicon v.6.37 (ВЦ АН СССР, 1988), переносящий слова по правилам русского языка. Оформление статей со сложными рисунками и формулами, газетных полос требует ТП более высокого класса, которые помимо функций уровня 2 обеспечивают по крайней мере средства включения в текст графики и поддержки нескольких алфавитов. Смешивание текста и графики обеспечивает, например, редактор Write, входящий в состав операционной оболочки Microsoft Windows v.2.10 (Microsoft Corp.); ТП Word v.4.0 той же фирмы, обладающий функциями и более высоких уровней; ТП ChiWriter v.2.12 (Horstman Software Design, 1986). В то же время фирма Valid Logic предпочла путь создания сервисных средств к существующим ТП. Для уже упомянутого редактора WordStar 2000 (MicroPro Int. Corp.) фирмой разработан специальный интерфейс, позволяющий включать графики и рисунки в текст. Графический редактор этой фирмы дает возможность корректировать графику после внесения ее в текстовый документ [4]. Добавление к возможностям уровня 2 поддержки особых файлов с адресными данными, как, например, в ТП «Документ 16» (совместный советско-болгарский институт Интерпрограмма), упрощает работу по составлению приказов и деловых писем с повторяющимся содержанием [3]. Пример специализации — редактор MathCAD v.1.1 (MathSoft Inc., 1986), в котором не только обеспечивается богатый набор математических символов, но и предусмотрен режим автоматического построения графиков по заданным функциям и включения их в текстовый файл. ТП уровня 4 предназначен для подготовки книг, журналов в целом и должен обеспечивать обработку больших файлов и сбор оглавления. Подобные функции предусмотрены в развитых ТП, таких как Т3 (ADA Computer und Periphery), Microsoft Word, MultiEdit, Lexicon (L). Последний в предлагаемой иерархии уровень ТП связан с составлением научно-технической документации (по объему часто сравнимой с книгами). Помимо возможностей предыдущих уровней способен вносить в текст колонтитулы, поддерживать листы изменений и составлять предметные указатели. Пример — настольные издательские системы типа Xerox Ventura Publisher (Xerox Corp./Ventura Software Inc., 1986). Ими обладают также упомянутые ранее мощные ТП Microsoft Word и MultiEdit. Приведенная структура, безусловно, не содержит всех необходимых свойств проектируемого ТП и в конкретных случаях требует дополнения. Так, для уровня 1 весьма желателен выход в Turbo- или Quick-компилятор. Уровень 3 предполагает возможность работы со структурным текстом (гипертекстом), уровни 4 и 5 — связь с фотонаборным оборудованием. На первый взгляд, мощные ТП верхних уровней должны удовлетворять подавляющее большинство потребностей пользователей. Однако несмотря на впечатляющие возможности настольных издательских систем, сохраняют свои позиции и относительно простые экранные редакторы. Помимо стоимости важную роль играет в этом простота управления и обозримость их функций, которыми можно овладеть за один сеанс работы. Приведенная иерархия свойств ТП позволит разработчику осознанно дополнять возможности таких «карманных» редакторов, нацеливая их на определенную область обработки текстов. Пример. Оценим в соответствии с предложенной иерархической структурой возможности распространенного экранного редактора Personal Editor II (IBM Corp.). Для краткости обозначим его как РЕ2. Данный редактор обладает всеми функциями ТП уровня 1 и позволяет удобно набирать тексты программ и конструировать их из фрагментов готовых программ. Средства форматирования абзацев, печати текста и обращения к функциям DOS из среды редактирования позволяют работать с данным редактором, как с текстовым процессором уровня 2, в частности, готовить деловые бумаги и статьи без сложных формул и графики. Однако для полного соответствия уровню 2 необходимо выполнение еще двух функций: выравнивания строк по правой границе поля и автоматического разбиения текста на страницы. Для реализации недостающих функций разработана сервисная утилита-форматизатор TF (составляет 3% от объема редактора), которая позволяет работать с редактором РЕ2, как с ТП уровня 2. Утилита TF обрабатывает текст, подготовленный редактором РЕ2 и помещенный в файл с расширением t х t. При этом все строки текста выравниваются по правому краю за счет вставки дополнительных пробелов, равномерно распределенных между словами строки. Не выравниваются однострочные предложения; последние строки абзацев; строки, помеченные пользователем точкой в первой позиции. Точка — единственный управляющий символ форматизатора TF. Таким образом, форматизатор не усложняет общую структуру управления редактором РЕ2. Обработанный текст помещается в файл с расширением 1st, причем точки первой позиции заменяются пробелами. Командная строка для запуска форматизатора имеет вид: tf file-name, где file-name — имя файла (без расширения) с исходным текстом. Указав в командной строке для форматизатора TF ключ /Р, можно получить текст, разбитый на страницы. После каждой страницы в текст включаются символы перевода формата (Х’ОС’), а в начале второй и следующих страниц помещается номер страницы. Форматизатор получает в начале работы два параметра: правую границу поля текста и число строк на странице. Параметры вводятся пользователем в ответ на запрос. При этом можно задать новые значения либо оставить стандартные (70,58). Первый параметр должен совпадать с установленной для редактора РЕ2 правой границей текста. Если форматизатор TF обнаружит строчку большей длины, то на экране появится текст строки вместе с сообщением об ошибке. Каждая строка текста, требующая выравнивания, просматривается форматизатором дважды. В среднем текстовый файл из 500 строк обрабатывается за 50 с на ПЭВМ ЕС1840 и за 30 с на ПЭВМ IBM PC/XT. Размер файла TF.EXE — 2480 байт. Выводы. Предложен иерархический принцип классификации текстовых процессоров, соотносящий область приложения и основной набор необходимых пользователю функций ТП. Такой подход при разработке новых ТП помогает разумно ограничить возможности проектируемого изделия и, следовательно, стоимость разработки. В соответствии с этим подходом дана оценка распространенного редактора текстов Personal Editor II (IBM Corp.) для ПЭВМ типа ЕС1840, IBM PC. Предложен простой и компактный форматизатор TF, который превращает редактор РЕ2 в ТП более высокого уровня

studfiles.net

Основы HTML

HTML (Hyper Text Markup Language) — это язык разметки документов в Интернете. То есть, любая страничка Вашего сайта — документ, а браузер — средство просмотра подобных документов.

Задача HTML — показать браузеру где находиться тот или иной элемент документа. C помощью данного языка, элементы размечаются на странице и занимают определенное место, которые затем отображаются на мониторе посетителя сайта.

Язык разметки состоит из специальных тегов, которые помогают браузеру определить:

• Структуру документа;
• Место нахождения того или иного элемента;
• Предназначение элемента;
• Подключаемые сторонние файлы;
• И много-много другого.

Это понимают и поисковые роботы, поэтому нужно уделить особенное внимание тому, насколько правильно составлен документ с точки зрения SEO и какую структуру имеет.

Структура HTML

Любой HTML-документ имеет начальную структуру, которая должна соблюдаться в обязательно порядке. Выглядит она так:

<!DOCTYPE html>  <html>  <head>      <meta charset="UTF-8">      <title>Заголовок страницы</title>      <meta name="keywords" content="Ключевые слова, и, фразы, через, запятую">      <meta name="description" content="Описание контента страницы, 1-2 предложения.">  </head>  <body>   Контент страницы  </body>  </html

Разберем каждый элемент подробнее:

1. <!DOCTYPE html>

   Начало любого HTML-документа задается этим элементом. Так как язык разметки HTML постоянно развивается и имеет несколько версий, данный элемент помогает браузеру понять какая именно версия используется в документе и его тип;

2. <html> - открывающий тег; </html> - закрывающий тег

   Данный тег является контейнером, в который входит все содержимое страницы. Необязателен к заполнению, но все же принято его использовать в каждом документе. Имеет закрывающий тег;

3. <head> - открывающий тег; </head> - закрывающий тег

   В пределах тегов <head></head> указывается заголовок окна страницы (Title), мета теги Description и Keywords, а также другая техническая информация. К использованию допускаются такие теги, как:

   1. <link>

      Подключение внешних файлов, например, файл стилей style.css;

   2. <meta>

      Используется для хранения информации для браузера и поисковых систем;

   3. <style>

      Указывается для определения стилей элементов документа;

   4. <script>

      Применяется для описания скриптов, использующихся на странице, а также можно указать ссылку на внешний файл со скриптом, программой;

   5. <title>

      Задает заголовок окна страницы.

4. <body> - открывающий тег; </body> - закрывающий тег

   Хранит основное содержание страницы, которое отображается в окне браузера. Вся основная работа происходит именно в пределах данного тега.

Вот мы и разобрались со стандартной структурой HTML-документа. Думаю, Вам все понятно. Теперь же поговорим о базовых тегах, знание которых поможет нам хоть немного разбираться в коде сайта.

Я сам обладаю исключительно базовыми знаниями, однако этого вполне хватает, чтобы с легкостью ориентироваться в коде, находить ошибки и исправлять их.

context-up.ru

Основные цели и задачи HTML

Не так давно на моем блоге был обзор по основам CSS. Из него вы можете узнать, как с помощью CSS менять внешний вид страницы сайта, ее стиль. Теперь разберемся с основами HTML-верстки для начинающих.

HTML – это язык гипертекстовой разметки веб-страницы, который позволяет задать ее структуру, обозначить для браузера ее основные элементы. Так, для примера, заключая текст страницы в те или иные html-теги, можно оформить абзацы, списки, таблицы. Т.е. с помощью html мы даем понять браузеру, а он, соответственно, отобразит для пользователя заданную нами структуру страницы.

HTML является инструментом, так называемой, front-end разработки сайта. Что это означает? Наверняка вы уже не раз слышали, что есть такие понятия в среде создания сайтов, как front-end и back-end. Так вот, к front-end-разработке (внешний интерфейс) относятся инструменты и языки, которые отвечают за отображение сайта непосредственно для пользователя. Происходит отображение при помощи разных браузеров (Internet Explorer, Opera, Mozilla, Chrome и т.д.). Читайте о том, какой браузер самый лучший. Браузеры хорошо понимают HTML и CSS и преобразовывают полученную информацию в понятный для пользователя вид.

Back-end разработка основана на серверных языках, например, PHP. С помощью кода PHP данные сайта распознаются сервером, а далее передаются браузеру после преобразования кода специальным интерпретатором. Т.е. браузер так или иначе получает сайт в виде HTML разметки и CSS стилей. Посмотреть исходный код сайта можно, к примеру, в Firebug. Из исходного кода не всегда можно определить, на каком языке программирования написан сайт, но коды стилей CSS и теги HTML вы увидите независимо от этого.

С чего начать изучение HTML?

Если вы серьезно настроены изучать этот язык, то советую сразу скачать какую-нибудь подробную книгу с хорошими отзывами или видео-курсы. Для начала можно посмотреть вот такое видео:

Самая новая версия языка HTML, возможности которой выходят далеко за рамки только разметки структуры текста – это HTML5. Кроме того, по сравнению с HTML4, в последней версии появилось много новых тегов, изменилась семантика.

Но в данной статье мы все же рассмотрим привычную четвертую версию языка HTML и ее основные теги. Для этого разберем основную структуру страницы HTML, а также иерархию тегов. Если вы не знаете с чего начать изучение HTML, тогда приведенная ниже информация даст вам базовое понимание принципов работы с языком гипертекстовой разметки.

Для создания html-документа будем использовать удобный редактор Notepad++.

Первое, что необходимо объявить — это тип документа со ссылкой на соответствующий ему раздел W3C:

А теперь составим простую страницу index.html с последующими комментариями:

В итоге в браузере отображается такая страница при открытии данного файла index.html:

Разберем его составные части подробнее.

Каркас документа это теги: html, head, body. Причем в тег html заключены все остальные:

Соответственно тег html объявляет об открытии для чтения и закрытии html-документа (<html> — открывающий тег, </html> — закрывающий тег).

Head – это «голова» документа, в нее включена информация, которая не будет отображаться в теле документа. Соответственно body – «тело» документа, или его видимая часть.

В head мы указываем кодировку (charset=utf-8) и title страницы. Далее для приведенного варианта мы подключаем стили с помощью тега <style> непосредственно в самом html документе. Если же, как в случае с Вордпресс, используется внешний файл стилей style.css, он подключается другим способом. Например, так:

Или так:

В нашем случае мы прописываем стили для блоков blok1 и blok2. Блоки эти мы создали внутри тегов body с помощью тегов <div>, для которых задали соответствующий класс (class=”blok1”). Таким образом, мы связали имя класса с его стилевым оформлением.

Как видим на скриншоте, первый блок blok1 имеет желтую заливку, а blok2 заключен в рамку, а цвет его текста синий. Все это мы задали с помощью стилей css, подключенных с помощью html-тега style.

Обратите внимание на конструкцию: <style type=»text/css»> и запомните терминологию. Здесь style – это тег, type – атрибут, значение которого — text/css.

Также в <div class=»blok1″>: div – тег, class – атрибут, blok1 – значение.

Таким образом, для каждого тега можно задавать определенные атрибуты, ему свойственные.

Например, распространенный атрибут align, который задает выравнивание текстового блога, может употребляться для тегов h1, p и многих других, который предполагают наличие текста. Его значениями могут быть left, right, center и т.д.

Теги h1,h2 и далее h3,h4 задают заголовки разных уровней в тексте.

Тег <p> — определяет текстовый абзац.

Вот мы и разобрались с тегами и атрибутами, которые были использованы для нашего сегодняшнего примера. Тегов существует великое множество, но для начала работы в html важно понимать логику их использования, структуру документа и основные алгоритмы его создания.

pro-wordpress.ru

Самый длинный путь начинается с первого шага. Собственно, путь в сайтостроение начинается с первого созданного именно Вами документа, и этот документ – Ваша первая HTML страница. С него-то мы и начнем.

Для создания страниц можно использовать специализированные средства, такие как phpDesignerPro, Adobe Dreamweaver или SharePoint от Microsoft, но в большинстве случаев можно обойтись более простыми средствами, такими как стандартный Блокнот Windows или его расширенная версия – «Notepad ++».

Для начала создания первой страницы, открываем блокнот (Пуск-Стандартные-Блокнот), создаем новый документ и вносим код указанный в примере 1. Для создания структуры HTML документа в коде используются теги <html>, <head>, <body>, прописанные в угловых скобках (<…>). В большинстве случаев используются парные теги, первый из которых открывает значение, а второй – закрывает (закрывающий тег содержит «/»). Необходимо запомнить простые правила, чтобы создавать валидный (правильный) код с первого раза:

• Вся разметка страниц HTML проводится с использованием тегов.
• Почти все теги парные (открывающий и закрывающий), за исключением небольшого количества тегов форматирования текста.
• Все, что написано внутри пары тегов подчиняется правилам примененного тега, в том числе использование другого тега.
• Для удобства теги лучше располагать «лесенкой», т.е. подчиненные теги прописываются с некоторым отступлением от начала управляющего тега.

Что такое валидность кода HTML и как ее проверить, будет рассказано в следующем уроке.

Пример 1. Создание первой HTML-странички

<html>

   <head>

   </head>

   <body>

          Этот документ читается как HTML

    </body>

</html>

Итак, первый документ создан. Теперь его необходимо сохранить, для чего используется команда «Сохранить как…», и при сохранении документа, ему присваивается любое имя (желательно на латинице) и вместо расширения .txt пишется .html или .htm. Это важно, поскольку файлы с расширением отличным от указанного не воспринимаются машинами как необходимый тип документа, и могут выполняться другими программами «по умолчанию».

После сохранения, Вы увидите файл со значком в виде странички. У меня установлен браузер Opera по умолчанию, поэтому значок выглядит так:

Открыв двойным кликом этот документ, мы увидим в браузере нашу первую страницу с текстом «Этот документ читается как HTML». Конечно, до сайта далеко, но мы только начинаем 🙂

Вторым шагом в создании документа HTML будет формирование «шапки» и «тела». Создается это также с использованием тегов <head> и <body>, следующими непосредственно друг за другом. На практике это выглядит так:

Пример 2 – голова и тело

<html>

Этот документ читается как HTML

            <head>

            Это шапка документа, не отображаемая пользователю.

            </head>

            <body>

            Это – тело документа, которое будет виден пользователю.

            </body>

</html>

Разделение на голову и тело можно сравнить с нервной системой человека. «Всем управляет голова» — выражение верное именно для HTML страниц, ибо в Голове находятся управляющие элементы, которым подчиняются элементы, заключенные в Теле документа.

Разбираться с деятельностью «Головы», мы, пожалуй, будем немного позже. Чтобы понять правила работы, сначала «поковыряемся» в Теле.

«Сначала было слово»… Вот, со слова начнем и мы. Для отображения на страницах используется текст, и форматирование текста – основная часть создания сайта. Вся последующая работа будет вестись в теге <body>

Для просмотра страницы открываем созданную страницу в своем браузере и одновременно открываем этот же документ редактором, т.е. блокнотом.

Пишем любой текст между тегами <body></body>, например, «Этот текст я хочу увидеть в окне браузера, потому что это первый мой документ».

Теперь придадим тексту красоты.

Для придания свойств тексту, таких как полужирный, курсив, подчеркнутый, применяются управляющие теги <i> </i>, <u> </u> и <b> </b>. Первый тег присваивает тексту курсивное начертание, второй – подчеркивание, третий – полужирное. А также применим тег «br» для разрыва строки. Код страницы будет выглядеть так:

<html>

            <head>

            </head>

            <body>

            Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера, </b> <br>потому что <i>это <b>первый</b> мой документ</i>

            </body>

</html>

Сохраняем изменения и обновляем страницу в браузере. В результате, в браузере мы увидим:

Этот текст я хочу увидеть в окне браузера,

потому что это первый мой документ

Более подробно с тегами форматирования, мы продолжим знакомиться на следующих уроках.

Написание кода лесенкой, не принципиально, показанный выше пример можно разместить в одну строку (сплошным текстом), и результат будет такой же

<html> <head></head><body>Этот <u>текст я хочу</u> увидеть <b>в <i>окне</i> браузера,</b> <br>потому что <i>это <b>первый</b> мой документ</i></body></html>

Но читать и редактировать такой код сложно, поэтому используется «лесенка» для лучшего восприятия и редактирования.

Специализированные программы, кроме Notepad ++, дают возможность просмотра результата в окне самой программы. Кроме того, можно открыть отредактированную страницу в браузере непосредственно из редактора. Для удобства пользования в специальных редакторах применяется синтаксическая подсветка кода и может использоваться набор стандартных HTML тегов для быстрой их вставки.

Список программ HTML-редакторов с кратким описанием их возможностей.

Notepad ++ — бесплатный редактор, заменяющий стандартный блокнот и дающие очень широкие возможности. Способен подсвечивать синтаксис многих языков программирования, в том числе и HTML, JavaScript, CSS, PHP.

phpDesigner 8 – достаточно мощная программа для верстки и программирования. Рекомендую использовать в дальнейшем. Приложение содержит готовые шаблоны страниц HTML, PHP и т.д. Вы так же можете создать свой шаблон. Способна подсвечивать синтаксис языков PHP, HTML, XHTML, CSS, JS, XML, SQL и многих других. Но еще одна важная особенность это автодополнение тегов, атрибутов, функций PHP и др. Из программы Вы можете сразу запустить проект и посмотреть результат.

Другие программы…

На выбор можете использовать и другие пакеты:

Adobe Dreamweaver – мощный пакет от Adobe, ранее приобретенный у Macromedia (той самой, которая когда-то активно внедряла Flash ролики и собственно была родоначальницей  Flash). Пакет платный.

HTML Pad – поддерживает многие языки (HTML, VB, ASP, Perl и др.)

PSPad – еще одна бесплатная альтернатива блокнота, понимающая HTML, CSS

EditPlus – так же понимает большое кол-во синтаксисов, в том числе и HTML c CSS.

На этом пока все.

www.programm-school.ru

<!DOCTYPE html>  <html>   <head>   <meta charset="utf-8">   <title>Пример веб-страницы</title>   </head>   <body>   <h1>Заголовок</h1>   <!-- Комментарий -->   <p>Первый абзац.</p>   <p>Второй абзац.</p>   </body>  </html>

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Пример веб-страницы</title>

</head>

<body>

<h1>Заголовок</h1>

<!-- Комментарий -->

<p>Первый абзац.</p>

<p>Второй абзац.</p>

</body>

</html>

webref.ru

Структура веб-страницы

• Содержание:
• 1. Структура HTML-документа
• 1.1. Элемент <html>
• 1.2. Элемент <head>
• 1.2.1. Элемент <title>
• 1.2.2. Элемент <meta>
• 1.2.3. Элемент <style>
• 1.2.4. Элемент <link>
• 1.2.5. Элемент <script>
• 1.3. Элемент <body>

1. Структура HTML-документа

Язык HTML следует правилам, которые содержатся в файле объявления типа документа (Document Type Definition, или DTD). DTD представляет собой XML-документ, определяющий, какие теги, атрибуты и их значения действительны для конкретного типа HTML. Для каждой версии HTML есть свой DTD.

DOCTYPE отвечает за корректное отображение веб-страницы браузером. DOCTYPE определяет не только версию HTML (например, html), но и соответствующий DTD-файл в Интернете.

<!DOCTYPE html> <!-- Объявление формата документа -->  <html>  <head> <!-- Техническая информация о документе -->  <meta charset="UTF-8"> <!-- Определяем кодировку символов документа -->  <title>...</title> <!-- Задаем заголовок документа -->  <link rel="stylesheet" type="text/css" href="style.css"> <!-- Подключаем внешнюю таблицу стилей -->  <script src="script.js"></script> <!-- Подключаем сценарии -->  </head>  <body> <!-- Основная часть документа -->  </body>  </html>

Элементы, находящиеся внутри тега <html>, образуют дерево документа, так называемую объектную модель документа, DOM (document object model). При этом элемент <html> является корневым элементом.

Чтобы разобраться во взаимодействии элементов веб-страницы, необходимо рассмотреть так называемые «родственные отношения» между элементами. Отношения между множественными вложенными элементами подразделяются на родительские, дочерние и сестринские.

Предок — элемент, который заключает в себе другие элементы. На рисунке 1 предком для всех элементов является <html>. В то же время элемент <body> является предком для всех содержащихся в нем тегов: <h1>, <p>, <span>, <nav> и т.д.

Потомок — элемент, расположенный внутри одного или более типов элементов. Например, <body> является потомком <html>, а элемент <p> является потомком одновременно для <body> и <html>.

Родительский элемент — элемент, связанный с другими элементами более низкого уровня, и находящийся на дереве выше их. На рисунке 1 <html> является родительским только для <head> и <body>. Тег <p> является родительским только для <span>.

Дочерний элемент — элемент, непосредственно подчиненный другому элементу более высокого уровня. На рисунке 1 только элементы <h1>, <h2>, <p> и <nav> являются дочерними по отношению к <body>.

Сестринский элемент — элемент, имеющий общий родительский элемент с рассматриваемым, так называемые элементы одного уровня. На рисунке 1 <head> и <body> — элементы одного уровня, так же как и элементы <h1>, <h2> и <p> являются между собой сестринскими.

1.1. Элемент <html>

Является корневым элементом документа. Все остальные элементы содержатся внутри тегов <html>...</html>. Все, что находится за пределами тегов, не воспринимается браузером как код HTML и никак им не обрабатывается. Для элемента доступны атрибуты manifest и xmlns, а также ‎глобальные атрибуты.

1.2. Элемент <head>

Раздел <head>...</head> содержит техническую информацию о странице: заголовок, описание, ключевые слова для поисковых машин, кодировку и т.д. Введенная в нем информация не отображается в окне браузера, однако содержит данные, которые указывают браузеру, как следует обрабатывать страницу.

Для элемента доступны ‎глобальные атрибуты.

1.2.1. Элемент <title>

Обязательным тегом раздела <head> является тег <title>. Текст, размещенный внутри этого тега, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, чтобы полностью поместиться в заголовке. Текст заголовка должен содержать максимально полное описание содержимого веб-страницы.

Для элемента доступны ‎глобальные атрибуты.

1.2.2. Элемент <meta>

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

<meta name="description" content="Описание содержимого страницы">  <meta name="keywords" content="Ключевые слова через запятую">

Описание содержимого страницы и ключевые слова одновременно можно указывать на нескольких языках, например, на русском и английском:

<meta name="description" lang="ru" content="Описание содержимого страницы">  <meta name="description" lang="en" content="Description">  <meta name="keywords" lang="ru" content="Ключевые слова через запятую">  <meta name="keywords" lang="en" content="Keywords">

С помощью тега <meta> можно запретить или разрешить индексацию веб-страницы поисковыми машинами:

Индексация и переход по ссылкам разрешены:

<meta name="robots" content="index, follow">

Индексация разрешена, переход по ссылкам запрещен:

<meta name="robots" content="index, nofollow">

Индексация и переход по ссылкам запрещены:

<meta name="robots" content="noindex, nofollow">

Для автоматической перезагрузки страницы через заданный промежуток времени нужно воспользоваться значением refresh:

<meta http-equiv="refresh" content="30">

Страница будет перезагружена через 30 секунд. Чтобы перебросить посетителя на другую страницу, нужно указать URL-адрес в параметре url:

<meta http-equiv="refresh" content="0; url=http://yandex.ru/">

Для элемента <meta> доступны атрибуты charset, content, http-equiv, name, а также ‎глобальные атрибуты.

1.2.3. Элемент <style>

Внутри этого элемента задаются стили, которые используются на странице. Для задания стилей в HTML-документе используется язык CSS. Таких элементов на странице может быть несколько.

Для элемента доступны атрибуты media, scoped, type, а также ‎глобальные атрибуты.

Внутрь этого элемента можно записывать код форматирования как самих элементов веб-страницы, так и веб-страницы целиком.

<style type="text/css">  .paper {  width: 200px;  height: 300px;  background-color: #ef4444;  color: #666666;  }

Чтобы подключить к элементу заданный стиль, необходимо через атрибут class (или id) присвоить элементу соответствующее название:

<div class="paper">  ...  </div>

CSS-код можно встраивать непосредственно в элемент разметки в виде значение атрибута style, например:

<p style="color: #666666; background-color: #ef4444; padding: 20px;">

1.2.4. Элемент <link>

Задать стили для документа можно также при помощи другого способа — записать их в отдельный файл с расширением .css, например, style.css.

Подключить файл со стилями к веб-странице можно двумя способами:
через директиву @import url

<!DOCTYPE html>  <html>  <head>  <style>  @import url(style.css);  </style>  <meta>  <title> </title>  </head>

с использованием элемента <link>. Элемент не требует закрывающего тега. Данный элемент определяет отношение между текущей страницей и другими документами. Таких элементов на странице может быть несколько. Запись будет иметь следующий вид:

<link rel="stylesheet" href="style.css" type="text/css">

Для элемента доступны атрибуты href, hreflang, media, rel, type, а также ‎глобальные атрибуты.

1.2.5. Элемент <script>

Элемент <script> позволяет присоединять к документу различные сценарии. Закрывающий тег обязателен, при этом текст сценария может располагаться либо внутри этого элемента, либо во внешнем файле. Если текст сценария расположен во внешнем файле, то он подключается с помощью атрибутов элемента. Для элемента доступны атрибуты async, charset, defer, src, type, а также ‎глобальные атрибуты.

1.3. Элемент <body>

В этом разделе располагается все содержимое документа. Для элемента доступны ‎глобальные атрибуты.

html5book.ru