Курс лекций. Часть 1. Web-страницы. Язык HTML, теги, структура, списки

HTML является одним из основных компонентов интернета, потому что задает структуру веб-страниц.

Web-страницы. Язык HTML и др. Курс лекций

Web-страницы.Язык HTML и др.
Курс лекций
Никитин Михаил Евгеньевич

Web-страницы. Язык HTML и др. Введение

Web-страницы.Язык HTML и др.
Введение
Структура документа
Списки
Гиперссылки
Оформление документа
Рисунки
Таблицы
Фреймы
Блоки (DIV)
Понятие о JavaScript

Что такое Web-страницы? 3 Гиперссылка – «активная»ссылка на другой документ

Что такое Web-страницы?
3

Гиперссылка – «активная»ссылка на другой документ.
Гипертекст – текст, содержащий гиперссылки.
Гипермедиа-документ – документ, включающий текст, рисунки, звуки, видео, в котором любой элемент может быть гиперссылкой.
WWW (World Wide Web) – «всемирная паутина», служба Интернет для обмена информацией в виде гипертекста (и гипермедиа).
Web-страница – текстовый файл, в котором описано размещение материала на экране.
Браузер – программа для просмотра Web-страниц на экране (Internet Explorer, Mozilla Firefox, Opera).

Какие бывают Web-страницы? 4 статические – существуют на сервере в виде готовых файлов: *

Какие бывают Web-страницы?
4

статические – существуют на сервере в виде готовых файлов: *.htm, *.html
динамические – полностью или частично создаются на сервере в момент запроса (выбор информации из базы данных) *.shtml, *.asp, *.pl, *.php

позволяют выбирать информацию из базы данных по заранее неизвестным запросам

дополнительная нагрузка на сервер
загружаются медленнее

Язык HTML 5 HTML = Hypertext Markup

Язык HTML
5

HTML = Hypertext Markup Language(язык разметки гипертекста)

HTML-страница – это текстовый файл (Блокнот):

Моя страница

Привет!
…

index.html

Тэги 6 Тэг – это команда языка

Тэги
6

Тэг – это команда языка HTML, которую выполняет браузер:

непарные тэги

парные тэги (контейнеры)

вставить рисунок

...

открывающий

закрывающий

область действия тэга: описание таблицы

Простейшая Web-страница 7 Моя первая

Простейшая Web-страница
7

Моя первая <br> Web-страница

Привет!

first.html

Моя первая <br> Web-страница

шапка («голова»)

Привет!

основная часть («тело»)

Редактор HEFS 8 файловые операции буфер обмена один экран запуск браузера (F9) назад вперед текстовый редактор браузер (IE) отмена

Редактор HEFS
8

файловые операции

буфер обмена

один экран

запуск
браузера (F9)

вперед

текстовый редактор

браузер (IE)

отмена

Вставка тэгов в HEFS 9

Вставка тэгов в HEFS
9

Web-страницы. Язык HTML и др. Тема 2

Web-страницы.Язык HTML и др.
Тема 2. Структура документа.
Специальные символы

Заголовки: H1 … H6 11 Заголовок документа

Заголовки: H1 … H6
11

Заголовок документа

Заголовок раздела

Заголовок подраздела

Заголовок параграфа

Комментарий

Авторские пометки

выравнивание:

История

left,
center,
right

Абзацы 12 переход на новую строку абзац (с отступами)

Абзацы
12

переход на новую строку

абзац (с отступами)

И вечный бой! Покой
нам только снится

Сквозь кровь и пыль...

Летит, летит степная
кобылица

И мнет ковыль...

Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее.

До самого вечера тело с варежками ...

Выравнивание 13 Этот текст выровнен по центру

Выравнивание
13

Этот текст выровнен по центру.

Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.

left по левой границе
right по правой границе
center по центру
justify по ширине

атрибут тэга

Абзацы в HEFS 14

Абзацы в HEFS
14

Специальные символы 15 Символ

Специальные символы
15

*Символ*	*HTML-код*	*Название*
–	—	(длинное) тире
		неразрывный пробел
§	§	параграф
©	©	символ авторского права
«	«	левая русская кавычка
»	»	правая русская кавычка
®	®	зарегистрированная торговая марка
°	°	градус
²	²	квадрат
³	³	куб
¼	¼	четверть
½	½	половина
¾	¾	три четверти
×	×	знак умножения
÷	÷	знак деления

Специальные символы 16 А.С. Пушкин — солнце русской поэзии

Специальные символы
16

А.С. Пушкин — солнце русской поэзии.

Дом сдали в 2011 году.

Пёс весил 12 кг.

Из дома вышел А.С. Пушкин – солнце
русской поэзии.

Вышел А.С. Пушкин – солнце русской поэзии.

Специальные символы в HEFS 17

Специальные символы в HEFS
17

Web-страницы. Язык HTML и др. Тема 3

Web-страницы.Язык HTML и др.
Тема 3. Списки

Маркированные списки 19 Вася

Маркированные списки
19

Вася
Петя
Коля

unordered list (неупорядоченный список)

list item (элемент списка)

изменение маркера:

...

disk 
circle ○
square ■

Нумерованные списки 20 Вася

Нумерованные списки
20

Вася
Петя
Коля

ordered list (упорядоченный список)

изменение нумерации:

...
1, i, I, a, A

Списки определений 21 компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition list (список определений) definition term (термин) definition description…

Списки определений
21

компьютер
устройство для обработки информации
дискета
гибкий магнитный диск
винчестер
жесткий магнитный диск

definition list (список определений)

definition term (термин)

definition description (описание)

Многоуровневые списки 22 Города

Многоуровневые списки
22

Города России

Города Украины


Москва
Санкт-Петерург


Киев
Одесса

Списки в HEFS 23 Ctrl-L вставить элемент списка

Списки в HEFS
23

Ctrl-L вставить элемент списка

Материалы на данной страницы взяты из открытых истончиков либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.

27.02.2021