Лисья нора




Лисья нора

Главная | Графика и Дизайн | Регистрация | Вход Цвет Сайта: Стандартный Поменять цвет Поменять цвет Морская волна Для блондинкафф Без картинок Здравствуйте, Гость | RSS
| 10 тегов HTML, которые редко используют новички | Категория: HTML и CSS

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

Сейчас много говорят об изменениях, которые принес HTML 5. Каждый тег, упомянутый в данной статье поддерживается и в HTML 4.01 и в HTML 5. Хотя некоторые из этих тегов широко используются, будет очень полезно пересмотреть задействованные методы.

1. <!- ->

Каждая книга о программировании содержит упоминание о том, что очень полезно объяснять, что делает ваш код. Почему комментирование является хорошей практикой? Это очень помогает тому, кто читает ваш код, разобраться в сути происходящего.

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

1<!-- Начало навигации -->
2<ul>
3<li>Пункт меню 1</li>
4<li>Пункт меню 2</li>
5</ul>
6<!-- Конец навигации -->
7<!-- Начало основного контента -->
8<p>Это основной контент.</p>
9    ...

2. Стили таблицы: <thead>, <tbody>, и <tfoot>

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

Item Qty
Sum 7
#1 3
#2 4

<thead>

Оборачиваем строки таблицы в <thead></thead>. Таким образом формируется заголовок таблицы.

<tfoot>

Обернув строки в <tfoot></tfoot> формируем итоговые строки внизу таблицы. Строки <tfoot> должны определяться до строк <tbody>, таким образом, итоговые строки выводятся на экран до остальных строк таблицы.

<tbody>

Cтроки с данными оборачиваем в <tbody></tbody>.

01<table>
02<thead>
03<tr>
04<td>Пунтк</td>
05<td>Кол-во</td>
06</tr>
07</thead>
08<tfoot>
09<tr>
10<td>Сумма</td>
11<td>7</td>
12</tr>
13</tfoot>
14<tbody>
15<tr>
16<td>#1</td>
17<td>3</td>
18</tr>
19<tr>
20<td>#2</td>
21<td>4</td>
22</tr>
23</tbody>
24</table>

3. <optgroups>

Выпадающий список является великолепным способом представить данные для выбора пользователя. Они не только занимают мало места, но и знакомы пользователям и легки в применении. Чудесным свойством <optgroup> является возможность создавать категории (или подзаголовки) для элементов списка.

01<select>
02<optgroup label="Бейсбольные команды">
03<option value="Detroit Tigers">Detroit Tigers</option>
04<option value="Chicago Cubs">Chicago Cubs</option>
05</optgroup>
06<optgroup label="Футбольные команды">
07<option value="Detroit Lions">Detroit Lions</option>
08<option value="Chicago Bears">Chicago Bears</option>
09</optgroup>
10</select>

4. Заголовки – <h1>,<h2>,<h3>,<h4>,<h5>, и <h6>

Конечно, каждый использует заголовки. Но если быть честным, то когда вы в последний раз использовали <h3> или заголовок еще более низкого уровня? Заголовки позволяют строить меньше семантических конструкций, таких как  дополнительные стили для текста в <div>.

Не надо создавать себе дополнительной работы. Помните про теги заголовков.

5. <fieldset> и <legend>

Всем нравятся сайты, на которых легко найти нужную информацию среди логически сгруппированных элементов. <fieldset> группирует вместе элементы формы , рисуя вокруг них прямоугольную рамку. Также возможно добавить название к такой секции с помощью <legend>.

Форма со сгруппированными элементами

1<form>
2<fieldset>
3<legend>General Information: </legend>
4<label>Name: <input type="text" size="30" /></label>
5<label>Email: <input type="text" size="30" /></label>
6<label>Date of birth: <input type="text" size="10" /></label>
7</fieldset>
8</form>

6. <label>

Тег <label> никак не влияет на стиль. Он влияет на функциональность страницы.

<label> используется для определения метки элемента ввод. Метка сама воспринимает нажатия кнопки мыши, делая активным соответствующее поле ввода. Такое свойство меток действует для текстовых полей и радио кнопок.




1<form>
2<label>Имя: <input type="text" size="30" /></label>
3<label>Мужчина: <input type="radio" name="sex" /></label>
4<label>Женщина: <input type="radio" name="sex" /></label>
5</form>

 

7. <blockquote>

Если нужно придать драматический эффект какому-нибудь выражению, то можно использовать <blockquote>. По умолчанию до и после элемента будет вставлена пустая строка. Также будет добавлен отступ для отделения содержащегося в элементе текста от остального контента.

Пример использования тега <blockquote>
1<blockqoute>
2    Пример использования тега &lt;blockquote&gt;
3</blockqoute>

8. <cite>

Нельзя сказать, что <cite> относится к <blockquote>, но обычно их используют вместе.

Вспомните о теге <cite>, когда вам нужно процитировать кого-нибудь.

Пример использования тега <blockquote> совместно с тегом <cite>. Данное предложение заключено в тег <cite>.
1<blockqoute>
2    Пример использования тега blockquote совместно с тегом cite.
3<cite>Данное предложение заключено в тег &lt;cite&gt;.</cite>
4</blockqoute>

9. <dl>

Использование списков дает великолепные возможности для организации информации. Каждый знает о <ul>, но как часто вы используете <ol> и <dl>? Вероятно название "список определений" может смутить начинающего разработчика и заставить его думать, что такой список можно использовать только для вставки определений и условий. Однако такое положение не соответствует действительности.

Типы списков

  1. Неупорядоченный список (ul)
  2. Упорядоченный список (ol)
  3. Список определений (dl)

Что они делают

  • Неупорядоченный список (ul): список с указателями точками
  • Упорядоченный список (ol): пронумерованный список
  • Список определений (dl): Список с определениями элементов

Причины использования списков

  • Последовательный стиль контента
  • Просто создать
  • Универсальны

Способ вывода информации каждым типом списка  отличается от другого. Наверняка не нужно останавливаться на <ul> и <ol>, но структура списка определений требует дополнительных разъяснений.

1<dl>
2<dt>Пункт списка #1</dt>
3<dd>Определение для пункта списка #1</dd>
4<dt>Пункт списка #2</dt>
5<dd>Определение для пункта списка #2</dd>
6</dl>

Вместо определения элемента списка (<li>), мы используем два тега: <dt> и <dd>. <dt> определяет каждый пункт списка, а <dd> описывает выше стоящий пункт. Ниже приведен список в соответствии с ранее показанным кодом списка определений.

Пункт списка #1
Определение для пункта списка #1
Пункт списка #2
Определение для пункта спсика #2

10. &#39;(и другие символы ASCII )

При использовании HTML нужно использовать коды ASCII, когда требуется вставить какой-нибудь символ. Такое правило требует дополнительных действий, но оно гарантирует, что все символы будут правильно выведены на экран пользователя, и браузер не воспримет их как часть разметки. Вам никогда не попадался какой-нибудь текст, который отображается неправильно? Обычно проблемный текст создается с использованием кавычек, апострофов, знаков больше-меньше и так далее. Таких символов на самом деле не много, и стоит запомнить их коды ASCII.



| Категория: HTML и CSS | Добавил: ЛисёноChik | Дата: 14.01.2011, 12:08 | Просмотров: 902 |Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Меню Сайта

Вы вошли, как
Ваш IP адрес: 35.175.246.88
Войти на сайт:
Логин:
Пароль:

Размер шрифта:

Поиск


Рассылка

Рассылка на E-mail

rss2email

Наш опрос
Оцените наш сайт
Всего ответов: 737

Друзья сайта




Rambler's Top100 Яндекс цитирования
Хостинг от uCoz Анализ сайта Счетчик цитирования Каталог TUT.BY
Rating All.BY Google-Add.com - Открытый Каталог Сайтов Каталог сайтов Всего.RU