HTML для новичков

HTML для начинающих

Сидел я дома. Делать было нечего. Решил написать учебник по HTML. Наверно это не самый лучший учебник по HTML из всех учебников, но надеюсь, что он поможет вам обрести начальные знания HTML. Учебник написан не только для новичков, но и для опытных пользователей. Нет никакой красоты, а зачем она? Мы ведь тут не на красоту смотрим, а учимся. :) По ходу уроков вам будут даваться небольшие задания. Надо будет их выполнять! :)

Если будут вопросы, замечания, пожелания пишите мне на мыло: i-sof@mail.ru

Содержание

Учебник

Обязательные тэги

Ссылки

Автор: Нормурадов Игорь

e-mail: i-sof@mail.ru

Сайт: http://www.igorenat.hut.ru


Урок 1

HTML не язык программирования.

HTML не является языком программирования. Он предназначен для разметки текстовых документов. HTML странички состоят из тэгов (пример: <hr> - горизонтальная линия), т.е. все, что находится между < и > называется тэгом. Все HTML документы начинаются с тэга <html> и заканчиваются тэгом </html>. Тэги бывают разными: только открывающимися и открывающимися/закрывающимися. Пример только открывающегося тэга <hr>. Пример открывающегося/закрывающегося тэга: <html></html>. Есть тэги, которые обязательны. Чтобы посмотреть их кликните сюда.


Урок 2

Создание простой HTML странички.

Для начала откроем любой блокнот. Например стандартный блокнот Windows(Пуск>Программы>Стандартные>Блокнот). Открыли? Хорошо. Теперь напишите следующий текст в блокноте.

Создадим на диске папку с именем HTML странички и сохраним туда наш документ. Дадим ему имя index.html. Теперь откроем Internet Explorer, заходим в меню Файл>Открыть. Нажимаем на кнопку Обзор и находим наш документ, который мы сохранили, нажимаем кнопку Открыть. Ну как, впечатляет? Посмотреть пример.

А теперь разберемся в нашей писанине.

<html>

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

<head>

это обязательный тэг. Что-то вроде головы. Между этим тэгом мы пишем что-то вроде служебной информации.

<title>1-ая страничка</title>

все, что вы напишите между <title> и </title> будет отображено в заголовке окна. В данном случае там будет написано: 1-ая страничка.

</head>

закрытие тэга головы.

<body>

это обязательный тэг. Будем называть его телом. Все, что вы напишите между тэгом <body> и </body> будет отображено на вашей страничке. Весь текст, написанный в теле будет отображен в строку. Для того, чтобы текст был не в строку, а скажем каждое предложение с новой строки, то ставим тэг <br> перед или после предложения. О нем ниже.

<br>

переход на следующую строку. Тэг закрывать ненужно.

</body>

обязательный тэг. Закрытие тела.

</html>

обязательный тэг. Конец нашего документа.

Есть еще множество тэгов, но о них мы поговорим в следующих уроках.

Если вы измените что-нибудь в нашем *.html файле и захотите посмотреть изменения, то откройте Internet Explorer и загрузите ваше страничку. Если она у вас уже загружена, то просто нажмите F5 или на кнопку Обновить.


Урок 3

Установление цвета фона и текста.

На этом уроке вы научитесь изменять цвет фона и текста.

Создайте новый документ и напишите там следующий текст.

Сохраняем. Открываем в Internet Explorer. Посмотреть пример.

Как видите мы познакомились с новым для вас тэгом <font></font>. У этого тэга много атрибутов. Можно изменить цвет текста, размер и шрифт. На этом уроке мы рассмотрим только один - изменение цвета, а с остальными познакомимся позже.

Чтобы изменить цвет текста в тэге <font> пишем атрибут color="цвет" - <font color="#CC0000">Тут ваш текст</font>. Измените #CC0000 на свой цвет.

Разбираемся в писанине.

<html>
<head>
<title>2-ая страничка</title>
</head>

<body text="yellow" bgcolor="black">

все это нам уже известно, но вот у тэга <body> мы видим атрибут text="цвет" в данный момент text="yellow" и bgcolor="цвет" в данный момент bgcolor="black". Ппараметр text устанавливает цвет текста по всему документы, т.е. если вы укажете этот атрибут, то любой текст напечатанный в документе будет одного цвета. Если хотите изменить цвет определенного текста используйте тэг <font></font>. Атрибут bgcolor устанавливает цвет фона вашей странички.
 <font color="#CC0000">Добро пожаловать!</font>

цвет текста красный.

<br>Это моя первая страничка.

текст на новой строке

</body>
</html>

Я тут когда вспоминал сидел как я учился, кто меня учил, я вспомнил, что нам (в группе нас было 6 человек) учитель не дал атрибуты topmargin="число", leftmargin="число". Ну ятогда про них и не знал. :) А когда уже отучился, узнал. И вот в учебник я их включу. Атрибут topmargin="число" (<body topmargin="0">) устанавливает расстояние до верха окна, а leftmargin="число" (<body leftmargin="0">) устанавливает расстояние до левого края окна. Вроде все.

Ничего сложного я тут не вижу. Пойдем дальше.


Урок 4

Размер и шрифт текста.

С цветом мы разобрались. Теперь я вам расскажу о размере и шрифте текста.

Напишите следующий текст в блокноте.

Сохраните его. Посмотреть пример.

Теперь
вы знаете новые атрибуты face="название
шрифта" и size="размер текста". Они
пишутся в тэге <font>. Пример: <font face="Arial"
size="10">Тут ваш текст</font>.

Как всегда разбираемся в писанине.

<html>
<head>
<title>3-ая страничка</title>
</head>
<body bgcolor="black">

все это мы уже знаем. Так ведь? ;)

<font color="#CC0000" face="Arial" size="14">Добро пожаловать!

