HTML - 'HyperText Mark-up Language / мова гіпертекстової
Download
Report
Transcript HTML - 'HyperText Mark-up Language / мова гіпертекстової
Мова HTML
Стуктура HTML - документа.
Основні теги HTML.
Київський природничо-науковий ліцей №145
HTML - "HyperText Mark-up
Language / мова гіпертекстової
розмітки"
HTML був створений в 1990 році вченим,
Тімом Бернерсом-Лі (Tim Berners-Lee), який
працював у Європейській організації ядерних
досліджень та призначався для полегшення
обміну документами між вченими різних
університетів.
Як подивитсь HTML-код
сторінки
HTML - це мова, яка дозволяє представляти дані
(текстові, графічні та мультимедіа) в Інтернеті.
Те, що ви бачите при перегляді сторінки
в Інтернеті, це інтерпретація вашим браузером
HTML-тексту.
Ви можете відобразити html код-сторінки прямо
у вікні браузера. Для цього перейдіть до
сторінки, яка вас цікавить, і виберіть у браузері
(IE) команду Вид-> Перегляд html-коду, або
клацніть на вікні документа правою кнопкою
миші та оберіть “Перегляд коду сторінки”.
Як подивитись HTML-код
сторінки
Для перегляду в браузері Google Chrome:
правий верхній кут - клацніть лівою
кнопкою миші і виберіть в меню, “Tools“ –
“View Source” або натисніть одночасно Ctrl
+ U.
Як подивитись HTML-код
сторінки
Для перегляду в браузері Opera наведіть
курсор на сторінку, клацніть правою
кнопкою миші і виберіть в меню,
"Джерело", або натисніть одночасно Ctrl +
U. Відкриється нове вікно браузера з html
кодом сторінки.
Як розшифрувати HTML
Hyper протилежно linear / порядково. Раніше
комп'ютерні програми працювали порядково:
програма виконувала один рядок, потім переходила до
виконання наступного, і т. д. Але HTML працює поіншому - ви можете перейти куди і коли захочете.
Text - відбувається форматування тексту.
Mark-up - це розмітка, те, що ви робите з текстом. Ви
розмічаєте текст так само, як ви робите це в текстових
редакторах: виставляєте заголовки, списки, виділяєте
текст жирним шрифтом і т. д.
Language - мова – в HTML використовується багато
англійських слів.
Теги (дескриптори)
Теги - це спеціальні символи
розмітки, які використовуються для
вказівки браузеру, як він повинен
форматувати текст web-сайту.
Всі теги мають однаковий формат:
вони починаються знаком "<" і
закінчуються знаком ">".
Тег складається з імені та набору
параметрів, які вказують на додаткові
способи відображення
Теги
Зазвичай є два теги - відкриваючий:
<html> і закриваючий: </html>.
Різниця в тому, що в закриваючому є
слеш "/".
Весь вміст, що вміщено між
відкриваючими і закриваючими
тегами, є вмістом тега.
Теги
В HTML також є теги, які і відкривають, і
закривають. Ці теги не містять тексту, а є
мітками, наприклад, переходу на новий
рядок (аналог SHIFT + ENTER у WORD):
<br/> або <br>
Вставка пробілу
Теги нечутливі до регістрів: запис <B>
та <b> означає одне й те ж саме: текст
напівжирним шрифтом.
Контейнер
Контейнером называється парний тег,
який може містити інші теги.
<p><b> Вимоги до шкільної форми. </b></p>
Редактори HTML - документів
Notepad ++.
DreamWeaver
CodeLobster
Структура HTML документа
<html>
<head>
</head>
<body>
</body>
</html>
Для переходу між
рядками
використовується
клавіша “ENTER”;
Щоб зробити
відступи –
використовується
TAB
Основні теги
Парні теги <html> </html> вказують браузеру, що розпочався
HTML-документ.
Парні теги <head> </head> заголовок документу, невидима
частина (крім назви документу).
Містить: назву документу, прізвище
автора, опис сайту та ключові слова,
тобто інформацію для пошукових
машин
Теги заголовку документу:
1)Назва документу
<head>
<title>Назва документу</title>
</head>
Теги заголовку документу:
2)метатег поточного кодування
символів у WEB-сторінці
<head>
<title> Перша HTML-сторінка
</title>
<meta http-equiv="Content-Type"
content="text/html";
charset="windows-1251">
</head>
Теги заголовку документу:
3)метатег опису змісту
документу
<head>
<title> Перша HTML-сторінка </title>
<meta name="description"
content=«Введення та форматування
тексту в HTML">
</head>
Теги заголовка документу
4)метатег ключових слів
<head>
<title> Перша HTML-сторінка
</title>
<meta name="keywords"
content="урок інформатики,
HTML, заголовок, метатег, тег, META,
форматування тексту">
</head>
5)Метатег “Автор”
<head>
<title> Перша HTML-сторінка </title>
<meta name="Author"
Content="Прізвище автора">
</head>
<head>
<title> Перша HTML-сторінка </title>
<meta http-equiv="Content-Type"
content="text/html"; charset="utf-8">
<meta name="description" content="
Введення та форматування тексту в HTML">
<meta name="keywords" content="урок
інформатики, HTML, заголовок, метатег, тег,
форматування тексту">
<meta name="Author" Content="Прізвище
автора">
</head>
“Тіло” HTML – документу: визначає
зміст та вигляд видимої частини
документу.
<body> </body>
Може містити атрибути, наприклад,
фон документу:
<body bgcolor="#FFFFFF"> - фон білого
кольору.
Колір тексту в документі:
<body text="#000000"> чорний колір
тексту (за замовченням)
Кольорова модель RGB
Модель кольорів RGB
(Red, Green, Blue)–
задається у 16-ковій
системі числення
(0,1,…,9, A,B,C,D,E,F), під
кожен колір – 1 байт).
Діапазон: 00 – FF (0 –
255)
Таблиця основних кольорів у
HTML
Таблиця основних кольорів у
HTML (словесні позначення)
Отже, запис
<body bgcolor="#FFFFFF">
ідентичний запису
<body bgcolor="WHITE">
Фон документу – з файлу
Можна підготувати зображення,
яке буде фоном документу:
<body background="fon.gif">
Як подивитись номер
кольору RGB - палітри
За допомогою графічного редактору
для створення WEB – сторінок –
програми
Macromedia
Fireworks
Як подивитись номер
кольору RGB - палітри
За допомогою графічного редактору
Adobe
Photoshop
Основні теги форматування
документу
<pre>Т е к с т </pre> зберігає
попереднє форматуваня тексту,
включаючи всі пробіли
<h1>Текст </h1> - Слово
«Текст» буде найбільшим заголовком
(24 пункта, де 1 пункт = 0,3527 мм )
<h2>Текст </h2> заголовок
меншого розміру, ніж h1(18 пунктів)
Основні теги форматування
документу – розмір тексту
<h3></h3>, <h4></h4>,
<h5></h5> - теги заголовків
проміжних розмірів
<h6>
</h6> найменший заголовок
Текст
<big> Текст </big> збільшує розмір
шрифта
<small> Текст </small> зменшує
розмір шрифта
Вставка нового абзацу
<P> Цей текст буде
відокремлюватися пустими
рядками зверху та знизу</P>
Основні теги форматування
документу – стилі написання
<i> Текст </i> курсив
Фізичне
форматуван
<b> Текст </b> жирний текст
ня
Для пошукових роботів (логічне
форматування):
<em> Текст </em> курсив (важливий
текст)
<strong> Текст </strong> жирний
текст(дуже важливий текст)
Основні теги форматування
документу – стилі написання
<kbd> Текст </kbd> Створює
текст, який імітує стиль друкарської
машинки
<u> Текст </u> Створює текст з
підкреслюванням
<strike> Текст </ strike >
Закреслює текст горизонтальною
лінією
Основні теги форматування
документу - індекси
<sup> Текст </sup> Верхній індекс
результат: e=mc2
<sub> Текст </sub> Нижній індекс
результат: H2O
Виділення блоку тексту
Виділяє текст за допомогою відступів
зліва, справа, зверху та знизу
Синтаксис:
<blockquote> Текст </blockquote>
Використовується для виділення цитат
Зміна властивостей шрифту
<font> - контейнер для зміни
характеристик шрифта, таких як
розмір, колір та гарнітура
Синтаксис
<font> Текст </font>
Зміна властивостей шрифту
Атрибуты тегу <font>:
color
Встановлює колір тексту.
face
Визначає гарнітуру шрифта (з засічками
– Times New Roman та без засічок –
Arial).
size
Задає розмір шрифта (від 1 до 7, за
замовченням розмір шрифта=3).
Зміна властивостей шрифту приклад
<body>
<font size="5" color="blue"
face="Arial">П</font>ерша літера
цього речення написана шрифтом Arial,
виділена синім кольором та збільшена у
розмірі.
</body>
http://www.wisdomweb.ru/HTML/htmlfirst.php - онлайн-редактор
Вирівнювання тексту (за
замовченням – по лівому краю)
виконується по лівому краю, правому
краю, по центру або по ширині.
Використовується 3 способи:
За допомогою тега абзацу <p> з
атрибутом align
За допомогою тега виділення <div> з
аналогічним атрибутом align
По центру – за допомогою тега
<center>Текст</center>
Вирівнювання тексту
<p>Текст</p> - додає новий абзац тексту
з відступами зверху та знизу.
<p align="center">Текст</p> - по центру
<p align="left">Текст</p> по лівому краю
<p align="right">Текст</p> по правому
краю
<p align="justify">Текст</p> по ширині
<div align="center">Текст</div> по центру
<div align="left">Текст</div> по левому
краю
<div align="right">Текст</div> по правому
краю
<div align="justify">Текст</div> по ширині
Вставка графічних файлів
Тег <img> використовується для
вставки на веб-сторінку зображень
у графічному форматі GIF, JPEG
или PNG.
Цей тег має єдиний
обов’язковий атрибут src, який
визначає адресу файлу з
картинкою, наприклад:
<img src="images/home.png">
Вставка графічних файлів –
атрибут alt (альтернативний
текст)
Синтаксис:
<img src="URL" alt="альтернативний
текст">
Приклад:
<img src="images/home.png"
alt=“Повернутися на головну
сторінку">
Вставка графічних файлів –
ширина та висота зображення
<body>
<p>
<img src="sample.gif" width="350"
height="250" alt=“малюнок">
</p>
Як відключити завантаження
малюнків у Google Chrome
Інструменти –
параметри –
Додаткові –
Особисті дані:
налаштування
контента –
Малюнки:
показувати всі або
Не показувати
Рамка навколо зображення
<img border="товщина рамки у
пікселах">
Приклад:
<p>
<img width="130" height="154"
src=“rose.jpg" alt=“троянда"
border="6"/>
</p>
Вигляд у браузері
Вирівнювання малюнків та їх
положення щодо тексту.
<img align=" right | left | bottom | middle |
top"> - можливі значення параметру
вирівнювання
<p>
<img width="130" height="154"
src=“rose.jpg" alt=“Троянда"
align="right"/>Цей текст обтікає малюнок по
його лівому краю.
</p>
Вигляд у браузері
Вирівнювання малюнків та їх
положення щодо тексту.
<p>
<img width="130" height="154"
src=“rose.jpg" alt=“Троянда"
align=“left"/>Цей текст обтікає
малюнок по його правому краю.
</p>
Вигляд у браузері
Вирівнювання малюнків та їх
положення щодо тексту.
<p>
<img width="130" height="154"
src=“rose.jpg" alt=“Троянда"
align=“bottom"/>Малюнок
вирівнюється по нижньому краю
рядка тексту.
</p>
Вигляд у браузері
Вирівнювання малюнків та їх
положення щодо тексту.
<p>
<img width="130" height="154"
src=“rose.jpg" alt=“Троянда"
align=“midlle"/>Малюнок вирівнюється
по середині рядка тексту.
</p>
Вигляд у браузері
Вирівнювання малюнків та їх
положення щодо тексту.
<p>
<img width="130" height="154"
src=“rose.jpg" alt=“Троянда"
align=“top">Малюнок вирівнюється по
верхньому краю рядка тексту.
</p>
Вигляд у браузері
Відступи навколо зображення
Можна створити відступи по горизонталі
та вертикалі навколо зображення (між
малюнком та текстом):
<img hspace="відступ по горизонталі">
<img vspace="відступ по вертикалi">
Приклад коду
<p>
<img width="130" height="154"
src=“rose.jpg" alt=“троянда"
vspace="7" hspace="10">
відступи навколо рамки
</p>
Вигляд у браузері
Використання тегу <br/> для
переривання обтікання
зображень текстом
<img width="130" height="154"
src=“rose.jpg" alt=“Троянда" >Текст1
<br clear=left>Текст2
Текст, від якого малюнок був зліва,
переривається та продовжується під
малюнком.
Вигляд у браузері
Вигляд у браузері
Використання тегу <br/> для
перериванняобтікання
зображень текстом
<img width="130" height="154"
src=“rose.jpg" alt=“Троянда" >
<br clear=all>Текст
Текст розташований після малюнку.
Вставка горизонтальної лінії
<hr> - одиночний тег
Атрибути:
<hr width="число"> ширина у
пікселах або в процентах (100% - по
всій ширині вікна браузера)
<hr size="число"> товщина у
пікселах
Вставка горизонтальної лінії
<hr color="колір"> - можна задати
колір (16-ковий код або назва)
<hr noshade> - відмінити тривимірні
ефекти
<hr align="center | left | right"> вирівнювання у вікні браузера
Приклади горизонтальних
ліній
<hr width="3" size="50%">
<hr width="400" size="15" >
<hr width="300">
Як подивитись в браузері
HTML - документ
Набрати HTML – документ у Блокноті.
Зберегти його з розширенням *.html
Відкрити файл в браузері.
Після внесення змін у Блокноті,
натисніть кнопку F5
('перезавантажити') в браузері, щоб
побачити ці зміни реалізованими в
HTML-документі.