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

Это трудно?

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

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

Какая разница между <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 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>

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

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

Разумеется. Например, атрибут 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>

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

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

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

Пример 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. Но об этом позже.

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

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

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

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

Пример 1:

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

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

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

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

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

• GIF (Graphics Interchange Format)
• JPG / JPEG (Joint Photographic Experts Group)
• PNG (Portable Network Graphics)

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

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

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

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

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

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

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

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

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

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

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

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

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

Пример 2:

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

Пример 3:

           <img src="http://www.html.net/logo.png">

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

Пример 4:

           <a href="http://www.html.net">
           <img src="logo.png"></a>

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

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

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

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

Пример 5:

           <img src="logo.gif" alt="HTML.net logo">

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

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

Пример 6:

           <img src="logo.gif" title="Learn HTML from HTML.net">

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

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

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

Пример 7:

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

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

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

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

Пример 8:

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

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

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

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

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

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

Что необходимо для создания ссылки?

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

Пример 1:

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

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

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

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

Как насчёт ссылок между моими собственными страницами?

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

Пример 2:

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

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

Пример 3:

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

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

Пример 4:

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

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

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

А ссылки внутри страницы?

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

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

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

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

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

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

Пример 5:

           <html>
  
             <head>
             </head>

             <body>

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

               <h1 id="heading1">heading 1</h1>
               <p>Text text text text</p>

               <h1 id="heading2">heading 2</h1>
               <p>Text text text text</p>
  
             </body>

           </html>

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

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

Могу я перейти ещё куда-нибудь?

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

Пример 6:

           Ссылка на <a href="mailto:nobody@html.net">Отправить e-mail nobody на HTML.net</a>

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

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

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

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

Пример 7:

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

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

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

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

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

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

Вы уже сделали несколько страниц ? Если нет, вот пример:

           <html>

             <head>
             <title>My web-сайт</title>
             </head>

             <body>
             <h1>A Heading</h1>
             <p>text, text text, text</p>
             <h2>Subhead</h2>
             <p>text, text text, text</p>
             </body>
  
           </html>

Теперь что?

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

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

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

Фи! И это всё?

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

           <i>Italic</i>
           <small>Уменьшенный шрифт</small>
           <br /> перевод строки
           <hr /> Горизонтальная линия
           <ul>Список</ul>
           <ol>Упорядоченный список</ol>
           <li>Элемент списка</li>

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

После полученных в предыдущем уроке знаний вы уже через несколько минут создадите свой первый web-сайт.

Как?

В Уроке 1 мы узнали, что необходимо для создания web-сайта: браузер и Notepad (или аналогичная программа - текстовый редактор). Поскольку вы читаете этот текст, то ваш браузер уже открыт. Вам нужно открыть лишь дополнительное окно браузера (открыть браузер ещё раз), и вы сможете читать этот учебник и одновременно видеть ваш новый web-сайт.

Также откройте Notepad (в Accessories в Programs - Start menu):

Теперь мы готовы!

Что я могу?

Начнём с чего-нибудь попроще. Как насчёт страницы, на которой написано: "Ура! Это моя первая web-страница." Читайте дальше, и вы узнаете, как это легко сделать.

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

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

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

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

Ваш документ теперь должен выглядеть так:

           <html>
             <head>
             </head>

             <body>
             </body>

           </html>

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

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

Ну ладно, но как мне добавить содержимое в мой web-сайт?

Как вы уже видели ранее, в вашем HTML-документе есть две части: а head и body. В разделе head вы вносите информацию о странице, а body содержит информацию самой страницы.

Например, если вы хотите дать название документу, чтобы оно появлялось в верхней строке браузера, это нужно сделать в разделе "head". Тэг для названия - <title>:

           <title>Моя первая web-страница</title>

Обратите внимание, что этот title не появляется на самой web-странице. Всё, что вы хотите видеть на самой странице, является содержимым/content и должно, следовательно, находиться между тэгами "body".

Итак, мы хотим, чтобы на странице выводилось "Ура! Это моя первая страница." Этот текст, который вы хотите показать, и, естественно, он должен располагаться в разделе body. Поэтому в разделе body напечатайте следующее:

           <p>Ура! Это моя первая страница.</p>

Буква p в <p> это сокращение от "paragraph" и означает именно это - параграф текста.

Ваш HTML-документ должен теперь иметь такой вид:

           <html>

             <head>
             <title>My first page </title>
             </head>

             <body>
             <p>Hurrah! This is my first page.</p>
             </body>

           </html>

Готово! Вы создали свой первый настоящий web-сайт!

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

