Введение и основные понятия создания сайтов HTML
advertisement
Введение и основные понятия создания сайтов 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 &nbsp; &#160; Неразбиваемый пробел &amp; &#38; Амперсанд & &quot; &#34; Двойная кавычка " &lt; &#60; Знак "меньше" < &gt; &#62; Знак "больше" > &copy; &#169; Копирайт © &reg; &#174; Зарегистрировано ® &trade; &#153; Торговая марка ™ &frac14; &#188; Одна четвертая ¼ &bull; &#8226; Маленький черный кружок • Итоги Основные сведения о языке разметки HTML-разметка: - Элементы - Тэги Основные элементы разметки Атрибуты элементов Специальные символы Текстовые элементы разметки
