Введение. Что такое HTML и как строятся сайты.
Как создаются сайты?
Многие наши пользователи полагают что сайты делаются в некоем подобии программы MS Word, в которой мы с помощью мыши таскаем элементы, вводим тексты, форматируем их и на выходе получаем готовый сайт.
Увы, это далеко не так. Конечно же, существуют подобные программы для «превращения» изображений в код сайта, но они далеки от совершенства в том плане что на их выходе получается совершенно нечитаемый код, мало того, «раздутый» до неимоверных размеров (что, если его использовать в полученном таким образом виде, негативнейшим образом повлияет на индексирование сайта поисковиками, не говоря уже о лояльности покупателей, у которых сайт будет грузиться минутами).
Поэтому наши специалисты верстают сайты вручную, правя напрямую код сайта.
Основными языками, с помощью которых создаются сайты, являются:
- HTML
- CSS
- Javascript
- серверные языки (PHP, Ruby и другие)
О первых трех поговорим подробнее и научимся разбираться какой из них что делает. Все они обрабатываются браузером посетителя и не требуют установки каких-либо дополнений к браузеру или операционной системе.
HTML
Когда интернет был молодым и зеленым, HTML (HyperText Markup Language — язык гипертекстовой разметки) был единственным инструментом для создания сайтов.
По своей сути он является частным случаем XML и представляет собой набор тегов, которые открываются, закрываются и служат контейнерами для других элементов.
Например, попробуйте записать следующий код в блокнот и сохранить его как файл с расширением html (во время сохранения не забудьте выбрать Тип файла: Все файлы, для сохранения с расширением html достаточно добавить в конце имени файла «.html»), после чего открыть в браузере:
<!--Объявление стандарта HTML-->Скопировать
<!DOCTYPE html>
<!--Открытие основного контейнера -->Скопировать
<html>
<!--Открытие контейнера (тега) head, традиционно в этом теге объявляются используемые на странице скрипты, стили, заголовки и другая информация о странице для браузера и для поисковиков -->Скопировать
<head><!--Объявление кодировки (если не объявлена - то берется из заголовков, которые передал сервер)-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><!--Закрытие тега head-->
</head><!--Открытие тега body, описывающего видимую в браузере часть страницы-->
<body><!--Открытие абзаца (тег p, в большинстве браузеров по умолчанию он имеет отступы по 10 пикселей по горизонтали и вертикали до соседних элементов, если не задано иного форматирования)-->
<p><!--Открытие тега b внутри абзаца, в большинстве браузеров текст внутри этого тега будет полужирным, опять же, если не задано иного-->
<b> Этот текст будет полужирным, <!--Открытие тега i внутри тега b и абзаца, текст внутри тега i будет курсивным-->
<i>а этот - ещё и курсивным<!--Закрытие тега i-->
</i><!--Закрытие тега b-->
</b><!--Закрытие тега p-->
</p><!--Закрытие тега body-->
</body><!--Закрытие основного контейнера-->
</html>
Как легко заметить, теги закрываются в обратном порядке относительно того, как они открывались, в результате чего образуется структура вложенных друг в друга тегов, своеобразное дерево объектов, оно называется DOM-структурой (DOM — Document Object Model).
Необходимо помнить, что HTML-разметка обрабатывается браузером, и по сути именно от браузера зависит то, как посетитель увидит сайт, а браузеры у посетителей могут быть разными. Стандарты того как именно браузер должен обрабатывать HTML, CSS и JavaScript регулируются Консорциумом Всемирной Паутины (World Wide Web Consortium, W3C), и на их сайте можно найти стандарты обработки каждого HTML-тега и каждого CSS-свойства.
Надо заметить, что современные браузеры весьма (иногда даже излишне) лояльно относятся к порядку закрытия тегов, и даже к закрытию как таковому. Но это не значит что можно не соблюдать этот порядок или писать видимую часть страницы прямо в теге head. Браузер, конечно, покажет результат и даже ошибки никакой не выдаст, но различные роботы, посещающие сайты (а это могут быть поисковые системы или роботы рекламных кампаний!) могут отнестись к этому неадекватно, поэтому стандарты лучше соблюдать.
Если есть желание подробно изучить HTML, то существует масса самоучителей, лучшим из которых мы считаем самоучитель на сайте htmlbook.
Современные веб-мастера стараются использовать HTML-разметку чисто для обозначения логической разметки страницы, всю графическую часть они делают с помощью CSS-стилей, речь о которых пойдет далее.
CSS
Когда веб-мастера заметили что многие теги им приходится оформлять одинаковым образом (например, одинаковые списки, ячейки одной таблицы и так далее), то решили придумать инструмент для придания однотипным элементам одинакового внешнего вида. Так появились каскадные таблицы стилей (CSS, Cascading Style Sheets).
Преимущество их использования (помимо правки оформления целой группы элементов из одного места) состоит в том что они могут загружаться отдельным файлом, независимо от HTML-кода страницы, в результате чего посетитель может получать текст страницы до того как загрузится графическое оформление сайта. В результате «вес» кода страницы весьма значительно снижается, что не может не нравиться как поисковикам, так и посетителям сайта.
В CSS можно задать как глобальный стиль элементов (например, убрать отступ всех абзацев), так и стиль конкретного элемента (задав ему определенный класс или идентификатор).
В CSS можно обращаться к элементам по id или по классу. Например:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title> Селекторы классов и идентификаторов <style>Скопировать/* абзацу с классом big задаем шрифт arial и темно-бордовый цвет шрифта */
p.big { font-family: arial, helvetica, sans-serif; color: maroon; }/* блоку (тегу div) с идентификатором First задаем серебряный фон */
div#first { background-color: silver; }
</style> </head> <body> <!-- вот у нас этот блок с идентификатором first--> <div> ..... </div>Скопировать<!-- а вот абзац с классом big -->
<p> ..... </p> </body> </html>
Можно задавать какой-либо стиль только элементам, вложенным в какой-то определенный элемент (с определенным классом или id), в CSS3 также есть возможность задать стиль псевдоэлементам, идущим до или после определенного элемента. У каскадных таблиц в современном их стандарте весьма широкие возможности, вплоть до создания анимаций. Но необходимо помнить что эти CSS-изыски не поддерживаются старыми браузерами, а их избыток (особенно это относится к CSS-анимациям) сильно нагружает компьютер посетителя.
По CSS также существует очень хороший самоучитель на htmlbook.ru
То, что можно создавать разметку и стили страницы, конечно, прекрасно, но часто хочется «оживить» страницу каким-либо интерактивом: сделать «живую» обработку формы при ее вводе, показать реакцию на действия пользователя и так далее. Многое можно делать современными средствами HTML5 и CSS3, но во-первых, далеко не все, и к тому же не стоит забывать о поддержке старых браузеров, и тогда нам на помощь приходит JavaScript.
JavaScript
JavaScript (он же JS) — это полноценный язык программирования, позволяющий создавать очень гибкую обработку действий пользователя, анимацию и многое другое. Изучение JS — тема для отдельного цикла уроков.
Применительно же к работе с шаблонами магазина на InSales можем сказать, что хорошего знания JS не требуется. Будет более чем достаточно умения использовать библиотеку jQuery (это, пожалуй, самая популярная JS-библиотека, имеющая огромное количество полезных функций и экономящая столько времени, что сложно переоценить ее значение для современной веб-разработки), благо, она подключена абсолютно во всех темах оформления магазинов на InSales.
Перед изучением jQuery следует изучить HTML и понять (действительно понять, а не уметь использовать интуитивно) синтаксис CSS. Если эти навыки уже имеются, то для того чтобы начать использовать jQuery достаточно прочитать небольшой цикл статей. Особое внимание следует обратить на статью об AJAX, т.к. даже при использовании плагинов готовых интерфейсов обработку действий с этими интерфейсами разработчику шаблона все равно нужно уметь писать самостоятельно, хотя бы на уровне отправки и получения данных.
Для jQuery есть масса полезных плагинов, начиная от слайдеров и работы с cookies и заканчивая полностью готовыми интерактивными элементами интерфейса.
Важно отметить, что JS и jQuery — конечно, очень мощные и функциональные инструменты, но сделать с их помощью можно лишь то, что не требует сохранения в базу или чтения данных из базы (если, конечно, эти данные не доступны на какой-либо другой странице того же сайта, в этом случае их можно получить тем же AJAX’ом), а также нельзя, скажем, отправить куда-то email-сообщение, т.к. современные браузеры пока не обзавелись встроенными почтовыми серверами (и хорошо — это лишнее препятствие для распространения спама). Поэтому любому веб-разработчику важно научиться хотя бы на интуитивном уровне понимать что можно сделать средствами браузера, а что — нельзя.
Скажем, сохранить какие-либо данные о текущей сессии всегда можно в cookie — здесь участие сервера не требуется, но получить их с другого компьютера никак не получится, и к тому же размер одной cookie ограничем примерно 4 кб («примерно», т.
Желаем удачи всем начинающим веб-разработчикам! В следующих статьях речь пойдет непосредственно о шаблонах на платформе InSales.
Введение в HTML (язык разметки гипертекста)
Язык разметки HTML
HTML — это язык для описания структуры веб-страниц. Страницы, созданные с его помощью, могут быть просмотрены только при помощи специальных программ (браузеров), установленных на компьютерах пользователей.
- Аббревиатура HTML расшифровывается как Hyper Text Markup Language (язык разметки гипертекста).
- Запомните, он не является языком программирования, это язык разметки.
- HTML использует теги разметки, чтобы описать структуру веб-страницы.
Теги
HTML теги — это ключевые слова или символы, заключенные в угловые скобки, например <body>, <p>, <h3> и т. д. Теги бывают двух видов: парные и одиночные (их также называют пустыми). Парные теги состоят из открывающего и закрывающего тега, например: <p>текст</p>. Символ «/» после угловой скобки указывает на то, что тег закрывающий. Одиночные теги состоят только из открывающего тега, например: <br>. Теги не чувствительны к регистру, поэтому могут быть написаны как прописными, так и строчными буквами: <P> означает то же самое, что и <p>. Теги определяют, где начинается и где заканчивается, HTML-элемент.
С помощью тегов браузер распознает структуру и значение вашего текста, например, они сообщают браузеру, какая часть текста является заголовком, где начинается новый абзац, что нужно подчеркнуть и где расположить изображение (картинку). Получив эту информацию, браузер использует встроенные в него по умолчанию правила о том, как отображать каждый из этих элементов.
Примечание: в нашем HTML справочнике вы можете посмотреть стили, применяемые по умолчанию, для любого интересующего вас тега.
Без использования HTML тегов браузер выведет просто сплошной поток текста, без отступов, заголовков, абзацев и т.д. Чтобы стало понятнее, рассмотрим это подробнее на примерах.
Так выглядит страница, в которой используются теги для разметки:
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Летнее меню</title> </head> <body> <h2>Напитки в нашем кафе</h2> <h4>Мультифрукт - 100р.</h4> <p>Фруктовый напиток, содержащий апельсиновый и ананасовый соки.</p> <h4>Молочный коктейль - 150р.</h4> <p>Сливочное мороженое, перемешанное с мякотью фруктов.</p> </body> </html>
То же самое, но без использования тегов:
Напитки в нашем кафе Мультифрукт - 100р. Фруктовый напиток, содержащий апельсиновый и ананасовый соки.Молочный коктейль - 150р. Сливочное мороженое, перемешанное с мякотью фруктов.
С этой темой смотрят:
Путешествуя по просторам Всемирной паутины, вы смогли заметить, как различаются между собой оформление и возможности веб-страниц. Но не каждый из вас знает, что все это разнообразие реализовано на основе языка HTML. Все что вы видите на странице – текст, рисунки, таблицы и другие элементы, формирующие смысловое наполнение веб-страницы, именуемое контентом, создаются при помощи языка разметки HTML. Кликните правой кнопкой мыши по любой веб-странице, и в выпавшем меню выберите пункт «просмотр HTML кода» или «Исходный код» – появится текстовой редактор с непонятными, вам символами и значками – это и есть HTML-код страницы. Любой WWW-документ может содержать стилизованный и форматированный текст, графику и гиперсвязи с различными ресурсами Интернет.![]() Описание Web-страницы на языке HTML представляет собой набор инструкций, интерпретируемый программой-браузером. Документ, написанный на HTML, представляет собой текстовый файл, содержащий собственно текст, несущий информацию читателю, и теги разметки (markup tags). Теги – это определенные стандартом HTML, последовательности символов, являющиеся инструкциями для браузера. Согласно этим инструкциям программа располагает текст на экране, включает в него рисунки, хранящиеся в отдельных графических файлах, и формирует гиперсвязи с другими документами или ресурсами Интернет. Таким образом, файл на языке HTML приобретает облик Web-документа только тогда, когда он интерпретируется браузером. Однако, в стандартном языке HTML есть один существенный недостаток. А какая головная боль для программистов! Для облегчения жизни бедным веб-мастерам, были придуманы Cascading Style Sheets(CSS) — каскадные таблицы стилей. CSS действует другим, более удобным и экономичным способом. Для оформления абзацев в контенте сайта один раз прописывается код или стиль оформления. Этот код или описание стиля, сохраняется в отдельном файле. Далее нужно только при помощи HTML разметить текст на абзацы, а уж CSS позаботится об их оформлении. Код уменьшается в десятки и сотни раз. Размещение описания стилей в отдельном файле очень удобно, особенно если на сайте больше одной страницы. CSS совместно с HTML, позволяют творить чудеса, и все благодаря разделению труда по созданию веб-страниц. Разметка элементов страниц производится на основе HTML, а визуальное оформление элементам придается при помощи таблиц CSS Таблицы стилей CSS — попытка отделить детали дизайна странички от ее структуры и содержания. Пока это для вас китайская грамота. А я не буду строить из себя гуру и писать очередной самоучитель «Что такое HTML и CSS». Подобной информации вы найдете в интернете целый вагон, плюс к этому множество изданных учебников. Захотите углубиться в тему – флаг вам в руки. Не бойтесь, HTML и CSS весьма просты, и освоить их может любой чайник. Но торопиться с этим пока не стоит. По собственному опыту знаю, что лучше не перегружать мозг чайника излишней информацией, иначе он, т.
|
Введение в HTML — Документация по Веб-программированию 0.0.0
Изначально язык HTML (HyperText Markup Language) был задуман и создан как средство структурирования и форматирования документов без привязки к средствам отображения. В идеале, гипертекстовый документ должен одинаково выглядеть на различных устройствах (монитор ПЭВМ, экран ПДА или мобильного телефона, принтер, медиа-проектор и т.п.).
Разработкой спецификаций языка HTML и утверждением их в качестве официальных стандартов занимается Консорциум всемирной паутины (W3C). Помимо W3C, в развитии языка участвуют IT-компании и сообщество разработчиков.
Элементы гипертекста
Структура HTML-документа
Рис. 1. Общая структура веб-страницы
HTML-документ состоит из текста, который представляет собой информационное содержимое и специальных средств языка HTML — тегов разметки, которые определяют структуру и внешний вид документа при его отображении браузером. Структура HTML-документа (рис. 1) довольно проста:
- Описание документа начинается с указания его типа (секция DOCTYPE).
- Текст документа заключается в тег <html>. Текст документа состоит из заголовка и тела, которые выделяются соответственно тегами <head> и <body>.
- В заголовке (<head>) указывают название HTML-документа и другие параметры, которые браузер будет использовать при отображении документа.
- Тело документа (<body>) — это та часть, в которую помещается собственно содержимое HTML-документа. Тело включает предназначенный для отображения текст и управляющую разметку документа (теги), которые используются браузером.
Наличие секции DOCTYPE позволяет указать браузеру, какой тип документа ему предстоит разбирать, т.е, какие требования нужно выполнять при обработке гипертекста.
Заголовок предназначен для размещения метаинформации, описывающей веб-документ как таковой.
Блок <body> содержит то, что нужно показать пользователю: текст, изображения, внедренные объекты и пр.
Ниже приведен простой пример html-разметки.
<html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8" > <title>Почему откровенна веданта?</title> </head> <body> <h2>Почему Откровенна Веданта?</h2> <h3>Трактат о амбивалентности бытия, сомнениях и адживике</h3> <p>Философия нетривиальна и это не умозаключение, а плод переработки бытийного. Моцзы, Сюнъцзы и др. считали, что сомнение естественно понимает под собой гений, изменяя привычную реальность. Отношение к современности, как принято считать, непредсказуемо, а созерцание, конечно, транспонирует гравитационный парадокс, ломая рамки привычных представлений.Позитивизм преобразует дуализм, не учитывая мнения авторитетов. Можно предположить, что вещь в себе представляет собой типичный здравый смысл, учитывая опасность, которую представляли собой писания Дюринга. При этом буквы А, В, I, О символизируют соответственно суждения:</p> <ul> <li>общеутвердительное;</li> <li>общеотрицательное;</li> <li>частноутвердительное;</li> <li>частноотрицательное.</li> </ul></p> <p>Структурализм, как принято считать, подчеркивает закон исключённого третьего, открывая новые горизонты. Адживика преобразует неоднозначный предмет деятельности, tertium nоn datur. Согласно предыдущему, дуализм оспособляет примитивный бабувизм, ломая рамки привычных представлений. Наряду с этим вещь в себе дискредитирует сенсибельный принцип восприятия.</p> <p>В целом, представляется логичным, что адживика трансформирует субъективный гедонизм, тогда как бабувизм контролирует предмет деятельности, tertium nоn datur.
</p> </body> </html>
DOCTYPE
Секция DOCTYPE указывает браузеру тип документа и версию использованного языка разметки. Здесь также указывается название и область видимости описания этого языка и адрес файла dtd (document type definition).
Примеры DOCTYPE:
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd“>
- Гипертекстовый документ в формате HTML 4.01, содержащий фреймы.
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd“>
- Гипертекстовый документ в формате HTML 4.01 со строгим синтаксисом (т.е. не использованы устаревшие и не рекомендованные теги).
- <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>
- Гипертекстовый документ в формате HTML 4.01 с нестрогим («переходным») синтаксисом (т.е. использованы устаревшие или не рекомендованные теги и атрибуты).
- <!DOCTYPE HTML>
- Пока не стандартизованное объявление для документов HTML5.
Стандарт требует, чтобы секция DOCTYPE присутствовала в документе, т.к. это позволяет ускорить и улучшить обработку гипертекста. Это достигается за счет того, что браузер может не делать предположений о том, как интерпретировать теги, а свериться со стандартным определением (файлом .dtd). Подробное описание DOCTYPE — на сайте Консорциума W3C.
Мета-теги
Мета-тег HTML — это элемент разметки html, описывающий свойства документа как такового (метаданные). Назначение мета-тега определяется набором его атрибутов, которые задаются в теге <meta>.
Мета-теги размещают в блоке <head>…</head> веб-страницы. Они не являются обязательными элементами, но могут быть весьма полезны.
Пример описания метаданных:
<head> <meta name="author" content="строка"> — автор веб-документа <meta name="date" content="дата"> — дата последнего изменения веб-страницы <meta name="copyright" content="строка"> — авторские права <meta name="keywords" content="строка"> — список ключевых слов <meta name="description" content="строка"> — краткое описание (реферат) <meta name="ROBOTS" content="NOINDEX, NOFOLLOW"> — запрет на индексирование <meta http-equiv="content-type" content="text/html; charset=UTF-8"> — тип и кодировка <meta http-equiv="expires" content="число"> — управление кэшированием <meta http-equiv="refresh" content="число; URL=адрес"> — перенаправление </head>
Теги
Тег (html-тег, тег разметки) — управляющая символьная последовательность, которая задает способ отображения гипертекстовой информации.
HTML-тег состоит из имени, за которым может следовать необязательный список атрибутов. Весь тег (вместе с атрибутами) заключается в угловые скобки <>:
<имя_тега [атрибуты]>
Как правило, теги являются парными и состоят из начального и конечного тегов, между которыми и помещается информация. Имя конечного тега совпадает с именем начального, но перед именем конечного тега ставится косая черта / (<html>…</html>). Конечные теги никогда не содержат атрибутов. Некоторые теги не имеют конечного элемента, например тег <img>. Регистр символов для тегов не имеет значения.
Примеры часто используемых тегов HTML:
<html>...</html> — контейнер гипертекста <head>...</head> — контейнер заголовка документа <title>...</title> — название документа (то, что отображается в заголовке окна браузера) <body>...</body> — контейнер тела документа <div>...</div> — контейнер общего назначения (структурный блок) <hN>...</hN> — заголовок N-ного уровня (N = 1...6) <p>...</p> — основной текст <a>...</a> — гиперссылка <ol>...</ol> — нумерованный список <ul>...</ul> — маркированный список <li>...</li> — элемент списка <table>...</table> — контейнер таблицы <tr>...</tr> — строка таблицы <td>...</td> — ячейка таблицы <img>...</img> — изображение <form>...</form> — форма <i>...</i> — отображение текста курсивом <b>...</b> — отображение текста полужирным шрифтом <em>...</em> — выделение (курсивом) <strong>...</strong> — усиление (полужирным шрифтом) <br> — принудительный разрыв строки
Теги могут быть вложены, при этом форматирование внутреннего тега имеет преимущество перед внешним. При использовании вложенных тегов их нужно закрывать, начиная с самого последнего и двигаясь к первому:
<!-- Список как пример использования вложенных тегов --> <ol> <li>Элемент списка</li> <li>Второй элемент списка</li> </ol> <div> <h3>Заголовок второго уровня</h3> <p>и основной текст</p> внутри логического блока </div>
Примечание
Примечание: Браузеры обычно лояльно относятся к отсутствию конечных тегов у парных элементов и более-менее правильно отображают парные элементы уровня блока (p, li и т. п.), особенно в простых веб-документах. Тем не менее, рекомендуется следить за наличием закрывающих тегов и использовать их, чтобы избежать ошибок при воспроизведении документа.
Полный список тегов можно найти в документации на соответствующую версию языка HTML (см., например HTML 3.2, HTML 4.01, XHTML 1.1 и др.).
Атрибуты
Атрибуты — это пары вида «свойство = значение», уточняющие представление соответствующего тега:
<тег атрибут=”значение”>…</тег>
Атрибуты указывают в начальном теге, несколько атрибутов разделяют одним или несколькими пробелами, табуляцией или символами конца строки. Значение атрибута, если таковое имеется, следует за знаком равенства, стоящим после имени атрибута. Порядок записи атрибутов в теге не важен. Если значение атрибута — одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно. Все остальные значения необходимо заключать в кавычки, особенно если они содержат несколько разделенных пробелами слов.
Примечание
Примечание: Несмотря на необязательность кавычек, их все же стоит всегда использовать.
Атрибуты могут быть обязательными и не обязательными. Необязательные атрибуты могут быть опущены, тогда для тега применяется значение этого атрибута по умолчанию. Если не указан обязательный атрибут, то содержимое тега скорее всего будет отображено неправильно.
Краткий список некоторых часто используемых атрибутов и их возможных значений:
style="описание_стилей" — локальные стили src="адрес" — адрес (URI) источника данных (например картинки или скрипта) align="left|center|right|justify" — выравнивание, по умолчанию left (по левому краю) width="число" — ширина элемента (в пикселях, пиках, поинтах и др.) height="число" — высота элемента (в пикселях, пиках, поинтах и др.) href="адрес" — гиперссылка, адрес (URI) на который будет выполнен переход name="имя" — имя элемента id="идентификатор" — уникальный (в пределах веб-страницы) идентификатор элемента size="число" — размер элемента class="имя_класса" — имя класса во встроенной или связанной таблице стилей title="строка" — название элемента alt="строка" — альтернативный текст
Гиперссылки
Гиперссылка — это особым образом помеченный фрагмент веб-страницы (текст, изображение и др. ), который связан с другим документом. Для указания гиперссылок используется тег <a>. Гиперссылки позволяют перемещаться между связанными веб-страницами.
<a href="http://example.com/">Пример</a> <a href="ftp://example.com/archive.tar.gz">Скачать файл</a> <a href="mailto://[email protected]" title="Обратная связь">[email protected]</a>
Переход по ссылкам можно выполнять как на целые документы, так и на специальным образом помеченные (именованные) фрагменты текста:
<a name="якорь">Привязка к фрагменту текста</a> <a href="#якорь">Ссылка на якорь</a>
Ссылки могут быть абсолютными и относительными.
Абсолютные ссылки указывают, как правило, на внешний ресурс. Для них нужно указывать полный путь:
<a href="http://example.com/page.html">Абсолютная ссылка</a> <a href="http://example.com/images/figure1.gif">Ссылка на страницу в каталоге</a>
Относительные ссылки, напротив, используют для перехода на внутренние страницы сайта. Для них нужно указывать путь относительно ссылающейся страницы:
<a href="/index.html">Ссылка на страницу в корневом каталоге</a> <a href="page.html#seg1">Ссылка на фрагмент страницы в текущем каталоге</a> <a href="images/figure1.gif">Ссылка на страницу в подкаталоге текущего каталога</a> <a href="/docs/manual.html">Ссылка на страницу в подкаталоге корневого каталога</a> <a href="../files/index.html">Ссылка на страницу в вышележащем каталоге </a>
Специальные символы
Кроме тегов, в HTML-документах могут присутствовать и специальные символы.
Например, © — знак авторского права. Для отображения специальных символов используется мнемонический или числовой код вида &имя; или &#NNNN;, где NNNN — код символа в Юникоде в десятеричной системе счисления. Например: & (числовой код ©) — амперсанд (&), < — символ «меньше» (<) и > — символ «больше» (>), « — левая типографская кавычка («) и т. д.
Кросс-браузерность
Гипертекстовые документы обрабатываются специальными приложениями, которые читают код разметки и выводят документ в отформатированном виде. Такие приложения, называемые «браузерами» (в терминах спецификации HTML — «пользовательскими агентами», USER-AGENT), обычно предоставляют пользователю удобный интерфейс для запроса веб-страниц, их просмотра (и вывода на иные внешние устройства) и, при необходимости, отправки введённых пользователем данных на сервер. Наиболее популярными на сегодняшний день браузерами являются Internet Explorer, Mozilla Firefox, Apple Safari, Google Chrome и Opera. Наряду с этими существует масса других браузеров, которые используют их системные библиотеки (т.н. «движок») или работают на собственном коде.
Разнообразие браузеров и различия в их функциональности, а также изначальная ориентация HTML на поддержку различных устройств вывода, приводит разработчиков веб-сайтов к необходимости решения вопроса о кросс-браузерности.
Кросс-браузерность — свойство сайта отображаться и работать во всех популярных браузерах идентично. Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности.
Термин «кросс-браузерность» начали использовать во время браузерных войн, начавшихся с серидины 90-х годов XX в. В этом контексте термин относился к сайтам, которые одинаково работают как в Internet Explorer, так и в Netscape Navigator. В то время производители стали внедрять собственные функции для браузеров, что привело к существенным отличиям отображения веб-содержимого и концептуальным различиям в разработке веб-сайтов. В настоящее время ситуация смягчилась (отчасти из-за ухода с рынка Netscape), но не настолько, чтобы можно было говорить о близком окончании браузерных войн.
Правильная базовая структура веб-страницы & новости по созданию сайтов от ABCname
Базовая структура веб-страницы
Веб-страницы могут сильно отличаться друг от друга, но все они имеют тенденцию использовать одни и те же стандартные компоненты, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована.
Базовые элементы страницы веб-сайта
Заголовок веб-страницы
Как правило большая полоса сверху с большим заголовком и / или логотипом. Именно здесь обычно размещаетсябазовая информация о веб-сайте.
Панель навигации сайта
Ссылки на разделы сайта: обычно представлены кнопками меню, ссылками или вкладками. Как и заголовок, этот контент обычно остается неизменнымпри переходе с одной веб-страницы на другую — несогласованная навигация на вашем веб-сайте просто приведет к растерянности и разочарованию пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле некоторые также утверждают, что реализация этих двух составляющих по отдельности лучше для доступности, так как программы чтения с экрана лучше читают две функции, если они разделены.
Основное содержание веб-страницы
Большая область в центре, которая содержит большую часть уникального контента данной веб-страницы, например, видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, заголовки новостей и т. д. Это та часть сайта, которая определенно будет меняться от страницы к странице!
Боковая панель страницы
Тут размещается периферийная информация, ссылки, цитаты, реклама и т. д. Обычно это контекстно к тому, что содержится в основном контенте (например, на странице новостной статьи, боковая панель может содержать биографию автора или ссылки на связанные статьи), но есть также случаи, когда можно найти повторяющиеся элементы, такие как вторичная навигационная система.
Нижний колонтитул
Полоса в нижней части страницы, которая зачастую содержит мелкий шрифт, уведомления об авторских правах или контактную информацию. Это место для размещения общей информации, но как правило эта информация не является критичной по отношению к самому сайту. Нижний колонтитул также иногда используется в целях SEO, предоставляя ссылки для быстрого доступа к популярному контенту.
Составные части HTML-макета веб-страницы более подробно
Простое описание, показанное выше, вполне подходит для иллюстрации типичного примера макета сайта. При правильном CSS вы можете использовать практически любые элементы для обтекания различных разделов, чтобы они выглядели так, как вы хотите, но вам нужно соблюдать семантику и использовать правильный элемент для работы.
В HTML-кодетребуется разметить разделы контента на основе их функциональности — необходимо использовать элементы, которые однозначно представляют описанные выше разделы контента, а вспомогательные технологии, такие как программы чтения с экрана, могут распознавать эти разделы и помогать с такими задачами, как «найти навигацию» или «найти контент».
Для реализации такой семантической разметки HTML предоставляет специальные теги, которые используют для представления разделов, например:
Заголовок: < header >.
Панель навигации: < nav >.
Основное содержимое: < main >, с различными подразделами содержимого, представленными элементами < article >, < section > и < div >.
Боковая панель: < aside >; часто помещается внутри < main >.
Нижний колонтитул: < footer >.
Итог
В этом посте мы узнали, что такое HTML, что такое HTML-элемент, что такое HTML-тег и как устроена базовая HTML-страница. Надеемся, что теперь у вас есть понимание основной структуры веб-сайта, что делают его основные элементы и как они могут вам помочь.
Помогла ли вам статья?347 раз уже помогла
Комментарии: (0) Написать комментарийСтруктура страницы — Основы HTML, CSS и веб-дизайна
До этого момента мы рассматривали отдельные элементы. Теперь давайте посмотрим на целую HTML-страницу.
Создайте у себя на компьютере файл index.html
. Вы можете использовать любой текстовый редактор, например, встроенный в Windows блокнот. Но лучше использовать специальный редактор кода, например, VS Code.
Впишите в файл такое содержимое:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Теперь откройте файл в браузере. Вы увидите пустую страницу. Можете заглянуть в исходный код страницы — там будут те же строки кода.
Все эти элементы — обязательны.
HTML-документ должен начинаться с указания формата. Раньше там указывали версию HTML, но сегодня достаточно простого указания <!DOCTYPE html>
. Мы изучаем современный стандарт HTML и не будем заботиться о поддержке старых форматов и старых браузеров.
Всё содержимое документа обёрнуто в теги <html></html>
. У этого элемента могут быть атрибуты, например, такой: <html lang="ru">
. Так мы можем явно предупредить браузер, что этот документ — на русском языке.
Внутри находятся два элемента: head
и body
. Голова и тело :). Содержание «головы» не видно на самой странице. А содержание «тела» видно.
Внутри head
указываются так называемые метаданные и дополнительные файлы, необходимые для документа. «Мета» означает «над», «уровнем выше». Метаданные — это данные о данных. Например, здесь можно указать заголовок страницы. Он будет выведен в окне или вкладке браузера:
<!DOCTYPE html>
<html>
<head>
<title>Моё резюме</title>
</head>
<body>
</body>
</html>
А также информацию о кодировке страницы:
<meta charset="UTF-8">
Всё, что мы делали в предыдущих уроках, помещается внутрь body
. Это и есть то, что видно посетителю страницы.
<!DOCTYPE html>
<html>
<head>
<title>Моё резюме</title>
</head>
<body>
<h2>Алексей Примадонин</h2>
<h4>Веб-разработчик</h4>
<p>
<a href="mailto:[email protected]
com">[email protected]</a>,
<a href="https://github.com/alprim">github.com/alprim</a>
</p>
</body>
</html>
Супер! Мы сделали полноценную страницу. Но, честно говоря, она выглядит… не очень. Пока текста мало — все более-менее нормально, но с увеличением текста и других элементов страница будет выглядеть все более неопрятной.
Пора научиться задавать стили содержимому.
Остались вопросы? Задайте их в разделе «Обсуждение»
Вам ответят команда поддержки Хекслета или другие студенты.
Ошибки, сложный материал, вопросы >Нашли опечатку или неточность?
Выделите текст, нажмите ctrl + enter и отправьте его нам. В течение нескольких дней мы исправим ошибку или улучшим формулировку.
Что-то не получается или материал кажется сложным?
Загляните в раздел «Обсуждение»:
- задайте вопрос. Вы быстрее справитесь с трудностями и прокачаете навык постановки правильных вопросов, что пригодится и в учёбе, и в работе программистом;
- расскажите о своих впечатлениях.
Если курс слишком сложный, подробный отзыв поможет нам сделать его лучше;
- изучите вопросы других учеников и ответы на них. Это база знаний, которой можно и нужно пользоваться.
Об обучении на Хекслете
Страница index.
Урок 12.Что такое страница index? Это главная страница сайта.
У каждого сайта есть главная страница. Предположим у нас сайт автомобильной тематики имеющий 4 страницы. Это страница про автомобили Audi, вторая про BMW, третья про Mercedes и четвертая — это главная страница нашего сайта. Соответственно папка в которой находится наш сайт будет иметь 4 файла. Это audi.html, bmw.html, mercedes.html и index.html
Допустим наш сайт уже находится в интернете и имеет доменное имя «nemeckieavto.ru».
По ссылке nemeckieavto.ru/audi будет открываться наш файл audi.html
По ссылке nemeckieavto.ru/bmw будет открываться наш файл bmw.html
По ссылке nemeckieavto.ru/mercedes будет открываться наш файл mercedes.html
Теперь внимание! Для того, чтобы попасть на главную страницу нашего сайта, не нужно вводить в адресной строке nemeckieavto.ru/index, достаточно будет только ввести nemeckieavto.ru
Тем кто не понял, вот второй вариант объяснения:
1) Каждый сайт в интернете имеет доменное имя (домен).
2) Каждый сайт (за исключением одностраничных) имеет энное количество страниц (файлов), которые имеют свои названия.
3) Эти самые страницы (файлы) сайта будут доступны по адресу www.домен/название страницы
4) Главная страница сайта (файл index.html) будет доступна по адресу www.домен
Файл index.html в обязательном порядке присутствует абсолютно на любом сайте. Сайт не будет работать без этого файла.
В одностраничных сайтах присутствует только файл index.html, других файлов нет.
Создаем еще три страницы html.
На 2-ом уроке мы создали папку «Сайт» и в ней создали файл с расширением html. Скорее всего этот файл у Вас называется «new 0». Сейчас давайте в этой папке создадим еще 3 файла. Чтобы не заморачиваться с расширением и с кодировкой (2 урок), можно просто сделать 3 копии нашего файла «new 0». Таким образом у нас получится 4 файла с расширением html. Перед тем как сделать копии, удалите все html коды, которые мы писали в процессе работы. Оставьте только теги относящиеся к структуре html страницы.
С этими файлами мы будем работать в следующих уроках. Теперь давайте переименуем файлы и дадим им имена audi.html, bmw.html, mercedes.html и index.html. Не используйте в названии файлов заглавные буквы, с чем это связанно, Вы узнаете из следующего урока. Внимание! Если я пишу, что файл должен иметь имя, например, bmw.html, то это не значит что нужно дать ему имя bmw.html, это значит ,что файл должен иметь имя bmw, а html — это расширение (тип) файла, а не часть его имени!
Для тех, кто в танке, в результате в папке «Сайт» у нас 4 файла с расширением html:
Если по умолчанию у Вас стоит браузер FireFox, то вид ваших файлов будет как на рисунке. Если же по умолчанию установлен другой браузер, то и файлы будут с изображением другого браузера.
Вы что-то не поняли из этого урока? Спрашивайте!
— [email protected]
HTML (язык гипертекстовой разметки) Определение
означает «язык гипертекстовой разметки». HTML — это язык, используемый для создания веб-страниц. «Гипертекст» относится к гиперссылкам, которые может содержать страница HTML. «Язык разметки» относится к способу использования тегов для определения макета страницы и элементов на странице.
Ниже приведен пример HTML, используемого для определения базовой веб-страницы с заголовком и одним абзацем текста.
Это пример абзаца в HTML.
Первая строка определяет, какой тип содержимого содержит документ. «» означает, что страница написана в HTML5. Правильно отформатированные HTML-страницы должны включать теги ,
и , которые включены в приведенный выше пример. Заголовок страницы, метаданные и ссылки на файлы, на которые есть ссылки, помещаются между тегами .Фактическое содержимое страницы размещается между тегами .За последние несколько десятилетий Интернет претерпел множество изменений, но HTML всегда был основным языком, используемым для разработки веб-страниц. Интересно, что в то время как веб-сайты стали более продвинутыми и интерактивными, HTML на самом деле стал проще. Если вы сравните источник страницы HTML5 с аналогичной страницей, написанной в HTML 4.01 или XHTML 1.0, страница HTML5, вероятно, будет содержать меньше кода. Это связано с тем, что современный HTML полагается на каскадные таблицы стилей или JavaScript для форматирования почти всех элементов на странице.
ПРИМЕЧАНИЕ. Многие динамические веб-сайты генерируют веб-страницы «на лету» с использованием серверных языков сценариев, таких как PHP или ASP. Однако даже динамические страницы должны быть отформатированы с использованием HTML. Поэтому языки сценариев часто генерируют HTML-код, который отправляется в ваш веб-браузер.
Обновлено: 23 мая 2015 г.
TechTerms — Компьютерный словарь технических терминов
Эта страница содержит техническое определение HTML. Он объясняет в компьютерной терминологии, что означает HTML, и является одним из многих Интернет-терминов в словаре TechTerms.
Все определения на веб-сайте TechTerms составлены так, чтобы быть технически точными, но также простыми для понимания. Если вы сочтете это определение HTML полезным, вы можете сослаться на него, используя приведенные выше ссылки для цитирования. Если вы считаете, что термин следует обновить или добавить в словарь TechTerms, отправьте электронное письмо в TechTerms!
Подпишитесь на рассылку TechTerms, чтобы получать избранные термины и тесты прямо в свой почтовый ящик. Вы можете получать электронную почту ежедневно или еженедельно.
Подписаться
: HTML-документ / корневой элемент — HTML: язык разметки гипертекста
HTML-элемент
представляет корень (элемент верхнего уровня) HTML-документа, поэтому его также называют корневым элементом .Все остальные элементы должны быть потомками этого элемента.
Категории содержимого | Нет. |
---|---|
Разрешенное содержание | Один элемент , за которым следует один элемент . |
Отсутствие тега | Начальный тег может быть опущен, если первое, что находится внутри элемента , не является комментарием. Конечный тег может быть опущен, если за элементом сразу не следует комментарий. |
Допущенные родители | Нет. Это корневой элемент документа. |
Неявная роль ARIA | Нет соответствующей роли |
Разрешенные роли ARIA | Нет роль разрешена |
Интерфейс DOM | HTMLHtmlElement |
Этот элемент включает глобальные атрибуты.
-
манифест
- Задает URI манифеста ресурса, указывающего ресурсы, которые следует кэшировать локально.Подробнее см. Использование кеша приложения.
-
версия
- Задает версию определения типа документа HTML, которая управляет текущим документом. Этот атрибут не нужен, потому что он избыточен с информацией о версии в объявлении типа документа.
-
xmlns
- Задает пространство имен XML документа. Значение по умолчанию —
"http://www.w3.org/1999/xhtml"
. Это требуется в документах, анализируемых с помощью анализаторов XML, и необязательно в текстовых / html-документах.
...
...
Предоставление атрибута lang
с допустимым тегом языка идентификации IETF в элементе
поможет технологии чтения с экрана определить правильный язык для объявления. Идентификационный языковой тег должен описывать язык, используемый большей частью содержимого страницы. Без него программы чтения с экрана обычно по умолчанию используют язык, установленный операционной системой, что может вызвать неправильное произношение.
Включение действительного объявления lang
в элемент
также гарантирует, что важные метаданные, содержащиеся в
страницы, такие как
страницы, также будут правильно объявлены.
Таблицы BCD загружаются только в браузере
- Элемент верхнего уровня MathML:
- Элемент верхнего уровня SVG:
Крошечный документ HTML
Крошечный документ HTMLВернуться на страницу первого класса »
На снимке экрана ниже показаны все необходимые элементы страницы HTML5.
Объяснение основных элементов
Используйте номера строк на изображении для справки.
-
Строка 1
Эта строка содержит определение типа документа (DTD). DTD сообщает браузеру, какой тип языка разметки используется на странице. DTD всегда стоит на первом месте в документе HTML5.
По сравнению со старыми DOCTYPES, например, для XHTML, HTML5 DOCTYPE удивительно прост !!
Подробнее о (X) HTML DTD можно прочитать на странице w3schools в декларации HTML
-
Строка 2
Это начало тега
Просто считается хорошим тоном указывать на язык вашей веб-страницы. В данном случае это английский язык, обозначенный цифрой «en»
. -
Строка 3
Это начало тега
-
Строка 4
Это тег
-
Строка 5
Крошечный HTML-документ Это открывающие и закрывающие теги
-
Строки 6 и 7
Это открывающие и закрывающие теги