Утилиты для создания web-сайта. Что такое HTML. Теги.

Лабораторная работа №1

Утилиты для создания web-сайта. Что такое HTML. Теги.

Создаем свой первый сайт.

 

1. Утилиты для создания web-сайта

На начальном этапе работы по созданию web-сайта необходимо иметь следующие утилиты:

· «браузер/browser» - программу просмотра web-страниц. Можно использовать любой - Microsoft Internet Explorer, Opera или Mozilla Firefox.

· текстовый редактор Блокнот.

Возможно, вы слышали, или даже использовали такие программы, как Microsoft FrontPage, Macromedia Dreamweaver или даже Microsoft Word, которые могут - или заявляют что могут - создавать web-сайты для вас. Пока забудем об этих программах. Они не научат вас тому, как кодировать web-сайт.

Блокнот прекрасно подходит для создания кода, поскольку никак не влияет на то, что вы пишете. Это даёт вам полный контроль над текстом. Проблема многих «навороченных» программ в том, что в них много стандартных функций, из которых вы можете выбирать необходимые. Обратной стороной этого является то, что всё подгоняется под эти стандартные функции. Поэтому такие программы часто не в состоянии создать точно такой сайт, какой требуется вам. Или что ещё хуже, они начинают изменять написанный вами код. При использовании Блокнота или иного простого текстового редактора только вы отвечаете за то, что написано.

Браузер и Блокнот (или аналогичный простой редактор) - вот всё, что вам необходимо в начале работы над созданием web-сайтов.

2. HTML

HTML - это «родной язык» вашего браузера.

HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли, и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Тим Бёрнс-Ли мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.

HTML - это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните " Вид" в строке меню вашего браузера и выберите " Просмотр HTML-кода".

Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней.

HTML это сокращение от " HyperText Mark-up Language/язык гипертекстовой разметки".

· Hyper противоположно linear/построчно. В недавнем прошлом компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net.

· Text - текст.

· Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.

· Language - это язык HTML. В нём используется много английских слов.

Мы будем изучать так называемый XHTML (Extensible HyperText Mark-up Language), который является новым и более структурированным вариантом HTML.

3. Теги

Тэги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.

Все тэги имеют одинаковый формат: они начинаются знаком " < " и заканчиваются знаком " > ".

Обычно имеются два тэга - открывающий: < html> и закрывающий: < /html>. Различие в том, что в закрывающем тэге имеется знак " /" (слэш).

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.

Из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: < br>. HTML - это тэги. Для изучения HTML необходимо изучить различные тэги.

 

Пример 1:

Тэг < b> информирует браузер, что весь текст между < b> и < /b> должен быть напечатан жирным шрифтом. (" b" это сокращение для " bold".)

 

< b> This text must be bold.< /b>

будет выглядеть при просмотре в браузере:

This text must be bold.

Пример 2:

Тэги < h1>, < h2>, < h3>, < h4>, < h5> и < h6> указывают браузеру создавать заголовки (h для " heading" ), где < h1> это заголовок первого уровня - самый крупный шрифт, < h2> - заголовок второго уровня - шрифт меньшего размера, и < h6> - заголовок шестого уровня - самого низкого в этой иерархии, и самый маленький шрифт.

 

< h1> Это заголовок< /h1>

< h2> Это подзаголовок< /h2>

будет выглядеть в браузере:

Это заголовок

Это подзаголовок

 

Примечание.

Регистр для ввода тэгов. Большинству браузеров безразлично, в каком регистре введены буквы тэгов. Ввод < HTML>, < html> или < HtMl> обычно даёт одинаковый результат. Однако корректным будет нижний регистр. Поэтому привыкайте печатать тэги в нижнем регистре.

 

 

Создаем свой первый сайт

 

Откройте текстовый редактор Блокнот

HTML прост и логичен. Браузер читает HTML так, как читаете его вы: сверху вниз и слева направо. Таким образом, HTML-документ начинается и заканчивается тем, чем должен начинаться и заканчиваться текст.

 

