Основы HTML. Содержание Урок 1. Общие представления о языке HTML – слайды 3-12 Урок 2. Ввод и форматирование текста Web-страницы – слайды 13-22 Урок 3. - презентация

1 Основы HTML

2 Содержание Урок 1. Общие представления о языке HTML – слайды 3-12 Урок 2. Ввод и форматирование текста Web-страницы – слайды Урок 3. Специальный текст и символы – слайды Урок 4. Графика на Web-страницах – слайды Урок 5. Гиперссылки на Web-страницах – слайды Урок 6. Таблицы – слайды Приложения – Литература –

3 Урок 1 Общие представления о языке HTML На содержание

4 Общие понятия HTML HTML (Hyper Text Markup Language – язык гипертекстовой разметки) является языком программирования, предназначенным для разработки Web-страниц. Язык HTML представляет собой коллекцию управляющих символов – дескрипторов. Для настройки внешнего вида и функционирования элемента страницы устанавливаются его атрибуты. Обозреватели распознают дескрипторы языка HTML и преобразуют код документа в Web-страницу. Приложения обозревателей разрабатываются с учетом мировых стандартов языка HTML, поэтому Web-страницы выглядят одинаково в окнах разных обозревателей. На содержание

5 Историческая справка Сеть Word Wide Web (WWW) родилась в 1989 году в Женеве, Швейцария. Придумал мировую паутину Тим Бернес-Ли. Создание WWW не было для Тима внезапным озарением. Еще в 1980 году им была разработана для личного использования система маркирования гипертекста Enquire – ранний прототип HTML. У HTML был еще более ранний предшественник – GML (Generalized Markup Language – язык обобщенной разметки), разработанный Чарльзом Гольдфардом в 1969 году. В 1986 году этому языку, переименованному в SGML (стандартный GML), был присвоен статус международного стандарта. Язык HTML создавался Тимом Бернес-Ли в соответствии со стандартами SGML. Но идея гиперссылок и URL-адресов в стиле структуры доменных имен www. имя. имя. была впервые реализована именно Тимом Бернес-Ли. С тех пор язык HTML много раз был модифицирован, особенно в 90-тые годы, когда Интернет развивался наиболее динамично. На содержание

6 Создание HTML-документа Для создания HTML-документа подойдет любой текстовый редактор (например, Блокнот). Введите в текстовый файл HTML-код, а затем сохраните этот файл с расширением.html. Приложения-обозреватели автоматически преобразуют код HTML в Web-страницу с текстом, графикой и встроенными объектами мультимедиа. proba.html Все файлы На содержание

7 Просмотр и изменение HTML-кода Чтобы отобразить исходный код Web-страницы, нужно в контекстном меню выбрать команду Открыть с помощью…-> Блокнот или Просмотр HTML-кода. Если вы хотите изменить HTML-код, внесите необходимые изменения в исходный HTML-документ, сохраните его (Файл->Сохранить), затем обновите Web-страницу ( Вид->Обновить или нажмите клавишу F5 или значок на панели инструментов) Открыть с помощью…Блокнот Открыть Изменить Отправить Сохранить как… Сохранить Вставить Копировать На содержание

8 Обязательные дескрипторы HTML параметры страницы текст страницы … - устанавливаются в начале и конце документа. … - заголовок Web-страницы. … - основной раздел Web-страницы. Дескрипторы бывают парные и непарные. Обязательные дескрипторы – парные: открывающие ( ) и закрывающие ( ). Отсутствие закрывающего дескриптора может вызвать ошибку при просмотре Web- страницы. На содержание

9 Дескрипторы раздела заголовка Перечислим некоторые наиболее часто используемые дескрипторы, устанавливаемые в заголовке (между тегами … ) … - заголовок Web-страницы. - непарный дескриптор для установки мета параметров (имя автора, описание Web-страницы и ключевые слова для поисковиков). Этот дескриптор мы рассмотрим позднее. … - код сценария, выполняемого во время загрузки Web-страницы. Об этом дескрипторе мы также поговорим позднее. На содержание

10 Дескрипторы основного раздела В основном разделе Web-страницы содержится текст документа с дескрипторами, которые выполняют форматирование текста и добавление элементов Web- страницы. Эти дескрипторы также бывают как парные (например, … ), так и непарные ( ) Более подробно об этом разделе мы поговорим на следующих уроках. На содержание

11 Практика Откройте Блокнот (Пуск ->Все программы ->Стандартные -> Блокнот) и сохраните документ с расширением.html (Файл -> Сохранить как… ->укажите тип файла Все файлы ->имя документа proba. html) Введите HTML-код из примера. Сохраните документ (Файл -> Сохранить) и закройте его. Найдите сохраненную Web- страницу, откройте ее, обновите и посмотрите, что у вас получилось. Проба Я хочу сделать Web-страницу На содержание

12 Откройте HTML-код (правой кнопкой по Web-странице вызовите контекстное меню и выберите команду Просмотр HTML-кода). Внесите изменения в основной раздел Web-страницы (измените текст между дескрипторами … ). Сохраните изменения (Файл -> Сохранить) и обновите Web-страницу. Поздравляю с успешным началом! На содержание

13 Урок 2 Ввод и форматирование текста Web-страницы На содержание

14 Разметка текста на странице Обозреватели Web-страниц игнорируют все отступы, пробелы и разрывы строк, заданные в текстовом редакторе. Абзацы, введенные в Блокноте, объединяются в сплошной текст в окне обозревателя. Поэтому, чтобы разметить текст Web-страницы, следует воспользоваться специальными дескрипторами HTML. На содержание

15 Создание нового абзаца Выравнивание по левому краю Выравнивание по центру Выравнивание по правому краю Выравнивание по ширине Этот текст не будет переноситься на другую строку, даже если его длина больше ширины окна Для создания абзаца используется пара блочных дескрипторов … в основной раздел Web-страницы (между дескрипторами … ). По умолчанию текст выравнивается по левому краю, слова автоматически переносятся, когда текст достигает края окна обозревателя. Изменить выравнивание можно с помощью атрибута ALIGN в дескрипторе. Дескриптор …, вставленный между тегами … блокирует автоматический перенос слов. Вставьте листинг в основной раздел вашей Web-страницы и посмотрите, что у вас получилось. На содержание

16 Разрыв строки Если текст нужно начать с новой строки, используется непарный дескриптор. Обозреватель покажет текст с новой строки без добавления пустой строки. Дескриптор часто используют для добавления рисунка с новой строки, так как по умолчанию обозреватель отображает рисунок в той же строке, где находится дескриптор. Пробелы и отступы текста Если вы хотите сохранить форматирование текста из Блокнота, воспользуйтесь парой …. Эти дескрипторы заставляют обозреватель сохранять все пробелы и табуляции в тексте, заключенном между ними. Комбинация символов   устанавливает неразрывный пробел. Символы, между которыми стоит неразрывный пробел, не будут переноситься на другую строку в окне обозревателя. Для визуального выделения абзаца можно воспользоваться дескрипторами …, которые автоматически задают отступ от левого и правого краев окна. На содержание

17 Практика Задание 1. Введите в документ proba.html между дескрипторами … строфу из стихотворения «Зеленый шум»: Люби, покуда любится, Терпи, покуда терпится, Прощай, пока прощается, И - Бог тебе судья! Н. А. Некрасов Проверьте, что у вас получилось. Задание 2. Вставьте в конце каждой строки дескриптор. Проверьте, как изменился вид документа. Задание 3. Вставьте перед именем автора три символа  . Посмотрите, как теперь выглядит текст. Добавьте еще необходимое количество символов. На содержание

