Презентация по теме «Язык HTML»


Чтобы посмотреть презентацию с оформлением и слайдами, скачайте ее файл и откройте в PowerPoint на своем компьютере.
Текстовое содержимое слайдов:

Язык HTML
ОглавлениеСтруктура Web-страницы Цветовая схема Web-страницыЗаголовкиФорматирование шрифтаФорматирование текстаСписки - нумерованный список - маркированный список - многоуровневый список - список определенийГипертекстовые ссылки и якоря - гипертекстовые ссылки - якоряРисунки на Web-страницахСоздание таблиц в языке HTML Бегущая строкаФреймы Структура Web-страницы Документ должен начинаться с тега <HTML> и заканчиваться соответствующим закрывающим тегом </HTML>.Документ HTML состоит из раздела заголовков и тела документа.Раздел заголовков расположен между тегами <HEAD> и </HEAD> и содержит информацию о документе в целом. В частности, этот раздел должен содержать внутри себя теги <TITLE> и </TITLE>, между которыми размещается официальный заголовок документа. Сам текст документа располагается в теле документа. Тело документа располагается между тегами <BODY> и </BODY>.ОглавлениеСледующий слайдПредыдущий слайд



Цветовая схема Web-страницыЦвет Код Название ЦветКод Название черный#000000 blackлиловый #FF00FFmagentaбелый#FFFFFF white бирюзовый #00FFFFcyan красный#FF0000 redжелтый #FFFF00 yellow зеленый #00822Bgreen золотой #FFD800gold синий#0000FF blue оранжевый #FFA500 orange серый#808080 gray коричневый#A82828brown пурпур-ный#800080purple бледно-голубой #E8FEFF azure ярко-зеленый#00FF00lime бледно-фиолетовый #FF90FFviolet Следующий слайдПредыдущий слайдОглавление


Цветовая схема Web-страницыОсновную цветовую схему Web-страницы можно задать в теге <BODY> с помощью атрибутов:BGCOLOR= - цвет фонаTEXT= - цвет текстаLINK= - цвет текста ссылкиALINK= - цвет текста активной ссылкиVLINK= - цвет текста просмотренной ссылкиНежелательно использовать буквы белого цвета, так как они могут оказаться невидимыми при печати на принтере.Следующий слайдПредыдущий слайдОглавление





Пример 1. С помощью программы Блокнот создайте файл index.htm и сохраните его в своей папке. Запустите файл на выполнение.<html><head><title> Первое знакомство с тегами HTML </title></head><body bgcolor=blue text=yellow alink=white vlink=pink> </body></html>ОглавлениеПредыдущий слайдСледующий слайд






Заголовки В тексте Web-страницы могут быть заголовки различного уровня. Они записываются внутри тегов <H1>…</H1>, <H2>…</H2> … <H6>…</H6>. Заголовки можно располагать слева, справа и по центру. Для этого используется атрибут ALIGN= “значение”. Значение может быть LEFT, RIGHT, CENTER. Например, ALIGN=“LEFT”. Следующий слайдПредыдущий слайдОглавление



Пример 2.Откройте в программе Блокнот файл index.htm и между тегами <body> </body> впишите следующие команды. Сохраните файл. Запустите на выполнение.<h1> Заголовок первого уровня </h1><h2> Заголовок второго уровня </h2><h3> Заголовок третьего уровня </h3><h4> Заголовок четвертого уровня </h4><h5> Заголовок пятого уровня </h5><h6> Заголовок шестого уровня </h6><h1 align=“center”> Заголовок первого уровня, выровненный по центру </h1>ОглавлениеПредыдущий слайдСледующий слайд





