Web-страницы. Язык HTML. Оформление текста
Оценка 4.8

Web-страницы. Язык HTML. Оформление текста

Оценка 4.8
Презентации учебные
pptx
информатика
9 кл—11 кл
15.05.2021
Web-страницы. Язык HTML. Оформление текста
Введение текста на HTML страницы.
Оформление текста новая.pptx

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

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

Web-страницы Язык HTML

Тема 2. Оформление текста

HTML-код страницы помещается внутрь контейнера

HTML-код страницы помещается внутрь контейнера

HTML-код страницы помещается внутрь контейнера

Web-страница разделяется на две логические части: заголовок и содержание.

Заголовок заключается в контейнер

Название содержится в контейнере

создаем Web-странички автор проекта - Стрельникова Л.В.

Алгоритм создания HTML кода

Алгоритм создания HTML кода

Алгоритм создания HTML кода

Алгоритм создания HTML кода


</strong>Компьютер<strong>


5. Основное содержание страницы помещается в контейнер и может включать текст, таблицы, бегущие строки, ссылки на графические изображения и звуковые файлы и так далее.
Поместим на страницу текст «Все о компьютере»:

Все о компьютере

создаем Web-странички автор проекта - Стрельникова Л.В.

В окне приложения Блокнот ввести

В окне приложения Блокнот ввести

В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.htm(html) в папке сайта. Загрузить этот файл в окно браузера для просмотра.


Компьютер


Все о компьютере

создаем Web-странички автор проекта - Стрельникова Л.В.

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

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

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



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


Привет!


first.html


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

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


Привет!

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

создаем Web-странички автор проекта - Стрельникова Л.В.

Редактор HEFS создаем Web-странички автор проекта -

Редактор HEFS создаем Web-странички автор проекта -

Редактор HEFS

создаем Web-странички автор проекта - Стрельникова Л.В.

Вставка тэгов в HEFS создаем Web-странички автор проекта -

Вставка тэгов в HEFS создаем Web-странички автор проекта -

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

создаем Web-странички автор проекта - Стрельникова Л.В.

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

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

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

цвет фона и текста





цвет гиперссылок


Привет!


...

цвет текста

цвет фона

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

цвет ссылок

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

создаем Web-странички автор проекта - Стрельникова Л.В.

Вставка атрибутов в HEFS вставить только код цвета создаем

Вставка атрибутов в HEFS вставить только код цвета создаем

Вставка атрибутов в HEFS

вставить только код цвета

создаем Web-странички автор проекта - Стрельникова Л.В.

Web-странички автор проекта - Стрельникова

Web-странички автор проекта - Стрельникова

создаем Web-странички автор проекта - Стрельникова Л.В.

С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста.
Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=“Arial”)
Атрибут SIZE - размер шрифта (например, SIZE=4)
Атрибут COLOR –цвет шрифта (например, COLOR = “blue”)

Таким образом, задать синий цвет заголовка с помощью тэга FONT с атрибутом COLOR :

Все о компьютере


Тэг FONT – свойства блока текста создаем

Тэг FONT – свойства блока текста создаем

Тэг FONT – свойства блока текста

создаем Web-странички автор проекта - Стрельникова Л.В.

Стили оформления жирный ( bold )

Стили оформления жирный ( bold )

Стили оформления

жирный (bold)

Вася

Вася

курсив (italic)

Вася

Вася

подчеркивание (underline)

Вася

Вася

зачеркивание (strike out)

Вася

Вася

верхний индекс (superscript)

Вася2

Вася2

нижний индекс (subscript)

Вася2

создаем Web-странички автор проекта - Стрельникова Л.В.

Форматирование текста в HEFS Ctrl-B создаем

Форматирование текста в HEFS Ctrl-B создаем

Форматирование текста в HEFS

Ctrl-B

создаем Web-странички автор проекта - Стрельникова Л.В.

Форматированный текст (листинги программ) 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

Форматированный текст (листинги программ)

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)

создаем Web-странички автор проекта - Стрельникова Л.В.

Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут

Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут

Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение.

Все о компьютере

создаем Web-странички автор проекта - Стрельникова Л.В.

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

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

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

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

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

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

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

атрибут тэга

создаем Web-странички автор проекта - Стрельникова Л.В.

