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

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

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

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

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

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

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

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

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

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

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

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

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

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

Первые шаги

Поскольку 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 состоит из элементов, которые, в общем случае, могут содержать текст и другие (вложенные) элементы. Запись большинства элементов состоит из следующих трех частей:

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

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

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

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

открывающий тег не обязателен в ряде случаев для элементов html, head, body, colgroup, tbody;^[3]
закрывающий тег не обязателен в ряде случаев для элементов html, head, body, colgroup, dd, dt, li, optgroup, option, p, rb, rp, rt, rtc, tbody, td, tfoot, th, thead, tr;^[3]
закрывающий тег не допускается в случае пустых (англ. void) элементов — area, base, br, col, embed, hr, img, input, keygen, link, meta, param, source, track, wbr;
открывающий тег пустых элементов может содержать символ / непосредственно перед закрывающим > (подобно: <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.9 A quick introduction to HTML HTML5 Проверено 2014-05-29 г.
↑ 3.2.5 Global attributes HTML5 Проверено 2014-05-29 г.
↑ ^а ^б ^в 8.1.2.4 Optional tags HTML5 Проверено 2014-05-29 г.
↑ 8.1.2.1 Start tags HTML5 Проверено 2014-05-29 г.

[html5_quick-1] 1.9 A quick introduction to HTML HTML5 Проверено 2014-05-29 г.

[html5_attr_global-2] 3.2.5 Global attributes HTML5 Проверено 2014-05-29 г.

[html5_tags_opt-3] а ^б ^в 8.1.2.4 Optional tags HTML5 Проверено 2014-05-29 г.

[html5_tags_start-4] 8.1.2.1 Start tags HTML5 Проверено 2014-05-29 г.

[1]

[2]

[3]

[4]