Основы HTML программирования Содержание Урок 1 Общие

Зарегистрируйтесь, чтобы просмотреть полный документ!

Основы HTML программирования

Содержание Урок 1. Общие понятия Урок 2. Создание Web-страницы. Урок 3. Заголовки Урок 4. Абзац Урок 5. Разделитель страницы Урок 6. Перенос текста Урок 7. Управление шрифтом Урок 8. Начертание шрифта Урок 9. Расположение текста Урок 10. Списки Урок 11. Список определений Урок 12. Цвет фона Урок 13. Практическая работа

Контрольные вопросы n n n Что такое язык программирования HTML? Что такое Web- страница? Что такое ТЕГ? Какие особенности описания ТЕГ необходимо учитывать? Какова структура Web-страницы?

Общие сведения Работая в сети Интернет, мы как пользователи привыкли пользоваться сетевыми ресурсами, предоставляемыми различными WEB доменами и хостами. Различные поисковые системы Google. ru, mail. ru, yandex. ru и другие предоставляют услуги по быстрому поиску необходимой информации, которая предоставляется в виде web-страниц. Web-страница - вид документа, отображающий текст, графику, видео, предназначенный для передачи данных по сети интернет. Web-страницы располагаются на web-узлах различных сайтов. Не смотря на то, что страница содержит привычные для нас виды информации, в основе, страница состоит из кодов, написанных на языке HTML.

Общие сведения Страница отображения в браузере Страница отображения в блокноте

Основы HTML- программирования HTML (Hyper Text Markup Language) – язык разметки гипертекста. Назначение языка HTML Языка HTML - служит для функциональной разметки документа, . т. е позволяет определять назначение фрагментов гипертекстового документа. Гипертекст – это текст, в который встроены специальные коды, управляющие дополнительными элементами, такими как форматирование текста, графическими объектами, гиперссылками на другие документы. Разметка – вставка в текст кодов, которые определяют то, как итоговый документ должен отображаться специальной программой – браузером. Каждому фрагменту соответствует свой индивидуальный код, который считывает и выполняет программа- браузер. Коды языка HTML, с помощью которых выполняется разметка называются ТЕГАМИ. ТЕГ- служебная команда записанная между знаками [<] [>]

Основы HTML- программирования Особенности использования тега: • Тег воздействует только на часть документа, поэтому, чтобы ограничить его воздействие используются парные теги, открывающиеся и закрывающиеся. <HTML> </HTML> • Некоторые теги дают разовый эффект, поэтому закрывающейся тег не используется <HR> • Открывающиеся теги могут содержать дополнительные атрибуты, которые дополняют основной тег и разнообразят его действие. <BODY bgcolor =”green” TEXT= “red”> Структура документа HTML. • Документ HTML представляет собой текстовый документ, который можно создать в любом текстовом редакторе (блокнот). • Документ HTML состоит из основного текста документа (предназначенного для пользователя) и тегов разметки.

Основы HTML- программирования Особенности структуры документа HTML. • Документ должен начинаться с тега <HTML> и заканчиваться тегом </HTML>. • Документ HTML состоит из раздела заголовков и тела документа. • Раздел заголовков описывается между тегами <HEAD>…</HEAD> и содержит информацию о документе в целом (служебные команды, вид используемой кодировки). • Встроенные заголовки определяются тегами < TITLE> …. </ TITLE>, между которыми размещается официальный заголовок документа. • Текст основного документа располагается в теле, описанном тегами BODY>…. </BODY> <HTML> <HEAD> <TITLE> Зоголовок документа</TITLE> </HEAD> <BODY> Структура документа HTML </BODY> </HTML>

Практическая работа № 1 Задание 1. Создание web-страницы. 1. Открыть программу БЛОКНОТ(Пуск –Программы – Стандартные - Блокнот). 2. Записать следующий текст: <HTML> <HEAD> <TITLE>Моя страница</TITLE> </HEAD> <BODY> Программируем на языке HTML Моя первая страница </BODY> </HTML> 3. Сохранить документ (Файл - Сохранить как…) под именем my_page. html на Рабочем столе. 4. Открыть программу браузер Internet Explorer 5. Открыть документ my_page. html (Файл Открыть) в программе Internet Explorer и просмотреть полученный результат. В окне должен отобразиться текст «Программируем на языке HTML Моя первая страница» 6. Закрыть программы Блокнот и Internet Explorer.

Практическая работа № 1 Контрольное задание 1. Разработка Web-страницы. 1. На диске С: создать папку my_project. 2. В созданной папке my_project создать с помощью программы <Блокнот> webстраницу page 1. html следующего вида:

Основы HTML- программирования Заголовки Язык HTML поддерживает шесть уровней заголовков определенных тегами от <H 1> до <H 6>. Цифра обозначает величину размера заголовка (самый большой размер 1). ПРИМЕР <HTML> <HEAD> <TITLE>Зоголовок документа</TITLE> </HEAD> <BODY> <H 1>МОЯ ПЕРВАЯ СТРАНИЦА</H 1> <H 2> МОЯ ПЕРВАЯ СТРАНИЦА </H 2> <H 3> МОЯ ПЕРВАЯ СТРАНИЦА </H 3> <H 4> МОЯ ПЕРВАЯ СТРАНИЦА </H 4> <H 5> МОЯ ПЕРВАЯ СТРАНИЦА </H 5> <H 6> МОЯ ПЕРВАЯ СТРАНИЦА </H 6> </BODY> </HTML>

Основы HTML- программирования АБЗАЦЫ Для обозначения абзацев используется парные теги ПРИМЕР <HTML> <HEAD> <TITLE> Зоголовок документа</TITLE> </HEAD> <BODY> <H 1>Язык HTML</H 1> Этап развития Интернета начался в начале 90 годов с появлением нового протокола обмена информацией. Этот протокол называется HTTP (Hyper Text Transfer Protocol)-протокол передачи гипертекста </BODY> </HTML>

Основы HTML- программирования РАЗДЕЛИТЕЛИ АБЗАЦЕВ Горизонтальная линия- удобное, наглядное средство отделения заголовка от основного текста, определяемое тегом <HR> ПРИМЕР <HTML> <HEAD> <TITLE> Зоголовок документа</TITLE> </HEAD> <BODY> <H 1>Язык HTML</H 1> <HR> Этап развития Интернета начался в начале 90 годов с появлением нового протокола обмена информацией. Этот протокол называется HTTP (Hyper Text Transfer Protocol)-протокол передачи гипертекста </BODY> </HTML>

Основы HTML- программирования ПЕРЕНОС ТЕКСТА НА СЛЕДУЮЩУЮ СТРОКУ В некоторых случаях появляется необходимость текст переносить на следующую строку. Сделать это можно используя одиночный тег установленный в конце строки. ПРИМЕР <HTML> <HEAD> <TITLE> Моя страница</TITLE> </HEAD> <BODY> <H 1>Язык HTML</H 1> <HR> Этап развития Интернета начался в начале 90 годов с появлением нового протокола обмена информацией. Этот протокол называется HTTP (Hyper Text Transfer Protocol)- протокол передачи гипертекста </BODY> </HTML>

Практическая работа № 2 Контрольное задание 1. Разработка Webстраницы. 1. На диске С: создать папку my_sate. 2. В созданной папке my_project создать с помощью программы <Блокнот> webстраницу bumerang. html следующего вида:

Основы HTML- программирования Управление стилем шрифта Для задания таких параметров как размер цвет и начертание шрифта используется парный тег … Этот тег влияет на весь текст заключенный между парными тегами. В открывающемся теге указываются атрибуты: SIZE – задает размер шрифта (1 -7). По умолчанию используется 3. FACE – задает вид шрифта. COLOR – задает цвет шрифта. Цвет можно описывать словами BLUE или шестнадцатиричным цифровым кодом #0000 FF.

Базовая таблица цветов

Основы HTML- программирования Начертание шрифта Для изменения начертания шрифта используется группа тегов <HTML> <HEAD> <TITLE>УПРАВЛЕНИЕ СТИЛЕМ ШРИФТА</TITLE> </HEAD> <BODY> НАЧЕРТАНИЕ ШРИФТА <HR> ОБЫЧНЫЙ ПОЛУЖИРНЫЙ КУРСИВ ПОДЧЕРКИВАНИЕ <S>ВЫЧЕРКИВАНИЕ</S> КОМБИНИРОВАННЫЙ </BODY> </HTML>

Основы HTML- программирования Управление расположением текста Без использования специальных атрибутов, текст расположенный на странице будет привязан к левому краю. Как правило, для грамотного и красивого оформления необходимо некоторые фрагменты текста располагать в разных позициях страницы. Для этого в теге абзаца можно задавать атрибуты управляющие расположением текста. <HTML> <BODY> ПО ЦЕНТРУ ПО ЛЕВОМУ КРАЮ ПО ПРАВОМУ КРАЮ ПО ШИРИНЕ СТРАНИЦЫ. </BODY></HTML>

Основы HTML- программирования Создание списков Язык HTML позволяет использовать три вида списков: • Упорядоченный (нумерованный) • Неупорядоченный (маркированный) • Список определений Упорядоченный список всегда располагается между парными тегами <OL>… </OL> Неупорядоченный список <UL>…</UL> Внутри списка располагаются элементы заключенные между тегами <LI>…</LI> <HTML> <BODY> <H 4>Список учащихся</H 4> <OL> <LI>Иванов</LI> <LI>Петров</LI> <LI>Сидоров</LI> </OL> <H 4>Меню блюд</H 4> <UL> <LI>Пельмени</LI> <LI>Вареники</LI> <LI>Манты</LI> </UL> </BODY> </HTML>

Основы HTML- программирования Список определений В некоторых случаях появляется необходимость на странице расположить словарь терминов или определений№ Для этого используется следующая последовательность ТЕГ. <HTML> <HEAD> <TITLE>Списки определений</TITLE> </HEAD> <BODY> <H 4>Словарь терминов</H 4> <DL> <DT>Информатика</DT> <DD>Наука, изучающая процессы передачи, обработки, хранения и приема информации</DD> <DT>HTML</DT> <DD>Язык разметки гипертекстового документа</DD> </DL> </BODY> </HTML>

Основы HTML- программирования Цвет фона Изменить цвет фона текста на страницы можно задав параметр bgcolor и text в теге <BODY>. Формат записи. BGCOLOR=”цвет” – задает цвет фоновой заливки. TEXT=”цвет” – определяет цвет текста страницы. <HTML> <BODY bgcolor="BISQUE" text="BLACK"> <H 1>Изменяем цвет фона</H 1> </BODY> </HTML>

Задание. Разработать страницу следующего вида

Скачать презентацию Основы HTML программирования Содержание Урок 1 Общие

e871cb4a1ba42df29ff9ea5151b1bce2.ppt

Количество слайдов: 23