Во-первых, необходимо сообщить браузеру, что вы будете " говорить" с ним на языке HTML. Это делается тэгом < html> (тут ничего нового). Так что, прежде чем напечатать что-либо, нужно поставить тэг " < html> " в первой строке документа Блокнот.

 

Как вы уже знаете, < html> это открывающий тэг, который должен иметь и закрывающий тэг после того, как вы закончите ввод HTML. Поэтому, чтобы не забыть, поставьте закрывающий тэг " < /html> " на пару строк ниже и вводите весь текст документа между < html> и < /html>.

 

Следующее, что необходимо, это " head" (голова или " шапка" ), которая содержит служебную информацию о вашем документе, и " body" (тело), содержимое самого документа. Поскольку HTML логичен, head (< head> и < /head> ) находятся выше body (< body> и < /body> ).

Документ должен выглядеть так:

 

< html>

< head>

< /head>

 

< body>

< /body>

 

< /html>

 

Обратите внимание, как тэги структурированы по строкам (с помощью клавиши Enter) и какие сделаны отступы (клавишей Tab). В принципе не важно, как вы структурируете ваш HTML-документ. Но, для облегчения чтения кода, рекомендуем структурировать ваш HTML с помощью перевода строк и отступов.

Вы создали базовый шаблон для всех последующих HTML-документ.

 

Лабораторная работа №2

Что мы уже знаем. Ещё немного HTML-тегов. Атрибуты.

Что мы уже знаем?

 

Всегда начинайте Работу с базового шаблона, который создали ранее:

 

< html>

< head>

< title> < /title>

< /head>

 

< body>

< /body>

 

< /html>

 

В разделе head всегда пишите: < title> Название вашей страницы< /title>. Обратите внимание, что title выводится в строке заголовка окна браузера.

Этот title очень важен, поскольку используется поисковыми машинами (такими, как Google или Yandex) для индексирования вашего web-сайта и показа в результатах поиска.

 

В разделе body вы записываете содержимое страницы. Теперь вы уже знаете несколько важных тэгов:

 

< p> Параграф< /p>

< b> Текст жирным шрифтом< /b>

< h1> Заголовок< /h1>

< h2> Подзаголовок< /h2>

< h3> Под-подзаголовок< /h3>

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

 

Запомните: единственный метод выучить HTML - метод проб и ошибок. Но не сомневайтесь, вы никогда не сможете повредить компьютер или Интернет. Поэтому экспериментируйте - это лучший способ набраться опыта.

 

Ещё немного HTML-тэгов

 

Таким же образом, как вы делали текст жирным шрифтом с помощью тэга < b>, вы можете придать ему характер курсива/italic тэгом < i>. И конечно, " i" это сокращение от " italic".

 

Пример 1:

 

< i> Это должно быть выведено курсивом.< /i>

 

будет выглядеть в браузере:

 

Это должно быть выведено курсивом.

 

Аналогично можно уменьшить размер шрифта тэгом < small>:

 

Пример 2:

 

< small> Это будет выведено уменьшенным шрифтом.< /small>

 

будет выглядеть в браузере:

 

Это будет выведено уменьшенным шрифтом.

 

Атрибуты

 

Вы можете назначать атрибуты во многих тэгах.

 

Что такое атрибут?

 

Как вы помните, тэги это метки, указывающие браузеру, как нужно представлять ваш web-сайт. (Например, < br /> информирует браузер, что нужно сделать перевод строки). В некоторых тэгах вы можете вводить дополнительную информацию. Такая дополнительная информация называется " атрибут ".

 

Пример 1:

 

< h2 style=" background-color: #ff0000; " > Мой друг HTML< /h2>

 

Атрибуты всегда записываются внутри тэга, после них следует знак равенства и детали атрибута, заключённые в двойные кавычки. Точка с запятой после атрибута служит для разделения команд разных стилей. Мы к этому ещё вернёмся.

Атрибуты бывают разные. Первый изученный вами атрибут это style/стиль. С помощью этого атрибута вы можете настраивать отображение вашего web-сайта. Например, цвет фона/background colour:

 

Пример 2:

 

< html>

 

< head>

< /head>

 

< body style=" background-color: #ff0000; " >

< /body>

 

< /html>

 

