Четверг, 03 Мая 2012 11:18

Верстка сайта. Урок 2. Введение в HTML, основные теги.

Written by 
Оцени эту запись
(1 Голос)

План урока:

  • Таблицы <table>
  • Списки <ul>, <ol>
  • Ссылки <a>
  • Картинки <img>
  • Блоки <div>
  • Строчные элементы для стилизации текста <span>, <b>, <i>, <u>

 

 

 

1. Таблицы <table>

Для отрисовки таблицы в html-документе, нужно прописывать ее определенными тегами. 

<table>

<tr>

<td></td>

<td></td>

</tr>

</table>

 

Здесь тег <table> указывает на начало таблицы, соответственно, </table> - конец таблицы. Теги <tr></tr> определяют начало и конец строки талибы, <td></td> - ячейка таблицы.

 

Для того, чтобы сделать таблицу из трех строк по две ячейки в каждой, нужно прописать такую структуру:

 

 

<table>

<tr>

<td>1</td>

<td>2</td>

</tr>

<tr>

 

<td>3</td>

<td>4</td>

</tr>

<tr>

 

<td>5</td>

<td>6</td>

</tr>

</table>

 

Получим такую картинку:

 

1 2
3 4
5 6

 

Часто бывает так, что некоторые ячейки таблицы нужно объединить - по вертикали и горизонтали. Для этого ячейке <td> нужно добавить атрибут rowspan="" и colspan="" соответственно. У них в скобках нужно прописать количество ячеек, которые мы объединяем. 

 

1
2 3
4

 

В примере ячейке 1 задано colspan="2", а ячейке 2 - rowspan="2". Если какую-то из ячеек занимает одно из объединений, ее писать не нужно. Код этой таблички выглядит так:

 

 

<table>
<tbody>
<tr>
<td colspan="2">1</td>
</tr>
<tr>
<td rowspan="2">2</td>
<td>3</td>
</tr>
<tr>
<td>4</td>
</tr>
</tbody>
</table>
 
Иногда нужно объединить сразу 4 ячейки - горизонтально и вертикально. Тогда прописываются оба эти атрибута:

 

 

<table>
<tbody>
<tr>
<td colspan="2" rowspan="2">1</td><td>2</td>
</tr>
<tr>
<td>3</td>
</tr>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
 
 
1 2
3
4 5 6

 

 

2. Списки <ul>, <ol>

Списки бывают нумерованными и ненумерованными. Первые задаются тегом <ul>, вторые - <ol>. Элементы списка задаются тегом <li>.

 

Примеры:

 

<ul style="list-style-type: square;">

<li>Element 1</li>

<li>Element 2</li>

<li>Element 3</li>

<li>Element 4</li>

<li>Element 5</li>

</ul>

 

 

<ol style="list-style-type: decimal;">

<li>Element 1</li>

<li>Element 2</li>

<li>Element 3</li>

<li>Element 4</li>

<li>Element 5</li>

</ol>

 

Выглядят они так:

 

  • Element 1
  • Element 2
  • Element 3
  • Element 4
  • Element 5

 

 

  1. Element 1
  2. Element 2
  3. Element 3
  4. Element 4
  5. Element 5

 

Квадратик перед элементами первого списка и цифры перед элементами второго - это маркеры списка. Прописываются они таким образом -

 

<ul style="list-style-type: square;">

 

Для ненумерованного списка они могут быть квадратные(square), круглые(disc), круглые пустые(circle).

Для нумерованного списка виды маркером могут быть decimal(1, 2, 3...), lower-alpha (a, b, c...), upper-alpha (A, B, C...), upper-roman (I, II, III...) и т.д.

 

 

3. Ссылки <a>

 

Ссылки задаются тегом <a>.

Например, 

Верстка сайта. Урок 2. Введение в HTML, основные теги. - ссылка на эту статью, прописывается так

<a href="http://kate-land.net/html-css/item/44-html-first-steps-2">Верстка сайта. Урок 2. Введение в HTML, основные теги.</a></p>

 

У ссылки есть основные атрибуты:

 

  • href="/"
  • title=""
  • target=""

 

Href="" - указывает куда приведет ссылка при клике на нее.

Title="" - заголовок ссылки или ее описание. Этот атрибут нужен для того, чтобы точно показать пользователю куда он попадет, нажав на ссылку.  

Target="" - назначание. Если атрибуту задано значение _blank, ссылка откроется в новом окне.

 

 

4. Картинки <img>

 

Картинку на html-странице нужно задавать тегом <img>:

 

 

У этого тега основные атрибуты такие:

 

  • src="/"
  • alt=""
  • width=""
  • height=""

 

Src="" - указывает путь к картинке

Alt="" - название картинки. Это название не отображается на странице. Оно нужно в друх случаях - если у пользователя в браузере картинки отключены (выводится вместо нее) и для индексации картинки поисковыми системами. 

Width="" и height="" - задает соответственно ширину и высоту картинки. Если их не указать атрибутами или в css-стилях, картинка будет выводиться своего размера.

 

 

5. Блоки <div>

 

Тег <div> - это универсальный блок. По умолчанию, его ширина равна 100%, а высота зависит от содержимого. Данный элемент является блочным - начинается с новой строки и перемещает элемент, идущий за ним, на новую строку. Например, нашу картинку положим в блок, которому зададим фон красного цвета и отступ от картинки 10 пикселей:

 

 

<div style="background: #f00; padding: 10px; width: 200px;">
<img src="http://kate-land.net/media/demos/slider_gallery2/images/demo2_slide3.png" width="200" />
</div>

 

 

 

6. Строчные элементы для стилизации текста <span>, <b>, <i>, <u>

 

Строчные элементы начинаются в той же строке и не переводят строку после себя. Тег <span> - универсальный тег для стилизации кусочка текста, ему можно задавать любые стили. Тег <b> делает текст внутри себя жирным, тег <i> - курсовом, а тег <u> - задает подчеркивание текста.

 

В данной статье мы изучаем основные строчные и блочные теги, которые необходимы для создания html-страницы.

 

В <span style="color: #f00;">данной статье</span> мы изучаем основные <b>строчные</b> и <b>блочные теги</b>, которые <i>необходимы</i> для создания <u>html-страницы</u>

Additional Info

You have no rights to post comments

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов