Изучаем азы HTML

This item was filled under [ Начинающим блоггерам ]

Изучаем азы HTML - Эта публикация расскажет вам об основах языка HTML и его основных тегах - html, блог, тег, теги, html теги, основы html

Несмотря на то, что языком HTML необязательно владеть для ведения блога, я все же рекомендую Вам ознакомиться с его основами!

Административная панель любого блога дополнительно снабжена HTML редактором для того, чтобы Ваш текст мог выглядеть более красиво и индивидуально.

Я хочу познакомить Вас с основными тегами, при помощи которых редактируется текст.

Что такое HTML теги?

Я не претендую на роль эксперта в этой области, но говоря профессиональным языком, тег – это своеобразный код, который используется при написании текстов страниц сайта; и указывает браузерам, каким образом визуально отобразить на странице значение данного кода.

Теги обычно парные. То есть есть тег, который сигнализирует об открытии определенного значения текста, а в конце его завершает тег, который закрывает его действие. Такие теги обычно заключаются в две угловые скобки: (<>) Закрывающая скобка обычно используется вместе со слешем (/) – это и есть сигнал к завершению данного тега! Обычно эти теги выглядят так: <></>

Представляю Вашему вниманию наиболее часто используемые теги и их значение, которые Вы легко и просто сможете применить, как в блоге, так и при редактировании сайта.

Основные теги форматирования текста:

  • <b>Выделяет текст жирным</b>
  • <strong>Так же жирный, сейчас этот тег используется наиболее часто</strong>
  • <u>подчеркивание</u>
  • <i>курсив</i>
  • <em>еще одно выделение курсивом</em>
  • <strike>зачеркивание</strike>
  • <center>Этот тег центрует Ваш текст на странице</center>
  • <p>Этот тег указывает на новую строку</p>
  • <blockquotes>«цитата»</blockquotes> (Этот тег обычно выглядит, как параграф с цитатой. Его вид зависит от заданных параметров шаблона Вашего блога.)

Теги ссылок:

  • Основная ссылка <a href=”url”>заголовок ссылки</a> (где‘url’ – это страница, на которую Вы ссылаетесь, а ‘заголовок ссылки’ – это описание страницы, на которую Вы ссылаетесь).
  • Ссылка эл.почты <a href=”mailto:Ваш e-mail”></a> (где ‘Ваш e-mail’ это ссылка на адрес Вашей электронной почты).

Теги заголовков:

  • <h1>Самый крупный и важный заголовок</h1>
  • <h2>Чуть менее важный заголовок</h2>
  • <h3>Еще менее важный заголовок</h3>
  • <h6>Самый маленький заголовок</h6>

Теги параметров текста:

  • Размер текста – <font size=”x”>редактируемый текст</font> – измените значение ‘x’ на нужный размер шрифта, где 1 – самый маленький, а 7 – самый большой.
  • Цвета – <font color=”#FF0000”>К примеру, красный!</font> (Где #FF0000 – это код для красного цвета. Коды цветов можно посмотреть здесь).
  • Вид текста – <font face=”Arial”>Привет!</font> (где Arial – это один из видов текста).

Теги картинок:

Тег самой картинки – <img src=”url”> (где url – это ссылка на само изображение)
Тег картинки с указанием ее размеров <img src=”url” width=”200″ height=”150″> (где width – ширина, height – высота).
Расположение картинки- <img src=”url” align=left> (где ‘left’ – расположение слева. Так же можно указать расположение справа – ‘right’ и по центру – ‘center’)
Тег-описание (alt) - <img src=”url” alt=”краткое описание картинки”> (этот тег предоставляет описание картинки. Это описание помогает пользователям, которые отключили загрузку картинок на страничке, примерно понять, что на ней изображено).
Тег изображения в виде ссылки – <a href=”link url”><img src=”url”></a> (где ‘link url’ это ссылка на страничку, на которую ссылается Ваша картинка, а ‘url’ это ссылка на саму картинку).
Тег картинки с рамкой – <img border=”1″ src=”url”> (чем больше число в значении border “” , тем толще будет рамочка)
Тег свободного пронстранства вокруг картинки <img src=”url” hspace=10 vspace=10> (hspace – это пространство вокруг картинки по горизонтали, vspace  – по вертикали. Указываемое число соответствует размеру пикселей.)

Ненумерованный список:

    <ul>

  • <li>первый пункт</li>
  • <li>второй пункт</li>
  • <li>третий пункт</li>
  • </ul>

Нумерованный список:

    <ol>

  1. <li>первый пункт</li>
  2. <li>второй пункт</li>
  3. <li>третий пункт</li>
  4. </ol>

Это основные теги, которые пригодятся вам для редактирования текста!

Несколько лет назад я очень подробно изучала язык HTML. Этот опыт помог мне, как в редактировании шаблонов своих блогов, так и в создании сайтов своими руками!

Мои подписчики мне часто задают вопрос, как я внесла в свой шаблон то или иное изменение. Отвечаю Вам – знание HTML просто необходимо в таких вещах! Зная теги и основы HTML, Вы самостоятельно и без особого труда сможете отредактировать любой шаблон и HTML страницу на свой вкус!

Поэтому, наберитесь терпения, изучите хотя бы основы HTML, если Вы всерьез решили заняться блогингом и заработком в интернете! :-)