выведет в браузере страницу красного цвета - проверьте сами. Мы детально объясним, как работает цветовая система.

В примере мы запросили вывод красного фона кодом " #ff0000". Это код красного цвета в так называемом шестнадцатеричном формате (HEX). Каждому цвету соответствует своё 16-ричное число. Вот примеры:

· Белый: #ffffff

· Чёрный: #000000 (нули)

· Красный: #ff0000

· Синий: #0000ff

· Зелёный: #00ff00

· Жёлтый: #ffff00

16-ричный код цвета состоит из # и шести цифр или букв. Существует более 1000 HEX кодов и бывает непросто определить, какой HEX-код какому цвету соответствует.

 

Можно использовать также английские названия самых распространённых цветов (white, black, red, blue, green и yellow).

 

Пример 3:

 

< body style=" background-color: red; " >

 

Вернёмся к атрибутам.

Лабораторная работа №3

Ссылки. Изображения.

Ссылки

 

Ссылки создаются для перехода с одной страницы на другую.

Для создания ссылки используется то же, что и всегда при кодировании HTML: тэг. Простой тэг с одним элементом и одним атрибутом позволит перейти куда угодно. Вот пример того, как может выглядеть ссылка на HTML.net:

 

Пример 1:

 

< a href=" http: //www.html.net/" > Это ссылка на HTML.net< /a>

 

будет выглядеть в браузере:

 

Это ссылка на HTML.net

 

Элемент a обозначает " якорь/anchor". Атрибут href это сокращение от " hypertext reference/гипертекстовая ссылка", специфицирующий место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

 

В примере атрибут href имеет значение " http: //www.html.net", которое является полным адресом HTML.net и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что" http: //" всегда должно входить в состав URLов. Слова " Это ссылка на HTML.net" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг < /a>.

 

Ссылки между собственными страницами.

 

Если вы делаете ссылки между страницами на одном web-сайте, то не нужно указывать полный адрес (URL) документа. Например, если у вас две страницы (назовём их page1.htm и page2.htm), сохранённые в одной папке, вы можете сделать ссылку с одной страницы на другую, просто напечатав имя файла в ссылке. То есть ссылка с page1.htm на page2.htm будет выглядеть так:

 

Пример 2:

 

< a href=" page2.htm" > Щёлкните здесь для перехода на page 2< /a>

 

Если page 2 помещена в подпапку " subfolder", ссылка выглядит так:

 

Пример 3:

 

< a href=" subfolder/page2.htm" > Щёлкните здесь для перехода на page 2< /a>

 

В обратную сторону ссылка со страницы page 2 (в подпапке subfolder) на page 1 будет такой:

 

Пример 4:

 

< a href="../page1.htm" > Ссылка на page 1< /a>

 

Сочетание "../" указывает на папку, расположенную на один уровень выше от данной позиции файла, с которого делается ссылка. Следуя этой логике, вы можете также указать на два уровня выше "../../" или более.

 

Альтернативно вы всегда можете указать полный адрес файла (URL).

 

Ссылки внутри страницы.

 

Вы можете также создавать ссылки-переходы внутри самой страницы - например, оглавление со ссылками на главы. Всё, что вам необходимо, - использовать атрибут id и символ " #".

 

Используйте атрибут id для маркировки элемента, на который вы хотите сделать переход. Например:

 

< h1 id=" heading1" > heading 1< /h1>

 

Теперь можно создать ссылку на этот элемент с помощью знака " #" в атрибуте ссылки. Знак " #" сообщает браузеру, что это переход на той же самой странице. После " #" должен следовать id тэга, на который выполняется переход. Например:

 

< a href=" #heading1" > Ссылка на heading 1< /a>

 

Всё станет понятнее на примере:

 

Пример 5:

 

< html>

 

< head>

< /head>

 

< body>

 

< p> < a href=" #heading1" > Ссылка на heading 1< /a> < /p>

< p> < a href=" #heading2" > Ссылка на heading 2< /a> < /p>

 

< h1 id=" heading1" > heading 1< /h1>

< p> Text text text text< /p>

 

< h1 id=" heading2" > heading 2< /h1>

< p> Text text text text< /p>

 

< /body>

 

< /html>

 

выглядит в браузере (щёлкните по ссылкам):

 

Ссылка на heading1

 

Ссылка на heading2

 

Heading 1

 

Text text text text

 

Heading 2

 

Text text text text

 

(Примечание: атрибут id должен начинаться с буквы)

 

Ссылка на e-mail адрес.

 

Вы можете также сделать ссылку на e-mail адрес почти так же, как в ссылке на документ.

 

Пример 6:

 

< a href=" mailto: [email protected]" > Отправить e-mail nobody на HTML.net< /a>

 

будет в браузере:

Отправить e-mail nobody на HTML.net

 

Единственное отличие в ссылках на e-mail и на файл состоит в том, что, вместо адреса документа, вы записываете mailto: с последующим адресом электронной почты/e-mail. При щелчке по ссылке открывается программа по умолчанию для работы с электронной почтой с адресом, уже записанным в строке адреса. Обратите внимание, что эта функция будет работать только в том случае, если e-mail программа установлена на вашем компьютере.

 

Атрибут для краткого описания ссылки.

 

Для создания ссылки вы обязательно должны использовать атрибут href. Кроме того, в ссылку можно поместить атрибут title.

 

Пример 7:

 

< a href=" http: //www.html.net/" title=" Посещайте HTML.net и изучайте HTML" > HTML.net< /a>

 

будет выглядеть в браузере:

 

HTML.net

 

Атрибут title используется для краткого описания ссылки. Если вы - не щёлкая мышью - поместите её указатель над ссылкой, вы увидите, как появится текст " Посещайте HTML.net и изучайте HTML".

 

Изображения

 

Для того, чтобы пометить изображение на страницу, необходимо применить следующий тег:

 

Пример 1:

 

< img src=" david.jpg" alt=" David" >

 

будет выглядеть в браузере:

 

 

Необходимо сообщить браузеру, что вы хотите вставить изображение/image (img), и указать его размещение (src, сокращение для " source" ).

 

Примечание. Обратите внимание, что тэг img не требует наличия закрывающего тэга. Как и < br />, это команда не связана с буквенным текстом.

 

" david.jpg" это название файла изображения. " .jpg" - расширение файла, тип изображения. Как ".htm" указывает, что файл является HTML-документом, так и " .jpg" сообщает браузеру, что файл является изображением. Есть три типа файлов изображений, которые можно вставить на ваши страницы:

· GIF (Graphics Interchange Format)

· JPG / JPEG (Joint Photographic Experts Group)

· PNG (Portable Network Graphics)

 

GIF-изображения обычно лучше всего для графики и рисунков, а JPEG - для фотографий. Для этого есть две причины: первая - GIF-изображения содержат только до 256 цветов, а JPEG - до миллионов цветов, и второе - формат GIF лучше сжимает простые изображения, чем JPEG, который оптимизирован под более сложные изображения. Чем выше сжатие, тем меньше файл изображения, тем быстрее загружается ваша страница. Как вы, вероятно, знаете из собственного опыта, пользователи не любят " тяжёлые" страницы.

 

Традиционно форматы GIF и JPEG являются преобладающими типами, но в последнее время становится всё более популярным формат PNG (прежде всего из-за издержек формата GIF). Формат PNG по многим параметрам превосходит JPEG и GIF: миллионы цветов и эффективное сжатие.

 

Лабораторная работа №4

Таблицы.

Таблицы

 

Таблицы используются, когда вам необходимо показать " табличные данные", например, информацию, логически упорядоченную в столбцы и ряды.

 

Построение таблиц в HTML может показаться сложным на первый взгляд, но, если вы будете терпеливы, это окажется строго логичным - как и всё в HTML.

 

Пример 1:

 

< table>

< tr>

< td> Cell 1< /td>

< td> Cell 2< /td>

< /tr>

< tr>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3	Cell 4

Как видно из приведённого примера, то это, возможно, самый сложный из примеров HTML, которые мы рассматривали до сих пор. Сделаем следующие пояснения:

 

Для вставки таблиц используются 3 базовых тэга:

· < table> - начало и конец таблицы.

· < tr> - " table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек.

· < td> - сокращение от " table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы.

 

В Примере 1 таблица начинается с < table>, затем идёт < tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: < td> Cell 1< /td> и < td> Cell 2< /td>. Ряд закрывается < /tr>, и сразу начинается новый ряд < tr>. В новом ряду также две ячейки. Таблица закрывается < /table>.

 

Р яды это горизонтальные строки ячеек, а столбцы - вертикальные столбцы ячеек:

 

Cell 1 и Cell 2 образуют ряд. Cell 1 и Cell 3 образуют столбец.

 

В вышеприведённом примере в таблице имеются два ряда и два столбца. Но в таблице может быть неограниченное число рядов и столбцов.

 

Пример 2:

 

< table>

< tr>

< td> Cell 1< /td>

< td> Cell 2< /td>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< tr>

< td> Cell 5< /td>

< td> Cell 6< /td>

< td> Cell 7< /td>

< td> Cell 8< /td>

< /tr>

< tr>

< td> Cell 9< /td>

< td> Cell 10< /td>

< td> Cell 11< /td>

< td> Cell 12< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2	Cell 3	Cell 4
Cell 5	Cell 6	Cell 7	Cell 8
Cell 9	Cell 10	Cell 11	Cell 12

Ещё атрибуты.

 

Например, атрибут border используется для специфицирования толщины рамки вокруг таблицы:

 

Пример 3:

 

< table border=" 1" >

< tr>

< td> Cell 1< /td>

< td> Cell 2< /td>

< /tr>

< tr>

< td> Cell 3< /td>

< td> Cell 4< /td>

< /tr>

< /table>

 

будет выглядеть в браузере:

Cell 1	Cell 2
Cell 3	Cell 4

 

Толщина рамки специфицируется в пикселях.

 

Как и с изображениями, вы можете указывать размер таблицы в пикселях или в процентах от размера экрана:

 

Пример 4:

 

< table border=" 1" width=" 30%" >

 

Этот пример будет отображён в браузере как таблица шириной в 30% экрана. Проверьте сами.

 

У таблиц есть много атрибутов. Вот ещё два:

· align: специфицирует выравнивание содержимого всей таблицы по горизонтали, в ряду или в отдельной ячейке. Например, left, center или right.

· valign: специфицирует выравнивание по вертикали в ячейке. Например, top, middle или bottom.

 

 

Пример 5:

 

< td align=" right" valign=" top" > Cell 1< /td>

 

Лабораторная работа №5

Внешний вид (CSS)

 

Публикация страниц

 

До сих пор только вы имели возможность просматривать ваши страницы.

 

Для показа web-сайта в Internet вы должны иметь пространство на сервере и бесплатную FTP-программу.

 

Если у вас есть доступ к Internet, у вас, возможно, уже есть немного места для вашего web-сайта. Ваше пространство на сервере может называться примерно так - http: //home.provider.com/~usernumber. Но сначала вы должны активировать его. Прочтите об этом в документации вашего Internet-провайдера или на его справочных страницах.

 

Другая возможность получить некоторое пространство в Internet - настроить учётную запись e-mail (на, например, Hotmail), тогда вы сможете зарегистрировать свободное пространство в Internet. Такой сервис имеют несколько компаний, среди них - AngelFire (щёлкните " Sign Up" и выберите free membership) - регистрация займёт всего несколько минут.

 

Для доступа на сервер вам необходимо знать " Host Name" (Например, ftp.angelfire.com) и иметь своё username и password.

 

Для доступа на сервер и выгрузки на него ваших страниц вам понадобится также программа, работающая по протоколу FTP. Возможно, у вас её ещё нет, но можно загрузить её бесплатно.

 

Имеется множество FTP-программ. Одна из лучших - FileZilla, абсолютно бесплатная. Можно скачать FileZilla с filezilla.sourceforge.net.

 

 

Как выгружать страницы.

 

Ниже идет описание того, как выгружать страницы на бесплатную учётную запись/account на AngelFire с помощью FileZilla. Но эта процедура применима, в большей или меньшей степени, для всех провайдеров и FTP-программ.

 

Откройте FTP-программу после того, как подключитесь к Internet. Вставьте " Host Name" (" ftp.angelfire.com" ниже " Address" ), имя пользователя (ниже " User" ) и пароль (ниже " Password" ) и щёлкните " Connect". У вас теперь имеется доступ к этому серверу. В одной части программы вы видите содержимое вашего компьютера (" Local Site" ), а в другой - содержимое сервера (" Remote Site" ):

 

Найдите ваши HTML-документы и изображения на вашем компьютере (в " Local site" ) и перешлите их на сервер (" Remote site" ) дважды щёлкнув на них. Теперь их видит весь мир! (Например, по адресу http: //www.angelfire.com/folk/htmlnet/page1.htm).

 

Назовите одну из страниц " index.htm" (или " index.html" ), и она автоматически станет стартовой страницей. т. е., если вы введёте http: //www.angelfire.com/folk/htmlnet (без указания имени файла), откроется http: //www.angelfire.com/folk/htmlnet/index.htm.

 

Для длительной работы неплохо приобрести собственный домен (www.ваше-имя.com) и избавиться от длинного адреса, предоставляемого Internet-провайдером бесплатного сервиса. Можете купить домен, к примеру, на Speednames или NetworkSolutions.

 

Web-стандарты и проверка

 

HTML можно кодировать несколькими способами. Браузеры также могут читать HTML по-разному. Можно сказать, что в HTML есть много диалектов. Поэтому сайты выглядят по-разному в различных браузерах.

 

Почти с момента зарождения Internet начались попытки выработать общий HTML-стандарт на World Wide Web Consortium (W3C), который основал Tim Berners-Lee.

 

В старину - когда за браузеры надо было заплатить - Netscape был основным браузером. Существовали HTML-стандарты.0 и 3.2. Но на рынке, на 90% занятом Netscape не было необходимости в общих стандартах. Кроме того, Netscape изобретал собственные странные элементы, которые не работали на других браузерах.

 

Многие годы Microsoft почти игнорировал Internet. Затем началось соревнование с Netscape, и появился новый браузер. Первые версии нового браузера Microsoft'а - Internet Explorer - поддерживали HTML-стандарты не лучше, чем Netscape. Но Microsoft решил распространять свой браузер бесплатно (это всегда приветствуется), и Internet Explorer вскоре стал самым популярным браузером.

 

Начиная с версий 4 и 5, Microsoft всё более и более поддерживал HTML-стандарты от W3C. Netscape не занимался разработкой новых версий и продолжал выпускать устаревшую версию 4.

 

Сегодня HTML-стандарты называются 4.01 и XHTML. Теперь уже Internet Explorer занимает свыше 90% рынка. В Internet Explorer тоже есть свои необычные элементы, но он также поддерживает и W3C HTML-стандарты. Так же делают и другие браузеры, такие как Mozilla, Opera и Netscape.

 

Итак, если вы кодируете HTML, придерживаясь стандартов W3C, вы делаете web-сайты, которые читаются всеми браузерами - сейчас и в будущем. То, что вы изучили, это новая и более строгая версия HTML, которая называется XHTML.

 

При наличии различных разновидностей HTML вы должны сообщать браузеру, на каком " диалекте" HTML говорите вы, в нашем случае - XHTML. Для этого используйте Document Type Definition/определение типа документа. DTD всегда записывается в самом начале документа:

 

Пример 1:

 

<! DOCTYPE html PUBLIC " -//W3C//DTD XHTML 1.0 Strict//EN" " http: //www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" >

< html xmlns=" http: //www.w3.org/1999/xhtml" lang=" en" >

 

< head>

< title> Title< /title>

< /head>

 

< body>

< p> text text< /p>

< /body>

 

< /html>

 

Помимо Document Type Definition (первая строка в примере), которое сообщает браузеру, что вы пишете на языке XHTML, вы должны вставить также дополнительную информацию в тэг html с помощью атрибутов xmlns и lang.

 

xmlns, это сокращение от " XML-Name-Space", всегда должен иметь значение http: //www.w3.org/1999/xhtml. Это всё, что нужно знать. Но, если вы интересуетесь сложными вопросами, можете прочесть о namespaces на W3C web-сайте.

 

В атрибуте lang вы указываете, на каком языке написан документ. Для этого используется стандарт ISO 639, в котором перечислены коды всех языков мира. В предыдущем примере установлен English (" en" ).

 

С помощью DTD браузер точно знает, как он должен читать и отображать ваш HTML. Используйте этот образец как шаблон для ваших будущих HTML-документов.

 

DTD также имеет важное значение при проверке ваших страниц.

 

Проверка!

 

Вставьте DTD в ваши страницы - и ваш HTML всегда можно будет проверить на наличие ошибок с помощью бесплатного проверщика W3C's free validator.

 

Чтобы протестировать эту возможность, создайте страницу и поместите её в Internet. Теперь перейдите на validator.w3.org, введите адрес (URL) вашей страницы и проверьте её. Если ваш HTML корректен, вы получите congratulations message. В ином случае - сообщение об ошибках с точным указанием того, что и где сделано неправильно. Сделайте специально несколько ошибок и посмотрите, что получится.

 

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

 

Всегда проверяйте ваши страницы для обеспечения их корректности.

 

Последние замечания

 

Вы много узнали и способны теперь создавать собственные web-сайты! Однако то, чему вы научились, это только основы. Но вы заложили хороший фундамент, на котором можно начинать строительство.

 

В заключение несколько важных требований.

· Необходимо следить за порядком и структурой ваших HTML-документов. Публикуя хорошо упорядоченные документы, вы не только демонстрируете другим уровень своего мастерства владения HTML, но и облегчаете себе работу.

 

· Соблюдайте стандарты и проверяйте ваши страницы: всегда пишите на чистом XHTML, используйте DTD и проверяйте ваши страницы с помощью проверщика validator.w3c.org.

 

· Делайте страницы содержательными. Помните, что HTML позволяет показывать вашу информацию в Internet, поэтому позаботьтесь, чтобы эта информация была презентабельной. Страницы могут быть очень приятными на вид, но большинство людей ищет в Internet информацию.

 

· Не перегружайте страницы изображениями, которые вы нашли в Internet. Это замедляет загрузку страниц и мешает посетителям. Страницы, требующие для загрузки более 20 секунд, теряют до 50% посетителей.

 

· Не забудьте добавить ваш сайт в поисковые машины/директории, чтобы не только члены вашей семьи могли найти ваши страницы в сети. На первых страницах всех поисковых машин вы найдёте ссылки на новые страницы (самые известные машины - Google, см. также DMOZ, Yahoo, AltaVista, AlltheWeb и Lycos).

 

· В этом учебнике вы научились использовать Notepad, простой в использовании редактор, но, возможно, вы захотите использовать более профессиональные программы, имеющие больше возможностей. Обзор таких программ есть на Download.com.

 

Как узнать больше.

 

Прежде всего, не прекращайте работать и экспериментировать. Изучайте web-сайты других людей и, если найдёте что-то интересное, посмотрите, как это сделано, через меню " View Source/Просмотр исходного кода" (меню " View" и " Source" вашего браузера).

 

Ищите в Internet примеры и статьи о HTML. Есть множество web-сайтов о HTML. Читайте и задавайте вопросы на форумах в Internet. Два хороших места - Newsgroups и Experts Exchange. Там вы можете спросить совета у настоящего эксперта и многому научиться.

 

 

Лабораторная работа №1

Утилиты для создания web-сайта. Что такое HTML. Теги.

Создаем свой первый сайт.

 

1. Утилиты для создания web-сайта

На начальном этапе работы по созданию web-сайта необходимо иметь следующие утилиты:

· «браузер/browser» - программу просмотра web-страниц. Можно использовать любой - Microsoft Internet Explorer, Opera или Mozilla Firefox.

· текстовый редактор Блокнот.

Возможно, вы слышали, или даже использовали такие программы, как Microsoft FrontPage, Macromedia Dreamweaver или даже Microsoft Word, которые могут - или заявляют что могут - создавать web-сайты для вас. Пока забудем об этих программах. Они не научат вас тому, как кодировать web-сайт.

Блокнот прекрасно подходит для создания кода, поскольку никак не влияет на то, что вы пишете. Это даёт вам полный контроль над текстом. Проблема многих «навороченных» программ в том, что в них много стандартных функций, из которых вы можете выбирать необходимые. Обратной стороной этого является то, что всё подгоняется под эти стандартные функции. Поэтому такие программы часто не в состоянии создать точно такой сайт, какой требуется вам. Или что ещё хуже, они начинают изменять написанный вами код. При использовании Блокнота или иного простого текстового редактора только вы отвечаете за то, что написано.

Браузер и Блокнот (или аналогичный простой редактор) - вот всё, что вам необходимо в начале работы над созданием web-сайтов.

2. HTML

HTML - это «родной язык» вашего браузера.

HTML был изобретён в 1990 году учёным, Тимом Бёрнсом-Ли, и предназначался для облегчения обмена документами между учёными различных университетов. Проект имел больший успех, чем Тим Бёрнс-Ли мог ожидать. Этим изобретением HTML он заложил основы современной сети Internet.

HTML - это язык, который позволяет представлять информацию (например, научные исследования) в Internet. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы увидеть HTML-коды страницы в Internet, щёлкните " Вид" в строке меню вашего браузера и выберите " Просмотр HTML-кода".

Если вы хотите создавать web-сайты, вы не обойдётесь без HTML. Даже если вы используете для создания web-сайтов такие программы, как Dreamweaver, знание основ HTML значительно упростит вам жизнь, а ваш web-сайт станет намного интересней.

HTML это сокращение от " HyperText Mark-up Language/язык гипертекстовой разметки".

· Hyper противоположно linear/построчно. В недавнем прошлом компьютерные программы работали построчно: программа выполняла одну строку, затем переходила к выполнению следующей, и т. д. Но HTML работает по-иному - вы можете перейти куда и когда захотите. Например, не нужно посещать MSN.com до того, как посетить HTML.net.

· Text - текст.

· Mark-up - это разметка, то, что вы делаете с текстом. Вы размечаете текст так же, как вы делаете это в текстовых редакторах: выставляете заголовки, списки, выделяете текст жирным шрифтом и т. д.

· Language - это язык HTML. В нём используется много английских слов.

Мы будем изучать так называемый XHTML (Extensible HyperText Mark-up Language), который является новым и более структурированным вариантом HTML.

3. Теги

Тэги это метки, которые вы используете для указания браузеру, как он должен показывать ваш web-сайт.

Все тэги имеют одинаковый формат: они начинаются знаком " < " и заканчиваются знаком " > ".

Обычно имеются два тэга - открывающий: < html> и закрывающий: < /html>. Различие в том, что в закрывающем тэге имеется знак " /" (слэш).

Всё содержимое, помещённое между открывающим и закрывающим тэгами, является содержимым тэга.

Из каждого правила есть исключения, и в HTML также имеются тэги, которые являются и открывающими, и закрывающими. Эти тэги не содержат текста, а являются метками, например, перенос строки выглядит так: < br>. HTML - это тэги. Для изучения HTML необходимо изучить различные тэги.

 

Пример 1:

Тэг < b> информирует браузер, что весь текст между < b> и < /b> должен быть напечатан жирным шрифтом. (" b" это сокращение для " bold".)

 

< b> This text must be bold.< /b>

будет выглядеть при просмотре в браузере:

This text must be bold.

Пример 2:

Тэги < h1>, < h2>, < h3>, < h4>, < h5> и < h6> указывают браузеру создавать заголовки (h для " heading" ), где < h1> это заголовок первого уровня - самый крупный шрифт, < h2> - заголовок второго уровня - шрифт меньшего размера, и < h6> - заголовок шестого уровня - самого низкого в этой иерархии, и самый маленький шрифт.

 

< h1> Это заголовок< /h1>

< h2> Это подзаголовок< /h2>

будет выглядеть в браузере:

Это заголовок

Это подзаголовок

 

Примечание.

1234Следующая ⇒

Поделиться: