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