Войти на сайт

Апдейты поисковых машин
   
каталог


На заметку веб-мастеру несколько слов об html.

rss
Много кто начинают бизнес в интернете заказывают сайты, у каких ни будь компаний и сами не участвуют в его написании, а потом, когда возникает вопрос о смене какого-то блока в шаблоне или незначительной его правки, не могут этого сделать. В этой статье я вам постараюсь объяснить главные принципы html разметки, для выполнения каких либо функций в шаблоне.

Давно все знают, что шаблон делается не только при помощи языка разметки html, но еще и с помощью языка стилей CSS, но все же, в этой статье поговорим об html, чтоб вы хоть имели малое представления об основных его тегах.
И так приступим:
Необходимо знать, что в языке html существуют теги, так называемые контейнера, для данных. Так вот, есть теги, которые нужно закрывать, такие как <p></p> и не закрывающиеся, такие как <img>

Таблицы – в целом все сайты верстаются именно табличной версткай, но это плохо тем, что вес самой странице получается выше, чем сверстать на div, то есть, блочной версткой. Блочная верстка сложней, чем табличная, но мы сегодня поговорим о табличной верстке.

1. Чтоб нам создать таблицу нужно написать следующие теги: <table></table>; написав эти теги, мы создали такой контейнер для формирования строк и столбцов в самой таблице, чтоб указать размеры этого контейнера нужно вписать width="" и height="" тут можно указать размер, как в пикселях, так и в процентном соотношении. Каждый из этих атрибутов можно придавать любому столбцу таблице
2. Строку всегда нужно начинать с тега <tr> и заканчивать закрывающимся тегом </tr>, внутри этих тегов создаем столбцы, их возможно создавать не ограниченное количество.
3. Столбцы начинаются с разметки <td></td>, а в сами эти уже теги размещаем свои данные. Внимание, во всех строках одной таблице должно быть одинаковое количество столбцов, есть, конечно, вспомогательные команды для соединения столбцов и строк, такие как: rowspan=”количество рядов” colspan=”количество столбцов”.
4. По умолчанию, в браузерах при создании таблицы, все данные находящиеся в столбцах будут размещены по центру и прилипшими к левому краю, это можно изменить командами valign=”” и align=”” . Первый означает вертикальное расположения данных, а второе - горизонтальное. Чтоб данные всегда были вначале вашей таблице, то есть вверху с лева, нужно атрибуту valign придать значение top, чтоб посередине middle, чтоб снизу bottom. Если, к примеру, вам нужно выровнять текст по центру, то нужен атрибут align=”” - у него тоже есть несколько значений, таких как left, center и right.
5. Допустим, что нам понадобиться изменить фон таблице - это мы сможем сделать следующим образом: bgcolor="тут цвет в шестеричном значении", чтоб придать окрас краю таблице, то нужно написать следующие: bordercolor=" тут цвет в шестеричном значении ", а придать толщину рамки можно атрибутом border=”значение в пикселях”. На самом деле, существует много еще атрибутов, но это самые основные для работы с таблицами.

Списки – также, при помощи html, можно создавать и списки. Списки бывают двух видов: пронумерованные и не пронумерованные.

1. Чтоб создать список нужно, как и в случаи с таблицей, задать ему основной контейнер; задать его можно следующим образом - открыть тег <ul></ul> (Ненумерованный) или <ol></ol> (Нумерованный), а уже внутри вписываем сами строки списка при помощи тега <li></li>.
2. Если, к примеру, мы хотим изменить цифры на римское значение, то нам понадобится атрибут type=””. У этого атрибута есть несколько значений - для изменений, type для нумерованного списка: "A" или "a"- вместо цифр список будет нумероваться большими или маленькими латинскими буквами, а также "I" или "i" - список будет нумероваться большими или маленькими римскими цифрами, и для ненумерованного списка square - вместо точек будут квадратики; circle - будут не залитые кружочки.
3. Допустим, нам нужно, чтоб список начинал нумероваться не с 1, а с 3. Для этого нужно в теге <ol></ol> вписать атрибут START=”3”, и будет вам счастье.

Текст – для работы с текстом тоже есть свои теги.

1. Тег параграфа <p></p> разбивает текст на параграфы весь текст, написанный внутри этого тега, считается одним параграфом.
2. Тег выделения текста <strong></strong> все, что будет внутри этого тега, станет жирным. Этот тег можно еще заменить на тег <b></b> - ни чего не поменяется.
3. Тег наклона текста <i></i> делает текст немного с наклоном в правую сторону.
4. Верхний индекс тег <sup></sup>, шрифт при этом, отображается выше базовой линии текста и уменьшенного размера.
5. Нижний индекс <sub></sub>, текст при этом, располагается ниже базовой линии остальных символов строки и уменьшенного размера.

Ну, вот, пожалуй, и все. Более полные манипуляции с дизайном делаются при помощи таблицы стилей CSS. О ней мы поговорим позже.
 
Дата добавления: 2012-01-23 23:21:38, просмотров: 5028
Комментарии: 0
Пожалуйста, авторизируйтесь, для возможности добавить комментарий..

Copyright © 2011 - 2017
seo-assistent.net
Поддержка
ICQ: 259904151