🗊Создание Web-страниц на языке HTML

Категория: Информатика
Нажмите для полного просмотра!
Создание  Web-страниц  на языке HTML, слайд №1Создание  Web-страниц  на языке HTML, слайд №2Создание  Web-страниц  на языке HTML, слайд №3Создание  Web-страниц  на языке HTML, слайд №4Создание  Web-страниц  на языке HTML, слайд №5Создание  Web-страниц  на языке HTML, слайд №6Создание  Web-страниц  на языке HTML, слайд №7Создание  Web-страниц  на языке HTML, слайд №8Создание  Web-страниц  на языке HTML, слайд №9Создание  Web-страниц  на языке HTML, слайд №10Создание  Web-страниц  на языке HTML, слайд №11Создание  Web-страниц  на языке HTML, слайд №12Создание  Web-страниц  на языке HTML, слайд №13Создание  Web-страниц  на языке HTML, слайд №14Создание  Web-страниц  на языке HTML, слайд №15Создание  Web-страниц  на языке HTML, слайд №16Создание  Web-страниц  на языке HTML, слайд №17Создание  Web-страниц  на языке HTML, слайд №18Создание  Web-страниц  на языке HTML, слайд №19Создание  Web-страниц  на языке HTML, слайд №20

Вы можете ознакомиться и скачать Создание Web-страниц на языке HTML. Презентация содержит 20 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации


Слайд 1





Создание 
Web-страниц 
на языке HTML
Описание слайда:
Создание Web-страниц на языке HTML

Слайд 2





Основные понятия
HTML расшифровывается HyperText Markup Language  (в переводе означает Язык Разметки ГиперТекста).
HTML предназначен для создания веб-страниц во всемирной паутине.
Описание слайда:
Основные понятия HTML расшифровывается HyperText Markup Language (в переводе означает Язык Разметки ГиперТекста). HTML предназначен для создания веб-страниц во всемирной паутине.

Слайд 3





Основные понятия
Тэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт.
Большая часть HTML тегов состоит из двух частей: 
открывающий тег <...> 
 закрывающий тег </...>
Теги не чувствительны к регистру
Описание слайда:
Основные понятия Тэги - это метки, которые используются для указания браузеру, как он должен показывать web-сайт. Большая часть HTML тегов состоит из двух частей: открывающий тег <...>  закрывающий тег </...> Теги не чувствительны к регистру

Слайд 4





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

Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих тегов:
<HTML> - Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ. 
<html>…</html>
<HEAD> - Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин. 
<head>…</head>
Описание слайда:
Структура HTML документа. Абсолютно любой документ, построенный на базе HTML будет состоять, по меньшей мере, из следующих тегов: <HTML> - Это самый главный тег, так как указывает принадлежность документа к HTML языку, заключает в себе всё содержимое веб – страницы, ставится в самом начале и соответственно в конце закрывает документ.  <html>…</html> <HEAD> - Этот тег не менее важен, в нём размещается не видимая информация о вашем сайте предназначенная для поисковых машин.  <head>…</head>

Слайд 5





<TITLE> - Название, оглавление страницы, предназначен для поисковых машин, этот 
тег всегда помещается внутри - <head><title>…</title></head>
<TITLE> - Название, оглавление страницы, предназначен для поисковых машин, этот 
тег всегда помещается внутри - <head><title>…</title></head>
<BODY> - В этот тег помещается информация, которая должна отображаться в окне браузера. 
<body>…</body>
Описание слайда:
<TITLE> - Название, оглавление страницы, предназначен для поисковых машин, этот  тег всегда помещается внутри - <head><title>…</title></head> <TITLE> - Название, оглавление страницы, предназначен для поисковых машин, этот  тег всегда помещается внутри - <head><title>…</title></head> <BODY> - В этот тег помещается информация, которая должна отображаться в окне браузера.  <body>…</body>

Слайд 6





Пример:
<HTML> 
<HEAD> 
<TITLE> Это моя первая страница</TITLE> 
</HEAD> 
<BODY> Привет, мир!</BODY>
</HTML>
Описание слайда:
Пример: <HTML>  <HEAD>  <TITLE> Это моя первая страница</TITLE>  </HEAD>  <BODY> Привет, мир!</BODY> </HTML>

Слайд 7





Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов.
Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов.
Атрибуты тега тела документа
<body bgcolor="…"> - Цвет фона документа, используя значение цвета в виде RRGGBB.
<body text="..."> - Цвет текста документа
Описание слайда:
Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов. Чтобы расширить возможности отдельных тегов и более гибко управлять их содержимым применяются атрибуты тегов. Атрибуты тега тела документа <body bgcolor="…"> - Цвет фона документа, используя значение цвета в виде RRGGBB. <body text="..."> - Цвет текста документа

Слайд 8





Таблица цветов HTML
Описание слайда:
Таблица цветов HTML

Слайд 9





<H1>.....<H6> - Определяет величину заголовка по их степени важности. 
<h1>.....</h1> - Самый большой заголовок. 
<h6>.....</h6> - Самый маленький заголовок.
<H1>.....<H6> - Определяет величину заголовка по их степени важности. 
<h1>.....</h1> - Самый большой заголовок. 
<h6>.....</h6> - Самый маленький заголовок.
<b>…..</b> - Определяет текст жирным шрифтом. 
<i>…..</i>- Определяет текст наклонным (курсив) шрифтом. 
<tt>…..</tt>- Имитирует стиль печатной машинки. 
<font color=”…”>…..</font> - Задаёт цвет текста, шестнадцатеричном коде.
<font size="...">…..</font>- Задаёт величину шрифта в пределах от “1” до “7”. 
<big>…..</big>- Увеличивает размер текст на условную 1-цу от заданного. 
<strong>…..</strong>- Этот тег, браузер определяет как жирное начертание текста. 
<em>…..</em>- Этот тег, браузер определяет как наклонное (курсив) начертании текста. 
Описание слайда:
<H1>.....<H6> - Определяет величину заголовка по их степени важности.  <h1>.....</h1> - Самый большой заголовок.  <h6>.....</h6> - Самый маленький заголовок. <H1>.....<H6> - Определяет величину заголовка по их степени важности.  <h1>.....</h1> - Самый большой заголовок.  <h6>.....</h6> - Самый маленький заголовок. <b>…..</b> - Определяет текст жирным шрифтом.  <i>…..</i>- Определяет текст наклонным (курсив) шрифтом.  <tt>…..</tt>- Имитирует стиль печатной машинки.  <font color=”…”>…..</font> - Задаёт цвет текста, шестнадцатеричном коде. <font size="...">…..</font>- Задаёт величину шрифта в пределах от “1” до “7”.  <big>…..</big>- Увеличивает размер текст на условную 1-цу от заданного.  <strong>…..</strong>- Этот тег, браузер определяет как жирное начертание текста.  <em>…..</em>- Этот тег, браузер определяет как наклонное (курсив) начертании текста. 

Слайд 10





Форматирование текста документа
<p>…..</p>- Определяет новый параграф текста с предварительным пропуском одной строки. 
< P ALIGN=”…”> - Выравнивает текст относительно одной из сторон документа. Значения: “left”, “right”, “justify, “ center”. 
Пример: <p align="center">текст</p> Текст по центру.
Описание слайда:
Форматирование текста документа <p>…..</p>- Определяет новый параграф текста с предварительным пропуском одной строки.  < P ALIGN=”…”> - Выравнивает текст относительно одной из сторон документа. Значения: “left”, “right”, “justify, “ center”.  Пример: <p align="center">текст</p> Текст по центру.

Слайд 11





<OL> - Определяет нумерованный список. 
<LI> - Объекту, заключённому в этот тег присваивается номер. 
Также применяется атребут: 
start - Указывает стартовый номер. 
type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
<OL> - Определяет нумерованный список. 
<LI> - Объекту, заключённому в этот тег присваивается номер. 
Также применяется атребут: 
start - Указывает стартовый номер. 
type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”.
<ol type="… " start="число" >...</ol>
Пример: 
<ol type="1" start="3"> 
<LI>морковь 
<LI>капуста 
<LI>яблоки 
<LI>уксус 
<LI>сахар 
<LI>соль 
</ol>
Результат:
3. морковь
4. капуста
5. яблоки
6. уксус
7. сахар
8. соль
Описание слайда:
<OL> - Определяет нумерованный список.  <LI> - Объекту, заключённому в этот тег присваивается номер.  Также применяется атребут:  start - Указывает стартовый номер.  type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”. <OL> - Определяет нумерованный список.  <LI> - Объекту, заключённому в этот тег присваивается номер.  Также применяется атребут:  start - Указывает стартовый номер.  type - Определяет характер обозначение, буквенный “Ж”, ”ж”, “J”, ”j” или цифровой – “10”, “Х”. <ol type="… " start="число" >...</ol> Пример:  <ol type="1" start="3">  <LI>морковь  <LI>капуста  <LI>яблоки  <LI>уксус  <LI>сахар  <LI>соль  </ol> Результат: 3. морковь 4. капуста 5. яблоки 6. уксус 7. сахар 8. соль

Слайд 12





Графические элементы на странице
 <img src="name">         Вставляет изображение на страницу.
<img src="name" align="?"> Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle.
<img src="name" border="?">Устанавливает толщину рамки вокруг изображения
<img src="name" vspase="?">Устанавливает поля сверху и снизу
<img src="name" hspase="?">Устанавливает поля слева и справа.
<hr> - Добавляет горизонтальную линию.
 <hr width="?"> Указывает ширину линии в пикселах или процентах.
<hr noshade>Линия без тени. 
<hr color="?"> Определяет цвет линии.
Описание слайда:
Графические элементы на странице  <img src="name">         Вставляет изображение на страницу. <img src="name" align="?"> Форматирует положение изображения в документе. Может иметь значения: left, right, center; bottom, top, middle. <img src="name" border="?">Устанавливает толщину рамки вокруг изображения <img src="name" vspase="?">Устанавливает поля сверху и снизу <img src="name" hspase="?">Устанавливает поля слева и справа. <hr> - Добавляет горизонтальную линию.  <hr width="?"> Указывает ширину линии в пикселах или процентах. <hr noshade>Линия без тени.  <hr color="?"> Определяет цвет линии.

Слайд 13





Создание таблиц
 <table></table>  Тег создающий таблицу.
<tr></tr> Задает строку в таблице. 
<td></td> Задает отдельную ячейку в таблице.
<th></th> Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)
Описание слайда:
Создание таблиц  <table></table>  Тег создающий таблицу. <tr></tr> Задает строку в таблице.  <td></td> Задает отдельную ячейку в таблице. <th></th> Задает заголовок таблицы (обычная ячейка с форматированием по центру и полужирным текстом)

Слайд 14





Атрибуты таблицы
 <table border="#">        Определяет толщину рамки.
<table cellspacing="#"> Определяет расстояние между ячейками
<table width="#">Устанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах)
<table height="#">Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах)
<td colspan="#">Указывает количество столбцов, объединенных в одной ячейке.
<td rowspan="#"> Указывает количество строк, объединенных в одной ячейке. 
<td width="#"> Задает ширину ячейки таблицы в пикселях или процентах.
<td height="#">Задает высоту ячейки таблицы в пикселях или процентах.
Описание слайда:
Атрибуты таблицы  <table border="#">        Определяет толщину рамки. <table cellspacing="#"> Определяет расстояние между ячейками <table width="#">Устанавливает ширину таблицы. (Значение параметра может быть в пикселях или процентах) <table height="#">Устанавливает высоту таблицы. (Значение параметра может быть в пикселях или процентах) <td colspan="#">Указывает количество столбцов, объединенных в одной ячейке. <td rowspan="#"> Указывает количество строк, объединенных в одной ячейке.  <td width="#"> Задает ширину ячейки таблицы в пикселях или процентах. <td height="#">Задает высоту ячейки таблицы в пикселях или процентах.

Слайд 15





Оформление гиперссылок
<a href="Адрес ресурса - URL"></a> - Задаёт переход на другие ресурсы.
<a href="Имя файла"> - Название страницы</a> - Задаёт переход на другие страницы сайта.
<a href="Имя файла содержащего информацию" target="_blank"> - Название страницы</a> - Задаёт переход на другую страницу сайта в новом окне.
Описание слайда:
Оформление гиперссылок <a href="Адрес ресурса - URL"></a> - Задаёт переход на другие ресурсы. <a href="Имя файла"> - Название страницы</a> - Задаёт переход на другие страницы сайта. <a href="Имя файла содержащего информацию" target="_blank"> - Название страницы</a> - Задаёт переход на другую страницу сайта в новом окне.

Слайд 16





Атрибуты гиперссылок
<atarget="?"></a> Указывает в каком окне открывать гиперссылку.
 
Описание слайда:
Атрибуты гиперссылок <atarget="?"></a> Указывает в каком окне открывать гиперссылку.  

Слайд 17





Пример:
Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). 
Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.
Описание слайда:
Пример: Гиперссылка может связывать страницы как в пределах одного сайта, так и указывать на любую страницу в Интернете. При построении ссылки на чужие страницы всегда надо пользоваться абсолютным адресом страницы (http://www.site.com/page.html). Если создается ссылка на страницу в пределах сайта, то предпочтительнее использовать относительный URL (page.html, catalog/page.html). Делая графическую гиперссылку, помните, что некоторым пользователям графика недоступна, поэтому обязательно включайте соответствующие текстовые элементы.

Слайд 18





HTML-код:
HTML-код:
<a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a>
Отображение в браузере:
Ссылка на главную страницу сайта
HTML-код:
<a href="../index.html">Ссылка на главную страницу сайта</a>Отображение в браузере:
Ссылка на главную страницу сайта
Описание слайда:
HTML-код: HTML-код: <a href="http://on-line-teaching.com/index.html">Ссылка на главную страницу сайта</a> Отображение в браузере: Ссылка на главную страницу сайта HTML-код: <a href="../index.html">Ссылка на главную страницу сайта</a>Отображение в браузере: Ссылка на главную страницу сайта

Слайд 19





Гиперссылка в пределах html страницы
Гиперссылка в пределах html страницы
Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы.
Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры.
Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта.
Пример:
HTML-код:
<a href="#Начало страницы">Наверх страницы</a>
В то место, куда надо сделать переход надо вставить:
<a name="Начало страницы"></a>
Отображение в браузере:
Наверх страницы
Описание слайда:
Гиперссылка в пределах html страницы Гиперссылка в пределах html страницы Иногда необходимо сделать гиперссылку в пределах одной страницы. Например, в начале страницы это гиперссылки, позволяющие перейти к просмотру конкретного вопроса, и в самом низу страницы - позволяющей перейти в начало страницы. Чтобы построить ссылку на область внутри текущей страницы, надо дать этой области название при помощи атрибута NAME тэга <A>. Имя должно содержать только буквы и цифры. Таким образом можно делать гиперссылки, указывающие на области других страниц внутри сайта. Пример: HTML-код: <a href="#Начало страницы">Наверх страницы</a> В то место, куда надо сделать переход надо вставить: <a name="Начало страницы"></a> Отображение в браузере: Наверх страницы

Слайд 20





Спасибо за внимание!
Презентация выполнена
 преподавателем информатики 
ГАОУ СПО Калининградской области 
«Колледж сервиса и туризма»
Белоусовой Юлии Викторовной
Описание слайда:
Спасибо за внимание! Презентация выполнена преподавателем информатики ГАОУ СПО Калининградской области «Колледж сервиса и туризма» Белоусовой Юлии Викторовной



Похожие презентации
Mypresentation.ru
Загрузить презентацию