Всемирнопаутинные заметки/Создание веб-страниц: различия между версиями

Добавить ссылки
Материал из Викиучебника — открытых книг для открытого мира
Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
Нет описания правки
→‎Первые шаги: Дополнение и уточнение синтаксиса; упомянут HTML5/XML.
Строка 32: Строка 32:
Поскольку HTML как было сказано выше - разметка текста, то можно сделать вывод, что производится она в текстовом редакторе. То есть можно смело открывать "Блокнот" и начинать ваять. Существует так же множество специальных программ, облегчающих жизнь. Я, к примеру, пользуюсь Microsoft Front Page. Проблема с этими программами состоит в том, что часто они добавляют много лишнего и ненужного, что увеличивает "вес" страницы порою на порядок, а то и на два. Это может быть помехой при использовании хостинга с ограничением предоставляемого места и отрицательно влиять на скорость загрузки (как уже было сказано - это нежелательно).
Поскольку HTML как было сказано выше - разметка текста, то можно сделать вывод, что производится она в текстовом редакторе. То есть можно смело открывать "Блокнот" и начинать ваять. Существует так же множество специальных программ, облегчающих жизнь. Я, к примеру, пользуюсь Microsoft Front Page. Проблема с этими программами состоит в том, что часто они добавляют много лишнего и ненужного, что увеличивает "вес" страницы порою на порядок, а то и на два. Это может быть помехой при использовании хостинга с ограничением предоставляемого места и отрицательно влиять на скорость загрузки (как уже было сказано - это нежелательно).


Простая веб-страница — или «документ HTML» — может выглядеть следующим образом:<ref name="html5 quick" /><ref name="html5 attr global" />
Непосредственно разметка производится с помощью тегов. Теги заключаются в угловые скобки <code><></code>.
{{Якорь | полный пример}}

Обязательными являются теги <code>html</code>, <code>head</code> и <code>body</code>.
1-й поясняет что у нас веб-страница. Второй отвечает за голову, то есть за информацию для браузера и поисковых систем. А третий - тело, то есть содержимое нашей веб-страницы.

Каждый парный тег должен закрываться. Закрывается тег слэшем <code>/</code>. Одиночные (непарные) теги не закрываются.

Для парных тегов:

<code><title></title></code>

Для одиночных тегов:

<code><meta></code> или <code><meta /></code>

То есть у нас в блокноте для успешного начала должна быть такая (примерно) запись:<ref name="html5 quick" />

<source lang="html5">
<source lang="html5">
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="ru" xml:lang="ru">
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" >
<head>
<head>
<meta charset="UTF-8">
<meta charset="UTF-8" />
<title>Первая страница</title>
<title>Первая страница</title>
</head>
</head>
Строка 61: Строка 46:
</html>
</html>
</source>
</source>

Документ HTML состоит из ''элементов'', которые, в общем случае, могут содержать текст и другие (вложенные) элементы. Запись большинства элементов состоит из следующих трех частей:
# <code >&lt;<var >имя элемента</var> <var >атрибуты</var>&gt; (где <var >атрибуты</var> — необязательная последовательность пар вида <code ><var >имя</var>=<var >значение</var></code>) — ''открывающий тег'';
# ''содержание'' элемента;
# <code >&lt;/<var >имя элемента</var>&gt;</code> — закрывающий элемент.

Так, например, запись элемента <code >body</code> («тело») в примере выше состоит из следующих частей:
# <code >&lt;body&gt;</code> — открывающий тег, собственно, элемента <code >body</code>;
# <code >&lt;p&gt;</code> — открывающий тег ''вложенного'' в <code >body</code> элемента <code >p</code> («абзац», от англ. {{lang|en|[[wikt:paragraph|paragraph]]}});
# <code >Привет, мир!</code> — текстовое ''содержание'' элемента <code >p</code>;
# <code >&lt;/p&gt;</code> — закрывающий тег элемента <code >p</code>;
# <code >&lt;/body&gt;</code> — закрывающий тег элемента <code >body</code>.

