Среда, 29 Мая 2013 07:47

HTML для домохозяек в картинках

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

Хочу вам представить немного слов о HTML в понятной и забавной форме! В этой статье мы подготовим несколько самых важных ингредиентов для приготовления блюда HTML и создадим страничку домохозяйки.

Пройдемся  по таким пунктам:

 

  • структура документа
  • ссылки
  • картинки
  • списки
  • таблицы
  • блоки div, p
  • заголовки
  • немного о CSS
  • приготовление страницы HTML

 

 

Структура HTML документа

 

Я хочу представить структуру HTML страницы в виде пирога:

 

HTML для домохозяек в картинках

 

 

У любого пирога есть две основные части -- тесто и начинка. Так и у HTML страницы есть два основных элемента -- head и body. В первом элементе содержатся данные о всей странице -- заголовок, теги, подключаемые файлы и т. д. Во втором элементе body содержатся элементы, которые создают структуру самой HTML страницы -- картинки, ссылки, таблички и блоки с текстом. И оба элементы вместе оборачиваются тегом html:

 

 

<!-- Пирог -->

<html>

<!-- Тесто -->

<head>

<title>Страница HTML</title>

</head>

<!-- Начинка -->

<body>

Содержание страницы

</body>

</html>

 

 

Теги (элементы) в HTML записываются со скобками "<" и ">". Большинство элементов HTML должны состоять из открывающего тега (например, <html>) и закрывающего (например, </html>).

 

 

Ссылки

 

Ссылки являются очень полезным и одним из самых главных HTML элементов. Представьте себе, что вы читаете рецепт очень интересного блюда, которое желаете приготовить на ужин. И вдруг вы находите в рецепте неизвестный ван ингредиент. Что делать? Вам нужно узнать что этот ингредиент из себя представляет, где его можно купить или чем заменить. В этой случае вам помогла бы HTML ссылка! Если ваш ингредиент обернут в ссылку, то, нажав на нее, вы перейдете на другую страницу, где будет описание этого продукта, где его можно купить и его цена. Вот было бы классно! А теперь научимся делать такую ссылку.

 

 

У HTML ссылки есть три основные составляющие:

 

  • текст, который является ссылкой
  • путь к страницы, на которую ссылка ведет
  • и текст, который появляется при наведении на ссылку и объясняет содержание страницы, куда попадет пользователь при клике(подсказка)

 

Это как налистник -- мы видим только тесто блинчика (текст ссылки), но самое главное у него внутри (начинка -- страница, на которую ведет ссылка). А подсказка ссылки -- это как шоколад на картинке, он говорит нам, что начинка налистников сладкая!

 

 

 

 

 

В результате, ссылка выглядит так:

 

<a href="/путь_к_странице_с_информацией" title="Подсказка ссылки">Текст ссылки</a>

 

 

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

 

 

Картинки

 

Картинки в HTML -- это самое вкусное блюдо! Простым движение руки и набором букв вы можете вставить картинку на HTML страницу.

 

 

У картинки на HTML странице должно быть описано всего 2 параметра -- путь к картинке относительно данной страницы и ее описание (название). Картинку с тортом я вставила таким образом:

 

 

<img alt="Картинка торт С днем рождения" src="/images/stories/html_images_33.jpg" />

 

 

Здесь путь к картинке такой -- images/stories/html_images_33.jpg, тут images/stories путь к папке, где лежит картинка, а html_images_33.jpg -- ее название.

 

 

Списки

 

Списки в HTML оформляются особым образом и бывают нумерованными и ненумерованными.

Нумерованный или упорядоченный список -- это список элементов, порядок которым имеет значение. Например, список богатых стран. Первая страна в списке самая богатая, а далее уровень богатства уменьшается.

 

Ненумерованный или неупорядоченный список -- это список элементов, порядок которых значения не имеет. Например, список покупок или важных дел по дому.

 

 

Для создания списка HTML нужно использовать два элемента:

 

  • ul или ol для обозначения ненумерованного или нумерованного списка
  • li для обозначения элемента списка (любого типа)

 

 

Например,

 

<h3>Ваше хобби:</h3>

<ul>

<li>Пение</li>

<li>Рисование</li>

<li>Танцы</li>

<li>Макраме</li>

</ul>

 

 

Таблицы

 

 

