Общая структура html-документа:
<!DOCTYPE html>
<head>
<title>Заголовок страницы </title>
</head>
<body>Тело, основная часть</body>
</html>
А теперь подробненько:
<!DOCTYPE html>
<head>
<!-- комментарий-->
<!--Указываем кодировку utf-8-->
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<meta name="author" content="Автор страницы" />
<meta name="copyright" content="Копирайт: Гнёзда Химер" "Макс Фрай" />
<meta name="keywords" content="Ключевые слова" />
<meta name="description" content="Мета описание" />
<meta name="Publisher-Email" Content="Ваш_e-mail@сервер.домен">
<meta name="Publisher-URL" Content="http://www.Ваш_сайт/">
<!-- Обновление страницы раз в 7 дней. При необходимости-->
<meta name ="revisit-after" Content="7 days">
<!--Подключаем css при необходимости-->
<link rel="stylesheet" type="text/css" href="style.css"/>
<!-- Запрет кеширования страницы. Тоже при необходимости-->
<meta http-equiv="pragma" content="no-cache">
<!-- Отдельно о контенте:
Список возможных команд для поискового робота:
Index - индексировать страницу
Noindex - не индексировать страницу
Follow - прослеживать гиперссылки на странице
Nofollow - не прослеживать гиперссылки на странице
None - не индексировать страницу и не прослеживать гиперссылки на странице
-->
<meta name="robots" content="Index,follow">
<title>Заголовок страницы </title>
</head>
<body>
<!--Первое предложение-->
<br>
<H1>Огромный шрифт</H1><br>
<H2>Шрифт поменьше</H2>
<!--Новый параграф, где текст расположен по центру-->
<p align=center>Какой-то параграф</p>
<!--Увеличение размера шрифта-->
<font size="+2">Текст другого размера</font>
<font color="#ffffff" >Меняем цвет и текста</font>
<!--Стиль текста-->
<b>Полужирный текст </b>
<i> Наклонный текст</i>
<u> Подчёркнутый текст</u>
<ins>Как правило подчёркнутый))</ins>
<strike>Перечеркнутый текст</strike>
<s> Тоже перечёркнутый</s>
<del>Рекомендуемый перечёркнутый</del>
<tt> Моноширный</tt>
<small>Малый</small>
<big> Большой</big>
<sup> Верхний индекс</sup>
<sub> Нижний индекс</sub>
<cite>Цитата</cite>
<q>Цитата в кавычках</q>
<address> На деревню дедушке.</address>
<code>Обозначение программного кода</code>
<dfn>Определение. Ну, термина какого-нибудь</dfn>
<em>Важный фрагмент текста</em>
<kbd>Для названия клавиш: Ctrl + A</kbd>
Полужирный текст Наклонный текст
Подчёркнутый текстКак правило подчёркнутый))
Перечеркнутый текст
Тоже перечёркнутыйРекомендуемый перечёркнутый
Моноширный
Малый
Большой Верхний индекс Нижний индекс
Цитата
Цитата в кавычкахНа деревню дедушке.
Обозначение программного кода
Определение. Ну, термина какого-нибудь
Важный фрагмент текста
Для названия клавиш: Ctrl + A
<pre>Вставляем отформатированный текст</pre>
Вставка картинки:
<img src="img.jpg" align="left" title="описание картинки">
<center><img src="img.jpg" width="150" height="300" alt="описание картинки"></center>
<!--Табличная вёрстка-->
<table border="1" bgcolor="white" cellspacing=0 cellpadding="15" width="640" height="480">
<tr>
<td colspan="5" height="30"><center>Шапка</center></td>
</tr>
<tr>
<td height="30" width="20%"><center>Главная</center></td>
<td width="20%"><center>О нас</center></td>
<td width="20%"><center>Продукт</center></td>
<td width="20%"><center>Услуги</center></td>
<td width="20%"><center>Цены</center></td>
</tr>
<tr>
<td valign="top">Левая колонка:</td>
<td colspan="4"><center>Основная часть</center></td>
</tr>
<!--Блочная вёрстка-->
<style type="text/css">
#body1{
width:640px;
height:480px;
}
#header{
background: gray;
}
#ul, li{
display:inline;
}
#aside{
background: gray;
width:20%;
float:left;
}
</style>
<div id="body1">
<center><div id="header" >Главная</div></center>
<center><div id="nav"></center>
<ul>
<li>О нас</li>
<li>Продукт</li>
<li>Услуги</li>
<li>Цены</li>
</ul>
<div id="aside">Левая колонка</div>
<center><div id="article">Основная часть</div></center>
</div>
</div>
<!--Ставим ссылки-->
<a href="адрес.html">Куда ведёт ссылка</a>
Ссылка в виде рисунка
<a href="link.html" title="Описание"><img src="images.gif"></a>
Пишем письмо
<a href="mailto:ваш@майл.com?subject=Тема письма
&Body=Текст сообщения &cc=копия@сообщения.ru &bcc=скрытая@копия.ru"> Для почты </a>
</table>
Заглушки для мест, где ссылка будет, но пока не известно куда
<a href="#glava1"> Глава1</a>
<a href="#glava2"> Глава3</a>
<a href="#glava3"> Глава3</a>
Глава1 Глава3 Глава3
Заставляем текст бегать
<marquee>Бегущая строка по умолчанию</marquee>
<marquee direction="right">Бегущая строка слева направо</marquee>
<marquee behavior="alternate">Бегущая строка бегает от края к краю</marquee> <marquee scrollamount="10">Бегущая строка со скоростью 10</marquee>
<marquee scrollamount="1">Бегущая строка со скоростью 1</marquee>
<marquee direction="right" loop="2">Эта строка будет прокручиваться только два
раза</marquee>
<marquee behavior="slide">Бегущая строка с остановкой</marquee>
© Какой-то длинный и красивый текст
<marquee bgcolor="#b40000"><font color="#ffffff">Бегущая строка с фоном</font></marquee>
<marquee width=400>Бегущая строка с ограничением ширены прокрутки</marquee>
<marquee direction="up">Бегущая строка снизу вверх</marquee>
<marquee hspace="300">Бегущая строка с отступами от границ</marquee>
Неупорядоченные списки
<ul>
<li type="disk"> диск (по умолчанию)
<li type="circle"> полый круг
<li type="square"> квадрат
</ul>
- диск (по умолчанию)
- полый круг
- квадрат
Арабские цифры
<ol type="1">
<li>Во-первых
<li>Во-вторых
</ol>
Строчные буквы
<ol type="a">
<li>Во-первых
<li>Во-вторых
</ol>
Заглавные буквы
<ol type="A">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
</ol>
Строчные римские цифры
<ol type="i">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвѐртых
</ol>
Заглавные римские цифры
<ol type="I">
<li>Во-первых
<li>Во-вторых
<li>В-третьих
<li>В-четвѐртых
</ol>
Арабские цифры
- Во-первых
- Во-вторых
- Во-первых
- Во-вторых
- Во-первых
- Во-вторых
- В-третьих
- Во-первых
- Во-вторых
- В-третьих
- В-четвѐртых
- Во-первых
- Во-вторых
- В-третьих
- В-четвѐртых
<dl>
<dt> Определения:
<dd> Первое определение
<dd> Второе определение
<dd> Третье определение
<dt> Названия дистрибутивлв линуск:
<dd> Gentoo
<dd> Arch
<dd> Debian
<dd> Red Hat
</dl>
Списки определений
- Определения:
- Первое определение
- Второе определение
- Третье определение
- Названия дистрибутивлв линуск:
- Gentoo
- Arch
- Debian
- Red Hat
<!--<meta http-equiv="Refresh" content="2; URL=http://www.archlinux.org.ru/index.php">-->
<!--meta http-equiv="Refresh" - Refresh заставляет браузер обновить страницу
content="2; - обновить через заданное количество секунд
URL=http://www.mysite/index.html"- адрес страницы, на которую следует перейти.-->
Эффекты при переходе по ссылке
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=0)">
<meta http-equiv ="Page- Exit " Content="RevealTrans(Duration=3.0, Transition=23)">
Взуальные эффекты при переходе с одной страницы на другую.
Page-Enter - Эффект появления страницы
Page- Exit - Эффект исчезновения страницы
Duration - время действия эффекта в секундах
Transition - Один из номеров предлагаемых эффектов, перечисленных ниже:
0 - Прямоугольники внутрь
1 - Прямоугольники наружу
2 - Круг внутрь
3 - Круг наружу
4 - Наплыв наверх
5 - Наплыв вниз
6 - Наплыв вправо
7 - Наплыв влево
8 - Вертикальные жалюзи
9 - Горизонтальные жалюзи
10 - Шажки горизонтальные
11 - Шажки вертикальные
12 - Растворение
13 - Вертикальная панорама внутрь
14 - Вертикальная панорама наружу
15 - Горизонтальная панорама внутрь
16 - Горизонтальная панорама наружу
17 - Уголки влево - вниз
18 - Уголки влево - вверх
19 - Уголки вправо – вниз
20 - Уголки вправо – вверх
21 - Случайные горизонтальные полосы
22 - Случайные вертикальные полосы
23 - Случайный выбор эффекта
Проигрывание музыки на сайте обеспечивается только одним тегом, вставленным между тегами <head></head>:
<bgsound src="mymusic.mid" loop="-1" volume="-800" balance volume="1500">
src - адрес звукового файла
loop - сколько раз подряд будет проигрываться аудио файл, 0 и 1 - один раз, -1 - бесконечно.
balance - стереобаланс между правой и левой колонками
volume - громкость
</body>
</html>
Пожалуй, повседневное применение этим и ограничивается. Надеюсь, эта заметка поможет вам припомнить html, который вы учили когда-то. Пробежаться глазами по строкам и освежить в памяти свои знания. Хотя никогда не помешает иметь под рукой html-справочник.
2 коммент.: (+add yours?)
Огромное спасибо за шпаргалочку!
Пожалуйста ;)
Отправить комментарий
Примечание. Отправлять комментарии могут только участники этого блога.