|
||||||||||||||
Меню сайта
Реклама на сайте:
|
Базовые тегиУрок №3 Теги — это управляющие команды, которые были придуманы для того, чтобы отформатировать текст, т.е. теги говорят браузеру о том, как именно нужно вывести на экран часть текста, заключенную в теги. Для создания тега между угловыми скобками вводится HTML-код, который предназначен только для браузеров. Базовые теги (основные)В основе языка HTML лежит понятие «тэг» (англ.tag-ярлык,). Тэги заключаются в угловые скобки (< >) и образуют пары – контейнеры (открывающий тэг и закрывающий). Например, контейнером HTML документа является пара тэгов <html> и </html>. В web-странице включены контейнеры, отвечающие за заголовок документа это: Голова который содержит дополнительную информацию, а также контейнеры, отвечающие за само содержание документа это: Тело. (Пример на рисунке.) Как уже отмечалось выше, все теги начинаются с угловой скобки < и заканчиваются угловой скобкой > . После открывающей угловой скобки следует имя тега (команды). Например, тег <p> выводит текстовый абзац (допускает атрибуты style, class, id). 1. HTML тег <p></p> (Используется для абзацев)Рассмотрим пример: <p>Абзац текста.</p> <p>Следующий абзац текста.</p> Как это будет выглядеть на странице:
Итак, мы расмотрели пример с тегом <p>, далее предлагаю ознакомиться с полным списком html тегов. Список тегов html2. HTML тег <b> и </strong> (Выделение жирным)<strong></strong> и <b></b>— Это два тега, которые позволяют сделать шрифт жирным. Разницы между этими тегами нет, но чаще всего используется тег <b> Рассмотрим пример: <b>жирный текст</b> Как это будет выглядеть на странице: Жирный текст. Также как и в случае с <p> можно прописать атрибуты (class и id) 3. HTML тег <em> (Предназначен для акцентирования текста. Создание курсива)<em></em> -Курсивный шрифт (допускает параметр style, class, id) Рассмотрим пример: <em>Курсивный текст.</em> Как это будет выглядеть на странице: Курсивный текст. На протяжении долгих лет использовался тег <i> </i>. С приходом в нашу жизнь HTML5 стали использовать тег <em></em>. Отныне тег <i> </i> содержит текст, выбивающийся из общего окружения, но не имеющий эмоциональной окраски. На мой взгляд, <i> логично использовать там, где типографская традиция предполагает курсив (например, слова на иностранном языке, термины и др.) 4. HTML тег <u></u> (Подчеркнутый текст)<u></u> -Подчеркнутый шрифт (допускает параметр style, class, id) а так же, html код: Рассмотрим пример: <u>Подчеркнутый текст.</u> Как это будет выглядеть на странице: Подчеркнутый текст. 5. HTML тег <a></a> (Позволяет создавать гиперссылки)<a href="links"></a> — Создает ссылку на странице (допускает параметр style, class и другие). Рассмотрим пример: <a href="http://webps.ru/">текст ссылки</a> Как это будет выглядеть на странице: Веб поскриптум 6. HTML тег <h1></h1> (Заголовки на странице контента)Существует специальный тег для указания заголовков в HTML. Всего шесть уровней заголовков в HTML, начиная от <h1> для наиболее важных объявлений, до <h6> для наименее важных. (допускает параметр style, class и другие). Рассмотрим пример: <h1>Заголовок h1.</h1> Как это будет выглядеть на странице:
Тег <h1> используют для названия страницы, также как и title этот тег оказывают больше влияние на ранжирование сайта. 7. HTML тег <center></center> (Выравнивание)<center></center> Выравнивает содержимое контента по центру страницы. Рассмотрим пример: <center>Например: Этот текст будет находится в центре страницы.</center> Как это будет выглядеть на странице:
В настоящие время тег <center></center> , используется редко, вместо него принято писать такие конструкции:
8. HTML тег <sub></sub> (Подстрочный текст)<sub></sub> Выводит подстрочный шрифт. Рассмотрим пример: Это обычный текст. <sub>А это подстрочный текст.</sub> Как это будет выглядеть на странице: Это обычный текст. А это подстрочный текст. Как видите "Разница на лицо". 9. HTML тег <sup></sup> (Надстрочный текст)<sup></sup> Выводит надстрочный шрифт. Рассмотрим пример: Это обычный текст. <sup>А это надстрочный текст.</sup> Как это будет выглядеть на странице: Это обычный текст. А это надстрочный текст. 10. HTML тег <big>и</small> (Относится к размеру: большой маленький)<big></big> <small></small> Выводит шрифт на один пиксель больше-меньше текующего размера (допускает параметр style, class, id). Рассмотрим пример: Это обычный текст. <big>Это большой текст.</big> <small>Это маленький текст.</small> Как это будет выглядеть на странице: Это обычный текст. Это большой текст. Это маленький текст. 11. HTML тег <ul></ul> (Создание списков)<ul><li>***</li></ul> Выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li> Рассмотрим пример: Список: <ul> <li>Первый элемент списка<li> <li>Второй элемент списка<li> <li>Третий элемент списка<li> </ul> Как это будет выглядеть на странице:
12. HTML тег <ol></ol> (Нумерация списков)<ol><li>***</li></ol> Выводит список (допускает параметр style, class, id). Каждый новый элемент записывается между <li> и </li> Рассмотрим пример: Список: <ol> <li>Первый элемент списка<li> <li>Второй элемент списка<li> <li>Третий элемент списка<li> </ol> Как это будет выглядеть на странице:
Как видите мы заменили тег <ul> на <ol> и получили нумерацию списка, то есть изменился маркер на цифру. 13. HTML тег <table></table> (Создание таблиц)<table></table> Создает таблицу (допускает параметр style, class). Рассмотрим пример: <table border="1"> <tr><td>Ячейка 1</td><td>Ячейка 2</td></tr> <tr><td>Ячейка 3</td><td>Ячейка 4</td></tr> </table> Как это будет выглядеть на странице:
Атрибуты таблицы<table></table>. 14. HTML тег <br /> (Перенос строки)<br /> Переход на следующую строку, представляет собой одиночный тег. Рассмотрим пример: Первая строка. <br/>Вторая строка. <br/>Третия строка. Этот текст будет на третей строке, поскольку перехода не было Как это будет выглядеть на странице: Первая строка. Тег <br/> попросту разбивает строку. 15. HTML тег <img></img> (Oпределяет изображение.)<img src="ссылка_на_изображение"> Выводит изображение, представляет собой одиночный тег (допускает параметр style, class). Рассмотрим пример: <img src="http://webps.ru/img/kloyn.jpg"> Как это будет выглядеть на странице: 16. HTML тег <hr/> Cоздает горизонтальную линию.<hr/>Представляет собой одиночный тег (допускает параметр style, class). Рассмотрим пример: К примеру здесь находится какой-то текст над линией <hr> А этот текст будет уже под линией Как это будет выглядеть на странице: К примеру здесь находится какой-то текст над линией 17. HTML тег <div> Oпределяют секцию документа<div></div> Cлужит для создания блоков на странице (допускает параметр style, class). Раньше для разметки на страницах пользовались в основном таблицами. После появления тега <div> задача упростилась. Практически все сайты содержат <div> блоки, как удобную альтернативу таблицам. 18. HTML тег <form> Oпределяет HTML формы<form></form> Cоздание формы на странице (допускает параметр style, class). Рассмотрим пример: <html> Как это будет выглядеть на странице: 19. HTML тег <!------> Теги комментариевКомментарии служат ориентиром внутри исходного кода – комментируют участки кода, при этом, они не видны в браузере. Рассмотрим пример: <!DOCTYPE HTML> Также комментарии могут содержать инструкции к программным сценариям.
Читайте также:
|