Итак, допустим, что мы уже нарисовали все элементы, входящие в дизайн сайта (это могут быть: логотип, кнопки, окошки, меню и другая графика), придумали как это будет выглядеть в сборе, сделали эскиз. Теперь нам нужно всё это как-то собрать, объединить на 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.
Теги при просмотре в браузере мы не видим, они влияют на отображение информации, заключённой между ними.
Рассмотрим вышесказанное на примере:
Код:
<a href="http://designarts.ru/" title="Перейти на сайт DesignArts.ru">DesignArts.ru — уроки дизайна</a>
На примере вы видите тег для обозначения гиперссылок. Данный тег делится на открывающий <a> и парный ему, закрывающий </a>. Внутри открывающего тега указаны два его атрибута — это href со значением
http://designarts.ru, что указывает на путь, по которому мы перейдём по нажатию на ссылку; и атрибут title со значением "Перейти на сайт DesignArts.ru", который отображается при наведении курсора на ссылку виде всплывающей подсказки и поясняет нам куда мы перейдём по нажатию на ссылку. Между тегами <a> и </a> находится текст "DesignArts.ru — уроки дизайна" — его мы и увидим на странице виде ссылки (при просмотре в браузере), а теги отображаться не будут.
Структура HTML документа
Теперь, когда мы знаем что такое теги, мы можем рассмотреть структуру простейшего веб-документа.
Все веб-документы, написанные на языке HTML, имеют следующую структуру:
Код:
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
Тег <html> и парный ему </html> указывает программе просмотра страниц (браузеру) что это HTML-документ.
Документ делится на две основные части — голову и тело документа, которые обозначаются тегами <head></head> и <body></body> соответственно.
Тег <head></head> представляет собой место, где помещается различная информация, не отображаемая в теле документа, т.е. на странице мы её не увидим. В данный тег заключается тег названия (заголовок) документа — <title></title> (отображается в заголовке окна браузера) и так называемые мета-теги, которые используются поисковыми системами (о этих тегах мы поговорим позже).
Тег <body> с закрывающим </body> определяет видимую часть документа. В этот тег заключается вся содержательная часть документа (текст, изображения, формы для заполнения и другие объекты).
Простейшая страница
Давайте создадим простейшую страницу, содержащую текст и ссылку на светло-голубом фоне:
Код:
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href=http://designarts.ru/ title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.
</body>
</html>
В данном примере для создания голубого фона страницы используется атрибут bgcolor тега <body>. Значение этого атрибута: f0ffff — это шестнадцатеричный код выбранного нами цвета.
Попробуйте набрать этот текст в текстовом редакторе, сохраните в файле с расширением .html и попробуйте открыть в браузере. Получилось? Да? Ну тогда идём дальше...
Теги физического форматирования
Теперь нам нужно как-то визуально выделить определённые слова, например жирным шрифтом или наклонным (курсивом). Для этого есть специальные теги, которые образуют группу тегов физического форматирования текста.
Вот примеры самых распространённых тегов данной категории:
Код:
<b></b> — тег, делающий заключённый в него текст жирным.
<i></i> — тег, который создаёт наклонный текст (курсив).
<u></u> — с помощью этого тега текст становится подчёркнутым.
Давайте применим эти теги на нашей странице:
Код:
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://designarts.ru/" title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.<br>
На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст: <br>
<b>Этот текст будет жирным,</b> <i>этот наклонным шрифтом,</i> <u>а этот текст будет подчёркнут.</u><br>
Теги можно вкладывать друг в друга следующим образом: <br>
<u><b>Этот текст жирный, <i>это текст кроме того ещё и наклонный, </i></b> ну а весь текст ещё и одновременно подчёркнут.</u>
</body>
</html>
Как вы заметили на примере, теги можно вкладывать друг в друга. Также в данном примере вы заметили тег <br> — это тег переноса строки, о нём я расскажу чуть-чуть ниже.
Так же к группе физического форматирования текста относятся теги:
<font></font> — определяет для текста выводимый шрифт, его цвет и размер. Размер может иметь значения от 1 до 7. По умолчанию он равен 3.
<br> — этот тег служит для перевода строки (он нужен потому, что то, что вы в текстовом редакторе переведёте текст на новую строку, никак не отобразится при просмотре в браузере). Тег не имеет парного закрывающего тега.
<hr> — служит для добавления в документ горизонтальной линии. Перед и после линии помещается пустая строка. Как и тег <br>, у тега <hr> парного закрывающего тега нету.
<p></p> — данный тег служит для создания параграфов.
Есть и другие, но пока мы их трогать не будем...
Давайте рассмотрим влияние этих тегов на примере:
Код:
<html>
<head>
<title>Моя первая страница</title>
</head>
<body bgcolor="f0ffff">
<p>Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://designarts.ru/" title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.<hr>
На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст.<br>
Текст ниже будет находится в новом параграфе:</p>
<p><b>Этот текст будет жирным,</b> <i>этот наклонным шрифтом,</i> <u>а этот текст будет подчёркнут.</u><br>
Теги можно вкладывать друг в друга следующим образом: <br>
<u><b>Этот текст жирный, <i>это текст кроме того ещё и наклонный, </i></b> ну а весь текст ещё и одновременно подчёркнут.</u></p>
<p><i><font color="ff0000" size="4">А сейчас вы читаете наклонный текст красного цвета, набранный более крупным шрифтом...</font></i></p>
</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://designarts.ru/" title="Перейти на главную страницу"><img src="logo.jpg" alt="DesignArts.ru — уроки дизайна. Но этот текст вы увидите, если отключите отображение картинок."></a><br>
<p>Это моя первая веб-страница, а чтобы увидеть то, чего я достиг на данный момент, перейдите по <a href="http://designarts.ru/" title="Нажмите для перехода на сайт DesignArts.ru">этой ссылке</a>.<hr>
<img src="simple.jpg" alt="А это пример изображения в тексте" align="left">На этой странице я хотел показать как влияют теги физического форматирования на заключённый в них текст.<br>
Текст ниже будет находится в новом параграфе:</p>
<p><b>Этот текст будет жирным,</b> <i>этот наклонным шрифтом,</i> <u>а этот текст будет подчёркнут.</u><br>
Теги можно вкладывать друг в друга следующим образом: <br>
<u><b>Этот текст жирный, <i>это текст кроме того ещё и наклонный, </i></b> ну а весь текст ещё и одновременно подчёркнут.</u></p>
<p><i><font color="ff0000" size="4">А сейчас вы читаете наклонный текст красного цвета, набранный более крупным шрифтом...</font></i></p>
</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 (объединение ячеек по вертикали):
Возьмём такую таблицу:
Код:
<table border="1" cellpadding="10">
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td>7</td><td>8</td><td>9</td></tr>
</table>
Теперь объединим ячейки следующим образом:
Код:
<table border="1" cellpadding="10">
<tr><td colspan="2">1</td><td rowspan="2">2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td>6</td></tr>
<tr><td colspan="3">7</td><td>8</td><td>9</td></tr>
</table>
Как видите — у нас появились лишние ячейки, которые "выползли" за таблицу. Это ячейки 3, 6, 8, 9 — их просто можно удалить.
Окончательный вариант таблицы будет выглядеть следующим образом:
Код:
<table border="1" cellpadding="10">
<tr><td colspan="2">1</td><td rowspan="2">3</td></tr>
<tr><td>4</td><td>5</td></tr>
<tr><td colspan="3">7</td></tr>
</table>
Так... основы про таблицы я вам рассказал. Помните, я говорил, что таблиц применяются не только для отображения табличных данных, но и для верстки (разметки) страницы. Вот сейчас мы это и рассмотрим...
Верстка страницы с помощью таблиц
Давайте попробуем разметить страницу по стандартному шаблону — сверху шапка сайта, а снизу две колонки — слева меню, справа содержание страницы:
Код:
<html>
<head>
<title>Верстка страницы с помощью таблиц</title>
</head>
<body>
<table width="800" height="100%" border="1">
<tr height="150"><td colspan="2">Логотип</td></tr>
<tr><td width="200">Меню</td><td>Содержание</td></tr>
</table>
</body>
</html>
Теперь приведём в порядок нашу страницу — выровняем таблицу по центру страницы, текст в ячейках выровняем по верхнему краю и по центру. Для выравнивания по вертикали есть атрибут valign, принимающий значения top, middle, bottom (сверху, по середине, снизу):
Код:
<html>
<head>
<title>Верстка страницы с помощью таблиц</title>
</head>
<body>
<table width="800" height="100%" border="1" align="center">
<tr height="150" align="center"><td colspan="2">Логотип</td></tr>
<tr valign="top" align="center"><td width="200">Меню</td><td>Содержание</td></tr>
</table>
</body>
</html>
Шапка сайта
Теперь давайте оформим шапку сайта — вставим туда наш логотип. Это можно сделать двумя способами: можно вставить картинку с помощью соответствующего тега (мы это уже рассмотрели и умеем), а можно назначить в качестве фона ячейки — для этого в теге <td> добавим атрибут background="url", где url — это путь к файлу с рисунком.
Но будет лучше, если наш логотип будет одновременно ссылкой на главную страницу сайта, поэтому придётся применить первый метод — вставим в эту ячейку картинку и сделаем её ссылкой:
Код:
<html>
<head>
<title>Верстка страницы с помощью таблиц</title>
</head>
<body>
<table width="800" height="100%" border="1" align="center">
<tr height="150" align="center"><td colspan="2"><a href="http://designarts.ru/index.html?quot; title="Перейти на главную страницу"><img src="logo.jpg" alt="Логотип сайта DesignArts.ru" border="0"></a></td></tr>
<tr valign="top" align="center"><td width="200">Меню</td><td>Содержание</td></tr>
</table>
</body>
</html>
Простейшую шапку для нашего сайта мы сделали. Теперь давайте попробуем заполнить страницу содержанием. Можно, конечно, просто добавить нужную нам информацию в ячейки "Меню" и "Содержание", а можно сделать получше — сделать окошки, в которых будут меню, новости сайты и т.п.
Меню
Давайте представим как будут выглядеть наши менюшки. Пусть сверху в будет название меню, а ниже его содержание — ссылки на разные страницы.
Для создания окошек для меню будет использовать всё те же таблицы. Вот какое меню сделал я:
Код:
<table border="1" width="180" cellspacing="0">
<tr bgcolor="4682b4" height="20"><th><font color="ffffff" size="1" face="verdana">.:: Название меню ::.</font></th></tr>
<tr><td><font size="1" face="verdana">Содержание</font></td></tr>
</table>
Тут вы наверное заметили в теге font, который управляет свойствами шрифта, новый атрибут, который я вам не объяснил — это атрибут face — он определяет шрифт, которым будет отображен текст, в данном случае это шрифт verdana.
Давайте теперь немного приукрасим наш шаблончик меню — сделаем аккуратный черный бордюр толщиной в 1 пиксель. В HTML нет специального атрибута для изменения цвета бордюров, но это не беда — мы поступим хитрее. Давайте сделает следующее: отключим бордюры (border="0" или просто удалите этот атрибут), затем расстояние между ячейками сделаем равным 1 пикселю (cellspacing="1"), фон таблицы сделаем чёрным, а фон ячейки с содержанием — белым — с помощью атрибута bgcolor:
Код:
<table border="0" width="180" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">.:: Название меню ::.</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">Содержание</font></td></tr>
</table>
Теперь наше меню будет выглядеть куда лучше.
Сейчас его можно заполнить нужными пунктами и вставить на нашу страницу. Вот что у меня получилось:
Код:
<html>
<head>
<title>Верстка страницы с помощью таблиц</title>
</head>
<body>
<table width="800" height="100%" align="center" cellspacing="1" bgcolor="000000">
<tr height="150" align="center" bgcolor="ffffff"><td colspan="2">
<!-- Логотип. Начало. -->
<a href="http://designarts.ru/index.html?quot; title="Перейти на главную страницу"><img src="logo.jpg" alt="Логотип сайта DesignArts.ru" border="0"></a>
<!-- Логотип. Конец. -->
</td></tr>
<tr valign="top" align="center" bgcolor="ffffff"><td width="200">
<!-- Менюшки. Начало. -->
<br>
<table width="180" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">
.:: Навигация ::.
</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Главная страница</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Уроки</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Статьи</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Загрузки</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Форум</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">О нас</a>
</font></td></tr>
</table>
<br>
<table width="180" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">
.:: Избранное ::.
</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<a href="http://designarts.ru" title="Перейти на сайт DesignArts.ru">DesignArts.ru</a><br>
<a href="http://inter-pol.info" title="Перейти на сайт Inter-Pol.info">Inter-Pol.info</a><br>
<a href="http://forum.inter-pol.info" title="Перейти на форум сайта Inter-Pol.info">forum.Inter-Pol.info</a>
</font></td></tr>
</table>
<!-- Менюшки. Конец. -->
</td><td width="600">
<!-- Содержание страницы. Начало. -->
Содержание
<!-- Содержание страницы. Конец. -->
</td></tr>
</table>
</body>
</html>
Тут я кроме всего названного изменил бордюры у таблицы, образующей каркас страницы тем же способом, как мы делали с бордюрами менюшек. Так же я добавил комментарии — для того, чтобы не запутаться, ведь код становится всё длиннее и длиннее (о комментариях я вам рассказывал выше).
Окошки для новостей
Настало время сделать окошки для новостей сайта — мы будем их делать по аналогии с менюшками, только снизу добавим ещё одну строку и окошко сделаем пошире:
Код:
<table border="0" width="550" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">.:: Учим язык HTML | Дата: 2.06.2007 ::.</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<center><img src="simple.jpg" alt="Просто пример картинки..." vspace="7"></center>
Итак, допустим, что мы уже нарисовали все элементы, входящие в дизайн сайта (это могут быть: логотип, кнопки, окошки, меню и другая графика), придумали как это будет выглядеть в сборе, сделали эскиз. Теперь нам нужно всё это как-то собрать, объединить на web-странице. Для этого, для начала, нам понадобятся знания языка HTML, с его мы и начнём.<br><br>
<center>[ <a href="http://designarts.ru/">Подробнее</a> ]</center>
</font></td></tr>
<tr bgcolor="4682b4" height="16"><td><font color="ffffff" size="1" face="verdana">Автор новости: Гуляй С.В.</font></td></tr>
</table>
Готовая страница
Ну а теперь давайте это окошко с новостью добавим на нашу страничку:
Код:
<html>
<head>
<title>Верстка страницы с помощью таблиц</title>
</head>
<body>
<table width="800" height="100%" align="center" cellspacing="1" bgcolor="000000">
<tr height="150" align="center" bgcolor="ffffff"><td colspan="2">
<!-- Логотип. Начало. -->
<a href="http://designarts.ru/index.html?quot; title="Перейти на главную страницу"><img src="logo.jpg" alt="Логотип сайта DesignArts.ru" border="0"></a>
<!-- Логотип. Конец. -->
</td></tr>
<tr valign="top" align="center" bgcolor="ffffff"><td width="200">
<!-- Менюшки. Начало. -->
<br>
<table width="180" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">
.:: Навигация ::.
</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Главная страница</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Уроки</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Статьи</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Загрузки</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">Форум</a><br>
<a href="http://designarts.ru/index.html?quot; title="Главная страница">О нас</a>
</font></td></tr>
</table>
<br>
<table width="180" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">
.:: Избранное ::.
</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<a href="http://designarts.ru" title="Перейти на сайт DesignArts.ru">DesignArts.ru</a><br>
<a href="http://inter-pol.info" title="Перейти на сайт Inter-Pol.info">Inter-Pol.info</a><br>
<a href="http://forum.inter-pol.info" title="Перейти на форум сайта Inter-Pol.info">forum.Inter-Pol.info</a>
</font></td></tr>
</table>
<!-- Менюшки. Конец. -->
</td><td width="600">
<!-- Содержание страницы. Начало. -->
<br>
<h2>Вы на нашей первой странице</h2>
<table border="0" width="550" cellspacing="1" bgcolor="000000" cellpadding="5">
<tr bgcolor="4682b4"><th><font color="ffffff" size="1" face="verdana">.:: Учим язык HTML | Дата: 2.06.2007 ::.</font></th></tr>
<tr><td bgcolor="ffffff"><font size="1" face="verdana">
<center><img src="simple.jpg" alt="Просто пример картинки..." vspace="7"></center>
Итак, допустим, что мы уже нарисовали все элементы, входящие в дизайн сайта (это могут быть: логотип, кнопки, окошки, меню и другая графика), придумали как это будет выглядеть в сборе, сделали эскиз. Теперь нам нужно всё это как-то собрать, объединить на web-странице. Для этого, для начала, нам понадобятся знания языка HTML, с его мы и начнём.<br><br>
<center>[ <a href="http://designarts.ru/">Подробнее</a> ]</center>
</font></td></tr>
<tr bgcolor="4682b4" height="16"><td><font color="ffffff" size="1" face="verdana">Автор новости: Гуляй С.В.</font></td></tr>
</table>
<!-- Содержание страницы. Конец. -->
</td></tr>
</table>
</body>
</html>
Ну вот мы и создали нашу первую простую страничку!
Заключение
Чтобы понять основы языка HTML этого будет достаточно. Тут мы использовали только самые часто употребляемые теги языка HTML 4.01. Если вам понадобится полный список тегов с описаниями, то для этого на нашем сайте есть справочник тегов — его и смотрите. Будет что не понятно — задавайте мне вопросы (на форуме этого сайта).
Что-то очень красивое создать с помощью одного HTML почти невозможно, т.к. по новым стандартом он должен использоваться только для разметки страницы, а не для её оформления. А для оформления сейчас используются каскадные таблицы стилей (CSS) вместе с HTML или XHTML. Именно о CSS мы и поговорим в следующих статьях, я вам расскажу что это такое и как это внедряется на страницу, ну и всё остальное...
.: Дополнительно :.
Скачать текстовый редактор « Notepad++ »
Скачать текстовый редактор « PSPad »
Автор урока: Guljay S.V. aka Serg
Источник:
http://www.designarts.ru/
Вход
Регистрация
FAQ
Поиск
