Презентация Язык разметки гипертекстов HTML онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Язык разметки гипертекстов HTML абсолютно бесплатно. Урок-презентация на эту тему содержит всего 61 слайд. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:61 слайд
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:146.00 kB
- Просмотров:69
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№1 слайд
Содержание слайда: Тема : Язык разметки гипертекстов HTML
Вопрос 1. Назначение и структура языка HTML
№2 слайд
Содержание слайда: HTML – Hiper Text Markup Language -это язык описания структуры страниц
HTML – Hiper Text Markup Language -это язык описания структуры страниц
«тэг» от англ. tag – метка, ярлык, этикетка, бирка
Общая схема построения строки html – документа :
<ИМЯ ТЭГА [АТРИБУТ[=ЗНАЧЕНИЕ АТРИБУТА]…]> ТЕКСТ </ИМЯ ТЭГА>
№3 слайд
Содержание слайда: Правила:
Правила:
Пробелы в тексте игнорируются.
Тэги форматирования могут быть написаны строчными и/или прописными буквами.
Тэги следует писать парами.
№4 слайд
Содержание слайда: Любой html - документ имеет следующую структуру:
Любой html - документ имеет следующую структуру:
<HTML >
<HEAD> ….. </HEAD>
<BODY> ….. </BODY>
</HTML>
№5 слайд
Содержание слайда: Листинг 1
Листинг 1
<HTML>
<HEAD>
<TITLE> СТИХИ </TITLE>
</HEAD>
<BODY>
Ночь. Улица. Фонарь. Аптека. Бессмысленный и тусклый свет.
</BODY>
</HTML> ПРИМЕР
№6 слайд
Содержание слайда: Вопрос 2. Тэги форматирования текста в html - документах
<BR> - перенос на другую строку, не имеет теговой пары
Пример
№7 слайд
Содержание слайда: Тэговая пара <FONT>, </FONT>
<FONT FACE=”Arial”> Этот текст следует вывести шрифтом Arial </FONT>
<FONT SIZE=5> КРУПНЫЙ ТЕКСТ </FONT>
<FONT SIZE=1> МЕЛКИЙ ТЕКСТ </FONT>
№8 слайд
Содержание слайда: <FONT COLOR=#FF0000> Красный шрифт </FONT>
<FONT COLOR=#FF0000> Красный шрифт </FONT>
<FONT COLOR=#00FF00> Зеленый шрифт </FONT>
<FONT COLOR=#0000FF> Синий шрифт </FONT>
<FONT COLOR=#С0С0С0> Серый шрифт </FONT>
№9 слайд
Содержание слайда: <FONT FACE=”ARIAL” COLOR=#00FF00 SIZE=5>
<FONT FACE=”ARIAL” COLOR=#00FF00 SIZE=5>
КРУПНЫЙ ЗЕЛЕНЫЙ ШРИФТ ГАРНИТУРЫ ARIAL
</FONT>
№10 слайд
Содержание слайда: Тэг начала абзаца <P>, </P>
<P ALIGN=LEFT> ТЕКСТ, ВЫРАВНЕННЫЙ ПО ЛЕВОМУ ПОЛЮ </P>
<P ALIGN=CENTER> ТЕКСТ, ВЫРАВНЕННЫЙ ПО ЦЕНТРУ </P>
<P ALIGN=RIGHT> ТЕКСТ, ВЫРАВНЕННЫЙ ПО ПРАВОМУ ПОЛЮ </P>
№11 слайд
Содержание слайда: <B>,</B> - делает текст жирным;
<B>,</B> - делает текст жирным;
<I>,</I> - делает текст наклонным;
<U>,</U> - делает текст подчеркнутым;
<STRIKE>, </STRIKE> - делает текст зачеркнутым.
№12 слайд
Содержание слайда: Тэги для заголовков
<H1>Заголовок 1</H1>
<H2>Заголовок 2</H2>
<H3>Заголовок 3</H3>
<H4>Заголовок 4</H4>
<H5>Заголовок 5</H5>
<H6>Заголовок 6</H6>
№13 слайд
Содержание слайда: Тэги <BIG>, </BIG>
Тэги <BIG>, </BIG>
- увеличивают размер символов, заключенных между ними, на единицу.
Тэги <SMALL> И </SMALL>
- уменьшают размер символов на единицу.
№14 слайд
Содержание слайда: Тэги формирования списков
<OL>, </OL> - тэги для формирования нумерованных списков;
<UL>, </UL> - тэги для формирования маркированных списков
Каждый элемент списка обрамляется тэговой парой <LI>, </LI>
ПРИМЕР
№15 слайд
Содержание слайда: Тэги <SUP> и <SUB>
<SUP>, <SUP> -надстрочный индекс.
<SUB>, </SUB> - подстрочный индекс.
ПРИМЕР
№16 слайд
Содержание слайда: <CITE> </CITE>
<EM> </EM>
<STRONG> </STRONG>
<KBD> </KBD>
<CODE> </CODE>
<SAMP> </SAMP>
<VAR> </VAR>
<!-- …..-->
<COMMENT> </COMMENT>
ПРИМЕР
№17 слайд
Содержание слайда: Формирование списка определений
<DL> </DL> - начало/конец списка
<DT> - определяемый термин
<DD>- определение термина
пример
№18 слайд
Содержание слайда: Вопрос 3. Формирование горизонтальных линий
<HR> </HR> ПРИМЕР
№19 слайд
Содержание слайда: Вопрос 4. Создание таблиц
<TABLE> </TABLE> - НАЧАЛО И КОНЕЦ ТАБЛИЦЫ
<TR> </TR> - НАЧАЛО И КОНЕЦ СТРОКИ
<TD> </TD> - НАЧАЛО И КОНЕЦ СТОЛБЦА
№20 слайд
Содержание слайда:
№21 слайд
Содержание слайда:
№22 слайд
Содержание слайда: Параметры тега <TR>
№23 слайд
Содержание слайда: Параметры тэга <TD>
№24 слайд
Содержание слайда:
№25 слайд
Содержание слайда: Вопрос 5. Использование графики в HTML - документах
№26 слайд
Содержание слайда: GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков
GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков
Свойства – прозрачность и анимация
JPEG (JOINT PHOTOGRAPHIC EXPERT GROUP) – объединенная группа экспертов по изображениям, семейство форматов, основано на математических алгоритмах сильного сжатия изображения
№27 слайд
Содержание слайда: <BODY BACKGROUND=”URL GIF- или JPEG – файла” >
- использование графики в качестве фона
<BODY BACKGROUND=”http://www.tutorial.ru/pic/back.gif” >
- файл расположен в сети
<BODY BACKGROUND=” back.gif” >-файл расположен в текущем каталоге
№28 слайд
Содержание слайда: Параметр DGPROPERTIES=“FIXED”-
фиксирует фон в момент прокрутки
<IMG SRC=“URL”> - вставка графического изображения в документ
№29 слайд
Содержание слайда: Параметры тэга IMG
№30 слайд
Содержание слайда:
№31 слайд
Содержание слайда: Вопрос 6. Создание гиперссылок
Гиперссылка состоит из двух частей: псевдокнопки и адресной части (URL)
<A HREF=“URL”> Любой текст </A>
Параметры тэга <A>
TARGET – указывает область загрузки ресурса.
TARGET =BLANK – загружает документ в новое окно
пример
№32 слайд
Содержание слайда: Вопрос 7. Создание фреймов
<HTML>
<HEAD>
<TITLE>Пример фреймов</TITLE>
</HEAD>
<FRAMESET ROWS="40%,*”
FRAMEBORDER=1 BORDER=1>
<FRAME SRC="frame1.html">
<FRAME SRC="frame2.html">
</FRAMESET>
</HTML>
№33 слайд
Содержание слайда: Параметры фреймов
№34 слайд
Содержание слайда: Параметры тэга <FRAME>
№35 слайд
Содержание слайда:
№36 слайд
Содержание слайда:
№37 слайд
Содержание слайда: Плавающие фреймы
Тэги <IFRAME> </IFRAME>
№38 слайд
Содержание слайда: Вопрос 8. Использование форм при создании html – документов
№39 слайд
Содержание слайда: Параметры тэга <FORM>
№40 слайд
Содержание слайда:
№41 слайд
Содержание слайда:
№42 слайд
Содержание слайда: Кнопки с зависимой фиксацией
TYPE=RADIO - для выбора пользователем одного значения из нескольких возможных
Например:
<INPUT NAME=”Пол” TYPE=RADIO VALUE=”Мужской” CHECKED>
<INPUT NAME=”Пол” TYPE=RADIO =”Женский”>
NAME – указывает наименование поля (кнопки)
VALUE – содержит значение поля
№43 слайд
Содержание слайда: Кнопка с независимой фиксацией
При создании форм часто требуется получить ответ пользователя на вопрос типа «Да/Нет». Для создания таких кнопок используется значение CHECKBOX параметра TYPE.
Например:
<BR>Молилась ли ты на ночь, Дездемона?
<INPUT TYPE=CHECKBOX NAME=”mark” VALUE=”Yes”>
№44 слайд
Содержание слайда: Кнопка «Выполнить»
Создается при помощи тэга <INPUT> с параметром TYPE= SUBMIT
<INPUT TYPE=SUBMIT VALUE=”Выполнить”>
Значение параметра VALUE задает текст, который появится на кнопке. Действие определяется параметром ACTION тэга FORM
№45 слайд
Содержание слайда: Кнопка «Восстановить значение по умолчанию»
Создается при помощи тэга <INPUT>
с параметром TYPE= RESET
<INPUT TYPE=RESET VALUE=”Очистить форму”>
№46 слайд
Содержание слайда: Использование списков в форме
Тэг <SELECT>
<SELECT> поддерживает три необязательных атрибута:
MULTIPLE - позволяет выбрать более чем одно наименование;
NAME - определяет наименование объекта;
SIZE - определяет число видимых пользователю пунктов списка
<OPTION>-для определения списка пунктов
№47 слайд
Содержание слайда: Пример
<SELECT NAME=”list1” >
<OPTION SELECTED>Первый</OPTION>
<OPTION> Второй </OPTION>
<OPTION> Третий </OPTION>
<OPTION> Четвертый </OPTION>
</SELECT>
№48 слайд
Содержание слайда: Ввод текстового массива
<TEXTAREA> позволяет организовать ввод
текста из нескольких строк в специальном окне, снабженном полосой прокрутки
Пример:
<TEXTAREA NAME=”comm1” ROWS=5 COLS=50>
Комментарий
Введите любую текстовую информацию
</TEXTAREA>
Пример
№49 слайд
Содержание слайда: Вопрос 9. Назначение CSS
Вопрос 9. Назначение CSS
Каскадные таблицы стилей
Cascading Style Sheets (CSS)
разработаны консорциумом World Wide Web Consortium (W3C).
№50 слайд
Содержание слайда: Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий:
Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий:
необходимо определиться с номенклатурой страниц, т.е. все страницы проектируемого Web – узла разбить на типы (домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.);
№51 слайд
Содержание слайда: для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов страницы);
для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов страницы);
следует создать навигационную карту узла и форму ее реализации на страницах;
для каждого стандартного компонента разработать стиль его отображения (CSS - описатель);
рисовать картинки, создать анимацию, писать программы, вручную вводить текст и графику или генерировать содержимое страниц автоматически при обращении к ним
№52 слайд
Содержание слайда: Способы применения CSS
Способы применения CSS
Создание и использование файлов таблиц стилей;
Встраивание таблиц стилей в документы HTML;
Встраивание стилей в тэги HTML.
№53 слайд
Содержание слайда: Способ 1. Файл таблицы стилей (*.css)
Способ 1. Файл таблицы стилей (*.css)
H1 { font-size: 24; font-weigt: bold; color: red;
margin-left: 10% }
H2 { font-size: 20; font-weigt: bold; color: black;
font-family: Courier }
P.italic { font-style: italic }
P.red { color: red }
№54 слайд
Содержание слайда: Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тэг <LINK>.
Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тэг <LINK>.
Пример
…….
<HEAD>
<TITLE>Команды </TITLE>
<LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">
</HEAD>
………
№55 слайд
Содержание слайда: Как пользоваться стилями из файла таблицы стилей?
Как пользоваться стилями из файла таблицы стилей?
Если в файле определены параметры для тэгов языка HTML, предназначенных для оформления текста (например, для операторов <H1> или <H2>, как в нашем примере), необходимо просто указать эти операторы без изменений.
Пример:
<H1>Заголовок первого уровня</H1>
№56 слайд
Содержание слайда: При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов.
При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов.
Например, ниже определены классы italic и red для тэга <P>:
P.italic { font-style: italic }
P.red { color: red }
№57 слайд
Содержание слайда: Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга <P> (или другого оператора форматирования текста).
Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга <P> (или другого оператора форматирования текста).
Пример:
<P CLASS=italic>Наклонный текст
<P CLASS=red>Текст красного цвета
№58 слайд
Содержание слайда: Способ 2. Встраивание таблиц стилей в документы HTML
Способ 2. Встраивание таблиц стилей в документы HTML
Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, который задан в общих таблицах стилей, можно встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей
№59 слайд
Содержание слайда: Пример:
Пример:
…<HEAD> <TITLE>Встроенная таблица стилей</TITLE>
<STYLE TYPE="text/css">
<!--
H1 { font-size: 24; font-weigt: bold; color: red; margin-left: 10% }
H2 { font-size: 20; font-weigt: bold; color: black; font-family: Courier }
P.italic { font-style: italic }
P.red { color: red }
-->
</STYLE> </HEAD>….
№60 слайд
Содержание слайда: Способ 3. Встраивание стилей в операторы HTML
Способ 3. Встраивание стилей в операторы HTML
Данный способ предполагает встраивание стилей непосредственно в тэги языка HTML и применение стилей для оформления отдельных фрагментов документа HTML.
№61 слайд
Содержание слайда: Пример:
Пример:
…<H1 STYLE="font-size: 24; font-weigt: bold; color: red; margin-left: 10%">Заголовок первого уровня</H1>
<H2 STYLE="font-size: 20; font-weigt: bold;
color: black;
font-family: Courier">Заголовок второго уровня</H2>
<P STYLE="font-style: italic">Наклонный текст
<P STYLE="color: red">Текст красного цвет
.....
1способ 2способ 3способ
Скачать все slide презентации Язык разметки гипертекстов HTML одним архивом:
