Пятница, 17.05.2024, 20:20
| RSS

Уроки дизайна

Главная » 2009 » Май » 6 » Знакомимся с языком HTML 4.01 Часть1

Знакомимся с языком HTML 4.01 Часть1

19:30

Это мой урок о языке HTML версии 4.01. Урок предназначен для начинающих. В данном уроке я подробно разжевал на наглядных примерах его основу. Предупреждаю, что тут только HTML, а XHTML и CSS тут нету - всё это будет в следующих моих статьях... которые вам понадобятся если вы будете делать баннер по заказу!

Итак, допустим, что мы уже нарисовали все элементы, входящие в дизайн сайта (это могут быть: логотип, кнопки, окошки, меню и другая графика), придумали как это будет выглядеть в сборе, сделали эскиз. Теперь нам нужно всё это как-то собрать, объединить на web-странице. Для этого, для начала, нам понадобятся знания языка HTML, с его мы и начнём.

Что такое HTML?

Язык HTML (Hypertext Markup Language — язык разметки гипертекстовой информации) позволяет осуществлять простое форматирование текста, вставку графики, а также составление таблиц и цветовое оформление документов.

Документы в формате HTML обычно имеют расширение .html или .htm и являются обычными текстовыми документами, которые можно редактировать в любом текстовом редакторе, например в блокноте. Но я бы посоветовал завести у себя какой-нибудь текстовый редактор с подсветкой синтаксиса — это чтобы было меньше ошибок в набранном коде, да и просто для удобства. Неплохим и бесплатным решением будет программа Notepad++ или PSPad (ссылки на программы смотрите в конце статьи), к тому же они поддерживают русский язык.

Ну что? Готовы? Ну тогда начнём...

HTML 4.01

Изучать мы будем язык HTML версии 4.01 — так вам будет легче. Ну а как научимся — будем совершенствовать наши знания — выучим XHTML (новый, более строгий вариант HTML, но произошедший не от HTML а от XML) и CSS (каскадные таблицы стилей — используются для описания оформления документов — потом поймёте о чём я).

Теги и атрибуты

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

Теги в HTML не чувствительны к регистру. Их можно набирать хоть большими, хоть маленькими символами — значения это не имеет. Но лучше я бы советовал вам набирать всё маленькими символами — так вам потом будет легче перейти к изучению более строгого языка — XHTML.

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

Рассмотрим вышесказанное на примере:

[code]<a href="http://pe4.at.ua/" title="Перейти на сайт pe4.at.ua">pe4.at.ua — Главная страница</a>[\code]

На примере вы видите тег для обозначения гиперссылок. Данный тег делится на открывающий <a> и парный ему, закрывающий </a>. Внутри открывающего тега указаны два его атрибута — это href со значением http://pe4.at.ua, что указывает на путь, по которому мы перейдём по нажатию на ссылку; и атрибут title со значением "Перейти на сайт pe4.at.ua", который отображается при наведении курсора на ссылку виде всплывающей подсказки и поясняет нам куда мы перейдём по нажатию на ссылку. Между тегами <a> и </a> находится текст "pe4.at.ua — уроки дизайна" — его мы и увидим на странице виде ссылки (при просмотре в браузере), а теги отображаться не будут.

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

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

Все веб-документы, написанные на языке HTML, имеют следующую структуру:

Тег <html> и парный ему </html> указывает программе просмотра страниц (браузеру) что это HTML-документ.

Документ делится на две основные части — голову и тело документа, которые обозначаются тегами <head></head> и <body></body> соответственно.

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

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

Простейшая страница

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

В данном примере для создания голубого фона страницы используется атрибут bgcolor тега <body>. Значение этого атрибута: f0ffff — это шестнадцатеричный код выбранного нами цвета.

Попробуйте набрать этот текст в текстовом редакторе, сохраните в файле с расширением .html и попробуйте открыть в браузере. Получилось? Да? Ну тогда идём дальше...

Теги физического форматирования

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

Вот примеры самых распространённых тегов данной категории:

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

