Язык разметки HTML использует не инструкции, а метки, которые называются тегами.

XHTML (eXtensible HyperText Markup Language) более строгий синтаксис.

XHTML (eXtensible HyperText Markup Language)

517.00K

Категория:

Программирование

Похожие презентации:

Функция и обработка события

Blocuri de text

Optimizarea activităţii de prestare a serviciilor de transport prin aplicarea modelelor matematice şi sistemelor informatice

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

1. HTML

https://www.w3.org/TR/html52/

2.

HyperText Markup Language (HTML) — это язык
разметки, используемый для создания веб-страниц,
которые могут отображаться в браузере.
Целью HTML является скорее описание семантики
документа чем представление форматов (абзацы,
шрифты, таблицы и т. д.).
Спецификации HTML диктуются консорциумом World
Wide Web (W3C).
HTML — это язык разметки семейства SGML.
SGML (Standard Generalized Markup Language —
стандартный обобщенный язык разметки ) — это
стандарт ISO для определения языков разметки
документов.

3. Документы HTML

Документы HTML представляют собой текстовые
файлы и сохраняются с расширением .html или .htm.
HTML-документ можно редактировать в любом
текстовом редакторе или с помощью редактора
HTML, например,
– Atom,
– Sublime Text или
– Notepad++.

4. Язык разметки HTML использует не инструкции, а метки, которые называются тегами.

Общий синтаксис (два типа):
<tag attribute1="val" attribute2="val" ... >Text</tag>
<tag attribute1="value1" attribute2="value2" ... />

5.

< tag atribut1="val" atribut2="val" ... >Text</ tag >
< tag atribut1="val" atribut2="val" ... />

6.

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

<html>
<head>
<title>
Моя первая страница
</title>
</head>
<body>
Всё, что я хотел
поведать миру
</body>
</html>

8. Стандарты HTML

• 1990 HTML 1.0
• 1993 HTML+
• 1994 HTML 2.0
49 базовых тегов.
• 1995 HTML 3.0
• 1996 HTML 3.2
• 1997 HTML 4.0
• 2000 XHTML 1.0
• 2009 XHTML -> HTML 5
• 2014 HTML 5
• 2016 HTML 5.1
• 2017 HTML 5.2

9. Стандарты HTML

• https://html.spec.whatwg.org/

10. Базовые теги – параграф

<p>text 1</p>
<p>text 2</p>
text 1
<p>text 3</p>
text 2
text 3

11. Базовые теги – параграф

<p style="text-align: center;”>text 1</p>
<p style="text-align: left;”>text 2</p>
<p style="text-align: right;”>text 3</p>
text 1
text 2
text 3

12. Заголовки (Headings)

<h1> heading </h1>
<h2> heading </h2>
<h3> heading </h3>
<h4> heading </h4>
<h5> heading </h5>
<h6> heading </h6>

13. Устарелые теги

<b> Pagina lui Georgică </b> <br/>
<i> Pagina lui Georgică </i> <br/>
<u> Pagina lui Georgică </u> <br/>

14. Порядок включения

<b> <i> <u> Pagina lui Georgică </u></i></b>
<b> <i> <u> Pagina lui Georgică </b></i></u>
<b> <i> <u> Pagina lui Georgică </i></u></b>
Pagina lui Georgică

15. Порядок включения

верно
<b> <i> <u> Pagina lui Georgică </u></i></b>
неверно
<b> <i> <u> Pagina lui Georgică </b></i></u>
неверно
<b> <i> <u> Pagina lui Georgică </i></u></b>
Pagina lui Georgică

16. Вставка изображений

17. Линки (Link) в документах HTML

<A name="denumire">
text-denumire
</A>
<A href=“#denumire">
text-referință
</A>

18.

<A name="cuprins"><H2>Cuprins</H2></A>
<A href="#sect1">Sectiunea 1</A>
<A href="#sect2">Sectiunea 2</A>
...............
<A name="sect1"><H2>Sectiunea 1</H2></A>
...............
continutul sectiunii 1
...............
<SMALL>Revenire la <A href="#cuprins">CUPRINS</A>
</SMALL>
...............
<A name="sect2"><H2>Sectiunea 2</H2></A>
...............
continutul sectiunii 2
...............
<SMALL>Revenire la <A href="#cuprins">CUPRINS</A></SMALL>

19.

20.

21.

22.

