Основы языка HTML (Hyper Text Markup Language – язык
advertisement
Основы языка HTML (Hyper Text Markup Language – язык разметки гипертекста) Программное обеспечения для создания веб – страниц: Блокнот Microsoft FrontPage (Word, Publisher) Adobe Dreamweaver Xara Webstyle Xara ScreenMaker Терминология Тег – оформленная единица HTML-кода. Например, <html >, <body>,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">".Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш "/". Желательно вводить все теги в нижнем регистре(маленькими буквами), хотя не обязательно. Пример : <h1> Крупный заголовок </h1> <h2> Заголовок чуть поменьше </h2> Терминология Атрибут –это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки. Приведу пример: <h1> Крупный заголовок </h1> <h2 align="center"> Заголовок чуть поменьше </h2> Документ. Тег HTML. Тег HTML является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги HEAD и BODY. Открывающий и закрывающий теги HTML в документе необязательны, но хороший стиль диктует непременное их использование. Страница. Тег BODY. Элемент BODY предназначен для хранения содержания веб-страницы (контента), отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера BODY. Параметры alink — устанавливает цвет активной ссылки. background — задает фоновый рисунок на веб-странице. bgcolor — цвет фона веб-страницы. link — цвет ссылок. text — цвет текста в документе. vlink — цвет посещенных ссылок. 1 2 3 • Параметр TEXT • Описание Устанавливает цвет текста, используемого на веб-странице по умолчанию. Цвета отдельных элементов можно легко изменять с помощью стилей. • Синтаксис <body text=цвет>...</body> • Параметр BGCOLOR • Описание Устанавливает цвет фона веб-страницы. Можно использовать этот параметр совместно с background, подобрав цвет фона близкий к фоновому рисунку • Синтаксис <body bgcolor=цвет>...</body> • Параметр BACKGROUND • Описание Определяет изображение, которое будет использоваться в качестве фонового рисунка. В отличие от обычных изображений, для фона не устанавливаются ширина и высота, и он всегда отображается в натуральную величину с масштабом 100%. Если рисунок по размеру меньше окна браузера, то картинка повторяется по горизонтали вправо и вниз, выстраиваясь, как мозаика. По этой причине на месте стыка фоновых картинок могут возникнуть видимые перепады, заметные для посетителей сайта. При выборе фонового рисунка убедитесь, что обеспечен достаточный контраст между ним и текстом веб-страницы. В качестве фона допускается использовать анимированные изображения в формате GIF, но они отвлекают внимание читателей. • Синтаксис <body background=URL>...</body> 4 5 6 • Параметр LINK • Описание Устанавливает цвет не посещенных ссылок. • Синтаксис <body link=цвет>...</body> • Параметр ALINK • Описание Устанавливает цвет активной ссылки. Текущий цвет ссылки меняется на активный, когда на ссылку нажимают курсором мыши или выделяют ее с помощью клавиатуры. • Синтаксис <body alink=цвет>...</body> • Параметр VLINK • Описание Определяет цвет посещенных ссылок, т.е., таких ссылок, на которые пользователь уже «нажимал». • Синтаксис <body vlink=цвет>...</body> Шрифт. Тег BASEFONT Описание Тег BASEFONT предназначен для задания шрифта, размера и цвета текста по умолчанию. Указанные значения будут использоваться во всём документе за исключением тега FONT, в котором можно переопределить параметры оформления текста. Допускается использование тега в контейнере HEAD или BODY, причем несколько раз. Это позволяет изменять вид шрифта для части документа. Синтаксис <basefont color=... face=... size=...> Закрывающий тег Не требуется. Параметры color — цвет текста. face — шрифт текста. size — размер шрифта. Пример 1. Использование тега BASEFONT <html> <body> <basefont face="Arial, Helvetica, sans-serif" size="4" color="maroon"> <p>Добро пожаловать на мою страничку, которая оформлена с использование тега BASEFONT</p> <p><font face="Times New Roman" color=green>Цвет изменен с помощью тега FONT</font></p> </body> </html> Ссылки. Тег <a> Описание Тег A является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь. Якорем называется закладка внутри страницы, которую можно указать в качестве цели ссылки. При использовании ссылки, которая указывает на якорь, происходит переход к закладке внутри веб-страницы. Синтаксис <a href=URL>...</a> <a name=идентификатор>...</a> Закрывающий тег Обязателен. Параметры href — задает адрес документа, на который следует перейти. name — устанавливает имя якоря внутри документа. target — имя окна или фрейма, куда браузер будет загружать документ. Пример: <html> <body> <a href=images/xxx.jpg>Посмотрите на мою фотографию!</a><br> <a href=tip.html>Как сделать такое же фото?</a> </body> </html> Изображения. Тег IMG Описание Тег IMG предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Этот тег имеет единственный обязательный параметр src, который определяет адрес файла с картинкой. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег IMG в контейнер A. При этом вокруг изображения отображается рамка, которую можно убрать, добавив параметр border=0 в тег IMG. Рисунки также могут применяться в качестве карт-изображений, когда картинка содержит активные области, выступающие в качестве ссылки. Такая карта по внешнему виду ничем не отличается от обычного изображения, но при этом оно может быть разбито на невидимые зоны разной формы, где каждая из областей служит ссылкой. Синтаксис <img src=...> Закрывающий тег Не требуется. Параметры align — определяет как рисунок будет выравниваться по краю и способ обтекания текстом. alt — альтернативный текст для изображения. border — толщина рамки вокруг изображения. height — высота изображения. hspace — горизонтальный отступ от изображения до окружающего контента. src — путь к графическому файлу. vspace — вертикальный отступ от изображения до окружающего контента. width — ширина изображения. Пример 1. Использование тега IMG <html> <body> <a href=lorem.html><img src=/images/lorem.gif width=135 height=28 align=right vspace=4 hspace=4 border=0></a> </body> </html> Таблица. Тег <table> Описание Элемент TABLE служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов TR и TD. Внутри TABLE допустимо использовать следующие элементы: CAPTION, COL, COLGROUP, TBODY, TBODY, TD, TFOOT, TH, THEAD и TR. Таблицы с невидимой границей долгое время использовались для верстки веб-страниц, позволяя разделять документ на модульные блоки. Подобный способ применения таблиц нашел воплощение на многих сайтах, пока ему на смену не пришел более современный способ верстки с помощью слоев. Синтаксис <table> ... </table> Закрывающий тег Обязателен. Параметры align — определяет выравнивание таблицы. background — задает фоновый рисунок в таблице. bgcolor — цвет фона таблицы. border — толщина рамки в пикселах. bordercolor — цвет рамки. cellpadding — отступ от рамки до содержимого ячейки. cellspacing — расстояние между ячейками. cols — число колонок в таблице. height — высота таблицы. rules — сообщает браузеру, где отображать границы между ячейками. width — ширина таблицы. Таблица. Тег <th> Описание Тег TH предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег TH должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE. Синтаксис <table> <tr> <th>...</th> </tr> </table> Таблица. Теги <tr> и <td> Описание Тег TR служит контейнером для создания строки таблицы. Каждая ячейка в пределах такой строки может задаваться с помощью тега TH или TD. Синтаксис <table> <tr>...</tr> </table> Описание Предназначен для создания одной ячейки таблицы. Тег TD должен размещаться внутри контейнера TR, который в свою очередь располагается внутри тега TABLE. Синтаксис <table> <tr> <td>...</td> </tr> </table> Таблица. Пример. Пример 1. Использование тега CAPTION <html> <body> <table width=60% border=1 cellspacing=0 cellpadding=4> <caption align=right> Таблица 1. Название таблицы</caption> <tr> <th>&nbsp;</th> <th>Чебурашка</th> <th>Крокодил Гена</th> <th>Шапокляк</th> </tr> <tr> <td>Съел, кг</td> <td>5</td> <td>2</td> <td>1</td> </tr> <tr> <td>Выпил, л</td> <td>6</td> <td>8</td> <td>2</td> </tr> </table> </body> </html> Таблица цветов Таблица цветов Таблица цветов Таблица цветов Указания по созданию сайта Ваш сайт должен содержать не менее 4 страниц Главная страница содержит вашу фотографию, информацию о вас и о содержании сайта Меню сайта должно быть оформлено в таблице с невидимыми границами (border = 0) Все страницы должны содержать меню сайта, изображения, текст, оформленный цветом, начертанием и т.д. Хотя бы на одной странице сайта должна быть таблица Темы для разработки сайтов: 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 11. 12. 13. 14. 15. Этапы становления космонавтики в России Этапы становления космонавтики в мире Космические технологии современности Использование космических технологий в жизни С.П. Королев А.Ю. Гагарин Белка и Стрелка – космические собаки Первые космонавты СССР Женщины – космонавты СССР Современные космонавты России Современные космодромы Космические путешественники Мое созвездие Классификация звезд Классификация космических тел
