Html информатика – HTML-программирование, инструменты создания информационных объектов для Интернет, Web-страницы и сайты

Спецификация

Элементы HTML

Элемент HTML — это основная структурная единица веб-страницы, написанная на языке HTML

Содержание

  • 1 Структура HTML-документа

  • 2 Основные элементы («теги»)

    • 2.1 Гиперссылки

    • 2.2 Текстовые блоки

    • 2.3 Форматирование текста

    • 2.4 Списки

    • 2.5 Объекты

    • 2.6 Изображения

    • 2.7 Карта изображений

    • 2.8 Таблицы

    • 2.9 Формы

    • 2.10 Символы

  • 3 Названия цветов

  • 4 Основные символы

Структура HTML-документа

HTML — это теговый язык разметки документов, то есть любой документ на языке HTML представляет собой набор элементов, причем начало и конец каждого элемента обозначается специальными пометками, называемыми тегами. Регистр, в котором набрано имя тега, в HTML значения не имеет. Элементы могут быть пустыми, то есть не содержащими никакого текста и других данных (например, тег перевода строки <br>). В этом случае обычно не указывается закрывающий тег. Кроме того, элементы могут иметь атрибуты, определяющие какие-либо их свойства (например, размер шрифта для тега <font>). Атрибуты указываются в открывающем теге. Вот пример части разметки HTML-документа:

<p>Текст между двумя тегами - открывающим и закрывающим.</p>

<a href="http://www.example.com">Здесь элемент содержит атрибут href.</a>

А вот пример пустого элемента: <br>

Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, обязан начинаться со строки декларации версии HTML <!DOCTYPE>, которая обычно выглядит примерно так:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Если эта строка не указана, то добиться корректного отображения документа в браузере становится труднее.

Далее обозначается начало и конец документа тегами <html> и </html> соответственно. Внутри этих тегов должны находиться теги заголовка (<head></head>) и тела (<body></body>) документа.

Варианты DOCTYPE для HTML 4.01

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

DOCTYPE для HTML 5

В отличие от предыдущих версий тег всего один [1]

<!DOCTYPE html>

Основные элементы («теги»)

Теги и их параметры нечувствительны к регистру. То есть <A HREF="http://example.com"> и <a href="http://example.com"> означают одно и то же.

Тег <a>



комментариев: 70

Chrome

iOS

1.0+

1.0+

2.1+

1.0+

1.0+

1.0+

1.0+

HTML:

3.2

4.01

5.0

XHTML:

1.0

1.1

Описание

Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы.

Для создания ссылки необходимо сообщить браузеру, что является ссылкой, а также указать адрес документа, на который следует сделать ссылку. В качестве значения атрибута href используется адрес документа (URL, Universal Resource Locator, универсальный указатель ресурсов), на который происходит переход. Адрес ссылки может быть абсолютным и относительным. Абсолютные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где прописана ссылка. Относительные ссылки, как следует из их названия, построены относительно текущего документа или корня сайта.

Синтаксис

<a href="URL">...</a>

<a name="идентификатор">...</a>

<a href="URL">...</a>

<a name="идентификатор">...</a>

Атрибуты

accesskey Активация ссылки с помощью комбинации клавиш.

coords Устанавливает координаты активной области.

download Предлагает скачать указанный по ссылке файл.

href Задает адрес документа, на который следует перейти.

hreflang Идентифицирует язык текста по ссылке.

name Устанавливает имя якоря внутри документа.

rel Отношения между ссылаемым и текущим документами.

Задает форму активной области ссылки для изображений.

tabindex Определяет последовательность перехода между ссылками при нажатии на кнопку Tab.

target

Имя окна или фрейма, куда браузер будет загружать документ.

title

Добавляет всплывающую подсказку к тексту ссылки.

type

Указывает MIME-тип документа, на который ведёт ссылка.

Также для этого тега доступны универсальные атрибуты и события.

Закрывающий тег Обязателен.

Пример

HTML5IECrOpSaFx

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Тег А</title>

</head>

<body>

<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></p>

<p><a href="tip.html">Как сделать такое же фото?</a></p>

</body>

</html>

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<title>Тег А</title>

</head>

<body>

<p><a href="images/xxx.jpg">Посмотрите на мою фотографию!</a></

p>

<p><a href="tip.html">Как сделать такое же фото?</a></p>

</body>

</html>

В последних версиях HTML практически у каждого тега огромное число необязательных параметров — обычно не меньше 15. Мы приводим только основные параметры тегов.

Гиперссылки

<A HREF="filename" target="_self">название ссылки</A>

  • Атрибут HREF задает значение адреса документа, на который указывает ссылка.

  • filename — имя файла или адрес Internet, на который необходимо сослаться.

  • название ссылки — название гипертекстовой ссылки, которое будет отображаться в браузере, то есть показываться тем, кто зашел на страницу.

  • TARGET — задает значение окна или фрейма, в котором будет открыт документ, на который указывает ссылка. Возможные значения атрибута:

    • _top — открытие документа в текущем окне;

    • _blank — открытие документа в новом окне;

    • _self — открытие документа в текущем фрейме;

    • _parent — открытие документа в родительском фрейме.

Значение по умолчанию: _self.

Текстовые блоки

  • <h2> … </h2>, <h3> … </h3>, … ,<H6> … </H6> — заголовки 1, 2, … 6 уровня. Используются для выделения частей текста (заголовок 1 — самый крупный, 6 — самый мелкий).

  • <P> — новый абзац. Можно в конце абзаца поставить </P>, но это не обязательно.

  • <BR> — новая строка. Этот тег не закрывается (то есть не существует тега </BR>)

  • <HR> — горизонтальная линия

  • <BLOCKQUOTE> … </BLOCKQUOTE> — цитата. Обычно текст сдвигается вправо.

  • <PRE> … </PRE> — режим preview (preformatted text). В этом режиме текст заключается в рамку и никак не форматируется (то есть теги, кроме </PRE>, игнорируются, и переводы строки ставятся там, и только там, где они есть в оригинальном документе).

  • <DIV> … </DIV> — блок (обычно используется для применения стилей CSS)

  • <SPAN> … </SPAN> — строка (обычно используется для применения стилей CSS)

Форматирование текста

  • <EM> … </EM> — логическое ударение (обычно отображается курсивным шрифтом)

  • <STRONG> … </STRONG> — усиленное логическое ударение (обычно отображается жирным шрифтом)

  • <I> … </I> — выделение текста курсивом

  • <B> … </B> — выделение текста жирным шрифтом

  • <U> … </U> — подчёркивание текста

  • <S> … </S> (или <STRIKE> … </STRIKE> )— зачёркивание текста

  • <BIG> … </BIG> — увеличение шрифта

  • <SMALL> … </SMALL> — уменьшение шрифта

  • <BLINK> … </BLINK> — мигающий текст. Внимание! Этот тег не работает в браузере Internet Explorer версий 5 и ниже без применения JavaScript

  • <MARQUEE> … </MARQUEE> — сдвигающийся по экрану текст.

  • <SUB> … </SUB> — подстрочный текст. Например, H<SUB>2</SUB>O создаст текст H2O.

  • <SUP> … </SUP> — надстрочный текст. Например, E=mc<SUP>2</SUP> создаст текст E=mc2.

  • <FONT параметры> … </FONT> — задание параметров шрифта. У этого тега есть следующие параметры:

    • COLOR=color — задание цвета. Цвет может быть задан в шестнадцатеричной форме как #rrggbb (первые 2 шестнадцатеричные цифры задают красную компоненту, следующие 2 — зелёную, последние 2 — синюю) или названием.

    • FACE=шрифт задание гарнитуры шрифта

    • SIZE=размер задание размера шрифта. Размер от 1 до 7: стандартный по умолчанию 3. Есть много способов изменить стандартный размер.

    • SIZE=+изменение или SIZE=-изменение — изменение размера шрифта от стандартного. Например, +2 означает размер на 2 больше стандартного.

Так, например,

Сигналом к началу атаки являются

<U>три</U> <FONT SIZE="+2">больших</FONT> <FONT COLOR="green">зелёных</FONT> свистка.

создаст текст

Сигналом к началу атаки являются три больших зелёных свистка.

Списки

<UL>

<LI> первый элемент </LI>

<LI> второй элемент </LI>

<LI> третий элемент </LI>

</UL>

