Введение и основные понятия создания сайтов HTML

реклама
Введение и основные понятия
создания сайтов HTML
HTML (от англ. Hypertext Markup Language - «язык разметки гипертекста») - это
стандартный язык разметки документов во Всемирной паутине. Практически
все веб-страницы создаются при помощи HTML.
Сайт - совокупность электронных документов (файлов) в компьютерной сети,
объединённых под одним адресом (доменным именем) и относящихся к единой
тематике.
Программы редакторы HTML-кода:
Notepad++
Sublime Text 3
Adobe Dreamweaver
Простая страница на HTML5
<!doctype html>
<html>
<head>
<!-- Здесь размещается служебная информация. Пользователь
ее не видит. -->
<meta http-equiv="Content-Type" content="text/html; charset=utf8">
<title>
Заголовок документа
</title>
</head>
<body>
<!-- Здесь размещается содержание документа. Именно это
видит пользователь. --> Тело документа
</body>
</html>
Заголовок документа
</head>
</title>Заголовок документа</title>
</head>
Тело документа
<body>
<h1>...</h1> <!-- заголовок -->
<hr> <!-- горизонтальная линия -->
<p>...</p> <!-- абзац -->
</body>
Заголовки (страницы, статьи,
реферата…)
Абзац
<p>Определяет текстовый абзац. Тег <p> является блочным элементом, всегда
начинается с новой строки, абзацы текста идущие друг за другом разделяются
между собой отбивкой.</p>
<p>Величиной отбивки можно управлять с помощью стилей. Если закрывающего
тега нет, считается, что конец абзаца совпадает с началом следующего блочного
элемента.</p>
Блочные элементы
Блочные элементы создают невидимый блок на
всю возможную ширину и заставляют
выводится следующий за блочным элементом
текст с новой строки
<h1>Заголовок страницы</h1>
<h2>Заголовок раздела</h2>
<p>Текст абзаца</p>
Строчные элементы
Строчные элементы окружают текст, но не создают
блочной области (создаваемая область похожа на ленту).
<p>
Текст<font color="red">абзаца</font>
</p>
Коротко о цвете
0123456789ABCDEF
#RRGGBB
Диапазон: 00 - FF (0 - 255)
#FF0000 – красный
#00FF00 - зеленый
#0000FF - синий
#FFFFFF - белый
#000000 – черный
#FC0FC0 - розовый
Горизонтальная линия
<h1>Текст заголовка</h1>
<hr>
<p>Текст параграфа</p>
Разрыв строки
<p>Мой дядя самых честных правил, <br>Когда не в
шутку занемог, <br>Он уважать себя заставил <br>И
лучше выдумать не мог.</p>
Атрибуты элементов
<h1 align="center">Заголовок</h1>
<p>Мой дядя самых честных правил, Когда
не в шутку занемог, Он уважать себя
заставил И лучше выдумать не мог.</p>
Блочная цитата
<p>Цитата из книги "Капитанская дочка" А.С. Пушкина оформлена при помощи тега блочного
цитирования</p>
<blockquote><p>Белогорская крепость находилась в сорока верстах от Оренбурга. Дорога шла
по крутому берегу Яика. Река еще не замерзала, и ее свинцовые волны грустно чернели в
однообразных берегах, покрытых белым снегом. За ними простирались киргизские степи. Я
погрузился в размышления, большею частию печальные. Гарнизонная жизнь мало имела для
меня привлекательности. Я старался вообразить себе капитана...</p></blockquote>
Форматирование текста
<i> - курсив
<em> - выделение важных фрагментов курсивом
<b> - полужирный
<strong> - выделение особо важных фрагментов
полужирным
<u> - подчеркнутый
<s> - перечеркнутый
<tt> - моноширинный
<big> - увеличивает размер шрифта на единицу
<small> - уменьшает размер шрифта на единицу
<sup> - надиндекс 23
<sub> - подиндекс H2O
Специальные символы HTML
 
 
Неразбиваемый пробел
&
&
Амперсанд
&
"
"
Двойная кавычка
"
<
<
Знак "меньше"
<
>
>
Знак "больше"
>
©
©
Копирайт
©
®
®
Зарегистрировано
®
™
™
Торговая марка
™
¼
¼
Одна четвертая
¼
•
•
Маленький черный
кружок
•
Итоги
 Основные сведения о языке разметки
 HTML-разметка:
- Элементы
- Тэги
 Основные элементы разметки
 Атрибуты элементов
 Специальные символы
 Текстовые элементы разметки
Скачать