Створення Web-сторінок

Содержание

Слайд 2

Web-сайт – це сукупність Web-сторінок, які об’єднані однією загальною темою

Web-сайт – це сукупність
Web-сторінок, які об’єднані однією загальною темою

Слайд 3

Шаблони Web-сторінок

Шаблони Web-сторінок

Слайд 4

Сайт-візитка

Сайт-візитка

Слайд 5

Інформаційний сайт

Інформаційний сайт

Слайд 6

Інтернет-портал

Інтернет-портал

Слайд 7

Інтернет-магазин

Інтернет-магазин

Слайд 8

Основи мови HTML: теги, атрибути тегів, коментарі

Основи мови HTML: теги, атрибути тегів, коментарі

Слайд 9

Html-документ – це звичайний текстовий документ, що містить спеціальні команди для

Html-документ – це звичайний текстовий документ, що містить спеціальні команди для

розмітки тексту (теги).

HTML-файл має розширення .htm або .html

Слайд 10

ТЕГИ Тег – інструкція броузеру, яка вказуює спосіб відображення тексту.

ТЕГИ

Тег – інструкція броузеру, яка вказуює спосіб відображення тексту.

Слайд 11

Тег завжди починається зі знаку «меньше» ( ) Наприклад: ПРАВИЛО ЗАПИСУ ТЕГІВ

Тег завжди починається зі знаку «меньше» (<) і закінчується знаком «більше»

(>) Наприклад:

ПРАВИЛО ЗАПИСУ ТЕГІВ

Слайд 12

ТЕГИ ТЕГ одинарні парні (контейнер) відкриваючий закриваючий

ТЕГИ

ТЕГ

одинарні

парні
(контейнер)

відкриваючий < >

закриваючий

Слайд 13

СТРУКТУРНІ ТЕГИ Весь вміст файла інтернету-сторінки заключається в контейнер ... ,

СТРУКТУРНІ ТЕГИ

Весь вміст файла інтернету-сторінки заключається в контейнер ..., вказуючи броузеру,

що даним текстом є html-документ і, можливо містить в собі теги, які броузер повинен виявити, розпізнати.
Типова інтернет-сторінка складається з двох частин: заголовка (HEAD) і тіла (BODY).
Слайд 14

СТРУКТУРНІ ТЕГИ Базова структура HTML-документа має такий вигляд:

СТРУКТУРНІ ТЕГИ

Базова структура HTML-документа має такий вигляд:

Слайд 15

КОМЕНТАРІ - напівтег використовується для додавання коментарів на сторінці, тобто для

КОМЕНТАРІ

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

на сторінці, тобто для корисних пояснень, які не показуються в броузері.

Приклад:

Заголовок



Підзаголовок


Слайд 16

ПРИКЛАД HTML-ДОКУМЕНТУ Моя перша Інтернет-сторінка! Це моя перша спроба роботи в

ПРИКЛАД HTML-ДОКУМЕНТУ



<ТIТLЕ>Моя перша Інтернет-сторінка!


Це моя перша спроба роботи в

Web-дизайні.
Можливо, сторінка пока ще вийшла
не дуже красива, але вона працює!!!


Слайд 17

Практичне завдання

Практичне завдання

Слайд 18

Перед початком роботи ми створюємо на комп'ютері окрему папку для майбутньої

Перед початком роботи ми створюємо
на комп'ютері
окрему папку для майбутньої

сторінки:
Робочий стіл\Папка з власним прізвищем\
Створення сайтів
Слайд 19

Завантажуємо стандартну програму Блокнот і вводимо теги для створення базової структури HTML сторінки

Завантажуємо стандартну програму Блокнот і вводимо теги для створення базової структури

HTML сторінки
Слайд 20

Створюємо заголовок для нашої Web-сторінки, для цього необхідно ввести назву між тегами «Заняття 1»

Створюємо заголовок для нашої Web-сторінки, для цього необхідно ввести назву між

тегами «Заняття 1»
Слайд 21

Зберігаємо документ: Файл → Сохранить Как (File -> Save as) з ім'ям: index.html

Зберігаємо документ: Файл → Сохранить Как (File -> Save as) з

ім'ям: index.html
Слайд 22

Заванажуємо броузер – Internet Explorer Відкриємо в броузері наш документ: Файл

Заванажуємо броузер – Internet Explorer Відкриємо в броузері наш документ: Файл -

Открыть - кнопка Обзор вказуємо адрес нашого документа index.html.
Слайд 23

Слайд 24

Слайд 25

При перегляді Web-сторінки ми бачимо, що вона вже має і’мя

При перегляді Web-сторінки ми бачимо, що вона вже має і’мя

Слайд 26

Переходимо безпосередньо до заповнення нашої сторінки, тобто до тіла документа. Всі

Переходимо безпосередньо до
заповнення нашої сторінки,
тобто до тіла документа.
Всі

теги, розташовані між
, - безпосередній зміст документа.
Вводимо текст: та використовуємо тег:
– перенесення тексту на інший рядок.
Деякі теги, наприклад
,
не вимагають закриваючий тег
Слайд 27

Слайд 28

Слайд 29

Змінюємо колір шрифту текст

Змінюємо колір шрифту текст

Слайд 30

Слайд 31

Слайд 32

Створюємо колір тексту для всього документу

Створюємо колір тексту для всього документу


Слайд 33

Слайд 34

Слайд 35

Створення фону

Створення фону


Слайд 36

Слайд 37

Слайд 38

Створення абзаців, використовуємо тег текст

Створення абзаців, використовуємо тег

текст


Слайд 39

Центрувати текст: текст Вирівнювати по лівому краю документу: текст Вирівнювати текст

