🗊Создание 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
Загрузить презентацию