18 Текстовые заголовки Заголовки шести уровней устанавливаются с помощью парных дескрипторов от … до …, причем размер заголовка уменьшается с каждым уровнем. Дескрипторы заголовков устанавливаются в «тело» Web- страницы и имеют больший приоритет для поисковых программ, таких как Yahoo, Rambler или Яндекс. Поэтому, чем четче заголовок будет выражать суть Web-страницы, тем больше вероятность того, что ваш документ будет найден в Интернете. Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня Заголовок четвертого уровня Заголовок пятого уровня Заголовок шестого уровня Вставьте листинг в вашу Web-страницу и посмотрите, что у вас получилось. На содержание

19 Установка шрифта Дескриптор … позволяет устанавливать параметры текста: шрифт, его размер и цвет. Шрифт выбирается с помощью параметра FASE. В значении параметра следует указать имя шрифта или нескольких шрифтов. Например: текст Число шрифтов в списке не ограничено, но некоторые из них могут отсутствовать на компьютере пользователя. Поэтому обязательно указывайте распространенные шрифты. Обозреватель будет применять шрифты в том порядке, как они записаны. Размер шрифта устанавливается с помощью параметра SIZE, значение которого меняется от 1 до 7. Например: текст Шрифт увеличивается при увеличении размера. На содержание

20 Цвет текста и фона Цвет Шестнадцатеричный код Именной код Белый#FFFFFFWhite Бирюзовый#008080Teal Желтый#FFFF00Yellow Зеленый#008000Green Золотой#FFD700Gold Красно-коричневый#800000Maroon Красный#FF0000Red Лимонный#00FF00Lime Морской волны#00FFFFAqua Оливковый#808000Olive Пурпурный#800080Purple Серебряный#C0C0C0Silver Серый#808080Gray Синий#0000FFBlue Темно-голубой#000080Navy Фуксиновый#FF00FFFuchsia Черный#000000Black Цвет текста можно установить двумя способами: 1. с помощью параметра COLOR в дескрипторе ; 2. с помощью параметра TEXT в дескрипторе. Значение цвета в обоих случаях устанавливается одинаково: либо с использованием шестнадцатеричного кода, либо с помощью именного кода. Цвет фона устанавливает параметр BGCOLOR в дескрипторе На содержание

21 Форматирование текста Для форматирования текста используются следующие дескрипторы: … - полужирный шрифт; … - курсив; … - подчеркивание; - сохраняет форматирование исходного текста; … - надстрочный символ; … - подстрочный символ. Текст для форматирования помещается непосредственно между дескрипторами пары. Например, создадим запись: х 2 -3 х+2=0, корни этого уравнения – х 1 =1, х 2 =2. x 2 -3x+2=0, корни этого уравнения – x 1 =1, x 2 =2 Введите листинг в вашу Web-страницу. Удобнее сначала набрать весь текст, а затем расставьте необходимые дескрипторы. На содержание

22 Практика Задание 1. Введите в документ proba.html в дескриптор параметры BGCOLOR=yellow TEXT=blue текст страницы Измените значения параметров, пользуясь таблицей цветов. Посмотрите, как изменится вид Web-страницы. Задание 2. Введите в документ proba.html между дескрипторами … листинг: Шрифт 1 Шрифт 2 Шрифт 3 Шрифт 4 Шрифт 5 Шрифт 6 Шрифт 7 Измените значения параметров. Посмотрите, как изменится вид Web- страницы. На содержание

23 Урок 3 Специальный текст и символы На содержание

24 Нумерованный список TYPEТип нумерации 11, 2, 3, 4, …..(задан по умолчанию) ii, ii, iii, iv …. II, II, III, IV…. aa, b, c, d, …. AA, B, C, D,….. Для создания нумерованного списка используются парные теги …, задающие начало и конец списка и …, устанавливающие начало и конец каждого пункта. Способ нумерации устанавливается c помощью атрибута TYPE в дескрипторе … Начальный номер пунктов устанавливается c помощью атрибута START в дескрипторе … Если нужно пропустить часть номеров и продолжить нумерацию с другого номера, то это можно сделать c помощью атрибута VALUE в дескрипторе …, присвоив ему нужный номер На содержание