создаёт список

  • первый элемент

  • второй элемент

  • третий элемент

Если вместо <UL> (Unordered List — ненумерованный список) поставить <OL> (Ordered List — нумерованный список), список получится нумерованным:

  1. первый элемент

  2. второй элемент

  3. третий элемент

У этих тегов есть параметры:

type = "тип"

где тип — форма: в <UL> — символов

  • square — квадрат

  • round — окружность

  • disk — круг: по умолчанию

а в <OL> — цифр или букв

  • A или а (латинскими буквами) — буквенный список: соответственно заглавными или строчными буквами

  • I или i — римские цифры: соответственно заглавными или строчными буквами

  • 1 — арабские цифры: по умолчанию

пишется так:

<ol type="i">

<li> Первое </li>

<li> Второе </li>

<li> И т.д. </li>

</ol>

и создаст следующее:

  1. Первое

  2. Второе

  3. И т. д.

Параметр start="начало" (только для <OL> ), определяющий начало нового отсчёта: например, если нужно не 1, 2, 3, а 24, 25, 26

Пишется так:

<ol start="24">

<li> Двадцать четыре </li>

<li> Двадцать пять </li>

<li> И т.д. </li>

и создаст следующее:

  1. Двадцать четыре

  2. Двадцать пять

  3. И т. д.

и, наконец для тега <LI> параметр value="следующий" — если необходимо перескочить с одной цифры на другую: например, не 1, 2, 3, 4, а 1, 2, 22, 23

<ol>

<li> Один </li>

<li> Два </li>

<li value="22"> Двадцать два </li>

<li> Двадцать три </li>

создаст следующее:

  1. Один

  2. Два

  1. Двадцать два

  2. Двадцать три

Наконец, третьим, и последним, списком является список определений:

<DL>

<DT> Кошка </DT> <DD> мяукающее домашнее животное </DD>

<DT> Кот </DT> <DD> муж кошки </DD>

<DT> Крокодил </DT> <DD> большой африканский зверь с острыми зубами </DD>

</DL>

создаст следующее:

Кошка

мяукающее домашнее животное

Кот

муж кошки

Крокодил

большой африканский зверь с острыми зубами

Между прочим, теги <LI>, <DT>, <DD> можно и не закрывать.

Объекты

  • EMBED — вставка различных объектов: не-HTML документов и media-файлов

  • APPLET — вставка Java-апплетов

  • SCRIPT — вставка скриптов.

Изображения

Пример:

<IMG SRC=url ALT="текст" TITLE="текст" WIDTH="размер (пикс, %)">

Изображение можно сделать ссылкой:

<A HREF=url ><IMG SRC=url></A>

Карта изображений

Пример:

<IMG width="500" usemap="#somemap" src="url">

<MAP name="somemap">

<AREA shape="rect" coords="6, 7, 140, 196" href="url1">

<AREA shape="circle" coords="239, 98, 92" href="url2">

<AREA shape="polygon" coords="386,16, 344,56, 350,189, 385,132, 489,190, 496,74" href="url3">

</MAP>

Таблицы

  • TABLE — создание таблицы. Параметры тега:

  • CAPTION — заголовок таблицы (этот тег необязателен)

  • TR — строка таблицы

  • TH — заголовок столбца таблицы (этот тег необязателен)

  • TD — ячейка таблицы

  • height — высота таблицы

  • width — ширина таблицы

Так, например,

<TABLE BORDER="1" CELLSPACING="0">

<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>

<TH> Год </TH>

<TH> Улов </TH>

<TR>

<TD> 1997 </TD>

<TD> 214 </TD>

</TR>

<TR>

<TD> 1998 </TD>

<TD> 216 </TD>

</TR>

<TR>

<TD> 1999 </TD>

<TD> 207 </TD>

</TR>

</TABLE>

Создаст таблицу:

Улов крокодилов в Мумбе-Юмбе

Год

Улов

1997

214

1998

216

1999

207

У тега TABLE есть ещё параметр CELLPADDING. Он определяет расстояние в пикселях между рамкой ячейки и её содержимым. Например, если заменить первую строку таблицы на

<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="5">

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе

Год

Улов

1997

214

1998

216

1999

207

Другой параметр тегов TABLE, TR, TH, TD — ALIGN. Он определяет выравнивание. Возможные значения — center (по центру), left (по левому краю), right (по правому краю).

Параметр ALIGN в TD или TH определяет выравнивание для содержимого внутри данной ячейки, в TR — для содержимого всех ячеек строки, TABLE — для самой таблицы на страничке. Для каждой ячейки берётся выравнивание из TD или TH, если оно не задано — из TR, если и оно не задано — по центру для TH или по левому краю для TD.

Например, если заменить первые строки таблицы на

<TABLE BORDER="1" CELLSPACING="0" ALIGN="center">

<CAPTION> Улов крокодилов в Мумбе-Юмбе </CAPTION>

<TH> Год </TH>

<TH> Улов </TH>

<TR>

<TD> 1997 </TD> <TD ALIGN="CENTER"> 214 </TD>

таблица получится такой:

Улов крокодилов в Мумбе-Юмбе

Год

Улов

1997

214

1998

216

1999

207

Незакрытые теги TD, TR и TH приводят к некорректному отображению, особенно при работе со вложенными таблицами.

Формы

Основная статья: форма (HTML)

Создание форм в HTML является довольно сложным делом. Здесь приводятся только названия основных тегов.

  • FORM — создание формы

  • INPUT — элемент ввода (может иметь разные функции — от ввода текста до отправки формы)

  • TEXTAREA — текстовая область (многострочное поле для ввода текста)

  • SELECT — список (обычно в виде выпадающего меню)

  • OPTION — пункт списка

Символы

Чтобы создать символ, необязательно искать его на клавиатуре. Можно просто набрать тег (например, чтобы получить ¢, надо набрать следующее: ¢). Пробел —   , ударение — ́ и т. д.

Названия цветов

Основная статья: Цвета HTML

В HTML определены следующие цвета.

Название

Шестнадцатеричный цвет

black

#000000

silver

#c0c0c0

maroon

#800000

red

#ff0000

navy

#000080

blue

#0000ff

purple

#800080

fuchsia

#ff00ff

green

#008000

lime

#00ff00

olive

#808000

yellow

#ffff00

teal

#008080

aqua

#00ffff

gray

#808080

white

#ffffff

Основные символы

Основная статья: Мнемоники в HTML

Код

Символ

Смысл

<

<

меньше

>

>

больше

&

&

амперсанд

 

неразрывный пробел (на этом пробеле не переводится строка)

§

§

параграф

номер

©

©

копирайт (copyright)

®

®

зарегистрированный товарный знак (registered trademark)

™

товарный знак (trademark)

°

°

градусы

«

«

открывающая кавычка в русском языке

»

»

закрывающая кавычка в русском языке

многоточие

тире

•

жирная точка

±

±

плюс-минус

минус

Клавиатурные символы ' и " в русском языке кавычками не являются. Также неправильно на сайтах заменять №, ©, ®, ™, °C на N, (c), (R), TM, C.

Дефис, тире и минус — три разных знака.

  1. Клавиатурный символ - называется дефис и используется внутри слов.

  2. Минус шире дефиса. Он используется для записи отрицательных чисел и операции вычитания.

  3. Тире ещё шире, чем минус. Оно используется между словами и отбивается пробелами. Для обозначения числовых интервалов тоже используется тире, но пробелами не отбивается.

Более подробно: Артемий Лебедев. Тире, минус и дефис, или Черты русской типографики. Ководство (15 января 2003). Архивировано из первоисточника 24 августа 2011.

В электронной переписке, чатах и форумах все эти упрощения допустимы: можно заменять тире и минусы дефисами, знак номера на N, кавычки теми, что есть на клавиатуре и т. д.

Символы <, > и & нельзя отобразить в HTML обычным образом, потому что они имеют специальный смысл. Для их отображения всегда используются <, > и & соответственно.

Большинство спецсимволов см. на сайте about.com.

Основы языка HTML. Информатика, 11 класс: уроки, тесты, задания.

1. HTML-редакторы

Сложность: лёгкое

1
2. HTML-редакторы (лого)

Сложность: лёгкое

1
3. Основные цвета

Сложность: лёгкое

1
4. Теги для выделения текста и шрифта

Сложность: среднее

2
5. Теги

Сложность: среднее

2
6. Одиночные HTML-теги

Сложность: среднее

2
7. Цвет фона

Сложность: сложное

2
8. Код цвета

Сложность: сложное

3
9. Контейнеры

Сложность: сложное

3

Введение в html - Информатика

Тема урока:  «HTML страница и ее структура, определяемая основными тегами».

Тема урока: «HTML страница и ее структура, определяемая основными тегами».

Hyper Text Markup Language  или сокращенно  HTML   – язык гипертекстовой разметки документов, который лежит в основе почти всех существующих web-страниц, что ставит его на первое место в иерархии инструментов для создания сайтов.

Hyper Text Markup Language  или сокращенно  HTML  

– язык гипертекстовой разметки документов, который лежит в основе почти всех существующих web-страниц, что ставит его на первое место в иерархии инструментов для создания сайтов.

Для изучения  HTML  необходим Блокнот .  В нем мы будем вручную печатать код .  Пример HTML кода

Для изучения  HTML  необходим Блокнот . В нем мы будем вручную печатать код . Пример HTML кода

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

Рассмотрим его элементы:

 –   теги, определяющие начало и

конец документа.

  –   служебная секция. Здесь

размещаются команды для браузеров, инструкции для поисковых роботов, ссылки на отдаленные файлы, скрипты.

  –   теги, определяющие главный

заголовок документа.

 –   эта секция содержит всю видимую

часть web-страницы.

В браузере мы увидим Hello World!:   .

В браузере мы увидим Hello World!:

.

Посмотрим, как выглядит самая обычная интернет-страница изнутри.   Структура HTML   лежит в основе каждой web - страницы. Сегодня существует несколько типов  HTML  документов. Каждому типу документа соответствует его собственная  HTML структура.   Правильная начальная структура HTML  является залогом кросс-браузерности сайта.

Посмотрим, как выглядит самая обычная интернет-страница изнутри.

  • Структура HTML   лежит в основе каждой web - страницы.
  • Сегодня существует несколько типов  HTML  документов. Каждому типу документа соответствует его собственная  HTML структура.  
  • Правильная начальная структура HTML  является залогом кросс-браузерности сайта.
Создадим на диске D или C папку Mой первый сайт (можно назвать ее как угодно).  В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот  . - Рассмотрим HTML теги, определяющие структуру страницы  – обязательные, определяют HTML документ.  – определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.  – определяют основной заголовок web - страницы.  – обязательные, определяют видимую часть документа.  – определяют заголовок 3-го уровня.  – определяют параграф.

Создадим на диске D или C папку Mой первый сайт (можно назвать ее как угодно). В системном меню Start или Пуск заходим в раздел Программы (All Programs), открываем папку Стандартные (Аccessories), выбираем Блокнот  .

- Рассмотрим HTML теги, определяющие структуру страницы

  •  – обязательные, определяют HTML документ.
  •  – определяют секцию со служебной информацией, содержат инструкции для поисковиков, для браузеров, скрипты.
  •  – определяют основной заголовок web - страницы.
  •  – обязательные, определяют видимую часть документа.
  •  – определяют заголовок 3-го уровня.
  •  – определяют параграф.
Пример структуры документа:       HTML структура документа      Мой первый заголовок  Мой первый параграф  Мой второй параграф

Пример структуры документа:

HTML структура документа

Мой первый заголовок

Мой первый параграф

Мой второй параграф

Пишем код страницы Последовательность действий следующая: 1. Пишeм в Блокноте код  HTML  страницы. 2. Заходим в File ⇒ Save as (Файл ⇒ Сохранить как), находим нашу папку D\Mой первый сайт\ ⇒ прописываем имя файла: (File name) index.html (index – это имя, .html – расширение файла) ⇒ сохраняем. 3. Открываем IE (Internet Explorer) или другой установленный по умолчанию браузер. В его меню пробуем найти и открыть сохраненный на компьютере файл index.html. Найти и открыть файл в любом браузере можно также в окошке, которое появится после набора на клавиатуре комбинации из двух клавиш: Ctrl и O – удерживаем Ctrl и после этого жмем латинскую букву O.

Пишем код страницы

Последовательность действий следующая:

  • 1. Пишeм в Блокноте код  HTML  страницы.
  • 2. Заходим в File ⇒ Save as (Файл ⇒ Сохранить как), находим нашу папку D\Mой первый сайт\ ⇒ прописываем имя файла: (File name) index.html (index – это имя, .html – расширение файла) ⇒ сохраняем.
  • 3. Открываем IE (Internet Explorer) или другой установленный по умолчанию браузер. В его меню пробуем найти и открыть сохраненный на компьютере файл index.html. Найти и открыть файл в любом браузере можно также в окошке, которое появится после набора на клавиатуре комбинации из двух клавиш: Ctrl и O – удерживаем Ctrl и после этого жмем латинскую букву O.
Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки 

Не забывайте после каждого сохранения документа обновлять содержимое окна браузера нажатием кнопки 

Урок 2. «Заголовок HTML страницы»

Урок 2.

«Заголовок HTML страницы»

На предыдущем уроке мы познакомились с  HTML заголовком  3-го уровня.  Всего их 6:       HTML заголовки      HTML заголовок 1-го уровня  HTML заголовок 2-го уровня  HTML заголовок 3-го уровня  HTML заголовок 4-го уровня  HTML заголовок 5-го уровня  HTML заголовок 6-го уровня

На предыдущем уроке мы познакомились с  HTML заголовком  3-го уровня. Всего их 6:

HTML заголовки HTML заголовок 1-го уровня

HTML заголовок 2-го уровня

HTML заголовок 3-го уровня

HTML заголовок 4-го уровня
HTML заголовок 5-го уровня
HTML заголовок 6-го уровня

Для тегов заголовков характерно следующее: чем меньше цифра, тем больше размер шрифта.   HTML заголовок  определяет название отдельной статьи или web-страницы. В идеале страница должна иметь не более одного  HTML заголовка  1-го уровня, не более двух второго уровня и так далее. HTML заголовки , независимо от того, что каждому уровню соответствует определенный размер, могут быть любых размеров – с помощью  CSS  возможно какое угодно форматирование.

Для тегов заголовков характерно следующее: чем меньше цифра, тем больше размер шрифта.

  • HTML заголовок  определяет название отдельной статьи или web-страницы.
  • В идеале страница должна иметь не более одного  HTML заголовка  1-го уровня, не более двух второго уровня и так далее.
  • HTML заголовки , независимо от того, что каждому уровню соответствует определенный размер, могут быть любых размеров – с помощью  CSS  возможно какое угодно форматирование.
HTML заголовки и их горизонтальное выравнивание   Примеры: HTML заголовок слева   HTML заголовок справа   HTML заголовок по центру

HTML заголовки и их горизонтальное выравнивание

Примеры:

HTML заголовок слева

HTML заголовок справа

HTML заголовок по центру

Атрибуты и значения   align=

Атрибуты и значения

  • align=""  – определяет выравнивание.
  • align="left"  – выравнивание по левой стороне.
  • align="right"  – по правой стороне.
  • align="center"  – определяет центрирование.
  • style="color:"  – определяет цвет текста.
Урок 3.  «HTML текст, размер шрифта, форматирование текста»

Урок 3. «HTML текст, размер шрифта, форматирование текста»

HTML текст  является основной составляющей большинства страниц интернета. По ключевым фразам  в тексте HTML-страницы  пользователи могут найти ваш сайт. HTML текст  может быть любого размера и цвета, по вашему усмотрению. Вы также можете определить вид шрифта и его объемность. HTML размер шрифта  обыкновенно устанавливается в пикселях. HTML форматирование текста  широко распространено, применяются форматирующие теги.
  • HTML текст  является основной составляющей большинства страниц интернета.
  • По ключевым фразам  в тексте HTML-страницы  пользователи могут найти ваш сайт.
  • HTML текст  может быть любого размера и цвета, по вашему усмотрению. Вы также можете определить вид шрифта и его объемность.
  • HTML размер шрифта  обыкновенно устанавливается в пикселях.
  • HTML форматирование текста  широко распространено, применяются форматирующие теги.
Теги, форматирующие HTML текст : Теги    →   жирный HTML текст (жирный шрифт). Теги    →   жирный HTML текст (жирный шрифт). Теги    →   моноширинный HTML текст (моноширинный шрифт). Теги    →   моноширинный HTML текст (моноширинный шрифт). Теги    →   моноширинный HTML текст (моноширинный шрифт). Теги    →   HTML текст, размер больше обычного (крупный шрифт). Теги    →   HTML текст, размер меньше обычного (мелкий шрифт). Теги    →   наклонный HTML текст (наклонный шрифт). Теги    →   наклонный HTML текст (наклонный шрифт). Теги    →   наклонный HTML текст (наклонный шрифт). Теги    →   подчеркнутый HTML текст (подчеркнутый шрифт). Теги    →   зачеркнутый HTML текст (зачеркнутый шрифт). Теги    →   HTML текст (шрифт) в нижнем индексе. Теги    →   HTML текст (шрифт) в верхнем индексе.

Теги, форматирующие HTML текст :

  • Теги    →   жирный HTML текст (жирный шрифт).
  • Теги    →   жирный HTML текст (жирный шрифт).
  • Теги    →   моноширинный HTML текст (моноширинный шрифт).
  • Теги    →   моноширинный HTML текст (моноширинный шрифт).
  • Теги    →   моноширинный HTML текст (моноширинный шрифт).
  • Теги    →   HTML текст, размер больше обычного (крупный шрифт).
  • Теги    →   HTML текст, размер меньше обычного (мелкий шрифт).
  • Теги    →   наклонный HTML текст (наклонный шрифт).
  • Теги    →   наклонный HTML текст (наклонный шрифт).
  • Теги    →   наклонный HTML текст (наклонный шрифт).
  • Теги    →   подчеркнутый HTML текст (подчеркнутый шрифт).
  • Теги    →   зачеркнутый HTML текст (зачеркнутый шрифт).
  • Теги    →   HTML текст (шрифт) в нижнем индексе.
  • Теги    →   HTML текст (шрифт) в верхнем индексе.
HTML форматирование текста: зачеркнутый, подчеркнутый текст   ... жирный шрифт   ... моноширинный шрифт  ... размер шрифта больше обычного  ... размер текста меньше обычного  ... наклонный шрифт  подчеркнутый текст (подчеркнутый шрифт) зачеркнутый текст (зачеркнутый шрифт)  нижний индекс  верхний индекс 

HTML форматирование текста: зачеркнутый, подчеркнутый текст

  • ... жирный шрифт
  •   ... моноширинный шрифт 
  • ... размер шрифта больше обычного 
  • ... размер текста меньше обычного 
  • ... наклонный шрифт 
  • подчеркнутый текст (подчеркнутый шрифт)
  • зачеркнутый текст (зачеркнутый шрифт) 
  • нижний индекс 
  • верхний индекс 
HTML размер шрифта и текста   Пример:     HTML размер шрифта      Текст высотой 9 пикселей  Текст высотой 12 пикселей  Текст высотой 15 пикселей  Текст высотой 18 пикселей

HTML размер шрифта и текста

HTML размер шрифта

Текст высотой 9 пикселей

Текст высотой 12 пикселей

Текст высотой 15 пикселей

Текст высотой 18 пикселей

Результат:

Результат:

Урок 4. « Определяем HTML цвет текста и его фон»

Урок 4.

« Определяем HTML цвет текста

и его фон»

Как изменить цвет HTML текста с помощь CSS атрибутов    HTML цвет текста  определяется с помощью  CSS  атрибутов. HTML цвет текста  может быть задан в режиме HEX, например, color:#cc0000. Цвет текста в HTML  также может быть задан словом, например, color:Black. HTML фон текста  определяется значением атрибута background-color.

Как изменить цвет HTML текста с помощь CSS атрибутов

  • HTML цвет текста  определяется с помощью  CSS  атрибутов.
  • HTML цвет текста  может быть задан в режиме HEX, например, color:#cc0000.
  • Цвет текста в HTML  также может быть задан словом, например, color:Black.
  • HTML фон текста  определяется значением атрибута background-color.
Попробуем изменить цвет текста в HTML :       HTML цвет текста      Заголовок 1-го уровня  Первый параграф  Второй параграф  Третий параграф

Попробуем изменить цвет текста в HTML :

HTML цвет текста Заголовок 1-го уровня

Первый параграф

Второй параграф

Третий параграф

Строка style=

Строка style="color:#000000" является линейным  CSS  включением — устанавливает  цвет HTML текста  в режиме HEX. HEX — шестнадцатеричная система счисления (цифры от 0 до 9 и латинские буквы от a до f), которая по структуре сравнима с RGB (Red Greеn Blue). Результат:

Как изменить HTML цвет и фон текста  Попробуем изменить фон текста в HTML :    HTML, фон, текст, цвет      HTML Фон текста оранжевый  Цвет HTML текста белый, фон красный

Как изменить HTML цвет и фон текста Попробуем изменить фон текста в HTML :

HTML, фон, текст, цвет

HTML Фон текста оранжевый

Цвет HTML текста белый, фон красный

HTML цвет

HTML цвет | Выбираем нужный цвет по имени

Red

Orange

Yellow

Purple

Green

DarkRed

DarkOrange

DeepSkyBlue

DarkBlue

Blue

Gold

Indigo

DarkGreen

DarkOrchid

LightGreen

LightSkyBlue

Gray

LightPink

DeepPink

Black

MidnightBlue

LemonChiffon

LightGrey

White

Aqua

GreenYellow

Lime

WhiteSmoke

Aquamarine

DimGray

Fuchsia

BurlyWood

Crimson

Beige

Coral

Chocolate

BlanchedAlmond

DarkCyan

MediumOrchid

LimeGreen

FireBrick

Gainsboro

Violet

DarkSlateBlue

GoldenRod

Tomato

DarkSlateGray

AliceBlue

Wheat

RosyBrown

YellowGreen

CornflowerBlue

Khaki

OrangeRed

HTML цвет HTML цвет

План-конспект урока по информатике и икт (9 класс) по теме: HTML

Подсоединение компьютера к глобальной сети Интернет часто осуществляется посредством телефонной сети. К сожалению, скорость передачи информации по телефонной сети весьма невелика. Поэтому в Интернете для уменьшения количества символов, передаваемых за единицу времени(то есть, трафика) пересылают не сам документ, а его описание на особом языке. Программа для просмотра веб-страниц – браузер сама воспроизводит документ на основе полученного описания. Для описания электронных документов существует особый язык – HTML. Получив описание, написанное на этом языке, браузер воссоздает исходный документ, формируя текст и расставляя иллюстрации в нужных местах.html
HTML (HyperText Markup Language, то есть язык разметки гипертекста) –это язык Всемирной паутины. Каждый раз, открывая ту или иную веб-страницу, мы на самом деле открываем документ, написанный на языке HTML. Все веб-документы отформатированы с помощью языка HTML. Для перехода с одной страницы такого документа на другую предусмотрены гиперссылки, созданные посредством языка HTML. Размещенные на веб- страницах цветные иллюстрации, всевозможные формы для заполнения и бегущая строка видны опять-таки благодаря языку HTML.
Гипертекст – это текст со ссылками на другие документы. Чем отличается гипертекст от обычного текста? Вспомните энциклопедический словарь. В статье словаря, раскрывающей какое-либо понятие, некоторые слова выделены курсивом: это означает, что в данном словаре имеются статьи, посвященные этим словам – эти статьи можно найти и прочитать в той же книге. Такое указание на слово является ссылкой. Ссылка дает возможность получения дополнительной информации о слове или группе слов. Гипертекст тоже организован именно так.
Термин “гипертекст” впервые использовал в 1969 году Тед Нельсон. С информацией, написанной на языке гипертекста, можно работать только на компьютере.
Техника чтения обычного текста такова: прочитав страницу, переходишь к следующей. В технологии гипертекста последовательность чтения может быть произвольной, так как с помощью гиперссылки можно моментально перейти на любую страницу. Ссылки обычно выделяются в тексте цветом либо подчеркиванием. Такие ссылки называются гиперссылками, или гиперсвязями.
Объектом гиперссылки может стать отдельное слово, целое предложение или графический объект. При наведении указателя мыши на гиперссылку он меняет форму.
Посредством гиперссылок гипертекст может связывать друг с другом множество различных документов. Текстовые файлы, созданные при помощи HTML, имеют расширение .html или .htm. Их называют HTML-файлами.
Гиперссылка – это выделенный объект, связанный с другими объектами и реагирующий на щелчок мыши.

Теги

С точки зрения языка HTML, гипертекст – это текст с кодами разметки.
Обычно вместо термина “код разметки” применяют термин “тег”.
Теги – это команды, определяющие правила отображения текста в браузере.
Тег всегда начинается открывающей угловой скобкой (<) и завершается закрывающей угловой скобкой (>). При написании тегов прописные и строчные буквы не учитываются, то есть, например, <body>, <boDy> и <BODY> – это один и тот же тег.
Познакомимся с несколькими наиболее важными тегами, указывающие на то, что документ является именно HTML-документом, тегами заголовков, а также тегами, делящими документ на логические части.
Различные веб-браузеры отражают один и тот же HTML-документ не одинаково: наблюдаются различия в шрифтах, цвете, размере и т.д. При сохранении HTML-файла очень важно использовать расширение .html или .htm Это позволяет с легкостью определить тип документа. Такой документ веб-браузер легко распознает и открывает не как обычный текст, а как веб-страницу. Поэтому HTML-документ следует рассматривать как логический, а не как физический документ. Другими словами, вид документа может изменяться в зависимости от читающей его программы и от класса компьютера.

Тег<HTML>

Каждый HTML-документ начинается и заканчивается тегом <HTML>. Эти теги показывают, что документ является именно HTML-документом. Они непременно присутствуют в нем, вне зависимости от прочего его содержания. Использовать пару тегов <HTML> можно следующим образом:

1

2

3

<HTML>

Мой первый HTML-документ

</HTML>  

Теги <HEAD> и <BODY>

Любой HTML-документ можно разделить на две логические части — заголовок и тело (то есть сам документ). Для того, чтобы веб-браузер правильно отобразил документ, эти две части нужно отделить друг от друга. Обычно заголовок HTML-документа отражает основную информацию о документе, а тело — содержание документа. Поэтому добавимк предыдущему примеру пару тегов <HEAD> — начальный и конечный.

1

2

3

4

<HTML> <HEAD>

 Здесь располагается заголовок

 </HEAD>

 Мой первый HTML-документ </HTML>

Как видно из расположения тега <HEAD>, различные теги можно располагать рядом на одной строке.
Поскольку у каждого документа должны быть заголовок (head) и тело (body), то для завершения логического деления документа надо дополнить его тело начальным и конечным тегами <BODY> (парой тегов):

1

2

3

4

5

<HTML> <HEAD>

Здесь располагается заголовок

</HEAD> <BODY>

Мой первый HTML-документ

</BODY> </HTML>  

Каждый HTML-документ начинается и кончается открывающим и закрывающим тегами <HTML> (их называют тегами-контейнерами). Если в документе пропущен открывающий или закрывающий тег, то все прочие теги в нем уже не будут восприняты правильно. Закрывающий тег начинается с косой черты – именно этот признак указывает на то, что он является закрывающим.
Итак, любой HTML-документ начинается тегом <HTML> и заканчивается тегом </HTML>. Помещая заголовок документа между парой тегов <HEAD> и </HEAD>, а тело – между парой тегов <BODY> и </BODY>,документ делят на  две логические части.

Тег <TITLE>

Одним из важнейших тегов для пользователя является тег <TITLE>. При работе в Интернете вы, наверное, видели в строке заголовка веб-браузера название HTML-документа. Это название берется из текста HTML-документа — из содержания тега <TITLE>. При отсутствии такого тега в документе в строке заголовка вместо названия страницы отражается ее URL-адрес. Тег <TITLE> располагается между парой тегов <HEAD> и сам является парным, охватывая текст, указывающий название документа, с двух сторон. Если добавить такой тег в наш пример, то HTML-документ приобретет законченный вид:

1

2

3

4

<HTML> <HEAD> <TITLE> Название документа </TITLE>

</HEAD> <BODY>

Мой первый HTML-документ

</BODY> </HTML>  

Несмотря на кажущуюся примитивность, данный документ включает в себя все необходимые теги, и его можно просматривать посредством веб-браузера. Сохранение документа при работе в редакторе производится точно так
же, как сохранение любого другого документа. Не стоит забывать, что документ сохраняется в текстовом формате. Желательно присвоить ему название вроде first.html (first.htm).

Основы языка HTML - Информатика

Основы языка HTML: тэги, атрибуты тэгов, списки, таблицы МОУ «Ропшинская школа» Хирьянова В.А.

Основы языка HTML: тэги, атрибуты тэгов, списки, таблицы

МОУ «Ропшинская школа»

Хирьянова В.А.

HTML-документ HTML-документ – это обычный текстовый документ, содержащий  специальные разметочные указатели (тэги). HTML-файл имеет расширение  .htm или .html

HTML-документ

  • HTML-документ – это обычный текстовый документ, содержащий специальные разметочные указатели (тэги).
  • HTML-файл имеет расширение .htm или .html
Теги Тэг –  инструкция браузеру, указывающая способ отображения текста.

Теги

  • Тэг – инструкция браузеру, указывающая способ отображения текста.
ПРАВИЛА ЗАПИСИ ТЭГОВ   Тэг всегда начинается со знака «меньше» ()   Например:

ПРАВИЛА ЗАПИСИ ТЭГОВ

  • Тэг всегда начинается со знака «меньше» () Например:
Виды тегов Одиночный 2. Парный (контейнер)  открывающий   закрывающий

Виды тегов

  • Одиночный 2. Парный (контейнер)

открывающий

закрывающий

СТРУКТУРНЫЕ ТЭГИ Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.

СТРУКТУРНЫЕ ТЭГИ

  • Всё содержимое файла Интернет-страницы заключается в контейнер …, указывающий браузеру, что данный текст представляет собой HTML-документ и, возможно содержит в себе тэги, которые браузер должен выявить, распознать, интерпретировать.
СТРУКТУРНЫЕ ТЭГИ  начало контейнера HTML-документа   начало контейнера заголовка    начало контейнера строки – названия страницы   … строка названия страницы    конец контейнера строки – названия страницы   конец контейнера заголовка   начало контейнера тела страницы  … тело (всё содержимое) страницы   конец контейнера тела страницы  конец контейнера HTML-документа

СТРУКТУРНЫЕ ТЭГИ

начало контейнера HTML-документа

начало контейнера заголовка

начало контейнера строки – названия страницы

строка названия страницы

конец контейнера строки – названия страницы

конец контейнера заголовка

начало контейнера тела страницы

тело (всё содержимое) страницы

конец контейнера тела страницы

конец контейнера HTML-документа

Рассмотрим пример

Рассмотрим пример

Списки в HTML-документах

Списки в HTML-документах

Списки в HTML-документах могут быть следующих видов: Неупорядоченные (маркированные) списки Упорядоченные (нумерованный) списки Многоуровневые списки

Списки в HTML-документах могут быть следующих видов:

  • Неупорядоченные (маркированные) списки
  • Упорядоченные (нумерованный) списки
  • Многоуровневые списки
Неупорядоченные (маркированные) списки   Необходим следующий HTML-код:    Первый элемент   Второй элемент   Третий элемент   Например, для того чтобы создать вот такой список: Первый элемент Второй элемент Третий элемент Текст нужно расположить между тэгами  и . А каждый новы элемент начинается с метки

Неупорядоченные (маркированные) списки

Необходим следующий HTML-код:

  • Первый элемент

  • Второй элемент

  • Третий элемент

    Например, для того чтобы создать вот такой список:

    • Первый элемент
    • Второй элемент
    • Третий элемент

    Текст нужно расположить между тэгами .

    А каждый новы элемент начинается с метки

  • Атрибуты тэга  TYPE определяет вид маркера. Может иметь значения: disk - закрашенный кружок square – закрашенный квадратик circle – не закрашенный кружок По умолчанию используется type=‘’disc’’ Пример написания:

    Атрибуты тэга

    TYPE определяет вид маркера. Может иметь значения:

    disk - закрашенный кружок

    square – закрашенный квадратик

    circle – не закрашенный кружок

    По умолчанию используется type=‘’disc’’

    Пример написания:

      Упорядоченные (нумерованный) списки   Текст нужно расположить между тэгами  и . Необходим следующий HTML-код: Например, для того чтобы создать вот такой список:  Первый элемент Второй элемент Третий элемент   Первый элемент   Второй элемент   Третий элемент

      Упорядоченные (нумерованный) списки

      Текст нужно расположить между тэгами и .

      Необходим следующий HTML-код:

      Например, для того чтобы создать вот такой список:

      • Первый элемент
      • Второй элемент
      • Третий элемент

    • Первый элемент

    • Второй элемент

    • Третий элемент

      Атрибуты тэга  TYPE определяет стиль нумерации пунктов. Может иметь значения:   А – Нумерация заглавными латинскими буквами  а - Нумерация маленькими латинскими буквами  I – нумерация большими римскими цифрами  i- нумерация маленькими римскими цифрами  1 - нумерация арабскими цифрами START определяет первое число, с которого начинается нумерация пунктов (используйте только целые числа) По умолчанию используется type=‘’1’’, start =‘’1’’. Пример написания:

      Атрибуты тэга

        TYPE определяет стиль нумерации пунктов. Может иметь значения:

        А – Нумерация заглавными латинскими буквами

        а - Нумерация маленькими латинскими буквами

        I – нумерация большими римскими цифрами

        i- нумерация маленькими римскими цифрами

        1 - нумерация арабскими цифрами

        START определяет первое число, с которого начинается нумерация пунктов (используйте только целые числа)

        По умолчанию используется type=‘’1’’, start =‘’1’’.

        Пример написания:

      Многоуровневые списки рассмотрите самостоятельно!!!

      Многоуровневые списки рассмотрите самостоятельно!!!

      Таблицы в HTML-документах

      Таблицы в HTML-документах

      Границы таблицы  Таблица начинается с тега  и заканчивается тегом

      Границы таблицы

    • Таблица начинается с тега и заканчивается тегом
    Атрибуты тега   задает толщину рамки таблицы  устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.  задает расстояние между ячейками  задает расстояние между содержимым ячейки и ее рамкой  устанавливает ширину таблицы в пикселях или процентах от ширины документа  устанавливает высоту таблицы в пикселях или процентах от ширины документа

    Атрибуты тега

    задает толщину рамки таблицы
  • устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.
  • задает расстояние между ячейками
  • задает расстояние между содержимым ячейки и ее рамкой
  • устанавливает ширину таблицы в пикселях или процентах от ширины документа
  • устанавливает высоту таблицы в пикселях или процентах от ширины документа Строки таблицы Каждая строка таблицы начинается с тега  и заканчивается тэгом

    Строки таблицы

    • Каждая строка таблицы начинается с тега
    и заканчивается тэгом Атрибуты тега   устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.  устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.

    Атрибуты тега

    устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.
  • устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom. Ячейки таблицы Каждая ячейка таблицы начинается с тега  и заканчивается тегом

    Ячейки таблицы

    Атрибуты тега   устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.  устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.  устанавливает ширину ячейки  устанавливает высоту ячейки  Указывает количество столбцов, которое объединено в одной ячейке (По умолчанию = 1)  Указывает количество строк, которое объединено в одной ячейке (По умолчанию = 1)  Не позволяет программе просмотра делать перевод строки в ячейке таблицы

    Атрибуты тега

    устанавливает выравнивание ячеек в таблице, принимает значения: left, center, right.
  • устанавливает вертикальное выравнивание ячеек в таблице, принимает значения: top, middle, bottom.
  • устанавливает ширину ячейки
  • устанавливает высоту ячейки
  • Указывает количество столбцов, которое объединено в одной ячейке (По умолчанию = 1)
  • Указывает количество строк, которое объединено в одной ячейке (По умолчанию = 1)
  • Не позволяет программе просмотра делать перевод строки в ячейке таблицы Рассмотрим пример

    Рассмотрим пример

  • HTML-программирование, инструменты создания информационных объектов для Интернет, Web-страницы и сайты

    УРОК 18 «_20___» __01___2016 г Класс: 11 «Б»

    Тема: HTML-программирование, инструменты создания информационных объектов для Интернет, Web-страницы и сайты/

    Цели урока: Применение знаний основных принципов построения web-сайта и основ HTML.

    Задачи:

    Развивающие: способствовать развитию познавательного интереса, творческой активности обучающихся.

    Образовательные: научить использовать коды при создании веб- страниц.

    Воспитательные: воспитать уважение к сопернику, умения работать в команде.

    Тип урока: комбинированный (изучение нового материала и практическая работа).

    Оборудование: компьютер, браузер, блокнот, раздаточный материал.

    Метод урока: объяснительно-демонстрационный

    1. Орг. момент. (1 мин)

    2. Актуализация и проверка знаний. (10 мин)

    3. Теоретическая часть. (14 мин)

    4. Практическая часть. (15 мин)

    5. Выставление оценок (2 мин)

    6. Итог урока. (2 мин)

    7. Д/з (1 мин)

    Ход урока:

    1. Орг. момент.

    Приветствие, проверка присутствующих. Объяснение хода урока.

    II. Актуализация и проверка знаний. Тест «Проверь себя»

    hello_html_m63996a07.png

    hello_html_699a11d8.png

    hello_html_5b341749.pnghello_html_11c48ed6.gif

    hello_html_m63996a07.png

    системный

    Как вы думаете чем они связаны?

    Какие текстовые редакторы вы знаете?(блокнот,word pad-это стандартные редакторы,) и нам этого будет достаточно для построения своей веб- странички. На этом уроке мы основными тегами для построения страниц. Для этого нам понадобится браузер и блокнот - вот и всё, что вам необходимо для работы. Раз вы просматриваете эту страничку – значит браузер у вас уже есть, ну а блокнот я думаю найти не составит труда ( Пуск – Программы - Стандартные - Блокнот).

    ІІІ Теоретическая часть

    Что такое HTML?

    Всемирная паутина состоит из множества связанных между собой электронных документов, представляющих информационные данные, описанные с помощью специальных технологических правил. Эти правила составляют на языке гипертекстовой разметки HTML (Hyper Text Markup Language).

    Многие называют HTML языком программирования, это не совсем верно, HTML является языком разметки электронных документов.

    Специальные программы для просмотра электронных документов, созданных по правилам языка разметки HTML, называют браузерами. Основная функция браузера заключается в интерпретации кода HTML и выходе визуального результата на экран монитора пользователя. Существует большое количество самых разнообразных браузеров, однако наибольшей популярностью пользуются 3 программы: Internet Explorer, Netscape Navigator и Opera.

    Слово «гипертекстовый» в расшифровке названия языка HTML нуждается в отдельном пояснении.

    Гипертекст представляет собой «многомерный» текстовый документ или объединение нескольких текстовых документов, содержащий гипертекстовые ссылки, построенный по принципу «нелинейного» структурированного материала за счёт применения гипертекстовых ссылок, позволяющих одним щелчком мыши перемещаться из одной «смысловой точки» гипертекстового документа в другую. Концепция гипертекста, лежащая в основе WWW, была предложена Теодором Хольмом Нельсоном в 60-х гг. XX века. Дальнейшим развитием гипертекста стала технология гипермедиа, позволяющая связывать гиперссылками не только текстовые фрагменты, но и данные иного типа (графику, звукозаписи, цифровое видео и пр.), когда щелчок мышью на выделенном слове или фразе приводит к демонстрации заданной разработчиком гипермедиа-документа иллюстрации, воспроизведению аудиозаписи, записку исполняемо й программы и пр. либо, например, те или иные участки изображения представляют собой ссылки на текстовые фрагменты или иные файлы данных.

    При создании HTML документа акцент делается не на оформлении текста документа (как в текстовых редакторах) а на его структуре. Такой принцип позволяет создавать системно-независимые файлы, то есть такой файл можно просматривать на компьютере любой системы., используя программы-браузеры разных производителей. Прежде чем приступить к разработке своего сайта, определимся с програмным обеспечением, которое будем использовать. Свою web-страничку или даже весь сайт можно создовать вручную, используя HTML. HTML код может быть записан в обычном текстовом редакторе (блокнот) или в специальном редакторе. Но при таком способе легко допустить ошибку, да и времени придется затратить немало.

    Все ПО для создания сайтов можно распределить на группы:

    • Конструкторы сайтов;

    • Система управления сайтом;

    • Программы для создания сайтов.

    Конструкторы сайтов позволяют очень быстро создавать web ресурсы, не требуют специальных знаний.

    При этом на конечный продукт накладывают жесткие ограничения:

    1. Дизайн выбирается из ограниченного количества шаблонов

    2. Функциональные возможности web страницы ограничены

    3. Система управление таким проектом привязана к хостингу, то есть забрать свой проект вы не сможете.

    Основные функции CMS система управления сайтом:

    1. Представление средств разработки сайта

    2. Организация совместной работы над сайтом

    3. Управление содержимым (контроль доступа, хранение документов, и т.д.)

    4. Представление информации в удобном для поиска и навигации виде.

    Каждый сайт, созданный в CMS, имеет панель управления. Она является лишь частью программы, но ее достаточно для управления сайтом.

    Система создания и управления сайтом могут быть платными ( как 1С-Битрикс, WebDirector) и бесплатными (как Joomla).

    Для непрофессионалов удобнее всего воспользоваться WISIWYG редактором (что видишь, то и получаешь) Работа с такой программой очень похожа на создание документа в Microsoft Word.

    HTML - документы представляют собой текстовые файлы, в которые встроены специальные команды.

    Теги (tags) – команды языка HTML. Для файлов, являющихся HTML-документами, принято расширение htm или html.

    Каждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне обозревателя, выбирая соответствующую команду или кнопку на панели инструментов, или клавишу <F5>.

    Например чтобы в окне браузера увидеть текст «Привет! Это моя первая web-страничка»

    при подготовке документа параметры формирования описать можно так:

    <выделить полужирным> «Привет! <закончить выделение>Это моя первая web-страничка»

    В HTML документе этот фрагмент пишется так:

    <b>Привет! b> Это моя первая web-страничка

    hello_html_12741a0.jpg

    <HEAD>

    <TITLE>

    Название Web-страницы

    TITLE>

    HEAD>

    Привет! Это моя первая web-страничка

    ІV Практическая работа

    Задание № 1. Создание простейшего файла HTML

    1. Создайте личную папку, куда вы будете сохранять все файлы своего сайта.

    2. Запустите программу Блокнот (Notepad).

    3. Наберите в окне программы простейший файл HTML.

    Учебный файл HTML

    Расписание занятий на вторник

    4. Сохраните файл под именем RASP.HTML (обязательно укажите тип файла HTML при сохранении) в личной папке.

    5. Для просмотра Web-страницы используйте любую программу браузера (Internet Explorer, Opera, Mozilla Firefox или другую). Для этого, не покидая программу Блокнот (сверните окно на панель задач), откройте личную папку и двойным кликом по файлу RASP.HTML откройте окно браузера.

    На экране вы увидите результат работы

    Задание № 2. Управление расположением текста на экране

    1. При необходимости откройте текст Web-страницы в Блокноте (1 щелчок правой клавишей мыши по файлу RASP.HTML, в контекстном меню выбрать команду Открыть с помощью... и выбрать программу Блокнот). При необходимости открыть файл в браузере – двойной клик по значку файла левой клавишей мыши.

    2. Внести изменения в файл RASP.HTML, расположив слова Расписание, занятий, на вторник на разных строках.

    Учебный файл HTML

    Расписание

    занятий

    на вторник

    3. Сохраните текст с внесенными изменениями в файле RASP.HTML (меню Файл | Сохранить). Если у вас уже отображается Web-страница, то вам достаточно переключиться на панели задач на программу браузера и обновить эту страницу (кнопка ). Изменилось ли отображение текста на экране?

    Не удивляйтесь тому, что внешний вид вашей Web-страницы не изменился.

    Не забывайте каждый раз сохранять текст Web-страницы при ее корректировке в программе Блокнот и обновлять страницу при ее просмотре в программе браузера.

    V Закрепление материала:
    Игра «Кто быстрей?»

    Перед Вами разбросаны теги HTML. Ваша задача быстро и не раздумывая их разделить по стикерам

    VІ Домашнее задание: повторение конспекта

    VІІ Рефлексияhello_html_m25393aaf.png

    hello_html_7805455b.png

    Методическая разработка по информатике и икт (10 класс) по теме: Способы создания сайтов. Основы HTML

    Урок практикум по теме : «Способы создания сайтов. Основы HTML»

    ЦЕЛИ И ЗАДАЧИ  УРОКА:

    1. Освоить основные этапы построения web - страниц
    2. Освоить основные методы создания web - страниц
    3. Иметь представление об особенностях оформления информационных блоков страницы
    4. Освоить требования к созданию web - страниц
    5. Познакомиться с инструментальными средствами создания сайтов
    6. Научиться создавать HTML – файлы
    7. Оформлять заголовки
    8. Размещать  гиперссылки и графику на web - страниц

    ХОД УРОКА

    Этап урока (выбрать нужное)

    Примерное время из часов, отведенных на урок .

    Работа учителя

    Работа учащихся

     ЦОР к уроку (ссылка)

    I. Вводная часть

    I.  Организационный момент

    1мин

    Приветствует учащихся с целью создания благоприятной атмосферы урока. Объявляет тему урока.

     Слушают, наблюдают, настраиваются на восприятие материала урока

    II. Постановка цели урока

    Актуализация знаний. Повторение теоретического материала.

    7мин

    Повторение  материала:

    1. На доске записать основные тэги HTML – стандарта
    2. Рассказать , что представляют собой веб-страница и веб-сайт.

    Фронтальный опрос:

    1. Что такое веб-дизайн?
    2. Что мы понимает под понятием «юзабилити»?
    3. Перечислите «золотые правила» оформления сайта.
    4. С помощью каких приемов автор сайта старается повысить юзабилити? ( на примере представленного сайта)
    5. По мнению дизайнеров, особое внимание при создании сайта следует уделять первой (главной) странице. Почему?

     Отвечают на вопросы.

    III. Основная часть

    Объяснение порядка работы, цели и задачи работы.

    8мин

    1. Разработка сайта « Внутренние устройства компьютера».

    Наш сайт будет посвящен компьютеру, Каждая страница должна содержать заголовок, поясняющий текст, иллюстрацию и панель навигации. Сайт будет состоять из 4 страниц.  Две страницы мы сделаем сегодня на уроке, а две другие вы самостоятельно сделаете дома и внесете  в них свое оформление.

    Главная страница содержит: (Показ слайдов)

    Заголовок – Давайте знакомиться –устройства компьютера.

    Поясняющий текст : Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами. Иллюстрацию : рисунок компьютера

    Навигационную панель : Гиперссылки на 3 другие страницы <ВНУТРЕННИЕ УСТРОЙСТВА

    ВНЕШНИЕ УСТРОЙСТВА

    СЛОВАРЬ >

    Вторая страница: (Показ слайдов)

    Заголовок – ВНУТРЕННИЕ УСТРОЙСТВА

    Поясняющий текст :  Информацию об внутрнних устройствах в форме вложенного списка

    Иллюстрацию : рисунок

    Навигационную панель : Гиперссылки на 3 другие страницы <ВНУТРЕННИЕ УСТРОЙСТВА

    ВНЕШНИЕ УСТРОЙСТВА

    СЛОВАРЬ >

            2.Инструментальные средства создания сайтов

    Для создания  сайта используются специальные инструментальные средства позволяющие создавать страницы имея минимальные  знания по основам программирования. В качестве самого удобного и распространенного  инструментального средства следует отметить  Microsoft Front Page , который входит в состав Microsoft office. (Показать на слайде). Также для создания сайта используют привычный и удобный текстовый редактор БЛОКНОТ.

            3.Практическая работа

    Слушают учителя, делают записи  в  тетради.

    Презентация 3 к уроку http://eduklgd.ru/org/mou01/mou0143/news43.php/3.pps

    IV. Освоение учащимися нового материала: формирование конкретных представлений об изучаемых фактах, явлениях, их сущности и взаимосвязях у учащихся.

    Проведение работы, объяснения учителя.

     20 мин

    ХОД РАБОТЫ

    1. Создайте папку site (Файл-Создать-Папку).

    2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

    3. Наберите следующий HTML-код:

    <HTML>
    <HEAD>
    <TITLE> Устройства компьютера</TITLE>
    </HEAD>
    <BODY >
    Давайте знакомиться – компьютер
    </BODY>
    </HTML>

    4. Сохраните под именем index.htm в папке site.

    5. Закройте текстовый редактор Блокнот.

    6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

    7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат.

    8. Оформим фразу “Давайте знакомиться – Устройства компьютера ” как заголовок. Для этого откроем HTML-код нашей страницы:

    9. Зададим выравнивание заголовка “по центру”:

    10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.»

    11. Добавим на нашу страницу картинку.

    12.Вставим гиперссылки и посмотрим на полученную страницу

    1 СТРАНИЦА САЙТА

    <HTML>

    <HEAD>

    <TITLE> Устройства компьютера</TITLE>

    </HEAD>

    <BODY >

    <h2 align="center"> Давайте знакомиться – Устройства компьютера </h2>

    <hr>

    <IMG src="comp.wmf" align="right">

    <P align="left">

    Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.</P>

    <p align="center">

    <A HREF="index1.htm"> ВНУТРЕННИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА

    </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index3.htm"> СЛОВАРЬ </A>

    </BODY>

    </HTML>

    13. Откройте текстовый редактор Блокнот .

    14. Наберите следующий HTML-код:

    СЛОВАРЬ

    <HTML>
    <HEAD>
    <TITLE> Устройства компьютера</TITLE>
    </HEAD>
    <BODY >
    Внутренние устройства
    </BODY>
    </HTML>

    15. Сохраните под именем index1.htm в папке site.

    16. Закройте текстовый редактор Блокнот.

    17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

    18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.

    19. Оформим фразу “ Внутренние устройства ” как заголовок. Для этого откроем HTML-код нашей страницы:

    20. Зададим выравнивание заголовка “по центру”:

    21. Создадим главный нумерованный список основных категорий ПО

    22. Добавим вложенный список.

    23. Добавим на нашу страницу картинку.

    24.Вставим гиперссылки и посмотрим на полученную страницу

    2 СТРАНИЦА  САЙТА

    <HTML>

    <HEAD>

    <TITLE> Устройства компьютера </TITLE>

    </HEAD>

    <BODY >

    <h2 align="center"> Внутренние устройства </h2>

    <hr>

    <IMG src="komp.wmf" align="right">

    <ol>

    <li> МАТЕРИНСКАЯ ПЛАТА

    <li> ПРОЦЕССОР

    <li> ОПРАТИВНАЯ ПАМЯТЬ

    <li> ГРАФИЧЕСКИЙ РЕДАКТОР

    <li> ЖЕСТКИЙ ДИСК

    <li> ВИДЕОАДАПТЕР

    <li> ЗВУКОВОЙ  АДАПТЕР

    <li> СЕТВАЯ КАРТА

    <li> ДИСКОВОД И СD- ROM

    <li> КОММУНИКАЦИОННЫЕ ПОРТЫ

    <li> СИСТЕМЫ ПРОГРАММИРОВАНИЯ

    </OL>

    <p align="center">

    <A HREF="index.htm"> ГЛАВНАЯ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index3.htm"> СЛОВАРЬ </A>

    </BODY>

    </HTML>

    1. Создают файл index.htm в программе Блокнот.
    2. Просматривают его в браузере, анализируют полученный результат.
    3. Вставляют текст, картинку, гиперссылки
    4. Затем  создают вторую страницу сайта.
    5. Задают  вопросы.
    6. Отсылают по сети учителю выполненные работы.

    Оценка результатов

    7 мин

    Просмотр полученных от учеников работ.

    Участвуют  в обсуждении  полученных  результатов

    V. Информация о домашнем задании и рекомендации по его выполнению

    Выдача задания на дом по результатам проведенного урока

    1 мин

    Самостоятельно разработать 2 страницы сайта.

    Полезные  ссылки дополнительно для учеников:

    Cайт видеоуроки  в сети Интернет.  videouroki..net http://videouroki.net/videouriki/html/saitostroenie/saitostroenie.html

    http://videouroki.net/filecom.php?fileid=98659371

    Электронный учебник http://www.univer.omsk.su/omsk/Edu/htmlbook/index.htm

    VII Завершение урока

    Подведение итогов.

    1 мин

    Подводит итог урока, комментирует и выставляет оценки за  работу на уроке.

    Формулируют вывод урока. Выставляют оценки в дневник

    Приложение 1

    Раздаточный материал

    Практическая работа

    Цель работы:  Научиться

    1. создавать, просматривать и редактировать HTML-документы;
    2. оформлять заголовки;
    3. управлять размером  шрифта;
    4. выделять и выравнивать абзацы;
    5. размещать графику на web-странице.
    6. Оформлять гиперссылки

    ХОД РАБОТЫ

    1. Создайте папку site (Файл-Создать-Папку).

    2. Откройте текстовый редактор Блокнот (Пуск-Программы-Стандартные-Блокнот).

    3. Наберите следующий HTML-код:

    <HTML>
    <HEAD>
    <TITLE> Устройства компьютера</TITLE>
    </HEAD>
    <BODY >
    Давайте знакомиться – компьютер
    </BODY>
    </HTML>

    4. Сохраните под именем index.htm в папке site.

    5. Закройте текстовый редактор Блокнот.

    6. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

    7. Откройте двойным щелчком файл index.htm для просмотра в браузере. Проанализируйте полученный результат.

    8. Оформим фразу “Давайте знакомиться – Устройства компьютера ” как заголовок. Для этого откроем HTML-код нашей страницы:

    9. Зададим выравнивание заголовка “по центру”:

    10. Добавим на страницу основной текст: «Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.»

    11. Добавим на нашу страницу картинку.

    12.Вставим гиперссылки и посмотрим на полученную страницу

    1 СТРАНИЦА САЙТА

    <HTML>

    <HEAD>

    <TITLE> Устройства компьютера</TITLE>

    </HEAD>

    <BODY >

    <h2 align="center"> Давайте знакомиться – Устройства компьютера </h2>

    <hr>

    <IMG src="comp.wmf" align="right">

    <P align="left">

    Страницы этого сайта позволят Вам больше узнать о внутренних и внешних устройствах компьютера, Терминологический словарь познакомит Вас с компьютерными терминами.</P>

    <p align="center">

    <A HREF="index1.htm"> ВНУТРЕННИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА

    </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index3.htm"> СЛОВАРЬ </A>

    </BODY>

    </HTML>

    13. Откройте текстовый редактор Блокнот .

    14. Наберите следующий HTML-код:

    СЛОВАРЬ

    <HTML>
    <HEAD>
    <TITLE> Устройства компьютера</TITLE>
    </HEAD>
    <BODY >
    Внутренние устройства
    </BODY>
    </HTML>

    15. Сохраните под именем index1.htm в папке site.

    16. Закройте текстовый редактор Блокнот.

    17. Откройте папку site. В ней находится файл web-страницы, который открывается и распознаётся браузером Internet Explorer:

    18. Откройте двойным щелчком файл index1.htm для просмотра в браузере. Проанализируйте полученный результат.

    19. Оформим фразу “ Внутренние устройства ” как заголовок. Для этого откроем HTML-код нашей страницы:

    20. Зададим выравнивание заголовка “по центру”:

    21. Создадим главный нумерованный список основных категорий ПО

    22. Добавим вложенный список.

    23. Добавим на нашу страницу картинку.

    24.Вставим гиперссылки и посмотрим на полученную страницу

    2 СТРАНИЦА  САЙТА

    <HTML>

    <HEAD>

    <TITLE> Устройства компьютера </TITLE>

    </HEAD>

    <BODY >

    <h2 align="center"> Внутренние устройства </h2>

    <hr>

    <IMG src="disk.wmf" align="right">

    <ol>

    <li> МАТЕРИНСКАЯ ПЛАТА

    <li> ПРОЦЕССОР

    <li> ОПРАТИВНАЯ ПАМЯТЬ

    <li> ГРАФИЧЕСКИЙ РЕДАКТОР

    <li> ЖЕСТКИЙ ДИСК

    <li> ВИДЕОАДАПТЕР

    <li> ЗВУКОВОЙ  АДАПТЕР

    <li> СЕТВАЯ КАРТА

    <li> ДИСКОВОД И СD- ROM

    <li> КОММУНИКАЦИОННЫЕ ПОРТЫ

    <li> СИСТЕМЫ ПРОГРАММИРОВАНИЯ

    </OL>

    <p align="center">

    <A HREF="index.htm"> ГЛАВНАЯ </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index2.htm"> ВНЕШНИЕ УСТРОЙСТВА </A> &nbsp &nbsp &nbsp &nbsp &nbsp &nbsp

    <A HREF="index3.htm"> СЛОВАРЬ </A>

    </BODY>

    </HTML>

    Отправить ответ

    avatar
      Подписаться  
    Уведомление о