Изучай HTML онлайн

 Главная

 

 

Учебник HTML

Здесь вы сможете изучить основы HTML и с лёгкостью создавать свои сайты. Большинство считают, что создавать web-сайт очень непросто. Это совсем не так! Этот онлайн - учебник html даст вам понимание того, как сделать web-сайты. Несколько простых уроков. Они не предполагают абсолютно никакого опыта в программировании. Хотя HTML не является языком программирования, поэтому освоить его куда проще. От Вас потребуется чуть-чуть желания и настойчивости проверить знания на практике. И не сомневайтесь – процесс создания web-страниц принесёт огромное удовольствие и удовлетворение полученными результатами. Советуем осваивать материал понемножку и больше экспериментировать.

Итак, начнём!

Урок 1. Начнём

В этом уроке представлены программы, которые помогут Вам в создании сайта.Что же нужно иметь? Для начала нужен браузер – программа для просмотра web-страниц. У Вас он, конечно же, есть, так как Вы видите данную страницу. Второе, что потребуется – это программа для непосредственного ввода html-кода. Вам пока не нужны крупные программа - редакторы типа Dreamweaver. Для того чтобы научится делать хорошие сайты и понимать логику набираемого кода, подойдёт простой текстовый редактор. Notepad как раз подходит нам, давая полный контроль над набираемым кодом, в отличие от навороченных программ, которые автоматически корректируют код под свои стандарты, усложняющих материализирование задуманных идей. Поэтому программы такого типа часто не в состоянии помочь создать такой сайт , какой нужен Вам. Браузер и простой текстовый редактор  - это всё, что потребуется для работы с данным онлайн-учебником и создания собственных web-сайтов.

Урок 2. HTML-теги

HTML-теги – это команды. Браузер, видя эти команды, структурирует данные определённым образом.
Тег <b> (bold – жирный), говорит браузеру, что текст нужно начать показывать жирным. Больше он ничего не умеет, поэтому у него есть близнец </b>, который говорит браузеру, что нужно закончить показ текста жирным. Почти у всех тегов есть своя пара.

Структура HTML-документа

<html>



  <head>

  <title></title>

  </head>



  <body>

  </body>



</html>

Посмотрите на эту структуру. Тут ничего сложного. Тег <html> указывает браузеру, что начался HTML - документ. Между тегами head располагается служебная информация для поисковиков и заголовок title, Который отображается в верхней строке браузера и тоже нужен для поисковых машин. Всё, что написано между тегами как раз и будет отображаться в самом браузере. Обратите внимание на отступы, браузеру всё равно, есть они или нет, но они нужны Вам, хоть это пока неочевидно. Это убережёт Вас от возможных ошибок в дальнейшем.

Урок 3. Первый сайт

Теперь, зная базовую структуру html – документа, Вы сможете создать свой первый сайт.
Допустим, что Вы хотите, чтобы браузер высветил на экране фразу «Мой первый сайт». Всё очень легко: откройте блокнот и, согласно шаблону, напишите между тегами body данную фразу. Чтобы на закладке и в верхней строке браузера отображался нужный заголовок, между тегами title напишите к примеру «Мой сайт».
Вот что должно получится:

<html> 
<head>
<title>Мой сайт</title>
</head>
<body>
Мой первый сайт

</body> </html>

Теперь надо сохранить его на винчестер, а затем открыть в браузере.
Если всё удачно, переходите к следующему уроку.

Урок 4. Ещё немного о тегах

Теперь что?

Теперь выучим семь новых тэгов.

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

Пример 1:



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

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

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


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

Пример 2:



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



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


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

Могу ли использовать несколько тэгов одновременно?

Да, исключая перекрывание тэгов. Это проще увидеть на примере:

Пример 3:

Если вы хотите вывести текст bold и italic, это нужно сделать так:



           <b><i>Текст bold и italic</i></b>



а НЕ так :



           <b><i>Текст bold и italic</b></i>



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

Ещё тэгов!

Как сказано в Уроке 4, есть тэги, которые являются одновременно открывающими и закрывающими. Эти тэги содержат команды, которые не связаны с конкретными буквами, являются изолированными командами. Пример - тэг <br />, который создаёт перевод строки:

Пример 4:





           Некоторый текст<br /> и ещё текст, уже на новой строке



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

               Некоторый текст
               и ещё текст, уже на новой строке

Заметьте, что этот тэг записан как гибрид открывающего и закрывающего тэгов с пробелом и слэшем: <br />. В принципе, его можно записывать <br></br>, но зачем усложнять?

Другой такой тэг - <hr /> - рисует горизонтальную линию ("hr" от "horizontal rule"):

Пример 5:



           <hr />



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


Примеры тэгов, требующих наличия и закрывающего тэга: <ul>, <ol> и <li>. Эти тэги используются для вывода списков.

<ul> - сокращение от "unordered list/неупорядоченный список" - вставляет значок кнопки для каждого элемента списка. <ol> - сокращение от "ordered list/упорядоченный список" - нумерует каждый элемент списка. Для создания элемента списка используйте тэг <li> ("list item/элемент списка"). Непонятно? См. примеры:

Пример 7:



           <ul>

             <li>Элемент списка</li>

             <li>Другой элемент списка</li>



           </ul>



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

  • Элемент списка
  • Другой элемент списка

Пример 8:



           <ol>

             <li>Первый элемент списка</li>

             <li>Второй элемент списка</li>



           </ol>



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

  1. Первый элемент списка
  2. Второй элемент списка

Фи! И это всё?

Всё на сегодня. Итак, экспериментируйте и создавайте ваши собственные страницы с семью новыми тэгами, изученными на этом уроке:

Урок 5. Что такое атрибуты

    

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

Как вы, возможно, помните, тэги это метки, указывающие браузеру, как нужно представлять ваш 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>
 

выведет в браузере страницу красного цвета - проверьте сами. Мы детально объясним, как работает цветовая система.
Обратите внимание, что некоторые тэги и атрибуты используют американскую разновидность английского языка, т. е. color вместо colour. Важно использовать именно такой вариант написания, как мы используем в примерах в этом учебнике - иначе браузеры не смогут понять ваш код. Также не забывайте ставить двойные кавычки после атрибута.

Как страница стала красной?

В предыдущем примере мы запросили вывод красного фона кодом "#ff0000". Это код красного цвета в т. н. шестнадцатиричном формате (HEX). Каждому цвету соответствует своё 16-ричное число. Вот примеры:
Белый: #ffffff
Чёрный: #000000 (нули)
Красный: #ff0000
Синий: #0000ff
Зелёный: #00ff00
Жёлтый: #ffff00
16-ричный код цвета состоит из # и шести цифр или букв. Существует более 1000 HEX кодов и бывает непросто определить, какой HEX-код какому цвету соответствует. Для удобства мы советуем иметь карту 216 самых распространённых кодов цвета: 216 Web Safe Colour Chart.
Можно использовать также английские названия самых распространённых цветов (white, black, red, blue, green и yellow).
Пример 3:

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

Но хватит о цвете. Давайте вернёмся к атрибутам.

Какие тэги могут использовать атрибуты?

Различные атрибуты могут применяться для большинства тэгов.
В таких тэгах, как body, вы будете часто использовать атрибуты, а, например, в тэге br - редко, поскольку перенос строки это обычно перенос строки без каких-либо уточняющих параметров.
Имеется множество тэгов, есть и много атрибутов. Есть атрибуты, предназначенные специально для какого-то определённого тэга, а другие можно использовать в разных тэгах. И наоборот: некоторые тэги могут иметь только один какой-то определённый атрибуты, в то время как другие тэги - несколько атрибутов.
Это может звучать немного непонятно, но, когда вы выучите различные атрибуты, вы увидите, что всё построено очень логично, что использовать атрибуты легко и просто, и что они значительно расширяют ваши возможности.
В этом учебнике мы рассмотрим самые важные атрибуты.

Кстати, их каких ещё частей состоит тэг?

Основная часть тэга называется элемент (например, p в <p>). Таким образом, тэг состоит из элемента (например, <p>), либо из элемента плюс один или более атрибутов (например, <p style="background-color:#ff0000;">). Проще некуда.

Урок 6. Гиперссылки

В этом уроке вы научитесь создавать ссылки - переходы с одной страницы на другую. Что необходимо для создания ссылки?

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

Пример 1:

код

<a href="http://brief-book.narod.ru/">Это ссылка на brief-book</a>

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

Это ссылка на brief-book

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

В примере атрибут href имеет значение "http://brief-book.narod.ru", которое является полным адресом brief-book и называется URL (Uniform Resource Locator/универсальный локатор ресурса). Обратите внимание, что"http://" всегда должно входить в состав URLов. Слова "Это ссылка на brief-book" это текст, который показывается в браузере как ссылка. Не забудьте закрыть тэг . Как насчёт ссылок между моими собственными страницами?

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

Пример 2:

<a href="test.html">Щёлкните здесь</a>

Щёлкните здесь

Если страница test.html помещена в подпапку "subfolder", ссылка выглядит так:

Пример 3:

<a href="subfolder/test.html">Нажмите здесь </a>

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

Пример 4:

<a href="../index.html">Ссылка на главную страницу</a>

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

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

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

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

Пример 5:

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

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

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

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

Пример 6:

Ссылка на <a href="mailto:brief-book@yandex.ru">Отправить e-mail мне на почту</a>

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

Отправить e-mail мне на почту

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

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

Пример 7:

<a href="http://brief-book.narod.ru/" title="Посещайте brief-book.narod.ru и изучайте HTML">brief-book.narod.ru</a>

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

brief-book.narod.ru

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

Урок 7. Графика

Здóрово было бы поместить портрет актёра и музыкальной легенды David'а Hasselhoff'а прямо в центре ваше страницы?!

Это звучит немного дерзко...

Может быть, но это довольно просто сделать. Всё, что вам необходимо, как всегда, - тэг:

Пример 1:



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



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

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: миллионы цветов и эффективное сжатие.

Где мне взять файлы изображений?

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

К сожалению в Windows и других операционных системах отсутствуют хорошие программы для редактирования изображений. Таким образом, вы может вложить деньги в приобретение Paint Shop Pro, PhotoShop или Macromedia Fireworks - это три лучшие программы редактирования изображений, имеющиеся в данный момент на рынке.

Однако, как мы говорили ранее, не обязательно покупать дорогие программы для работы с этим учебником. Вы можете загрузить прекрасную программу для работы с изображениями, Irfan View, которая является т. н. freeware, и, следовательно, ничего не стóит.

Либо вы можете просто содрать изображения с других сайтов, загрузив соответствующие страницы. Но, пожалуйста, будьте внимательны, чтобы не нарушить при этом авторских прав. Вот как загрузить изображения:

  1. Правой клавишей мыши щёлкните на изображении в Internet.
  2. Выберите "Save picture as..." в меню.
  3. Выберите место для сохранения на вашем компьютере и нажмите "Save".

Проделайте это с изображением, расположенным здесь, и сохраните его на вашем компьютере в том же месте, что и ваши HTML-документы. (Заметьте, что этот логотип сохраняется в файле формата PNG: logo.png):

brief-book logo

Теперь вы можете вставлять это изображение в ваши страницы. Попробуйте сделать это самостоятельно.

Это всё, что нужно знать об изображениях?

Вам необходимо знать ещё две вещи.

Во-первых, вы можете легко вставлять изображения, размещённые в других папках, или даже на других web-сайтах:

Пример 2:



           <img src="img/logo.png">



Пример 3:



           <img src="http://brief-book.narod.ru/img/logo.png">



Во-вторых, изображения могут быть ссылками:

Пример 4:



           <a href="http://brief-book.narod.ru">

           <img src="img/logo.png"></a>



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

brief-book's logo

Есть ещё атрибуты, которые мне необходимы?

Вам всегда нужно использовать атрибут src, который указывает браузеру, где находится изображение. Помимо этого есть ещё и другие атрибуты, которые могут понадобиться при работе с изображениями.

Атрибут alt используется для альтернативного описания изображения, если, по каким-то причинам, оно не показано пользователю. Это особенно касается пользователей с ослабленным зрением, или если страница очень медленно загружается. Следовательно, всегда нужно использовать атрибут alt:

Пример 5:



           <img src="img/logo.gif" alt="brief-book logo">



Некоторые браузеры отображают текст этого атрибута в небольшом боксе при наведении указателя мыши на изображение. Обратите внимание, что при использовании атрибута alt целью является дать альтернативное описание изображения. Атрибут alt не следует использовать для создания всплывающих сообщений, поскольку тогда пользователи со слабым зрением будут вынуждены слушать сообщение, не зная, что изображено на картинке.

Атрибут title можно использовать для краткого описания изображения:

Пример 6:



           <img src="img/logo.gif" title="Learn HTML from brief-book">



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

brief-book logo

Если вы поместите курсор, без щелчка, над ссылкой, вы увидите, что текст "Learn HTML from HTML.net" появился во всплывающем боксе.

Два других важных атрибута - width и height:

Пример 7:



           <img src="img/logo.png" width="141" height="32">



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

brief-book

Атрибуты width и height можно использовать для установки ширины и высоты изображения, соответственно. Значение указывается в пикселах. Пиксел это единица для измерения разрешения экрана. (Обычное разрешение - 800x600 и 1024x768 пикселов). В отличие от сантиметров, пикселы являются относительными единицами, которые зависят от разрешения данного экрана. Для пользователя с высоким разрешением экрана 25 пикселов могут выглядеть как 1 сантиметр, а эти же 25 пикселов при низком разрешении могут соответствовать 1.5 сантиметрам экрана.