Относительные и абсолютные адреса
<a href="prf.html"> Мои фотки</a>
<a href="/photos/prf.html"> Мои фотки
</a>
<a href="http://www.homepage.ru/prf.html">
Мои фотки </a>

23. Атрибут target

• "имя окна" - указание имени окна
отображения;
• _blank - новое окно;
• _parent — родительское окно
(предыдущее);
• _self — в том же окне, что и текущий
документ (значение по умолчанию);
• _top - в начальном окне.

24. Изображение как линк

25. Tag Map

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html">
</head>
<body bgcolor="#FFFFFF">
<img src="maps.jpg" width="770" height="567" usemap="#Map"
border="0">
<map name="Map">
<area shape="rect" coords="413,221,638,366" href=“Area-1.htm">
<area shape="circle" coords="195,380,83" href=“Area-2.htm">
<area shape="poly" coords="79,189,190,69,288,199" href=“Area-3.html">
</map>
</body>
</html>

26. Списки

<UL TYPE=disk>
<LI>element principal </LI>
<UL TYPE=square> </LI>
<LI>element secundar </LI>
<LI>element secundar </LI>
<LI>element secundar </LI>
</UL>
<LI>element principal </LI>
<LI>element principal </LI>
<LI>element principal </LI>
</UL>
<OL START=1 TYPE=1>
<LI>primul element </LI>
<UL TYPE=square>
<LI>element secundar </LI>
<LI>element secundar </LI>
<LI>element secundar </LI>
</UL>
<LI>al doilea element </LI>
<LI>al treilea element </LI>
<LI>al patrulea element </LI>
</OL>

27. Горизонтальная линия

<hr align="right"> (center , left)
<hr width="30%">
<hr size="6">
<hr color="cc0000">

28. Коды для символов

â
Â
î
Î
-
-
-
-
â
â
-
â
Â
-
Â
<
-
<
>
-
>
&
-
&
"
-
“
Â
î
Î

29. UTF-8 универсальная кодировка

• Кодировка UTF-8
считается
стандартом для
веб-документов и
позволяет
корректно
отображать текст
на любом языке.
<html>
<head>
<title>
Моя первая страница
</title>
<meta charset=“utf-8”>
</head>
<body>
Всё, что я хотел
поведать миру
</body>
</html>

30. Таблицы

<table>
<tr>
<td bgcolor="#FFCC33">1x1</td>
<td bgcolor="#336699">1x2</td>
<td bgcolor="#FFCC33">1x3</td>
</tr>
<tr>
<td bgcolor="#336699">2x1</td>
<td bgcolor="#FFCC33">2x2</td>
<td bgcolor="#336699">2x3</td>
</tr>
</table>
td
tr
tr
td
td

31. Таблицы

32. Tabele

33. Таблицы

34. XHTML (eXtensible HyperText Markup Language) более строгий синтаксис.

Неверно
XHTML
<li>lista
<td>celula
<li>lista</li>
<td>celula</td>
<img ... >
<br>
<img ... />
<br />
<TABLE>
<table>
<TR>
<TD>Text</TD>
</TR>
</TABLE>
<tr><td>Text</td></tr>
</table>

35. XHTML (eXtensible HyperText Markup Language)

Неверно
XHTML
<tr><td>Continut</tr></td>
<tr><td>Continut</td></tr>
<img src="poza.jpg">
<img src="poza.jpg" alt="poza">
<a href=http://www.ru/>
<a href="http://www.ru/">
<body>
Text
<p>
Alt text
</p>
</body>
<body>
<p>
Text
Alt text
</p>
</body>

36. HTML Validator http://validator.w3.org/

37. XHTML DOCTYPE Declaration

Declaratia XHTML DOCTYPE transitional
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Declaratia XHTML DOCTYPE strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Declaratia XHTML DOCTYPE frameset
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

38. Стандарты HTML

28 oct 2014
HTML5 IS A W3C RECOMMENDATION

39. Корректная структура HTML5

<!DOCTYPE html>
<html>
<head>
<title>
Pagina lui Georgica
</title>
</head>
<body>
<p> Conţinutul paginii</p>
</body>
</html>

40. Structura corectă a unui document HTML5

<!DOCTYPE html>
<html>
<head>
<title>
Pagina lui Georgica
</title>
<meta charset="utf-8">
</head>
<body>
<p> Conţinutul paginii</p>
</body>
</html>

English Русский Правила