Пятница, 20 Апреля 2012 08:22

Верстка сайта. Урок 1. Введение в HTML, основные понятия.

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

Перед вами первая статья из серии обучения верстке сайта при помощи HTML и CSS. Начну с самого, с определений и основных понятий. Итак, начнем серию HTML уроков!

 

 

План урока:

 

  • Определение HTML, определение понятия тега
  • Структура HTML страницы
  • Инлайновые (строчные)  и блочные теги, закрытые теги, порядок тегов
  • Атрибуты тегов
  • Определение CSS, понятие селектора
  • Способы задания стилей элементам - атрибутом style="", в <head> html-файла и в файле стилей.

 

 

 

1. Определение HTML, определение понятия тега

 

HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине.(Ru.wikipedia.org)

Благодаря HTML можно отобразить любой документ в веб-браузере. В HTML есть понятие тега, его мы разберем позже. С помощью тегов в браузере можно выводить списки, таблицы, картинки и ссылки и многое другое. Вообще, ссылки является, наверное, основным элементом на веб-странице. Именно ссылки и относятся с понятию гипертекста, то есть динамического текста. К примеру, на странице может быть определенная статья, в которой упоминаются разные термины. Эти термины принято задавать ссылками на их определение и объяснение. Тогда пользователь может просто прочитать статью, а если ему нужно уточнить понятие какого термина, он переходит по ссылке и читает об этом.    

 

Тег - элемент разметки страницы на языке HTML. С помощью HTML тегов мы можем на странице выводить элементы разных типов.

Например, чтобы сделать на html-странице таблицу с одной строкой и тремя ячейками (1, 2, 3)в ней нужно написать

 

<table>

<tr>

<td>1</td>

<td>2</td>

<td>3</td>

</tr>

</table>

 

 

1 2 3

Здесь <table>, <tr>, <td> являются тегами, которые имеют свои правила написания, определенные свойства, им можно задавать определенные стили.

 

 

2. Структура HTML страницы

 

Структура html-страницы имеет такой вид:

 

<html>

<head></head>

<body></body>

</html>

 

Теги <html>, <head> и <body> являются обязательными. Тег <html> содержит в себе всю страницу. Причем страница начинается с <html>, а заканчивается </html>. В первом случае мы видим открытие тега, во втором - его закрытие. Все что находится между ними является содержанием тега. Страница, которая находится внутри <html>. состоит из друх частей <head> и <body>, рассмотрим их подробнее.

 

В теге <head> мы прописываем все необходимые дополнения к данному документу - это могут быть ссылки на файл со стилями, файл со скриптами, это название и описание страницы, которые нужны для поисковых машин (так называемые мета-теги). Все, что находится внутри этого тега, на странице не отображается.

 

В теге <body> находится само содержимое страницы, все ее элементы. 

 

 

3. Инлайновые (строчные)  и блочные теги, закрытые теги, порядок тегов

 

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

 

Рассмотрим что такое <b>строчный тег</b> на примере

 

Рассмотрим что такое строчный тег на примере

 

Блочные теги - теги, которые начинаются с новой строки и после себя переводят строку. Примеры блочных тегов: <div>, <p>, <h3>.

 

 

Рассмотрим что такое<h3>блочный тег</h3> на примере

 

Рассмотрим что такое

блочный тег

на примере

 

Рассмотрим понятия открывающего и закрывающего тега.

Открывающий тег указывает на его начало, например, <span>. Для него закрывающим будет - </span>. Все теги нужно закрывать, чтобы браузер понимал, где он начинается и где заканчивается. Есть теги, которые не имеют закрывающих, например <img>, <br>. Для них продумано определенное написание - <img />, <br />(HTML4).

 

При написании тегов нужно соблюдать определенный порядок. Если внутри ссылки, которая состроит из нескольких слов, одно из слов желаете сделать жирным(<b>), то эта запись будет выглядеть так

 

<a href="/">Текст ссылки с <b>жирным</b> словом</a>

 

Текст ссылки с жирным словом

 

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

 

нужно писать

<a href="/"><b>Текст ссылки с жирным словом</b></a> 

а не 

<a href="/"><b>Текст ссылки с жирным словом</a></b> 

 

 

4. Атрибуты тегов

 

Теги имеют атрибуты, задающие им определенные свойства.

Атрибуты бывают глобальными и специфическими. Глобальные атрибуты можно задавать любым HTML элементам, при этом они делятся на основные атрибуты(class, id, style) и атрибуты событий(onclick, onkeydown).

 

В теге <a>, которые определяет ссылку, обязательно нужно задавать атрибут href="/", в котором прописывается адрес, по которому пользователь перейдет, нажав на ссылку. У тега <img>, который задает картинку, обязательным является атрибут src="/", который определяет путь, по которому находится заданная картинка относительно страницы.

 

Также бывают атрибуты class=""(задает класс элемента, по которому ему можно задать стили), id=""(идентификатор, уникальное имя элемента), style=""(инлайновые стили для элемента), type=""(например, для тега <input>, определяет его тип), width="", border="".

Пример:

 

<img src="/images/image1.jpg" style="width: 100px; border: 1px solid green;">

 

 

 

5. Определение CSS, понятие селектора

 

CSS (англ. Cascading Style Sheets — каскадные таблицы стилей) — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. (Ru.wikipedia.org)

 

Это определение из Википедии. Если простыми словами, CSS задает стили элементам, прописанным на html-странице. 

Для того, чтобы иметь возможность задать стили элементу в css-файле, нужно тегу, его описывающему задать атрибут class="" и дать название этому классу.

Например,

 

HTML:

<a href="#" class="red"></a>

CSS:

.red {color: #red;}

 

Если для атрибута в документе red называется классом, то в css-файле он называется селектором. В селекторе можно прописывать множество разных свойств с разными значениями - шрифт, цвет шрифта, цвет фона, границу и т.д. Подробнее о CSS свойствах можно узнать в одном из следующих уроков.

 

 

6. Способы задания стилей элементам - атрибутом style="", в <head> html-файла и в файле стилей.

 

Стили элементу можно задавать разными способами. Всего есть 4 способа:

  • атрибутами тега
  • инлайновыми стилями в атрибуте style=""
  • в файле стилей, с помощью задания элементу класса
  • в <head> документа при помощи <style></style>

 

Например, нужно картинке задать ширину 100px. Рассмотрим как это можно сделать каждым из способов.

 

Атрибут тега

 

<img src="/images/image1.jpg" width="100" />

 

Инлайновыми стилями в атрибуте style=""

 

<img src="/images/image1.jpg" style="width: 100px;" />

 

В файле стилей, с помощью задания элементу класса

 

HTML:

<img src="/images/image1.jpg" class="img" />

CSS:

.img {width: 100px;}

 

В <head> документа при помощи <style></style>

 

HTML:

<html>

<head>

<style>

.img {width: 100px;}</style>

<head>

<body>

<img src="/images/image1.jpg" class="img" />

</body>

</html>

 

 

 

Additional Info

Комментарии  

 
0 #1 investing for 09.07.2014 01:49
Fastidious answer back in return of this issue
with genuine arguments and describing all on the topic of that.
 

You have no rights to post comments

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