instrukciyna kartka створення_сайту лаболаторна

ВИРОБНИЧЕ НАВЧАННЯ

Тема № 4. Основи Web-дизайну

Урок № 10. Робота з основними тегами HTML

1

ІНСТРУКЦІЙНА КАРТКА

№

п\п Графічне відображення операції Зміст операції

1. Створити файл в програмі Блокнот 1-й

спосіб

Пуск – Всі

програми –

Стандартні –

Блокнот.

Файл – Зберегти

як… – вказуємо

ім'я документу з

розширенням

*.txt

2-й

спосіб

Викликати

контекстне меню

– Створити –

Текстовий

документ.




2

Ввести ім'я

документу.

Відкрити

створений

документ

подвійним

кліком миші.

2. Вводимо основні теги HTML документу

обмежують

WWW-

документ

обмежують

заголовок

сторінки

цей тег

дозволяє

описати

WWW-

документ

текст з'являється

в браузері в

рядку заголовку

3. Зберігаємо HTML документ

Файл – Зберегти

як… – вказуємо

ім'я документу з

розширенням

*.html

4. Запускаємо Web-сторінку для перегляду 1-й

спосіб Контекстне

меню - Відкрити

В цьому місці розміщується певна кількість параметрів, що визначають

зовнішній вигляд документа (фон, колір, шрифти, таблиці, зображення).

Вони відображаються в браузері.




3

2-й

спосіб

Відкрити

браузер на вибір

(за

замовчуванням

користувачем

установлено

Google Chrome)

Шляхом

буксирування

перемістити

Web-документ у

браузер

Web-сторінка має наступний вигляд




4

Основні теги html верстки.

На даній сторінці спеціально для тих користувачів, які цікавляться веб дизайном й html

версткою зібрані основні теги html, описане їх значення, синтаксис і атрибути, що їм належать.

HTML теги Опис

a Тег, що відповідає за створення посилань, ось його синтаксис:

<a href="url посилання">анкорний текст</a>.

audio

Тег служить для вставки аудіо на веб сторінку. Його синтаксис:

<audio src="шлях до аудіо файлу" autoplay controls></audio>.

Атрибут autoplay дозволяє звучати аудіо файлу зразу після завантаження веб

сторінки, а controls додає панель керування відтворенням аудіо.

body

В даний тег поміщается весь видимий вміст веб сторінки. Його синтаксис:

<body>...</body>. Основні атрибути: bgcolor - колір фону веб сторінки;

background - фонове зображення сторінки; text - колір тексту по замовчуванні.

Наприклад: <body background="img/back.gif" text="#000">...</body>.

bgsound

Тег вставки фонової музики на веб сторінку. Вставляється в тег head.

Синтаксис: <bgsound src="шлях до аудіо файлу в форматі mid" volume="голос

звучання від -10000 до 0" loop="кількість пофторів від -1 - постійно до 1 -

одноразово">.

br Тег переносу тексту на слідуючий рядок.

blink Призначений для створення ефекту мерехтіння тексту. Синтаксис:

<blink>...</blink>.

button

Тег призначений для створення кнопки на веб сторінці. Синтаксис:

<form><button>...</button></form>. Основні атрибути: name - ім'я кнопки; type -

тип кнопки; value - тип значення кнопки.

center Тег центрування елементів. Його синтаксис: <center>...</center>.

caption Тег заголовку таблиці. Використовується лише в елементі table.

div Тег вставки блочного елементу. Його синтаксис: <div>...</div>.

embed

Даний тег використовується для вставки відео роликів на веб сторінку. Основні

атрибути: src - шлях до файлу; width - ширина поля для перегляду; height -

висота; autostart - якщо атрибут приймає значення true, то запуск відтворення

відео здійснюється автоматично, false - дозволяє вмикати відтворення відео

користувачеві; controller - панель керування відтворенням відео, (true -

присутня, false - відсутня). Приклад: <embed src="file.wav" width="70%"

height="44%" autostart=true controller=true>.

font

Тег форматування тексту. Його основні атрибути: face - стиль тексту; size -

розмір шрифту; color - колір тексту. Приклад: <font face="Arial" size="2"

color="#fff">...</font>.

html Даним тегом починається і завершується будь-який html код.

head Призначений для розміщення мета тегів.

h Тег заголовку текстового контенту, від 1 по 6 рівні.

hr Тег горизонтальної лінії. Атрибути: size - товщина лінії; width - ширина; color -

колір. Приклад: <hr width="100%" size=1px color="#ff0000">.




5

img

Тег вставки графічного зображення. Його атрибути: src - шлях до графічного

файлу; border - товщина рамки; bordercolor - колір рамки; align - положення

зображення; width - ширина; height - висота; alt - альтернативний текст.

Приклад: <img src="photo.jpg" alt="фото" border=0 align="center" width=300px

height=120px>.

li Тег служить для позначення елементу списку.

marquee

Тег використовується для скролінгу текстового фрагменту в заданому напрямку.

Його атрибути: behavior - оприділяє вид скролінгу; direction - напрямок руху

текстового фрагменту.

nobr Забороняє переносити текст на слідуючий рядок.

ol

Тег призначений для створення списків. Його атрибут - type може приймати

слідуючі значення: А - заглавні букви; а - малі букви; І - великі римські числа; і -

малі римські числа.

ul

Тег призначений для створення списків. Його атрибут - type, що призначає тип

маркера, може приймати такі значення: disk - затушоване коло; circle - пусте

коло; sguare - квадрат.

p Тег абзацу.

strong Тег призначений для виділення тексту великим шрифтом.

table

Тег табличних елементів.

Його атрибути: border - товщина граней таблиці;

bgcolor - колір фону; cellpadding - відстань між вмістом ячейки і її рамкою;