25 Маркированный список TYPEТип маркера disk circle square Для создания маркированного списка вместо тегов … используются теги …, а каждая строка списка - также тегами …. Тип маркера устанавливается значением атрибута TYPE, который может принимать следующие значения: маркированный список окружность круг квадрат На содержание

26 Многоуровневый список Многоуровневый список создать легко: нужно просто вложить список внутрь другого. Попробуйте сделать это самостоятельно. Создание отступов Отступ от левого края создается с помощью следующих тегов: … начало и окончание списка определений; … заголовок термина; … определение термина;   пустая строка; текст абзаца красная строка На содержание

27 Бегущая строка Бегущая строка создается с помощью парного дескриптора …. Текст, расположенный между этими тегами, можно форматировать так же, как обычный текст. Атрибуты этого дескриптора: BEHAVIORспособ выполнения эффекта бегущей строки scroolтекст исчезает за краем страницы; slideтекст остается у левого края страницы; Alternateнаправление перемещения текста меняется на противоположное; BGCOLORцвет фона бегущей строки; DIRECTIONнаправление перемещения текста; leftвлево; rightвправо; HEIGHTвысота бегущей строки; WIDTHширина бегущей строки; HSPASEотступ от полей страницы; LOOPчисло показов текста любое целое число, указывающее число повторов; Infiniteбесконечное повторение. На содержание

28 Комментарии для разработчиков Код Web-страницы может быть достаточно сложным, и со временем разработчик может забыть назначение отдельных блоков. Кроме этого, без комментариев достаточно сложно разобраться в коде постороннему человеку. Поэтому рекомендуется помечать блоки кодов специальными командными символами. Текст, расположенный внутри комментария, не отображается в окне обозревателя и не меняет внешний вид страницы. параметры страницы текст страницы На содержание

29 Урок 4 Графика на Web-страницах На содержание

30 Форматы графических файлов В Интернете используется всего три формата графических файлов: JPEG – для высококачественных полноцветных изображений, фотографий *.jpg; GIF – для рисунков, содержащих текст, линии, фигуры и одноцветные области. В этом формате также сохраняются кнопки, логотипы, анимированные рисунки. PNG – альтернатива двум первым форматам. Этот формат можно использовать во всех вышеперечисленных случаях, но он поддерживается не всеми обозревателями. На содержание

31 Добавление рисунка на Web-страницу Чтобы добавить рисунок, используется непарный тег. Атрибуту SRC присваивается путь к файлу на диске или URL- адрес файла рисунка в Интернете. Если рисунок находится в другой папке, то в ссылке указывается также имя папки. По умолчанию рисунок отображается без границ. При желании границы можно сделать видимыми с помощью атрибута BORDER, присвоив ему значение толщины границы в пикселях. BORDER=0 – границы нет. Рисунки замедляют выгрузку Web-страницы, поэтому существуют специальные приемы, занимающие внимание пользователя на время выгрузки. Например, можно создать две копии рисунка: с высоким и низким разрешением и использовать атрибут LOWSRC:. При загрузке сначала появится файл с низким разрешением, который потом заменяется файлом с высоким разрешением. Атрибут ALT может снабдить рисунок альтернативным текстом, появляющимся вместо незагрузившегося рисунка. На содержание

32 Размещение рисунка Размер изображения задается атрибутами WIDTH и HEIGHT в дескрипторе. Значения этих атрибутов могут быть указаны в пикселях или в процентах от истинного размера рисунка. Можно одному из изображений задать значение auto, чтобы пропорции рисунка сохранялись. Выравнивание рисунка относительно текста задает атрибут ALIGN, принимающий значения: left – рисунок слева от текста; right – рисунок справа от текста; top – текст выровнен по верхнему краю рисунка; middle – текст выровнен посередине; botton – текст выровнен по нижнему краю рисунка. Отступ текста от рисунка управляется атрибутами HSPASE и VSPASE в пикселях– слева и справа, над и под рисунком. Все атрибуты устанавливаются в дескрипторе На содержание

