Создание первой веб-страницы
Содержание:
- Структура HTML документа
- Блоки, аудио и видео
- Несколько слов о head
- Пример простого HTML документа:
- и
- §2.3 Порядок подключения каскадных таблиц стилей CSS и Java Script’ов
- Элементы, предназначенные для создания структуры документа в HTML 4
- Шаги
- Урок №1. Структура Html-документа
- Восстановление несохраненных файлов Excel
- Основные понятия html
- §2.1 Head: общая информация
- Структура элементов
- Виртуальные гадания онлайн
- Раздел HEAD.
- Заключение
Структура HTML документа
Давайте разберем структуру html документа чтобы понимать, как все работает. Вы узнаете, какой каркас должен присутствовать на странице чтобы она считалась валидной (правильной).
Чтобы создать любую веб-страницу, в ней должен присутствовать минимальный набор тегов. Они расположены в примере ниже.
<!DOCTYPE html>
<html>
<head>
<title>Профессиональное создание сайта в интернете с примерами</title>
<meta charset="utf-8">
</head>
<body>
<h1>Как создать сайт в интернете</h1>
<p>Здесь размещается содержание документа, которое видно всем пользователям.</p>
</body>
</html>
Браузер сам интерпретирует все эти теги и выводит их в одном для пользователя виде информации. Вы и сами замечали, что, когда заходите на сайт, на экране не отображаются эти элементы. Вы видите только красивую обертку, которую выводит браузер.
Визуальный пример html страницы
Тег DOCTYPE
Тег DOCTYPE всегда идет в самом начале веб-страницы. Он необходим для указания типа текущего документа. А также помимо этого браузер понимает какая версия html используется.
В последней версии 5 он имеет такой вид:
<!DOCTYPE html>
Рекомендую его таким и использовать. С помощью данного элемента браузер дальше интерпретирует то, что мы ему напишем. То есть все теги в стандарте html 5.
Тег HTML
Тег html является контейнером, который заключает в себя все содержимое веб-страницы. Открывающие и закрывающие элементы в документе не обязательны. Однако хороший стиль требует их использования.
Как правило, открывающий тег html идет вторым после определения документа при помощи doctype. Закрывающий всегда идет на странице последним.
Этот тег сообщает браузеру, где наш html документ начинается и где заканчивается. Поэтому все остальные элементы (кроме doctype) должны быть вложены внутри этого контейнера.
Тег head
Тег head предназначен для хранения других элементов, цель которых помочь браузеру при работе с данными. Также внутри контейнера находятся мета теги, которые используются для хранения информации. Она предназначена для браузеров и поисковых систем.
Содержимое head не отображается напрямую на веб-странице, кроме тега title. Он отвечает за заголовок страницы.
В общем, в этом элементе хранится вся техническая информация о странице. Например, тип кодировки html страницы. Он будет говорить браузеру, как ему лучше декодировать документ. Также сюда мы можем подключать css стили и различные скрипты.
Тег title
У head есть один обязательный компонент. Это тег title. Он отвечает за то, как будет выглядеть html заголовок страницы. То, что вы напишите сюда, будет отображаться во вкладке браузера.
Отнеситесь к этому серьезно!
В данном элементе рекомендую использовать название не более 60 символов с пробелами. Это нужно чтобы оно не обрезалось в поисковой выдаче. И обязательно вписываем сюда осмысленные слова. То есть конкретно пишем, о чем будет страница.
<head>
<title>Профессиональное создание сайта в интернете с примерами</title>
</head>
Конечно же, при этом нужно вставлять ключевые слова и делать свое название более привлекательным. Иначе вы просто рискуете потерять трафик с поиска.
Тег meta
Еще один элемент, это тег meta. Он не парный и особой ценности не представляет. Однако наиболее важными элементами являются его атрибуты.
Таким образом, с помощью параметров и атрибутов, тег может хранить важную информацию о вашей странице.
Давайте к элементу я пропишу параметр charset и в нем укажу предпочтительную кодировку документа.
<head>
<title>Профессиональное создание сайта в интернете с примерами</title>
<meta charset="utf-8">
</head>
Обратите внимание, как указывается параметр. Его вставляем внутри тега и перед правой закрывающей скобкой
Далее ставим знак равно и в кавычках указываем кодировку документа.
Обязательно ее указывайте в своих документах. Иначе на вашем сайте вместо текста появятся некрасивые иероглифы (кракозябры).
Тег body
Чуть ниже идет тег body. Это основное тело документа. Внутри него находится тот контент, который виден пользователю. Это может быть текст, картинки, ссылки, видео и так далее.
Обратите внимание, что body всегда идет ниже тега head. То есть сначала идет техническая информация о странице и только потом основной контент для пользователя
Но никак не наоборот!
Внутри body обязательно должен присутствовать тег h1. Это заголовок материала. То есть, как будет называться ваша статья. Рекомендую название делать не более 55 символов с пробелами.
Далее чуть ниже идут элементы текста. Это обязательно будет абзац (тег p), картинки, какие-то выделения и так далее.
Блоки, аудио и видео
До HTML5 использовалась табличная верстка. При этом вся веб-страница представляла собой большую таблицу, а отдельные элементы размещались в ячейках.
В HTML5 рекомендуется так называемая блочная верстка. Для работы с ней используются два тега:
- <div> — блочный элемент
- <span> — строчный элемент.
По умолчанию блочные элементы начинаются с новой строки и заполняют весь контейнер, а строчные могут начинаться в любом месте строки и заканчиваются после контента.
Таблицы используются только для вывода табличных данных.
Размещение аудио.
<audio src=»sound.mp3″ controls></audio>
| 1 | <audio src=»sound.mp3″controls></audio> |
Видео из файла.
<video src=»car.mp4″ width=»400″ height=»300″ controls></video>
| 1 | <video src=»car.mp4″width=»400″height=»300″controls></video> |
Несколько слов о head
Чтобы страница отвечала современным стандартам, одних тегов недостаточно, нужны еще стили и функционал. Это достигается при помощи CSS (Каскадные Таблицы Стилей) и Java Script. То и другое содержится в текстовых файлах с расширениями css и js соответственно и подключается к HTML-странице.
Путь к файлу с описанием стилей задает тег link с атрибутом href, а тег script — путь к файлу с программным кодом Java Script
Обратите внимание, если подключаемый файл находится в корневой директории сайта, то путь к нему будет содержать лишь имя этого файла с расширением (например — styles.css). Но, если исполняемый файл находится в дочернем каталоге, то путь к нему прописывается через косую черту (например – js/script.js)
Таким образом, head может содержать неограниченное количество ссылок на файлы стилей и скриптов с дополнительными инструкциями. Более того, в head могут записываться параметры стилей и JS-код непосредственно, без ссылок (не рекомендуется по причине излишней нагрузки на страницу).
Пример простого HTML документа:
И так, мы с Вами поняли, что HTML — это краеугольный камень, благодаря которому любой браузер пользователя отобразит страницу.
Но как выглядит HTML? Давайте рассмотрим простой код, из которого состоит практически любая информационная страница:
<!DOCTYPE html> <html> <head> <title>Название для документа (страницы)</title> </head> <body> <h2>Это заголовок</h2> <p>Это параграф (абзац).</p> </body> </html>
Хочу сразу обратить Ваше внимание на то, что браузеры игнорируют символы табуляции и пробелы в документе (если им явно это не указать, но об этом позднее).
Чтобы вам было легче воспринимать HTML код в примерах, теги вложенные в другие теги мы будем отделять табуляцией (как показано в примере) выше. А теперь детально разберем из чего состоит любая HTML страница:
А теперь детально разберем из чего состоит любая HTML страница:
DOCTYPE это декларация, которая определяет тип документа. Декларация не является тегом HTML это только инструкция для веб-браузера о том, какая версия HTML используется в документе. Декларация !DOCTYPE помогает браузеру отобразить веб-страницу правильно, для этого браузер должен знать, как тип, так и версию документа.
Декларация <!DOCTYPE html> сообщает, что в этом документе используется пятая версия языка гипертекстовой разметки — HTML 5.
Обращаю Ваше внимание на то, что декларация должна указываться самой первой в вашем HTML документе, перед тегом . Декларация не чувствительна к регистру, но записывать её принято в верхнем регистре
Хронология версий HTML:
| Версия | HTML | HTML 2.0 | HTML 3.2 | HTML 4.01 | XHTML | HTML 5 |
|---|---|---|---|---|---|---|
| Год | 1991 | 1995 | 1997 | 1999 | 2000 | 2014 |
Текст между тегами <html> и </html> сообщает браузеру, что необходимо прочитать документ как программный код, написанный на языке гипертекстовой разметки.
Является корневым элементом HTML документа и все остальные элементы должны быть его потомками (вложены в него).
Текст между <head> и </head> содержит информацию о документе (сведения о документе, которые не отображаются пользователю). Внутри этого элемента обязательно должен быть вложен HTML тег <title>.
Текст между <title> и </title> обеспечивает название для документа. Название документа должно содержать важные ключевые слова, чтобы поисковые системы могли включить вашу страницу в результаты поиска (по определенным запросам пользователей).
Текст между <body> и </body> описывает видимое содержимое страницы!
Текст между
и
(англ. heading level 2) описывает заголовок второго уровня. Поисковые системы используют ваши заголовки для индексации структуры и содержания веб-страницПоэтому важно использовать заголовки, чтобы показать структуру документа. Как правильно использовать заголовки от первого до шестого уровня на ваших страницах мы рассмотрим далее в учебнике в статье «Базовый HTML».
Текст между <p> и </p> (англ. HTML Paragraph Element) определяет параграф (абзац). Содержание элемента всегда начинается с новой строки.
Ниже показано как отображается вышерассмотренный пример в браузере:
Рис. 1 Пример отображения HTML документа браузером.
Обращаю Ваше внимание, что все примеры, которые рассматриваются в учебнике доступны для просмотра в отдельном окне. Желательно, чтобы вы помимо вопросов и задач, которые будут приводится в конце каждой статьи создавали аналогичные (собственные примеры) и эксперементировали с ними
Это позволит Вам максимально быстро изучить и применять рассмотренный материал.
§2.3 Порядок подключения каскадных таблиц стилей CSS и Java Script’ов
Порядок подключения CSS (каскадных таблиц стилей, в современном вебдизайне в css-файле хранится всё визуальное оформление сайта) критично сказывается на порядке наложения правил оформления HTML-элементов. Это значит, что последний подключённый файл CSS будет иметь приоритет над предыдущими.
Т. о. становится реальным для разных страниц применить свои правила оформления — просто подключите к нужной странице корректирующий файл последним.
В отношении JavaScript правила такие: библиотеки функций и фреймворки, например Jquery или MooTools, подключаются первыми. За ними идут плагины и вызовы необходимых функций с параметрами. Если перепутать порядок подключения, скрипты работать не будут!
Пример подключения библиотеки Jquery и плагина к ней:
jquery.js»>
plagin.js»>
Дальше мы познакомимся с видами вёрстки.
Элементы, предназначенные для создания структуры документа в HTML 4
Создание структуры документа до HTML5 осуществлялось с помощью элементов , , , , и . Каждый из представленных элементов представляет собой заголовок, имеющий определённый ранг (уровень). Уровень заголовка определяется на основании числа, указанного в его наименовании. Т.е. элемент имеет 1 ранг (1 уровень), элемент — 2 ранг (2 уровень), элемент — 3 ранг (3 уровень) и т.д
Ранги определяют важность заголовков и прямым образом влияют на структуру документа
Из всех заголовков, самым важным является заголовок, который образован с помощью элемента (самый высокий ранг). А самым незначительным из всех заголовков является заголовок, который образован с помощью элемента (самый низкий ранг).
Элементы — , кроме придания важности контенту, дополнительно создают ещё неявные разделы на странице, т.е. определяют её структуру
Шаги
Урок №1. Структура Html-документа
- Details
- Автор Super User
В данной статье описана структура простейшей html-страницы. Статья состоит из двух частей — теория и пошаговая инструкция по созданию первой страницы. В качестве самостоятельной работы предлагается создать страницу по заданному образцу.
HTML – язык гипертекстовой разметки. Данный формат определяет внешний вид документа, взаимное расположение текстовой, графической и мультимедийной информации.
Основу html-документа составляет текстовый документ, который можно набрать в любом текстовом редакторе. Созданный файл нужно сохранить с расширением *.html.
Любой документ, написанный на html, состоит из текста – содержимого страницы и управляющих символов – тегов, определяющих расположение и форматирование текста.
Основные теги:
Весь код страницы помещается внутрь тегов <html>..</html>
Html-документ, как правило, имеет заголовок, размещенный в тегах <head>..</head>
В заголовке может быть указан титул документа, т.е. его название в заголовке окна браузера. Титул заключается в теги <title>..</title>
Также в заголовке часто указывается дополнительная информация в теге <meta> (кодировка, ключевые слова для поисковых машин, информация об авторе и т.д.). Например, тег <meta http-equiv=»content-type» content=»text/html; charset=utf-8″> предназначен для определения кодировки, с помощью которой была написана страница.
Содержимое страницы заключается в теги <body>..</body>
Скопируйте приведенный выше код в текстовый редактор Блокнот. Сохраните страницу с расширением html. Для этого поле «Тип файла» (1) укажите «Все файлы», в поле «Имя файла» (2) — имя_файла.html. Привыкайте давать страницам латинские названия, желательно еще не использовать пробелы. Обычно главную страницу сайта называют index.html.
Страница, соответствующая примеру, выглядит следующим образом: 
Для внесения изменений в уже созданную страницу, необходимо открыть ее с помощью текстового редактора.
Атрибуты тега <body>:
Тег <body> имеет ряд необязательных атрибутов. Атрибуты записываются внутри открывающего тега через пробел:
background – фоновое изображение, на котором отображается текст документа.
<body background=”fish.jpg”>- относительная адресация, изображение должно быть сохранено там же, где и html-страница.<body background=”images/fish.jpg”> — относительная адресация, изображение должно быть сохранено в папке images, папка — там же, где и html-страница (наиболее удобный способ).<body background=”c:/images /fish.jpg”> — абсолютная адресация, изображение должно быть сохранено по адресу c:/images, независимо от места хранения html-страницы.
bgcolor – задает цвет фона.
<body bgcolor=red> — содержимое страницы будет отображаться на красном фоне.<body bgcolor=#FF0000> — содержимое страницы будет отображаться на красном фоне.
Цвет можно указать либо в виде строковой константы (таблицы с цветами можно найти в интернете или воспользоваться такой шпаргалкой), либо в виде 6-разрядного 16-ричного числа, каждые два разряда которого определяют цвет палитры RGB (#FF0000 – красный, #00FF00 – зеленый, #0000FF – синий, #000000 – черный, #FFFFFF – белый и т.д.).
text – задает цвет текста.
link – задает цвет гиперссылки (по умолчанию – синий).
vlink– задает цвет пройденной гиперссылки (по умолчанию – фиолетовый).
Создайте html-страницу, соответствующую образцу. В качестве фона используйте файл key.jpg.
Восстановление несохраненных файлов Excel
Основные понятия html
HTML
– язык гипертекстовой разметки документов
(HyperText
Markup
Language).
С помощью HTML
создаются Web-страницы,
которые находятся в глобальной
компьютерной сети Интернет. HTML
– это не язык программирования в
традиционном смысле, он является языком
разметки. С помощью HTML
текстовый документ разбивают на блоки
смысловой информации (заголовки,
параграфы, таблицы, рисунки и т.п.).
Гипертекстовый
документ –
это документ, содержащий переходы
(гиперссылки)
на другие документы. При использовании
гиперссылки происходит перемещение от
одного документа к другому (как по
цепочке) в Интернете. HTML-документ
является гипертекстовым документом.
Особенности
HTML-документа:
1. HTML-документ
может содержать текст, графику, видео
и звук.
2. В общем случае
HTML-документ – это один
или несколько текстовых файлов, имеющих
расширение .htmили .html.
3. Создавать
HTML-документ можно как с
помощью специальных программ – редакторовHTML(например,FrontPage),
так и с помощью любого текстового
редактора (например, блокнотаWindows).
4. Для просмотра
HTML-документов существуют
специальные программы-броузеры.
ОниинтерпретируютHTML-документы,
т.е. переводят текст документа вWeb-страницу, и отображают
ее на экране пользователя. Существует
очень много различных броузеров, но
наиболее распространенными броузерами
являютсяMicrosoftInternetExplorer,NetscapeNavigatorиOpera.
5. Если при
интерпретации HTML-документа
броузер чего-то не понимает, то сообщения
об ошибке не возникает, а это место вHTML-документе игнорируется
и не отображается броузером.
HTML-документ состоит
из элементов HTML.
Элемент HTML
– это чаще всего два тега (открывающий
и закрывающий) и часть документа между
ними. Кроме того, существуют элементы
HTML,
состоящие только из одного тега.
Тег – в
переводе с английского – ярлык, этикетка.
Тег определяет тип выводимого элемента
HTML
(например, заголовок, таблица, рисунок
и т.п.). Сам тег не отображается броузером.
Тег представляет собой последовательность
элементов:
-
символ левой
угловой скобки (<) – начало тега; -
необязательный
символ слеша (/) – символ используется,
чтобы обозначить закрывающий тег; -
имя тега;
-
необязательные
атрибуты в открывающем теге; -
символ правой
угловой скобки (>)
Атрибуты –
необязательный
набор параметров, определяющих
дополнительные свойства элемента HTML
(например, цвет или размер). Атрибут
состоит:
из имени атрибута;
знака равенства
(=);
значения атрибута
– строки символов, заключенной в кавычки
Пример элемента
HTML
<H1
ALIGN=
«CENTER»>Глава
1</H1>
В этом примере:
<H1
ALIGN=
«CENTER»>
– открывающий тег
</H1>
– закрывающий тег
H1
– имя тега
ALIGN=
«CENTER»
– атрибут
ALIGN
– имя атрибута
«CENTER»
– значение атрибута
Правила создания
HTML-документов:
1. Теги и
атрибуты можно записывать в любом
регистре, т.е. </H1>
и </h1>
– это одно и то же.
2. Несколько
пробелов подряд, символы табуляции и
перевода строки при интерпретации
броузером заменяются на один пробел.
Это позволяет писать хорошо структурированные
исходные тексты файлов HTML.
3. Рекомендуется
давать имена файлам HTML
строчными английскими буквами. Длина
имени – до восьми символов. В принципе,
можно не придерживаться данной
рекомендации, но тогда пользователи,
работающие в операционных системах,
отличных от Windows,
не смогут воспользоваться вашими
HTML-документами.
§2.1 Head: общая информация
Голова документа должна начинаться сразу после тега и заканчиваться перед тегом (началом тела документа). Позиция выбрана не случайно и несёт некоторую смысловую нагрузку. Обычно секция содержит в себе такую информацию:
- ~ Заголовок документа или ;
- ~ Информацию об авторе документа;
- ~ Информацию о языке документа и кодировке: об этом чуть позже;
- ~ Информацию о подключаемых таблицах стилей и скриптах;
- ~ Описания характеристик документа для поисковых ботов;
- ~ Адреса rss\rdf\atom потоков характерных страничке;
- ~ Хаки.
Список далеко неполный, но для того, чтобы начать понимать — этого вполне достаточно.
Здесь стоит обратить внимание на несколько моментов:
- ~ Порядок и группировка тегов;
- ~ Варианты подключения внешних Java Scripts и CSS.
Структура элементов
Структуру элементов также можно представить в виде схемы, отображающей вложенность одних элементов в другие. Рассмотрим простой пример:
<html>
<head>
<title></title>
<style></style>
</head>
<body>
<p></p>
</body>
</html>
Схему, показывающую вложенность элементов, можно представить следующим образом:
- Дочерний элемент — это элемент, над которым в иерархическом древе есть родительский элемент. Дочерний элемент также еще называют ребенком.
- Родственный элемент — это другой дочерний элемент того же родительского элемента на том же уровне ответвления. Такие элементы также называют сестринскими, в примере такими элементами являются <head> и <body>, <title> и <style>.
- Корневой элемент — самый верхний элемент в иерархии (<html>), все другие элементы являются его потомками.
- Родительский элемент — это элемент, который содержит другой элемент. Иногда его называют просто родитель.
- Потомок может являться непосредственно дочерним элементом, но обычно это общее название для всех элементов, которые вложены в другие элементы, независимо от того, как глубоко они вложены, например <head>, <title>, <body>, <p> и <style> являются потомками элемента <html>.
С этой темой смотрят:
- URL-адрес
- Абсолютные и относительные ссылки html
Виртуальные гадания онлайн
Раздел 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 Базовые теги
Заключение
Как видите, посчитать сумму чисел в Microsoft Word можно двумя разными методами. Первый подразумевает работу с математическими выражениями, а второй – с таблицами и содержащимися в их ячейках данными.
Опишите, что у вас не получилось.
Наши специалисты постараются ответить максимально быстро.