Давайте применим эти теги на нашей странице:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://pe4.at.ua/" title="Нажмите для перехода на сайт pe4.at.ua">этой ссылке</a>. 
На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст: 
Этот текст будет жирным, этот наклонным шрифтом, а этот текст будет подчёркнут. 
Теги можно вкладывать друг в друга следующим образом: 
Этот текст жирный, это текст кроме того ещё и наклонный, ну а весь текст ещё и одновременно подчёркнут.
</body>
</html>

Как вы заметили на примере, теги можно вкладывать друг в друга. Также в данном примере вы заметили тег — это тег переноса строки, о нём я расскажу чуть-чуть ниже.

Так же к группе физического форматирования текста относятся теги:

— определяет для текста выводимый шрифт, его цвет и размер. Размер может иметь значения от 1 до 7. По умолчанию он равен 3.
— этот тег служит для перевода строки (он нужен потому, что то, что вы в текстовом редакторе переведёте текст на новую строку, никак не отобразится при просмотре в браузере). Тег не имеет парного закрывающего тега.
<hr> — служит для добавления в документ горизонтальной линии. Перед и после линии помещается пустая строка. Как и тег , у тега <hr> парного закрывающего тега нету.
— данный тег служит для создания параграфов.

Есть и другие, но пока мы их трогать не будем...

Давайте рассмотрим влияние этих тегов на примере:

<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://pe4.at.ua/" title="Нажмите для перехода на сайт pe4.at.ua">этой ссылке</a>.<hr>
На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст. 
Текст ниже будет находится в новом параграфе:
Этот текст будет жирным, этот наклонным шрифтом, а этот текст будет подчёркнут. 
Теги можно вкладывать друг в друга следующим образом: 
Этот текст жирный, это текст кроме того ещё и наклонный, ну а весь текст ещё и одновременно подчёркнут.
А сейчас вы читаете наклонный текст красного цвета, набранный более крупным шрифтом...
</body>
</html>

Думаю, тут всё понятно, поэтому можем двигаться дальше.

Картинки на странице

Неплохо бы добавить на нашу страничку какую-нибудь картинку, например в качестве логотипа или "шапки" сайта.

Для вставки изображений используется тег <img>, который не имеет закрывающего тега.

Тег <img> имеет следующие часто используемые атрибуты:

src — обязательный атрибут, указывает на путь к рисунку (URL).
alt — альтернативный текст. Отображается на месте рисунка в том случае, если отключены картинки, или картинка ещё не загрузилась или её файл отсутствует. Рекомендуется прописывать данный атрибут для каждого изображения, или, в противном случае, назначать ему пустое значение (alt=" " ).
border — толщина рамки вокруг изображения, измеряется в пикселях. По умолчанию рамка отсутствует.
width — ширина изображения в пикселях или в процентах. Этот атрибут не так важен, но его лучше указать — это ускорит загрузку страницы, т.к. браузеру уже не нужно будет его вычислять.
height — высота изображения. Смысл такой же как и у ширины.
align — выравнивание изображения относительно одной из сторон документа. Может иметь значения: left (по левому краю), right (по правому краю), center (по центру по горизонтали), top (по верхнему краю), bottom (по нижнему краю) и middle (по середине по вертикали).
hspace — данный параметр позволяет изменить отступ справа и слева от картинки.
vspace — тоже, но сверху и снизу.

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

<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
<a href="http://pe4.at.ua/" title="Перейти на главную страницу"><img src="http://pe4.at.ua/-6.jpg" alt="pe4.at.ua — уроки дизайна. Но этот текст вы увидите, если отключите отображение картинок."></a> 
Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://pe4.at.ua/" title="Нажмите для перехода на сайт pe4.at.ua">этой ссылке</a>.<hr>
<img src="http://pe4.at.ua/gg.gif" alt="А это пример изображения в тексте" align="left">На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст. 
Текст ниже будет находится в новом параграфе:
Этот текст будет жирным, этот наклонным шрифтом, а этот текст будет подчёркнут. 
Теги можно вкладывать друг в друга следующим образом: 
Этот текст жирный, это текст кроме того ещё и наклонный, ну а весь текст ещё и одновременно подчёркнут.
А сейчас вы читаете наклонный текст красного цвета, набранный более крупным шрифтом...
</body>
</html>

