190 likes | 387 Views
HTML dokumenta struktūra Teksta noformēšana. Mācību materiāls 11. klasē Nataļja Kučerenko 2010. g. СОДЕРЖАНИЕ. Что такое HTML, основные понятия. Структура HTML документа. Примеры. Форматирование текста. Примеры. HTML. Что такое HTML?
E N D
HTML dokumentastruktūraTeksta noformēšana Mācību materiāls 11. klasē Nataļja Kučerenko 2010. g.
СОДЕРЖАНИЕ Что такое HTML, основные понятия Структура HTML документа Примеры Форматирование текста Примеры
HTML • Что такое HTML? • HTML (HyperText Markup Language) - язык разметки гипертекста. • Основное предназначение - указывать браузеру, как разместить элементы на странице при ее отображении на экране монитора. Элементы - текст, рисунки, анимации… • Файл, написанный на языке HTML, представляет собой простой текст, в который вставлены флаги разметки или “тэги”(markuptags).
Что такое Теги “Теги” или флаги – это определенные последовательности символов, заключенные между знаками < и > “Теги” имеют начало и конец: • < - начало “тега” • > - конец “тега” Флаги разметки задают: • Как должен быть расположен текст на экране; • В каком месте должны находиться рисунки; • Связи с другими WEB – страницами и ресурсами интернет и т. д.
Создание документа в HTML • HTML документы записываются в ASCII формате • Документы могут быть созданы и отредактированы в любом текстовом редакторе (Notepad, Notepad++ и т.п.) • Просмотреть файл, написанный на HTML, можно в программе MicrosoftInternetExplorer, NetscapeNavigator
Что за чем пишется в HTML- документе Любой HTML – документ начинается с “тега” <HTML> и заканчивается “тегом” </HTML> • Далее между флагами разметки <HEAD> и </HEAD> пишется название страницы или заголовок HTML – документа, который появляется в рамке окна программы просмотра. Само название страницы пишется между флагами <TITLE> и </TITLE> Например – <HTML> <HEAD> <TITLE>Моя личная страничка о зимних каникулах</TITLE> </HEAD> ... </HTML>
Что за чем пишется в HTML- документе После заголовка пишется тело странички или то, что выводится на экран программой просмотра. Оно пишется между двумя “тегами” <BODY> и </BODY> Например – <HTML> <HEAD> <TITLE>Моя личная страничка о зимних каникулах</TITLE> </HEAD> <BODY> Привет ! Это страничка о путешествиях! ... </BODY> </HTML>
Теги бывают: Небольшие выводы по поводу “тегов” или флагов: Они бывают парные и непарные; открывающие и закрывающие. Пример: Парные - <HTML> и </HTML> Непарные - <BR> - переход на новую строку. <HR> - рисует линию Открывающие - <TITLE>; <BODY> Закрывающие - </TITLE>; </BODY>
Пример документа в HTML Любой гипертекст похож на книгу и может быть разбит на отдельные структурные элементы: • Собственно документ • Главы, параграфы, пункты, подпункты • Абзацы Для каждого из этих элементов в HTML существуют определенные стили, описывающие в каком виде пользователь увидит текст на экране. Пусть мы создали файл minihtml.html:
HTML файл minihtml.html Пример HTML файла, Просмотр HTML документа созданного в Notepad ++ в Internet Explorer
Заголовки документов Каждый HTML-документ должен иметь заголовок, он показывается отдельно и используется, прежде всего, для идентификации документа (например, при поиске) Заголовок должен описывать цель документа и содержать не больше 5-6 слов. Практически во всех browsers заголовок документа виден в верхней части экрана (окна) Для выделения заголовка служат символы: <HEAD><TITLE>Заголовок</TITLE></HEAD> HTML имеет шесть уровней заголовков, имеющих номера с 1 по 6 (заголовок первого уровня является заголовком высшего уровня) Первый заголовок в каждом документе должен быть выделен <H1>. Синтаксис заголовков: <Hy> Текст заголовка</Hy > где y - число от 1 до 6, определяющее уровень заголовка
Заголовки документов Как и любой текст, заголовки можно выравнивать по левому, правому краю, центрировать. Пример: • <h1 align=center>Изучение иностранного языка</h1> • <h2 align=center>Английский язык</h2> • <h3 align=center>Разговорная речь</h3> • <h4 align=center>Грамматика</h4> • <h5 align=center>Времена глаголов</h5>
Форматирование текста Задание параграфа • <p> текст</p> - этот флаг вставляет перед параграфом пустую строку и печатает текст параграфа. Выравнивание текста • <palign = left> - выравнивание текста параграфа по левому краю • <palign = right> - выравнивание текста параграфа по правому краю • <palign = center> - центрирование текста
Пример странички, созданнойв Notepad ++
Форматирование текста Задание жирного шрифта <B>текст</B> Задание курсива или наклонного шрифта. <I>текст</I> Задание подчеркивания <U>текст</U> Задание мигающего текста <Blink>текст</Blink> Задание размера и толщины горизонтальной линии <HR SIZE=2 WIDTH=”10%”> Установка размера шрифта Размер шрифта измеряется в пунктах(один пункт равен 1/72 дюйма или 0,353 мм). Он задается относительно размера, установленного в программе просмотра по умолчанию. <fontsize=+n>текст</font> - увеличение текста <fontsize=-n>текст</font> - уменьшение текста Размещение графического файла на странице. <IMGSRC=”1.gif”>
Пример применения вышеперечисленных флагов разметки:
Удачи в освоении HTML!