Современные веб-технологии презентация
Содержание
- 2. Понятие «HTML» HTML (Hyper Text Markup Language, Язык разметки гипертекста) –
- 3. История «HTML» Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно
- 4. История «HTML» В декабре 1997 г. консорциум W3C опубликовал новую
- 5. Факты о «HTML» HTML-документы имеют расширение .html или .htm) HTML-документы
- 6. Редакторы для верстки веб-страниц Редактор HTML— компьютерная программа, позволяющая создавать и
- 7. Визуальные редакторы Визуальные редакторы не требуют от разработчика знаний HTML,
- 8. Визуальные редакторы
- 9. Текстовые редакторы Ни один визуальный редактор не совершенен, и все
- 10. Текстовые редакторы
- 11. Структура HTML-документа
- 12. Основные типы DOCTYPE
- 13. Пример1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html> <head> <meta http-equiv="Content-Type"
- 14. Кодировка символов и язык HTML Запись в теге заголовка <head>
- 15. Тэги и их атрибуты Раздел документа BODY: Атрибуты: ALINK,
- 16. Работа с текстом, основные теги <p>…</p> - абзац; <pre>…</pre>-
- 22. Таблицы Тэги таблицы: <TABLE <CAPTION>…</ CAPTION >- заголовок таблицы, <TR>…</TR>- контейнер
- 23. Таблицы Атрибуты тэга <TABLE>: HEIGHT- высота таблицы(в точках или в %
- 24. Таблицы Пример: <TABLE RULES= "groups" Border="2" ALIGN="Center" Height="70" Width="20%" bordercolor="darkblue" CELLSPACING="1"
- 25. Таблицы Атрибуты тэга <CAPTION>: ALIGN- выравнивание: TOP, BOTTOM, LEFT, RIGHT, -
- 26. Формы Форма задается тегами <form></form> и дает возможность пользователям вводить информацию
- 27. Элементы формы ТЕКСТОВОЕ ПОЛЕ – задается тегом <input>
- 28. ТЕКСТОВОЕ ПОЛЕ ДЛЯ ВВОДА ПАРОЛЯ По аналогии с предыдущим элементом, кроме
- 37. Скачать презентацию
Слайды и текст этой презентации
Слайд 1
Описание слайда:
Современные
веб-технологии
Слайд 2
Описание слайда:
Понятие «HTML»
HTML (Hyper Text Markup Language, Язык разметки гипертекста) – стандартный язык разметки документов во Всемирной паутине
Язык НТМL позволяет размечать электронный документ, который отображается на экране с полиграфическим уровнем оформления
Слайд 3
Описание слайда:
История «HTML»
Язык HTML был разработан британским учёным Тимом Бернерсом-Ли приблизительно в 1989—1991 годах.
В апреле 1994 г. под эгидой созданного в том же году Консорциума Всемирной паутины (World Wide Web Consortium, W3C) началась подготовка новой версии языка HTML 2.0, ставшей официальной рекомендацией W3C в сентябре 1995 г.
В марте 1995 г. началась работа над проектом HTML 3. Вводится поддержка нового средства – каскадных таблицей стилей (Cascading Style Sheets, CSS). CSS предназначены только для визуального форматирования структурных элементов документа.
В декабре 1997 г. консорциум W3C опубликовал новую версию HTML 4.0 в качестве рекомендации
Слайд 4
Описание слайда:
История «HTML»
В декабре 1997 г. консорциум W3C опубликовал новую версию HTML 4.0 в качестве рекомендации.
История HTML5 начинается в 2004 году.
В 2009 году W3C прекратил развитие XHTML 2.0 и начал разрабатывать HTML5 (решили писать без пробела) уже совместно с WHATWG.
К 2012-му году, практически все современные браузеры в мире, начинают понимать язык HTML5, хотя еще и остаются некоторые теги которые браузеры пока не понимают.
На данный момент, работа над языком HTML5 продолжается.
Слайд 5
Описание слайда:
Факты о «HTML»
HTML-документы имеют расширение .html или .htm)
HTML-документы отображаются Веб-браузерами или Интернет - обозревателями (Internet Explorer, Mozilla Firefox, Google Chrome, Safari, Opera,…)
Слайд 6
Описание слайда:
Редакторы для верстки веб-страниц
Редактор HTML— компьютерная программа, позволяющая создавать и изменять HTML-страницы.
Вёрстка веб-страниц — процесс формирования веб-страниц в текстовом либо WYSIWYG-редакторе.
Все редакторы делятся на два класса: визуальные и текстовые.
Слайд 7
Описание слайда:
Визуальные редакторы
Визуальные редакторы не требуют от разработчика знаний HTML, CSS и других технологий разметки документов. Пользователь просто располагает различные элементы будущей страницы в окне редактирования, а редактор сам генерирует соответствующий код. Именно поэтому визуальные редакторы еще называют WYSIWYG-редакторами, что означает - что видишь, то и получаешь.
Слайд 8
Описание слайда:
Визуальные редакторы
Слайд 9
Описание слайда:
Текстовые редакторы
Ни один визуальный редактор не совершенен, и все они так или иначе ограничены в своих возможностях. Поэтому профессиональные разработчики пользуются небольшими текстовыми редакторами, которые содержат набор функций, облегчающих разработчику написание кода. К наиболее распространенным функциям относятся подсветка кода, различные горячие клавиши и т.д.
Слайд 10
Описание слайда:
Текстовые редакторы
Слайд 11
Описание слайда:
Структура HTML-документа
Слайд 12
Описание слайда:
Основные типы DOCTYPE
Слайд 13
Описание слайда:
Пример1
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset="windows-1251">
<title>Первая страница</title>
</head>
<body marginwidth="10" marginheight="10">
Это моя первая страница.
</body>
</html>
ПРИМЕР 1
Слайд 14
Описание слайда:
Кодировка символов и язык HTML
Запись в теге заголовка <head> указывает браузеру кодировку, в которой была написана данная страница - формат документа и раскладку клавиатуры.
<meta http-equiv="Content-Type" Content="text/html; Charset= "Windows-1251">
Charset=Windows-1251"> - документ для Windows – Кириллица, где 1251 кодировка раскладки клавиатуры
В настоящее время рекомендуют использовать кодировку UTF 8 - <…. charset= "utf-8">
При неправильной установке языка и раскладки клавиатуры текст на странице отобразится в виде непонятных " иероглифов" .
Слайд 15
Описание слайда:
Тэги и их атрибуты
Раздел документа BODY:
Атрибуты:
ALINK, VLINK , LINK - цвета активной, просмотренной,
еще не просмотренной (по умолчанию #0000ff - синий) и
просмотренной ссылок,
BGCOLOR- цвет фона документа,
BACKGROUND - URL- адрес фонового рисунка,
TEXT- цвет текста (задается в шестнадцатеричном формате,
например #ff0000, либо словом, например RED),
LEFTMARGIN, TOPMARGIN, RIGHTMARGIN,
BOTTOMMARGIN - размеры левого, верхнего, правого и
нижнего полей документа. Пример 2
<BODY TEXT="white" BGCOLOR= "black" LEFTMARGIN=100 TOPMARGIN =250
BACKGROUND = "image1.jpg"> <h1>Белый цвет на фоне картинки </h1>
</BODY>
Слайд 16
Описание слайда:
Работа с текстом, основные теги
<p>…</p> - абзац;
<pre>…</pre>- вывод отформатированного текста;
<br> - переход на следующую строку.
Атрибуты:
ALIGN= "LEFT" (RIGHT, CENTER, JUSTIFY)
выравнивание текста по левому краю, по правому, по центру
и разбивка по ширине.
Пример: <P ALIGN="CENTER">Текст расположен в центре</P>;
Шрифты
<h1>…</h1>- размер шрифта (от 1 до 6; h1- наибольший),
<b>…</b>- полужирный; <i>…</i>- курсив; <u>…</u>- подчеркивание;
<strike>…</ strike >- зачеркивание;
<sub>..</sub>- подстрочный; < sup >..</ sup>- надстрочный;
Слайд 17
Описание слайда:
Слайд 18
Описание слайда:
Слайд 19
Описание слайда:
Слайд 20
Описание слайда:
Слайд 21
Описание слайда:
Слайд 22
Описание слайда:
Таблицы
Тэги таблицы:
<TABLE
<CAPTION>…</ CAPTION >- заголовок таблицы,
<TR>…</TR>- контейнер строки,
<TD>…</TD>- контейнер столбца,
<TH>…</TH>- контейнер заголовка,
</TABLE>
Атрибуты тэга <TABLE>:
BORDER- ширина рамки вокруг таблицы в пикселях,
ALIGN- выравнивает таблицу в окне браузера ( LEFT, RIGHT, CENTER),
FRAME- прорисовка границы вокруг таблицы. Значения: BORDER- везде; ABOVE- вверху; BELOW- внизу, LHS- слева; RHS- справа; HSIDES- сверху и снизу; VSIDES- слева и справа.
Слайд 23
Описание слайда:
Таблицы
Атрибуты тэга <TABLE>:
HEIGHT- высота таблицы(в точках или в % от высоты экрана)
WIGHT- ширина,
CELLPADDING - расстояние от содержимого ячейки до ее границы
CELLSPACING - расстояние между смежными ячейками,
RULES- способ разлиновки (ALL- вертикальная и горизонтальная) COLS – вертикальная, ROWS-горизонтальная,
GROUPS- количество объединяемых столбцов,
определяется параметром SPAN тэга <COLGROUP SPAN= "целое число">.
Атрибуты тэгов <TABLE>, <TR>, <TD>, <TH>:
BGCOLOR - изменяет цвет фона ячейки,
BORDERCOLOR - изменяет цвет рамки,
VALIGN - выравнивание содержимого по вертикали. Значения: TOP, BOTTOM, MIDDLE.
Слайд 24
Описание слайда:
Таблицы
Пример:
<TABLE RULES= "groups" Border="2" ALIGN="Center" Height="70" Width="20%" bordercolor="darkblue" CELLSPACING="1" cellpadding="0">
<CAPTION>
<FONT SIZE=4 FACE=”ARIAL”> <b>Объединение столбцов </b> </FONT>
</CAPTION>
<colgroup span=2>
<colgroup span=1>
<colgroup span=2>
<tr align=center> <td>5</td> <td>4</td> <td>3</td> <td>2</td> <td>1</td> </tr>
<tr align=center><td>5</td><td>4</td><td>3</td><td>2</td><td>1</td> </tr>
</TABLE>
RULES= "groups« - линия отображается между группами, которые образуются тегами <colgroup>
Слайд 25
Описание слайда:
Таблицы
Атрибуты тэга <CAPTION>:
ALIGN- выравнивание: TOP, BOTTOM, LEFT, RIGHT, - по центру таблицы вверху, внизу; LEFT, RIGHT - вверху по левому (правому) краю.
Атрибуты объединения ячеек:
ROWSPAN - объединить строки,
COLSPAN - объединить столбцы.
Пример: фрагмент кода
……………………………
<table border="1">
<caption> <p> <b> Объединение ячеек по горизонтали </b></p></caption>
<tr>
<td colspan="2" align="center">100000</td> <td>300000</td>
</tr>
<tr> <td>400000</td> <td>500000</td> <td>600000</td> </tr> </table>
Слайд 26
Описание слайда:
Формы
Форма задается тегами <form></form> и дает возможность пользователям вводить информацию без ее обработки.
Атрибуты:
name - имя формы.
action - определяет URL-адрес, для отправки информации.
method - определяет способ отправки информации
target - указывает имя окна, в котором будут отображаться результаты обработки отправленной формы.
Пример:
Слайд 27
Описание слайда:
Элементы формы
ТЕКСТОВОЕ ПОЛЕ – задается тегом <input>
Атрибуты:
name - имя элемента,
type - тип элемента (в данном случае - text),
size - размер текстового поля в символах,
maxlength - максимальное количество символов,
value – текст, отображаемый в поле,
disabled – блокирует от любых изменений,
readonly – поле только для чтения.
Слайд 28
Описание слайда:
ТЕКСТОВОЕ ПОЛЕ ДЛЯ ВВОДА ПАРОЛЯ
По аналогии с предыдущим элементом, кроме параметра type="password". Вводимый текст отображается специальными символами - ***.
МНОГОСТРОЧНОЕ ТЕКСТОВОЕ ПОЛЕ
<textarea> …</textarea>
Атрибуты:
name - имя поля,
cols - ширина поля в символах,
rows - количество строк текста, видимых на экране,
wrap - способ переноса слов:
off - переноса не происходит,
virtual - перенос отображается, но на сервер поступает неделимая строка,
physical - перенос и на экране и на сервере.
disabled - неактивное поле, readonly - только для чтения.
Слайд 29
Описание слайда:
Слайд 30
Описание слайда:
Слайд 31
Описание слайда:
Слайд 32
Описание слайда:
Слайд 33
Описание слайда:
Слайд 34
Описание слайда:
Слайд 35
Описание слайда:
Слайд 36
Описание слайда:
Скачать презентацию на тему Современные веб-технологии можно ниже:
