ДЗ-2 (создание простой страницы)

advertisement
Язык разметки гипертекста
HTML
Hyper Text Markup Language
Основа языка HTML – теги
Теги – управляющие слова. Они бывают парные(контейнеры) и
непарные.
<body></body> - парный тег
<br>- непарный
У тега могут быть свойства, называемые атрибутами, дающие
дополнительные возможности форматирования текста. Они
записываются в виде пары имя-значение, причем нечисловое
значение заключается в кавычки.
Например:
align="center“ <p align="center“>Новый абзац</p>
size=5
<font size=5 > Шрифт</font>
Структура html-документа
<html>
<head>
<title>Заголовок документа</title>
</head>
<body>
Тело документа
</body>
</html>
Теги разметки HTML-документа
<html></html> - обозначение HTML документа
<head></head> - здесь располагается тег названия
документа и теги для поисковых машин
<title></title> - название документа, отображаемое в
заголовке браузера
<body></body> - Определяет видимую часть документа
1. Заголовок
<h1> head самый большой заголовок</h1>
<h2>…</h2>
<h6> самый маленький заголовок</h6>
<h1 align= “left | center | right “>
2. Разделение на абзацы и перенос строки
<br> -begin row тег принудительного перевода строки.
<p>paragraph </p> - разделяет текст на абзацы.
<P align=“left | center | right | justify”>
Пример:
<p align="left">Коммуникация</p>
Пример
<h1>Это заголовок первого уровня</h1>
<h2>Это заголовок второго уровня</h2>
<h3>Это заголовок третьего уровня</h3>
<h4 align="right">Это заголовок четвертого уровня</h4>
<h5 align="center">Это заголовок пятого уровня</h5>
<h6 align="justify">Это заголовок шестого уровня</h6>
Это просто текст
3. Форматирование шрифта
<i> italyc курсив </i>
<b> bold полужирный</b>
<u> для подчеркивания </u>
<tt> моноширинный шрифт </tt> Verdana
<sup>верхний индекс</sup>
<sub> нижний индекс</sub>
Для вывода математических и химических формул.
y=x2
x1=0
y=x <sup>2</sup>
x <sub>1</sub> =0
<font>текст</font> - указывают параметры шрифта текста
<font face = “название шрифта”
size = “размер шрифта в условных единицах от ±1 до ±7”
color = “red”> цвет текста (по умолчанию - черный).
<font face=“Arial” size=“+2” color=“#FF0000”>
<basefont size=1..7> базовый размер шрифта
По умолчанию размер равен 3
4. Горизонтальная линия
<hr> horisont row
<hr align = “left | center| right” - выравнивание
size = 1..10 - толщина линии
width =“70%” – ширина линии
noshade> - сплошная заливка (без объема)
<body>
Это простой текст.
<br> <font face="Verdana" size=5 color="red"> Этот текст красный,
размера 5.</font>
<br> <font face="Arial" size=2 color=“#0000ff"> Этот текст синий,
размера 2. </font>
</body>
Этапы создания web-страницы
1.
2.
3.
4.
5.
6.
В блокноте набрать текст и с тегами
Сохранить файл с расширением .htm (имя и расширение из
строчных латинских букв). При выбирете в Типе файла Все
файлы. Например, index.htm
Закрыть блокнот
Открыть web-страницу
Для редактирования страницы открыть её с помощью
блокнота
Чтобы сохранить изменения в блокноте Ctrl +S. Обновить
страницу F5.
<HTML>
<HEAD><TITLE>Работа со шрифтами</TITLE>
</HEAD>
<BODY><basefont size="5">
<h1 align="center">ШРИФТЫ</h1>
Шрифты бывают разные<br>
<i> с курсивом </i><br>
<b> полужирные </b><br>
<font face="Arial"> Arial </font><br>
<font face="Times New Roman"> Times New Roman <br>
<font color="red"><tt>красный моноширинный</tt></font><br>
<hr size="3" color="red">
<h2 align="center"> Формулы </h2>
<p align="center">
q=2<sup>n</sup><br>
x<sub>1</sub>+x<sub>2</sub>=10<br>
<hr size="3" color="red" width="70%">
</BODY>
</HTML>
Домашнее задание
Создайте СВОЮ web-страницу по
образцу (пишите о себе, кроме
формул).
Сохраните под своей фамилией с
указанием класса. Например,
islamov9b.htm
Цвета линий должны становиться
короче (70%, 60%, 50%) и светлее
Пришлите страницу учителю
(Морева Е.А. 9gdz@mail.ru
Мустафина А.Т. albina_114@mail.ru)
В теме письма укажите тему:
Фамилия класс Первая страница.
Например,
Исламов 9Б Первая страница
Чтобы вставить знак ±, необходимо
ввести ±
Например, х= ±2
X= ± 2
Фон страницы
Для изменения фона служит атрибут тега <body></body>:
1.
bgcolor-задает цвет в формате #RRGGBB
Например:
< BODY bgcolor="#FF0000">< /BODY>
Цвет страницы красный.
2. background — позволяет задать в качестве фона html-страницы
картинку.
<BODY background="logo.jpg"></BODY>
Download