Учебные материалы для 11х классов. HTML. 1 урок
advertisement
„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
