Основы html - WordPress.com
реклама
1. Основные понятия и определения HTML (от англ. HyperText Markup Language — «язык разметки гипертекста») — стандартный язык разметки документов во Всемирной паутине. Большинство вебстраниц создаются при помощи языка HTML (или XHTML). Язык HTML интерпретируется браузером и отображается в виде документа, в удобной для человека форме. Браузер (интернет-обозреватель) – программа, которая применяется для поиска и просмотра документов в сети Internet. Браузер интерпретирует html- код и отображает html – документ в его форматированном виде. Н: Internet Explorer, Mozilla Firefox, Opera, Google Chrome. HTML-реда́ктор — компьютерная программа, позволяющая создавать и изменять HTMLстраницы. Несмотря на то, что HTML-код может быть написан в простом текстовом редакторе (например, Notepad), специальные редакторы для написания кода HTML предлагают больше удобств и функциональности. По своей функциональности они делятся (часто весьма условно) на две категории: Редактор показывает только исходный код. Редактор показывает готовую страницу в режиме WYSIWYG (что видишь, то и получишь). Например: Adobe Dreamweaver, Microsoft FrontPage Express, Macromedia HomeSite. Тег – начальный или конечный маркеры элемента. Теги определяют границы действия элементов и отделяют элементы друг от друга. В тексте вэб-страницы теги заключаются в угловые скобки, а конечный тег всегда снабжается косой чертой. Атрибут – переменная, которая имеет стандартное имя и которой может присваиваться определенный набор значений. Атрибуты располагаются внутри начального тега и отделяются друг от друга пробелами. Программный код – аналог понятия «текст программы». Элемент - это конструкция языка HTML, содержащая какие-то данные, например: < BODY >текст</ BODY > - это элемент, в котором можно выделить три части: < BODY > - открывающий тег (англ. tag); текст - содержимое элемента (в данном примере, текст); </ BODY > - закрывающий тег; Почти все теги в хтмл парные, т.е. имеют открывающий тег и закрывающий тег. Теги начинаются символом "<" и заканчиваются символом ">", а закрывающий тег отличается от открывающего наличием символа "/".Для некоторых элементов закрывающий тег не обязателен, а некоторые вообще не имеют закрывающего тега. Пара тегов <BODY></BODY> называется контейнером. Теги могут содержать какие-то параметры, называемые атрибутами, которые содержатся в открывающем теге, Синтаксис построения тегов в html < ТЕГ ПАРАМЕТР1=«ЗНАЧЕНИЕ1» ПАРАМЕТР2=«ЗНАЧЕНИЕ2» … > Например: <BODY color="blue"> В этом примере: color –атрибут (параметр), blue – значение атрибута (параметра). 2. Структура html -документа Любой веб-документ состоит из контейнера <HTML> </HTML> , внутри которого располагаются еще два контейнера <HEAD></HEAD> и <BODY></BODY>. <HTML> </HTML> указывает браузеру на то, что документ разработан с помощью языка html. <HEAD></HEAD> - «головной контейнер», содержит внутренние сведения о странице (название, автор, ключевые слова…) В «головной контейнер» входят: Тег <title> - определяет название документа. Тег <meta> - содержит служебную информацию о внутренний свойствах документа. В качестве основных можно выделить следующие мета – теги: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> (обязательный тег) показывает, что текст написан с использованием языка разметки html и что в документе применена кодировка utf-8; <meta name=”keyword”> - вместо keyword указываются ключевые слова документа, на основании которых производится поиск в интернет; <meta name=”author”> содержит информацию об авторах документа. <BODY>></BODY> указывает на начало собственно "тела" Веб-страницы. В этом разделе размещается весь материал (текст, графика, таблицы и другие элементы содержимого страницы), который увидят пользователи, обратившиеся к Веб- странице. Простейшая структура веб-страницы <html> <head> <title>Название страницы</title> </head> <body> Текст страницы </body> </html> Для корректного отображения браузером веб-страниц, необходимо: в html -коде первой строкой прописывать тег <!DOCTYPE>, в котором содержится информация о версии html: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> в теге <html> указать параметр xmlns: <html xmlns="http://www.w3.org/1999/xhtml"> в контейнере <head></head> прописать мета-тег: <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Таким образом, структура веб-документа, должна иметь вид: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Название страницы</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> Текст страницы </body> </html> Transitional//EN" Задание 1. Подготовка папок для сохранения страниц ЭУ. Создайте на своем компьютере папку с именем book. В папке book создайте 4 подпапки: index (для хранения титульной страницы ЭУ), content (для хранения html-страниц ЭУ), img (для хранения файлов-рисунков), video (для хранения видео-файлов). Задание 2. Создание титульной страницы ЭУ в формате html-файла. В программе Блокнот (Пуск->Все программы->Стандартные->Блокнот) наберите приведенный ниже программный код, поменяв содержимое контейнера <body></body>. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Главная</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> Национальный исследовательский Томский политехнический университет Кафедра инженерной педагогики Электронное учебное пособие по дисциплине «Технология создания ЭУИ» Автор-составитель: Паканова В.С. Томск, 2013 </body> </html> Выберите команду Файл->Сохранить как. Задайте Тип файла – все файлы, Кодировку – UTF-8. Сохраните документ под именем index.html в папке book/index. Откройте документ index.html с помощью браузера (двойным кликом мыши) и посмотрите на результат в режиме просмотра. 3. Основные теги html Ниже перечислены основные теги, используемые при форматировании текста, и их свойства. Теги <p></p> <br> <sup></sup> <sub></sub> <h1></h1> <h2></h2> … <h6></h6> <span></span> <blockquote> </blockquote> <body></body> Описание тегов Создает абзац (параграф) Обеспечивает принудительный переход на новую строку Переводит текст в верхний регистр Переводит текст в нижний регистр Задает заголовки 1-го, 2-го, …, 6-го уровня Служит для выделения части текста и присвоения ей свойств Задает блок с отступами Определяет весь документ Задание 3. Разбиение титульной страницы ЭУ на абзацы и заголовки. Откройте файл index.html в режиме редактирования html-кода (нажмите на него правой кнопкой мыши, выберите Открыть с помощью->Блокнот). Откорректируйте исходный код файла, разбив содержимое контейнера <body></body> на абзацы и заголовки. <body> <p>Национальный исследовательский Томский политехнический университет</p> <p>Кафедра инженерной педагогики</p> <br><br><br><br> <h1>Электронное учебное пособие по дисциплине<br> «Технология создания ЭУИ»</ h1> <br><br><br> <p>Автор-составитель: Паканова В.С.</p> <p>Томск, 2013</p> </body> Сохраните изменения в файле. 4. Параметр style Для редактирования объектов html (абзацев, заголовков, всей страницы) используется параметр STYLE. Параметр STYLE определяет свойства объекта и применим к каждому из перечисленных тегов. Синтаксис определения параметра STYLE относительно тегов < ТЕГ STYLE=«ПАРАМЕТР1:ЗНАЧЕНИЕ1; ПАРАМЕТР2:ЗНАЧЕНИЕ2; …» > Пример Чтобы заголовок 1-го уровня выровнять по центру, присвоить размер в 18 пунктов, начертание шрифта – Verdana, цвет шрифта – белый, цвет фона – синий, сделать серую рамку вокруг, задать отступы после заголовка – 12 пунктов, необходимо прописать следующий html-код: <h1 style="font-family:Verdana; font-size:18pt; color:#FFF; background-color:#009; textalign:center; border-color:#CCC; border-style:solid"> Заголовок </h1> Основные свойства параметра STYLE Параметры STYLE background border color font line-height margin padding text-align text-indent Описание параметров STYLE Устанавливает фон объекта Устанавливает внешнюю рамку (границу) объекта Задает цвет текста Задает стиль шрифта Регулирует межстрочный интервал Устанавливает внешние отступы от объекта Устанавливает внутренние отступы от объекта до его границ Задает выравнивание текста Устанавливает отступ красной строки background-color (цвет фона) : (название или кодировка цвета) background-image (фоновый рисунок) : url(Ris.JPG) (адрес рисунка) background-repeat (повторение фонового рисунка) : не повторять повторить повторить по горизонтали повторить по вертикали border (толщина рамки) : 5px (5 пикселей) border-color (цвет рамки) : (название или кодировка цвета) пунктирная линия двойная нет границы border-style (тип линии рамки) : color (цвет текста) : сплошная (название или кодировка цвета) font-family (гарнитура шрифта) : кол-во пикселей font-size (размер шрифта) : крупный крупнее основного средний мелкий мельче основного очень крупный очень мелкий font-style (стиль шрифта) : курсив без курсива курсив полужирный font-weight (толщина шрифта) : line-height (межстрочный интервал) : normal (единичный интервал) 1.5 (полуторный интервал) 2 (двойной интервал) margin (внешние отступы) : 0px (нет отступов) 10px (отступы в 10 пикселей) 25px (отступы в 25 пикселей) margin-bottom (отступ снизу): (кол-во пикселей) margin-left (отступ слева) : (кол-во пикселей) margin-right (отступ справа) : (кол-во пикселей) margin-top (отступ сверху) : (кол-во пикселей) padding (внутренние отступы) : 0px (нет отступов) 10px (отступы в 10 пикселей) 25px (отступы в 25 пикселей) padding-bottom (отступ снизу): (кол-во пикселей) padding-left (отступ слева) : (кол-во пикселей) padding-right (отступ справа) : (кол-во пикселей) padding-top (отступ сверху) : (кол-во пикселей) по центру text-align (выравнивание текста) : по ширине страницы по левому краю по правому краю мерцающий text-decoration (оформление текста) : text-indent (отступ красной строки) : (кол-во пикселей) зачеркнутый нет оформления надчеркнутый подчеркнутый Более полное описание свойств STYLE можно найти в интернет-справочниках http://css.manual.ru/, http://htmlbook.ru/css. Задание 4. Редактирование титульной страницы ЭУ. Откройте файл index.html для редактирования в Блокноте. Поочередно задайте стили для абзацев, заголовков, всей страницы, определяя соответственно свойства параметра style для тегов p, h1-h6, body. Пример титульной страницы ЭУП приведен на рисунке ниже.