• В Notepad выберите "Save as..." в меню "File".
• Выберите "All Files" в боксе "Save as type". Это очень важно - иначе вы сохраните файл как обычный текстовый документ, а не как HTML-документ.
• Теперь сохраните ваш документ как "page1.htm" (расширение ".htm" указывает, что это HTML-документ. ".html" даст тот же результат. Я всегда использую ".htm", но вы можете выбрать любое из этих двух расширений). Где вы сохраните документ на жёстком диске - не имеет значения, главное запомнить это место, чтобы потом легко найти файлы.

Теперь откроем браузер:

• Выберите "Open" в меню "File".
• Щёлкните "Browse" в появившемся диалоге.
• Теперь найдите ваш HTML-документ и щёлкните "Open".

Теперь вы должны увидеть страницу с текстом "Ура! Это моя первая страница." в вашем браузере. Поздравляем!

Что такое HTML-тэги?

Теперь вы готовы начать изучение HTML-тэгов.

"Тэги"?

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

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

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

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

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

HTML - это тэги, и ничего кроме тэгов. Для изучения HTML нужно изучить различные тэги.

Можете вы привести какие-нибудь примеры?

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

Пример 1:

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

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

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

Пример 2:

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

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

В каком регистре должны вводиться буквы тэгов?

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

Где размещать все эти тэги?

Вы печатаете ваши тэги в HTML-документе. На web-сайте имеется один или более HTML-документов. Когда вы бродите по Web, вы открываете различные HTML-документы.

Таблица цветов HTML

Существуют несколько основных способов представления цветов в вебе.

1. В виде #123ABC. Представление в виде 6 шестнадцатеричных цифр, каждые 2 из которых отвечают за свой цвет, 12 — красный, 3А — зелёный, ВС — синий. Возможно также краткое представление цвета в виде #ABC, что будет интерпретировано как #AABBCC.
2. Представление ключевыми словами, например green, black. Во избежание случаев, когда указанное ключевое слово «не понимается» браузером следует использовать лишь небольшой набор основных цветов, используемых во всех браузерах.
3. В виде rgb (*,*,*), где «*» — числа от 0 до 255, обозначающих количество соответствующего цвета (красный, зелёный, синий) в получаемом.
   

Вы хотите добавить эффект градиента для заголовков на страницах вашего сайта, но не хотите заморачиваться с Photoshop’ом? Ну тогда данная статья для Вас.

Один читатель обратился с такой проблемой: он захотел сделать таблицу с плоской однотонной рамкой, но получил не совсем то, чего хотел. Естественно, он использовал вот такую тривиальную конструкцию:

<TABLE border=1 bordercolor="#C0C0C0"
 bordercolorlight="#C0C0C0" bordercolordark="#C0C0C0">
<!-- везде указывается какой-то один цвет -->

Возникли две проблемы: во-первых, ни в NetscapeNavigator, ни в InternetExplorer нельзя таким образом сделать рамку толщиной в 1 пиксель - при указании параметра BORDER равным 1 создается рамка толщиной 2 пикселя; во-вторых, в Нетскейпе даже таким хитрым способом нельзя избавиться от "рельефа" рамки.

Недавно гражданин И. спросил нас о том, как заставить браузер пользователя загружать ту или иную версию страницы в зависимости от того, какое установлено экранное разрешение у этого пользователя. Пробуем ответить...

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

Если Вам приходилось размещать на страничках какие-либо диаграммы, то Вы меня поймете...

Для тех, кто пока не испытал такого кайфа, объясню.

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

Предположим, ваш сайт посвящен компьютерам, и вы хотите положить туда свежую статейку о новом супер-модеме, которую вам вчера принесли (или вы ее сами написали) в формате Word (только не говорите, что вы всегда используете Notepad). В этой вашей статейке есть серьезное описание, пара таблиц и диаграмма. Деваться некуда, в HTML конвертируем Word'ом, получаем текст HTML, который после чистки весит 20K, и диаграммку в виде GIF'а, который весит 60K. Итого 80K. Одну четверть клиент платит за содержательную статью, три четверти - за удовольствие созерцать одну диаграмму.

1.Сделай слайд-шоу
2.Сделать видео слайд-шоу
3.Сжать видео для сети.
4.Коды цвета для текстов
5.Сделай для блога кнопку.
6.Как сделать баннер-картинку для блога.
7.Как сделать рамочку для текста самому.
8.Создать фото прикол онлайн.
9.Сделать флеш-часы для блога.
10.Сделать текст с прокруткой.

Рамочки для текстов без картинок:
1.Рамочки для текстов 1
2.Рамочки для текстов 2

Рамочки для текстов с картинками:
1.Рамочки для текстов 3
2.Рамочки для текстов 4
3.Рамочки для текстов 5
4.Рамочки для текстов 6
5.Рамочки для текстов 7 (бабочки)
6.Рамочки для текстов - Адрес Детство
7.Рамочки для текстов 9 (Мачо)
8.Рамочки для текстов 10 (Букет невесты)
9.Рамочки для текстов 11 (Природа)
10.Рамочки для текстов 12 ( Он и Она )
11.Рамочки для текстов (Любовь)
12.Рамочки для текстов (Сердечки)
13.Рамочки для текстов (Котята)
14.Рамочки для текстов (Природа - 2)
15.Рамочки для текстов (Весна)
16.Рамочки для текстов (Подводный мир)
17.Рамочки для текстов (Ночь над городом)
18.Рамочки для текстов ( Он и Она -2 )
19.Рамочки для текста (любовь)
20.Рамочки для текстов (Нежность)
21.Рамочки для текстов (Отдых, море, пляж).
22.Рамочки для текстов (Полевые цветы)

Эпиграфы:
Эпиграфы для блога
Эпиграфы для блога 2
Эпиграфы или просто хорошие изречения.
Эпиграфы или просто хорошие изречения - 2

Картинки:
1.Цветы для Вас!
2.Цветы для Вас!-2
3.Цветы для Вас!-3
4.Улыбнись с Микки Маусом )
5.Скажи СПАСИБО - красиво)
6.Скажи СПАСИБО - красиво) - 2
7.Скажи СПАСИБО - красиво) - 3
8.Пятница в картинках )
9.Спокойной ночи в картинках)
10.С добрым утром в картинках)
11.Смайлик + мультик = хорошее настроение)
12.Смайлик + мультик = хорошее настроение) - 2
13.Смайлик + мультик = хорошее настроение) - 3
14.Щенки и котята (анимация)
15.Привет в картинках)
16.Сердечки (анимашки) 2
17.Сердечки (анимашки)
18.Блеск для Ваших постов)
19.Блеск для Ваших постов -2)
20.Блеск для Ваших постов) 3
21.Малыш Купидон (картинки)
22.С днём рождения в картинках!
23.Пчёлки в картинках)
24.Мишки для Вас)))

Делаю подборку прог, которыми пользуюсь. Если кому понравится что-нибудь из этого списка - берите :))) Совсем не жалко

Самая последняя на сегодняшний день версия активатора для Windows 7. Метод от Daz
Изменения в версии 1.6.4:
* Fixed a missing serial issue when run as a standalone
* Added checking to elevate to an administrator only when run on Vista or Windows 7
* Corrected a typo found during an uninstall
Размер: 2.08 Mb
ОС: Windows 7
Интерфейс: English
Таблэтка: ненужна
Скачать|Download Windows 7 Loader Version 1.6.4 (x86/x64/by Daz)

Turbobit.net
Depositfiles.com

 

Здесь вам будут платить за написание рекламных постов. Ставьте ссылку. И получаете за это деньги. Совсем не сложно.
1. Зарегистрируйтесь по этой ссылке - http://blogun.**ru/burningffaje.html (звездочки сотрите)
Регистрация простая и быстрая. Логин, пароль, адрес дневника, e-mail, имя-фамилия.

2. Напишите у себя в дневнике о сервисе блогун (можете просто скопировать этот пост) и разместите в этом посте не видимый счётчик, код которой вам дадут. Через сутки дневник автоматически активируется в системе. Вы можете начинать.

3. Откройте на сайте закладку "Предложения" и выберите то, что вам приглянулось. Нажав на кнопочку "подробности" вы сможете подробнее прочитать, чего от вас надобно.

4. Нажать на кнопочку "отправить заявку".
Обычно, на рассмотрение заявки уходит от нескольких часов, до нескольких дней. Здесь нужно указать цену. Я обычно оставляю рекомендованную, хотя можно её и повысить, если она кажется слишком маленькой.

5. Рекламодатель или соглашается, или предлагает изменить цену, или отказывается (редко). Это нужно смотреть в закладке "заявки".
Если соглашается - то вперёд к пункту 6! Если предлагает изменить цену (в меньшую сторону, конечно), то решаете, устраивает ли она вас - тогда жмёте "согласиться" или "отказаться". Если отказывается - то отправляйте заявку другому.

6. Напишите пост в дневник, удовлетворяющий требованием, отправьте ссылку на пост. И ждите оплаты.
Ссылку на пост нужно вводить в "подробностях" рекламодателя. Оплата обычно поступает в течении двух дней (не считая выходных). Если не приходит - пишете в службу поддержки и они разбираются с этим вопросом.

7. Когда наберутся 5$ - вы сможете перевести их на web-money или яндекс-деньги!