Изучение HTML языка

Введение

Рад, что вы решили приступить к изучению моего учебника по html. Поверьте мне, в нем нет ничего сложного, и уже через час вы создадите свою первую страничку.
HTML– это язык разметки документов в среде WEB. То, что вы видите при просмотре страницы в Internet, это интерпретация вашим браузером HTML-текста. Чтобы браузер правильно отображал форматирование к примеру текста т.е. разделял его на абзацы, выделял цитаты, заголовки, списки и.т.д. ему надо как-то сообщить , что мол это заголовок, а это – параграф и.т.д. Этим как раз и занимается язык html.
Чтобы увидеть HTML-коды страницы в Internet, кликните правой кнопкой мыши по странице, в выпавшем меню выберите пункт - view source (или "просмотр HTML кода"). Не пугайтесь! Я еще раз повторюсь – на самом деле, все очень просто!

Что понадобится нам для обучения?

Браузер и Блокнот(или аналогичный простой редактор) - вот всё, что вам необходимо для работы с данным учебником . Раз вы просматриваете эту страничку – значит браузер у вас уже есть , ну а блокнот я думаю найти не составит труда ( Пуск – Программы - Стандартные - Блокнот).

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

Возможно вы уже слышали, или даже использовали такие программы, как Microsoft FrontPage, Adobe Dreamweaver, которые упрощают работу с кодом.
Пока что забудьте об этих программах! пока учимся в блокноте!

Да, без сомнений Мы будем ими пользоваться, но только после того, как пройдем коротенькие курсы по html и css . Потом просто скачаете у меня на сайте специальный видео-курс по Adobe Dreamweaver и будет вам счастье…

Весь ли здесь HTML ?

Я постарался собрать только ту часть языка, которая действительно используется(из личного опыта создания более 10 сайтов), потому как более чем 40% используется очень редко.Тем более, в дальнейшем мы будем пользоваться Adobe Dreamweaver, и весь труднозапоминающийся код он напишет за нас . Главу по фреймам я выкинул полностью, советую Вам вообще никогда ими не пользоваться, т.к. это уже очень устаревшая технология и рейтинга это Вам не добавит!

Если Вам необходима более полная информация по html, скачивайте книги из соответствующего раздела у меня на сайте.

Термина используемые по ходу обучения

Приведу пример : <h1> Крупный заголовок </h1> <h2> Заголовок чуть поменьше… В браузере это будет выглядеть следующим образом:

. . .

</body>
<!--закончили с телом документа-->

</html>

Вы уже наверное догадались, что закомментированный текст нужен только для Вас, т.е. при просмотре документа через браузер его видно не будет.
В начале комментарий нужно открыть тегом <!-- затем вписать текст, и закрыть тегом --> .

 

Примечание: тег <!-- --> внутри элемента TITLE не действует.


 

Урок 2: Создаем свою первую страничку

ШАГ 1: Создайте на своем компьютере папку с названием вашего будущего сайта, ну к примеру в данном случае актуально будет назвать папку… Пока поверьте мне на слово, дальше когда начнете изучать Dreamweaver все поймете.

Как видите текст содержащийся в элементе DIV выделился в отдельную строку!

  SPAN - Используется для выделения части информации и придания ей различных… Например:

HR-служит для вставки в текст горизонтальной линии. Закрывающего тега нет!

WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание…

Урок 6: Покоряем html ссылки

В первую очередь давайте поговорим о ссылках - переходах с одной страницы на другую. Ссылки это базовый элемент без которого невозможно представить интернет.

Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. Ну вот например:

<a href="http://www.zvirec.com">Это ссылка на сайт zvirec.com </a>

будет выглядеть в браузере:

Это ссылка на сайт zvirec.com

Элемент а (ancor) является как бы якорем, т.е. текст, заключенный между открывающим <a> и закрывающим </a> тегом , будет текстом ссылки.
Атрибут href это сокращение от "hypertext reference/гипертекстовая ссылка", специфирует место, на которое выполняется переход по данной ссылке - обычно это internet-адрес и/или имя файла.

 

Если нужно сделать ссылку между собственными страницами?