Форматирование шрифтаШрифты задаются следующими тегами: <B>…</B> - жирный шрифт <S>…</S> - зачеркнутый<U>…</U> - подчеркнутый <TT>…</TT> - равноширинный <I>…</I> - курсив <EM>…</EM> - выделение<SUB>…</SUB> - верхний индекс <SUP>…</SUP> - нижний индекс<STRONG>…</STRONG> - усиленное выделениеДля задания размера и цвета шрифта служит тег <FONT> и </FONT>. Тег <FONT> должен иметь хотя бы один из двух атрибутов: SIZE= задает размер шрифта, от 1 до 7COLOR= задает цвет шрифта (можно указывать код или название)Менять вид шрифта можно с помощью атрибута FACE=название шрифтаСледующий слайдПредыдущий слайдОглавление







Форматирование текстаАбзацы задаются следующими тегами: <P>…</P>. Также как и заголовки они могут быть выровнены с помощью атрибута ALIGN. Перевод строки осуществляется с помощью тега <BR>.Горизонтальный разделитель (горизонтальная линия) задается с помощью тега <HR>Следующий слайдПредыдущий слайдОглавление



Пример 3.Откройте в программе Блокнот файл index.htm и перед закрывающим тегом </body> впишите следующие команды. Сохраните файл. Запустите на выполнение.<hr>Обычный текст <br><b> Жирный текст </b> <br><i> Курсив </i> <br><u> Подчеркнутый </u> <br><b><i><u> Жирный подчеркнутый курсив </u></i></b> <br><tt> Равноширинный </tt> <br><em> Выделение </em> <br><strong> Усиленное выделение </strong> <br><font size=5 color=white face=“Arial”> Шрифт размера 5, белого цвета, тип Arial </font><hr>ОглавлениеПредыдущий слайдСледующий слайд







СпискиСписки бывают нумерованными и маркированными. Кроме того, комбинируя эти 2 типа, можно создавать вложенные многоуровневые списки.Нумерованный список представляет собой набор элементов (абзацев) с порядковыми номерами и формируется при помощи контейнера <OL> … </OL>, а каждый элемент списка начинается с одиночного тега <LI>. Вид и тип нумерации при этом зависят от атрибутов тега <OL>: возможна нумерация арабскими цифрами (TYPE=1), прописными и строчными латинскими буквами (TYPE=A или TYPE=a), а также прописными и строчными римскими цифрами (TYPE=I или TYPE=i). Можно задать с какой цифры (буквы) начать нумерацию, для этого используется атрибут START=значение. Следующий слайдПредыдущий слайдОглавление



Списки (часть 2)Маркированный список представляет собой набор элементов, предваряемым тем или иным специально выбранным символом – маркером. Такой список создается при помощи контейнера <UL>…</UL>, а каждый его элемент предваряется одиночным тегом <LI>. Маркеры в списках могут иметь один из трех возможных видов: круг (по умолчанию), окружность и квадрат. Для выбора типа маркера используется атрибут TYPE тега <UL>. Он может принимать следующие значения: circle (окружность), square (квадрат), disc (круг). Следующий слайдПредыдущий слайдОглавление



Пример 4Откройте в программе Блокнот файл index.htm и перед закрывающим тегом </body> впишите следующие команды. Сохраните файл. Запустите на выполнение.<font size=4> <b> нумерованный список, начиная с 3 </b> </font><ol type=1 start=3> <li> Первый элемент списка </li> <li> Второй элемент списка </li> <li> Третий элемент списка </li></ol> <font size=4> <b> маркированный список, маркер квадрат </b> </font><ul type=square> <li> Первый элемент списка </li> <li> Второй элемент списка </li> <li> Третий элемент списка </li></ul>   Следующий слайдПредыдущий слайдОглавление





Многоуровневые (вложенные) спискиМногоуровневый список может состоять из нескольких вложенных друг в друга списков, каждый из которых формируется при помощи собственного контейнера <OL>…</OL> или <UL>…</UL> и может иметь произвольную нумерацию. При этом для вложенных списков браузер автоматически увеличивает отступ слева для нумерованных (маркированных) строк. Следующий слайдПредыдущий слайдОглавление


Пример 5Откройте в программе Блокнот файл index.htm и перед закрывающим тегом </body> впишите следующие команды. Сохраните файл. Запустите на выполнение.<font size=4> <b> вложенный список </b> </font><ul> <li> Глава 1. <ol> <li> пункт 1.1. <li> пункт 1.2. </ol> <li> Глава 2. <ol> <li> пункт 2.1. <li> пункт 2.2. </ol> </ul> Следующий слайдПредыдущий слайдОглавление








Списки определенийСписок определений состоит из нескольких терминов и пояснений к ним. Список определений формируется при помощи собственного контейнера <DL>…</DL>. Каждый термин записывается в контейнере <DT>…</DT>. Пояснение к термину записывается в контейнере <DD>…</DD>. Следующий слайдПредыдущий слайдОглавление



Пример 6Откройте в программе Блокнот файл index.htm и перед закрывающим тегом </body> впишите следующие команды. Сохраните файл. Запустите на выполнение.<font size=4> <b> список определений </b> </font><dl><dt> ТЕРМИН 1 </dt><dd> Пояснение к термину 1 </dd><dt> ТЕРМИН 2 </dt><dd> Пояснение к термину 2 </dd><dt> ТЕРМИН 3 </dt><dd> Пояснение к термину 3 </dd></dl> Следующий слайдПредыдущий слайдОглавление



Гипертекстовые ссылки и якоряСпособность Web-страниц содержать ссылки на другие Web-страницы – одна из наиболее привлекательных особенностей Всемирной паутины.Создать гипертекстовую ссылку очень просто. Для этого используют теги <A> и </A>.При создании гиперссылки обязателен атрибут HREF=. Его значением является адрес, на который указывает ссылка. Текст ссылки размещают между тегами <A> и </A>. При отображении документа в браузере текст ссылки обычно подчеркивается и отображается синим цветом. Щелчок на ссылке приводит к переходу по заданному адресу.Следующий слайдПредыдущий слайдОглавление



Пример 7С помощью программы Блокнот создайте файл index2.htm и сохраните его в своей папке. Запустите файл на выполнение.<html><head><title> Знакомство с гиперссылками </title></head><body><a href=index.htm> Пробный файл с тегами </a><br></body></html>Следующий слайдПредыдущий слайдОглавление






Гипертекстовые ссылки и якоряЕсли создаваемая страница очень большая, то в ее тексте можно расставить якоря (метки, закладки). Они отмечают смысловые разделы и помогают быстро перемещаться по документу.Чтобы поставить якорь также используются теги <A> и </A>, но вместо атрибута HREF= для якоря используют атрибут NAME=. Значением этого атрибута является имя якоря. Оно может состоять только из латинских букв и цифр и не должно содержать пробелы.При создании гиперссылки на установленный якорь надо указать имя якоря в конце адреса после имени документа, отделив его символом “#”.Следующий слайдПредыдущий слайдОглавление



Пример 8Откройте в программе Блокнот файл index.htm. В начале страницы сделайте закладку (якорь) с помощью команды:<a name=begin> </a>Перед списками поставьте закладку с помощью команды:<a name=sp> </a>В конце файла, перед закрывающим тегом </body> сделайте гиперссылку на начало страницы с помощью команды:<a href=#begin> на начало </a>Сохраните файл. Откройте в программе Блокнот файл index2.htm. В конце файла сделайте гиперссылку на файл index.htm к спискам, с помощью команды:<a href=index.htm#sp> в файл index.htm к спискам </a>Запустите на выполнение оба файла.Следующий слайдПредыдущий слайдОглавление






Рисунки на Web-страницах Для размещения рисунков в документе служит одиночный тег <IMG>. Он должен содержать обязательный атрибут SRC=. Значением атрибута является адрес файла изображения. При загрузке документа рисунок также загружается и отображается в том месте документа, где расположен тег <IMG>.Изображение переносится на Web-страницу с сохранением размера. Если необходимо можно задать нужные размеры рисунка с помощью атрибутов WIDTH= (ширина) и HEIGHT= (высота). Они задаются в пикселях или процентах.Следующий слайдПредыдущий слайдОглавление


Рисунки на Web-страницах (часть 2)По умолчанию рисунок выравнивается по нижней границе текста абзаца. Можно изменить это значение с помощью атрибута ALIGN тега <IMG>. Атрибут ALIGN принимает следующие значения: Следующий слайдПредыдущий слайдОглавлениеTOPверхняя граница изображения совмещается с верхней границей текстовой строкиMIDDLEсередина изображения совмещается с серединой текстовой строкиBOTTOMнижняя граница изображения совмещается с верхней границей текстовой строки.



Рисунки на Web-страницах (часть 3)Выравнивание рисунка по горизонтали задается с помощью тега <P>.Атрибуты HSPACE и VSPACE позволяют задать размеры пустого пространства (по горизонтали и вертикали), которое будет оставлено между изображением и другими объектами страницы.К изображению с помощью атрибута <ALT>, можно добавить название, которое появляется вместо иллюстрации (если по какой-либо причине рисунок не выводится), или в форме всплывающей строки, при указании на рисунок мышью.Изображение, как и текст, можно использовать в качестве ссылки. Для этого тег <IMG> должен быть помещен между тегами <A> и </A>.Следующий слайдПредыдущий слайдОглавление



Пример 9Откройте в программе Блокнот файл index2.htm. В конце файла перед закрывающим тегом </body>, впишите следующие команды. Сохраните файл. Запустите на выполнение. Перед этим скопируйте в свою папку файлы a01-1.jpg и a05-1.jpg из папки «Мои рисунки»/«Из мультфильмов».<img src="A01-1.jpg"><br> <hr><img src="A05-1.jpg" width=150 height=150 alt="Маугли"><br> <hr><img src="C:\Documents and settings\студент\Мои документы\Мои рисунки\Из мультфильмов\A03-1.jpg"><br> <hr><img src="C: \Documents and settings\студент\Мои документы\Мои рисунки\Popular\dsa.wmf" alt="Роза" width=160 height=250>Следующий слайдПредыдущий слайдОглавление







Создание таблиц в языке HTML Таблица начинается с открывающего тега <TABLE> и заканчивается закрывающим тегом </TABLE>.Между тегами <TABLE> и </TABLE> может один раз встретиться пара тегов <CAPTION> и </CAPTION>, определяющая заголовок таблицы.Далее следуют теги <TR> и </TR>, определяющие строки таблицы. Каждая строка таблицы состоит из ячеек. Ячейки помечаются либо тегами <TH>, содержащими заголовки столбцов и строк, либо тегами <TD>, содержащими обычные данные.Из специфических атрибутов таблиц можно указать атрибут BORDER=, который позволяет создавать рамку вокруг таблицы и вокруг отдельных ячеек. Значением этого атрибута является толщина рамки в пикселях.Следующий слайдПредыдущий слайдОглавление




Создание таблиц в языке HTML (часть 2)Содержимое ячеек таблицы можно выравнивать по горизонтали с помощью атрибута ALIGN по левому краю, по правому краю, по центру. Содержимое ячеек таблицы можно выравнивать по вертикали с помощью атрибута VALIGN по верхнему краю (TOP), по нижнему краю (BOTTOM), по центру. Расстояние между ячейками в пикселях задается с помощью атрибута CELLSPACING. Отступ от границы до содержимого ячейки задается с помощью атрибута CELLPADDING.Следующий слайдПредыдущий слайдОглавление



Создание таблиц в языке HTML (часть 3)С тегами <TH> <TD> могут использоваться атрибуты COLSPAN и ROWSPAN, которые позволяют объединять ячейки. Ячейки объединяются слева направо и сверху вниз. Эти параметры могут использоваться в комбинации.COLSPAN=n – объединение n ячеек в строкеROWSPAN=n – объединение n ячеек в столбцеС помощью атрибутов HEIGHT и WIDTH можно задавать высоту и ширину ячеек. Их значение может задаваться в пикселях или процентах.Следующий слайдПредыдущий слайдОглавление



Пример 10Следующий слайдПредыдущий слайдОглавлениеОткройте в программе Блокнот файл index2.htm. В конце файла перед закрывающим тегом </body>, впишите следующие команды. Сохраните файл. Запустите на выполнение.<table align=“center” border=3><caption> <b> <font size=5> Таблица 1 </font> </b> </caption><tr> <th> заголовок 1 столбца </th><th> заголовок 2 столбца </th><th> заголовок 3 столбца </th> </tr><tr> <td> Данные 2 строки и 1 столбца </td><td> Данные 2 строки и 2 столбца </td><td> Данные 2 строки и 3 столбца </td> </tr>








Пример 10 (продолжение)Предыдущий слайдОглавление<tr> <td> Данные 3 строки и 1 столбца </td><td> Данные 3 строки и 2 столбца </td><td> Данные 3 строки и 3 столбца </td> </tr><tr> <td> Данные 4 строки и 1 столбца </td><td> Данные 4 строки и 2 столбца </td><td> Данные 4 строки и 3 столбца </td> </tr></table>Следующий слайд







Пример 11Следующий слайдПредыдущий слайдОглавлениеОткройте в программе Блокнот файл index2.htm. В конце файла перед закрывающим тегом </body>, впишите следующие команды. Сохраните файл. Запустите на выполнение.<table align=left border=2><caption> <b> <font size=5> Таблица 2 </font> <b> </caption><tr> <th rowspan="2"> Фамилия </th><th rowspan="2"> Имя </th><th colspan="2"> Данные </th> </tr><tr> <th> Рост </th><th> Вес </th></tr>







Пример 11 (продолжение)Следующий слайдПредыдущий слайдОглавление<tr> <td> Иванов </td><td> Петр </td><td> 178 </td> <td> 67 </td> </tr><tr> <td> Сидоров </td><td> Алексей </td><td> 157 </td> <td> 78 </td> </tr> </table>








Бегущая строкаБегущая строка представляет собой текст, перемещающийся от одного края страницы к другому. Как только открывается такая страница, текст начинает бежать подобно строкам рекламных щитов. Бегущие строки создаются с помощью команды:<MARQUEE> текст </MARQUEE>В этой команде можно использовать следующие атрибуты:BGCOLOR – цвет фонаHEIGHT – высота строкиСледующий слайдПредыдущий слайдОглавление




Бегущая строка (часть 2)BEHAVIOR (SCROLL – движение по кругу, SLIDE – движение однократное, ALTERNATE – движение взад-вперед) – тип отображения на экранеDIRECTION (RIGHT, LEFT) – направление движения слева направо или справа налевоLOOP – число проходов строкиSCROLLAMOUNT – движение по шагамSCROLLDELAY – временной интервал между шагамиHSPACE, VSPACE – расстояние от строки до других элементов страницы.Следующий слайдПредыдущий слайдОглавление




Пример 12Предыдущий слайдОглавлениеОткройте в программе Блокнот файл index2.htm. Перед рисунками добавьте бегущую строку с помощью команды:<marquee bgcolor="pink" height="20" direction="right" behavior="alternate"> Рисунки </marquee>Перед таблицами добавьте бегущую строку с помощью команды:<marquee bgcolor="Blue" height="40" direction="left" behavior="scroll"> <font size=6 color=yellow> <b> Таблицы </b> </font> </marquee> Сохраните файл. Запустите на выполнение.Следующий слайд




