КАТЕГОРИИ:
Архитектура-(3434)Астрономия-(809)Биология-(7483)Биотехнологии-(1457)Военное дело-(14632)Высокие технологии-(1363)География-(913)Геология-(1438)Государство-(451)Демография-(1065)Дом-(47672)Журналистика и СМИ-(912)Изобретательство-(14524)Иностранные языки-(4268)Информатика-(17799)Искусство-(1338)История-(13644)Компьютеры-(11121)Косметика-(55)Кулинария-(373)Культура-(8427)Лингвистика-(374)Литература-(1642)Маркетинг-(23702)Математика-(16968)Машиностроение-(1700)Медицина-(12668)Менеджмент-(24684)Механика-(15423)Науковедение-(506)Образование-(11852)Охрана труда-(3308)Педагогика-(5571)Полиграфия-(1312)Политика-(7869)Право-(5454)Приборостроение-(1369)Программирование-(2801)Производство-(97182)Промышленность-(8706)Психология-(18388)Религия-(3217)Связь-(10668)Сельское хозяйство-(299)Социология-(6455)Спорт-(42831)Строительство-(4793)Торговля-(5050)Транспорт-(2929)Туризм-(1568)Физика-(3942)Философия-(17015)Финансы-(26596)Химия-(22929)Экология-(12095)Экономика-(9961)Электроника-(8441)Электротехника-(4623)Энергетика-(12629)Юриспруденция-(1492)Ядерная техника-(1748)
С тэгами. Форматирование
</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>
<TABLE BORDER=1>
<CAPTION> <!--Это заголовок таблицы-->
У таблицы может быть заголовок
</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>
<BODY BGCOLOR = BLUE TEXT = BLACK >
<TABLE ALIGN= “CENTER” BORDER= “2” LEFTMARGIN= “40” RIGHTMARGIN= “40” CELLPACING= “0” CELLPADDING= “40” WIDTH= “100%” HEIGHT= “200”>
<TR ALIGN= “CENTER” BGCOLOR=GRAY>
<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-документ), которая будет содержать небольшую информацию о нем. |
Примечание: Документ должен содержать все представленные выше теги создания объектов.
Контрольные вопросы:
- Что такое HTML?
- Как создается HTML документ?
- Какова структура HTML документа?
- Для чего служит браузер? Какие браузеры вы знаете?
- Какие теги используются для создания таблиц?
|
|
Дата добавления: 2014-01-06; Просмотров: 414; Нарушение авторских прав?; Мы поможем в написании вашей работы!