2.13M

Category:

internet

Основы языка разметки гипертекста

1. Основы языка разметки гипертекста

2.

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

3.

HTML – Hyper Text Markup Language
XML – Extensible Markup Language
.html, .htm, .xml

4. Типы веб-узлов

Создаваемые на веб-сервере
поставщика услуг Интернет
Создаваемый в интрасети как веб-узел
группы
Виртуальный веб-узел

5. Связь информационных статей

Сетевые отношения
Родовые отношения

6.

index.html
Hyper Text Transfer Protocol http://
World Wide Web
JavaScript, VBScript, PHP
Консорциум W3C (World Wide Web
Consortium)

7.

< ! DOCTYPE HTML PUBLIC “ – // W3C // DTD
HTML 4.0 // EN” “http://www.w3.org/TR/REC–
html40/strict.dtd”>
W3C – Консорциум W3C
DTD – document type definition
HTML 4.0 – версия языка

8.

< ! DOCTYPE HTML PUBLIC “ – // W3C // DTD
HTML 4.0 // EN” “http://www.w3.org/TR/REC–
html40/strict.dtd”>
“http://www.w3.org/TR/REC–html40/strict.dtd ”
строгое определение
“http://www.w3.org/TR/REC–html40/loose.dtd”
переходное определение
http://www.w3.org/TR/REC–html40/frameset.dtd”
фреймовое определение

9.

< ! DOCTYPE HTML PUBLIC “ – // W3C // DTD
HTML 4.0 strict DTD // EN”
“http://www.w3.org/TR/REC–html40/strict.dtd”>
< ! DOCTYPE HTML PUBLIC “ – // W3C // DTD
HTML 4.0 Transitional DTD // EN”
“http://www.w3.org/TR/REC–html40/loose.dtd”>
< ! DOCTYPE HTML PUBLIC “ – // W3C // DTD
HTML 4.0 Frameset DTD // EN”
“http://www.w3.org/TR/REC–
html40/frameset.dtd”>

10.

Uniform Resource Identifier – URI
URL – Uniform Resource Locators является
подмножеством URI
http:// www.w3.org/ TR/REC–html40/strict.dtd

11.

Тим Бернерс-Ли

12.

tag
<tag>
</tag>
<body> <Body> <BODY>
<tag атрибут =“значение”>

13. Структура Html-документа

<html>
<head>
тело заголовка
</head>
<body>
тело документа
</body>
</html>

14.

<html> и < / html>
lang
“EN” – английский
“RU” – русский
“FR” – французский
“DE” - немецкий
“IT” – итальянский
“NL” - голландский
“ES” - испанский
“HE” - иврит
“ZH” - китайский
“JA” – японский

15.

<html> и < / html>
dir
LTR (ltr)
RTL (rtl)

16.

HEAD
рrofile
lang
dir

17. head

title
<html>
<head>
<title> Заголовок странички </title>
</head>
<body>
тело документа
</body>
</html>

18.

LINK
href
rev
rel
”next”
“prev”
“alternate”
“start”

19.

Примеры
<link rel = “alternate” type = “text/html”
href = “mydoc-fr.html” lang = “fr”>
<link rel= “start” type= “text/html” href=
“page1.html”>
gl1.html gl2.html
в gl1.html : < link href = “gl2.html” type =
“text/html” rel = “next”>
в gl2.html : < link href = “gl1.html” rel =
“prev” rev = “next“>

20. META-инструкции

http-equiv
expires
refresh
content-type
content
день недели, число месяц время
[время]; URL=[документ]
[тип документа]; charset=[кодировка]

21. Примеры

<mеtа http – equiv = “expives” content = “sat, 25
dec 15:30:00 gmt”>
<mеtа http-equiv= “refresh” content = “10; url =
http:/ /www.site.ru”>
<mеtа http-equiv= “Content-Type” content =
“text/html; charset=windows-1251”>
<meta http-equiv="Content-type"
content="text/html; charset=koi8-r">

22. META-инструкции

lang
name
keywords
description
author
robots
content
all
none
index
noindex
follow

23. Примеры

<mеtа lang = “ru” content = “отпуск,
Греция, солнце”>
<mеtа name= “keywords” content = “html,
www, Интернет”>
<mеtа name= “description”
content=“Лекции по html”>

24.

style
script

25. body

background
bgcolor
text
link
vlink
alink
red
pink
violet
green
yellow
blue
#FF0000
#FFC0CB
#EE82EE
#00FF00
#FFFF00
#0000FF

26. Пример:

<html>
<head>
Пример:
<title> Динамика популяции</title>
</head>
<body bgcolor = “#FFFFFF” text = “black”
link = “red” alink = “fuchsia” vlink=”maroon”>
Сам документ
</body>
</html>

27. Основные теги

<pre>Текст</pre>
<h1>Текст</h1>
<h4>Текст</h4>
<h2>Текст</h2>
<h5>Текст</h5>
<h3>Текст</h3>
<h6>Текст</h6>

28. Основные теги

<b>Текст</b>
<i>Текст</i>
<font size=“18pt”> Текст</font>
<font color=“red”>Текст </font>
<font face=“Times New Roman”>
Текст </font>

29. Пример:

<html>
Пример:
<head>
<title> Динамика популяции</title>
</head>
< body bgcolor = “white” text = “black” link = “red”
alink = “fuchsia” vlink=”maroon”>
<h1 align=“center”>Заголовок на страничке</h1>
<pre>
Текст с сохранением
форматирования</pre>
<b>Это написано полужирным шрифтом</b> ,
<i> а это курсивом</i>
<font face=“Arial” size=“125%” color=“red”>Этот
текст отображается увеличенным в размерах
красным цветом, шрифт – Arial </font>
</body>
</ html >

30. Основные теги

<p> Текст </p>
“right”
“left” >
<p align=“center”
left
right
center

31. Пример:

<html>
Пример:
<head>
<title> Динамика популяции</title>
</head>
<body>
<h1 align=“center”>Заголовок на страничке</h1>
<p>Абзац без использования
выравнивания (значение выравнивания
поумлочанию – по левому краю)</p>
<р align=“center”>Этот абзац расположен по
центру </р>
<р align=“right”>Этот текст выравнивается по
правому краю</р>
<p align=“left”>В абзаце использовано
выравнивание по левому краю</p>
</body>
</ html >

32. Основные теги

33.

Антипример:
<!DOCTYPE HTML PUBLIC”-//W3C//DTD HTML
4.0 Transitional//EN” “http:// www. w3. org/
TR/REC-html40/loose.dtd”>
<HTML>
<HEAD>
<TITLE> Динамика популяции</TITLE>
</HEAD>
<BODY bgcolor = “white” text = “black” link = “red”
alink = “fuchsia” vlink=”maroon”>
Сам документ
</BODY>
</HTML>

34.

Лучший пример
<!DOCTYPE HTML PUBLIC” -//W3C//DTD HTML 4.0
Transitional//EN” “http:// www. w3. org/ TR/REChtml40/strict. dtd”>
<HTML>
<HEAD>
<TITLE> Динамика популяции</TITLE>
<STYLE type=”text/css”>
body {background: white; color: black}
A: link {color: red}
A: visited {color: maroon}
A: active {color: fuchsia}
</STYLE>
</HEAD>
<BODY>
Сам документ
</BODY>
</HTML>

35.

Хороший пример
Файл содержащий
таблицу стилей
(css-документ):
body {background: white;
color: black}
A: link {color: red}
A: visited {color: maroon}
A: active {color: fuchsia}
Файл с расширением HTML
(html-документ):
<!DOCTYPE HTML PUBLIC” -//W3C//DTD
HTML 4.0 Transitional//EN” “http:// www.
w3. org/ TR/REC-html40/strict. dtd”>
<HTML>
<HEAD>
<TITLE>Динамика популяции</TITLE>
<LINK rel = “stylesheet” type = “text /
css” href = “mystyle. css”>
</HEAD>
<BODY>
Сам документ
</BODY>
</HTML>

36.

Каскадные таблицы стилей
(Cascading Style Sheets CSS)
Селекторы (selectors) – определяют
набор элементов текста html к которым
будет применен данный стиль.
Декларации (declarations) определяют,
как будут отображаться
соответствующие элементы.

37.

Пример правила:
h1 {font–family: Arial; font – size: 48 pt;
color: red}
h1 {
font–family: Arial;
font – size: 48 pt;
color: red
}

38.

Селекторы элементов
Общий вид:
элемент(имя тега без < >) {имя
параметра: значение; имя параметра:
значение; …}
Пример:
h1 {
font–family: Arial;
font–size: 48 pt;
color: red
}

39.

Селекторы классов
Общий вид:
Элемент.имя_класса {имя параметра:
значение; имя параметра: значение; …}
или
.имя_класса {имя параметра: значение; имя
параметра: значение; …}
Примеры:
p.question {color: green}
.question {color: green}
Используется: <p class=“question”>Абзац под
воздействием стиля</p>

40.

Селекторы
идентификаторов
Общий вид:
Элемент#имя индивидуального стиля {имя
параметра: значение; имя параметра:
значение; …}
или
#имя индивидуального стиля {имя параметра:
значение; имя параметра: значение; …}
Примеры:
p#question {color: green; text-align: center}
используется: <p id=”question”> … </p>
#question {color: green; text-align: center}
используется: <h2 id=”question”> … </h2>

41.

Селекторы псевдоклассов
a: link {color: blue} - неиспользованная
ссылка
a: visited {color: green} использованная ссылка
a: active {color: red} - активная ссылка
a: hover {color: red; font-wight: bold} – при
наведении курсора на ссылку

42.

Селекторы групп
Общий вид:
элемент, элемент, элемент... {имя
параметра: значение; имя параметра:
значение; …}
Пример:
p, li, h1 { font–family: Arial }

43.

Контекстные селекторы
Примеры:
#menu p { font–family: Arial }
p blockquote { font–family: Arial }
blockquote p { font–family: Arial }
#menu p.term { font–family: Arial }

44.

Способы встраивания стилей в
HTML – документ

45.

Задание стилей внутри текста
<элемент style = “параметр: значение;
параметр: значение ”>
<h1 style = “color : blue; font-size : 24 pt”>

46.

Вставка в заголовок <head>
<style> </style>
Атрибуты элемента style:
type = “text/css”
media =
“screen”
“tty”
“tv”
“handheld”
“print”
“aural”
“all”

47.

Использование внешних таблиц
<link
rel = stylesheet
type = text/css
href = “url-адрес таблицы стилей”
>

48.

Применение нескольких таблиц
стилей
Приоритеты:
1. Таблицы пользователя.
2. Таблицы автора документа.
3. Таблицы браузера заданные по
умолчанию.

49.

Приоритеты при использовании
нескольких таблиц автора
1. Правило заданное, как значение атрибута
style.
2. Правило заданное для селекторов
идентификаторов.
3. Правило определенное для селекторов
классов.
4. Правило для параметров элементов в
таблице связанной с документом тегом
<link> или описанных в элементе заголовка
<style>. Зависит от последовательности
включения этих элементов.
5. Настройки браузера заданные по
умолчанию.

50.

Примеры:
1) <head>
<style>
h1 {border – width:1;
border: solid;
text – align: center
}
</style>
</head>

51.

Примеры:
2) <head>
<style type = “text/css”>
h1.myclass {border– width: 1;
border: solid;
text – align: center}
</style>
</head>
<body>
< h1 class = “myclass” >
Заголовок под влиянием стиля </h1>
<h1> А на этот заголовок стиль не влияет </h1>
</body>

52.

Примеры:
3) <head>
<style type = “text/css”>
#myid {border– width: 1;
border: solid;
text – align: center}
</style>
</head>
<body>
< h1 id = “myid” > Заголовок под влиянием стиля
</h1>
< h1 class = “myclass” >
На этот заголовок стиль не влияет </h1>
<h1> И на этот заголовок стиль не влияет </h1>
</body>

53.

Пример:
В файле mystyle.css
содержится строка:
h1{color : blue;
font-size : 26pt;
font-style : italic}
Документ:
<html>
<head>
<link rel = stylesheet type =
text/css href = “mystyle.css”>
<style>
h1{color : red; font-size : 40pt}
</style>
</head>
<body>
<h1 style=“color : yellow”>
Заголовок
</h1>
</body>
</html>

English Русский Rules