ФреймыФрейм – обособленная область web-документа со своими полосами прокрутки. С помощью фреймов web-страница разделяется на несколько независимых областей. При этом можно открыть документ в одном фрейме по ссылке, находящейся в другом фрейме.Фреймы предоставляют уникальную возможность размещения информации точно в нужном месте окна браузера. Так, можно поместить фрейм в нижней части окна, и независимо от прокручивания содержимого в основной части окна эта область не изменит своего положения.Следующий слайдПредыдущий слайдОглавление



Фреймы (часть 2)Для создания фреймовой структуры применяется тег: <FRAMESET> … </FRAMESET>, который заменяет тег <BODY> … </BODY> и используется для разделения экрана на области. Внутри тега <FRAMESET> … </FRAMESET> находятся теги <FRAME NAME=… SCR=…>. Атрибут NAME задает имя фрейма. Атрибут SCR задает имя HTML документа, предназначенного для начальной загрузки в указанный фрейм.Следующий слайдПредыдущий слайдОглавление


Фреймы (часть 3)Фреймы бывают вертикальными и горизонтальными. Для деления окна на фреймы в теге <FRAMESET> используют атрибуты COLS="… , …" (деление по вертикали) и ROWS="… , …" (деление по горизонтали). Отводимое под фреймы пространство можно указывать в процентах от общих размеров окна браузера, в абсолютных величинах (пикселях) или * (оставшаяся часть окна).Следующий слайдПредыдущий слайдОглавление<FRAMESET COLS=150, 30%, *> </FRAMESET>Окно браузера разделится вертикально на 3 части. Под первую часть отводится 150 пикселей, под вторую 30% процентов доступного пространства, под третью часть отводится вся оставшаяся область окна.<FRAMESET ROWS=40%, 200,*> </FRAMESET>Окно браузера делится горизонтально. Первая часть – 40% доступного пространства. Вторая часть – 200 пикселей, третья часть – вся оставшаяся область окна


Пример 13С помощью программы Блокнот создайте файл index3.htm и сохраните его в своей папке. Запустите файл на выполнение.<html> <head> <title> Фреймы </title> </head><frameset cols=50%,50%> <frame src=index.htm> <frame src=index2.htm></frameset></html>Следующий слайдПредыдущий слайдОглавление






Пример 14С помощью программы Блокнот создайте файл index4.htm и сохраните его в своей папке. Запустите файл на выполнение.<html> <head> <title> Фреймы </title> </head><frameset rows=300,*> <frame src=index.htm> <frame src=index2.htm></frameset></html>Следующий слайдПредыдущий слайдОглавление






Пример 15 С помощью программы Блокнот создайте файл 1.htm и сохраните его в своей папке. <html><head><title> Заголовок </title></head><body bgcolor=green text=red><marquee direction="right" behavior="scroll"> <font size=7> <b> Фреймы </b> </font> </marquee></body></html>Следующий слайдПредыдущий слайдОглавление






Пример 15 (продолжение)С помощью программы Блокнот создайте файл 2.htm и сохраните его в своей папке. <html><head><title> Оглавление </title></head><body bgcolor=blue text=yellow vlink=yellow alink=yellow><h1 align=center> Оглавление </h1><font size=5><a href=index.htm target=3> Файл index.htm </a><BR><a href=index2.htm target=3> Файл index2.htm </a></body></html>Следующий слайдПредыдущий слайдОглавление








Пример 15 (продолжение)С помощью программы Блокнот создайте файл 3.htm и сохраните его в своей папке. <html><head><title> Содержимое </title></head><body bgcolor=brown text=yellow></body></html>Следующий слайдПредыдущий слайдОглавление





Пример 15 (продолжение)С помощью программы Блокнот создайте файл index5.htm и сохраните его в своей папке. <html><head><title> Сложные фреймы </title></head><frameset rows=15%,*> <frame name=1 src=1.htm> <frameset cols=25%,*> <frame name=2 src=2.htm> <frame name=3 src=3.htm> </frameset></frameset></html>Предыдущий слайдОглавление








Приложенные файлы

  • pptx HTML
    Размер файла: 256 kB Загрузок: 6