Шпаргалка по html (минимальный набор тегов для создания сайта)
Будет неплохо, если Вы выучите теги шпаргалки наизусть. А понять надо обязательно. Понять – значит отформатировать html-файл нужным образом с помощью шпаргалки.
Комментарий. Между символами «<!» и «>» (без кавычек) может быть любой текст, который игнорируется браузером – на странице не отображается. Этот текст называется комментарием и служит «шпаргалкой» веб-дизайнеру. Комментарий, как и любой другой парный тег, может занимать часть строки, строку или несколько строк в любом месте HTML-файла. Если убрать или добавить комментарий, вид страницы в обозревателе не изменится. Если Вы хотите временно убрать область HTML-документа (часть строки, строку или несколько строк), ее можно «закомментировать», обрамив символами «<!» и «>».
Структура страницы сайта
<html>
<head> <!Заголовок – от англ. ”голова”>
<title>Название страницы </title> <!”Название страницы” будет напечатано на экране>
</head>
<body>
Тело сайта
</body> <!” Тело сайта” будет напечатано на экране>
</html>
Цвет
<body text="#RRGGBB">. H-формат (16-ричный). По байту на цвет (R,G,B), у каждого байта своё поле в числе, потому три базовых цвета можно смешивать, получая любой другой.
Задать цвет фрагмента: <font color="#00E200"> текст фрагмента </font>.
Задать цвет фона тела: <body bgcolor="#243467">. (Back Ground Color).
Картинки
<center> </center> – центровка. Но работает только в теле (контенте, body).
<img> – непарный тег. Пример: <img src="kartinka.jpg"> – путь к файлу указывать не нужно, если файл находится в той же папке, что и страница.
Рекомендуется использовать параметры width="" и height="" – ширина и высота картинки в пикселях (точка на экране). Можно еще title="хинт". Хинт (подсказка) будет всплывать при наведении мыши на картинку или ссылку, расположенную на странице сайта.
Форматирование текста
<b> </b> – bold – жирный – текст между этой парой тегов будет жирным.
<i> </i> – italic – курсив – шрифт между парой тегов будет выделен курсивам.
Правила вложенности тегов – как у циклов в языке высокого уровня – как матрешки.
<H{1/2/3/4/5/6}> – размер (уровень) заголовка. 1 – самый большой (заголовок первого уровня), 6 – самый маленький (6-го уровня). Заголовки очень «любят» поисковые системы, они повышают ценность текста на веб-странице, который располагается внутри тегов <h1>...<h6>. По этой причине лучше всегда использовать эти теги.
Параметр size= можно применять в <font>: <font size="размер">текст</font>.
Размер текста здесь, в отличие от заголовков, пропорционален значению параметра «размер» (1,2,3,4, ...).
Ссылки
<a href="http://myip.ru">IP-адрес моего компа</a>.
Между <a> и </a> анкор – ссылочное слово или фраза, которая видна на сайте.
<a href="news.html">Новости</a>. Страница в той же папке, что и главная.
Ссылка в виде картинки (эмблема ЮФУ). border="0" – для удаления рамки вокруг картинки.
<a href="http://sfedu.ru">
<img src="sfedu.jpg" width="40" height="90" title="ЮФУ" border="0">
</a>
<a href="rolik.mp4">Рекламный ролик</a>
<a href="fotki.rar">Скачать</a>.
Если скачиваемые без полного пути (наgример, www\x\s\a.htm) то должны в одной папке со страницей.
Таблицы
<table> </table>. Внутри их <tr> </tr> – строки. Внутри их <td> </td> – столбцы.
Размер таблицы, строк или столбцов – по умолчанию или задается. Если не заданы. то пространство делится поровну. Содержимое ячеек надо писать между <td> </td>.
border="толщина_границ". От 0 (нет) до 5 (толстые).
Параметры width и height задают в пикселях ширину и высоту таблицы (если стоят в теге <table>) или ячейки – если в теге <td>. Числа в параметрах width = height= могут быть без кавычек.
Между <td> </td> можно ставить ссылки, изображения, текст.
<td bgcolor="#AA2243"> – закрасить ячейку цветом AA2243 (см. Цвет).
<td background="fon_ris.gif"> – задать фоновую картинку (в той же папке, что страница).
Если ее размер в пикселях меньше размера ячейки, будет дублироваться. Поверх фона (не картинки) текст будет виден. background="" нужно в <td>. Можно в <tr>, но в некоторых браузерах будут проблемы.
Рассмотрим параметры cellpadding=число1 и cellspacing=число2 тега<table>. Параметр cellpadding определяет расстояние между границей ячейки и ее содержимым – целое значение в пикселях (или процентах от доступного экранного пространства). Параметр cellspacing задает расстояние между внешними границами ячеек. Если имеется параметр border, толщина границы принимается в расчет. Нулевые значения параметров cellpadding и cellspacing убирают границы таблицы.
Прочие теги
<body topmargin="0"> убирает промежуток между шапкой и сайтом.
valign="top" перемещает текст вверх.
Справочник по HTML – http://htmlbook.ru/html/.
Рекомендую просмотреть справочник по HTML, выбрать наиболее нужные, на Ваш взгляд, команды и сделать алфавитный (предметный) указатель на HTML-теги: это поможет быстро найти нужный тег, полное описание которого затем прочитать в справочнике. Один и тот же тег лучше упомянуть наибольшее число раз – неизвестно, на какую букву Вы будете искать команду, валяя, точнее, ваяя сайт. Если нужна команда, которой нет в указателе, можно набрать ее в строке поиска обозревателя. Например, «Язык HTML команда тег выравнивания по левому краю». Поначалу ваш список будет небольшим и будет расширяться по мере вашего совершенствования. Если Вы затрудняетесь в составлении списка, предлагаю свой.
Алфавитный (предметный) указатель (список) тегов
Абзац <b>
Бегущая строка <marquee></marquee>. Или изображение, текст, таблица, элементы форм и т.д. По горизонтали или вертикали.
Боковая панель см. сайдбар
Гиперссылка см. ссылка
Заголовок документа <head><title>Заголовок</title></head>. Только один на документ. Не является частью документа и не показывается напрямую на веб-странице. В Windows текст заголовка отображается в левом верхнем углу окна браузера.
Заголовок таблицы <caption>Текст</caption>
Картинка <img>. Отображает на веб-странице изображений в формате GIF, JPEG или PNG.
Кнопка <button></button>. Желательно внутри <form></form>.
Комментарий <!произвольный текст>. На веб-странице не отображается.
Контент (содержимое) <body></body>
Курсив <i>Текст</i>
Линия горизонтальная <hr>
Объекты <object width="ширина" height="высота"></object>. Сообщает браузеру, как загружать и отображать, которые он не понимает. Как правило, такие объекты требуют подключения к браузеру специального модуля, который называется плагин, или запуска вспомогательной программы.
Перенос строки <br>
Переносов запрет <nobr>Текст</nobr>. Может появиться горизонтальная полоса прокрутки.
Пробелы все отображать <pre>. Текст выводится как на пишущей машинке. Как шрифт Courier в редакторе Word. По умолчанию пробелы отображаются как один.
Сайдбар <aside></aside>
Списка элемент <li></li>. Внешний тег <ul></ul> – маркированный, <ol></ol> – маркированный список.
Список раскрывающийся <select><option>Пункт 1</option><option>Пункт 2</option></select>
Ссылка <a>
Стилей определение <style type="text/css"></style>внутри контейнера <head>.
Стиль изменить внутри других тегов <span>...</span>
Таблица <table><tr>строка<td>ячейка</td></tr></table>. См. справочник по HTML.
Таблицы заголовок <caption>Текст</caption>
Таблицы заголовочная ячейка <table><tr><th></th></tr></table>выравнивается по центру
Таблицы колонок ширина и другие характеристики <col>
Тело сайта <body></body>
Текст как есть <xmp>Текст</xmp>. Подобен печати строковой константы.
Текста добавленного выделение <ins>Текст</ins>
Удаленного текста выделение <del>Текст</del>
Форма для заполнения <form action="URL"></form>
Центровка <center> </center>
Цитат выделение <blockquote>
Шапка <header></header>
Шрифт в виде верхнего индекса <sup>Текст</sup>. Выше базовой линии.
Шрифт в виде нижнего индекса <sub>Текст</sub>. Ниже базовой линии.
Шрифт жирный <b>Текст</b>
Шрифт заголовок <h1-6></h1-6>
Шрифт моноширинный <tt>Текст</tt>. Все символы имеют одинаковую ширину.
Шрифт перечеркнутый <s>Текст</s>. Устарел. Рекомендуется использовать стили.
Шрифт подчеркнутый <u>Текст</u>. Устарел. Рекомендуется использовать стили.
Шрифт, размера и цвета текста по умолчанию <basefont>
Шрифта размера увеличение на единицу <big>Текст</big>
Шрифта размера уменьшение на единицу <small>Текст</small>
Шрифта характеристик изменения <font>Текст</font>. Устарел. Лучше стили.