Разделы презентаций

HTML

Содержание

Тіло документу складається з:ієрархічних контейнерів та заставок;заголовків (от Н1 до Н6); блоків (списки, форми, таблиці, малюнки та ін.);горизонтальних ліній; тексту, розбитого на блоки дії стилів (підкреслення, виділення, курсив);математичних описів, графіки и

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

Слайд 1Мова HTML
Лекція №3

Камінський О.Є курс Веб-дизайн

Мова HTML Лекція №3Камінський О.Є курс Веб-дизайн

Слайд 2Тіло документу складається з:
ієрархічних контейнерів та заставок;
заголовків (от Н1 до

Н6);
блоків (списки, форми, таблиці, малюнки та ін.);
горизонтальних ліній;
тексту,

розбитого на блоки дії стилів (підкреслення, виділення, курсив);
математичних описів, графіки и гіпертекстових посилань.

Тіло документу складається з:ієрархічних контейнерів та заставок;заголовків (от Н1 до Н6); блоків (списки, форми, таблиці, малюнки та

Слайд 3Формати графічних файлів
GIF (Graphic Interchange Format)
2, 4, 8, … 256

цветов
стиснення без втрати якості
прозрачний колір
анімація
JPEG (Joint Photographic Expert Group)
16 млн.

кольорів або 256 відтінків сірого
стиснення з втратами
PNG (Portable Network Graphic)
альтернатива GIF, 48-бит колір
стиснення без втрат
- alpha-канал

Формати графічних файлівGIF (Graphic Interchange Format)2, 4, 8, … 256 цветовстиснення без втрати якостіпрозрачний коліранімаціяJPEG (Joint Photographic

Слайд 4Таблиці
            A1 B1 C1  

              A2 B2

C2

Таблиці             A1 B1 C1        

Слайд 5Теги для створення таблиць
TABLE Створення таблиці
CAPTION Задає заголовок таблиці
TR Створення нового

рядка (строки) ячеєк таблиці
TD и TH Створення ячейки з даними

в поточній строці

Таблиці в HTML формуються построчно. Спочатку за допомогою елементу TR необхідно створити рядок таблиці, у якому потім елементом TD створюються ячейки.

Теги для створення таблицьTABLE Створення таблиціCAPTION Задає заголовок таблиціTR Створення нового рядка (строки) ячеєк таблиціTD и TH Створення

Слайд 6Параметри тегів TR, TH, TD
ALIGN - визначає спосіб горизонтального вирівнювання

вмісту ячейки. Можливі значення: left, center, right. За умовчанням спосіб

вирівнювання визначається значенням параметра ALIGN елементу TR. Якщо ж і він не заданий, то для TD виконується вирівнювання по лівому краю, а для TH - центрування.
VALIGN - визначає спосіб вертикального вирівнювання вмісту ячейки. Можливі значення: top, bottom, middle. За замовченням відбувається вирівнювання по центру (VALIGN="middle"), якщо значення цього параметра не було задане раніше в елементі TR
WIDTH - визначає ширину ячейки. Ширіна задається в пікселах або в процентному відношенні до ширини таблиці.
HEIGHT - визначає висоту ячийки. Висота задається в пікселах або в процентному відношенні до ширини таблиці.
COLSPAN - визначає кількість стовпців, на які розтягнеться дана ячейка.
ROWSPAN - визначає кількість рядків, на які розтягнеться дана ячейка.
NOWRAP - блокує автоматичне перенесення слів в межах поточної ячейки.
BGCOLOR - визначає колір фону ячейки.
BACKGROUND - заповнює ячейку фоновим малюнком. Необхідно вказати URL малюнка.
Параметри тегів TR, TH, TDALIGN - визначає спосіб горизонтального вирівнювання вмісту ячейки. Можливі значення: left, center, right.

Слайд 7Злиття ячєєк
            HDD  

      WD Caviar 3.1Gb85$        

        Quantum FB ST 6.4Gb110$    
Злиття ячєєк             HDD         WD Caviar 3.1Gb85$

Слайд 8Злиття ячєєк
            Video

                Matrox G400

ALIGN="right">115$                 Voodoo III129.95$    
Злиття ячєєк             Video        

Слайд 9Гіперпосилання
HREF - визначає текст, що знаходиться між початковим

і кінцевим тегами, або зображення, як гіпертекстове заслання (URL, або

лінк) на документ (і область документа), вказаний в значенні даного параметра. Можливі значення:
http://... - створює посилання на www-документ;
ftp://... - створює посилання на ftp-сайт або розташований на ньому файл;
mailto:... - запускає поштову програму-клієнт із заповненим полем імені одержувача. Якщо після адреси поставити знак питання, то можна вказати додаткові атрибути, розділені знаком "&";
news:.. - створює посилання на конференцію сервера новин;
telnet://... - створює посилання на telnet-сессию з віддаленою машиною;
wais://... - створює посилання на WAIS - сервер;
gopher://... - створює посилання на Gopher - сервер;

Якщо тип з'єднання і адреса машини не вказані, як відправна крапка використовується адреса поточного документа. Це дозволяє використовувати відносні заслання. Наприклад, лінк
Документація
посилатиметься на файл title.html у підкаталозі docs (відносно поточного).

Гіперпосилання HREF - визначає текст, що знаходиться між початковим і кінцевим тегами, або зображення, як гіпертекстове заслання

Слайд 10Параметр TARGET
TARGET - визначає вікно(фрейм), на яке вказує гіпертекстове заслання.

Цей параметр використовується лише спільно з параметром HREF. Як значення

необхідно задати або ім'я якогось з існуючих фреймів, або одне з наступних зарезервованих імен:
_self - вказує, що визначений в параметрі HREF документ повинен відображуватися в поточному фреймі; _parent - вказує, що документ повинен відображуватися у фреймі-батьку поточного фрейма. Інакше кажучи, _parent посилається на вікно, FRAMESET, що містить, що включає поточний фрейм; _top - вказує, що документ повинен відображуватися у вікні-батьку всієї поточної феймовой структури; _blank - вказує, що документ повинен відображуватися в новому вікні.
Параметр TARGETTARGET - визначає вікно(фрейм), на яке вказує гіпертекстове заслання. Цей параметр використовується лише спільно з параметром

Слайд 11Мітки в документі
NAME - визначає область документу,

що знаходиться між початковим і кінцевим тегами, як можливий об'єкт

для заслання. Як значення потрібно латиницею написати будь-яке слово-покажчик, унікальне для даного документа.
Наприклад, мітка: Раздел1. Тепер ви можете посилатися на відмічену область простою вказівкою її імені після імені документа.
Наприклад, лінк Раздел1 відправить вас до розділу "part" файлу document.html,
а лінк В кінець документа - в розділ "bottom" поточного документа.
Мітки в документі NAME - визначає область документу, що знаходиться між початковим і кінцевим тегами, як можливий

Слайд 12Приклади

FTP-site
OpenGL




Історія ... Новини ... Повернутися до розділу

HREF="#history">історії

Відправити запрошення . авторам.
Приклади FTP-site OpenGL Історія ... Новини ... Повернутися до розділуісторії Відправити запрошення .

Слайд 13Відносна і абсолютна адресація
В поточному каталозі
В підкаталозі
В

підкаталозі
В надкаталозі
В паралельному каталозі
В іншій гілці каталога

HREF=“/dir/doc1.htm”>Від корневого каталогу
На диску
Відносна і абсолютна адресаціяВ поточному каталозіВ підкаталозіВ підкаталозіВ надкаталозі В паралельному каталозі В іншій гілці каталогаВід корневого

Слайд 14Атрибути
style = "опис_стілів" - локальні стилі
src = "адреса" - адреса

(URI) джерела даних (наприклад малюнка або скрипта)
align = "left |

center | right | justify" - вирівнювання, за замовчуванням left (по лівому краю)
width = "число" - ширина елемента (в пікселях, піках, поинтах та ін)
height = "число" - висота елемента (в пікселях, піках, поинтах та ін)
href = "адреса" - гіперпосилання, адресу (URI) на який буде виконаний перехід
name = "ім'я" - ім'я елемента
id = "ідентифікатор" - унікальний (в межах веб-сторінки) ідентифікатор елемента
size = "число" - розмір елемента
class = "імя_класса" - ім'я класу у вбудованій або пов'язаної таблиці стилів
title = "рядок" - назва елемента
alt = "рядок" - альтернативний текст
Атрибутиstyle =

Слайд 15Нові теги структури

Нові теги структури

Слайд 16HTML 5 приклад



(Это

title) Приклад сторінки на HTML5






Заголовок "h1" из hgroup


Заголовок "h2" из hgroup






HTML 5 приклад (Это title) Приклад сторінки на HTML5

Слайд 17HTML 5 приклад


Заголовок статті

з блоку "article"
Текст абзаца статті з блоку "article"



Блок "details", текст тегу "summary"

Абзац з блога "details"






Зміст абзацу з блока "footer"




HTML 5 приклад Заголовок статті з блоку

Слайд 18,




footer



Персональний сайт


Заходьте, будь

ласка!

Вітаємо вас на сайті




Copyright студент



, footer Персональний сайт Заходьте, будь ласка!

Слайд 19header
Визначає елементи, які відносяться до заголовка веб-сторінки в цілому або

конкретного розділу на ній. Зазвичай містить елементи заголовків, .

Але це не обов'язково.
може в собі містити практично будь-які інші теги:
Визначає елементи, які відносяться до заголовка веб-сторінки в цілому або конкретного розділу на ній. Зазвичай містить елементи заголовків,

. Але це не обов'язково.
може в собі містити практично будь-які інші теги:
, ,
і так далі
header Визначає елементи, які відносяться до заголовка веб-сторінки в цілому або конкретного розділу на ній. Зазвичай містить

Слайд 20Тег

header { display: block;

background: #00B0D8 url(images/header-gradient.png) repeat-x; }




Заголовок "h1" из hgroup


Заголовок "h2" из hgroup





Тег header { display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; }

Слайд 21Обхід браузерів, що не підтримують HTML 5
Даний приклад працюватиме

у всіх браузерах, окрім IE7 і IE8. Internet Explorer не

додає стиль до елементів, які не розуміє. Це непорозуміння можна виправити, якщо створити фіктивний елемент за допомогою JavaScript. Для цього включимо в такий код.


Обхід браузерів, що не підтримують HTML 5 Даний приклад працюватиме у всіх браузерах, окрім IE7 і IE8.

Слайд 22
Задає вміст сайту на зразок новини, статті, запису блогу, форуму

або ін.

charset="utf-8"> article

Слід


Історія про те, як біля їдальні з'явилися загадкові рожеві сліди з шістьма пальцями і чому це сталося.



Задає вміст сайту на зразок новини, статті, запису блогу, форуму або ін.

Слайд 23
Визначає блок, який не відноситься до основного контенту, для розміщення

рубрик, заслань на архів, міток і іншої інформації Такий блок,

якщо він розташовується збоку, називається, як правило, «сайдбар» або «бічна панель».
Визначає блок, який не відноситься до основного контенту, для розміщення рубрик, заслань на архів, міток і іншої

Слайд 24

Галілей
І все ж таки вона вертиться
Ньютон
Дія

дорівнює протидії

Галілей І все ж таки вона вертиться Ньютон Дія дорівнює протидії

Слайд 25
Теги визначають як раз діалоги.

Теги визначають як раз діалоги.

Слайд 26

figure {
background: #5f6a72; /* Колір

фону */
padding: 10px; /* Поля навколо */

display: block; /* Блочний елемент */
float: left; /* Блоки рівняються по горизонталі */
margin: 0 10px 10px 0; /* Відступи */
text-align: center; /* Вирівнювання по центру */
}
figcaption { color: #ffffff; /* Колір тексту */ }





Рис. 12. Голуба квітка


figure { background: #5f6a72; /* Колір фону */ padding: 10px; /* Поля навколо

Слайд 27
Тег помічає текст як виділений.



mark

{
background: #ffec82;
padding: 0 3px;
border:

1px dashed #333;
}




Следы невиданных зверей




История о том, как возле столовой появились загадочные розовые
следы с шестью пальцами, и почему это случилось.



Тег помічає текст як виділений. mark { background: #ffec82; padding: 0 3px; border:

Слайд 28




meter


Температура води

Низька
Нормальна

Горяча
Кіпяток


Атрибути
value Встановлює значення. Обов'язковий атрибут.
Min Задає мінімально можливе значення.
Max Задає максимально можливе значення.
Low Визначає межу, досягши якої значення вважається низьким.
High Визначає межу, досягши якої значення вважається високим.
Optimum Визначає найкраще або оптимальне значення.

meter Температура води Низька Нормальна Горяча Кіпяток Атрибутиvalue Встановлює значення. Обов'язковий атрибут.Min Задає

Слайд 29
Визначає час або дату в тексті:





charset="utf-8">
time

time { background: #f0f0f0; }




перший штучний супутник.


перший політ людини в космос.


висадка людей на Місяць.





Визначає час або дату в тексті: time time { background: #f0f0f0; }

Слайд 30
Використовується для відображення прогресу завершення задачі. Зміни значення відбуваються через

JavaScript.




progress


Будь ласка, почекайте, фотографії завантажуються.



Загружено на 25%



Використовується для відображення прогресу завершення задачі. Зміни значення відбуваються через JavaScript. progress Будь

Слайд 31




(Это title)

Приклад сторінки на HTML5



Термін
Пояснення терміну
- натисніть слово і разгорнеться пояснення


(Это title) Приклад сторінки на HTML5

Слайд 32


Скачайте відео по

посіланню

Скачайте відео по посіланню

Слайд 33Атрибути тега
AUTOPLAY – автоматичний запуск
CONTROLS – відображувати елементи управління
POSTER

– заміщаюче зображення
MUTED – звук за замовченням відключений
HEIGHT, WIDTH –

ширина, висота
LOOP – автоповтор
PRELOAD – автоматична буферизація при завантаженні сторінки
SRC – заслання на відеофайл
Атрибути тега AUTOPLAY – автоматичний запускCONTROLS – відображувати елементи управлінняPOSTER – заміщаюче зображенняMUTED – звук за замовченням

Слайд 34Відеокодеки

Відеокодеки

Слайд 35Множинні елементи SOURCE

/>


Скачайте

відео по посиланню

Множинні елементи SOURCE

Слайд 36



codecs=vorbis'>



Скачуйте музику.


Скачуйте музику.

Слайд 37, та JavaScript
Нові події тегів
Призначені для користувача елементи управління
Прокрутка,

сповільнене і прискорене відтворення
Додавання субтитрів до відео
Синхронізація декількох медіатреків
Відеоконференції

, та JavaScriptНові події тегівПризначені для користувача елементи управлінняПрокрутка, сповільнене і прискорене відтворенняДодавання субтитрів до відеоСинхронізація декількох

Слайд 38Тег




src="melody.mid" width="140" height="40" autostart="false">


Тег

Слайд 39Атрибути

Атрибути

Слайд 40API геолокації




function show_map(position) {
var latitude = position.coords.latitude;

var longitude = position.coords.longitude;
document.write("Широта: "+latitude+"
");
document.write("Долгота: "+longitude+"
");
}

function get_location()
{

navigator.geolocation.getCurrentPosition(show_map);
}


Ваші координати:





API геолокації function show_map(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; document.write(

Слайд 41Література

Література

Похожие презентации

ОБУЧЕНИЕ ГРАЖДАН ПРЕДПЕНСИОННОГО ВОЗРАСТА СОЮЗОМ Молодые профессионалы ОБУЧЕНИЕ ГРАЖДАН ПРЕДПЕНСИОННОГО ВОЗРАСТА СОЮЗОМ Молодые профессионалы 231
ГЕОПОЛИТИКА БОЛЬШИХ ПРОСТРАНСТВ ГЕОПОЛИТИКА БОЛЬШИХ ПРОСТРАНСТВ 186
Комплексные системы безопасности.ppt Комплексные системы безопасности.ppt 1060
Изложение Гуси летят Изложение Гуси летят 237
3 трусов - эл сети -задачи.ppt 3 трусов - эл сети -задачи.ppt 174
Історичні етапи розвитку д итячого та молодіжного руху в Україні Виконала: Історичні етапи розвитку д итячого та молодіжного руху в Україні Виконала: 248
5.2.1. Ассоциированные с мембраной белки (на примере RAS и SRC ) 5.2.1. Ассоциированные с мембраной белки (на примере RAS и SRC ) 303
ОСНОВЫ ОБЩЕЙ И КЛИНИЧЕСКОЙ ЦИТОЛОГИИ ОСНОВЫ ОБЩЕЙ И КЛИНИЧЕСКОЙ ЦИТОЛОГИИ 247
My little homeland My little homeland 201
Глава 10 Япония в АТР Глава 10 Япония в АТР 172
Элементы психотерапевтической работы в коучинге: модель консультативной Элементы психотерапевтической работы в коучинге: модель консультативной 193
04 04 163
МУЛЬТИМЕДИЙНАЯ ПРЕЗЕНТАЦИЯ НА ТЕМУ: МЕЖДУНАРОДНОЕ И НАЦИОНАЛЬНОЕ МУЛЬТИМЕДИЙНАЯ ПРЕЗЕНТАЦИЯ НА ТЕМУ: МЕЖДУНАРОДНОЕ И НАЦИОНАЛЬНОЕ 226
Муниципальное казенное дошкольное образовательное учреждение детский сад №20 Муниципальное казенное дошкольное образовательное учреждение детский сад №20 180
Информационная безопасность в виртуальном пространстве Информационная безопасность в виртуальном пространстве 209
Проблемы дефицита и профицита государственного бюджета на макоэкономическом уровне Проблемы дефицита и профицита государственного бюджета на макоэкономическом уровне 277
Портреты XX века Портреты XX века 202
Виды нарушений памяти.Когнитивные расстройства в практике врача-невролога Виды нарушений памяти.Когнитивные расстройства в практике врача-невролога 277
Метод наименьших квадратов (МНК) Метод наименьших квадратов (МНК) 278
Древняя Русь IX - XIII вв Древняя Русь IX - XIII вв 272

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.

Для правообладателей

Яндекс.Метрика