«Язык разметки гипертекста HTML »
Браузер и Блокнот(или аналогичный простой редактор) - вот всё, что вам необходимо для работы
Тег – оформленная единица HTML-кода или попросту команда. Например, < html >, < body >,<h1>,<h2> и так далее. Все тэги имеют одинаковый формат: они начинаются знаком "<" и заканчиваются знаком ">". Обычно имеются два тэга – открывающий и закрывающий. Различие в том, что в закрывающем имеется слэш "/".
Атрибут –это своего рода дополнительная информация. Атрибуты всегда записываются внутри тега, затем следует знак равенства и детали атрибута, заключённые в двойные кавычки.
Элемент – понятие, введенное чисто для удобства обьяснения. Например, элемент HEAD состоит из двух тегов – открывающего <HEAD> и закрывающего </HEAD>. Таким образом. Элемент – более общее понятие, обозначающее пару тегов и участок документа между тегами, на который распространяется их влияние.
Структура web- документа. Вставка комментария.
Каждый HTML-документ, отвечающий спецификации HTML какой-либо версии, должен начинаться со строки объявления версии HTML <!DOCTYPE…>, которая обычно выглядит примерно так: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> В данном случае мы говорим браузеру, что HTML соответствует международной спецификации версии 4.01. Не пытайтесь запомнить эту строчку наизусть, главное - вы должны знать, что она необходима. Ведь именно она помогает сделать сайт, который будет одинаково смотреться во всех браузерах(обычно это три основных Internet Explorer,Opera, Firefox ).
Далее обозначается начало и конец документа тегами < html > и </ html > соответственно. Внутри этих тегов должны находиться теги головы (< head ></ head >) и тела документа(< body ></ body >). Обычно основой головы документа является элемент TITLE - заголовок документа. Также там содержится вся техническая информация, различные таблицы стилей и.т.п. А основное содержимое: текст,таблицы,картинки, - находится в теле документа.
<html> и </html> начало и конец документа <head> и </head> теги головы <body> и </body> теги тела
Как вы видите голова находится над телом, поэтому никогда не размещайте голову документа в теле документа (или наоборот). Сначала закрываем голову документа </HEAD>, и лишь затем открываем тело <BODY>. И еще, у документа одна голова и одно тело, и не стоит пытаться создавать их большее количество.
Ну во-первых это название документа - элемент TITLE. У этого элемента обязательный закрывающий тег. Это очень важный элемент. Информация из элемента TITLE показывается в окне браузера(вверху слева), и поэтому это очень важный и информативный элемент для посетителей сайта. Во-вторых это описание страницы сайта META NAME. Первые 170-200 символов видны при поиске в гугле поэтому оно тоже очень важно
<html> <head> < META NAME="description" CONTENT=" сайт, школа № 30 города Омска, школьная газета, пед.состав, программа развития,режим работы школы, расписание уроков, история школы"> < title> сайт школы №30</ title> </head>
Очень полезным при создании сайтов является вставка комментария. Почему? да потому, что через месяц после создания, вам будет трудновато разобраться что к чему, ведь кода будет очень много. А если вы будете комментировать свои действия - тогда разобраться будет значительно легче! Примеры <!-- начнем работать с телом документа --> <!--закончили с телом документа-->
Создаем свою первую страничку
ШАГ 1: Создайте на своем компьютере папку с названием вашего будущего сайта ШАГ 2: Зайдите в созданную на предыдущем шаге папку и создайте внутри нее текстовый документ. ШАГ 3: Теперь напишите в Блокноте текст простейшей странички
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Это моя первая страничка! </ title> </head> <body> <!-- сейчас я напишу свою первую строчку текста!--> Ура!!!! Я создал свою первую страницу на html!!! </body> </html>
Теперь сохраните ваш документ как " index.htm l " (расширение ".htm l " указывает, что это HTML-документ. ".htm" даст тот же результат. Это не имеет значения). Для этого в меню Файл выберите Сохранить Как
Теперь если вы запустите получившийся файл index.htm увидите примерно следующее:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title> Это моя первая страничка! </ title> </head> <body> <!-- сейчас я напишу свою первую строчку текста!--> Ура!!!! Я создал свою первую страницу на html!!! </body> </html>
Для того, чтобы внести изменения в страничку, Вам нужно открыть данный файл через обычный блокнот, внести в него изменения, сохранить их и после этого обновить вашу страничку в браузере.
Работаем с текстом
На этом уроке мы подробнее остановимся на свойствах текста, научимся выделять абзацы, заголовки и т.д.
P Используется для разбивания текста на параграфы - H1,H2,...H6 Применяются для создания заголовков 1,2...6 уровней - BR Используетcя для переноса строки - DIV, SPAN Используются для выделения части документа определенным способом.
ALIGN - определяет способ горизонтального выравнивания параграфа. Возможные значения: L eft по левому краю C enter по центру R ight по правому краю J ustify по ширине. По умолчанию имеет значение left.
< p align= " center "> Этот параграф по центру </ p > < p align= " left "> Этот по левому краю </ p > < p > Этот тоже по левому (т.к. по умолчанию) </ p > < p align= " right "> Этот по правому краю </ p > < p align= " justify "> В этом параграфе текст будет выравниваться по ширине (одновременно по левому и правому краям документа). Не понимающие justify браузеры будут выравнивать текст по левому краю </ p >
Примечание: следите чтобы содержимое в кавычках было написано без пробелов, т.е. <p align="right"> а не <p align=" right "> иначе не будет работать!
Атрибуты: ALIGN - определяет способ горизонтального выравнивания заголовков. Возможные значения: left, center, right.По умолчанию - left.
<!-- примеры заголовков от 1 до 6 уровня--> <h1> Большой заголовок </h1> <h2> Заголовок поменьше </h2> <h3> Еще меньше </h3> <h4> Совсем маленький </h4> <h5> Малюсенький заголовочек </h5> <h6> Ну просто лилипутский заголовочек </h6>
Начинается первая строка < br > теперь идет вторая < br > а вот уже и третья < p > А это параграф и внутри него тоже можно использовать тег < br > переноса строки.Его надо использовать всегда, когда надо перенести строку:) </ p >
- STRONG Используется для выделения текста жирным - EM Используется для выделения текста курсивом - U Выделение текста подчеркиванием - S Перечеркивание текста - SUP Создание верхнего индекса - SUB Создание нижнего индекса - FONT Изменение цвета, типа, размера шрифта - HR Вставляет в текст горизонтальную разделительную линию
Вниманиe акция! новая цена <s> 50 000 </s> 20 000 рублей!
2 <sup> 2 </sup> = 4 ; < br > 2 <sup> 3 </sup> = 8 ; < br > 2 <sup> 4 </sup> = 16 ;
SIZE - Определяет размер шрифта. Возможные значение - 1, 2, 3, 4, 5, 6, 7. COLOR - Определяет цвет текста. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. FACE - определяет используемый шрифт. Используйте Times New Roman, Arial, Tahoma, Courier, Courier New. Они установлены почти у всех. Иначе гарантий нет!
Это обычный текст < br > <FONT SIZE="+2" COLOR="red"> Увеличенный красный шрифт </ FONT> < br > <FONT SIZE="3" FACE="Courier New" COLOR="Violet"> Моноширинный фиолетовый текст 3 размера </ FONT> Если написано SIZE="+2" то это означает увеличить на 2 единицы шрифт по сравнению со стандартным. Обычно стандартный размер шрифта равен 3.
Атрибуты: WIDTH – определяет длину линии в пикселах или процентах от ширины окна браузера. SIZE – толщина линии в пикселах. ALIGN – определяет выравнивание горизонтальной линии. Атрибут может принимать следующие значения: left – выравнивание по левому краю документа. right – выравнивание по правому краю документа. center – выравнивание по центру документа (используется по умолчанию). NOSHADE – определяет способ закраски линии как сплошной. Атрибут является флагом и не требует указания значения. Без данного атрибута линия отображается объемной. COLOR – задает цвет линии. Можно использовать либо RGB-значение в шестнадцатиричной системе, либо один из 16 базовых цветов. Атрибут работает только в Internet Explorer.
Текст до линии < hr noshade width="50%" align="left"> После линии < br > А вот пример линии толщиной 2 px и без флага noshade <hr width="50%" align="left" size ="2">
- UL Создает неупорядоченный список - OL Создает упорядоченный список - LI Создает пункты списка внутри элементов OL или UL
UL (Unsorted List) - Создает неупорядоченный список. Обязательно наличие закрывающиего тега, причем между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
< ul > < li > Первый пункт списка </ li > < li > Второй пункт списка </ li > < li > Третий пункт списка </ li > < li > Четвертый пункт списка </ li > </ ul >
OL (Ordered List)- Создает упорядоченный список. Между начальным и конечным тегами должны присутствовать один или несколько элементов LI, обозначающих отдельные пункты списка.
START – определяет первое число, с которого начинается нумерация пунктов. (только целые числа). Если не указывать, начинается с начала. TYPE – определяет стиль нумерации пунктов списка. Возможные значения: "A" – заглавные буквы A, B, C... " a " – строчные буквы a, b, c... "I" – большие римские числа I, II, III... " i " – маленькие римские числа i, ii, iii... "1" – арабские числа 1, 2, 3...
!-- пример списка с арабскими числами --> Чтобы создать сайт на домашнем компьютере необходимо: < ol type= "1" > < li > Выучить html </ li > < li > Выучить css </ li > < li > Ознакомиться с php </ li > </ ol > <!-- пример списка с большими римскими числами --> Чтобы создавать сайты быстро желательно: < ol type= "I" > < li > знания программы Adobe Dreamweaver </ li > < li > знания программы TOpStylePro </ li > < li > Знания Photoshop </ li > </ ol > <!-- пример списка с маленькими буквами --> Чтобы зарабатывать на сайте желательно: < ol type= " a " > < li > наличие хорошей посещаемости </ li > < li > наличие цифрового продукта для продажи </ li > < li > наличие блоков рекламы </ li > </ ol > <!-- пример списка не с начала --> Чтобы стать успешным в интернете: < ol type ="1" start= "2" > < li > писать информацию полезную для людей </ li > < li > постоянно пополнять сайт новым содержимым </ li > < li > первый пункт придумай сам </ li > </ ol >
Атрибуты: VALUE – изменяет порядок нумерации элементов списка. Используется только если элемент LI находится внутри элемента OL. В качестве значения указывается порядковый номер элемента.
Чтобы создать сайт на домашнем компьютере необходимо: < ol > <!--так как тип не указали будет использоваться по умолчанию--> < li > Выучить html </ li > <!--сейчас нумерация пойдет с пятого номера--> < li value= "5"> Выучить css </ li > < li > Ознакомиться с php </ li > </ ol >
html ссылки
Создать html ссылку очень просто. Для этого используется простенький элемент с одним атрибутом. <a href= “ имя файла или страницы, на которую ссылаемся "> текст, при нажатии на который осуществляется переход </a>
<a href="http://www.zvirec.com"> Это ссылка на сайт zvirec.com </a> будет выглядеть в браузере: Это ссылка на сайт zvirec.com
<center><H1> Новости, объявления </ H1> </center> <A HREF="praw.doc"><font color="#3300FF" face="Monotype Corsiva " size="5"> Правила поведения учащихся в школе </ font> </A> & nbsp & nbsp <A HREF="pl.doc"><font color="#000066" face="Monotype Corsiva " size="5"> План общешкольных дел и мероприятий </ font></A> & nbsp & nbsp <A HREF="rz.doc"><font color="#FF0000" face="Monotype Corsiva " size="6"> Расписание звонков </ font></A> & nbsp & nbsp <BR> <A HREF="pom.doc"><font size="6"> Здесь Вам помогут! </ font></A>& nbsp & nbsp & nbsp <A HREF="sluz.doc"><font size="6"> Куда сообщить о случившемся?</ font></A><BR><BR><BR>
<a h ref="mailto: shcola30@yandex.ru "> Написать письмо в школу № 30 </a> В браузере будет выглядеть: Написать письмо в школу № 30
Работа с изображениями
Изображения - это неотъемлемая часть любого сайта в сети интернет. Они используются везде, поэтому давайте разберемся что к чему. Есть три типа файлов изображений, которые можно вставить на ваши страницы
GIF (Graphics Interchange Format) JPG / JPEG (Joint Photographic Experts Group) PNG (Portable Network Graphics)
<img src=" имя файла ">
<font color="#FF0000" face="arial" size="5"> <IMG SRC="c2.gif"> Поздравляем!!! </ font><BR >
Цвет фона и текста
BACKGROUND – определяет изображение для "заливки" фона. Значение задается в виде полного URL или имени файла с картинкой в формате GIF или JPG. BGCOLOR – определяет цвет фона документа. TEXT – определяет цвет текста в документе. Все они прописываются для элемента BODY. Значения цветов задаются либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов.
<!-- задаем фоновый цвет и цвет текста --> < body bgcolor= "#FFF8D2" text= " red "> < p > Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный </ p > < font color =" green "> < p > В этом абзаце текст будет зеленый, потому что мы заключили его в теги font и придали соответсвующий цвет </ p > </ font > < p > Теперь текст снова будет красный </ p > </ body >
<!-- задаем фоновое изображение и цвет текста --> < body background= " fon.jpg " text= " red "> < p > Этот текст будет красный, потому что мы изменили цвет текста в теге БОДИ и теперь весь текст на странице по умолчанию будет красный </ p > < p > Теперь тут тоже красное и только < font color =" green "> эти слова зеленые </ font > </ p > < p > Тут как вы поняли текст тоже красный </ p > </ body >
Таблицы в html
Html таблицы - полезная штука. Обычно их используют не только для отображения таблиц как таковых, но и для создания невидимого каркаса страницы, помогающего расположить текст и изображения должным образом.
TABLE - Элемент для создания html таблицы. Обязательно должен иметь начальный и конечный теги. По умолчанию html таблица печатается без рамки, а разметка осуществляется автоматически в зависимости от объема содержащейся в ней информации. Здесь есть атрибут BORDER который задает толщину рамки таблицы в пикселах. TR ( Table Row ) - Создает новый ряд таблицы. Закрывающий тег обязателен. TD ( Table Data ) - Начинает и заканчивает каждую ячейку ряда html таблицы. Обязателен закрывающий тег.
<table border="1"> < tr > <td> ряд 1 ячейка1 </ td> <td> ряд1 ячейка2 </ td> </ tr > < tr > <td> ряд 2 ячейка 1 </ td> <td> ряд 2 ячейка 2 </ td> </ tr > </table>
COLSPAN – определяет количество столбцов, на которые простирается данная ячейка. По умолчанию имеет значение 1. ROWSPAN – определяет количество рядов, на которые простирается данная ячейка. По умолчанию имеет значение 1.
CELLPADDING – определяет расстояние (в пикселах ) между рамкой каждой ячейки html таблицы и содержащемся в ней материалом. CELLSPACING – определяет расстояние (в пикселах ) между границами соседних ячеек таблицы html. WIDTH – определяет ширину таблицы html. Ширина задается либо в пикселах, либо в процентном отношении к ширине окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в таблице материала. HEIGHT – определяет высоту таблицы. Высота задается либо в пикселах, либо в процентном отношении к высоте окна браузера. По умолчанию этот атрибут определяется автоматически в зависимости от объема содержащегося в html таблице материала.
ALIGN – определяет способ горизонтального выравнивания html таблицы или содержимого ячеек. Возможные значения: left, center, right. Значение по умолчанию – left. VALIGN – должен определять способ вертикального выравнивания таблицы или содержимого ячеек таблицы. Возможные значения: top, bottom, middle.(прижать к верху, прижать к низу,и установить посередине). BGCOLOR – определяет цвет фона ячеек таблицы. Задается либо RGB-значением в шестнадцатиричной системе, либо одним из 16 базовых цветов. BACKGROUND – позволяет заполнить фон таблицы рисунком. В качестве значения необходимо указать URL рисунка.
Если картинка меньше чем ячейка, то она будет дублироваться, как показано в примере. Если больше - то будет отображаться та часть которая влезет :).
<table BORDER=0 ALIGN=CENTER> < tr > <td colspan ="2"> <center> <IMG SRC="logo.jpg"> </center> <center><font color="#ffff00" face="Comic Sans MS" size="5"> Средняя общеобразовательная школа №30 города Омска. Добро пожаловать!!!</ font></center> </td> </ tr > < tr > <td valign ="top" width="21%" bgcolor ="#33ccff"<center>