Существует, впрочем, ряд оговорок:
# открывающий тег ''не обязателен'' в ряде случаев для элементов <code >html</code>, <code >head</code>, <code >body</code>, <code >colgroup</code>, <code >tbody</code>;<ref name="html5 tags opt" />
# закрывающий тег ''не обязателен'' в ряде случаев для элементов <code >html</code>, <code >head</code>, <code >body</code>, <code >colgroup</code>, <code >dd</code>, <code >dt</code>, <code >li</code>, <code >optgroup</code>, <code >option</code>, <code >p</code>, <code >rb</code>, <code >rp</code>, <code >rt</code>, <code >rtc</code>, <code >tbody</code>, <code >td</code>, <code >tfoot</code>, <code >th</code>, <code >thead</code>, <code >tr</code>;<ref name="html5 tags opt" />
# закрывающий тег ''не допускается'' в случае ''пустых'' (англ. {{lang|en|void}}) элементов — <code >area</code>, <code >base</code>, <code >br</code>, <code >col</code>, <code >embed</code>, <code >hr</code>, <code >img</code>, <code >input</code>, <code >keygen</code>, <code >link</code>, <code >meta</code>, <code >param</code>, <code >source</code>, <code >track</code>, <code >wbr</code>;
# открывающий тег пустых элементов ''может содержать'' символ <code >/</code> непосредственно перед закрывающим <code >&gt;</code> (подобно: <code >&lt;meta charset="UTF-8" /&gt;</code>.)<ref name="html5 tags start" />

