HTML. Урок 2 (теги, таблицы, списки)



п.1. Хороший справочник по HTML можно найти по адресу: http://htmlbook.ru/html

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

<!DOCTYPE>
<!-- -->

<a>
<area>
<article>
<aside>

<body>
<br>
<button>

<canvas>

<datalist>
<div>

<footer>
<frame>
<frameset>


<head>
<header>
<hr>
<html>

<iframe>
<img>
<input>

<li>

<main>
<map>
<meta>
<meter>

<object>
<ol>
<optgroup>
<option>

<p>
<pre>
<progress>

<script>
<section>
<select>
<span>
<source> 

<table>
<td>
<textarea>
<th>
<title>
<tr>

<ul>

<video>

Многие из этих элементов можете никогда в жизни не задействовать. Примерно половина из них - логические элементы, которые нужны только при раскрутке сайта, чтобы поисковики расставляли "вес" разным частям документа: это статья, это новость, это меню и т.д. В противном случае будет привлечение людей по словам, которые находятся в меню или в незначимых участках сайта. А важные слова из статей будут упущены. Обычному сайтописателю хватит еще более сокращенного списка. Он ниже:

<!DOCTYPE>
<!-- -->
<a>
<area>
<body>
<br>
<button>
<div>
<frame>
<frameset>
<head>
<hr>
<html>
<iframe>
<img>
<input>
<li>
<map>
<meta>
<ol>
<optgroup>
<option>
<p>
<pre>
<script>
<select>
<span>
<table>
<td>
<textarea>
<th>
<title>
<tr>
<ul>

Всего 35 команд осталось. Не сильно сложно запомнить их все. 

п.2. Попробуем при помощи этих команд что-нибудь сделать. Для начала нарисуем таблицу. Она начинается тегом "<table>" и заканчивается "</table>". Начало любой строки должно начинаться с тега "<tr>".  Внутри нее мы "нарезаем" ячейки тегом "<td>". Для заголовков есть еще тег  "<th>", который делает текст жирным и выравнивает его по центру. Попробуем сделать таблицу на 4 строки и 3 столбца. Внутри ячеек забьем цифры для наглядности. Ниже код страницы с таблицей.

 

<!DOCTYPE html>

<html>

 

<head>

<title>Наш первый сайт</title>

<meta charset="utf-8">

<meta http-equiv="Content-Typecontent="text/html; charset=UTF-8" />

<meta name="description" content="Сайт с уроками по HTML, ModX, MySQL, PHP">

<meta name="Keywords" content="web, уроки, HTML, ModX, MySQL, PHP">

</head>

 

<body>

<table>

<tr><th>Столбец 1 строка 1<th>Столбец строка 1<th>Столбец 3 строка 1

 

<tr><td>Столбец 1 строка 2<td>Столбец 2  строка 2<td>Столбец 3 строка 2

 

<tr><td>Столбец 1 строка 3<td>Столбец 2  строка 3<td>Столбец 3 строка 3

 

 <tr><td>Столбец 1 строка 4<td>Столбец 2  строка 4<td>Столбец 3 строка 4

  

</table>

</body>

 

 </html>

Сохраняем это в файл 1.html, открываем в браузере и видим что то типа такого:  

Что за фигня? Куда делись линии вокруг ячеек и всей таблицы? По умолчанию, таблица их не отображает. Сейчас открывающий тег мы поправим на "<table border=1>" и увидим, что линии появились. 

Данный способ отображения линий нам нужен только в самом начале, потом все визуальные эффекты разных элементов будем менять уже при помощи CSS. Это примерно уроке на 10 будет.

 п.3. Попробуем добавить списки разных предметов. Для этого используем теги "<ul>", "<li>" и "<ol>". Список открывается тегом "<ul>", если мы хотим, чтобы перед элементами списка были точки. Список открывается тегом "<ol>", если мы хотим, чтобы перед элементами списка были цифры. Каждый элемент списка начинается тегом "<li>", которые собраны внутри "<ul>" или "<ol>". Закрывать тег отдельного элемента "<li>" не обязательно. Ниже пример:

 

<!DOCTYPE html>

<html>

 

<head>

<title>Наш первый сайт</title>

<meta charset="utf-8">

<meta http-equiv="Content-Typecontent="text/html; charset=UTF-8" />

<meta name="description" content="Сайт с уроками по HTML, ModX, MySQL, PHP">

<meta name="Keywords" content="web, уроки, HTML, ModX, MySQL, PHP">

</head>

 

<body>

<table>

<tr><th>Столбец 1 строка 1<th>Столбец 2  строка 1<th>Столбец 3 строка 1

 

<tr><td>Столбец 1 строка 2<td>Столбец 2  строка 2<td>Столбец 3 строка 2

 

<tr><td>Столбец 1 строка 3<td>Столбец 2  строка 3<td>Столбец 3 строка 3

 

 <tr><td>Столбец 1 строка 4<td>Столбец 2  строка 4<td>Столбец 3 строка 4

  

</table>

 

<ul>

<li>Первый элемент

<li>Второй элемент

 <li>Третий элемент

 </ul>

 

<ol>

<li>Первый элемент

<li>Второй элемент

 <li>Третий элемент

 </ol>

 

</body>

 

 </html>

Теперь страница выглядит примерно так:

 

У списков есть дополнительные теги-модификаторы, почитаете о них сами.