Сделать html ссылку между страницами одного и того же веб-сайта гораздо проще. Например, если у нас есть две страницы(к примеру page1.htm и… <a href="page2.htm">Для перехода на page2 щелкни здесь!… Т.е. надо просто написать название страницы, на которую мы хотим перейти.

А если надо сделать ссылку внутри страницы?

Бывают случаи когда необходимо сделать ссылку с начала страницы в конец или наоборот, или к примеру с оглавления на главы и.т.д. Сделать ее очень… <!-- этот способ используется при маркировании заголовков --><h2… Теперь вы можете ссылаться на помеченную область(в данном случае Раздел1) простым указанием ее имени после значка #. …

Оглавление

Раздел 1: как стать богатым
Раздел 2: как стать счастливым
Раздел 3: как быть здоровым

Раздел 1: как стать богатым

Для того чтобы стать богатым необходимо очень много трудится .....

Раздел 2: как стать счастливым

Для того чтобы стать счастливым, нужно использовать каждую минуту...

Раздел3: как быть здоровым

Для того чтобы быть здоровым нужно много заниматься физкультурой...

 

А можно сделать ссылку на почту?

<a href="mailto:admin@zvirec.com">Написать письмо админу zvirec.com</a> В браузере будет выглядеть: Написать письмо админу zvirec.com

А можно ли изменить цвет ссылок?

Конечно можно. Чтобы изменять цвет ссылок во всем документе, существуют специальные атрибуты элемента BODY .

LINK - цвет просто ссылок.

ALINK(Active Link) - цвет активных ссылок (активная означает в момент нажатия на нее)

VLINK(Visited Link) - цвет уже посещенных ссылок

Все цвета задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.

К примеру если при открытии тела документа, элементу body прописать:

<body link="red" vlink="green" alink="white">

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

А если нужно чтобы в каком -то месте ссылка имела другой цвет? например по всему документу красные, а именно в одном месте зеленая?

Тогда нужно внутри html ссылки прописать уже знакомый элемент font с атрибутом цвета:

<a href="http://www.zvirec.com"><font color="black">Черная ссылка</font></a>

Если сделать так, то данная ссылка будет черной.


 

Урок 7: Работаем с изображениями

· GIF (Graphics Interchange Format) · JPG / JPEG (Joint Photographic Experts Group) · PNG (Portable Network Graphics)

А есть ещё атрибуты, которые нам необходимы?

<img src="pchela1.jpg" alt="пчела мая!!!" width="65" height="59"> В результате увидим:

А как можно изображение сделать ссылкой?

Для этого просто вместо текста ссылки, вставляете изображение. Вот например:

<a href="http://www.zvirec.com">
<img src="pchela.jpg" width="65" height="59" title="Пчела мая!!! "border="0" >
</a>

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

Что еще за border="0" спросите Вы, а дело в том, что когда делаешь изображение ссылкой, вокруг него появляется некрасивая рамка(border) и чтобы ее убрать пишут дополнительный атрибут border .

Ну вот впринципе и все с изображениями, как видите ничего сложного нет.


 

Урок 8: Цвет фона и текста

Вот необходимые атрибуты: BACKGROUND – определяет изображение для "заливки" фона. Значение… BGCOLOR – определяет цвет фона документа.

Урок 9: Разберемся с таблицами в html

Html таблицы - полезная штука . Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом. Раньше все сайты имели табличную структуру, сейчас все большую популярность приобретает структура на дивах (с помощью <div> и CSS ). Вот классический пример табличной структуры:

 

Шапка сайта(логотип и все такое)
Ссылка 1
Ссылка 2
Ссылка 3
Ссылка 4
Ссылка 5
Основное содержание Реклама и все такое
Блок копирайта

 

Давайте разбираться как построить простейшую таблицу. Для этого нам понадобятся как минимум три элемента .

TABLE -Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Сразу скажу, что здесь есть атрибут BORDERкоторый задает толщину рамки таблицы в пикселах.

TR (Table Row) - Создает новый ряд таблицы. Закрывающий тег обязателен.

TD (Table Data) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.

 

Давайте попробуем создать таблицу из двух рядов и двух столбцов:

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

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

ряд 1 ячейка1 ряд1 ячейка2
ряд 2 ячейка 1 ряд 2 ячейка 2

Разобрались? Т.е. таблица начинается с <table>, затем идёт <tr>, указывающий на начало нового ряда. В ряду вставлены две ячейки: <td>ряд 1 ячейка1</td> и <td>ряд1 ячейка2</td>. Ряд закрывается </tr>, и сразу начинается новый ряд <tr>. В новом ряду также две ячейки. Таблица закрывается </table>. Все довольно логично

 

А как можно объединить ячейки?

Для этого существуют данные атрибуты. COLSPAN – определяет количество столбцов, на которые простирается данная… ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.

Урок 10: Что такое html формы и зачем они нужны.

Что такое html формы? Вот смотрите, ниже приведена html форма заказа обучающего диска. По окончании обучения, вы тоже сможете сделать такую. Начало формы Введите ФИО:

Урок 11: Заканчиваем разбираться с формами

<form name="primer6" method="post" action="obrabotchik.php"> <p>Выберите способ доставки:</p>… Результат: Выберите способ доставки:

Урок 12: Смотрим форму в действии

Будем тестировать вот такую форму. Введите ФИО: Введите пароль:

Урок 13: Пару слов про голову документа

В первом уроке я говорил, что голова документа открывается тегом <HEAD> и закрывается тегом </HEAD> . Какие основные элементы содержатся… Ну во-первых это название документа - элемент TITLE . У этого элемента… Информация из элемента TITLE показывается в окне браузера(вверху слева), и поэтому это очень важный и информативный…