Ввиду вышесказанного, [[#полный пример|пример выше]] равнозначен следующему:
{{Якорь | сокращенный пример}}
<source lang="html5">
<!DOCTYPE html>
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" >
<meta charset="UTF-8">
<title >Первая страница</title>
<p>Привет, мир!
</source>

Причем, несмотря на отсутствие ''тегов'', открывающих элементы <code >head</code> и <code >body</code>, с точки зрения [[w:Document Object Model|объектной модели документа]] (англ. {{lang|en|Document Object Model}}), сами эти элементы ''считаются присутствующими''.<ref name="html5 tags opt" />

Стоит отметить, однако, что спецификация HTML5 допускает представление документов HTML как с использованием «синтаксиса HTML», так и с использованием более общего синтаксиса [[w:XML|XML]]. При этом, только [[#полный пример|первая запись]] данного документа удовлетворяет формальным требованиям для ''обоих'' представлений.


== Связанные Викиучебники ==
== Связанные Викиучебники ==
Строка 75: Строка 92:
{{Примечания | refs =
{{Примечания | refs =
<!-- Пожалуйста поддерживайте алфавитный порядок для name. Спасибо. -->
<!-- Пожалуйста поддерживайте алфавитный порядок для name. Спасибо. -->
<ref name="html5 quick" >{{Cite web | title = A quick introduction to HTML | url = http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html | work = HTML5 | accessdate = 2014-05-29}}</ref>
<ref name="html5 attr global" >{{Cite web | title = http://www.w3.org/TR/html5/dom.html#global-attributes | url = 3.2.5 Global attributes | work = HTML5 | accessdate = 2014-05-29}}</ref>
<ref name="html5 quick" >{{Cite web | title = 1.9 A quick introduction to HTML | url = http://www.w3.org/TR/html5/introduction.html#a-quick-introduction-to-html | work = HTML5 | accessdate = 2014-05-29}}</ref>
<ref name="html5 tags opt" >{{Cite web | title = 8.1.2.4 Optional tags | url = http://www.w3.org/TR/html5/syntax.html#syntax-tag-omission | work = HTML5 | accessdate = 2014-05-29}}</ref>
<ref name="html5 tags start" >{{Cite web | title = 8.1.2.1 Start tags | url = http://www.w3.org/TR/html5/syntax.html#start-tags | work = HTML5 | accessdate = 2014-05-29}}</ref>
}}
}}


Версия от 16:37, 29 мая 2014

Для незнакомых с общими компьютерными понятиями, веб-страница — это файл, особым образом хранящий то, что можно увидеть на вебсайте за один щелчок (обычно после щелчка Вас переносит на новую страницу). Нужно найти человека, который правильно и разумно упакует нужный Вам текст в веб-страницу и правильно разместит нужные картинки. Таких людей немало, их легче всего найти через Сеть. Пригодится умение разбираться в людях и находить тех, кто будет способен вас понять и сделает всё как надо.

Для понимающих информационные технологии, веб-страница есть текстовый файл, в незакодированном виде хранящий текст, но текст тот измежёван пометками на особом языке разметки — HTML, который довольно прост и служит для:

  • разделения содержимого на части, обычно по смыслу: например, "заголовок", "простой текст", "цитата", "выделенный текст", "навигационное меню";
  • привязки побочных данных ко всему документу или выделенным частям. Так, например, можно указать адрес, к которому перейдёт пользователь, задействовав гипертекстовую ссылку; сам адрес — неявное, дополнительное (часто несущественное) содержание;
  • вставки картинок.

Каждый из выделенных на языке HTML элементов можно довольно детально оформить на языке CSS.

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

Тебе выбирать:

  1. делать простую страницу или
  2. заказать весь сайт у умелого вебстроителя. Если страниц много и оформление их сложное, следует обратиться в фирму.

Автор не допускает каких-либо иных выходов вроде «попытаться самому сделать красочную страницу» или «заказать сайт у не делового веб-дизайнера, а простого заядлого компьютерщика».

Как сделать свою веб-страницу

На твоей простой веб-странице должны быть:

  • Ссылки на все связанные веб-документы. Такой по крайней мере один — страница, «родительская» по отношению к данной, или передняя страница всего сайта.
  • Нормально оформленные заголовки, курсив и жирный шрифт, перечни, цитаты, эпиграфы, подписи; с умом расставленные гиперссылки; изображения, не ломающие облик страницы.

Желательно также, чтобы страница была:

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

И просто обязательные требования: страница обязана быстро загружаться и правильно работать у любого посетителя.

Первые шаги

Поскольку HTML как было сказано выше - разметка текста, то можно сделать вывод, что производится она в текстовом редакторе. То есть можно смело открывать "Блокнот" и начинать ваять. Существует так же множество специальных программ, облегчающих жизнь. Я, к примеру, пользуюсь Microsoft Front Page. Проблема с этими программами состоит в том, что часто они добавляют много лишнего и ненужного, что увеличивает "вес" страницы порою на порядок, а то и на два. Это может быть помехой при использовании хостинга с ограничением предоставляемого места и отрицательно влиять на скорость загрузки (как уже было сказано - это нежелательно).

Простая веб-страница — или «документ HTML» — может выглядеть следующим образом:[1][2] 

<!DOCTYPE html>
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" >
  <head>
    <meta charset="UTF-8" />
    <title>Первая страница</title>
  </head>
  <body>
    <p>Привет, мир!</p>
  </body>
</html>

Документ HTML состоит из элементов, которые, в общем случае, могут содержать текст и другие (вложенные) элементы. Запись большинства элементов состоит из следующих трех частей:

  1. <имя элемента атрибуты> (где атрибуты — необязательная последовательность пар вида имя=значение) — открывающий тег;
  2. содержание элемента;
  3. </имя элемента> — закрывающий элемент.

Так, например, запись элемента body («тело») в примере выше состоит из следующих частей:

  1. <body> — открывающий тег, собственно, элемента body;
  2. <p> — открывающий тег вложенного в body элемента p («абзац», от англ. paragraph);
  3. Привет, мир! — текстовое содержание элемента p;
  4. </p> — закрывающий тег элемента p;
  5. </body> — закрывающий тег элемента body.

Существует, впрочем, ряд оговорок:

  1. открывающий тег не обязателен в ряде случаев для элементов html, head, body, colgroup, tbody;[3]
  2. закрывающий тег не обязателен в ряде случаев для элементов html, head, body, colgroup, dd, dt, li, optgroup, option, p, rb, rp, rt, rtc, tbody, td, tfoot, th, thead, tr;[3]
  3. закрывающий тег не допускается в случае пустых (англ. void) элементов — area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr;
  4. открывающий тег пустых элементов может содержать символ / непосредственно перед закрывающим > (подобно: <meta charset="UTF-8" />.)[4]

Ввиду вышесказанного, пример выше равнозначен следующему: 

<!DOCTYPE html>
<html lang="ru" xml:lang="ru" xmlns="http://www.w3.org/1999/xhtml" >
    <meta charset="UTF-8">
    <title >Первая страница</title>
    <p>Привет, мир!

Причем, несмотря на отсутствие тегов, открывающих элементы head и body, с точки зрения объектной модели документа (англ. Document Object Model), сами эти элементы считаются присутствующими.[3]

Стоит отметить, однако, что спецификация HTML5 допускает представление документов HTML как с использованием «синтаксиса HTML», так и с использованием более общего синтаксиса XML. При этом, только первая запись данного документа удовлетворяет формальным требованиям для обоих представлений.

Связанные Викиучебники

Примечания

  1. ↑ 1.9 A quick introduction to HTML HTML5 Проверено 2014-05-29 г.
  2. ↑ [3.2.5 Global attributes http://www.w3.org/TR/html5/dom.html#global-attributes] HTML5 Проверено 2014-05-29 г.
  3. ↑ а б в 8.1.2.4 Optional tags HTML5 Проверено 2014-05-29 г.
  4. ↑ 8.1.2.1 Start tags HTML5 Проверено 2014-05-29 г.
Источник — https://ru.wikibooks.org/w/index.php?title=Всемирнопаутинные_заметки/Создание_веб-страниц&oldid=93067