Створення Web-сторінок - презентация, доклад, проект скачать

Нажмите для полного просмотра!

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Створення Web-сторінок. Доклад-сообщение содержит 107 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1

Описание слайда:

Тема: “Створення Web-сторінок”

Слайд 2

Описание слайда:

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

Слайд 3

Описание слайда:

Слайд 4

Описание слайда:

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

Слайд 5

Описание слайда:

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

Слайд 6

Описание слайда:

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

Слайд 7

Описание слайда:

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

Слайд 8

Описание слайда:

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

Слайд 9

Описание слайда:

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

Слайд 10

Описание слайда:

ТЕГИ

Слайд 11

Описание слайда:

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

Слайд 12

Описание слайда:

ТЕГИ

Слайд 13

Описание слайда:

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

Слайд 14

Описание слайда:

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

Слайд 15

Описание слайда:

КОМЕНТАРІ

Слайд 16

Описание слайда:

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

Слайд 17

Описание слайда:

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

Слайд 18

Описание слайда:

Слайд 19

Описание слайда:

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

Слайд 20

Описание слайда:

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

Слайд 21

Описание слайда:

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

Слайд 22

Описание слайда:

Заванажуємо броузер – Internet Explorer Відкриємо в броузері наш документ: Файл - Открыть - кнопка Обзор вказуємо адрес нашого документа index.html.

Слайд 23

Описание слайда:

Слайд 24

Описание слайда:

Слайд 25

Описание слайда:

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

Слайд 26

Описание слайда:

Слайд 27

Описание слайда:

Слайд 28

Описание слайда:

Слайд 29

Описание слайда:

Змінюємо колір шрифту <font color="#CC0000">текст</font>

Слайд 30

Описание слайда:

Слайд 31

Описание слайда:

Слайд 32

Описание слайда:

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

Слайд 33

Описание слайда:

Слайд 34

Описание слайда:

Слайд 35

Описание слайда:

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

Слайд 36

Описание слайда:

Слайд 37

Описание слайда:

Слайд 38

Описание слайда:

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

Слайд 39

Описание слайда:

Центрувати текст: <p align="center">текст</p> Вирівнювати по лівому краю документу: <p align="left">текст</p> Вирівнювати текст по правому краю документу: <p align="right">текст</p> По ширині документа: <p align="justify">текст</p>

Слайд 40

Описание слайда:

Слайд 41

Описание слайда:

Слайд 42

Описание слайда:

Також для вирівнюювання тексту можна використовувати тег <div></div>. Всі чотири значення атрибуту align можна вживати з <div>: <div align="center"> текст </div> <div align="left"> текст </div> <div align="right"> текст </div> <div align="justify"> текст </div>

Слайд 43

Описание слайда:

Слайд 44

Описание слайда:

Слайд 45

Описание слайда:

Створення заголовків тег - <H1></H1>

Слайд 46

Описание слайда:

Слайд 47

Описание слайда:

Слайд 48

Описание слайда:

Встановлюємо розмір шрифта тег – <font></font> атрибут – size <font size="+4"> текст </font> <font size="+3"> текст </font> <font size="+2"> текст </font> <font size="+1"> текст </font> <font size="+0"> текст </font> <font size="-1"> текст </font> <font size="-2"> текст </font>

Слайд 49

Описание слайда:

Слайд 50

Описание слайда:

Слайд 51

Описание слайда:

Створення стилю для шрифта <b> Напівжирний текст </b> <i> Похилий текст (курсив) </i> <u> Підкреслений текст </u> <s> Перекреслений </s>

Слайд 52

Описание слайда:

Слайд 53

Описание слайда:

Слайд 54

Описание слайда:

Тип шрифту тег – face атрибут – Arial <font face="arial">текст</font>

Слайд 55

Описание слайда:

Слайд 56

Описание слайда:

Слайд 57

Описание слайда:

Вставлення малюнка <img src=“Назва малюнка.jpg">

Слайд 58

Описание слайда:

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

Слайд 59

Описание слайда:

Слайд 60

Описание слайда:

Розташування тексту поряд з картинкою, використовують атрибут align, який відповідає за вирівнювання. <img src=“Малюнки/1.jpg" align "left">

Слайд 61

Описание слайда:

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

Слайд 62

Описание слайда:

Слайд 63

Описание слайда:

Атрибут vspace - задає відстань між текстом і малюнком – по вертикалі <img src=" Створення сайтів/1.jpg"vspace=“30"> Атрибут hspace- задає відстань між текстом і малюнком – по горизонталі <img src=" Створення сайтів/1.jpg " hspace="30">

Слайд 64

Описание слайда:

Слайд 65

Описание слайда:

Слайд 66

Описание слайда:

Атрибут alt - короткий опис картинки <img src=" Створення сайтів/1.jpg alt="Наша емблема">

Слайд 67

Описание слайда:

Слайд 68

Описание слайда:

Слайд 69

Описание слайда:

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

Слайд 70

Описание слайда:

Слайд 71

Описание слайда:

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

Слайд 72

Описание слайда:

Слайд 73

Описание слайда:

Слайд 74

Описание слайда:

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

Слайд 75

Описание слайда:

Слайд 76

Описание слайда:

Слайд 77

Описание слайда:

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

Слайд 78

Описание слайда:

Задаємо висоту і ширину таблиці використовуємо відомі нам вже атрибути height і width висота і ширина можуть задаватися як в пікселях, так і відсотках

Слайд 79

Описание слайда:

Слайд 80

Описание слайда:

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

Слайд 81

Описание слайда:

Вертикальне вирівнювання задається наступним атрибутом - align="middle“ Вертикальне вирівнювання задається наступним атрибутом - align="middle“ Top – вгорі Bottom – внизу Горизонтальне вирівнювання вмісту коміркику, а valign - вертикальне, перейдемо до наступної сходинки, щоб дізнатися про інші атрибути, що полегшують наше важке життя.

Слайд 82

Описание слайда:

Слайд 83

Описание слайда:

Слайд 84

Описание слайда:

Створення рамки для таблиці Рамка вводиться параметром border <table border="5">

Слайд 85

Описание слайда:

Слайд 86

Описание слайда:

Слайд 87

Описание слайда:

Колір рамки <table border=“5” bordercolor="#000000">

Слайд 88

Описание слайда:

Слайд 89

Описание слайда:

Слайд 90

Описание слайда:

Лінія <Hr> і не вимагає закриваючого тега: У лінії є багато різних параметрів: <Hr align="right"> (center или left) <Hr width="30%"> (ширина лінії в процентах/пікселях) <Hr size="6"> (толщина линии) <Hr NoShade> (отмена объемности) <Hr color="cc0000"> (колір лінії)