Поделиться
Оформление текста новая.pptx
Web-страницы Язык HTML
Тема 2. Оформление текста
HTML-код страницы помещается внутрь контейнера
Web-страница разделяется на две логические части: заголовок и содержание.
Заголовок заключается в контейнер
Название содержится в контейнере
создаем Web-странички автор проекта - Стрельникова Л.В.
Алгоритм создания HTML кода
Алгоритм создания HTML кода
создаем Web-странички автор проекта - Стрельникова Л.В.
В окне приложения Блокнот ввести HTML-код Web-страницы. Сохранить файл под именем index.htm(html) в папке сайта. Загрузить этот файл в окно браузера для просмотра.
Все о компьютере
создаем Web-странички автор проекта - Стрельникова Л.В.
Простейшая Web-страница
first.html
шапка («голова»)
основная часть («тело»)
создаем Web-странички автор проекта - Стрельникова Л.В.
Редактор HEFS
создаем Web-странички автор проекта - Стрельникова Л.В.
Вставка тэгов в HEFS
создаем Web-странички автор проекта - Стрельникова Л.В.
Тэг BODY – общие свойства страницы
цвет фона и текста
цвет текста
цвет фона
посещенные ссылки
(visited link)
цвет ссылок
атрибуты тэга
создаем Web-странички автор проекта - Стрельникова Л.В.
Вставка атрибутов в HEFS
вставить только код цвета
создаем Web-странички автор проекта - Стрельникова Л.В.
создаем Web-странички автор проекта - Стрельникова Л.В.
С помощью тэга FONT и его атрибутов можно задать параметры форматирования шрифта любого фрагмента текста.
Атрибут FACE позволяет задать гарнитуру шрифта (например, FACE=“Arial”)
Атрибут SIZE - размер шрифта (например, SIZE=4)
Атрибут COLOR –цвет шрифта (например, COLOR = “blue”)
Таким образом, задать синий цвет заголовка с помощью тэга FONT с атрибутом COLOR :
Все о компьютере
Тэг FONT – свойства блока текста
создаем Web-странички автор проекта - Стрельникова Л.В.
Стили оформления
жирный (bold) | Вася | Вася |
курсив (italic) | Вася | Вася |
подчеркивание (underline) | Вася | Вася |
зачеркивание (strike out) |
| Вася |
верхний индекс (superscript) | Вася2 | Вася2 |
нижний индекс (subscript) | Вася2 |
создаем Web-странички автор проекта - Стрельникова Л.В.
Форматирование текста в 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.
отформатированный текст
(preformatted)
создаем Web-странички автор проекта - Стрельникова Л.В.
Задать тип выравнивания заголовка для тэга заголовка позволяет атрибут ALIGN, которому требуется присвоить определенное значение. Все о компьютере
создаем Web-странички автор проекта - Стрельникова Л.В.
Выравнивание
Выравнивание
Этот текст выровнен по центру.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
Этот текст выровнен по ширине.
left по левой границе
right по правой границе
center по центру
justify по ширине
атрибут тэга
создаем Web-странички автор проекта - Стрельникова Л.В.
Выравнивание в HEFS
создаем Web-странички автор проекта - Стрельникова Л.В.
Размер шрифта
Размер шрифта для имеющихся в тексте заголовков задается тэгами от
создаем Web-странички автор проекта - Стрельникова Л.В.
Заголовки: H1 … H6
выравнивание:
left,
center,
right
создаем Web-странички автор проекта - Стрельникова Л.В.
Специальные символы в HEFS
создаем Web-странички автор проекта - Стрельникова Л.В.
создаем Web-странички автор проекта - Стрельникова Л.В.
Заголовок можно отделить от остального содержания страницы горизонтальной линией с помощью одиночного тэга
Разделение текста на абзацы производится с помощью контейнера
На титульной странице обычно размещается текст, кратко описывающий содержание сайта:
На самом сайте вы сможете получить различную информацию о компьютере, его программном обеспечении и ценах на компьютерные комплектующие.
Абзацы
Абзацы
переход на новую строку
абзац (с отступами)
Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.
До самого вечера тело с
Одно физическое тело захотело поменять три своих старых варежки
на что-нибудь хорошее.
До самого вечера тело с варежками ...
создаем Web-странички автор проекта - Стрельникова Л.В.
Абзацы в HEFS
создаем Web-странички автор проекта - Стрельникова Л.В.
Линия-разделитель
horizontal rule
ширина в пикселях или процентах
толщина
выравнивание
создаем Web-странички автор проекта - Стрельникова Л.В.
Вставка изображений
Для вставки изображений используется тэг с атрибутом SRC, который указывает на место хранения файла на локальном компьютере или в Интернете. Если графический файл находится на локальном компьютере в том же каталоге, что и файл Web-страницы, то в качестве значения атрибута SRC достаточно указать только имя файла:
Если файл находится в другом каталоге на данном локальном компьютере, то значением атрибута должно быть полное имя файла. Например:
Если файл находится на удаленном сервере в Интернете, то должен быть указан URL-адрес этого файла. Например:
Поясняющий текст
создаем Web-странички автор проекта - Стрельникова Л.В.
Поясняющий текст выводится с помощью атрибута ALT, значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
Расположить рисунок относительно текста различными способами позволяет атрибут ALIGN тэга , который может принимать 5 различных значений: TOP(верх), MIDDLE(середина), BOTTOM (низ), LEFT (слева) и RIGHT (справа).
Для того чтобы рисунок располагался по правому краю текста, тэг вставки изображения должен принять следующий вид:
создаем Web-странички автор проекта - Стрельникова Л.В.
В окне приложения БЛОКНОТ в контейнер
вставить перед абзацами текста тэг вставки изображения, просмотреть результат в браузере.Поясняющий текст
Практическое задание
Создать титульную страницу вашего сайта. Поэкспериментировать с форматированием текста и размещением графики.
Задайте для страницы фон. Используемые тэги : Фоновое изображение
Цвет фона
создаем Web-странички автор проекта - Стрельникова Л.В.
Символ | HTML-код | Название |
| ¡ или | неразрывный пробел |
§ | § | параграф |
© | © или © | символ авторского права |
« | « или « | левая русская кавычка |
® | ® или ® | зарегистрированная торговая марка |
° | ° | градус |
± | ± | плюс-минус |
² | ² | квадрат |
³ | ³ | куб |
» | » или » | правая русская кавычка |
¼ | ¼ | четверть |
½ | ½ | половина |
¾ | ¾ | три четверти |
× | × | знак умножения |
÷ | ÷ | знак деления |
создаем Web-странички автор проекта - Стрельникова Л.В.
Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете сообщить о нарушении.