Таблицы в HTML используются для отображения табличных данных)) Например, таблица умножения. Там в первой строчке и первом столбце числа, которые должны умножаться, А в остальных колонках результаты умножения. Рассмотрим простой вариант:

 

  1 2 3
1 1 2 3
2 2 4 6
3 3 6 9


 

Для создания такой таблички, нужно знать три типа элементов:

 

 

  • сама таблица table
  • строка в таблице tr
  • ячейка в строке таблицы td

 

 

Содержимое таблицы должно находиться непосредственно в ячейках.

 

<table>

<tr>

<td></td> <td> 1</td> <td> 2</td> <td> 3</td>

</tr>

<tr>

<td> 1</td> <td> 1</td> <td> 2</td> <td> 3</td> 

</tr>

<tr>

<td> 2</td> <td> 2</td> <td> 4</td> <td> 6</td> 

</tr>

<tr>

<td> 3</td> <td> 3</td> <td> 6</td> <td> 9</td> 

</tr>

</table>

 

 

Если вы посмотрите на таблицу чуть выше и на этот кусок HTML кода, то увидите сходство)) Это одна и та же таблица -- ее код и ее результат.

 

 

Блоки div, p

 

 

 

Блоки в HTML используются для содержания контента (текста) или для объединения частей страницы в общий блок. В первом случае используется абзац p, а во втором -- блок div.

 

 

Пример:

 

<p>Сегодня отличная погода</p>  

абзац текста

 

<div>

<img src="/images/flower.png" />

<a href="/mysite/blog/flower" title="Подробнее о цветке с картинки">Подробнее</a>

</div>

блок, объединяющий картинку и ссылку

 

 

Заголовки

 

 

Заголовки в HTML обозначаются при помощи элементов h1, h2 ... h6. Где h1 -- это самый главный заголовок, а h6 -- самый меньший по важности.

 

Пример:

 

<h1>Заголовок страницы</h1>

 

 

 

Немного о CSS

 

 

CSS служит для оформления элементов HTML страницы. Для задания стиля элементу, нужно использовать селекторы -- селекторы тегов (table, ul, a), селекторы классов и т. д.

 

 

Примечание.

 

Если элементу задан атрибут класс, то этой класс можно использовать для оформления в CSS.

 

<div class="red"></div>

CSS: .red {background: red;}

 

Пример:

 

<p class="red">Статья "HTML для домохозяек в картинках" размещена на сайте <a href="/" title="Главная сайта" class="blue">Kate-land.net</a></p>

 

CSS:

.red {color: red}

.blue {color: blue}

 

 

Результат:

 

 

Статья "HTML для домохозяек в картинках" размещена на сайте Kate-land.net

 

 

Основные стили CSS для оформления HTML элементов:

 

  • width -- задает ширину элемента
  • height -- высота элемента
  • color -- цвет текста
  • background -- цвет или картинка фона
  • font-family -- шрифт
  • font-size -- размер шрифта
  • margin, padding -- внешние и внутренние отступы

 

 

Приготовление страницы HTML

 

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

 

 

<!DOCTYPE html>
<html>
<head>
<title>Моя первая HTML страница</title>
<style>
.content, h1 {width: 600px; margin: 0 auto;}
img {float: left; margin: 0 20px 20px 0; width: 300px;}
h1, h2 {color: blueviolet;}
h2 {clear: left;}
ul {list-style-type: square;}
</style>
</head>
<body>
<h1>Катерина</h1>
<div class="content">
<img src="http://kate-land.net/images/stories/x_7da659b2.jpg" alt="Мое фото">
<p>Я занимаюсь версткой, мне нравится создавать красивые HTML страницы</p>
<p>В свободное время я также люблю заниматься хенд-мейдом, плету браслеты, делаю сережки. Мне нравится украшать свою жизнь и окружающий мир</p>
<h2>Мои увлечения:</h2>
<ul>
<li>Читать книги по бизнесу</li>
<li>Смотреть милые фильмы</li>
<li>Проводить время на природе</li>
<li>Делать хенд-мейд украшения</li>
</ul>
<p>Ссылка на мою страницу в <a href="https://plus.google.com/u/0/100824846190818419300" title="Моя страница">Google+</a></p>
</div>
</body>
</html>

 

 

Получим такой результат -- Страница.

 

 

 

 

Additional Info

You have no rights to post comments

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