33 Фоновый рисунок Рисунок можно использовать в качестве фона, установив в дескрипторе атрибут BACKGROUND, указав в его значении адрес расположения рисунка. При этом выбранный рисунок замостит область окна обозревателя. Чтобы зафиксировать фон (не давать ему прокручиваться), можно установить атрибут BGPROPERTIES=fixed в дескрипторе myimg.gif На содержание

34 Практика Автор: Задиран Вероника, ученица 10 класса 1. Создайте авторскую страницу (см. пример). 2. Измените фон страницы 3. Измените выравнивание фотографии относительно текста. 4. Улучшите внешний вид страницы, добавив рисунки, анимацию, горизонтальные и вертикальные линии, рамки и т.п. 5. Сохраните web-страничку, дав ей имя (например, avtor.html) Вот и готова твоя первая авторская страница! На содержание

35 Урок 5 Гиперссылки на Web-страницах На содержание

36 Создание гиперссылки мой документ адрес URL на другой Web-странице или путь на диске к другому документу; адрес в Интернете адрес URL на ресурс в Интернете адрес на сервере адрес URL на документ FTP-сервера текст закладки гиперссылка закладка на текущей Web-странице моя почта адрес электронной почты адрес гиперссылки сценарий на языке Web-программирования Гиперссылки создаются с помощью тега …. Атрибуту HREF присваивается следующие значения: гиперссылка На содержание

37 Оформление гиперссылки Цвет ссылки нужно прописывать: link - цвет ссылки, alink - цвет активной ссылки (нажатой), vlink - цвет уже посещенной ссылки. В нашем примере цвета одинаковые, но они могут быть разными, также не карается законом, если цвет ссылки такой же как цвет текста документа (ссылка же выделяется чертой). На содержание

38 Распределение ссылок по картинке Можно создать графическое меню из одной большой картинки таким образом, чтобы каждый элемент рисунка являлся ссылкой. Распределение ссылок по картинке описывается в тэге IMG. USEMAP задает имя элемента рисунка map_name. определяет область на картинке посредством параметров SHAPE и COORDS. SHAPE – форма области. default -- стандартная форма rect -- прямоугольник circle -- круг poly -- многоугольник произвольной формы COORDS – координаты области. Задаются в пикселах. Круг имеет три координаты (центр и радиус), прямоугольник – четыре (координаты противоположных вершин), а для многоугольника вы должны описать каждую его вершину в двух координатах. HREF=адрес – определяет ссылку на схеме На содержание

39 Вставка звукового файла Для того, чтобы вставить в вашу страничку звуковой файл, например, midi-файл, используйте следующую конструкцию:. В этом тэге были использованы следующие параметры: WIDTH – параметр, определяющий ширину midi-плеера. HEIGHT – параметр, определяющий высоту midi-плеера. BORDER – ширина рамки midi-плеера. AUTOSTART – запустить midi-плеер сразу после того, как загрузится документ HTML. Точно также загружаются и видеоролики. На содержание

40 Ссылка в новом окне По умолчанию, файл по гиперссылке открывается в том же окне, что не всегда удобно. Как же сделать так, чтобы картинка (или любой другой файл-документ) открылась в новом окне? Для этого у тэга есть параметр target Значение параметра target="blank" - указывает на то, что документ (картинка в нашем случае), на который ведет ссылка, откроется в новом окне браузера На содержание

41 Практика 1. Вставьте в документ proba.html ссылку на авторскую страницу: имя автора Проверьте, как она работает. 2. Подберите рисунок машины и отдельных ее частей (или растения, или человека и его органов, или план местности и соответствующие фотографии), сохраните их в отдельной папке. Создайте Web-документ, вставьте в него основной рисунок и, используя его как графическое меню, внесите ссылки на остальные рисунки или текст. На содержание

42 Урок 6 Таблицы На содержание

43 Простейшая таблица Таблица создается с помощью пары дескрипторов …, строки и ячейки которой добавляются тегами: … - строка таблицы; … - ячейка таблицы; … - ячейка заголовка. Сначала задается строка таблицы, затем в ней указывается количество ячеек и их содержимое. Потом аналогично задается следующая строка и так далее. Количество ячеек в строках может быть как одинаковым, так и различным, как в приведенном примере фамилия имя отчество На содержание

44 Форматирование текста в ячейке Для выравнивания текста по горизонтали и вертикали используются атрибуты ALIGN и VALIGN, которым присваиваются следующие значения: ALIGN left – влево; center – по центру; rigth – вправо. VALIGN top – вверх; middle – по центру; bottom – вниз. На содержание

45 Форматирование ячеек таблицы Размеры ячеек устанавливаются с помощью атрибутов WIDTH и HEIGHT, которым присваиваются значения как в пикселях, так и в процентах от размеров окна браузера. Для установки цвета ячейки применяется атрибут BGCOLOR, принимающий те же значения, что и при установке цвета фона Web- страницы. Также можно применить фоновый рисунок, используя атрибут BACKGROUND. Все эти атрибуты можно применять как для форматирования всей таблицы, так и для форматирования ее отдельных ячеек. Очень часто таблицы применяют для разметки Web-страницы и использование заливки и фоновых рисунков позволяет разработать интересный дизайн документа. На содержание

46 Границы таблицы По умолчанию обозреватели не показывают границы таблицы. Если же границы нужны, то их ширину можно установить с помощью специальных атрибутов, присвоив им значение в пикселях: BORDER – внешняя граница таблицы; CELLPADDING – горизонтальная граница; CELLCPACING – вертикальная граница. BOLDER=0 – границы нет. По умолчанию цвет границ – серый. Чтобы изменить цвет границы, можно воспользоваться атрибутом BORDERCOLOR, который изменит цвет как внешних, так и внутренних границ. На содержание

47 Выборочная прорисовка границ FRAME – внешние границы таблицы: void – нет внешних границ; above – граница по верхнему краю; below – граница по нижнему краю; rhs – граница по правому краю; lhs – граница по левому краю; hsides – границы по верхнему и нижнему краям; vsides – границы по правому и левому краям; bolder – все внешние границы. RULES – внутренние границы таблицы: none – нет внутренних границ; cols – границы между столбцами; rows– границы между строками; all – все внутренние границы. На содержание

48 Объединение ячеек Для объединения ячеек в дескрипторах и устанавливают следующие параметры: COLSPAN – число столбцов, занятых ячейкой; ROWSPAN – число строк, занятых ячейкой. Следует помнить, что при объединении ячеек число столбцов или строк сокращается на 1. На содержание

49 Группирование столбцов и строк Для группировки столбцов применяются парные дескрипторы: - разбивка на столбцы разных типов (например, столбец заголовков и столбцы данных; - произвольная группировка. В обеих дескрипторах протяженность групп задается атрибутом SPAN. Этот атрибут объединяет указанное количество первых столбцов. Примененный еще раз, он объединяет следующие столбцы: На содержание

50 Приложения Словарь дескрипторов (тегов) Готовые конструкции Начало страницы Таблица Таблица 1 Таблица 2 Таблица 3 Фрейм 1 Фрейм 2 Фрейм 3 Таблицы стилей Глобальная Связанная Сценарии на языке JavaScript На содержание

51 Литература Рева О.Н. HTML. Просто как дважды два. – М.: Изд-во Эксмо, 2006 Алленова Наталья – На содержание