1-3_Введение в язык разметки HTML.ppt
- Количество слайдов: 83
Проектирование и сопровождение Интернет-систем Введение в язык разметки HTML Версии HTML, Теги HTML: оформление текста, рисунки, гиперссылки, списки таблицы, формы
2 Общая информация Виды занятий и контроля по МДК: n Длительность МДК – 2 семестра В текущем семестре: n Лекции – 4, 5 пар в неделю n Лабораторные работы – 2 пары в неделю, n Контрольные работы – 2(? ) n Диф. зачет
3 Лабораторные работы Интерактивные онлайн-курсы на Html. Academy. ru n 18 бесплатных разделов с заданиями (9 обязательных) n
4 Что планируется изучить HTML n CSS n Java. Script n PHP n Денвер (Denwer) n CMS Joomla n
5 Язык разметки HTML Hyper. Text Markup Language — «язык разметки гипертекста»
6 Документ HTML Файл с расширением htm или html n Имя – произвольное, но если это стартовая страница сайта (раздела сайта), то – index. html или main. html (пример) n
7 HTML Основным форматом представления документов в сети Интернет является язык гипертекстовой разметки HTML (стандартный язык разметки документов во Всемирной паутине). HTML – это определенная совокупность правил (тегов), по которым оформляется документ. Теги показывают Интернет-браузеру, как следует отображать текст на Web -страничке. Структура тега (пары тегов) всегда такова: <название тега> … название тега> Теги могут содержать атрибуты, характеризующие отображение информации внутри тега.
8 Тэги Тэг – это команда языка HTML, которую выполняет браузер: • непарные тэги вставить рисунок • парные тэги (контейнеры) открывающий
9 Общее представление о языках разметки HTML, XHTML ЭВОЛЮЦИЯ ЯЗЫКОВ РАЗМЕТКИ. 1986 ISO-8879 SGML 1991 CERN HTML 1994 HTML 2. 0 2000 XHTML 1. 0 2014 HTML 5 + CSS 3 Март 1995 HTML 3 + CSS 24 декабря 1999 HTML 4. 01 Декабрь 1997 HTML 4. 0 + CSS 2. 0 Январь 1997 HTML 3. 2
10 Отличия версий HTML n n n Каждая новая версия включала дополнительные теги и атрибуты, некоторые признавались устаревшими Но основная тенденция развития языка HTML заключалась в стандартизации синтаксиса и верстки HTML-документа. Из-за многочисленных условностей при верстке допускалось большое количество ошибок. Было принято решение бороться с этим. В результате синтаксис языка HTML стал более строгим. HTML 5 отличается от XHTML 1. 0 только наличием новых тегов
11 Выбираем !DOCTYPE Каждый HTML-документ должен начинаться со строки !DOCTYPE. Она говорит браузеру, какую версию HTML использовали при создании HTMLстраницы. n Если не указать – разные браузеры будут вести себя по разному n Для HTML 5: n
12 Виды !DOCTYPE n n n — DOCTYPE для стандарта HTML 4. 01 Strict — DOCTYPE для стандарта XHTML 1. 0 Strict; Разновидность Strict (строгий) используется в том случае, если код документа полностью соответствует выбранной версии HTML. В Strict оформление и содержание полностью разделены между HTML и CSS.
13 Виды !DOCTYPE n n — DOCTYPE для стандарта HTML 4. 01 Transitional — DOCTYPE для стандарта XHTML 1. 0 Transitional - является переходный вариант от прошлой версии языка HTML к новой. Если в новой версии HTML какие-то теги были признаны устаревшими, то в стандарте Transitional они по-прежнему остаются рекомендуемыми для применения.
14 Виды !DOCTYPE n n n — DOCTYPE для стандарта HTML 4. 01 Frameset (с фреймами); — DOCTYPE для стандарта XHTML 1. 0 Frameset (с фреймами); Разновидность Frameset аналогична Transitional, кроме того, в Frameset также разрешено применять теги для создания фреймов.
15 Виды !DOCTYPE n — DOCTYPE для стандарта XHTML 1. 1.
Структура Web-страницы
HTML-код страницы помещается внутрь контейнера …17 Простейшая Web-страница first. html шапка ( «голова» )
Создание файла веб-страницы Открыть Notepad++ и введите туда следующий текст:
19 ПО для верстки
20 Редакторы для верстки n n n Конечно, сверстать HTML-документ можно и в Блокноте… Раньше это считалось верхом профессионализма. Сейчас же это считается верхом глупости Основное достоинство таких редакторов - подсветка HTML- кода, что позволяет сразу определить, где в коде находится ошибка Это позволяет минимизировать количество ошибок в HTML-документе и упростить его создание
21 Редакторы для верстки Notepad++ n php. Designer. Pro n Adobe Dreamweaver n Hotdog n HTML Pad n Edit Plus n… n
22 Валидаторы n n n Валидаторы — сервисы Интернета, проверяющие HTML-документ на ошибки и следование правилам выбранного DOCTYPE Как правило, большинство ошибок в HTMLдокументе не сказываются на его отображении в браузерах. Валидатор предназначен прежде всего для разработчиков сайтов Наиболее популярным валидатором является сервис http: //validator. w 3. org Программа Tidy - ее можно скачать с сайта http: //tidy. sourceforge. net
23 Теги HTML
24 Теги В языке HTML все, что вводится в HTMLдокументе, будет выводиться на экран браузера сплошным текстом, то есть: n переводы строк игнорируются и не влияют на отображение текста браузером n несколько идущих подряд пробелов заменяются одним n если браузер встретит какой-либо неизвестный ему тег, то проигнорирует его
25 Типы тегов (на основе назначения тега либо его поведения) n Теги верхнего уровня — теги, из которых состоит базовая структура документа — его каркас, то есть определяющие раздел заголовка и тела документа: html, head, body n Теги заголовка документа — к данной группе относятся все теги, которые указываются внутри тега head: title, meta, link
26 Типы тегов n n Блочные элементы — в данный тип входят все теги, которые занимают всю доступную ширину экрана, независимо от того, сколько текста и других элементов находится внутри тега: blockquote, div, h 1, h 2, h 3, h 4, h 5, h 6, hr, p, pre Любой тег, идущий за блочным тегом, будет отображаться с новой строки
27 Типы тегов n n Встроенные (строчные) элементы — в отличие от блочных, теги данного типа занимают лишь ту ширину экрана, которая им реально нужна; при этом следующий за ними встроенный элемент на новую строку не переносится: a, b, big, em, i, img, small, span, strong, sub, sup Универсальные элементы — теги данного типа могут быть как блочными, так и строчными: del, ins
28 Типы тегов n n n Списки — в данную группу тегов входят все теги, которые применяются для создания нумерованных либо ненумерованных списков: ul, ol, li, dd, dt, dl Таблицы — в данную группу входят теги, предназначенные для создания таблиц: table, thead, tbody, td, th, tr Фреймы — все теги, предназначенные для создания фреймов (области внутри HTMLдокумента, в которые загружается другой HTML-документ): frame, frameset, iframe
29 Блочные и строчные теги Характеристики Блочный тег Строчный тег Какие теги могут Как блочные, Только строчные находиться внутри так и строчные данных тегов? Тег начинается с новой строки? Да, всегда Теги занимают всю Да доступную ширину окна браузера? Нет, переносятся на новую строку, только если на предыдущей нет места либо если предыдущий тег — блочный Нет, их ширина равна ширине содержимого плюс размеры заданных отступов, полей и границ
30 Атрибуты и их значения Внутри одинарного или открывающего тега могут находиться атрибуты и их значения: <тег атрибут1="значение 1" атрибут2="значение 2"> текст тег> n Атрибуты уточняют функциональность тега n Порядок расположения атрибутов в теге ни на что не влияет n
31 Атрибуты и их значения В XHTML каждый атрибут обязан иметь значение n Значения атрибута - либо определенные ключевые слова, либо любой пользовательский текст n Значение атрибута указывается в кавычках ' (одинарных) или " (двойных). В других кавычках ( `, ‘, “, «, » ) - нельзя
Пример текста n32 Типы значений атрибутов Задающие цвет: n специальное ключевое слово: black, blue и т. д. n шестнадцатеричный код цвета: #ff 0000 (красный), #000000 (черный) и т. Д Задающие размер: n просто целое число (размер в пикселах) n целое число от 1 до 100 в процентах, определяющее размер элемента относительно размера родительского элемента либо окна браузера
33 Типы значений атрибутов Задающие адрес в Интернете: n абсолютный адрес — http: //microsoft. com, http: //mail. ru/content. html n относительный адрес — /content. html, . . /css/style. css Различные ключевые слова (selected, none и т. д. )
34 Основной синтаксис XHTML-документ обязательно должен начинаться с DOCTYPE n Все теги и атрибуты должны записываться строчными буквами (в нижнем регистре), так как язык XHTML регистрозависим n Любые значения атрибутов необходимо заключать в кавычки n Все парные теги должны иметь закрывающий тег n Все одинарные теги должны завершаться слешем перед закрывающей скобкой:
, , ,
, n
35 Основной синтаксис XHTML n n n Каждый тег должен быть корректно вложен в другой Сокращенные атрибуты (без значения) запрещены; для них в качестве значения обязательно нужно указывать название атрибута: checked="checked", compact="compact", disabled="disabled" Непосредственно внутри тега body не должно быть ни текста, ни изображений. Они должны находиться внутри парных тегов span, div, списков или таблиц
36 Web-страницы. Язык HTML Оформление текста
37 Заголовки: h 1 … h 6
Абзацы • переход на новую строку И вечный бой! Покой нам только снится
Сквозь кровь и пыль. . .
Летит, летит степная кобылица
И мнет ковыль. . . • абзац (с отступами)
Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.
До самого вечера тело с варежками. . .
38
39 Физическая разметка Курсив (italic) Вася Жирный (bold) Вася Вася Вася Верхний индекс Вася2 (superscript) Нижний индекс Вася2 (subscript) Подчеркивание Вася Зачеркивание Вася Вася 2 Вася
40 Оформление текста • Вывод «как есть»
И вечный бой! Покой нам только снится Сквозь кровь и пыль. . . Летит, летит степная кобылица И мнет ковыль. . .• Комментарии
Одно физическое тело захотело поменять три своих старых варежки на что-нибудь хорошее.
41 Контейнеры Тег div n Блочный тег, который служит для единственной цели — быть контейнером, в котором могут находиться другие теги, изображения или текст. n Вам нужно установить фон или границу для отдельного участка веб-страницы? n Поместите нужный участок в тег div, после чего установите фон и/или границу для этого div. Тег span n То же что и тег div, но является строчным, т. е. не требует для себя всей ширины окна браузера. Ему n достаточно лишь той ширины, которую физически занимают все элементы, находящиеся в нем.
42 Атрибут title Позволяет добавить описание к любому элементу веб-страницы, в виде всплывающей подсказки n Это необязательный атрибут n Атрибут title можно использовать практически для любого тега, который может быть вложен внутрь тега body n
43 Специальные символы Символ HTML-код Название – — (длинное) тире неразрывный пробел © © символ авторского права « « левая русская кавычка » » правая русская кавычка ® ® зарегистрированная торговая марка ° ° градус ² &sup 2; квадрат ³ &sup 3; куб ¼ &frac 14; четверть ½ &frac 12; половина × × знак умножения ÷ ÷ знак деления https: //html 5 book. ru/specsimvoly-html/#part 1
44 Web-страницы. Язык HTML Рисунки, видео, аудио
Форматы рисунков GIF (Graphic Interchange Format) • сжатие без потерь • прозрачные области • анимация • только с палитрой (2… 256 цветов) рисунки с четкими границами, мелкие рисунки JPEG (Joint Photographer Expert Group) • сжатие с потерями • только True Color (16, 7 млн. цветов) • нет анимации и прозрачности рисунки с размытыми границами, фото PNG (Portable Network Graphic) • • • сжатие без потерь с палитрой (PNG-8) и True Color (PNG-24) прозрачность и полупрозрачность (альфа-канал) нет анимации плохо сжимает мелкие рисунки 45
" src="https://present5.com/presentation/170893787_442289416/image-46.jpg" alt="46 Тег img 46 Тег img
47 Рисунки в документе из той же папки: image (изображение) source (источник) из другой папки: с другого сервера:
n width, height —" src="https://present5.com/presentation/170893787_442289416/image-48.jpg" alt="48 Атрибуты тега img n width, height —" /> 48 Атрибуты тега img n width, height — ширина или высота задается в пикселах n src — url картинки n alt — альтернативный текст, который выводится, если изображение не загрузилось
n autoplay — проигрывание при загрузке страницы n" src="https://present5.com/presentation/170893787_442289416/image-49.jpg" alt="49 Аудио n autoplay — проигрывание при загрузке страницы n" /> 49 Аудио n autoplay — проигрывание при загрузке страницы n controls — панель управления плеером n loop — автоповтор n preload — загрузка файла вместе с загрузкой страницы n src — путь до трека
51 Web-страницы. Язык HTML Гиперссылки
52 Ссылки на другие страницы сайта • страница в той же папке anchor (якорь) Таблицы hyper reference (гиперссылка) • страница во вложенной папке Пример • страница в соседней папке Текст выйти из текущей папки
53 Примеры (ссылки из файла rock. html) – – stories story. html novels list. html new rock. html sea. html old verse. html
54 Ссылки на другие сайты • на главную страницу сайта Почта index. htm, index. html, default. asp, … • на конкретную страницу сайта (URL) Васин текст • на файл для скачивания Скачать
Глава 1 Глава 1
55 Ссылки внутри страницы переход на метку Глава 1 Глава 2 метка (якорь)
Напишите мне! Другие протоколы: ftp:" src="https://present5.com/presentation/170893787_442289416/image-56.jpg" alt="56 Запуск почтовой программы Напишите мне! Другие протоколы: ftp:" /> 56 Запуск почтовой программы Напишите мне! Другие протоколы: ftp: //, file: , . . .
я ссылка атрибут" src="https://present5.com/presentation/170893787_442289416/image-57.jpg" alt="57 Варианты открытия ссылки n n n я ссылка атрибут" /> 57 Варианты открытия ссылки n n n я ссылка атрибут target — имя окна или фрейма, куда браузер будет загружать документ _blank – в новой вкладке/окне _self – в том же окне, что и ссылка _parent – (с фреймами) в родительском фрейме _top - (с фреймами) в текущем окне, заменяя собой все фреймы
58 Web-страницы. Язык HTML Списки
59 Списочные элементы
- - пронумерованный перечень элементов (ordered lists) n
- - отдельный пункт списка n
- - маркированный перечень элементов (bulleted lists) n
60 Списочные элементы Нумерованный:
- text 1
- text 2
- text 3
- text 4
- text 1
- text 2
- text 3
- text 4
61 Web-страницы. Язык HTML Таблицы
62 Теги для таблицы n n n В тег
и | для описания заголовков ячеек данных и самих данных ячейки, соответственно Другие не обязательные элементы позволяют описывать название таблицы |
---|
64 Таблицы
… | . . |
---|
. . |
ФИО | " /> 65 Задание HTML таблицы
---|
ФИО | Должность | Иванов А. П. | программист | Петров В. А. | проектировщик |
---|
66 Таблицы. Объединение ячеек
67 Описание структуры страницы с помощью таблиц n n n С помощью таблиц можно создать хорошую схему (планировку таблицы) (4 слайд 44) Не обязательно рисовать саму таблицу (толщина линии может быть = 0). Но таблицы позволяет задавать взаимное расположение элементов страницы относительно друга (что находится слева, справа и снизу, сверху). Однако, таблицы имеют следующие недостатки: n Таблицы требуют добавления большого количества кода. n Таблицы трудно удалить или изменить.
Разметка на основе таблиц Сделать самим 68
69 Web-страницы. Язык HTML Формы
70 Формы HTML Используются для описания частей страницы в которой пользователь может просматривать имеющиеся данные, корректировать и вводить новые данные n С помощью форм выполняется сбор данных, вводимых пользователем для взаимодействия c Web-приложением Типичные примеры форм: n поиск по сайту n отправки сообщения админу n регистрации на сайте n опросы n
71 Формы HTML n Функциональность форм обеспечивается через языки Java. Script и/или PHP n Формы в HTML могут состоять из: n Текстовых полей n Текстовых областей n Раскрывающихся списков n Кнопок n Флажков n Переключателей
72 Формы HTML n n Форма задается парным блочным тегом
73 Описание формы в HTML n n n Форма задается парным блочным тегом
method - метод посылки запроса с данными из формы: n get: данные из формы добавляются в конец URL n post: данные из формы добавляется в заголовок запроса action - описывает URL, который будет вызываться для обработки данных формы" src="https://present5.com/presentation/170893787_442289416/image-74.jpg" alt="74 Элементы формы n Многие элементы формы создаются тегом " /> 74 Элементы формы n Многие элементы формы создаются тегом Типы управляющих элементов n Кнопки «Передать» (type=“submit”) n Кнопки «Очистить» (type=“reset”) n Кнопки (type=“button”) n Кнопки-картинки (type=“image”) n Поля ввода (type=“text”) n Пароли (type=“password”) n Переключатели (type=“radio”) n Флажки (type=“checkbox”) n Скрытый (type=“hidden”)