Учебные материалы для 11х классов. HTML. 1 урок

реклама
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
РАЗДАТОЧНЫЙ МАТЕРИАЛ
ЛЕКЦИИ ПО СОЗДАНИЮ HTML ДОКУМЕНТОВ.
№1
Страницу для интернета можно написать на языке разметки гипертекста или HTML(Hypertext Markup Language).
Файл, написанный на языке HTML, представляет собой простой текст, в который вставлены флаги разметки или
“тэги”(markup tags).
“Теги” или флаги – это определенные последовательности символов, заключенные между знаками < и >.
Флаги разметки задают:
 Как должен быть расположен текст на экране;
 В каком месте должны находиться рисунки;
 Связи с другими WEB – страницами и ресурсами интернет и т. д.
Просмотреть файл, написанный на HTML, можно в программе Microsoft Internet Explorer, Netscape Navigator.
“Теги” имеют начало и конец:
< - начало “тега”
> - конец “тега”
Что за чем пишется в HTML- документе.
1. Любой HTML – документ начинается с “тега” <HTML> и заканчивается “тегом” </HTML>
<HTML>
...
</HTML>
2. Далее между флагами разметки <HEAD> и </HEAD> пишется название страницы или заголовок HTML –
документа, который появляется в рамке окна программы просмотра. Само название страницы пишется между
флагами <TITLE> и </TITLE>
<HTML>
<HEAD>
<TITLE>Моя личная страничка о зимних каникулах</TITLE>
</HEAD>
...
</HTML>
3.
После заголовка пишется тело странички или то, что выводится на экран программой просмотра. Оно пишется между
двумя “тегами” <BODY> и </BODY>
<HTML>
<HEAD>
<TITLE>Моя личная страничка о зимних каникулах</TITLE>
</HEAD>
<BODY>
Привет ! Это страничка о путешествиях!
...
</BODY>
</HTML>
Небольшие выводы по поводу “тегов” или флагов:
Они бывают парные и непарные; открывающие и закрывающие.
Пример:
Парные - <HTML> и </HTML>
Непарные - <BR> - переход на новую строку.
<HR> - рисует линию
Открывающие - <TITLE>; <BODY>
Закрывающие - </TITLE>; </BODY>
N.Kučerenko
Rīgas 80. vidusskola
HTML. 1. stunda
1
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
Флаги форматирования текста. №1_1
1. Задание параграфа.
<p> текст</p> - этот флаг вставляет перед параграфом пустую строку и печатает текст параграфа.
2. Выравнивание текста.
<p align = left> - выравнивание текста параграфа по левому краю
<p align = right> - выравнивание текста параграфа по правому краю
<p align = center> - центрирование текста
Есть еще вариант записи флагов :
<CENTER> текст </CENTER>
3. Задание заголовка.
Заголовок служит для выделения логических частей текста и обозначается прописной или строчной буквой h. Цифра
после буквы показывает уровень заголовка. Всего может быть 6 уровней заголовков.
Как и любой текст, заголовки можно выравнивать по левому, правому краю, центрировать.
Пример:
<h1 align=center>Изучение иностранного языка</h1>
<h2 align=center>Английский язык</h2>
<h3 align=center>Разговорная речь</h3>
<h4 align=center>Грамматика</h4>
<h5 align=center>Времена глаголов</h5>
Пример странички:
<HTML>
<HEAD>
<TITLE>Моя страничка</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=Center>Привет! Это моя личная домашняя страничка!</H1>
<BR>
<H2 Мой город</H2>
<p> Я живу в Риге </p>
<H3 ALIGN = Left>Моя школа</H3>
<p align=left>Я учусь в школе № 38
<H4 ALIGN = Center> Мои увлечения </H4>
<p align=center>Мои увлечения – музыка, спорт.
<H5 ALIGN = Right> Мои друзья </H5>
<p align=right>Мои друзья учатся со мной в одном классе.</p>
<br>
<HR>
<H6 ALIGN = Center> Design “Luch” </H6>
</BODY>
</HTML>
N.Kučerenko
Rīgas 80. vidusskola
HTML. 1. stunda
2
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
ЛЕКЦИИ ПО СОЗДАНИЮ HTML ДОКУМЕНТОВ.
№1_2
Форматирование текста.
1. Задание жирного шрифта.
<B>текст</B>
2. Задание курсива или наклонного шрифта.
<I>текст</I>
3. Задание подчеркивания.
<U>текст</U>
4. Задание мигающего текста.
<Blink>текст</Blink>
5. Задание размера и толщины горизонтальной линии.
<HR SIZE=2 WIDTH=”10%”>
6. Установка размера шрифта.
Размер шрифта измеряется в пунктах(один пункт равен 1/72 дюйма или 0,353 мм). Он задается относительно размера,
установленного в программе просмотра по умолчанию.
<font size=+n>текст</font> - увеличение текста.
<font size=-n>текст</font> - уменьшение текста.
7.
Размещение графического файла на странице.
<IMG SRC=”1.gif”>
Пример применения вышеперечисленных флагов разметки:
<HTML>
<HEAD>
<TITLE>Моя страничка</TITLE>
</HEAD>
<BODY>
<H1 ALIGN=Center>Привет! Это моя личная домашняя страничка!</H1>
<hr>
<H2>Мой город</H2>
<p>Я живу в <FONT SIZE = +2> Риге </FONT>
<H3 ALIGN = Left>Моя школа</H3>
<p align=left>Я учусь в школе № 38
<H4 > Мои увлечения </H4>
<p >Мои увлечения – <B>музыка</b>, спорт.
<H5> Мои друзья </H5>
<p><U>Мои друзья</U> учатся со мной в <I>одном классе</I>.</p>
<IMG SRC=”1.gif”>
<HR SIZE=2 WIDTH=”20%”>
<H6 ALIGN = Center> Design “Luch” </H6>
</BODY>
</HTML>
Пример применения флагов <PRE> и </PRE>:
<HTML>
<HEAD>
<TITLE>Советы по изготовлению страничек</TITLE>
</HEAD>
<BODY>
<PRE>
Избегайте драматического эффекта!
Тиканье, мерцание, перемещение, прокрутка… Эти новые спецэффекты повсюду на Web.
По возможности избегайте пиктограммы “В процессе производства”
- Используйте соответствующий язык
- Не перегружайте вашу страницу большими изображениями
- Проверяйте как можно чаще ссылки на Вашей странице
</PRE>
</BODY>
N.Kučerenko
Rīgas 80. vidusskola
HTML. 1. stunda
3
„Atbalsts vispārējās izglītības pedagogu nodrošināšanai prioritārajos mācību priekšmetos”
Vien. Nr. 2008/0001/1DP/1.2.1.2.2./08/IPIA/VIAA/002
</HTML>
N.Kučerenko
Rīgas 80. vidusskola
HTML. 1. stunda
4
Скачать