#Урок 2. Изучение тегов HTML

Учим теги.

Дорогие друзья. Данный урок будет ооочень коротким, а все потому, что от меня здесь мало что требуется, вся работа будет на Вас! :) Но работа будет полезной. И так начнем:

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

Основные теги.

<html></html>

Определяет начало и конец документа

<head></head>

Контейнер для информации предназначенной браузеру и невидимой для пользователей

(является так сказать головой документа head — с англ. Голова)

<body></body>

Между этих тегов находится вся видимая часть сайта (тексты, картинки, видео, музыка, формы, модули и т.д.)

(Является телом документа body — с англ. Тело)

Теги оглавления

<title></title>

Между ними находится название/заголовок документа

Значения (атрибуты) тега < body >

<body bgcolor=?>

Назначает цвет фона страницы, например используя значение цвета в стандарте RGB — FFFF00 — желтый цвет.

<body text=?> Назначает цвет текста страницы, используя значение цвета все в том же стандарте RGB — пример: 00ff00 — зеленый цвет.
<body link=?>

Назначает цвет текста ссылок, например: #0000FF — синий цвет.

<body vlink=?>

Назначает цвет ссылок, по которым вы уже переходили, например: #800080 — фиолетовый.

<body alink=?>

Назначает цвет ссылок при клике на них.

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

<pre></pre>
 Берет в рамку 
                                  отформатированный текст. (как есть!)
<h1></h1>

САМЫЙ БОЛЬШОЙ ЗАГОЛОВОК

(С НОВОЙ СТРОКИ)

<h6></h6>

самый маленький заголовок (с новой строки)

значения таких тегов прописываются от 1 до 6: <h1></h1> <h2></h2>...<h6></h6>

<b></b>

жирный текст

<i></i> Курсив
<tt></tt> Текст в стиле печатной машинки.
<cite></cite>

Используется для цитат, обычно наклонный текст.

<em></em>

Используют для выделения из текста слова (курсив или жирный текст)

<font size=?></font>

Назначает размер текста от 1 до 7.

<font color=?></font>

Назначает цвет текста, используя формат цвета RRGGBB.

Ссылки.

<a href=»URL»>ТЕКСТ</a>

Создает гиперссылку на другие страницы или часть текущей. Здесь URL — это адрес ссылки, ТЕКСТ — текст ссылки.

<a href=»URL»>
< img src=»imgURL» > </a>

Создает гиперссылку на изображение, находящееся по адресу imgURL.

«URL» = «links/main.htm»

Адрес файла main.htm, расположенного в локальной папке links данного компьютера или сервера (хостинга)

«URL» =
«http://www.yandex.ru»

Ссылка на сайт, находящийся на удаленном компьютере. В адресе присутствуют: программа связи с удаленным компьютером http (HyperText Transfer Protocol, разделители :// и интернет (IP) адрес искомого ресурса в данном примере Яндекса

<a href="mailto:EMAIL">
</a>

Создает гиперссылку вызова почтовой программы для написания письма по указанному адресу.

<a name="NAME"></a>

Отмечает часть текста как место перехода по гипперссылке в документе.

<a href="#NAME"></a>

Создает гиперссылку на выделенную часть текущего документа.

Форматирование текста

<p>

Новая строка

<p align=?>

Выравнивание текста по одной из сторон страницы, принимает следующие значения: left, right, justify или center

<br>

Обрыв строки. Т.е. писали текст писали, написали тег <br>

                                      и все, он продолжается с новой строки

<blockquote>
</blockquote>

Отступы с обеих сторон текста.

<dl></dl>
Создать описание (определение).

Сайт<dt>
Как гласит Матушка-Википедия: совокупность логически связанных между собой веб-страниц; также место расположения контента сервера <dd>
<dt>

Определяет каждый термин списка

<dd>

Описание к каждому определению

<ol></ol>

Нумерованный список:

  1. один
  2. два
  3. три
<li></li>

Строка в нумерованном списке. Определяет каждый элемент списка и присваивает номер

<ul></ul>

Создает ненумерованный список

<li>

Предваряет каждый элемент списка (<ul></ul>) и добавляет маркер

<div align=?>

Используется для форматирования больших блоков текста. Часто используют в таблицах стилей (css)

Работа с изображениями и графикой.

<img src="name">

Вставить изображение на страницу. Где name — путь к файлу, например: <img src=»mysite/image/image.jpg»>

<img src="name" align=?>

Выравнивание изображения по одной из сторон страницы, принимает следующие значения: left, right, center; bottom, top, middle

<img src="name" border=?>

Установить толщину рамки вокруг изображения

<hr>

Добавить разделительную горизонтальную линию.

<hr size=?>

Устанавливает высоту(толщину) линии

<hr width=?>

Устанавливает ширину линии, указывать либо в пикселях либо в процентах.

<hr noshade>

Создает линию без тени.

<hr color=?>

Задает линии определенный цвет. В формате RRGGBB.

Работа с таблицами

<table></table>

Создать таблицу.

<tr></tr>

Создать строку в таблице.

<td></td>

Создать отдельную ячейку в таблице.

<th></th>

Создать заголовок таблицы

Атрибуты (значения) таблиц.

<table border=#>

Определить толщину рамки таблицы

<table cellspacing=#>

Задать расстояние между ячейками в таблице.

<table cellpadding=#>

Задать расстояние между содержимым ячейки и ее рамкой.

<table width=#>

Установить ширину таблицы в пикселях или процентах.

<tr align=?> или <td align=?>

Выравнивание ячеек в таблице. Значения: left, center, или right.

<tr valign=?> или <td valign=?>

Установить вертикальное выравнивание ячеек в таблице, значения : top, middle и bottom.

<td colspan=#>

Указать количество столбцов, которое объединено в одной ячейке. (по умолчанию будет 1)

<td rowspan=#>

Указать количество строк которое объединено в одной ячейке. (по умолчанию будет 1)

<td nowrap>

Не позволяет программе просмотра делать перевод строки в ячейке таблицы.

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

Код который прописываем в файле html

То что видим в браузере

&#32;
&#33;
&#34;
&#35;
&#36;
&#37;
&#38;
&#60;
&#61;
&#62;
&#169;
&#171;
&#177;
&#185;
&#187;
&#197;
&nbsp;
&lt;
&gt;
&quot;
пробел
!
»
#
$
%
&
<
=
>
©
«
±
¹
»
Å
Неразрывный пробел
<
>
»

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

Комментарии закрыты.