Публикации по теме:

Rate this topic:
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (2 голосов, средний балл: 5.00 из 5)
Loading ... Loading ...
Popularity: 5,904 просмотров
You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

25 Comments on “Изучаем азы HTML”

  • 1 июля, 2009, 22:54

    А ты с div разобралась? У меня до сих пор затык по этой теме…

  • 2 июля, 2009, 20:56

    Да, просто не стала абсолютно все сюда публиковать :lol:

  • 2 июля, 2009, 21:22

    Вау! Жду тогда про Div :smile:

  • 16 июля, 2009, 0:17

    :wink: самый маленький заголовок ……учите……

  • 16 июля, 2009, 10:33

    так а чего рассусоливать, краткость – сестра таланта :grin:

  • 18 июля, 2009, 8:07

    Хорошая, практичная заметка :grin: Знание html действительно полезно, хотя бы для того чтобы придать шаблону своего блога долю индивидуальности

  • 18 июля, 2009, 14:55

    htmlbook.ru – с него все изучают HTML. Кстати, в WordPress’e. если не ошибаюсь используется XHTML, поэтому, для блогинга учите XHTML=) Разницы между HTML и XHTML мало, XHTML более стандартизирован, введено несколько новых тегов…

  • 22 июля, 2009, 12:50

    Я бы еще посоветовал http://csstool.ru/. Мало того, что сервис полезен практически, так еще можно и научиться качественно верстать div’ами разбирая то, что выдал csstool. Рекомендую.

  • 9 августа, 2009, 14:12

    Леонтьев Дмитрий: Не плохо но я отдаю должное ручной верстке! Настя залей еще css а для тех кому интересно отличный мануал http://css.manual.ru.

  • 12 августа, 2009, 18:41

    «подчеркивание» – здесь помоему закрывающий тэг просто :?:

  • 2 сентября, 2009, 20:49

    Точно азы! Прочитав такую статью складывается мнение, что html – уж очень прост и очень ограничен:)

  • 2 сентября, 2009, 20:52

    Так и есть! И так бывает очень часто, как говорится: «Не так страшен зверь, как его рисуют» :lol:

  • 3 сентября, 2009, 16:00

    HTML не то что прост – он мега прост, это же просто для разметки страницы :)

  • 19 октября, 2009, 22:19

    Скоро в обиходе появится новый HTML

  • 18 ноября, 2009, 17:33

    Анастасия, а подскажите, пожалуйста, Ваш сайт http://forever-aloe.ru/index.html на каком-то движке сделан или самостоятельно сверстан?

  • 20 ноября, 2009, 16:28

    Да, я согласен, что все начинают с http://www.htmlbook.ru/. На данный момент нельзя обходится без знания блочного построения сайта, так что div – для понимания html. Всем советую посмотреть материалы Е. Попова. Отлично все человек рассказывает. Найти в свободном доступе очень легко, но если хотите дам жаждущим ссылку.

  • 22 ноября, 2009, 5:10

    HTML это лишь начало пути для вебдевелопера. :)
     
    А что про Div  писать то ? 

    Просто одни верстают через Div а другие через Table, вот и все. 
    У DIV верстки на много больше преимуществ,но Холиваров на эту тему (что лучше table или div) очень много. 

    Правильное решение
    80% div 
    20% table

    И.М.Х.О

  • 24 ноября, 2009, 15:17

    Елена, мой сайт по бизнесу сверстан самостоятельно, там нет движка. Хотя, некоторые ссылки ведут на блог на движке wordpress – http://flp-aloe.ru По дизайну они схожи только шапкой. ;-)

  • 24 ноября, 2009, 15:21

    Я согласна с тем, что о div и table не стоит спорить, каждый может использовать то, что ему удобнее. Именно поэтому я не включила их в статью. Ведь для азов достаточно и того, что я написала, а если уж углубляться в html с головой, то тут и css пользоваться не помешает и т.д :grin:

  • 25 ноября, 2009, 12:00

    Все верно, просто я сторонник Div по одной простой причине – div подгружается последовательно, таблица же пока не загрузит все содержимое, соответсвенно вывод, если содержимое страницы велико, нельзя верстать таблицей. Не у всех хороший интернет-канал.

  • 30 ноября, 2009, 18:31

    Анастасия, исправьте ошибку в тексте: закрывающий тег для подчеркивания не /ul, а /u :) )

    От себя для изучения html советую Учебник HTML для начинающих (Алленова Н.). В Сети его много, написано все просто и с примерами. Сам по нему когда-то html учил. А еще про CSS можно почитать:)

  • 30 ноября, 2009, 23:58

    ой, действительно! большое спасибо, даже и не заметила :grin:

  • 12 марта, 2010, 22:17

    Анастасия, добрый день. Очень понравился Ваш сайт, «наткнулась» случайно. БУДУ ЧИТАТЬ ОБЯЗАТЕЛЬНО! Некоторых «учителей»-блоггеров просто удалю из избранного:)). Спасибо за уроки. Мне все очень интересно. Браво! Успехов Вашему бизнесу :) .

  • 16 августа, 2010, 22:13

    На самом деле для азов вполне достаточно но с этими знаниями сверстать что то будет трудновато :|

  • 15 февраля, 2011, 22:41

    Для начала этого вполне достаточно.

Leave a Comment

Я не робот.