HTML - презентация, доклад, проект скачать

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

Содержание ▲

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

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

Слайд 1

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

Мова HTML Лекція №3

Слайд 2

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

Тіло документу складається з: ієрархічних контейнерів та заставок; заголовків (от Н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-канал

Слайд 4

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

Таблиці A1 B1 C1 A2 B2 C2

Слайд 5

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

Теги для створення таблиць 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 малюнка.

Слайд 7

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

Злиття ячєєк

Слайд 8

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

Злиття ячєєк Video Matrox G400115$ Voodoo III129.95$

Слайд 9

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

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

Слайд 10

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

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

Слайд 11

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

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

Слайд 12

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

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

Слайд 13

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

Відносна і абсолютна адресація В поточному каталозі В підкаталозі В підкаталозі В надкаталозі В паралельному каталозі В іншій гілці каталога Від корневого каталогу На диску

Слайд 14

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

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

Слайд 15

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

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

Слайд 16

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

HTML 5 приклад (Это title) Приклад сторінки на HTML5 Заголовок "h1" из hgroup Заголовок "h2" из hgroup Перше посилання з блоку "nav" Друге посилання з блоку "nav"

Слайд 17

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

HTML 5 приклад Заголовок статті з блоку "article" Текст абзаца статті з блоку "article" Блок "details", текст тегу "summary" Абзац з блога "details" Зміст тега "time" блоку "footer" Зміст абзацу з блока "footer"

Слайд 18

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

, footer Персональний сайт Заходьте, будь ласка! Вітаємо вас на сайті Copyright студент

Слайд 19

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

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

Слайд 20

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

Тег header { display: block; background: #00B0D8 url(images/header-gradient.png) repeat-x; } Заголовок "h1" из hgroup Заголовок "h2" из hgroup

Слайд 21

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

Обхід браузерів, що не підтримують HTML 5 Даний приклад працюватиме у всіх браузерах, окрім IE7 і IE8. Internet Explorer не додає стиль до елементів, які не розуміє. Це непорозуміння можна виправити, якщо створити фіктивний елемент за допомогою JavaScript. Для цього включимо в такий код.

Слайд 22

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

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

Слайд 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. Голуба квітка

Слайд 27

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

Тег помічає текст як виділений. mark { background: #ffec82; padding: 0 3px; border: 1px dashed #333; } Следы невиданных зверей История о том, как возле столовой появились загадочные розовые следы с шестью пальцами, и почему это случилось.

Слайд 28

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

meter Температура води Низька Нормальна Горяча Кіпяток

Слайд 29

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

Визначає час або дату в тексті: time time { background: #f0f0f0; } 1957-10-04 перший штучний супутник. 1961-04-12 перший політ людини в космос. 1969-07-21 висадка людей на Місяць.

Слайд 30

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

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

Слайд 31

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

(Это title) Приклад сторінки на HTML5 Термін Пояснення терміну - натисніть слово і разгорнеться пояснення

Слайд 32

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

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

Слайд 33

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

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

Слайд 34

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

Відеокодеки

Слайд 35

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

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

Слайд 36

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

Слайд 37

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

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

Слайд 38

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

Тег

Слайд 39

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

Атрибути

Слайд 40

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

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

API геолокації 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); } Ваші координати: get_location();