cellspacing - відстань між ячейками таблиці; width - ширина таблиці; align -

положення табличного елементу.

tt Тег імітує друкарський шрифт.

tr Тег рядка в табличному елементі.

td

Тег ячейки табличного елементу. Його основні атрибути: width - ширина

ячейки; align - положення контенту ячейки; colspan - к-ть колонок в ячейці;

rowspan - к-ть рядків в ячейці; bgcolor - колір фону ячейки.




6

Д О В І Д Н И К

Основні атрибути контейнера <BODY>

Атрибут Призначення

ALINK Визначає колір, яким виділяється активне гіперпосилання

BACKGROUND Вказує URL зображення, яке слід використовувати як фон документа

BGCOLOR Визначає колір фону документа

LINK Визначає колір фону гіперпосилання, яке не було "відвідане"

VLINK Визначає колір гіперпосилання, яке було "відвідане"

TEXT Визначає колір тексту документа

Заголовки рівнів

Найбільший розмір <H1> Заголовок першого рівня </H1>

<H2> Заголовок другого рівня </H2>

<H3> Заголовок третього рівня </H3>

<H4> Заголовок четвертого рівня </H4>

<H5> Заголовок п'ятого рівня </H5>

Найменший розмір <H6> Заголовок шостого рівня </H6>

Теги для форматування тексту

<p> </p> Початок нового абзацу

<br> </br> Перехід на новий рядок

<hr> Горизонтальна лінія

<pre> </pre> Відображення відформатованого заздалегідь тексту

Основні дескриптори стилів

<b> текст </b> Напівжирний

<i> текст </i> Курсив

<u> текст </u> Підкреслений

<sub> текст </sub> Надрядковий

<sup> текст </sup> Підрядковий

<strike> текст </strike> Перекреслений

<big> текст </big> Великий шрифт

<small> текст </small> Малий шрифт

Вирівнювання

<ALIGN= center> по центру

left> по лівому краю

right> по правому краю

Теги параметра шрифта <FONT>

<FONT FACE="….." > текст </FONT> Назва шрифта

SIZE=…. Розмір від 1 до 7

COLOR="…." Колір тексту




7

Основні кольори

Bblack

#000000

Чорний Blue

#0000ff

Синій Green

#008000

Зелений

Gray

#808080

Cірий Navy

#000080

Темно-синій Olive

#808000

Оливковий

Silver

#cococo

Сріблястий Aqua

#00ffff

Блакитний

(морська хвиля)

Teal

#008080

Бірюзовий

(зеленувато-

блакитний)

Red

#ff0000

Червоний Yellow

#ffff00

Жовтий White

#ffffff

Білий

Maroon

#800000

Темно-

бордовий

Lime

#00ff00

Лимонний

Fuchsia

#ff00ff

Рожевий

(фуксія)

Purple

#800080

Фіолетовий

Теги для створення динамічних ефектів <MARQUEE>

<MARQUEE BGCOLOR="..." > текст </MARQUEE> Колір фону біжучого

тексту

HEIGHT="…" Розмір символів

біжучого тексту

BEHAVIOR=

"alternate"

Ефект відбивання

тексту від країв

екрана

BEHAVIOR=

"slide"

Зупиняється біжучий

рядок біля лівого

краю екрана

DIRECTION=

"right"

Ефект руху тексту у

протилежний бік

LOOP="N" (N – ціле число) N – кількість

повторень біжучого

тексту

SCROLLAMOUBT=

"N"

(1<=N<=10) N - швидкість руху

тексту

Розміщення зображення <IMG>

<img src="*.jpg (gif, png)" Align= Top> Текст вирівнюється по верхньому краю

зображення

Middle> Текст вирівнюється по середній частині


Bottom> Текст вирівнюється по нижньому краю


Left> Текст розміщується праворуч від

зображення і нижче.




8

ALT="…" Підказка-текст, який виводиться біля картинки

Width=… Задається ширина

Height=… Задається висота

Border=x Рамка навколо зображення

(х – товщина рамки у пікселях)

HSPACE="…" Задання пропуску справа і зліва від

малюнка

VSPACE="…" Задання пропуску над і під малюнком

Теги для створення списків

Маркірований

(крапка)

<ul>

<li>

<li>

<li>

елементи

списку </ul>

Нумерований <ol TYPE =1> <li>

<li>

<li>

</ul> Спосіб нумерації за

допомогою арабських цифр

TYPE =I> римських цифр

TYPE =a> малих букв алфавіту

TYPE =A> великих букв алфавіту

Список

визначень

<dl> <dt> визначення </dt> </dl>

<dd> пояснення </dd>

Додавання таблиць <TABLE>

<TABLE> текст </TABLE> Оголошення таблиці Атрибути тега: Border, Wight,

Bgcolor

<TR> текст </TR> Тег рядка Атрибути: Align, Valign,

Bgcolor, Coptan, Rowspan <TD> текст </TD> Тег даних

<TABLE Border=x > Рамка навколо таблиці (х – товщина рамки у пікселях)

Wight=xx% Ширина таблиці (хх% - відсоток від ширини сторінки або

хх – у пікселях)

Bgcolor="…" Колір фону таблиці

<TD

<TR

Align=х > Установлює вирівнювання по горизонталі (Right, Left,

Center)

Valign=х Установлює вирівнювання по вертикалі (Top - верхній,

Middle - середній, Bottom - нижній, Baseline)

Bgcolor='…' Задає колір фону осередку

Комірки, які займають декілька стовпців або рядків.

<TD Coptan=… > Кількість стовпців, які повинна займати комірка

Rowspan=… > Кількість рядків, які повинна займати комірка

instrukciyna kartka створення_сайту лаболаторна

Education