HTML Первые шаги |
HTML | ||
<< Спецификация CSS (Cascading Style Sheets) | HTML - первые шаги >> |
Автор: Макарова М.Е.. Чтобы познакомиться с картинкой полного размера, нажмите на её эскиз. Чтобы можно было использовать все картинки для урока информатики, скачайте бесплатно презентацию «HTML Первые шаги.ppt» со всеми картинками в zip-архиве размером 204 КБ.
Сл | Текст | Сл | Текст |
1 | HTML Первые шаги. © М.Е.Макарова | 11 | умолчанию) Right Centr. <body bgcolor |
http://uchinfo.com.ua. | ="#CC3399" text | ||
2 | Hyper Text Markup Language. Язык | ="#CCCCCC"> <h1 align = | |
разметки гипертекста. | “center”> Title 1 </H1> <h2 | ||
3 | Знакомство с языком HTML. Гипертекст – | align = “right”> Title 2 </H2> | |
это электронный документ, который содержит | <h3 align = “left”> Title 3 | ||
гиперссылки на другие документы. | </H3> <h4> Title 4 </H4> | ||
Гипертекстовый документ предназначен для | <h5> Title 5 </H5> <h6> | ||
вывода информации на экран компьютера. | Title 6 </H6> </body> | ||
Гипертекстовая технология – это | 12 | Абзацы. Тег <p> указывает на | |
технология, базирующаяся на использовании | начало нового абзаца и вставляет пустую | ||
гипертекстовых документов. Ее применяют в | строку перед абзацем. Атрибут align. Тег | ||
компьютерных энциклопедиях и учебных | <br> - разрыв строки. Используется | ||
программах, прикладных программах для | для записи текстов стихов и песен. Атрибут | ||
работы со справочной информацией и для | clear позволяет продолжить поток текста | ||
организации доступа к информации в W W W, | после (ниже) рисунка или таблицы. Значения | ||
т.е. при работе с WEB-документами. | left, right, all - продолжают вывод текста | ||
WEB-документ – это текст, написанный на | там, где указанный в атрибуте край или оба | ||
языке HTML или другом, который | края свободны от таблиц и рисунков. Этот | ||
предназначен для просмотра электронной | атрибут имеет смысл только с выровненными | ||
информации на экране компьютера с помощью | влево или вправо рисунками или таблицами. | ||
программы-браузера. | 13 | Точные интервалы. Тег <nobr>… | |
4 | Так как WEB-документ предназначен для | </nobr> создает область, в которой | |
просмотра его на компьютере, то | текст не разбивается на строки. Тег | ||
желательно, чтобы он помещался целиком на | <wbr> используется в сочетании с | ||
экране. Поэтому WEB-документы называют еще | <nobr> и указывает браузеру место | ||
WEB-страницами. Несколько WEB-страниц на | где, в случае необходимости, можно | ||
одну тему называют WEB-узлом или | разорвать строку. Тег <pre>… | ||
WEB-сайтом. WEB-сайты создают | </pre> выделяет часть исходного | ||
WEB-дизайнеры. WEB-дизайн – это | текста, который должен отображаться «как | ||
совокупность правил и рекомендаций, | есть» - с теми же отступами и разбиением | ||
которыми должны руководствоваться авторы, | на строки. Используется для записи текстов | ||
чтобы их сайты были информативными и | программ. Внутри этого тега могут | ||
выглядели привлекательно. | располагаться гиперссылки, картинки и пр. | ||
5 | Команды языка HTML называются теги и | Тег <center>… </center> - | |
они записываются в < >. Большинство | содержимое выравнивается по центру – | ||
тегов – парные <html>…</html> | текст, рисунки, таблицы. Аналог атрибута | ||
Документ HTML имеет три структурных типа | align=center. | ||
содержимого: Теги – команды в < >. | 14 | Физическое и логическое форматирование | |
Комментарии –пояснения к документу. Они | текста. Физическая разметка документа – | ||
помогают разобраться в его содержании | это явное указание браузеру, как должен | ||
<!-- … -- >. Текст – то, что | выглядеть тот или иной фрагмент текста – | ||
пользователь видит на экране браузера. | размер шрифта, курсив и т.п. Логическая | ||
Мультимедийные элементы – картинки, звук, | разметка учитывает смысл выделенного | ||
видео – не являются частью HTML-документа | фрагмента – цитата, сведения об авторе и | ||
и хранятся в отдельных файлах. | т.п. Современные стандарты языка HTML | ||
HTML-документ содержит только ссылки на | советуют использовать по-возможности | ||
эти файлы в виде тегов. | логическую разметку, хотя физическое | ||
6 | Теги и атрибуты. Каждый тег состоит из | форматирование еще никто не отменял. | |
имени тега, за которым может следовать | 15 | Теги физических стилей. | |
список атрибутов (параметров) <i> | <b>…</b> Полужирный шрифт. | ||
<img src=“dog.gif” width=6> Атрибуты | <big>… </big> Увеличенный | ||
отделяются от имени тега и друг от друга | шрифт. <i>…</i> Курсив. | ||
пробелами. Значение атрибута пишется после | <small>…</small> Уменьшенный | ||
знака равенства. Если значение состоит из | шрифт. <u>…</u> Подчеркивание. | ||
одного слова или цифры, то его можно | <sup>… </sup> Верхний индекс. | ||
писать без кавычек. Для значений из | <s>…</s> Зачеркнутый шрифт. | ||
нескольких слов кавычки обязательны ( “ ). | <sub>… </sub> Нижний индекс. | ||
Тег со всеми атрибутами желательно | <tt>…</tt> Стиль печатной | ||
располагать на одной строке. Для | машинки. <blink>…</blink> | ||
большинства тегов нужен закрывающий тег: | Мерцающий текст (в Internet Explorer). | ||
<i> </i> | Можно комбинировать теги стилей: | ||
7 | Структура HTML-документа. <html> | <b><i>Полужирный | |
<head> <title> Мой первый шаг | курсив</i></b> | ||
</title> </head> <body> | 16 | Изменение шрифта. тег <font> … | |
Здравствуйте, это моя первая страница. | </font>- изменяет размер, цвет и | ||
<br> Добро пожаловать! </body> | стиль текста. Атрибуты: size - размер | ||
</html> | шрифта 1-7. По-умолчанию size=3 Размер | ||
8 | Заголовок документа – теги | изменяется на 20%: 4 размер больше 3 на | |
<Head> и <Title> Тег | 20%, 5 размер больше 4 на 20% size=4 – | ||
<Head>…</Head> заключает в | абсолютный размер, size= +1 – | ||
себе теги заголовка. Тег | относительный (на 1 больше, чем базовый | ||
<Title>…</Title> содержит | размер шрифта) color - цвет текста, face - | ||
слова, которые появляются в стоке | название шрифта face="Comic Sans MS, | ||
заголовка браузера <html> | Courier New”. | ||
<head> <title>Мой первый шаг | 17 | <html> <head> | |
</title> </head> 2. | <title>Мой второй шаг </title> | ||
Дополнительные теги заголовка: | </head> <body> Это обычный | ||
<meta> - содержит дополнительные | шрифт <p> <font size=5 | ||
данные о документе, используемые | color="#CC3399" face="Comic | ||
поисковыми серверами; <base> и | Sans MS, Courier New"> Это | ||
<link> - определяют базовый адрес | измененный шрифт </font> <p> | ||
документа и некоторые другие. | Это снова обычный шрифт </body> | ||
9 | Тело документа – тег <body> Все, | </html> | |
что находится между<body> и | 18 | Теги логических стилей. <q> … | |
</body>, называется содержимым тела | </q> <abbr> </abbr> | ||
документа. Тег <body> может | Аббревиатура. <acronym> | ||
содержать 3 группы параметров: Управление | </acronym> Сокращение, напр., HTML. | ||
внешним видом документа. Атрибуты | <cite>… </cite> <samp>… | ||
программирования – по событию, таблицы | </samp> Текст с «буквальным» | ||
стилей и пр. Атрибуты ссылок и | смыслом. <code> </code> Для | ||
идентификации. | текстов программ. <var>… | ||
10 | Параметры тега <body> Bgcolor – | </var> Для имен переменных. | |
изменяет цвет фона. Цвет задается словом | <em>… </em> Визуальное | ||
или кодом RGB <body bgcolor = “red”> | выделение (курсив). <strong>… | ||
<body bgcolor = “#FF0000”> Text – | </strong> Логическое выделение | ||
задает цвет текста. <body bgcolor = | (полужирный). <dfn>… </dfn> | ||
“red” text=“blue”> Background – | Для специальных терминов. <kbd>… | ||
помещает в качестве фона изображение из | </kbd> Для технических терминов. | ||
файла с картинкой. <body background = | Блок цитат (атрибут cite=“URL” -источник | ||
“dog.gif”> Bgproperties = “fixed” – | цитаты). <address>…</address> | ||
фоновый рисунок не прокручивается вместе | Адрес (курсив). Библиографическая ссылка, | ||
со страницей. Link – задает цвет | исп. для записи названий книг и пр. | ||
гиперссылок, по которым пользователь еще | (курсив). | ||
«не ходил». Vlink – задает цвет посещенных | 19 | Задание на урок: Создать две | |
гиперссылок. Alink – цвет активной | WEB-странички на произвольную тему 1.На | ||
гиперссылки (под курсором мышки во время | первой применить физические стили | ||
нажатия). | форматирования (шрифт, курсив и т.п.), фон | ||
11 | Оформление текста. Заголовки. | сделать цветным. 2. На второй применить | |
Существует 6 уровней заголовков: | логические стили форматирования. В | ||
<h1> . . . </h1>, …, | качестве фона использовать картинку из | ||
<h6> . . . </h6> Атрибут – | файла. | ||
align – выравнивание Значения: Left (по | |||
HTML Первые шаги.ppt |
«Основы HTML» - <BR> <A HREF="http://grsu.by"> Гроднеский государственный университет </A>. СОЗДАНИЕ ССЫЛОК (продолжение). Спецификация атрибута. ОСНОВЫ ЯЗЫКА HTML. Стандартные цвета. <BR>Список определений <DL> <DT>Первый термин <DD>Первое определение <DT>Второй термин <DD>Второе определение </DL>.
«Документ HTML» - - Разработан стандарт HTML 2.0. Запись стартового тега с атрибутом в общем виде: Разметка текста Создание списков Создание таблиц Графика Гиперссылки. Тег. 1994. Окно просмотра интерпретированного HTML-документа. Программа-браузер. Вставка картинки. </Тег>. Наиболее распространенные атрибуты. HyperText Markup Language.
«Основы языка HTML» - Дэн Конноли,1994 - HTML 2. В настоящее время версия с 1994 г. - HTML 4.0. Д. Раггетт (Hewlett-Packard Labs), 1992 - HTML+. Основы языка HTML. Элементы стиля и форматирования текста. Списки. Элементы заголовка html-документа (тэг HEAD). Таблицы.
«Шаг в будущее» - "Шаг в будущее, ЮНИОР". Мероприятия Российской научно-социальной программы для молодежи и школьников «Шаг в будущее». "Академия юных". Участие школьников Краснодарского края в Российских интеллектуальных соревнованиях. "Научные кадры будущего". Основные цели и задачи: Научно-исследовательская деятельность школьников в Краснодарском крае.
«Язык HTML» - Microsoft взял под свою опеку W3C. Общие сведение о HTML. Теги представляют собой управляющие элементы разметки гипер-текстового документа. Язык HTML состоит из элементов, называемых тегами. операционной системы, установленной на нем. Но можно разработать web-сайтов и самим. Структура web-документа.
«HTML страница» - Задание. Пример 2. Титульная страница персонального веб-сайта: Задания. Пример 2: кегль шрифта задается в пунктах <font size="12pt">. Язык разметки гипертекста HTML Занятие 2. Заголовок записывается в разделе <head> в теге <title>. Не рекомендуется использовать. 1. Фоновый цвет страницы: