Мини Курс "Основы HTML" Часть 2
HTML это "родной язык" вашего браузера (программы просмотра вэб-страниц).
Вторая часть мини курса - Цель данного мини курса - дать Вам базовые знания HTML, которые помогут Вам создавать свои первые web-страницы или редактировать уже готовые шаблоны своих web-сайтов!

Урок 7: Ссылки

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

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



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



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

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

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



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



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



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

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

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

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



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



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


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



(Примечание: атрибут id должен начинаться с буквы!!! а не с цифры.)
Могу я перейти ещё куда-нибудь?

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



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



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

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



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



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

Урок 8: Изображения

Здóрово было бы поместить красивую картинку прямо в центре ваше страницы?!

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

Пример 1:

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



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

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

"matrix.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. Выберите "Сохранить изображение как..." в меню.
3. Выберите место для сохранения на вашем компьютере и нажмите "Сохранить".

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

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

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

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

Пример 2:



Пример 3:



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

Пример 4:



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

 

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

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

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

Пример 5:

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

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

Пример 6:



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



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

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

Пример 7:



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



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

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

Пример 8:



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



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

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

Урок 9: Таблицы

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

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

Пример 1:



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

Ячейка 1  Ячейка 2
Ячейка 3  Ячейка 4

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

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

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

<table> - начало и конец таблицы. Логично.
<tr> - "table row/ряд таблицы", начинает и заканчивает горизонтальный ряд ячеек. Тоже логично.
<td> - сокращение от "table data/табличные данные". Этот тэг начинает и заканчивает каждую ячейку ряда таблицы. Всё просто и логично.

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

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



Ячейка 1 и Ячейка 2 образуют ряд. Ячейка 1 и Ячейка 3 образуют столбец.

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

Пример 2:



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

Ячейка 1  Ячейка 2    Ячейка 3    Ячейка 4  
Ячейка 5  Ячейка 6    Ячейка 7    Ячейка 8  
Ячейка 9  Ячейка 10  Ячейка 11  Ячейка 12 

Есть ещё какие-нибудь атрибуты?

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

Пример 3:



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



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

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

Пример 4:



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

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

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

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

Пример 5:



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

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

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

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

Урок 10: Продолжаем изучать таблицы

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

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

Пример 1:



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



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

Пример 2:



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



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

Пример 3:



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



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

Всё это не так сложно. Неплохо будет нарисовать таблицу на бумаге до начала работы в HTML.
Теперь необходимо потренироваться и создать несколько таблиц с использованием colspan и rowspan.

Урок 12: Публикация сайта

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

Более подробно о том, как опубликовать свой первый web-сайт можно узнать из видеоурока, на примере движка DLE:



Чтобы не тратить уйму времени на поиски надёжного и недорогого хостинга предлагаю Вам свой выбор:



Перейдя по рекламному баннеру на хостинг нажмите внизу страницы "Калькулятор тарифов" и можете просчитать наиболее выгодный для Вас тарифный план.

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

В этом уроке мы дадим несколько больше теории HTML.

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:



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

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

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

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

Очень надеюсь, что данный мини курс будет Вам полезен!