Как следует из предыдущей главы, HTML является языком разметки задача которого — просто «размечать» текстовый документ используя теги, которые, в свою очередь, говорят веб — браузеру, как именно нужно отобразить данный документ.
Создание HTML документов
Для того, чтобы создать HTML документ необходимо:
- Открыть любой текстовый редактор (например блокнот, Notepad++ и т.д.);
- Набрать произвольный текст и разметить его HTML тегами;
- Cохранить файл с расширением .htm или .html.
Базовый документ HTML
Ниже приведен в своей простейшей форме пример HTML-документа:
Пример HTML:
Попробуй сам
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Заголовок страницы</title>
</head>
<body>
<h1>Это заголовок</h1>
<p>Это параграф.</p>
</body>
</html>Теперь вы можете воспользоваться кнопкой Попробуй сам, которая расположена в правом верхнем углу окна кода, для того, чтобы проверить результат этого HTML — кода, или сохраните код в HTML — файл test.html с помощью любого текстового редактора. И, наконец, откройте его с помощью веб — браузера, например Internet Explorer, Google Chrome или Firefox и т.д. Браузер должен показать следующий результат:
HTML теги
Как говорилось ранее, HTML это язык разметки, который использует различные теги для форматирования содержимого документа. Эти теги заключены в угловые скобки <имя тега>. За исключением нескольких тегов, большинство тегов имеют соответствующие им закрывающие теги. Например <html> имеет свой закрывающий тег </html>, а тег <body> в свою очередь, имеет свой закрывающий тег </body> тег и т.д.
| Всегда закрывайте теги, так как отсуствие закрывающего тега может приводить к непредсказуемым ошибкам при отображении документа. |
Рассмотренный пример HTML-документа использует следующие теги:
| Название тега | Описание |
|---|---|
| <!DOCTYPE…> | Это инструкция для веб-браузера о том, на какой версии HTML написана страница. |
| <html> | Этот тег является корневым элементом HTML страницы и заключает в себе весь HTML — документ |
| <head> | Этот тег содержит мета-информацию о документе и может содержать другие теги, такие как <title>, <link> и т.д. |
| <title> | Этот тег определяет заголовок веб-страницы, в браузере вы его видите вверху на текущей вкладке. |
| <meta> | Этот тег предназначен для предоставления структурированных метаданных о веб-странице. В нашем примере определяет кодировку документа. |
| <body> | Элемент содержит видимое содержимое страницы, который включает в себя другие HTML-теги, например <h1>, <div>, <p> и т.д. |
| <h1> | Этот тег представляет собой заголовок. |
| <p> | Этот тег представляет собой абзац. |
Теги могут быть написаны как в верхнем регистре так и в нижнем, но World Wide Web Consortium (W3C) — глобальный консорциум, который занимается поддержкой HTML-стандарта, рекомендует использовать нижний регистр (а в XHTML это требование является обязательным).
Структура HTML-страницы
Ниже приведена визуализация структуры HTML-страницы:
Объявление doctype на самой верхней строчке:
<!DOCTYPE…>
Корневой элемент HTML-страницы:
<html>
Контейнер <head> содержит информацию для браузеров и поисковых систем:
<head>
<title>Заголовок окна веб-страницы</title>
</head>
Видимое содержимое страницы:
<body>
<h1>Это заголовок.</h1>
<p>Это абзац.</p>
</body>
</html>
The <!DOCTYPE> декларация
HTML документ должен содержать объявление <!DOCTYPE> на самой первой строчке. Объявление <!DOCTYPE> это — инструкция для веб-браузера о том, на какой версии HTML написана страница. Это непарный тег, то есть у него нет закрывающего тега. Текущая версия HTML 5 использует следующую декларацию:
<!DOCTYPE html>
Cуществует несколько видов DOCTYPE. Есть строгие виды (strict), которые работают на основе только определенных тегов, есть переходные (transitional), которые допускают возможность включения дополнительных тегов, есть такие, которые работают с фреймами (frameset).
В HTML 4.01 doctype ссылается на Document Type Definition (DTD описывает схему документа для конкретного языка разметки посредством набора объявлений), который основан на SGML. Есть 3 разных типа doctype в версии HTML 4.01.
HTML 4.01 Strict
Этот DTD содержит все элементы HTML и аттрибуты, но ИСКЛЮЧАЕТ устаревшие или стилевые элементы (например, тег font). Также в strict не допускается использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4.01 Transitional
Этот DTD содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. Frameset (фреймы) не допускаются.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
HTML 4.01 Frameset
Этот DTD тоже содержит все HTML элементы и аттрибуты, ВКЛЮЧАЯ стилевые и устаревшие элементы. В отличие от HTML 4.01 Transitional, но он допускает использование frameset (фреймов).
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
В версии HTML5 есть только один doctype и определяется он следующим образом:
<!DOCTYPE html>
Правила DOCTYPE HTML5 являются универсальными, включают в себя правила предыдущей версии, а также возможность работы с HTML 4 тегами и в какой-то степени с XHTML, и объединяют в себе возможности всех своих предшественников, адаптируя их для работы в новых браузерах.
По сравнению с прежними своими собратьями, DOCTYPE HTML5 не основан на SGML (стандартном обобщённом языке разметки), поэтому там нет тех данных, которые указывались до этого, а следовательно — в нем присутствует только короткая команда. И дальше уже идет сам документ.
При отсутствии тега <!DOCTYPE> разные Web-браузеры мо
гут по-разному отображать веб-страницу.
Весь текст HTML-документа расположен между тегами <html> и </html>. HTML-документ состоит из двух разделов — заголовка (между тегами <head> и </head> ) и содержательной части (между тегами <body> и </body> ).
Раздел HEAD.
Раздел HEAD содержит техническую информацию о веб-странице — заголовок, ее описание и ключевые слова для поисковых машин, данные об авторе документа, времени создания страницы, базовом адресе страницы, кодировке документа и т. д. Единственным обязательным тегом в разделе HEAD является тег <title>.
Текст, расположенный между тегами <title> и </title>, отображается в строке заголовка веб-браузера. Длина заголовка должна быть не более 60 символов, иначе он не полностью поместится в заголовке веб-браузера:
<title>Заголовок страницы</title>
| Текст, расположенный между тегами <title> и </title> используется в результатах, выдаваемых поисковыми машинами, в качестве текста ссылки на эту страницу. По этой причине заголовок должен максимально полно описывать содержание веб-страницы. |
С помощью одинарного тега <meta> можно задать описание содержимого веб-страницы, а также ключевые слова для поискового портала. Если текст между тегами <title> и </title> используется в качестве текста ссылки на эту страницу, то описание из тега <meta> будет отображено под ссылкой на веб-страницу:
<meta name="description" content="Описание содержимого страницы"> <meta name="keywords" content="Ключевые слова через запятую">
| В разделе HEAD могут быть расположены также теги <base>, <link>, <script>, <style> и другие. Все эти теги мы рассмотрим в дальнейшем по мере изучения материала. |
О сайте
Помощь
Копирование материалов
Борьба с ошибками
Технологии
Поисковый плагин
Основные разделы
Статьи
Блог
Практикум
Цифровые книги
Форум
HTML
Самоучитель HTML
XHTML
Справочник по HTML
HTML5
CSS
Самоучитель CSS
Справочник по CSS
Рецепты CSS
CSS3
Сайт
Вёрстка
Макеты
Веб-сервер
htmlbook.ru использует хостинг timeweb© 2002–2023 Влад Мержевич, по всем вопросам пишите по адресу vlad@htmlbook.ru
Подпишитесь на материалы сайта по RSS
Скачать учебник, описания, примеры, библиотеки
Скачать базу данных
- Скачать базу синонимов для русского языка. (232Kb)
[520] - Скачать базу данных стран и городов в формате MySql.
- Скачать базу ip адресов в формате MySql.
- Скачать базу телефонных номеров и MNP переносов в формате MySql.
- Скачать базу телефонных номеров распределенных операторам по регионам (def-коды).
- Скачать базу MCC,MNC кодов с данными по всему миру в формате CSV.
- Скачать базу данных курсов валют в формате XML. Скрипт и описание как получить актуальную информацию о курсах валют на сайте ЦБ РФ.
- Скачать базу банков России в формате MySql или json.
- Скачать базу марок и моделей автомобилей в формате MySql.
Учебники
Учебники HTML
Скачать справочник по тегам HTML «HTML в примерах». (201Kb)
[3504]
Полный справочник по HTML-тегам от Александра Климова,
стили CSS, цвета и фильтры, события в формате помощи windows (.chm).
Скачать учебник HTML для начинающих. (161Kb)
[2583]
Это не сухое изложение всего подряд, это попытка поработать на ассоциациях,
сделать все более легко запоминающимся. Обучение по шагам. Учебник в формате html-страниц.
Скачать практическое руководство по HTML. (35Kb)
[1723]
Это руководство задумано как учебник по языку разметки с практическим уклоном для тех,
кто хочет публиковать документацию любого рода в глобальной компьютерной сети Интернет. Руководство в формате html-страниц.
Скачать учебник по HTML. (68Kb)
[1587]
Учебник с удобной навигацией, приятным дизайном и неплохим содержанием. Учебник в формате html-страниц.
Скачать справочное руководство по HTML тегам. (20Kb)
[172]
Небольшое справочное руководство по HTML тегам в формате MS Word.
Скачать спецификацию HTML 4.01. (399Kb)
[105]
Полная спецификация HTML 4.01 от W3C датированная 24.12.1999г. Спецификация в формате html-страниц.
Скачать учебник HTML + CSS. (821Kb)
[2198]
Учебник HTML + CSS с примерами, справочник по созданию Web-сайтов. Учебник в формате html-страниц.
Скачать Создание HTML. (145Kb)
[1104]
Учебник в формате Word.
Скачать учебник HTML + CSS. (167Kb)
[1468]
После прочтения данного руководства вы научитесь пользоваться всеми средствами языка HTML.
Учебники CSS
Скачать справочник по CSS. (933Kb)
[1764]
Справочник по CSS 2 в формате помощи windows (.chm).
Скачать справочник CSS (111Kb) от spravkaweb.ru
[955]
Справочник в формате Windows-справки(.chm). Дата создания справочника: 9.11.2004
Скачать справочник по CSS (111Kb) от PHP.su
[902]
Справочник в формате Windows-справки(.chm).
Скачать практическое руководство по CSS (42Kb)
[1515]
Данное руководство по CSS можно назвать полноценным учебником по каскадным таблицам стилей CSS с подробными комментариями и практическими примерами.
Скачать спецификацию по CSS2 (702Kb)
[823]
Спецификация CSS2 от W3C, датированная 12.05.1998г.
Учебники JavaScript
JavaScript и Спецификация ECMA. (163Kb).
[1039]
Описание JavaScript версии 1.5 от Netscape.
Введение в JAVASCRIPT ДЛЯ МАГА. (228Kb).
[1282]
Введение в JAVASCRIPT ДЛЯ МАГА, Стефан Кох, описание, перевод Р. Усманова, апрель 1998.
Очень толковое руководство по JavaScript, насыщенное большим количеством примеров с подробными комментариями к ним
Скачать справочник JavaScript V.1.3. (487Kb).
[1314]
Эта книга является справочным пособием по языку программирования JavaScript версии 1.3, включая ядро и клиентский JavaScript.
Скачать Руководство по JavaScript (200Kb).
[1334]
Удобное руководство по языку JavaScript, содержит языковые понятия и встроенный полноценный справочник.
Скачать Клиентский JavaScript (339Kb).
[913]
В этой книге рассматривается использование ядра и клиентского JavaScript версии 1.3.
Сюрреализм на JavaScript (23Mb).
[396]
Книга о разработке игр и приложений на JavaScript. В книге встречается множество отсылок к авторам различных публикаций и экспертам фронтенд-разработки.
Также затрагивается тема кроссплатформенной разработки на JavaScript для различных устройств, XSS атаки, обфускация кода, и конвертирования HTML в EXE, HTA, CHM и т.п.
Читать онлайн на сайте автора.
Учебники PHP
Скачать самоучитель PHP (463Kb) от softtime.ru
[1898]
Скрипты
Системы управления сайтом (CMS)
В этом разделе Вы не найдете сложные системы управления контетном типа Joomla, WordPress, Dupal и тому подобные.
Здесь размещены простенькие CMS, разобраться в которых достуднодаже начинающему WEB-разработчику.
Если Вам нужны более мощьные системы обратите внимание на раздел сайта CMS.
Скачать систему управления сайтом «DinamikCMS v 1.08 Stability». (427Kb)
[655]
Cистема управления сайтом (CMS) с открытым исходным кодом на PHP, полностью русская, не использует баз данных.
Скачать систему управления сайтом «AlberT-EasySite». (1 244Kb)
[463]
Более сложная система управления сайтом с плугинами и темами AlberT-EasySite. С открытым исходным кодом на PHP.
Скачать скрипт Club v.1.0. (21Kb)
[585]
С помощью скрипта Club v.1.0 Вы можете создать на своем сайте:
Клуб, Клан, Фотоальбом чата, Закрытую часть сайта (для «избранных» посетителей) и т.д.
Регистрация, закачка фотографий, статистика, общение, внутренний ICQ сервер и множество других утилит,
скрипт просто в настройке и установке.
Скачать скрипт службы знакомств ParkerLove на PHP. (8Kb)
[482]
ParkerLove — собственная мини-служба знакомств.
Скрипт работает без баз данных, используя текстовые файлы.
Различные PHP-скрипты
Скачать Парсер результтов Google на PHP. (1.6Kb)
[54]
Скачать Класс для создания ICQ чат-роботов на PHP. (45Kb)
[403]
Скачать мини-чат на PHP. (18Kb)
[557]
C помощью этого скрипта вы легко можете сделать на своем сайте маленький «матюгальник»,
куда посетители сайта могли бы быстро высказать свое мнение.
Скачать скрипт обменника WebMoney на PHP. (26Kb)
[505]
Данное программное обеспечение предназначено для создания
интернет-сервиса по организации автоматического обмена WMZ<=>WMR,
WMZ<=>WME, WMR<=>WME на веб-сайтах. Такой обмен позволяет владельцам
сайтов получать прибыль в виде комиссионных.
Скачать скрипт телефонного справочника на PHP + MySQL. (67Kb)
[41]
Здесь Вы сможете попробовать и скачать большое количество бесплатных PHP скриптов
Платные PHP-скрипты
Geo-скрипты:
- Скрипт PHP выбор страна>регион>город с использованием Ajax,
- Скрипт PHP выбор страна>регион>город без использования Ajax,
- Скрипт PHP выбор города по начальным буквам,
- Скрипт PHP по номеру телефона получить страну и город с использованием Ajax,
- Скрипт PHP позволяет вычислить расстояние между городами
- Скрипт PHP по выводит ближайшие города от выбранного с использованием Ajax
- Скрипт PHP выводит все страны мира
- Скрипт PHP выводит информацию о своем ip адресе
Универсальная система резервного копирования.
Создание линейного графика средствами библиотеки GD на PHP.
Наложение логотипа на изображение.
Универсальная рассылка почты на PHP.
Отправка почты по шаблону минуя SMTP-сервер провайдера на PHP.
Определение кодировки страницы сайта. Чтение страницы сайта и преобразование в UTF-8 или в Windows-1251.
Разбор Robots.txt.
Поиск по сайту с учетом морфологии русского языка на PHP + карта сайта.
Загрузка файла на сервер перетаскиванием Drag and Drop с использованием AJAX+PHP+JavaScript.
JavaScript-скрипты
Скачать Highslide — просмотр изображений. (5.6Kb)
[21]
Разрешается бесплатно использовать только на некомерческих сайтах.
Сайт пректа: http://highslide.com/
Скачать GrayScale — Обесцвечивание элементов веб страниц. (3.5Kb)
[305]
Сайт пректа: http://james.padolsey.com/demos/grayscale/
Скачать LightGallery это скрипт для просмотра изображений. (3.5Kb)
[275]
Сайт пректа: http://www.jstoolbox.com/proekty/lightgallery/
Ajax Галерея изображений. Листание и Слайд-шоу.
Демо здесь.
Непосредственно код можно скачать здесь.
Сайт пректа: здесь.
Здесь Вы сможете попробовать и скачать большое количество бесплатных Javascript скриптов
Скачать софт, необходимый WEB-разработчику
Open Server. Удобная сборка для web-разработки, содержащая Apach, Nginx, PHP, MySQL, phpMyAdmin.
Скачать программу преобразования системных шрифтов Windows TTF в шрифты для библиотеки GD(.gdf). (180Kb)
[436]
Для вывода с помощью PHP библиотеки GD текста на изображениях необходимы шрифты специального формата.
Выдает все шрифты, которые есть в системе. Можно задать ширину и высоту символов, а также способ начертания.
Пример использования gdf-шрифтов.
Скачать мини-PHP-админка. (7.9Kb)
[33]
Система управления MySQL-базами. Это, конечно, не такая супер система как phpMyAdmin, но кое-что тоже может.
Скачать SQL Buddy (Ajax-PHP-админка). (327Kb)
[29]
SQL Buddy — это веб приложение, предназначенное для администрирования MySQL баз данных.
Примечательно тем, что использует AJAX-технологию, что делает работу с приложением чрезвычайно быстрой.
Сайт пректа: http://sqlbuddy.com/
Скачать WGet 1.11.4. (394Kb)
Скачать WGet 1.21.1. (1.9Mb)
WGET — программа для загрузки файлов и для скачивания сайта целиком.
Интерфейса нет, — только командная строка.
Описание wget здесь.
Сайт пректа: http://www.gnu.org/software/wget/
Сжатие изображений
Скачать pngcrush. (327Kb)
[342]
Чтобы сжать png файлы без потери качества используйте следующую команду:
pngcrush -rem alla -reduce -brute image.png result.png
Сайт пректа: http://pmt.sourceforge.net/pngcrush/
Скачать jpegtran. (327Kb)
[303]
Чтобы сжать файлы jpeg, используйте следующую команду:
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
Сайт пректа: http://sylvana.net/jpegcrop/jpegtran/
Скачать jhead. (53Kb)
[273]
Удаление EXIF заголовока и IPTC секцию из JPEG файла:
Для удаления EXIF заголовков у всех картинок в формате .jpg в каталоге c:pictures
копируете файл Jhead.exe в этот ваш каталог, затем Start -> Run.
В появившейся на экране строчке набираете команду cmd, попадаете в экран, эмулирующий сеанс в DOS,
в этом сеансе меняете текущую папку «cd c:pictures» и, находясь в ней запускаете:
1. для удаления заголовка ЕXIF:
jhead -de *.jpg2. для удаления секции IPTC:
jhead -di *.jpgСайт проекта www.sentex.net/~mwandel/jhead/
Скачивать можно только по ссылкам с сайта htmlweb.ru
Если у Вас в браузере запрещены куки, то предварительно Вам нужно обязательно войти или зарегистрироваться!
Здесь отобраны более удобные справочники по HTML кодам, оформленные в виде электронных книг.
Они будут полезны не только забывчивым вебмастерам, но и новичкам сайтостроения, которые выбрали легкий путь изучения языка HTML. В отличии от справочников, учебники HTML предлагают слишком много не нужной информации, которая в реальной работе используется на 10-15 процентов.
Только в учебных заведениях вручную набивают HTML документ, в реальной жизни заготовки страниц и файлов вокруг нас. Код не надо знать, его достаточно понимать, чтобы отредактировать заготовку шаблона под себя.
На этом сайте Вы найдете специальные шаблоны, имеющие в своем исходном коде подробные комментарии. Эти комментарии не видны при просмотре страниц, но очень полезны при редактировании кода. Вы можете скачать их бесплатно и свободно выкладывать в Интернет. В них вам достаточно заменить текст и картинки на свои.
Собранные в архив справочники обладают удобным поиском по категориям, темам, самому коду. Имеют иллюстрации и примеры, полные описания параметров тегов, таблицы цветов и т.д. Практически они являются учебником по языку программирования HTML с удобной навигацией.
Что такое HTML код? Можно считать его хозяином браузера, которым вы пользуетесь при посещении страниц Интернета. Браузер считывает представленный ему код с веб-страницы и, выполняя его команды, показывает результат нам в виде который предписан его создателем.
Практически браузер выполняет команды: «Лежать, Сидеть, Стоять«. А HTML код является строгим хозяином, отдающим команды своему подопечному.
Скачать архив со справочниками можно по прямой ссылке:
HTML — Справка [919,01 Kb] (cкачиваний: 1823)
Для того, чтобы сделать сайт, нужно знать много разных
веб языков.
Языки HTML и CSS предназначены для верстки сайтов
(верстка — это размещение элементов сайта по нужным местам).
Язык PHP нужен для программирования сайта
(с его помощью можно, к примеру, сделать регистрацию пользователей).
Язык JavaScript нужен для того, чтобы ‘оживить’ сайт: к примеру, сделать
меняющиеся картинки (слайдер).
Язык HTML
Язык HTML — это основа web сайтов, с его помощью
создается каркас страницы, которую вы видите в браузере.
Если сравнивать страницу сайта и обычную бумажную книгу,
то на сайте, как и в книге, есть абзацы и заголовки.
В книге есть название всей книги (по сути самый главный заголовок),
есть названия глав, параграфов в этих главах и так далее.
Заголовки, абзацы и другие блоки можно выделить и на странице сайта.
Это делается с помощью HTML тегов.
Что такое HTML теги?
HTML теги — это специальные команды для браузера.
Они говорят ему, что, к примеру, следует считать заголовком страницы,
а что абзацем.
Теги строятся по такому принципу: уголок <, потом имя тега,
а потом уголок >, вот так: <имя тега>. Имя тега может состоять
из английских букв и цифр. Примеры тегов:
<h1>, <p>, <b>.
Теги обычно пишутся парами — открывающий тег и соответствующий ему закрывающий.
Разница между открывающим и закрывающим тегами в том, что
в закрывающем теге
после уголка < стоит слеш /.
К примеру, <p> — так я открыл тег p, а так —
</p> —
я его закрыл. Все, что попадает между открывающим и закрывающим
тегами, подпадает под воздействие нашего тега.
Бывают теги, которые не нужно закрывать,
например, <br> или <img>.
Атрибуты
В тегах также могут размещаться атрибуты —
специальные команды, которые расширяют действие тега.
Атрибуты размещаются внутри открывающего тега в таком формате:
<тег атрибут1=»значение» атрибут2=»значение»>.
Кавычки могут быть любыми — одинарными или двойными,
допустимо их вообще их не ставить, если значение атрибута
состоит из одного слова (но это не желательно).
Язык CSS
Язык CSS расширяет возможности языка HTML.
Он позволяет менять цвета, шрифты, фон, в общем заниматься
красотой сайта. А HTML, соответственно, отвечает за структуру сайта.
Итак, приступим
Итак, вооружившись некоторыми предварительными теоретическими знаниями,
приступим к подробному изучению языка HTML на практике.