***Внимание! Авторская позиция сайта "Творческая Мастерская": наш сайт ни в коем случае не претендует на авторское право расположенных на нем материалов! Все права на материалы принадлежат их владельцам! Все представленные материалы получены из открытого доступа в интернете и предназначены только для личного ознакомления, после просмотра их необходимо удалить с вашего компьютера! Если вам понравилось что-либо, то Вы должны купить лицензионную версию представленного материала или сам материал у автора. Данный проект является некоммерческим, поэтому авторы не несут никакой материальной ответственности. Многие наши форумчане являются авторами работ, представленных на форуме. При размещении У ВАС авторских уроков, мастер-классов, фотографий работ, отрисовок наших форумчан и т.д. - указание активной ссылки на наш сайт обязательно! Если вы являетесь автором размещенного у нас материала без активной ссылки, свяжитесь с нами.***

Творческая мастерская

Меню сайта

Мини-чат
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Модератор форума: irgri  
Форум » Администрация » Помощник по форуму и не только.. » Страшный-нестрашный HTML код (В помощь начинающим (и не только) блогерам)
Страшный-нестрашный HTML код
alisychДата: Воскресенье, 10.04.2011, 23:19 | Сообщение # 1
Группа: Модераторы
Сообщений: 2527
Статус: Offline
Внимание! Данная статья является моей авторской. Поэтому, если вы хотите разместить ее где-то, то активная ссылка на нее является ОБЯЗАТЕЛЬНОЙ.
Кроме того я буду писать продолжение, так, что заглядывайте.

Многие из нас имеют блоги, кто-то решает завести блог впервые и вот там-то мы все и сталкиваемся с тем, что привычный на форуме код там не работает. В блогах тоже есть кнопочки для вставки изображений и ссылок, но не всегда понятно где они находятся. А код многих пугает, т.к. совершенно непонятно, что это за буковки и знаки. Для того чтобы не бояться я решила написать обзорную статью, которую буду постепенно дополнять. Чтобы все мы понимали, что такое HTML код и «с чем его едят».

Итак, начну издалека. Хочу вам сказать, что сайты, такие красивые, подмигиваеющие нам баннерами и пестрящие картинками, на самом деле изначально выглядят примерно вот так:

А когда мы открываем сайт то видим вот эту билеберду в таком виде

Почему же так происходит? Дело в том, что сайты изначально и пишутся вот этими закорючками, которые называются HTML - Hypertext Markup Language или говоря по русски язык гипертекстовой разметки. Бывают сайты программируемые. Там применяется язык программирования – в основном это PHP. В PHP все еще более запущено чем в HTML и его мы рассматривать не будем.

Почему же мы видим не закорючки, а красивые сайты? А потому что мы смотрим на них через программы интерпретаторы. Тоесть вот эти все Microsoft Internet Explorer, Mozilla Firefox, Opera и т.д. как раз и являются такими интерпретаторами, грамотно называемыми браузер (от англ. Browser – обозреватель).

А теперь давайте разберемся, каким макаром браузер это все безобразие интерпретирует.
Давайте вспомним Microsoft Word – текстовый редактор, которым мы в той или иной степени все пользуемся. Когда мы набираем текст в Ворде, то он изначально набирается одинаковым шрифтом, никак не выделяясь. Для того, чтобы выделить какое-то слово или предложение, мы выделяем нужное и жмем на кнопочки Ж, К и т.д. В результате получаем текст полужирным начератнием, курсивом, другим цветом и т.д.
В случае с браузером все несколько сложнее. Кнопочек у него нет. И чтобы он понял, что текст нужно сделать полужирным или курсивом или другим цветом и т.д. – браузеру в письменной форме нужно отдать соответственную команду.

По сути, HTML является набором команд для браузера. Называются они – тэги. Пишутся все теги вот в таких скобках <>. Тэги в основном, за небольшим исключением парные – открывающий и закрывающий тэг. Открывающий тэг пишется просто в таких кавычках. Закрывающему еще добавляют слеш

Code
</>

Как это выглядит. Для того чтобы браузер сделал текст полужирным, мы выделяем нужный отрывок тэгами

Code
<b>полужирный текст</b>

получаем полужирный текст.
Первый тег b без слеша открывающий, второй со слешем – закрывающий.

Чтобы сделать текст курсивом - применяем тег

Code
<i>текст курсивом</i>

Получаем текст курсивом

Тэг, позволяющий выводить текст подчеркнутым

Code
<u>подчеркнуть</u>

Получаем подчеркнутый тект

Тэг, позволяющий выводить текст перечеркнутым

Code
<s>зачеркнуть</s>

Получаем зачеркнутый тект

Тэг, позволяющий выводить текст шрифтом больше базового

Code
<big>увеличить</big>

Получаем увеличенный текст

Тэг, позволяющий выводить текст шрифтом меньше базового

Code
<small>уменьшить</small>

Получаем уменьшенный текст

Тэг, позволяющий выводить текст как нижний индекс (со смещением вниз от базовой линии).

Code
<sub>нижний индекс</sub>

Получаем нижний индекс

Тэг, позволяющий выводить текст как верхний индекс (со смещением вверх от базовой линии).

Code
<sup>верхний индекс</sup>

Получаем верхний индекс

Соблюдаем иерархию
Бывает так, что нам нужно выделить текст одновременно и курсивом и полужирным начертанием. Для этого применяем сразу два тэга - тэг b и тэг i. И в этом случае важно знать о иерархии написания тэгов. В общем иерархия напоминает матрешку.
Тэги должны быть полностью вложенными друг в друга
Как это выглядит

Code
<тэг1> ... <тэг2> ... </тэг2> ...</тэг1>

Тоесть чтобы сделать текст полужирным курсивом нужно его выделить тэгами вот так:

Code
<b><i>полужирный курсив</i></b>

Получаем полужирный курсив

Абзац
Если мы пишем много текста, будет грамотно разделить его на абзацы.
Тэг p создает абзац в документе.
<p>этот текст будет выделен в отдельный абзац</p>


Так хочется быть слабой женщиной, но, как назло, то кони скачут, то избы горят...

Форум » Администрация » Помощник по форуму и не только.. » Страшный-нестрашный HTML код (В помощь начинающим (и не только) блогерам)
  • Страница 1 из 1
  • 1
Поиск:

Приветствую Вас чужой..

Логин:
Пароль:
Наши спонсоры
 Магазин материалов для скрапбукинга

 Магазин товаров для рукоделия

Наши кнопки
ТВОРЧЕСКАЯ МАСТЕРСКАЯ. Все виды творчества!

ТВОРЧЕСКАЯ МАСТЕРСКАЯ. Все виды творчества!

ТВОРЧЕСКАЯ МАСТЕРСКАЯ. Все виды творчества!

Друзья сайта


Мастер-клуб. Рукоделия на любой вкус!

Djamaat almuslimat






Друзья.. АУУУУ=)

Статистика

Творческая Мастерская © 2024