Презентация Язык разметки гипертекстов HTML онлайн
На нашем сайте вы можете скачать и просмотреть онлайн доклад-презентацию на тему Язык разметки гипертекстов HTML абсолютно бесплатно. Урок-презентация на эту тему содержит всего 61 слайд. Все материалы созданы в программе PowerPoint и имеют формат ppt или же pptx. Материалы и темы для презентаций взяты из открытых источников и загружены их авторами, за качество и достоверность информации в них администрация сайта не отвечает, все права принадлежат их создателям. Если вы нашли то, что искали, отблагодарите авторов - поделитесь ссылкой в социальных сетях, а наш сайт добавьте в закладки.
Презентации » Образование » Язык разметки гипертекстов HTML
Оцените!
Оцените презентацию от 1 до 5 баллов!
- Тип файла:ppt / pptx (powerpoint)
- Всего слайдов:61 слайд
- Для класса:1,2,3,4,5,6,7,8,9,10,11
- Размер файла:146.00 kB
- Просмотров:69
- Скачиваний:0
- Автор:неизвестен
Слайды и текст к этой презентации:
№2 слайд
![HTML Hiper Text Markup](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img1.jpg)
Содержание слайда: HTML – Hiper Text Markup Language -это язык описания структуры страниц
HTML – Hiper Text Markup Language -это язык описания структуры страниц
«тэг» от англ. tag – метка, ярлык, этикетка, бирка
Общая схема построения строки html – документа :
<ИМЯ ТЭГА [АТРИБУТ[=ЗНАЧЕНИЕ АТРИБУТА]…]> ТЕКСТ </ИМЯ ТЭГА>
№26 слайд
![GIF GRAPHIC INTERCHANGE](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img25.jpg)
Содержание слайда: GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков
GIF (GRAPHIC INTERCHANGE FORMAT) – 256 цветовых оттенков
Свойства – прозрачность и анимация
JPEG (JOINT PHOTOGRAPHIC EXPERT GROUP) – объединенная группа экспертов по изображениям, семейство форматов, основано на математических алгоритмах сильного сжатия изображения
№42 слайд
![Кнопки с зависимой фиксацией](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img41.jpg)
Содержание слайда: Кнопки с зависимой фиксацией
TYPE=RADIO - для выбора пользователем одного значения из нескольких возможных
Например:
<INPUT NAME=”Пол” TYPE=RADIO VALUE=”Мужской” CHECKED>
<INPUT NAME=”Пол” TYPE=RADIO =”Женский”>
NAME – указывает наименование поля (кнопки)
VALUE – содержит значение поля
№43 слайд
![Кнопка с независимой](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img42.jpg)
Содержание слайда: Кнопка с независимой фиксацией
При создании форм часто требуется получить ответ пользователя на вопрос типа «Да/Нет». Для создания таких кнопок используется значение CHECKBOX параметра TYPE.
Например:
<BR>Молилась ли ты на ночь, Дездемона?
<INPUT TYPE=CHECKBOX NAME=”mark” VALUE=”Yes”>
№46 слайд
![Использование списков в форме](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img45.jpg)
Содержание слайда: Использование списков в форме
Тэг <SELECT>
<SELECT> поддерживает три необязательных атрибута:
MULTIPLE - позволяет выбрать более чем одно наименование;
NAME - определяет наименование объекта;
SIZE - определяет число видимых пользователю пунктов списка
<OPTION>-для определения списка пунктов
№50 слайд
![Практическое значение CSS для](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img49.jpg)
Содержание слайда: Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий:
Практическое значение CSS для Web – инжиниринга (совокупности технологий разработки и сопровождения Web - узлов) заключается в том, что процесс создания узла можно формализовать и представить в виде последовательности действий:
необходимо определиться с номенклатурой страниц, т.е. все страницы проектируемого Web – узла разбить на типы (домашняя страница, навигационные страницы, информационные страницы, коммуникационные страницы и т.п.);
№51 слайд
![для каждого типа страницы](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img50.jpg)
Содержание слайда: для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов страницы);
для каждого типа страницы разработать определенную логическую структуру (стандартный набор компонентов страницы);
следует создать навигационную карту узла и форму ее реализации на страницах;
для каждого стандартного компонента разработать стиль его отображения (CSS - описатель);
рисовать картинки, создать анимацию, писать программы, вручную вводить текст и графику или генерировать содержимое страниц автоматически при обращении к ним
№53 слайд
![Способ . Файл таблицы стилей](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img52.jpg)
Содержание слайда: Способ 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](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img53.jpg)
Содержание слайда: Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тэг <LINK>.
Для того чтобы документ HTML был оформлен с использованием файла таблицы стилей, в разделе заголовка документа необходимо разместить тэг <LINK>.
Пример
…….
<HEAD>
<TITLE>Команды </TITLE>
<LINK REL=STYLESHEET HREF="styles.css" TYPE="text/css">
</HEAD>
………
№55 слайд
![Как пользоваться стилями из](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img54.jpg)
Содержание слайда: Как пользоваться стилями из файла таблицы стилей?
Как пользоваться стилями из файла таблицы стилей?
Если в файле определены параметры для тэгов языка HTML, предназначенных для оформления текста (например, для операторов <H1> или <H2>, как в нашем примере), необходимо просто указать эти операторы без изменений.
Пример:
<H1>Заголовок первого уровня</H1>
№56 слайд
![При определении стиля можно](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img55.jpg)
Содержание слайда: При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов.
При определении стиля можно не только переопределить параметры форматирования операторов, но и создать новые классы для этих операторов.
Например, ниже определены классы italic и red для тэга <P>:
P.italic { font-style: italic }
P.red { color: red }
№57 слайд
![Для того чтобы задействовать](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img56.jpg)
Содержание слайда: Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга <P> (или другого оператора форматирования текста).
Для того чтобы задействовать созданные классы, необходимо указать имя нужного класса в параметре CLASS тэга <P> (или другого оператора форматирования текста).
Пример:
<P CLASS=italic>Наклонный текст
<P CLASS=red>Текст красного цвета
№58 слайд
![Способ . Встраивание таблиц](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img57.jpg)
Содержание слайда: Способ 2. Встраивание таблиц стилей в документы HTML
Способ 2. Встраивание таблиц стилей в документы HTML
Если отдельные документы HTML должны быть оформлены особым образом, отличным от того, который задан в общих таблицах стилей, можно встроить таблицы стилей непосредственно в текст документа HTML. Такие таблицы называются встроенными (embedded) таблицами стилей
№59 слайд
![Пример Пример lt HEAD gt lt](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img58.jpg)
Содержание слайда: Пример:
Пример:
…<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>….
№61 слайд
![Пример Пример lt H STYLE quot](/documents_5/77f0b92c49e222e7b660bcb2eaaee73e/img60.jpg)
Содержание слайда: Пример:
Пример:
…<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 одним архивом:
Похожие презентации
-
Язык разметки гипертекста Основные конструкции
-
Язык разметки гипертекста
-
Язык HTML
-
ДИНАМИЧЕСКИЙ WEB-ДИЗАЙН на основе языка JavaScript Dynamic HTML: DHTML HTMLCSSJavaScript
-
Никольская Галина Викторовна учитель английского и французского языка ГОУ СОШ 739. - презентация
-
Роль иностранного языка в межкультурной коммуникации Владимирова Л. П. УРАО ИСМО www. distant/ioso. ru/community vludmilapmail. ru. - презентация
-
-Н- и –НН- в прилагательных и причастиях Автор: учитель русского языка и литературы МОУ «СОШ р. п. Духовницкое» Кучмина Надежда Влади
-
Практический материал по русскому языку 1класс
-
Практический материал по русскому языку 1 класс
-
Система работы по подготовке к ЕГЭ (русский язык)