<br>Это моя третья страничка.</font>

тут мы видим, что текст будет красного цвета, шрифт текста Arial и размер 14-ый.
 </body>
</html>

Вот и все. Заданий пока не будет. :)


Урок 5

Параграфы.

Параграфы и этим все сказано.

Параграфы вводятся тэгом <p></p>

Центрировать текст с помощью параграфа <p align="center">Тут ваш текст</p>. Еще можно с помощью тега <center>Тут ваш текст</center>

Выравнивать по левому краю <p align="left">Тут ваш текст</p>.

Выравнивать текст по правому краю <p align="right">Тут ваш текст</p>.

Выравнивание текста по обеим краям документа <p align="justify">.

Напишите следующий текст в блокноте.

Сохраните его. Посмотреть пример.

Разбираемся.

<html>
<head>
<title>Параграфы</title>
</head>
<body text="green" bgcolor="Nevy">
<p align="center"><font color="yellow" face="Arial" size="14">Добро пожаловать! Это моя третья страничка.</font></p>

тут текст центрирован, желтого цвета
<p align="left">Автор: Нормурадов Игорь</p>

тут идет выравнивание по левому краю

<p align="right">Меня зовут Игорь</p>
тут идет выравнивание по правому краю

<center>Использование тэга center</center>
<p align="justify"><font color="green" size="9" face="Courier New">Я расскажу немного о себе. Я программист на Visual Basic. Visual Basic - это круто. Создаю сайты на досуге, пишу проги.<font></p>

тут идет выравнивание по обеим краям документа краю
</body>
</html>

Все. Этот урок закончен.


Урок 6

Заголовки.

Заголовки предназначены для выделения текста или для написания заголовков. Существует 6 видов заголовков.

<h1>Ваш текст</h1>

<h2>Ваш текст</h2>

<h3>Ваш текст</h3>

<h4>Ваш текст</h4>

<h5>Ваш текст</h5>
<h6>Ваш текст</h6>

Напишите следующий текст в блокноте.

Сохраните его. Посмотреть пример.

Разборка. :)

<html>
<head>
<title>Пример с заголовками</title>
</head>
<body text="green" bgcolor="Nevy">
<center><h2><font color="yellow">Добро пожаловать! Это моя первая страничка.</font></h2></center>

тут я использовая заголовок 2-ого уровня <h2></h2>
<p align="left"><h1>Заголовок 1-ого уровня</h1></p>

тут я использовая заголовок 1-ого уровня <h1></h1>
<p align="justify"><h4>Я расскажу немного о себе. Я программист на Visual Basic. Visual Basic - это круто. Создаю сайты на досуге, пишу проги.</h4></p>

тут я использовая заголовок 4-ого уровня <h4></h4>
</body>
</html>

Заданий нет :)


Урок 7

Курсив, жирный текст, подчеркнутый текст.

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

Курсив <i>Ваш текст</i> - будет выглядеть так: курсив

Жирный текст <b>Ваш текст</b> - будет выглядеть так: жирный текст

Подчеркнутый <u>Ваш текст</u> - будет выглядеть так: подчеркнутый текст

Этими тэгами можно комбинировать. Например:

Курсив и жирный текст <i><b>Ваш текст</b></i> - будет выглядеть так: курсив и жирный текст

Ну это как вам будет угодно, а теперь напишите следующий текст в блокноте.

Сохраните его. Посмотреть пример.

Разберемся с текстом, хотя, мне кажется, тут и так все понятно.

Заметили? Я не даю задания. :) Все на вашей совести. Повторяйте по несколько раз и вы все запомните.


Урок 8

Ссылки. Все о работе с ссылками.

На этом уроке вы научитесь делать ссылки(гиперссылки). Они нужны нам для того, чтобы пользователь смог загружать другие страницы вашего сайта, картинки, другие сайты. Короче с помощью ссылки пользователь сможет гулять по вашим страничкам. А теперь рассмотрим тэг определяющий ссылку.

<a></a> - тэг ссылки

<a href="ссылка">Текст</a>

в атрибуте href пишите ссылку на страницу или сайт. Между тэгом <a> вот тут </a> пишется текст. При клике на этот текст пользователь попадет на страничку или сайт написанный вами в атрибуте href.

Ссылки бывают разные. Пример ссылок.

<a href="страничка">Ваш текст</a>

Пример: <a href="index.htm">Главная страничка</a>

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

<a href="имя папки/страничка">Ваш текст</a>

Пример: <a href="about/index.htm">Обо мне</a>

Этот пример ссылки показывает, что ссылка стоит на страничку index.htm в папке about, которая находится в одной папке с этой страничкой.

<a href="../страничка">Назад</a>

Пример: <a href="../08.htm">Назад</a>

Тут ссылка стоит на страничку, которая находится в папке, в которой находится попка с этой страничкой. :) хе Разбирайтесь...

<a href="сайт">Ваш текст</a>

Пример: <a href="http://www.igorenat.hut.ru">Мой сайт</a>

Этот пример ссылки показывает, что ссылка стоит на сайт www.igorenat.hut.ru.

Ссылки можно открыть в новом окне. Для этого нужен атрибут target.

<a href="ссылка" target="_blank">Текст ссылки</a>

Пример: <a href="friends.html" target="_blank">Мои друзья</a>

Чтобы открыть ссылку в новом окне, как я уже говорил, нужен атрибут target который равен "_blanck"(target="_blank"). Он пишется в тэге <a target="_blank"></a>

Так же можно установить закладку. Для установления закладки нужно, в том месте, где ты хочешь поставить закладку написать:

<a name="имя закладки">Тут можете написать текст, но не обязательно</a>

Пример: <a name="top"></a>

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

<a href="имя вашей закладки, на которую нужно перейти">Текст</a>

Пример: <a href="#top">Вверх</a>

Когда пишете ссылку на закладку нужно перед именем закладки поставить знак # (переключиться на английский и нажать SHIFT+3).

Картинка тоже может быть ссылкой, но об этом в другом уроке. :)

Чуть не забыл. :) Ведь еще есть ссылка на ваш почтовый ящик(e-mail). Это тоже просто.

<a href="mailto:ваш ящик">Напишите мне</a>

Пример: <a href="mailto:i-sof@mail.ru">Напишите мне</a>

Замените i-sof@mail.ru на ваш ящик и все. Mailto: должно быть всегда, если делаете ссылку на ящик.

Если вы делаете ссылку то она будет такого цвета "ссылка". Ссылка, по которой уже заходили будет такого цвета "ссылка". Активная ссылка будет такого цвета "Ссылка". Чтобы изменить эти цвета вам нужны атрибуты тэга <body>, новые для вас: link="цвет ссылки", vlink="цвет" и alink="цвет". А пишутся они так.

<body link="цвет" vlink="цвет" alink="цвет">

<body link="#CC0000" vlink="#FFFF00" alink="#008000">

В этом примере цвет ссылки будет красный, цвет ссылки которую уже посещали будет желтый, цвет активной ссылки будет зеленый.

Итак, перейдем к примерам. Для этого вам нужно создать папку(пусть будет: мой сайт), в ней еще папку с именем about. В первой папке создайте 3 HTML документы с именем texts.html, anekdots.html, other.html. В папке about создайте HTML документ с именем index.html. Содержимое документов придумайте сами. Это вы уже умеете.

А теперь напишите следующий текст в блокноте.

Сохраните его в ту папку, которую вы создали(мой сайт). Посмотреть пример.

Разбирать не будем. По моему я описал хорошо. Если вы все сделали правильно, то ссылки будут работать.

Дам совет: Если вам понравился какой-нибудь сайт или страничка, кликните правой кнопкой на ней и выберите Просмотр HTNL-кода. Откроется блокнот и вы в нем увидите уже наш родной HTML. Почти всегда там можно найти что-то новое и интересное для себя. На собственном опыте знаю.

А теперь вперед на следующий урок.


Урок 9

Вставка картинок и их атрибуты.

Ну вот мы дошли до картинок. На этом уроке вы научитесь вставлять картинки в ваши странички, узнаете атрибуты картинки. А пока я вам скажу чем можно сделать картинку. Для начала вам нужны мозги, руки и можно пользоваться стандартным Microsoft Paint, но это нам не пожходит. Я вам посоветую Adobe Photoshop, т.к. сам им пользуюсь. :) Может вы сами знаете хороший графический редактор. Ну этот выбор вы уже сделаете сами.

Для работы с картинками используется тэг <img>. Чтобы вставить картинку на страничку нужен атрибут src="картинка" тэга <img>. Ну ладно дам сразу пример.

<img src="имя картинки">

Пример: <img src="image.jpg">

Этот пример используется если картинка находится в одной папке с этой страничкой на которой мы вставляем картинку.

<img src="имя папки/имя картинки">

Пример: <img src="images/image.jpg">

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

<img src="../имя картинки">

Пример: <img src="../image.jpg">

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

Можно вставить картинку с другого сайта. Пример ниже.

<img src="сайт/имя картинки или сайт/папка/имя картинки">

Пример: <img src="http://www.igorenat.hut.ru/b2.gif или http://www.igorenat.hut.ru/ban/b2.gif">

Этот пример используется, если картинка находится на другом сайте.

А теперь напишите следующий текст в блокноте.

Вместо нашей картинки вставьте свою. Сохраните его. Посмотреть пример.

Разберем.

<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">

это вы уже должны знать
<center><h3>Добро пожаловать!</h3></center>
<h2>Это моя фотогалерея.</h2>
<br><img src="../001.jpg">Эта фотография была сделана на военных действиях в Ираке.

а тут мы вставляем картинку, пишем описание к картинке, а вы уже наверно догадались где находится картинка
</body>
</html>

Теперь поговорим о атрибутах тэга <img>. У этого тэга есть атрибуты как у тэга <p>(<p align="left/right">), но их немного больше. Вот они.

<img src="картинка" align="left">

Картинка будет слева, а текст справа.

<img src="картинка" align="right">

Картинка будет справа, а текст слева.

<img src="картинка" align="bottom">

Картинка будет внизу.

<img src="картинка" align="middle">

Картинка будет посередине.

<img src="картинка" align="top">

Картинка будет сверху.

Кроме атрибута align есть еще другие атрибуты. Вот они.

<img src="картинка" Vspace="цифра">

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

<img src="картинка" Hspace="цифра">

То же самое, что Vspace только Hspace задает расстояние по горизонтали.

<img src="картинка" Width="нирина">

Этот атрибут задает ширину картинки.

<img src="картинка" Height="высота">

Этот высату задает ширину картинки.

<img src="картинка" border="цифра">

Этот атрибут рисует рамку вокруг картинки.

<img src="картинка" Alt="Описание картинки">

Этот атрибут задает описание картинки. Если задать этот атрибут, то при наведении курсора на картинку и держа несколько секунд, то выйдет текст(описание) заданный атрибутом Alt.

Можно задавать сразу несколько атрибутов.

Сразу научу вас вставлять картинку как фон. Для этого у тэга <body> есть атрибут background. Чтобы вставить картинку в фон смотрите ниже.

<body background="картинка">

Пример: <body background="../002.jpg">

Картинка будет как фон странички.

Можно сделать картинку как водяной знак, т.е. при прокрутке скролбара она будет оставаться на месте, а все остальное двигаться.

Пример: <body background="../002.jpg" bgproperties="fixed">

А теперь напишите следующий текст в блокноте.

Сохраните. Посмотреть пример.

Разберем вместе.

<html>
<head>
<title>Все о работе с картинками. Вставка картинок и их атрибуты.</title>
</head>
<body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">

фоном будет картинка как водяной знак, чтобы фоном было апрсто картинка удалите атрибут bgproperties="fixed".
<center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center>
<p align="justify">
<img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" border="2">

вставили картинку. Равняется левому краю, текст справа от картинки на расстоянии 5 пикселей, рамка 2 пикселя. При наведении на картинку мыши появится описание "Война в Ираке".
<font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны. </font>

подробное описание картинки
</p>

<p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p>
<p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p>
<p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p><p>&nbsp</p>

это специально, чтобы проверить будет фоновая картинка как водяной знак или нет(использовался специальный символ &nbsp. О них мы поговорим позже)

подвигайте вниз вверх
</body>
</html>

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

А пока на этом уроке все.


Урок 10

Картинки как ссылки.

На этом уроке вы научитесь ставить ссылку на картинку. Почти то же самое, что и ссылка с текстом. Просто вместо текста ставится картинка. Пример ниже.

<a href="war.htm"><img src="../001.jpg" Vsoace="5" align="left" Alt="Военный сайт..."></a>

Все очень просто. Просто вместо текста ставим тэг с картинкой, настраиваем все нужные атрибуты.

А теперь напишите следующий текст в блокноте.

Вместо моей картинки вставьте свою. Сохраните. Посмотреть пример.

Разберем вместе.

<html>
<head>
<title>Все о работе с картинками. Картинки как ссылки.</title>
</head>
<body background="../002.jpg" bgproperties="fixed" text="yellow" bgcolor="black" link="#CC0000" vlink="#FFFF00" alink="#008000">
<center><h3>Добро пожаловать! Это моя фотогалерея.</h3></center>
<p align="justify">
<a href="../10.htm" target="_blank"><img src="../001.jpg" align="left" Hspace="5" alt="Война в Ираке" border="2"></a>

все просто, если вы читали предыдущий урок, то вы все сами поймете, а для тех, кто не читал еще раз объясню. Ставим ссылку на картинку, которая будет открывать страничку в новом окне, картинка выравнивается по левому краю, текст справа от нее на расстоянии 5 пикселей, при наведении на картинку курсора появится подсказка: Война в Ираке. Все
<font color="green" size="5">Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны.</font>
</p>
</body>
</html>

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


Урок 11

Специальные символы.

Я вам обещая специальные символы. Так вот, на этом уроке о них мы поговорим. Они нам нужны для того, чтобы писать символы типа < > & " и пробел. А вы спросите: А почему просто не поставить < или >? А потому-то и нельзя, потому что, как мы уже знаем, символ < и > используются при написании тэгов. Если вы напишете: Я сравнил 1 < 100 > 20, то у вас < 100 > будет как тэг. :) И что у вас получится? Так вот для чего они и нужны. Список этих символов ниже.

&lt; - символ <

&gt; - символ >

&nbsp; - ставит пробел

&quot; - " (кавычка)

&amp; - & (амперсант)

Пример: <font color="#CC0000"><b><u><i>1&lt;100&gt;20</i></u></b></font> = 1<100>20

Запомните. Спецсимволы не пишутся в тэгах. Они как текст.

Вот такой маленький урок получился, но нужно знать(иногда).


Урок 12

Линии - очень просто.

Сейчас буду учить вас вставлять линии. Они задаются тэгом <hr> и его не надо закрывать. У них есть несколько атрибутов. Они нижу.

<hr align="left">

Ну эти атрибуты мы уже знаем, на линию они действуют так же, как и на текст. У линии они такие же, как у тэга <p> (left, right, center) и других.

<hr width="100%"> или <hr width="30">

Атрибут width устанавливает ширину линии. Можно задать в процентах или в пикселях.

<hr color="#CC0000">

Этот атрибут устанавливает цвет линии.

<hr size="цифра">

Этот атрибут устанавливает толщину линии.

<hr NoShade>

Если написать этот атрибут, то у линии не будет тени. Она не будет объемная.

Можно все эти атрибуты использовать вместе. Это будет выглядеть типа вот этого.

М-м-м-да. Идем дальше.


Урок 13

Списки, нумерация.

Наверно вы уже встречались со списками. Если нет, то сейчас увидите. А на этом уроке мы будем учиться впихивать списки на нашу страничку. Есть несколько видов списков.

Для списков используется тэг <ul></ul>, а для нумерации <ol></ol>.

  • текст 1

  • текст 2

<ul>

<li type="disk">текст 1</li>

<li type="disk">текст 2</li>

</ul>

У списков так же есть атрибут type (тип) и его свойства disk, circle, square, для данного вида используется свойство disk (type="disk").

Просто меняйте значение type на disk, circle или square и вид изменится. Так же можно менять шрифт текста, размер, цвет. Это уже за вами. Вы это все умеете.

Теперь нумерация.

  1. текст 1

  2. текст 2

<ol>

<li type="1">текст 1</li>

<li type="1">текст 2</li>

</ol>

У тэга li в тэге ol тоже есть атрибут type, но с другими значениями - I, i, A, a, 1. В данном примере используется значение по умолчанию (type="1").

Просто заменяйте значение type на I, i, 1, A, a и вид изменится.

Ура. Все. Теперь переходим к таблицам. :)


Урок 14

Создаем простую таблицу.

На этом уроке мы переходим на создание таблицы. Иногда без таблиц даже не обойтись. Сейчас, почти все профессиональные сайты сделаны из таблиц. И мы будем учиться создавать их. Собственноручно. :)

Таблица задается тэгом <table></table>.

Так же таблицы состоят из строк и столбцов. Строка таблицы задается тэгом <tr></tr>, столбец(ячейка) таблицы задается тэгом <td></td>.

У всех этих тэгов есть атрибуты, но о них я вам расскажу в другом уроке.

Пример таблицы в две строки (<tr></tr>) с тремя ячейками (<td></td>):

текст | текст | текст
текст | текст | текст

Отлично. Давайте создадим такую же простую таблицу.

Для начала создадим новую страницу. Напечатайте обязательные тэги. Сохраните в файл. Назовем его table1.html. Теперь между тэгами <body> и </body> напечатайте следующий текст.

У вас должно получиться что-то вроде этого:

<html>

<head>

<head>

<body>

<table>
<tr>
<td bgcolor="#808080">текст</td>
<td bgcolor="#FF9900">текст</td>
<td bgcolor="#808080">текст</td>
</tr>
<tr>
<td bgcolor="#FF9900">текст</td>
<td bgcolor="#808080">текст</td>
<td bgcolor="#FF9900">текст</td>
</tr>
</table>

</body>

</html>

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


Урок 15

Создаем простую таблицу. Ширина, высота.

На этом уроке вы научитесь задавать ширину и высоту таблицам. Хочу напомнить, что ширина и высота устанавливаются атрибутами width(ширина) и height(высота). Ну что, приступим? Напомню, что теперь вы будете все писать собственноручно. На предыдущих уроках я давал вам код, который вы могли просто скопировать и вставить в блокнот.

Откроем блокнот. Напишем обязательные тэги и зададим заголовок окна "Создаем простую таблицу. Ширина, высота". Напечатайте такую же таблицу, как на первом уроке по созданию таблиц. Теперь допечатайте атрибуты, как написано ниже. Нужно чтобы текст в таблице был по середине в каждой строке и ячейке. Воспользуйтесь тэгом <center></center>.

<table>
<tr>
<td width="60" height="40" bgcolor="#808080">текст</td>

здесь для этой ячейки мы задали две атрибуты width и height, а для других одну width, а потому что, если даш ячейке высоту большую, чум у других, то у всех ячеек высота станет как у большей. У рядов тоже самое, если вы дали какому-то ряду большую длину, то у всех рядов длинна станет как у большей.
<td width="60" bgcolor="#FF9900"><center>текст</center></td>
<td width="60" bgcolor="#808080"><center>текст</center></td>
</tr>
<tr>
<td width="60" height="40" bgcolor="#FF9900"><center>текст</center></td>

<td width="60" bgcolor="#808080"><center>текст</center></td>
<td width="60" bgcolor="#FF9900"><center>текст</center></td>
</tr>
</table>

Сохраним в table2.html.

У вас должно получиться что-то вроде этого:

текст | текст | текст
текст | текст | текст

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


Урок 16

Настройка рамки.

На этом уроке я научу вас настраивать рамку таблицы. Рамка настраивается в тэге <table>, а именно атрибутом border="число".

Пример: <table border="3">

Теперь создайте таблицу. Задайте ей рамку равную 3 пикселям. Выглядеть это будет примерно так:

текст в таблице с рамкой

А теперь я вам покажу, как задать рамке цвет. Это делается при помощи атрибута тэга <table> bordercolor="цвет".

Пример: <table border="3" bordercolor="#336699">

Создайте таблицу с рамкой равной 2 пикселя и черным цветом рамки. Это будет выглядить примерно так:

текст в таблице с рамкой

Я вас познакомлю с еще двумя атрибутами тэга  <table>. Это cellspacing и cellpadding. Сначала о cellspacing.

Атрибут cellspacing устанавливает расстояние между ячейками.

Например: <table cellspacing="0">

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

текст в таблице | текст в таблице
текст в таблице | текст в таблице

или

<table cellspacing="6">

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

текст в таблице | текст в таблице
текст в таблице | текст в таблице

Ну как, понятно? :)

А теперь я расскажу вам о cellpadding. Атрибут cellpadding устанавливает расстояние от краев ячейки до ее содержимого(текста, картинок и т.п.).

Пример: <table cellpadding="5">

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

текст в таблице | текст в таблице
текст в таблице | текст в таблице

А теперь создайте таблицу с атрибутами cellspacing="2", cellpadding="3", border="1" и bordercolor="green". У вас должно получиться что-то вроде этого:

текст в таблице | текст в таблице
текст в таблице | текст в таблице

Для тех, кто не смог вот код:

<table cellpadding="3" cellspacing="2" border="1" bordercolor="green">

<tr>

<td bgcolor="#808080">текст в таблице</td>

<td bgcolor="#FF9900">текст в таблице</td>

</tr>

<tr>

<td bgcolor="#FF9900">текст в таблице</td>

<td bgcolor="#808080">текст в таблице</td>

</tr>

</table>

Пока все. Не забудьте повторять несколько раз. Когда будете готовы переходите на следующий урок.


Урок 17

Выравнивание содержимого таблицы.

На этом уроке я расскажу вам как можно сделать так, чтобы содержимое ячейки не только располагалось в середине ячейки, но и вверху и внизу. Это можно сделать при помощи атрибута valign="свойство" (свойства: middle, top, bottom). Этот атрибут задается в тэге <td>. Для примера возьмем ту же нашу таблицу.

текст 1 | текст 2 | текст 3
текст 4 | текст 5 | текст 6

Снизу приведен код этой таблицы.

<table>

<tr>

<td width="60" height="40" bgcolor="#808080" valign="bottom"><center>текст 1</center></td>

<td width="60" bgcolor="#FF9900"><center>текст 2</center></td>

<td width="60" bgcolor="#808080" valign="top"><center>текст 3</center></td>

</tr>

<tr>

<td width="60" height="40" bgcolor="#FF9900" valign="top"><center>текст 4</center></td>

<td width="60" bgcolor="#808080"><center>текст 5</center></td>

<td width="60" bgcolor="#FF9900" valign="bottom"><center>текст 6</center></td>

</tr>

</table>

Как вы видите на ячейке текст 2 и текст 5 я не применил этот атрибут, т.к. хотел показать, что valign="middle" действует как тэг <center>.

Пока все. Повторяйте, закрепляйте и переходите к следующему уроку. :)


Урок 18

Как растянуть ячейки.

На этом уроке я расскажу вам как можно растянуть ячейки. А просто! Для этого еть атрибут collspan и rowspan. Эти два атрибута задаются в тэге <td>. Атрибут colspan - определяет количество столбцов на которые простирается данная ячейка. Атрибут rowspan - количество рядов. Ниже приведены примеры использования этих атрибутов.

Пример использования атрибута colspan. <td colspan"число">

текст 1 |  | текст 2
текст 4 | текст 5 | текст 6

Снизу приведен код этой таблицы.

<table>

<tr>

<td height="40" bgcolor="#808080" colspan="2"><center>текст 1</center></td>

<td width="60" bgcolor="#FF9900"><center>текст 2</center></td>

</tr>

<tr>

<td height="40" bgcolor="#FF9900"><center>текст 4</center></td>

<td width="60" bgcolor="#808080"><center>текст 5</center></td>

<td width="60" bgcolor="#FF9900"><center>текст 6</center></td>

</tr>

</table>

Я задал значение атрибута colspan="2"(чтобы ячейка имела размер 2-ух) и удалил ячейку текст 3, оставив ячейку текст 3 получилась бы вот такая ерунда:

текст 1 |  | текст 2 | текст 3
текст 4 | текст 5 | текст 6

Так как ячейка текст 1 равна двум ячейкам, она вытесняет ячейку текст 3. И я ее просто взял и удалил. Еще я не использовал атрибут width в ячейке текст 1 и текст 4. Так как ячейка текст 1 и так большая.

С атрибутом colspa мы разобрались. Теперь разберемся с атрибутом rowspan.

<td rowspan="число">

текст 1 | текст 2 | текст 3
текст 4 | текст 5

Вы должны написать код этой таблицы сами. Я вам подскажу только, что принцип действия тут тот же и, что вы должны удалить ячейку текст 6.

Если вы не справились с этим заданием, то нажмите сюда.

Вот код таблицы:

<table>

<tr>

<td height="40" width="60" bgcolor="#808080"><center>текст 1</center></td>

<td width="60" bgcolor="#FF9900"><center>текст 2</center></td>

<td width="60" bgcolor="#808080" rowspan="2"><center>текст 3</center></td>

</tr>

<tr>

<td height="40" width="60" bgcolor="#FF9900"><center>текст 4</center></td>

<td width="60" bgcolor="#808080"><center>текст 5</center></td>

</tr>

</table>

Теперь задание посложнее, но вы не боитесь? Так ведь?

Напишите код этой таблицы:

текст 1 |  | текст 3
текст 4 | текст 5

Если вы не справились с этим заданием, то нажмите сюда.

Вот код таблицы:

<table>

<tr>

<td height="40" bgcolor="#808080" colspan="2"><center>текст 1</center></td>

<td width="60" bgcolor="#808080" rowspan="2"><center>текст 3</center></td>

</tr>

<tr>

<td height="40" width="60" bgcolor="#FF9900"><center>текст 4</center></td>

<td width="60" bgcolor="#808080"><center>текст 5</center></td>

</tr>

</table>

Все. Этот урок закончился. Пришлось тут воспользоваться помощью VBScript'ов. :) Остался последний урок по таблицам.


Урок 19

Вложенные таблицы.

И вот наконец-то сейчас последний урок по работе с таблицами. Что же это за таблицы такие? Это просто таблицы находящиеся в ячейках других таблиц, и ничего особенного в них нет, почти ничего.

А теперь давайте посмотрим пример. На нем у нас 2 ряда и по 1-ой ячейке в каждом ряду. В каждой ячейке 1 таблица.

ячейка 1
таблица 2 ячейка 1
ячейка 2
таблица 3 ячейка 1

Код таблицы выглядит так:

<table>

<tr>

<td bgcolor="white"><center>ячейка 1</center>

<table border="1" bordercolor="#CC0000" cellspacing="1">

<tr>

<td bgcolor="black"><font color="white">таблица 2 ячейка 1</font></td>

</tr>

</table>

</td>

</tr>

<tr>

<td bgcolor="white"><center>ячейка 2</center>

<table border="1" bordercolor="#CC0000" cellspacing="1">

<tr>

<td bgcolor="black"><font color="white">таблица 3 ячейка 1<font></font></font></td>

</tr>

</table>

</td>

</tr>

</table>

Этот пример рассчитан на Internet Explorer. На Netscape N нужно будет применять картинку как фон вложенной таблицы. Делается этот так <td background="картинка">. В пустые ячейки (<td></td>) лучше ставить пробул &nbsp; (<td>&nbsp;</td>).

Ну вот и все. С таблицами я закончил. Теперь Будем изучать фреймы!


Урок 20

Вступление. Понятие о фреймах.

С таблицами мы разобрались. Теперь мы будем говорить о фреймах. Что же это такое?

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

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

Давайте создадим эту самую страничку. Назовем ее index.html.

<html>

<head>

<title>Вступление. Понятие о фреймах.</title>

</head>

</html>

Вроде выглядит как простой HTML документ. Опа... Тэга <body> та нет! :) А на этой страничке он нам и не нужен. Да, совсем не нужен. Вместо него нам нужен(обязательно, если хотим фреймы) тэг <frameset></frameset>. Он пишется между тэгами <head> и </head>.

