Викиучебник

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

Интерактивная навигация по истории
← Предыдущая правкаСледующая правка →
Содержимое удалено Содержимое добавлено
ВизуальныйВики-текст
Нет описания правки
викификация
Строка 1:
Для незнакомых с общими компьютерными понятиями, веб-страница  — это файл, особым образом хранящий то, что можно увидеть на вебсайте за один щелчок (обычно после щелчка Вас переносит на новую страницу). Нужно найти человека, который правильно и разумно упакует нужный Вам текст в веб-страницу и правильно разместит нужные картинки. Таких людей немало, их легче всего найти через Сеть. Пригодится умение разбираться в людях и находить тех, кто будет способен вас понять и сделает всё как надо.
 
Для понимающих [[Информационные технологии|информационные технологии]], веб-страница есть текстовый файл, в незакодированном виде хранящий текст, но текст тот измежёван пометками на особом [[:w:Язык разметки|языке разметки]]  — [[:w:HTML|HTML]], который довольно прост и служит для:
* разделения содержимого на части, обычно по смыслу: например, "«заголовок"», "«простой текст"», "«цитата"», "«выделенный текст"», "«навигационное меню"»;
* привязки побочных данных ко всему документу или выделенным частям. Так, например, можно указать адрес, к которому перейдёт пользователь, задействовав гипертекстовую ссылку; сам адрес  — неявное, дополнительное (часто несущественное) содержание;
* вставки картинок.
 
Строка 19:
 
На твоей простой веб-странице должны быть:
* Ссылки на все связанные веб-документы. Такой по крайней мере один  — страница, «родительская» по отношению к данной, или передняя страница всего сайта.
* Нормально оформленные заголовки, ''курсив'' и '''жирный шрифт''', перечни, цитаты, эпиграфы, подписи; с умом расставленные [[:w:Гипертекст|гиперссылки]]; изображения, не ломающие облик страницы.
 
Строка 30:
== Первые шаги ==
 
Поскольку HTML как было сказано выше - — разметка текста, то можно сделать вывод, что производится она в текстовом редакторе. То есть можно смело открывать "«Блокнот"» и начинать ваять. Существует так же множество специальных программ, облегчающих жизнь. Я, к примеру, пользуюсь Microsoft Front Page. Проблема с этими программами состоит в том, что часто они добавляют много лишнего и ненужного, что увеличивает "«вес"» страницы порою на порядок, а то и на два. Это может быть помехой при использовании хостинга с ограничением предоставляемого места и отрицательно влиять на скорость загрузки (как уже было сказано - — это нежелательно).
 
Простая веб-страница  — или «документ HTML»  — может выглядеть следующим образом:<ref name="html5 quick" /><ref name="html5 attr global" />
{{Якорь | полный пример}}
<source lang="html5">
Строка 47:
</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" />
 
Строка 77:
Причем, несмотря на отсутствие ''тегов'', открывающих элементы <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]]. При этом, только [[#полный пример|первая запись]] данного документа удовлетворяет формальным требованиям для ''обоих'' представлений.
 
 
Источник — https://ru.wikibooks.org/wiki/Всемирнопаутинные_заметки/Создание_веб-страниц