Работа с текстом в HTML.
Здравствуй мой дорогой читатель. В этой статье я хочу с тобой поделиться своими знаниями в области создания веб-страниц. Да, речь пойдет о html.
Конечно, если ты уже знаешь что это такое и как этим пользоваться, это очень хорошо. Но если ты новичок в этой области давай вспомним: Что же такое html?. Как говорил Юрий Алексеевич Гагарин «Поехали»!
HTML - расшифровывается как ( H- yper T-ext M-arkup L- anguage) , язык гипертекстовой разметки. Что же такое гипертекст HyperText?- спросите вы. Если говорить простым языком - это обычный текст, просто он имеет отсылку к другому тексту, ресурсу или контенту.
ГиперТекст – этот термин пришёл к нам из литературы. Да, да вы не ошиблись в прочитанном, именно там ( в литературе) всегда присутствует гипертекст. Не верите? Тогда откройте любую литературу, сборник. В начале любой книги, всегда присутствует оглавление. Так вот оглавление - это и есть гипертекст, так как оно содержит ссылки на другие страницы. Значит с гипертекстом вроде, разобрались. Теперь разберёмся со следующим «сложным» словом в этой области. Это - язык разметки.
На начальном этапе, все сайты представляют собой просто страницы с текстом, картинками и ссылками. Эта разметка и есть html. Так сказать своеобразный word документ только для веб - сайта. Что бы было более понятно, сейчас объясню на примере.
Представим наш сайт как постройку дачи. Для начала нам понадобится чертёж план, что бы понять, где и что будет находиться (окно, дверь, кухня). HTML как раз таки выполняет роль такого чертежа для нашего сайта. А после мы будем решать: как будут выглядеть наши стены, двери и окна. HTML разметку можно увидеть на любой странице. Что же для этого нужно сделать?. Выполняем всё в такой последовательности: заходим на любой сайт кликаем правой кнопкой мыши в меню выбираем «Просмотр кода страницы», и мы попадаем прямо в HTML.
Основной работой HTML является описание сайта, точнее, что в нём находится: картинки, видео, текст или же ссылки. А описывает HTML всё при помощи слов, называются они «Теги». Именно теги являются основными, так сказать ключевыми словами языка HTML.
Заключаются теги в угловые скобки и чаще всего их употребляют парно. Например: <тег> контент </тег>.
Вот вам несколько тегов, которые понадобятся в работе.
1. Тег <abbr> - указывает на то, что последовательность символов является аббревиатурой.
2. Tег <acronym> - сообщает, что текст является акрономом. В отличие от аббревиатуры, акроном - является устоявшим сокращением, которое может использоваться как самостоятельное слово.
3. Тег <address> - является своего рода хранилищем. Используется для сохранения информации об авторе.
4. Тег < b> - устанавливается стиль жирного шрифта
5. Тег <basefont> - предназначается для установки шрифта, размера и цвета текста по умолчанию.
6. Тег <bdo> - устанавливает направление вывода текста: слева направо или же справа налево.
7. Тег <big> - в отличие от обычного текста, этот тег увеличивает размер шрифта на единицу.
8. Тег <blink> - устанавливается мигающий текст
9. Тег <blockquote> - предназначается для выделения длинных цитат в документе.
10. Тег <cite> - помечает текст как цитату или сноску на другом материале.
11. Тег <code>- предназначается для отображения текста программного кода.
12. Тег <del>- используется для выделения текста, который был удалён в новой версии документа.
13. Тег <dfn>-этот тег предназначен для выделения термина в документе.
14. Тег <em> - предназначается для акцентирования текста.
15. Тег <font> -предназначается для изменения характеристик шрифта, таких как размер, цвет и гарнитура.
16. Тег <h1>- используется для заголовка первого уровня.
17. Тег <h2>- задаёт заголовок второго уровня.
18. Тег<h3>- заголовок третьего уровня.
19. Тег<h4>- предназначается для заголовка четвёртого уровня.
20. Тег<h5>-устанавливает заголовок пятого уровня.
21. Тег<h6>- задаёт заголовок шестого уровня.
22. Тег<i>- устанавливает курсивное начертание шрифта.
23. Тег<ins>- предназначается для выделения текста, который был добавлен в новую версию документа.
24. Тег<kbd>- используется для названия клавиш, или для обозначения текста, который набирается на клавиатуре.
25. Тег<mark>- оставляет пометку на тексте как выделенный текст.
26. Тег<nobr>- уведомляет браузер отображать текст без переносов.
27. Тег<p> - этот тег определяет текстовый абзац.
28. Тег<plaintext> - показывает (отображает) содержимое контейнера «как есть».
29. Тег<q> - используется для выделения в тексте цитат.
30. Тег<rp>- используется для вывода текста в браузерах, которые не поддерживают такой тег <ruby>.
31. Тег<rt>- добавляет аннотацию сверху или снизу от текста, заключённого в контейнер <ruby>.
32. Тег<ruby>- предназначен для добавления небольшой аннотации сверху или снизу от заданного текста.
33. Тег<s> - показывает текст как перечёркнутый.
34. Тег<samp> - обычно используется для показа текста, т.е. отображает. его, в свою очередь этот текст является результатом вывода . компьютерной программы.
35. Тег<small>- если сравнивать обычный текст, то этот тег уменьшает . размер шрифта на единицу.
36. Тег<strike>- этот тег отображает текст как перечеркнутый .
37. Тег<strong>- делает акцент в тексте, обычно жирным начертанием.
38. Тег<sub>- показывает текст в виде нижнего индекса.
39. Тег<sup>- отображает текст в виде верхнего индекса.
40. Тег<tt>- отображает текст так сказать моноширинным текстом.
41. Тег<u>- добавляет подчёркивание к тексту.
42. Тег<var>- выделяет переменные компьютерные программы.
43. Тег<wbr>-показывает браузеру место, где допускается делать перенос строки в тексте.
44. Тег<xmp>- отображает содержимое контейнера «как есть» и шрифтом фиксированной ширины.
Ну, вроде бы с тегами разобрались, переходим дальше.
Любой тег имеет «атрибуты». Атрибуты расширяют возможности тегов. Пишутся атрибуты внутри открывающего (первого) тега. Давайте посмотрим пример.
<p align = "center"> сюда вводится текст </ p>.
P- является тегом абзаца.
align = "center" - это атрибут тега <p> с дополнительными правилами.
И да совсем забыла, обязательно нужно ставит слэш «/» внутри закрывающего тега, перед именем. Это не менее важно. Выглядеть всё должно примерно так:
<тег атрибут= значение> контент </тег>, <p align = "center"> контент </ p>.
Обычно для одного тега доступно несколько атрибутов. Порядок перечисления атрибутов не имеет значения.
Каждый тег выполняет определённую функцию. Что бы научиться создавать веб-страницы, нужно точно знать, для чего тот или иной тег используется. Тег – это определённая команда браузера. Браузер понимает эту команду и соответственно выводит нам на экран определённую информацию, которую уже отформатировал определённым образом. Поэтому сам код мы увидеть не сможем.
Многие структуру HTML сравнивают с деревом. Так вот тег это его ствол, так сказать основа основ. После ствол разделяется на две большие ветви. Называются они <head> и <body>.
Обычно в <head> указывают информацию, которая необходима браузеру и поисковым системам, а так же подключаются стили для визуального оформления страниц. Весь текст, графика и прочие коды, которые мы видим на странице, должен находиться внутри тега <body>.
Давайте подведём итог, что же такое HTML?
HTML- это язык, который создавался для того, что бы помочь браузеру понять, из каких частей состоит веб-страница. Поэтому все структуры языка, познания тегов и как их писать очень важно. Я очень надеюсь, что моя статья помогла разобраться с работой над текстом HTML.