Картинка временно отсутствует. Но вы можете её посмотреть установив у себя на сайте.

Надеюсь, что у вас всё получилось.

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

Так же стоит упомянуть тег <center></center> — данный тег применяется для выравнивания любого элемента по середине страницы. Можно использовать, например, в том случае, когда атрибут align="center" нам не помогает добиться желаемого результата.

Ну вот мы и рассмотрели самые важные теги форматирования текста. Если я упустил какой-то важный тег, тогда я расскажу о нём как только мы с ним столкнемся.

Таблицы

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

Для создания таблицы служит тег <table></table>. Чтобы мы смогли увидеть границы таблицы есть у этого тега атрибут border, величина которого измеряется в пикселях.

Для того, чтобы разбить таблицу на строки, служит тег <tr></tr>.

Чтобы разбить строки на ячейки (именно строки — не разбив таблицу на строки мы не сможем разбить её на ячейки) есть тег <td></td>.

Для указания заголовка таблицы служит тег <th></th> — он работает таким же образом, как и <td></td>, но текст в заголовке по умолчанию выделяется жирным шрифтом и выравнивается по центру. И кроме видимых различий данный тег (<th></th>) производит логическую разметку таблицы (это нужно поисковикам).

Рассмотрим вышесказанное на примере — создадим простейшую таблицу из четырёх строк и двух столбцов:

<table border="1">
<tr><th>Название сайта</th><th>Комментарий</th></tr>
<tr><td>DesignArts.ru</td><td>сайт о дизайне, уроки дизайна</td></tr>
<tr><td>Inter-Pol.info</td><td>всё самое ИНТЕРесное и ПОЛезное</td></tr>
<tr><td>forum.Inter-Pol.info</td><td>форум — тут можно с пользой провести время</td></tr>
</table>

Вы наверное заметили, что рамка получилась всё же толще, чем 1 пиксель. Сейчас объясню почему это произошло:

У таблицы ещё есть такой атрибут, как cellspacing — расстояние между соседними ячейками.

Также можно указать расстояния между ячейками и их содержанием — с помощью атрибута cellpadding.

Таблице и её столбцам (ячейкам) можно задавать такие атрибуты, как ширину (width) и высоту (height) в пикселях или процентах, цвет фона (bgcolor). У строки нету атрибута ширины — строка — она шириной на всю таблицу.

Сейчас я вам это покажу на примере:

<table border="1" cellspacing="0" cellpadding="5" width="600" bgcolor="fff8dc">
<tr height="45" bgcolor="ffc000"><th width="35%">Название сайта</th><th>Комментарий</th></tr>
<tr><td>DesignArts.ru</td><td>сайт о дизайне, уроки дизайна</td></tr>
<tr><td>Inter-Pol.info</td><td>всё самое ИНТЕРесное и ПОЛезное</td></tr>
<tr><td>forum.Inter-Pol.info</td><td>форум — тут можно с пользой провести время</td></tr>
</table>

Тут я сделал фон всей таблицы немного желтоватый, а фон верхней строки (заголовка) оранжевым. Задал ширину таблицы в 600 пикселей. Высоту строки с заголовком сделал равной 45 пикселей, ширину первого столбца — 35% от ширины таблицы. Ширину второго столбца задавать не обязательно — она автоматически вычисляется браузером зная ширину таблицы и первого столбца.

Допустим, что нам нужно объединить ячейки — по горизонтали или по вертикали. Для этого есть специальные атрибуты: colspan (объединение по горизонтали) и rowspan (объединение ячеек по вертикали):

Возьмём такую таблицу:

Теперь объединим ячейки следующим образом:

Как видите — у нас появились лишние ячейки, которые "выползли" за таблицу. Это ячейки 3, 6, 8, 9 — их просто можно удалить.

Окончательный вариант таблицы будет выглядеть следующим образом:

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

Часть 2. Скоро продолжение!!!!!!

Прикрепления: Картинка 1 · Картинка 2 · Картинка 3 · Картинка 4 · Картинка 5 · Картинка 6 · Картинка 7 · Картинка 8

Просмотров: 1030 | Добавил: Daz | Рейтинг: 0.0/0 |