Основы HTML - для новичка

meta теги в html

Мета Тэги.

Ещё один интересный момент, учить не надо просто примите к сведению.

Существуют ещё несколько важных для сайта тэгов. Ставятся они в контейнере <head> перед <title>

Они используются для поисковых систем и браузеров.

<meta name="robots" content="index, follow" />
нужен для поисковых роботов. Значение index, follow сообщает им что страница должна индексироваться.

Если нужно запретить индексацию страницы, допустим она содержит какую нибудь контактную информацию или типа того, значение будет noindex,nofollow.

 

<meta name="keywords" content="аквариум, рыбки, растения, уход" />
Перечисляет ключевые слова страницы. В наше время уже не используется поисковыми системами, но служит для других целей. О них позже.

 

<meta name="description" content="Наш сайт посвящён содержанию и уходу за аквариумными рыбками" />
Описание содержания сайта или странички. Поисковые системы обращают внимание на meta теги в html документе при ранжировании результатов в поиске. Особенно Google, проведённые иследования это доказывают - факторы ранжирования.

Так что уделяйте больше внимания содержимому этого тэга.


И ещё один момент: когда будете делать сайт без движка, перед началом документа, то есть перед тэгом <html> должна быть такая строчка:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Это нужно для браузеров, просто запомните.


 

Теперь всё,начальные знания получены. Можете приступать к созданию первой странички.
Время от времени я буду пополнять этот раздел новой информацией.

Я рекомендую ещё ознакомиться с CSS, очень полезная штука. Пригодится! Это точно!

Перейти к изучению CSS

Вернуться к Началу HTML

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

Таблицы в HTML. ч.2

Таблицы в HTML. Продолжение.

На этом уроке мы расширим свои знания о таблицах. И разберём ещё несколько атрибутов.

cellpadding - расстояние между рамкой ячейки и её содержимым в пикселях.

<table border="1" cellpadding="10">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

В итоге:


cellspacing - расстояние между границами ячеек в пикселях.

<table border="1" cellspacing="10">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

В итоге:


width - ширина HTML таблицы. Значение либо в пикселях, либо в процентах от ширины окна браузера.По умолчанию ширина будет зависеть от содержимого.

height - высота HTML таблицы. Значение тоже в пикселях или процентах. По умолчанию высота зависит от содержимого таблицы.

<table border="1" width="350" height="70">
<tr>
<td>ряд 1 ячейка1</td><td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Вот так будет выглядеть:


align - вырывнивание таблицы или содержимого по горизонтали. Значения : left, right, center.

valign - выравнивание таблицы или содержимого по вертикали. Значения : top, bottom, middle (верх, низ, середина).

bgcolor - задаёт цвет фона ячеек в таблице.

background - заполняет фон таблицы или ячейки изображением. Значение будет адрес (URL) изображения.

Атрибуты bgcolor и background можно задать для любой ячейки различные. Самое главное когда задаётся общий фон для всей таблицы, для нужной ячейки достаточно поставить свой атрибут.

Ну вот теперь я думаю у Вас достаточно начальных знаний для создания небольшой странички.
Но для того чтобы страничка была красивой нужно ещё знание CSS, хотя бы их основ.
Хотя стоп! Есть кое что ещё. Это даже не урок, а полезная информация.

Перейти. meta тэги в HTML

Вернуться к Началу HTML

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

Цвет текста в HTML и цвет фона

Изменять цвет текста в HTML можно не только с помощью тэга <span>. Для этого ещё существует атрибут тэга <body>. Он задаёт цвет текста во всём документе.

text - цвет текста в html документе

Задаётся как в шестнадцатиричном формате,так и обычным названием цвета. Например:

<body text="green"> 

или

<body text="#217D88"

Также можно задавать свой цвет и определённым фрагментам текста.
Это делается с помощью тэга <font color>

 

Допустим мы назначили цвет текста во всём документе, и нужно сделать одну строчку чёрным. Вот фрагмент кода:

<p align="center">Добро Пожаловать!<br>
На нашем сайте Вы узнаете о содержании и разведении аквариумных рыбок,<br>
<font color="black">о часто встречающихся болезнях и методах лечения.</font></p>

Вот результат:

цвет текста в html

 

Теперь про цвет фона HTML и как его задать.

bgcolor - задаёт цвет фона в HTML

Атрибут тэга <body>. Например :

<body bgcolor="#CFF6D9" text="#217D88">

Результат:

цвет фона в html

 

background - задаёт фон в виде заливки какой нибудь картинкой или изображением

Атрибут тэга <body>. Значением будет адрес файла картинки. Картинка должна быть в формате jpg или gif. Например вот картинка:

- разрешение 12х12 пикселей, можно и больше, но этого вполне достаточно.

Теперь код:
<bоdy baсkground="picture/background.gif">

В итоге:

цвет фона в html

Пробуйте, меняйте значения, тренируйтесь! Всё получится!

Перейти к следующему уроку

Создание таблиц в HTML

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

Создание таблиц в HTML

В этом небольшом уроке рассмотрим создание таблиц в HTML документе.

Html таблицы полезная штука в сайтостроении. С их помощью делают "каркас" сайта или "каркас" меню.

Обновлено: 5.11.2011

На данный момент таблицы всё меньше используются в HTML, их замещают блоки div, более удобные при вёрстке. Таблицы теперь используются по своему прямому назначению, для вывода табличных данных.

Используемые тэги при создании таблиц в html:

- table (контейнер)

Создаёт таблицу. Имеет атрибут border, определяющий толщину рамки таблицы.