<html>

<head>

<title>Вступление. Понятие о фреймах.</title>

<frameset></frameset>

</head>

</html>

А о атрибутах тэга <frameset> мы поговорим на следующем уроке.


Урок 21

Создаем простой фрейм.

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

Итак, наша страничка будет выглядеть так:

меню

содержимое

Вы сохранили тот документ из предыдущего урока? Если нет, то создайте новый документ. Назовите его index.html и напишите там следующий код:

<html>

<head>

<title>Создаем простой фрейм</title>

<frameset cols="100,*">

<frame
name="menu"
target="main"
src="menu.html">

<frame name="main" src="main.html">

</frameset>

</head>

</html>

А теперь я вам объясню что значит атрибут cols="чразмер"(rows="размер"). Cols - это колонки? т.е. фреймы будут расположены как колонки. Так же можно сделать фреймы в ряд. Для этого вместо cols надо написать rows. У нас документ делится на 2 части: 1 - меню, 2 - содержимое. Так вот, первое число 50 означает, что меню будет размером в 100 пикселей, а знак * означает, что содержимое будет занимать всю оставшуюся часть.

Атрибуты name="main" и name="menu" - это имена фреймов.

Что означает атрибут target="main"? Это значит, что, если пользователь кликнит по ссылке на странице menu.html, то ссылка откроется в содержимом.

Теперь о тэге <frame>. Этот тэг устанавливает какие документы в каком ряду у нас будут грузиться. Первый ряд - меню, второй - содержимое. Если что-то вас не устраивает, то можете поменять эти тэги местами и расположение изменится. Также у тэга <frame> есть атрибут src (<frame src="страничка">). Этот атрибут загружает указанную страничку во фрейм.

Пойдем дальше. У нас в коде видно, что грузятся две странички (menu.html и main.html). Так, если они будут грузиться, то нужно чтобы они было, а их у нас нет. Так давайте создадим эти странички.

Создайте menu.html(меню). Эти страницы уже должны быть простыми, т.е. с обязательными тэгами. Напишите там следующий текст :

<html>
<head>
<title>Меню</title>
</head>
<body  bgcolor="#000000" link="white" vlink="yellow" alink="green">
<a href="тут
сделайте ссылку на страничку" target="main">Урок 1</a><br>
<a href="тут сделайте
ссылку на страничку" target="main">Урок 2</a><br>
<a href="тут сделайте
ссылку на страничку" target="main">Урок 3</a><br>
<a href="тут сделайте
ссылку на страничку" target="main">Урок 4</a><br>
<a href="тут сделайте
ссылку на страничку" target="main">Урок 5</a>
</body>
</html>

Сохраняем в папку, где у нас находится этот index.html. Так же создайте страничку main.html(содержимое). Там уже напечатайте что хотите.

Что означает атрибут target="main"? Это значит, что, если пользователь кликнит по ссылке на странице menu.html, то ссылка откроется в содержимом.

Все. Посмотреть пример.

А теперь тренируйтесь и переходите на следующий урок.


Урок 22

Создаем усложненный фрейм.

Вы уже умеете создавать простые фреймы. Теперь пришло время показать вам как создать более сложный фрейм. Выглядеть это будет так:

лого

меню

содержимое

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

Напишите этот код в блокноте. Сохраните в index.html.

<html>
<head>
<title>Создание простого фрейма.</title>

<frameset rows="100,*">

тут мы разбили на строки. Фрейм будет размером в 100 пикселей.
<frame name="logo" target="main" src="mlogo.html">

сразу устанавливаем страничку для этого фрейма

<frameset cols="100,*">
тут мы на другой строке делаем еще фрейм, но только делаем теперь 2 ячейки

<frame name="menu"
target="main"
 src="menu.html">
<frame name="main"

src="main.html">

тут мы устанавливаем для ячеек странички
</frameset>

</frameset>

</head>
</html>

Создайте main.html и напишите там все что душе угодно.

Создайте logo.html и напишите там следующий код:

<html>
<head>
<title>Меню</title>
</head>
<body bgcolor="#000000" link="white" vlink="yellow" alink="green">
<a href="ссылка" target="main">Урок 1</a>&nbsp<a href="ссылка" target="main">Урок 2</a>&nbsp
<a href="ссылка" target="main">Урок 3</a>&nbsp<a href="ссылка" target="main">Урок 4</a>&nbsp
<a href="ссылка" target="main">Урок 5</a>
</body>
</html>

Создайте menu.html и  напишите там следующий код:

<html>
<head>
<title>Меню</title>
</head>
<body bgcolor="#000000" link="white" vlink="yellow" alink="green">
<a href="ссылка" target="main">Урок 1</a><br><a href="ссылка" target="main">Урок 2</a><br>
<a href="ссылка" target="main">Урок 3</a><br><a href="ссылка" target="main">Урок 4</a><br>
<a href="ссылка" target="main">Урок 5</a>
</body>
</html>

Сохраните все странички в папку с index.html. Посмотреть пример.

А теперь попробуйте сами написать код вот к такому расположению .

лого

содержимое

меню

Те, кто не смог, нажмите сюда.

<html>
<head>
<title>Создание простого фрейма.</title>

<frameset cols="100,*">

<frameset rows="100,*">
 <frame name="logo" target="main" src="mlogo.html">

<frame name="menu" target="main" src="menu.html">
</frameset>

<frame name="main" src="main.html">

</frameset>

</head>
</html>

Остался последний урок. И наверное из уроков по фреймам самый легкий.


Урок 23

Убираем лишнее.

