Основы языка HTML (Hyper Text Markup Language – язык разметки гипертекста ) - презентация

1 Основы языка HTML (Hyper Text Markup Language – язык разметки гипертекста )

2 Программное обеспечения для создания веб – страниц : Блокнот Microsoft FrontPage (Word, Publisher) Adobe Dreamweaver Xara Webstyle Xara ScreenMaker

3 Терминология Тег – оформленная единица HTML- кода. Например,,,, и так далее. Все тэги имеют одинаковый формат : они начинаются знаком " ". Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш "/". Желательно вводить все теги в нижнем регистре ( маленькими буквами ), хотя не обязательно. Пример : Крупный заголовок Заголовок чуть поменьше

4 Терминология Атрибут – это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки. Приведу пример : Крупный заголовок Заголовок чуть поменьше

5 Документ. Тег HTML. Тег HTML является контейнером, который заключает в себе всё содержимое веб - страницы, включая теги HEAD и BODY. Открывающий и закрывающий теги HTML в документе необязательны, но хороший стиль диктует непременное их использование.

6 Страница. Тег BODY. Элемент BODY предназначен для хранения содержания веб - страницы ( контента ), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. Параметры alink устанавливает цвет активной ссылки. background задает фоновый рисунок на веб - странице. bgcolor цвет фона веб - страницы. link цвет ссылок. text цвет текста в документе. vlink цвет посещенных ссылок.

7 1 Параметр TEXT Описание Устанавливает цвет текста, используемого на веб - странице по умолчанию. Цвета отдельных элементов можно легко изменять с помощью стилей. Синтаксис... 2 Параметр BGCOLOR Описание Устанавливает цвет фона веб - страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку Синтаксис... 3 Параметр BACKGROUND Описание Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб - страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей. Синтаксис...

8 4 Параметр LINK Описание Устанавливает цвет не посещенных ссылок. Синтаксис... 5 Параметр ALINK Описание Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры. Синтаксис... 6 Параметр VLINK Описание Определяет цвет посещенных ссылок, т. е., таких ссылок, на которые пользователь уже « нажимал ». Синтаксис...

9 Шрифт. Тег BASEFONT Описание Тег BASEFONT предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всём документе за исключением тега FONT, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере HEAD или BODY, причем несколько раз. Это позволяет изменять вид шрифта для части документа. Синтаксис Закрывающий тег Не требуется. Параметры color цвет текста. face шрифт текста. size размер шрифта. Пример 1. Использование тега BASEFONT Добро пожаловать на мою страничку, которая оформлена с использование тега BASEFONT Цвет изменен с помощью тега FONT

10 Ссылки. Тег Описание Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб - страницы. Синтаксис Закрывающий тег Обязателен. Параметры href задает адрес документа, на который следует перейти. name устанавливает имя якоря внутри документа. target имя окна или фрейма, куда браузер будет загружать документ. Пример : Посмотрите на мою фотографию ! Как сделать такое же фото ?

11 Изображения. Тег IMG Описание Тег IMG предназначен для отображения на веб - странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег IMG в контейнер A. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=0 в тег IMG. Рисунки также могут применяться в качестве карт - изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Синтаксис Закрывающий тег Не требуется. Параметры align определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt альтернативный текст для изображения. border толщина рамки вокруг изображения. height высота изображения. hspace горизонтальный отступ от изображения до окружающего контента. src путь к графическому файлу. vspace вертикальный отступ от изображения до окружающего контента. width ширина изображения. Пример 1. Использование тега IMG

12 Таблица. Тег Описание Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD. Внутри TABLE допустимо использовать следующие элементы : CAPTION, COL, COLGROUP, TBODY, TBODY, TD, TFOOT, TH, THEAD и TR. Таблицы с невидимой границей долгое время использовались для верстки веб - страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев. Синтаксис... Закрывающий тег Обязателен. Параметры align определяет выравнивание таблицы. background задает фоновый рисунок в таблице. bgcolor цвет фона таблицы. border толщина рамки в пикселах. bordercolor цвет рамки. cellpadding отступ от рамки до содержимого ячейки. cellspacing расстояние между ячейками. cols число колонок в таблице. height высота таблицы. rules сообщает браузеру, где отображать границы между ячейками. width ширина таблицы.

13 Таблица. Тег Описание Тег TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег TH должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE. Синтаксис...

14 Таблица. Теги и Описание Тег TR служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега TH или TD. Синтаксис... Описание Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE. Синтаксис...

15 Таблица. Пример. Пример 1. Использование тега CAPTION Таблица 1. Название таблицы Чебурашка Крокодил Гена Шапокляк Съел, кг Выпил, л 6 8 2

16 Таблица цветов

17

18

19

20 Указания по созданию сайта Ваш сайт должен содержать не менее 4 страниц Главная страница содержит вашу фотографию, информацию о вас и о содержании сайта Меню сайта должно быть оформлено в таблице с невидимыми границами (border = 0) Все страницы должны содержать меню сайта, изображения, текст, оформленный цветом, начертанием и т. д. Хотя бы на одной странице сайта должна быть таблица

21 Темы для разработки сайтов : 1. Этапы становления космонавтики в России 2. Этапы становления космонавтики в мире 3. Космические технологии современности 4. Использование космических технологий в жизни 5. С. П. Королев 6. А. Ю. Гагарин 7. Белка и Стрелка – космические собаки 8. Первые космонавты СССР 9. Женщины – космонавты СССР 10. Современные космонавты России 11. Современные космодромы 12. Космические путешественники 13. Мое созвездие 14. Классификация звезд 15. Классификация космических тел