С тэгами. Форматирование

</TITLE>
</ HEAD>

4. Теперь вводим Тело нашего документа, т.е. то, что будет отражаться в нашем HTML-документе. Для этого в следующей строке наберите

<BODY BGCOLOR=yellow TEXT=blue >

где BGCOLOR=yellow определяет, что фон документа – желтый, а TEXT=blue, что текст будет синего цвета.

5. Далее набираем

<H1>Это заголовок первого уровня</H1>

<H2>Это заголовок второго уровня</H2>

т.е. определяет заголовки разных уровней.

6. Теперь научимся определять пронумерованные и непронумерованные списки списки. Для этого вводим

<OL >Это пример пронумерованного списка

<LI>Первый элемент

<LI>Второй элемент

<LI>Третий элемент

</OL>

<UL TYPE=DISC>Это пример непронумерованного списка

<LI>Первый элемент

<LI>Второй элемент

<LI>Третий элемент

</UL>

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

<I>Это курсив</I>

<B>Это жирный шрифт</B>

<U>Это подчеркнутый текст</U>

<SUP>Это верхний индекс</SUP>

<SUB>Это нижний индекс</SUB>

<BR>Это начало нового абзаца.

<BIG>Это большой шрифт</BIG>

<SMALL> Это маленький шрифт</SMALL>

<STRIKE>Это перечеркнутый шрифт</STRIKE>

8. В следующей строке строке введите <BR><BR>. Это будет означать, что мы дважды перевели строку (нажали клавишу «Enter»).

9. Наберите в следующей строке <MARQUEE >ЭТО БЕГУЩАЯ СТРОКА</MARQUEE>. Таким образом создается бегущая строка.

10. На этом информация, отражающаяся в нашем HTML-документе, закончилась и можно закрыть тэг <BODY>, набрав </BODY>.

11.Теперь запись нашего HTML-документе закончилась, поэтому можно закрыть тэг <HTML>, набрав </HTML>.

12.Закройте блокнот и откройте ваш документ двойным щелчком.

Упражнение 2: Поменяйте текст сайта из задания 1: создайте домашнюю страницу с небольшой информацией о себе, используя, все приведенные теги.

Упражнение 3: Теперь отредактируем наш документ.

Поменяем фон, поставив фоновый рисунок.

1. Скопируйте в свою папку из папки Мои рисунки рисунок формата jpg и переименуйте его на image.jpg

2. Вернитесь в окно своего HTML-документа и выполните команду Вид-Просмотр HTML-кода

3. В открывшемся окне редактора Блокнот редактируем наш HTML-код. В тэге <BODY> вместо тега цвета фона добавьте BACKGROUND="image.jpg".

4. Закройте окно Блокнота, сохранив документ.

5. В окне своего HTML-документа выполните команду Вид-Обновить.

Упражнение 4. Создать следующий HTML- документ, используя тэги < IMG > и <A HREF>

1. Откройте окно текстового редактора Блокнот. Сохраните данный документ как Задание4.html

2. В первой строке нашего документа набираем <HTML>.

3. Чтобы ввести заголовок окна, далее набираем:

<HEAD>

< TITLE> Вставка рисунка и гиперссылки

</TITLE>

</ HEAD>

4. Наберите <BODY BGCOLOR=pink TEXT=black LINK=blue VLINK=red>.

5. Теперь вставим рисунок. Для этого в следующей строке набираем <IMG SRC="image.jpg" ALT="Здесь должен быть рисунок" HEIGHT=250 WIDTH=250 ALIGN=middle ISMAP>

6. Между рисунком и дальнейшим текстом пропустим три строки. Для этого наберите <BR><BR><BR>

7. Теперь вставим гиперссылку на документ Задание1.html Для этого наберите <A HREF="Задание1.html"> Перейти по гиперссылке </A>

8. Закрыть тэг </BODY>.

9. Закрыть тэг </HTML>.

Упражнение 5: Создать следующий HTML- документ, который будет содержать таблицы. Наберите текст программы, сохраните документ как Задание 5.html. Изучите все теги, связанные с созданием таблицы.

<HTML>

<HEAD>

<TITLE>Пример 2</TITLE>

</HEAD>

<H1>Простейшая таблица </H1>

У таблицы может быть заголовок

</CAPTION>

<TR> <TD> Первая строка, первая колонка

</TD>

<TD> Первая строка, вторая колонка

</TD>

</TR>

<TR>

<TD> Вторая строка, первая колонка

</TD>

<TD> Вторая строка, вторая колонка

</TD>

</TR> </TABLE>

</BODY>

</HTML>

Упражнение 6: Создайте в своей папке HTML- документ, содержащий таблицу с объединенными и разделенными ячейками. Наберите текст программы, сохраните как Задание 6.html. Изучите теги Colspan, Rowspan.

<HTML>

<HEAD>

<TITLE>Пример объединения ячеек с помощью COLSPAN и ROWSPAN</TITLE>

</HEAD>

<TH COLSPAN= “2”> Ячейка1 </TH>

</TR>

<TR>

<TD ALIGN= “CENTER” ROWSPAN= “3”> Ячейка 2 </TD>

<TD ALIGN= “CENTER” > Ячейка 3 </TD>

</TR>

<TR>

<TD ALIGN= “CENTER” > Ячейка 4 </TD>

</TR>

<TR>

<TD ALIGN= “CENTER” > Ячейка 5 </TD>

</TR>

</TABLE>

</BODY>

</HTML>

Задания для самостоятельной работы:

№ варианта	Задание
	Составить HTML-документ вашей группы. Документ будет содержать список, таблицы и фотографию вашей группы. На свою фамилию поставьте гиперссылку на свою страничку (ваш HTML-документ), которая будет содержать небольшую информацию о вас.
	Составить HTML-документ вашего курса. Документ будет содержать список групп, таблицу данных, обучающихся на первом курсе вашего факультета. На название вашей группы поставьте гиперссылку на страничку (HTML-документ) вашей группы, которая будет содержать небольшую информацию о ней и фотографию.
	Составить HTML-документ вашего факультета. Документ будет содержать список специальностей, таблицу с информацией, по которым обучаются на вашем факультете и фотографию факультета. На название вашей специальности поставьте гиперссылку на страничку (HTML-документ), которая будет содержать небольшую информацию о вашей специальности.
	Составить HTML-документ вашего университета. Документ будет содержать список факультетов, таблицу с информацией и фотографию университета. На название вашего факультета поставьте гиперссылку на страничку (HTML-документ), которая будет содержать небольшую информацию о нем.
	Составить HTML-документ семьи ваших соседей. Документ будет содержать список членов семьи, таблицу и семейную фотографию. На имени отца поставьте гиперссылку на страничку (HTML-документ), которая будет содержать небольшую информацию о нем.