Базы данныхИнтернетКомпьютерыОперационные системыПрограммированиеСетиСвязьРазное
Поиск по сайту:
Подпишись на рассылку:

Назад в раздел

Краткий учебник по HTML

Всемирная паутина соткана из WEB-страниц (WEB-pages), а эти страницы создаются при помощи языка разметки гипертекста (Hypertext Markup Language, HTML). Хотя многие, особенно новички, говорят сегодня о "Программировании на HTML", HTML — это язык разметки. Вы используете HTML для разметки текстового документа, точно так же, как это делает редактор при помощи жирного красного карандаша. Эти пометки служат для определения формата (или стиля), который будет использован при выводе текста на экран монитора.

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

 

Основы HTML

Перед вами краткое руководство по написанию HTML. Многие до сих пор пишут HTML,А используя средства похожие на Notepad или SimpleText. Данное руководство поможет вам получить начальное представление о HTML. Даже если вы не планировали редактировать HTML напрямую, а использовать HTML-редактор, такой как Netscape Composer или FrontPage, данное руководство поможет вам использовать эти средства лучше, а также делать ваши HTML-документы понятными для большинства браузеров. Почувствовав выгоды, которые дает вам знание основ написания HTML, вы, возможно, захотите освоить материал, размещенный в раздел Продвинутый HTML.

Хороший способ научиться — это посмотреть, как другие люди пишут коды своих HTML-страниц. Для этого выберите в браузере пункт "View" ("Вид"), а затем "Source" ("В виде HTML").

Данная страница научит вас как:

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

Если вы ищете что-то еще, попробуйте Продвинутый HTML

Добавление заголовков и параграфов

Если вы пользовались Microsoft Word, вам должно быть хорошо знакомо использование стилей для выделения заголовков по степени важности. В HTML заголовки по степени важности делятся на шесть уровней. Н1 — самый важный, Н2 — чуть менее важен, и, наконец, Н6 — наименее значимый.

Пример того, как добавить важный заголовок:

<h1>Важный заголовок</h1>

Результат:

Важный заголовок

и чуть менее важный:

<h2>Чуть менее важный</h2>

Результат:

Чуть менее важный

Каждый параграф, который вы напишете должен начинаться тэгом <p> и заканчиваться тэгом </p> . Например:

<p>Это первый параграф.</p> <p>А это второй параграф.</p> Выделение курсивом

Вы можете выделить одно или больше слов, используя тэг <em>, пример:

Это действительно <em>интересный</em> пункт!

Результат:

Это действительно интересный пункт!

Изменение цвета и размера текста

Тэг FONT может быть использован для указания цвета и размера шрифта, которым будет выведен ваш текст. В этом примере устанавливается цвет:

В этом предложении есть <font color="yellow">слово</font> , выделенное желтым цветом.

Результат:

В этом предложении есть слово выделенное желтым цветом.

Атрибут size служит для указания размера шрифта в условных единицах от 1 до 7. Принято считать, что размер "нормального" шрифта соответствует числу 3. Размер может быть указан как абсолютной величиной (SIZE=5), так и относительной (SIZE=+2):

Советы <font size="+2" color="maroon">ветеринарного</font> врача

Результат:

Советы ветеринарного врача

Вставка рисунков

Использование рисунков делает ваши страницы более интересными. Вставить рисунок позволяет тэг <img>. Предположим, что файл рисунка "peter.jpeg", шириной 200 пикселов и высотой 150, лежит в той же папке что и HTML файл.

<img src="peter.jpeg" width="200" height="150"><BR>

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

<img src="peter.jpeg" width="200" height="150" alt="Мой друг Петя">

В WWW используется два формата графических файлов GIF и JPEG. Формат GIF используется, когда требуется прозрачное изображение или анимация, а также для:

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

Формат JPEG больше подходит в следующих случаях:

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

Ссылки обозначаются тэгом <a>. Определим ссылку на страницу определенную в файле "advanced.htm":

Это ссылка на <a href="advanced.htm">Продвинутый HTML</a>.

Результат:

Это ссылка на Продвинутый HTML.

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

Для ссылки на другую Web-страницу нужно указать ее полный Web-адрес (называемый URL), например, для ссылки на http://www.km.ru/ необходимо набрать следующий текст:

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

Вы можете использовать в ссылке картинку. Следующий пример позволяет кликаньем на логотипе компании перейти на ее домашнюю страницу:

<a href="/"><img src="logo.gif" alt="home page"></a> Списки

HTML предлагает три вида списков. Первый вид называется маркированным (неупорядоченным) списком. Маркированный список открывается тэгом <ul>, а каждый его пункт начинается стандартным тэгом <li>, пример:

<ul> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ul>

Результат:

первый пункт списка второй пункт списка третий пункт списка

Второй вид - нумерованный (упорядоченный) список. Он использует тэги <ol> и <li>. Пример:

<ol> <li>первый пункт списка</li> <li>второй пункт списка</li> <li>третий пункт списка</li> </ol>

Результат:

первый пункт списка второй пункт списка третий пункт списка

И последний - это список определений (глоссарий). Он представляет текст в форме словарной статьи, состоящей из определяемого термина и абзаца, раскрывающего его значение, открывается тэгом <dl>. Каждый термин открывается тэгом <dt>, а определение тэгом <dd>. Пример:

<dl> <dt>первый термин</dt> <dd>его определение</dd> <dt>второй термин</dt> <dd>его определение</dd> <dt>третий термин</dt> <dd>его определение</dd> </dl>

Результат:

первый термин
его определение
второй термин
его определение
третий термин
его определение

Списки могут быть вложенными, один в другой. Пример:

<ol> <li>первый пункт списка</li> <li>второй пункт списка <ul> <li>первый пункт вложенного списка</li> <li>второй пункт вложенного списка</li> </ul> </li> <li>третий пункт списка</li> </ol>

Результат:

первый пункт списка второй пункт списка первый пункт вложенного списка второй пункт вложенного списка третий пункт списка Определение цветов в HTML

В HTML цвета определяются цифрами в шестнадцатиричном коде. Цветовая система базируется на трех основных цветах - красном, зеленом и синем. Для каждого цвета задается значение от 00 до FF. Затем эти значения объединяются в одно число, перед которым ставится символ #. Данная таблица демонстрирует различные цвета и их шестнадцатиричный код.

FFF
FFF
CCC
CCC
999
999
666
666
333
333
000
000
FFC
C00
FF9
900
FF6
600
FF3
300
 
99C
C00
  CC9
900
FFC
C33
FFC
C66
FF9
966
FF6
633
CC3
300
  CC0
033
CCF
F00
CCF
F33
333
300
666
600
999
900
CCC
C00
FFF
F00
CC9
933
CC6
633
330
000
660
000
990
000
CC0
000
FF0
000
FF3
366
FF0
033
99F
F00
CCF
F66
99C
C33
666
633
999
933
CCC
C33
FFF
F33
996
600
993
300
663
333
993
333
CC3
333
FF3
333
CC3
366
FF6
699
FF0
066
66F
F00
99F
F66
66C
C33
669
900
999
966
CCC
C66
FFF
F66
996
633
663
300
996
666
CC6
666
FF6
666
990
033
CC3
399
FF6
6CC
FF0
099
33F
F00
66F
F33
339
900
66C
C00
99F
F33
CCC
C99
FFF
F99
CC9
966
CC6
600
CC9
999
FF9
999
FF3
399
CC0
066
990
066
FF3
3CC
FF0
0CC
00C
C00
33C
C00
336
600
669
933
99C
C66
CCF
F99
FFF
FCC
FFC
C99
FF9
933
FFC
CCC
FF9
9CC
CC6
699
993
366
660
033
CC0
099
330
033
33C
C33
66C
C66
00F
F00
33F
F33
66F
F66
99F
F99
CCF
FCC
  CC9
9CC
996
699
993
399
990
099
663
366
660
066
006
600
336
633
009
900
339
933
669
966
99C
C99
  FFC
CFF
FF9
9FF
FF6
6FF
FF3
3FF
FF0
0FF
CC6
6CC
CC3
3CC
003
300
00C
C33
006
633
339
966
66C
C99
99F
FCC
CCF
FFF
339
9FF
99C
CFF
CCC
CFF
CC9
9FF
996
6CC
663
399
330
066
990
0CC
CC0
0CC
00F
F33
33F
F66
009
933
00C
C66
33F
F99
99F
FFF
99C
CCC
006
6CC
669
9CC
999
9FF
999
9CC
993
3FF
660
0CC
660
099
CC3
3FF
CC0
0FF
00F
F66
66F
F99
33C
C66
009
966
66F
FFF
66C
CCC
669
999
003
366
336
699
666
6FF
666
6CC
666
699
330
099
993
3CC
CC6
6FF
990
0FF
00F
F99
66F
FCC
33C
C99
33F
FFF
33C
CCC
339
999
336
666
006
699
003
399
333
3FF
333
3CC
333
399
333
366
663
3CC
996
6FF
660
0FF
00F
FCC
33F
FCC
00F
FFF
00C
CCC
009
999
006
666
003
333
339
9CC
336
6CC
000
0FF
000
0CC
000
099
000
066
000
033
663
3FF
330
0FF
00C
C99
  009
9CC
33C
CFF
66C
CFF
669
9FF
336
6FF
003
3CC
  330
0CC
  00C
CFF
009
9FF
006
6FF
003
3FF
 

Для простоты в HTML определены 16 стандартных цветов, которые вместе с их шестнадцатиричными кодами приведены ниже.

black = "#000000" green = "#008000"
silver = "#C0C0C0" lime = "#00FF00"
gray = "#808080" olive = "#808000"
white = "#FFFFFF" yellow = "#FFFF00"
maroon = "#800000" navy = "#000080"
red = "#FF0000" blue = "#0000FF"
purple = "#800080" teal = "#008080"
fuchsia = "#FF00FF" aqua = "#00FFFF"


  • Главная
  • Новости
  • Новинки
  • Скрипты
  • Форум
  • Ссылки
  • О сайте




  • Emanual.ru – это сайт, посвящённый всем значимым событиям в IT-индустрии: новейшие разработки, уникальные методы и горячие новости! Тонны информации, полезной как для обычных пользователей, так и для самых продвинутых программистов! Интересные обсуждения на актуальные темы и огромная аудитория, которая может быть интересна широкому кругу рекламодателей. У нас вы узнаете всё о компьютерах, базах данных, операционных системах, сетях, инфраструктурах, связях и программированию на популярных языках!
     Copyright © 2001-2024
    Реклама на сайте