Центрувати текст:

текст

Вирівнювати по лівому краю документу:

текст

Вирівнювати текст

по правому краю документу:

текст

По ширині документа:

текст


За допомогою даного тега
використовуючи інші атрибути ми зможемо

Слайд 40

Слайд 41

Слайд 42

Також для вирівнюювання тексту можна використовувати тег . Всі чотири значення

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

. Всі чотири значення атрибуту

align можна вживати з
:

текст

текст

текст

текст

Слайд 43

Слайд 44

Слайд 45

Створення заголовків тег - текст текст текст текст текст текст

Створення заголовків тег -


текст


текст


текст


текст


текст

текст

Слайд 46

Слайд 47

Слайд 48

Встановлюємо розмір шрифта тег – атрибут – size текст текст текст текст текст текст текст

Встановлюємо розмір шрифта тег – атрибут – size

текст
текст
текст
текст
текст
текст
текст
Слайд 49

Слайд 50

Слайд 51

Створення стилю для шрифта Напівжирний текст Похилий текст (курсив) Підкреслений текст Перекреслений

Створення стилю для шрифта

Напівжирний текст
Похилий текст (курсив)

Підкреслений текст
Перекреслений
Слайд 52

Слайд 53

Слайд 54

Тип шрифту тег – face атрибут – Arial текст

Тип шрифту тег – face атрибут – Arial

текст

Слайд 55

Слайд 56

Слайд 57

Вставлення малюнка

Вставлення малюнка


Слайд 58

Якщо картинка лежить в піддиректорії, то посилання на неї виглядатиме так:

Якщо картинка лежить в піддиректорії, то посилання на неї виглядатиме так:

src="Створення сайтів/1.jpg"> Якщо картинка лежить на рівень вище, а документ знаходиться в піддиректорії, то посилання на неї буде таким: Якщо картинка лежить на іншому сайті, то шлях прописується повністю:
Слайд 59

Слайд 60

Розташування тексту поряд з картинкою, використовують атрибут align, який відповідає за вирівнювання.

Розташування тексту поряд з картинкою, використовують атрибут align, який відповідає за

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

Слайд 61

Задаємо параметри розташування тексту біля малюнка та розмір малюнка

Задаємо параметри розташування тексту біля малюнка та розмір малюнка

Слайд 62

Слайд 63

Атрибут vspace - задає відстань між текстом і малюнком – по

Атрибут vspace - задає відстань між текстом і малюнком – по

вертикалі

Атрибут hspace- задає відстань між текстом і малюнком – по горизонталі

Слайд 64

р

р

Слайд 65

Слайд 66

Атрибут alt - короткий опис картинки alt="Наша емблема">

Атрибут alt - короткий опис картинки

Слайд 67

Слайд 68

Слайд 69

Картинку можна зробити фоном документа Дана дія прописується у відкриваючому тегі body background=“Малюнки/Емблема.png">

Картинку можна зробити фоном документа

Дана дія прописується у відкриваючому тегі body



Слайд 70

Слайд 71

Створення таблиць Таблиця задається тегом Рядок таблиці Стовпець (комірка) таблиці

Створення таблиць

Таблиця задається тегом


Рядок таблиці

Стовпець (комірка) таблиці

Слайд 72

Слайд 73

Слайд 74

Колір фону таблиці задається атрибутом bgcolor="цвет_фона“ Фон можна задати для таблиці

Колір фону таблиці задається атрибутом

bgcolor="цвет_фона“
Фон можна задати для таблиці в цілому,

для ряду, для комірки.
Слайд 75

Слайд 76

Слайд 77

Задати фон для рядка атрибут bgcolor ми прописуємо для тега –

Задати фон для рядка

атрибут bgcolor ми прописуємо для тега –:
tr

bgcolor="#FFCC33">
фон для всієї таблиці – атрибут bgcolor ми прописуємо для тега :

Слайд 78

Задаємо висоту і ширину таблиці використовуємо відомі нам вже атрибути height

Задаємо висоту і ширину таблиці

використовуємо відомі нам вже атрибути height і width


висота і ширина можуть задаватися як в пікселях, так і відсотках
Слайд 79

Слайд 80

Вирівнювання тексту в комірках

Вирівнювання тексту в комірках

Слайд 81

Вертикальне вирівнювання задається наступним атрибутом - align="middle“ Top – вгорі Bottom

Вертикальне вирівнювання задається наступним атрибутом - align="middle“
Top – вгорі
Bottom –

внизу
Горизонтальне вирівнювання вмісту коміркику, а valign - вертикальне, перейдемо до наступної сходинки, щоб дізнатися про інші атрибути, що полегшують наше важке життя.
Слайд 82

Слайд 83

Слайд 84

Створення рамки для таблиці Рамка вводиться параметром border

Створення рамки для таблиці

Рамка вводиться параметром border


Слайд 85

Слайд 86

Слайд 87

Колір рамки

Колір рамки


Слайд 88

Слайд 89

Слайд 90

Лінія і не вимагає закриваючого тега: У лінії є багато різних

Лінія


і не вимагає закриваючого тега:
У лінії є багато різних

параметрів:

(center или left)

(ширина лінії в процентах/пікселях)

(толщина линии)

(отмена объемности)

(колір лінії)
Слайд 91

Слайд 92

Створення форм Всі елементи створення поля введення і кнопок, задаються за допомогою тегів та

Створення форм

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

тегів
та

Слайд 93

Слайд 94

Слайд 95

Слайд 96

Слайд 97

Слайд 98

Слайд 99

Слайд 100

Слайд 101

Слайд 102

Слайд 103

Слайд 104

Слайд 105

Слайд 106