|
HTML - Это язык гипертекстовой разметки.
Структура тэга в HTML: <имя тэга_параметр="значение">
Обязательный набор тэгов в документе: <html> <head> <title>...</title>(по последним стандартам - обязателен) <head> <body> ... ... ... </body> </html>
Помни: Браузер при прочтении кода игнорирует переводы строки (вводы), для него это пробел, причем несколько подряд пробелов воспринимается как один пробел. HTML позволяет разбивать текст на абзацы следующими тэгами: <p></p> ( по последним стандартам закрывающий тэг обязателен) <br> (закрывающий тэг не требуется) Этот тэг не создает абзацев, а позволяет перейти на новую строку не доходя до конца строки.
Тэги оформления текста <i>курсив</i> <em>курсив</em> (более предпочтителен, хотя и идентичен предыдущему) <b>жирный шрифт</b> <strong>жирный шрифт</strong> (более предпочтителен) <u>подчеркнутый текст</u> <hr> разделитель, горизонтальная черта <h1>Заголовок первого уровня</h1><h6>Заголовок последнего уровня</h6> (причем, тэги заголовков не могут находиться внутри абзацев, и наоборот)<code> Вставляем фрагмент исходного текста программ. Этот тэг отвечает за отображаемые шрифты. Часто используется вместе с тэгом <pre>, т.к. он сохраняет вводы и пробелы. <blockquote> блочный тэг, увеличивает отступ.
Параметры body Цвет текста и фона страницы прописывается в параметрах body: <body bgcolor="black" text="white"> (делаем фон черным, а буквы - белыми) Значение параметров цвета можно также задавать в системе RGB: <body bgcolor="#000000" text="#ffffff"> Прописываем цвет ссылок: <body link="blue" vlink="red" alink="yellow">, где link - цвет непосещенной страницы vlink - цвет посещенной ссылки alink - цвет ссылки, на которую наведен курсор Вставка картинки-фона: <body background="pic.jpg">
Ссылка Тэг ссылки<a> автоматически подчеркивается и становится синего цвета. <a href="http://www.mikhalkevich.narod.ru">http://www.mikhalkevich.narod.ru</a> Кроме переходов на другие документы/ресурсы, с помощью этого тэга можно производить переходы внутри странички. Делается это следующим образом: Сперва ставим метку в том месте, куда будет переходить ссылка:> <a name="test"></a> После чего прописываем саму ссылку перехода: <a href="#test">Переходим в начало страницы</a> Иногда требуется, чтобы ссылка открывалась в новом окне, для этого существует атрибут target. Пример: <a href="http:/mikhalkevich.narod.ru" target="_blank"> Эта ссылка будет открываться в новом окне</a>
Спецсимволы, которые надо знать наизусть < < > > неразрывный пробел, служит для связки слов, которые нельзя разрывать переносами (Пример: 2007 г.) © © « « » » " " (обычные двойные ковычки) — — (длинное тире) – – (тире покороче) Полную коллекцию спецсимволов можно получить здесь: picters\specsimvoly.html
Вставка изображения Следует помнить, что тэг <img> не может находиться непосредственно в контейнере <body> ... </body>, его нужно поместить внутрь любого блочного элемента, например <p>...</p>. Для этого тэга имеется два обязательных атрибута: src (связывающий документ с изображением) и alt (альтернативное текстовое описание рисунка) <img src="my.jpg" alt="изображение1"> Вставка картинки из того же католога, где лежит документ <img src="/my/my.jpg"> Если картинка лежит на уровень ниже, в поддиректории <img src="../my.jpg"> Если картинка лежит на уровень выше, а документ находится в поддиректории <img src="http://www.homepage.ru/my/my.jpg"> Если картинка находится на другом сайте, то путь прописывается полностью. Чтобы заставить браузеры отображать всплывающие подсказки, текст последних следует заключить в атрибут title. Задаем параметры изображению с помощью атрибутов width и height <img src="my.jpg" width="200" height="100"> Однако, пользуясь этими тэгами следует помнить, что браузер будет сужать и растягивать изображение, а делать это он не очень-то умеет. Центрируем изображение: <img src="my.jpg" align="right"> по правому краю <img src="my.jpg" align="left"> по левому краю Добавляем/убираем рамку вокруг изображения: <img src="my.jpg" border="2"> толщина этой рамки составляет 2 пикселя. Рассмотрим пример, когда надо избавляться от рамки: <a href="..."><img src="my.jpg"></a>, мы прописали код ссылки-картинки, вокруг которой автоматически появится рамка, поэтому дописываем атрибут border со значением "0", чтобы избавиться от рамки. <a href="..."><img src="my.jpg" border="2"></a> Отступ по горизонтали/вертикали задается атрибутами hspace и vspace соответственно. <img src="my.jpg" hspace="2" vspace="4">
Списки Списки не могут находиться внутри абзацев, но внутри списков можно использовать абзацы. Два типа списков: Нумерованные задаются тэгом<ol></ol>Пример: <ol> <li>Первый</li> <li>Второй</li> </ol>
Параметры <ol>: <ol type="1"> нумеруем список обычными цифрами <ol type="a"> нумеруем список латинскими прописными буквами <ol type="А"> нумеруем список латинскими большими буквами <ol type="i"> нумеруем список римскими прописными цифрами <ol type="I"> нумеруем список римскими большими цифрами <ol start="10"> начинаем считать с 10 Маркированный список задается тэгом <ul></ul> Пример: <ul> <li>Первый</li> <li>Второй</li> </ul>
Параметры <ul>
Немного о таблице <table> начинаем таблицу <tr> прописываем строчку в таблице <td>а эта ячейка таблицы</td> </tr>закрываем строчку в таблице </table> закрываем саму таблицу. Создадим самую примитивную таблицу: <table width="50%"> Браузер отобразит этот код так:
Параметры таблицы: <table align="center"> центрируем таблицу относительно документа. Также можно использовать значения "right" и "left". <table border="2"> добавляем рамку вокруг таблицы <table bgcolor="red"> цвет фона <table width="20%" height="100"> Прописываем высоту в пикселях и ширину в процентах <table cellpadding="3"> отступ внутри ячейки между содержимым таблицы <table cellspacing="2"> отступ или расстояние между ячейками таблицы Содержимое внутри ячеек по умолчанию располагается в середине, чтобы изменить это расположение прописываем внутри тэга<td> атрибут valign <td valign="top"> содержимое ячейки привязывается к верху <td valign="bottom"> содержимое ячейки привязывается ко дну ячейки <td valign="middle"> (по умолчанию) содержимое в середине ячейки. Ячейки в таблице можно объединять: <td colspan="2"> объединяем 2 ячейки в одну строку <td rowspan="4"> объединяем 4 ячейки в один ряд Внутрь тэга <td></td> можно еще вложить таблицу. Подробнее о табличной верстке читай в следующей лекции. В этом разделе мы ознакомились лишь с основами html. Но этих знаний должно быть достаточно, чтобы имея под рукой лишь справочник html создавать сайты. Отличный справочник можно найти по адресу: http://html.manual.ru/
|