- tr (контейнер)

Создаёт новый ряд в таблице.

- td (контейнер)

Создаёт новую ячейку в ряду. Вот пример:

<table border="1">
<tr>
<td>ряд 1 ячейка1</td> <td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Что получится:

То есть сначала создаётся ряд <tr>, а потом ячейки <td>
По умолчанию размер ряда и ячейки зависит от их содержимого.

Теперь попробуем обьединить ячейки в верхнем ряду.

Для этого существует атрибут colspan. По умолчанию значение ="1" Пример:

<table border="1">
<tr>
<td colspan="2">ряд 1 ячейка 1+2</td>
</tr>
<tr>
<td>ряд 2 ячейка 1</td> <td>ряд 2 ячейка 2</td>
</tr>
</table>

Получится так:

Соединяем ряды в пределах ячейки. Для этого есть атрибут rowspan. По умолчанию тоже ="1"

<table border="1">
<tr>
<td rowspan="2">Ячейка 1, ряд 1+2</td>
<td>ряд1 ячейка2</td>
</tr>
<tr>
<td>ряд 2 ячейка 2</td>
</tr>
</table>

Получится вот так:

В принципе не сложно, если что то не понятно просмотрите ещё раз. Я тоже не сразу понял.

Перейти к следующему уроку

Таблицы в HTML. часть 2

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

Вставка изображения в HTML

Теперь разберёмся со вставкой изображения в html документ.
 Ведь сайт без картинок будет не столь интересен пользователю. Даже в детстве помню если какая нибудь книжка попадала мне в руки, я сначала смотрел картинки и, наверное, не я один был такой. Поэтому изображения в HTML это очень важная часть в построении сайта. Здесь всё легко.

Небольшое предупреждение!

С прошлого урока Вы должны самостоятельно прописывать все тэги, так будет намного полезнее и эффективнее для Вас, нежели просто копировать и вставлять код. Скопированный код не будет работать в браузере. Он даётся только для лучшего восприятия и понимания. Исключение, в тех местах где сказано, что можно скопировать.
Теория без Практики это как машина без колёс. Прошу понять меня правильно.

На сайт можно ставить изображения в формате jpg, gif и png. Можно и других форматов, но они используются очень редко.
Для небольших изображений, не имеющих большого количества цветов,я посоветовал бы формат gif.
Для больших же картинок требующих качественного отображения можно использовать png. У него хорошее сжатие при максимальном качестве.
Ну а jpg всё таки тяжеловат,хотя если использовать его в меру, то всё будет нормально.

Для вставки изображения в HTML используется одиночный тэг

<img srс="xxx.jpg"> ,где xxx.jpg название файла изображения. Если по правильному то картинка  должна хранится в отдельной папке, например picture. Конечно изображения можно хранить и не в папке, но это будет не совсем удобно.

Если картинка находится в папке picture html код будет такой:

<img srс="picture/xxx.jpg">

 

Если на другом сайте в папке image то будет так:

<img srс="http://www.site.ru/image/xxx.jpg>

Попробуйте вставить изображение на свой сайт. Картинку можете скопировать ниже.

Изображения в HTML

 

Также существуют атрибуты для этого тэга.

align - выравнивание по горизонтали

Имеет значения left и right. Если изображение будет в тексте, этими значениями можно управлять обтеканием текта. Если картинка имеет выравнивание по левому краю, то текст будет обтекать её справа. Если картинка по правому краю, то соответственно текст будет слева.

hspace (horizontal space) - отступ по горизонтали от других обьектов, картинок или текста

Значения задаются в пикселях.

vspace (vertical space) - отступ по вертикали

Также задаётся в пикселях.

height (высота) и width (ширина) - размер изображения в пикселях

Задаёт размеры изображения. Это помогает уменьшить время загрузки страницы. Получается как бы резервирование места под изображение, пока загружаются другие элементы. Всегда задавайте реальные размеры изображений, иначе могут возникнуть всякие "глюки".

Теперь изменим код в файле index.html вот в этом месте:

<!--Блок текста слева синим цветом!-->
<img srс="picture/somik.jpg" align="left" hspace="20" vspace="40">
<div align="left"><span style="color: #0000ff">
Сомы очень скрытные рыбы,их можно увидеть<br>
только вечером когда свет в аквариуме выключен,<br>
и туда попадает только свет из комнаты</span><div>

Вот что у нас получится:

Изображения в HTML

 

Существует ещё несколько атрибутов, применяемые для изображений.

title- заголовок картинки

При наведении мышки на изображение появляется его заголовок.Например:

<img srс="picture/somik.jpg" title="сомик">

 

alt - название изображения

Выводит название изображения, если в браузере отключена графика или по каким то причинам картинка не смогла загрузиться. Пример кода:

<img srс="picture/somik.jpg" alt="Сомик">

 

border - рамка вокруг изображения

Создаёт рамку, значение задаётся в пикселях.Например рамка толщиной 1 пиксель:

<img srс="picture/somik.jpg" border="1">

 

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

<а hrеf="presnovodnie.html">
<img srс="picture/somik.jpg" title="сомик"></a>

 

Теперь немного потренируйтесь.

 

Перейти к следующему уроку

Цвет текста и фона в HTML

Хотите быстро изучить HTML и CSS?
Тогда вам сюда >>

X

Инструкция по планированию сайта
С чего начать создание сайта?

Инструкция по созданию сайта

  • Инструкция по созданию сайта
  • Шаблон для составления плана сайта
  • Чек-лист по этапам создания сайта

* Никакого спама. Гарантирую!