'

HTML Первые шаги.

Понравилась презентация – покажи это...





Слайд 0

HTML Первые шаги.


Слайд 1

Форматирование текста на Web-странице.


Слайд 2

<html> <head> <title> Мой первый шаг </title> </head> <body> Здравствуйте, это моя первая страница. <br> Добро пожаловать! </body> </html> Структура HTML-документа


Слайд 3

Заголовок документа – теги <Head> и <Title> Тег <Head>…</Head> заключает в себе теги заголовка. Тег <Title>…</Title> содержит слова, которые появляются в стоке заголовка браузера <html> <head> <title>Мой первый шаг </title> </head> 2. Дополнительные теги заголовка: <meta> - содержит дополнительные данные о документе, используемые поисковыми серверами; <base> и <link> - определяют базовый адрес документа и некоторые другие


Слайд 4

Тело документа – тег <body> Все, что находится между<body> и </body>, называется содержимым тела документа. Тег <body> может содержать 3 группы параметров: Управление внешним видом документа. Атрибуты программирования – по событию, таблицы стилей и пр. Атрибуты ссылок и идентификации.


Слайд 5

Параметры тега <body> Bgcolor – изменяет цвет фона. Цвет задается словом или кодом RGB <body bgcolor = “red”> <body bgcolor = “#FF0000”> Text – задает цвет текста. <body bgcolor = “red” text=“blue”> Background – помещает в качестве фона изображение из файла с картинкой. <body background = “dog.gif”> Bgproperties = “fixed” – фоновый рисунок не прокручивается вместе со страницей. Link – задает цвет гиперссылок, по которым пользователь еще «не ходил». Vlink – задает цвет посещенных гиперссылок. Alink – цвет активной гиперссылки (под курсором мышки во время нажатия)


Слайд 6

Оформление текста Заголовки Существует 6 уровней заголовков: <h1> . . . </h1>, …, <h6> . . . </h6> Атрибут – align – выравнивание Значения: Left (по умолчанию) Right Centr <body bgcolor ="#CC3399" text ="#CCCCCC"> <h1 align = “center”> Title 1 </H1> <h2 align = “right”> Title 2 </H2> <h3 align = “left”> Title 3 </H3> <h4> Title 4 </H4> <h5> Title 5 </H5> <h6> Title 6 </H6> </body>


Слайд 7

Абзацы Тег <p> указывает на начало нового абзаца и вставляет пустую строку перед абзацем. Атрибут align. Тег <br> - разрыв строки. Используется для записи текстов стихов и песен. Атрибут clear позволяет продолжить поток текста после (ниже) рисунка или таблицы. Значения left, right, all - продолжают вывод текста там, где указанный в атрибуте край или оба края свободны от таблиц и рисунков. Этот атрибут имеет смысл только с выровненными влево или вправо рисунками или таблицами.


Слайд 8

Точные интервалы Тег <nobr>… </nobr> создает область, в которой текст не разбивается на строки. Тег <wbr> используется в сочетании с <nobr> и указывает браузеру место где, в случае необходимости, можно разорвать строку. Тег <pre>… </pre> выделяет часть исходного текста, который должен отображаться «как есть» - с теми же отступами и разбиением на строки. Используется для записи текстов программ. Внутри этого тега могут располагаться гиперссылки, картинки и пр. Тег <center>… </center> - содержимое выравнивается по центру – текст, рисунки, таблицы. Аналог атрибута align=center


Слайд 9

Физическое и логическое форматирование текста Физическая разметка документа – это явное указание браузеру, как должен выглядеть тот или иной фрагмент текста – размер шрифта, курсив и т.п. Логическая разметка учитывает смысл выделенного фрагмента – цитата, сведения об авторе и т.п. Современные стандарты языка HTML советуют использовать по-возможности логическую разметку, хотя физическое форматирование еще никто не отменял.


Слайд 10

теги физических стилей Можно комбинировать теги стилей: <b><i>Полужирный курсив</i></b>


Слайд 11

Изменение шрифта тег <font> … </font>- изменяет размер, цвет и стиль текста. Атрибуты: size - размер шрифта 1-7. По-умолчанию size=3 Размер изменяется на 20%: 4 размер больше 3 на 20%, 5 размер больше 4 на 20% size=4 – абсолютный размер, size= +1 – относительный (на 1 больше, чем базовый размер шрифта) color - цвет текста, face - название шрифта face="Comic Sans MS, Courier New”


Слайд 12

<html> <head> <title>Мой второй шаг </title> </head> <body> Это обычный шрифт <p> <font size=5 color="#CC3399" face="Comic Sans MS, Courier New"> Это измененный шрифт </font> <p> Это снова обычный шрифт </body> </html>


Слайд 13

теги логических стилей


Слайд 14

Теги логического и физического форматирования могут комбинироваться друг с другом и с тегами установки интервалов.


Слайд 15

Создание WEB-страниц в блокноте.


Слайд 16

Итоги урока: Познакомились со структурой и основными командами форматирования WEB-документа. Узнали, как создавать простейшие WEB-документы.


Слайд 17

Домашнее задание Выучить конспект. Гл. 6, § 4.6


×

HTML:





Ссылка: