Web-страницы. Основы Web-дизайна: HTML и редактор HEFS

Июль 22, 2022

Главная
Информатика
Web-страницы. Основы Web-дизайна: HTML и редактор HEFS

Содержание

2. Какие бывают Web-страницы? статические – существуют на сервере в виде готовых файлов: *.htm, *.html динамические –
3. Язык HTML HTML = Hypertext Markup Language (язык разметки гипертекста) HTML-страница – это текстовый файл (Блокнот):
4. Тэги Тэг – это команда языка HTML, которую выполняет браузер: непарные тэги парные тэги (контейнеры) вставить
5. Простейшая Web-страница Моя первая Web-страница Привет! first.html Моя первая Web-страница шапка («голова») Привет! основная часть («тело»)
6. Заголовки: H1 … H6 Заголовок документа Заголовок раздела Заголовок подраздела Заголовок параграфа Комментарий Авторские пометки выравнивание:
7. Абзацы переход на новую строку абзац (с отступами) И вечный бой! Покой нам только снится Сквозь
8. Выравнивание Этот текст выровнен по центру. Этот текст выровнен по ширине. Этот текст выровнен по ширине.
9. Физическая разметка
10. Специальные символы - мнемоники
11. Маркированные списки Вася Петя Коля unordered list (неупорядоченный список) list item (элемент списка) изменение маркера: ...
12. Нумерованные списки Вася Петя Коля ordered list (упорядоченный список) изменение нумерации: ... 1, i, I, a,
13. Списки определений компьютер устройство для обработки информации дискета гибкий магнитный диск винчестер жесткий магнитный диск definition
14. Многоуровневые списки Города России Города Украины Москва Санкт-Петерург Киев Одесса
15. Форматированный текст (тексты программ) program qq; var a, b: integer; begin writeln("Введите два числа"); read(a,b); writeln(a,'+',b,'=',a+b);
16. Тэг BODY – общие свойства страницы цвет фона и текста цвет гиперссылок Привет! ... цвет текста
17. Кодирование цвета имена red, green, blue, magenta, black, шестнадцатеричные коды white R G B # F
18. Тэг FONT – свойства блока текста цвет текста размер шрифта Привет! Как дела? Привет! SIZE=6> Как
20. Скачать презентацию

Слайд 2

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

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

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

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

Слайд 3

Язык HTML
HTML = Hypertext Markup Language (язык разметки гипертекста)
HTML-страница – это текстовый

файл (Блокнот):

Моя страница

Привет!
…

index.html

Слайд 4

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

(контейнеры)

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

...

открывающий

закрывающий

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

Слайд 5

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

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

Привет!

first.html

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

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

Привет!

основная

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

Слайд 6

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

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

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

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

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

Комментарий

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

выравнивание:
История

left,
center,

right

Слайд 7

Абзацы
переход на новую строку
абзац (с отступами)
И вечный бой! Покой
нам только

снится

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

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

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

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

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

Слайд 8

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

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

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

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

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

атрибут тэга

Слайд 9

Физическая разметка

Слайд 10

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

Слайд 11

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

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

unordered list (неупорядоченный список)
list item (элемент списка)
изменение

маркера:

disk ∙
circle ○
square ■

Слайд 12

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

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

ordered list (упорядоченный список)
изменение нумерации:

...

1, i,

I, a, A

Слайд 13

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

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

definition list

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

definition term (термин)

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

Слайд 14

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

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


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


Киев
Одесса

Слайд 15

Форматированный текст (тексты программ)
program qq;
var a, b: integer;
begin
writeln("Введите два числа");

read(a,b);
writeln(a,'+',b,'=',a+b);
end.


program qq;
var a, b: integer;
begin
 writeln("Введите два числа");
 read(a,b);
 writeln(a,'+',b,'=',a+b);
end.

отформатированный текст
(preformatted)

Слайд 16

Тэг BODY – общие свойства страницы
цвет фона и текста
цвет гиперссылок

BGCOLOR=#00FF00>
Привет!

...

цвет текста

цвет фона

посещенные ссылки
(visited link)

цвет ссылок

атрибуты тэга

Слайд 17

Кодирование цвета
имена
red, green, blue, magenta, black,
шестнадцатеричные коды
white
R
G
B
# F F

0 0 0 0

# F F F F F F

# 0 0 F F F F

# 0 0 0 0 0 0

# A A A A A A

Слайд 18

Тэг FONT – свойства блока текста
цвет текста
размер шрифта
Привет!

Как дела?

Привет!

SIZE=6>
Как дела?

от 1 до 7
(3 – нормальный)

Web-страницы. Основы Web-дизайна: HTML и редактор HEFS

Содержание

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

Язык HTMLHTML = Hypertext Markup Language (язык разметки гипертекста)HTML-страница – это текстовый

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

Простейшая Web-страницаМоя первая <br> Web-страницаПривет! first.htmlМоя первая <br> Web-страницашапка («голова») Привет!основная

Заголовки: H1 … H6Заголовок документаЗаголовок разделаЗаголовок подразделаЗаголовок параграфаКомментарийАвторские пометкивыравнивание:Историяleft, center,

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

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

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

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

Комментарий

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

История

Абзацыпереход на новую строкуабзац (с отступами)И вечный бой! Покой нам только

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

Физическая разметка

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

Маркированные спискиВася ПетяКоляunordered list (неупорядоченный список) list item (элемент списка) изменение

Нумерованные спискиВася ПетяКоляordered list (упорядоченный список) изменение нумерации:...1, i,

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

Многоуровневые списки Города России Города Украины Москва Санкт-Петерург Киев Одесса

Форматированный текст (тексты программ)program qq;var a, b: integer;begin writeln("Введите два числа");

Тэг BODY – общие свойства страницыцвет фона и текстацвет гиперссылок

Кодирование цветаимена red, green, blue, magenta, black, шестнадцатеричные кодыwhiteRGB# F F

Тэг FONT – свойства блока текстацвет текстаразмер шрифтаПривет!Как дела?Привет!

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