Выравнивание в HEFS создаем Web-странички автор проекта -

Выравнивание в HEFS создаем Web-странички автор проекта -

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

создаем Web-странички автор проекта - Стрельникова Л.В.

Размер шрифта Размер шрифта для имеющихся в тексте заголовков задается тэгами от (самый крупный) до (самый мелкий)

Размер шрифта Размер шрифта для имеющихся в тексте заголовков задается тэгами от (самый крупный) до (самый мелкий)

Размер шрифта

Размер шрифта для имеющихся в тексте заголовков задается тэгами от

(самый крупный) до

(самый мелкий).
Заголовок выдели крупным шрифтом:

Все о компьютере


Все о компьютере


Все о компьютере



создаем Web-странички автор проекта - Стрельникова Л.В.

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

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

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


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


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


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


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


Комментарий

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

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

История

left,
center,
right

создаем Web-странички автор проекта - Стрельникова Л.В.

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

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

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

создаем Web-странички автор проекта - Стрельникова Л.В.

Web-странички автор проекта - Стрельникова

Web-странички автор проекта - Стрельникова

создаем Web-странички автор проекта - Стрельникова Л.В.

Заголовок можно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга



Разделение текста на абзацы производится с помощью контейнера


На титульной странице обычно размещается текст, кратко описывающий содержание сайта:

На самом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.


Терминологический словарь познакомит вас с компьютерными терминами, а также вы сможете заполнить анкету.

Абзацы

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

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

Абзацы

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




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

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


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


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

создаем Web-странички автор проекта - Стрельникова Л.В.

Абзацы в HEFS создаем Web-странички автор проекта -

Абзацы в HEFS создаем Web-странички автор проекта -

Абзацы в HEFS

создаем Web-странички автор проекта - Стрельникова Л.В.

Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание создаем

Линия-разделитель horizontal rule ширина в пикселях или процентах толщина выравнивание создаем

Линия-разделитель



horizontal rule

ширина в пикселях или процентах

толщина

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

создаем Web-странички автор проекта - Стрельникова Л.В.

Вставка изображений Для вставки изображений используется тэг с атрибутом

Вставка изображений Для вставки изображений используется тэг с атрибутом

Вставка изображений

Для вставки изображений используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:

Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла. Например:

Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:

Поясняющий текст создаем Web-странички автор проекта -

Поясняющий текст создаем Web-странички автор проекта -

Поясняющий текст

создаем Web-странички автор проекта - Стрельникова Л.В.

Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
“Компьютер”
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга , который может принимать 5 различных значений: TOP(верх), MIDDLE(середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
“Компьютер”

Web-странички автор проекта - Стрельникова

Web-странички автор проекта - Стрельникова

создаем Web-странички автор проекта - Стрельникова Л.В.

В окне приложения БЛОКНОТ в контейнер вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.
IMG SRC=“computer.gif”
ALT=“Компьютер”
ALIGN=“right”

Поясняющий текст

Практическое задание Создать титульную страницу вашего сайта

Практическое задание Создать титульную страницу вашего сайта

Практическое задание

Создать титульную страницу вашего сайта. Поэкспериментировать с форматированием текста и размещением графики.
Задайте для страницы фон. Используемые тэги : Фоновое изображение

Цвет фона

Web-странички автор проекта - Стрельникова

Web-странички автор проекта - Стрельникова

создаем Web-странички автор проекта - Стрельникова Л.В.

Символ HTML-код Название ¡ или неразрывный пробел § § параграф © © или © символ авторского права « « или « левая русская кавычка ®…

Символ HTML-код Название ¡ или неразрывный пробел § § параграф © © или © символ авторского права « « или « левая русская кавычка ®…

 Символ

 HTML-код 

 Название 

 

¡ или  

неразрывный пробел  

§

§

параграф

©

© или ©

символ авторского права

«

« или «

левая русская кавычка

®

® или ®

зарегистрированная торговая марка 

°

°

градус

±

±

плюс-минус

²

²

квадрат

³

³

куб

»

» или »

правая русская кавычка

¼

¼

четверть

½

½

половина

¾

¾

три четверти

×

×

знак умножения

÷

÷

знак деления

создаем Web-странички автор проекта - Стрельникова Л.В.

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