Презентация на тему: Язык HTML

Язык HTML
Типы начертания шрифта. Расшифровка сокращений. Линии.
Язык HTML
Язык HTML
Язык HTML
Язык HTML
Язык HTML
Практическое задание
Язык HTML
Тег abbr
Практическое задание
Язык HTML
Тег hr
Практическое задание
Язык HTML
1/15
Средняя оценка: 4.1/5 (всего оценок: 62)
Код скопирован в буфер обмена
Скачать (324 Кб)
1

Первый слайд презентации: Язык HTML

Выполнил: Иванов И.И.

Изображение слайда
2

Слайд 2: Типы начертания шрифта. Расшифровка сокращений. Линии

Поскольку на прошлом занятии мы научились вставлять графический фон, попробуем делать простенькие узорные фоны в редакторе Adobe P h otoshop для оформления наших веб-страниц. Итак, открыть редактор, создать документ размером  200х200  пикселов, разрешением  72 пиксела на дюйм, цветовой режим –  RGB Color, 8 бит на цвет, фон белый.

Изображение слайда
3

Слайд 3

Создать новый слой командой  Layer-New-Layer (Слой – Новый - Слой). Инструментом  Custom Shape    выбираем элемент из библиотеки шаблонов векторных фигур (список в строке параметров  Shape ), растягивая, размещаем его на листе. Получаем контур векторной фигуры. Кнопкой  Load path as a selection (Преобразовать путь как выделение)    в нижней части палитры  Paths. Выполним обводку выделения командой  Edit – Stroke (Редактирование - Обводка). Толщину линии установить  3. Убрать выделение командой  Select – Deselect (Выделение – Убрать выделение). Выбирая стили в палитре стилей  Styles  можно подобрать эффектные обводки узора. В палитре  Layers (слои)  параметром  Opacity (прозрачность)  снизить яркость изображения. Удалить слой фона (щелкнуть по нему в палитре слоев, команда  Layer – Delete – Layer (Слой – Удалить - Слой)). Сохранить как  png -документ  с прозрачным фоном.

Изображение слайда
4

Слайд 4

Вот что получилось у меня:

Изображение слайда
5

Слайд 5

Теперь поговорим о других возможностях HTML по форматированию текста. Первое, что можно сделать - это изменить вид начертания текста: курсив, подчёркнутый, жирный и различные их комбинации. Начнём с курсива. Текст будет курсивным, если он находится внутри тега <i>. Поэтому давайте напишем так: <i> Это курсив </i > Если Вы запустите браузер, то Вы сможете увидеть текст в виде курсива. Текст может быть жирным. Делается это с помощью тега <b>. Например, так: <b> Это жирное начертание </b>

Изображение слайда
6

Слайд 6

Также текст можно сделать подчёркнутым. Для этого необходимо использовать тег <u> < u> Подчёркнутый текст </u> Тег <s> делает текст перечеркнутым. < s> Перечеркнутый текст </s> Помимо этого можно сделать комбинацию начертаний, например, курсивным и жирным одновременно. Делается это следующий образом: <i><b> Жирный курсивный текст </b></i> Также можно записать и так: <b><i> Жирный курсивный текст </i></b> Если Вы посмотрите в браузере, то не увидите никакой разницы. Это и логично, ведь какая разница: сначала сделали текст курсивным, а потом жирным, или, наоборот, сначала жирным, а потом курсивным.

Изображение слайда
7

Слайд 7

Единственное, но ОЧЕНЬ важное правило - это соблюдать принцип вложенности. То есть сначала закрываются все  внутренние  теги, и только потом закрываются  внешние теги : Всегда помните о принципе вложенности - это одно из немногих правил HTML, соблюдение которого обязательно!

Изображение слайда
8

Слайд 8: Практическое задание

Создадим HTML- документ, демонстрирующий все простые виды написания шрифта и 2 составных:

Изображение слайда
9

Слайд 9

Сохраняем и смотрим результат в браузере:

Изображение слайда
10

Слайд 10: Тег abbr

Этот тег указывает на то, что текст является аббревиатурой (сокращением). По умолчанию этот текст будет подчеркиваться пунктиром, а при наведении на него курсора мыши появится всплывающая подсказка с расшифровкой аббревиатуры. Это достигается добавлением в тег параметра title, в качестве значения которого и выступает расшифровка: < abbr title ="расшифровка сокращения"> Cокращение </ abbr >

Изображение слайда
11

Слайд 11: Практическое задание

Для примера работы тега < abbr > создадим страницу HTML с цитатой из фильма с расшифровкой жаргона:

Изображение слайда
12

Слайд 12

Сохраняем и смотрим результат в браузере:

Изображение слайда
13

Слайд 13: Тег hr

И последний тэг на сегодня - Тег < hr >. Заметьте, он не парный - закрывающего тега нет. Рисует горизонтальную линию, отделенную сверху и снизу пустыми строками. У этого тега есть следующие параметры: align - выравнивает линию по центру ( center ), слева ( left ) или справа ( right ) окна документа ; width - устанавливает длину линии в пикселах или в процентах от ширины окна; size - устанавливает толщину линии в пикселах; color - устанавливает цвет линии; noshade - убирает рельефность линии. Например: < hr align =" right " width ="70%" size ="9" color ="#0f473c">

Изображение слайда
14

Слайд 14: Практическое задание

Создадим документ с использованием тега < hr >

Изображение слайда
15

Последний слайд презентации: Язык HTML

Сохраняем и смотрим результат в браузере: Практическая работа готова!

Изображение слайда