языка html
DESCRIPTION
prezentTRANSCRIPT
![Page 1: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/1.jpg)
Презентация подготовлена учеником Школы №15 Яшиным Владимиром.
![Page 2: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/2.jpg)
Особенности HTML-документов
Web - редакторы
Основные тэги HTML - документов
Список цветов
Форматирование текста
Таблицы
Web - обозреватели
СОДЕРЖАНИЕСОДЕРЖАНИЕ
Основы форматирования html-документа
Основы языка html
![Page 3: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/3.jpg)
HTML (Hyper Text Markup Language, язык разметки гипертекста) это язык Всемирной паутины.
форматирование текстовой части осуществляется с помощью команд, задающих стиль шрифта, заголовков и кадров;
имеется возможность включения рисунков, диаграмм, анимации, видеоклипов, музыкального и речевого сопровождения, текстовых спецэффектов (бегущая строка), гиперссылок;
с помощью команд языка можно создавать таблицы и форматировать текст вручную;
возможно включение интерактивных компонентов, таких как заполняемые формы и программы, работа с которыми требует участия самого пользователя.
имеется возможность создания карт-изображений, содержащих активные области; эти области являются гиперссылками, указывающими на различные Web-документы.
Основные особенности языка HTML:
![Page 4: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/4.jpg)
default.htm или index.htm
Web-страница – документ, написанный на HTML,
формата *.htm или *.html
Web-сайт-это набор Web-страниц, подчиненных общей тематике и объединенных в единое целое.
http://www.good.ru/good.html
http://www.good.ru/goodfolder1/goodfolder2/goodpage.html
http://www.goodsite.ru
![Page 5: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/5.jpg)
Internet Explorer
Mozilla Firefox
Opera
Safari
Google Chrome
Наиболее популярные Web-обозреватели:
![Page 6: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/6.jpg)
HTMLHTML--редакторыредакторы
Редакторы тэгов
WYSWYG-редакторы
Блокнот, WordPad, MS Word
и любые другие программы,
работающие в текстовом
режиме
Специальные редакторы
документов HTML:MS Front Page,
Namo Web-Editor,Macromedia Dreamweaver
![Page 7: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/7.jpg)
Особенности HTML-документов
<body> = <bODy> = <boDy> = <BodY>
HTML-документ не является обычным текстовым документом.
От простого текстового файла HTML-документ отличает присутствие кодов разметки, которые называются тегами.
Тэги заключаются в угловые скобки < и >,
конечный тэг всегда снабжён косой чертой /.
HTML- коды не чувствительны к регистру, то есть
![Page 8: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/8.jpg)
Основные теги HTML-документов
К обязательным относятся теги, указывающие на то, что документ является HTML-документом;
теги заголовков;
теги, делящие документ на логические части.
Тэги бывают
начальными (открывающими)конечными (закрывающими, начинаются со знака "/").
<HTML> <HEAD> <FONT > <BODY>
</HTML> </HEAD> </FONT>
</BODY>
![Page 9: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/9.jpg)
<HTML> <HEAD> <TITLE>Заголовок документа</TITLE> </HEAD>
<BODY>Текст документа
</BODY>
</HTML>
Правильный пример самого короткого HTML-документа:
![Page 10: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/10.jpg)
Основы форматирования HTML-документа
H1,H2,...H6
Используются для создания заголовков текста
P Используется для разметки абзацев
ADDRESS Оформляет текст как почтовый адрес
BLOCKQUOTE
Оформляет текст как цитату
BR Осуществляет перевод строки
HR Вставляет в текст горизонтальную разделительную линию
Текстовые блоки
![Page 11: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/11.jpg)
<HTML><HEAD>
<ТIТLЕ>Создание абзаца</ТIТLЕ></HEAD>
<BODY> Здесь что-то написано.
<P>А здесь новый абзац</P>
<P ALIGN="center">Это центрированный абзац.<BR>Текст располагается в центре окна браузера
</P>
<P ALIGN="right">А это абзац, выровненный по правому краю.</P>
</BODY></HTML>
![Page 12: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/12.jpg)
…Пишите по следующему адресу:<ADDRESS>
г. Калуга. ул. Ф. Энгельса, д. 12, <BR>МОУ СОШ №31
</ADDRESS>
Редакция журнала "Домосед" выражает благодарностьСидорову Ивану Петровичу за замечательное стихотворение:
<BLOCKQUOTE>Синели красные ромашки,<BR>Желтели в небе облака,<BR>Синицы в теплый край летели,<BR>К истоку двигалась река.<BR>
</BLOCKQUOTE> ...
![Page 13: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/13.jpg)
![Page 14: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/14.jpg)
RGB-коды: #FFFFFF – белый#FF0000 – красный#00FF00 – зелёный#0000FF – синий#000000 – чёрный
Список цветов символов HTML:
aqua - бирюзовыйblack - чёрныйblue - синийgray - серыйgreen - зелёныйlime – ярко-зелёныйsilver – светло-серыйteal – ярко-голубой
maroon – тёмно-красныйwhite - белыйnavy – тёмно-синийolive - оливковыйpurple - фиолетовыйred – красныйyellow - жёлтыйfuchsia – ярко-фиолетовый
Дополнительные цвета:brown - коричневыйorange - оранжевыйcyan – оттенок бирюзовогоpink – розовый
![Page 15: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/15.jpg)
Основы форматирования HTML-документа
BASEFONT Определяет основной шрифт, которым
должен отображаться текст документа
FONT Позволяет изменять цвет, размер и тип шрифта текста
I Выделяет текст курсивом
EM Используется для смыслового выделения текста (курсивом)
B Выделяет текст жирным шрифтом
STRONG Усиленное выделение текста (жирным)
Форматирование текста
UВыделяет текст подчеркнутым
S Выделяет текст перечеркнутым
BIG Отображает текст увеличенным шрифтом (относительно текущего)
SMALL Отображает текст уменьшенным шрифтом (относительно текущего)
SUP Отображает текст со сдвигом вверх (верхний индекс)
SUB Отображает текст со сдвигом вниз (нижний индекс)
![Page 16: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/16.jpg)
<BODY><BASEFONT SIZE="3">
Текст документа шрифтом 3 размера<FONT SIZE="+1">
Слегка увеличиваем шрифт</FONT>
Продолжаем шрифтом 3 размера<FONT SIZE="+2" COLOR="#FF0000">
Увеличенный красный шрифт</FONT>
<FONT SIZE="3" FACE="Courier" COLOR="Magenta">
Моноширинный фиолетовый текст 3 размера</FONT> Смотрите, какие <FONT SIZE=2>разные шрифты <FONT SIZE=3>можно <FONT SIZE=4>использовать в <FONT SIZE=5>Internet Explorer.
</BODY>
![Page 17: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/17.jpg)
<BODY><P>Текст с <I>курсивом</I></P>
<P>Порой в России встречаются<EM>действительно талантливые</EM> веб-мастера. Но только не друг с другом.
</P>
<P>Текст с <B>выделенным</B> словом</P>
<P>Я <STRONG>сильный</STRONG>, но легкий. </P>
<P><U>Подчеркнутый текст </U> </P> <P>Лена + <S>Вася</S> Коля = Love </P> <P>Текст с <BIG>увеличенным</BIG> словом </P>
<P>Небоскребы, небоскребы, а я
<SMALL>маленький</SMALL> такой. </P> <P> Microsoft <SUP>TM</SUP> </P>
<P>X<SUB>1</SUB> = B<SUB>1</SUB> + C<SUB>1</SUB> </P> </BODY>
![Page 18: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/18.jpg)
![Page 19: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/19.jpg)
Включение таблиц в HTML-документ
Элементы для создания таблиц
TABLE Создаёт таблицу
CAPTION Задаёт заголовок таблицы
TR Создаёт новый ряд ячеек таблицы (строку)
TD Создаёт ячейку с данными в текущей строке
![Page 20: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/20.jpg)
<TABLE > <TR> <TD>a</TD> <TD>b</TD> <TD>c</TD> </TR> <TR> <TD>A</TD> <TD>B</TD> <TD>C</TD> </TR></TABLE>
![Page 21: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/21.jpg)
Параметры элементов TABLE, TR и TD
Параметры элемента TABLE
ALIGN Определяет способ горизонтального выравнивания таблицы (left, right, center, justify)
VALIGN Определяет способ вертикального выравнивания таблицы (top, bottom, middle)
BORDER Определяет ширину внешней рамки таблицы
WIDTHHEIGHT
Задают таблицы в пикселях
BGCOLOR Определяет цвет фона ячеек таблицы
CELLPADDINGCELLSPACING
Расстояние между
высоту
ширину
ячеексоседнихграницами
содержимымеёиячейкирамкой
![Page 22: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/22.jpg)
Параметры элементов TABLE, TR и TD
Параметры элемента TR
ALIGNОпределяет способ горизонтального выравнивания в ячейках данного ряда (left, right, center, justify)
VALIGNОпределяет способ вертикального выравнивания в ячейках данного ряда (top, bottom, middle)
BGCOLOR Определяет цвет фона ячеек таблицы
![Page 23: языка Html](https://reader033.vdocuments.net/reader033/viewer/2022052621/557ed264d8b42a706f8b5066/html5/thumbnails/23.jpg)
Параметры элементов TABLE, TR и TD
Параметры элемента TD
ALIGNОпределяет способ горизонтального выравнивания содержимого ячейки (left, right, center, justify)
VALIGNОпределяет способ вертикального выравнивания содержимого ячейки (top, bottom, middle)
WIDTHHEIGHT
Задают ячейки в пикселях
BGCOLOR Определяет цвет фона ячейки
COLSPANROWSPAN
Определяет количество , на которые простирается ячейка
высоту
ширину
строк
столбцов