А теперь давайте приглядимся к нашему фрейму. Чего-то не хватает, а наоборот, слишком большие рамки. Нехорошо... Их нужно ликвидировать. :) Для этого у тэга <frameset> есть атрибут border (<frameset border="0">), да тот самый border. Мы уже знаем как он работает. Так давайте уберем эти поля. Ну как? Получилось? С полями мы разобрались. Теперь идем к скролбару(полоса прокрутки).

Чтобы ее убрать нам нужен тэг <frame>, а точнее, его атрибут scrolling. Ок. Он у нас. Теперь будем действовать. Найдите нужный вам тэг <frame> и напишите в нем этот самый атрибут (scrolling="no"). Получилось? Теперь разберемся с отступами.

Отступы можно сократить или наоборот - прибавить. :) Но мы будем их сокращать. Для этого нам нужны 2 атрибута тэга <frame>. Это marginwidth="число в пикселях" marginheight="число в пикселях". Вставьте эти атрибуты в тэг <frame> и поизменяйте их значениея. И вы все сами поймете.

Ну вот и все. Надеюсь этот учебник вам помог хоть освоить этот не язык программирования HTML.


Ссылки

Заработок

http://proforex.narod.ru - Партнерская Программа для вебматеров Рунета. Можно заработать от 3$ до 20$.

http://main.goldenmlm.com - МЛМ проект. Можно реально заработать. Подробней.

http://hack-game.net.ru - "Хакер" - пирамида-игра. Тоже заработок, только это пирамида. Ну они почти одинаковые.

http://www.bxod.com - Заработать 10 центов в день. :)

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

Бесплатный хостинг.

http://www.igorenat.hut.ru/xosting.htm - На этом сайте вы сможете найти сервера, предоставляющие бесплатный хостинг.

Раскрутка сайта.

http://www.igorent.hut.ru/raskrutka.htm - Список серверов, где вы можете раскрутить свой сайт.

Обмен валюты.

ROBOXchange.com - поможет вам легко и быстро произвести обмен e-gold, WebMoney, Яндекс.Деньги, e-port.

Все вместе. :)

http://www.igorent.hut.ru - Много разной информации, скриптов, раскрутка сайта, заработок, ссылок, кодов, читов, свежие вирусные новости и многое другое.

Короче, все это вы сможете найти на сайте http://www.igorent.hut.ru.

Главная


HTML для новичков: Содержание

Содержание

Урок 1 - HTML не язык программирования.

Урок 2 - Создание простой HTML странички.

Урок 3 - Установление цвета фона и текста.

Урок 4 - Размер и шрифт текста.

Урок 5 - Параграфы

Урок 6 - Заголовки.

Урок 7 - Курсив, жирный текст, подчеркнутый текст.

Урок 8 - Ссылки. Все о работе с ссылками.

Урок 9 - Вставка картинок и их атрибуты.

Урок 10 - Картинки как ссылки.

Урок 11 - Специальные символы.

Урок 12 - Линии - очень просто .

Урок 13 - Списки, нумерация.

Таблицы.

Урок 14 - Создаем простую таблицу.

Урок 15 - Создаем простую таблицу. Ширина, высота.

Урок 16 - Настройка рамки.

Урок 17 - Выравнивание содержимого таблицы.

Урок 18 - Как растянуть ячейки.

Урок 19 - Вложенные таблицы.

Фреймы.

Урок 20 - Вступление. Понятие о фреймах.

Урок 21 - Создаем простой фрейм.

Урок 22 - Создаем усложненный фрейм.

Урок 23 - Убираем лишнее.


HTML для новичков: Обязательные тэги

Обязательные тэги

Эти тэги обязательны!

<html>

<head>

</head>

<body>

</body>

</html>


Создание простой HTML странички

 Превет!
Это моя первая страничка.


Установка цвета фона и текста

 Добро пожаловать!
Это моя первая страничка.


Размер и шрифт текста

 Добро пожаловать!
Это моя первая страничка.


Параграфы

Добро пожаловать! Это моя третья страничка.

Автор: Нормурадов Игорь

Меня зовут Игорь

Использование тэга center

Я расскажу немного о себе. Я программист на Visual Basic. Visual Basic - это круто. Создаю сайты на досуге, пишу проги.


Пример с заголовками

Добро пожаловать! Это моя первая страничка.

Заголовок 1-ого уровня

Я расскажу немного о себе. Я программист на Visual Basic. Visual Basic - это круто. Создаю сайты на досуге, пишу проги.


Курсив, жирный текст, подчеркнутый текст

Привет человек!

Это самый первый мой учебкинк по HTML
Автор: Нормурадов Игорь


Ссылки. Все о работе с ссылками.

Добро пожаловать!

На этом сайте вы сможете прочитать анекдоты, интересные статьи и много дрегие.

Аекдоты
Интересные статьи
Другое
Обо мне
Мой второй сайт

Автор: Нормурадов Игорь


Все о работе с картинками. Вставка картинок и их атрибуты.

Добро пожаловать!

Это моя фотогалерея.

Эта фотография была сделана на военных действиях в Ираке.


Все о работе с картинками. Вставка картинок и их атрибуты.

Добро пожаловать! Это моя фотогалерея.

Война в Ираке Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны.


Все о работе с картинками. Картинки как ссылки.

Добро пожаловать! Это моя фотогалерея.

Война в Ираке Эта фотография была сделана на военных действиях в Ираке. Горит нефтяная скважена. Я был против войны в Ираке, но хотел посмотреть на что способны эти две стороны.


Ссылки. Все о работе с ссылками.

Анекдоты

Назад


Ссылки. Все о работе с ссылками.

Другие

Назад


Ссылки. Все о работе с ссылками.

Интересные истории

Назад


Ссылки. Все о работе с ссылками.

Обо мне

Назад


Меню

 Привет! Как дела? Этот пример показывает, как работать с фреймом.


Меню

 Урок 1
Урок 2
Урок 3
Урок 4
Урок 5