Если вы не установите width и height, изображение будет показано в своём реальном размере. При помощи width и height вы можете изменять размеры:

Пример 8:



           <img src="img/logo.gif" width="32" height="32">



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

brief-book logo

Неплохо помнить, что реальный размер файла изображения в килобайтах останется неизменным, и этот файл будет занимать то же время для загрузки, как и раньше, хотя и будет выглядеть на экране уменьшенным. Следовательно, никогда не уменьшайте размер изображения атрибутами width и height. Вместо этого уменьшайте размер изображения в программе редактирования.

Тем не менее, неплохо использовать атрибуты width и height, поскольку браузер сможет определять размер изображения на странице до его полной загрузки. Это позволит браузеру быстрее и более качественно загружать страницы.

Ну, хватит о David Hasselhoff и изображениях.

Урок 8. Таблицы

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

Это трудно?

Построение таблиц в 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

Какая разница между <tr> и <td>?

Как видно из приведённого примера, это, возможно, самый сложный из примеров 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 3 Cell 4

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>





Что можно вставлять в таблицы?

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

В добрые старые времена Internet - т. е. несколько лет назад - таблицы часто использовались для распределения содержимого на странице. Однако сегодня для этого есть более крутой способ  - CSS. Но об этом позже.

Теперь примените ваши знания на практике и создайте несколько таблиц различных размеров, с разными атрибутами и содержимым. Это займёт у вас несколько часов.

Урок 9. Ещё о таблицах

Название "Ещё о таблицах" может звучать немного вызывающе. Если вы уже можете создавать таблицы, то уже абсолютно ничто в HTML не может смутить вас.

Что же ещё?

При создании таблиц используются два атрибута: colspan и rowspan.

Colspan - сокращение от "column span/охват столбцов". Colspan используется в тэге <td> для специфицирования того, сколько столбцов охватывает данная ячейка:

Пример 1:



           <table border="1">

             <tr>

               <td colspan="3">Cell 1</td>



             </tr>

             <tr>

               <td>Cell 2</td>

               <td>Cell 3</td>

               <td>Cell 4</td>



             </tr>

           </table>



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

Cell 1
Cell 2 Cell 3 Cell 4

Установка colspan "3", заставляет ячейку в первом ряду охватывать три столбца. Если установим colspan "2", ячейка охватит только два столбца, и понадобится вставить дополнительные ячейки в первый ряд, чтобы ячейки ровно распределились на два ряда.

Пример 2:





           <table border="1">

             <tr>

               <td colspan="2">Cell 1</td>

               <td>Cell 2</td>

             </tr>



             <tr>

               <td>Cell 3</td>

               <td>Cell 4</td>

               <td>Cell 5</td>



             </tr>

           </table>



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

Cell 1 Cell 2
Cell 3 Cell 4 Cell 5

А как насчёт rowspan?

Как вы уже могли догадаться, rowspan специфицирует, сколько рядов охватывает данная ячейка:

Пример 3:



           <table border="1">

             <tr>

               <td rowspan="3">Cell 1</td>

               <td>Cell 2</td>



             </tr>

             <tr>

               <td>Cell 3</td>

             </tr>

             <tr>



               <td>Cell 4</td>

             </tr>

           </table>



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

Cell 1 Cell 2
Cell 3
Cell 4

В этом примере rowspan имеет значение "3" в ячейке Cell 1. Это указывает, что ячейка должна охватывать три ряда (свой собственный ряд плюс ещё два). Cell 1 и Cell 2 при этом остаются в одном ряду, а Cell 3 и Cell 4 образуют отдельные ряды.

Удивлены? Ладно, это не так сложно. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.

Неудивительно? Тогда вернитесь к началу и создайте пару таблиц с использованием colspan и rowspan.

Урок 10. Публикация страниц

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

Готов ли мир к этому?

Мир готов - скоро и вы тоже будете готовы. Для показа вашего 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"):

FileZilla

Найдите ваши 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.

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

Что ещё нужно знать о HTML?

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

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

В старину - когда за браузеры надо было заплатить - 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 помогает выявить ошибки, о наличии которых вы, может быть, и не подозревали.

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

Урок 12. Последние заметки

Поздравляем, вы добрались до последнего урока.

Теперь я знаю всё?

Вы много узнали и способны теперь создавать собственные 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" вашего браузера).

View source

Ищите в Internet примеры и статьи о HTML. Есть множество web-сайтов о HTML.

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

Остаётся только пожелать вам долгих часов общения с вашим новым знакомым - HTML.

Смотрите себя в Internet :-)


Brief-book. 2009. Связаться с владельцем сайта.
Hosted by uCoz