1


 
 
 

МЕХЗАВОД | Сайтостроение для начинающих

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » МЕХЗАВОД | Сайтостроение для начинающих » Курс HTML » Быстрое введение в HTML5 для веб-мастеров


Быстрое введение в HTML5 для веб-мастеров

Сообщений 1 страница 2 из 2

1

HTML5 является последней версией самого популярного языка разметки. HTML не претерпел существенных изменений за последние 10 лет.

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

Быстрое введение в HTML5 для веб-мастеров

    Материалы по теме:

        4 подхода к созданию фона HTML страницы
        Создаем эффект свечения для полей HTML форм при помощи CSS

Для указания типа текущего документа в HTML5 достаточно просто указать: <! DOCTYPE HTML> В HTML5 не такие строгие правила как у его предшественника XHTML:

# вы можете не использовать закрывающие теги;
# не использовать кавычки в значениях атрибута;
# использовать символы верхнего регистра в элементах и атрибутах.
Новые теги HTML5

В HTML5 появились следующие новые теги:

<header>
<footer>
<nav>
<menu>
<section>
<article >
<aside>
<figure>
<dialog>
<m> (mark)
<time>
<meter>
<progress>
<video>
<audio>
<details>
<canvas>
<command>

Остальное остается прежним, кроме некоторых тегов которые не являются актуальными и не рекомендуются для использования:
<acronym>
<applet>
<basefont>
<big>
<center>
<dir>
<font>
<frame>
<frameset>
<isindex>
<noframes>
<s>
<strike>
<tt>
<u>

Поэтому если вы знакомы с HTML4 и XHTML, то у вас не возникнет никаких проблем в изучении HTML5. Новые тэги и атрибуты безусловно помогут вам в создании новых и модернизации старых сайтов, благодаря новым возможностям это будет намного легче, чем это было со старым хорошим HTML4.

Хорошо, но будет ли HTML5 работать со старыми браузерами? Ответ - "ДА", кроме новых тегов, естественно. Новые страницы, сделанные в HTML5 будут отображаться во всех браузерах, но пользователи новых браузеров увидят немного больше, а в некоторых случаях страница будет вообще смотреться по-другому.
Структурные теги.

Давайте посмотрим, каким образом мы сможем создать структуру HTML документа при помощи HTML5. В HTML4 мы обычно используем тэги <table> и <div>, чтобы создать структуру всей страницы, независимо от того с какой частью страницы мы работаем: шапкой, футером, меню или с другими общими разделами. Это не очень хороший способ построения структуры страницы, именно поэтому в HTML5 введены новые тэги для каждой части документа.

Теперь нам доступны следующие структурные теги:

<section> Цель его состоит в том, чтобы определить разделы в пределах определенного текстового содержимого, например, разделять весь текст на небольшие части.

<header> Цель его состоит в том, чтобы определить верхнюю часть HTML документа.

<footer> Этот тег применяется для того, чтобы определить нижнюю часть документа.

<nav> Цель его в том, чтобы определить список ссылок на другие HTML страницы.

<article> Этот тег применяется для того, чтобы определить некоторую часть тестового содержимого документа.

Вот к примеру HTML код с новыми тэгами.
<html>
<body>
<header>
<h1> Заголовок </h1>
</header>
<section>
<article> <h2> Заголовок 1 </h2> <p> Некоторый текст... </p> </article>
<article> <h2> Заголовок 2 </h2> <p> Некоторый текст.. </p> </article>
<nav>
<a href="/someURL"> Ссылка 1 </a>
<a href="/someURL"> Ссылка 2 </a>
</nav>
</section>
<footer>
<p>Copyright 2010 My Company</p>
</footer>
</body>
</html>

Как вы видите, мы поместили название нашего документа в теги <header>. Затем мы добавили раздел к нашей странице при помощи тэга <section> и вложили в него 2 тега <article>, чтобы отметить две главные части нашего текстового содержимого. После этого мы определили список наших ссылок, используя тэг <nav>. И наконец мы создали нижний колонтитул нашей страницы при помощи тега <footer>.

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

В дополнении к существующим блочным тегам у HTML5 появились 3 новых тега:
<aside>
<dialog>
<figure>

Тег <aside> используется для обозначения какой-то части текста, в пределах основного текста, например цитаты или сноски. ...
...
<section> Основной текст... <aside> Цитата ... </aside> </section>
...

Веб-браузер никак не выделяет текст, заключенный в тэге <aside>, он используется для создания хорошей структуры HTML документа. Это по достоинству смогут оценить разработчики поисковых систем.

Следующий тэг <dialog> используется для создания диалогов между пользователями:
...
<dialog>
<dt>Пользователь 1 </dt>
<dd>Сообщение пользователя 1</dd>
<dt>Пользователь 2 </dt>
<dd>Сообщение пользователя 2</dd>
</dialog>
...

В тег <dialog> мы вложили еще два тэга: <dt> - содержащий имя пользователя и <dd> для отображения сообщения пользователя.

Третий тег <figure> используется для того, чтобы указать название изображения.
...
<figure>
<legend>Заголовок изображения</legend>
<img alt="Некоторое изображение" src="/image.jpg" width="200" height="200">
</figure>
...

Мы использовали тэг <legend>, чтобы указать название изображения, тег <img>, чтобы вставить определенное изображение, и тэг <figure>, чтобы связать их вместе.
Что необходимо учитывать при использовании структурных и блочных тегов HTML5.

Мы можем начать использовать новые тэги сразу же, но после применения некоторых приемов, для того чтобы обойти некоторые несогласования со старыми браузерами. Новые блоковые тэги в старых браузерах будут обработаны как встроенные элементы, поэтому мы должны определить в нашем CSS для новых блочных тегов свойство display:block; чтобы они должным образом отображались. Что касается старых версий Internet Explorer, то необходимо так же добавить следующее:
<script>
document.createElement('header');
document.createElement('footer');
document.createElement('section');
document.createElement('aside');
document.createElement('article');
document.createElement('nav');
</script>

Добавить это нужно, потому что IE не понимает CSS, присоединенных к неизвестным тегам. HTML5 предполагает, что у тега <script> есть type="text/javascript" по умолчанию, поэтому его мы можем не добавлять.
Встроенные теги.

У HTML4 есть много тэгов для осуществления различного текстового форматирования, но нет никаких тэгов, например чтобы показать время и дату. Поэтому теперь в HTML5 такие тэги присутствуют:
<mark>
<time>
<meter>
<progress>

Тег <m> используется для обозначения какой-то части текста для определенных целей, например, чтобы показать важную часть текста:
...
<p>Некоторая <m>очень важная часть</m> текста...</p>
...

Мы вставили определенную важную часть в тэг <m>.

Тег <time> используется для обозначения времени и даты в каком либо тексте, например:
...
<p>Сегодня в<time>18:30 24 ноября 2010 </time> ...</p>
...

Тег <meter> используется, чтобы показать некоторые числа в определенном формате, например:
...
<p>ежемесячный доход<meter>$15,000</meter>...</p>
...

У тега <meter> есть 6 полезных атрибутов:

value - задает фактическое значение чего-то;
min - задает минимальное значение чего-то;
low - определяет предел, при достижении которого значение считается низким;
high - определяет предел, при котором значение считается низким;
max - определяет максимальное значение чего-то;
optimum - определяет оптимальное значение чего-то.

Например:
...
<p> Концентрация сахара: <meter value="8.2" min="0" max="10.0" low="5.0" high="9.0" optimum="8.0">8.2</meter>. </p>
...

Последний новый тэг <progress> используется, чтобы показать некоторую точку некоторого прогресса, например, процент завершения чего-то:
...
<p>Завершение: <progress value="100" max="500">20%</progress> </p>
...

Тег <progress> имеет два атрибута: value - текущее значение прогресса и max - максимально значение прогресса.
Мультимедийные теги.

В HTML5 имеется два новых тэга, предназначенных для вывода мультимедиа <audio> и <video>.

Вот пример применения тега <audio>:
...
<audio src="/music.mp3" autoplay="autoplay" loop="1"> <p>Сейчас играет ...</p> </audio>
...

У этого тега имеется три атрибута:

src - путь к звуковому файлу;
autoplay - определяет, начать ли проигрываться файлу сразу после загрузки страницы в браузере;
loop - определяет, сколько раз аудио должно проигрываться.

Тег <audio> позволяет разместить внутри себя другие тэги, содержащие некоторую информацию.

Тег <video> используется для того, чтобы вывести на страницу видеофайлы.
...
<video src="/clip.avi">Клип...</video>
...

Атрибут src определяет путь к видео файлу.

Мультимедийные теги позволяют вывести аудио- и видео-файлы непосредственно в HTML документе и способствуют их индексации поисковыми системами.
Интерактивные теги.

В HTML5 есть несколько интерактивных тэгов, которые позволяют изменить некоторое содержимое без перезагрузки всей HTML страницы:
<menu>
<command>
<details>
<canvas>

Тег <menu> являются довольно интересным, поскольку он уже существовал в более ранних версиях HTML, и теперь его вернули. Тег <menu> в HTML5 выполняет роль контейнера для тега <command>, который в свою очередь создает команду в виде переключателя, флажка или обычной кнопки.
...
<menu>
<command onclick="alert('first action')" label=" первое действие"/>
<command onclick="alert('second action')" label=" второе действие"/>
</menu>
...

Используя эти тэги, мы можем создавать различные интерактивные меню.

Тег <details> используется, чтобы показать некоторую дополнительную информацию, например, поле справки.
...
<p> Некоторый контент <details>Информация справки</details> ... </p>
...

Тег <canvas> используется для автоматического рендеринга различных 2D форм и растровых изображений. Он определяет некоторые области HTML документа, в которых можно сделать различные объекты, выводить изображения и трансформировать их при помощи языка JavaScript.
<script>
var example = document.getElementById('sample');
var context = example.getContext('2d');
ctx.fillStyle='#FF0000'; ctx.fillRect(0,0,80,100);
</script>
...
<canvas id="sample" width="300" height="300"> Ваш браузер не поддерживает HTML5. </canvas>
...

Атрибут ID используется для идентификации тега <canvas> как объекта DOM (Document Object Model). Далее указываются атрибуты ширины и высоты. Текст, заключенный между тегами <canvas>, будет показан в браузерах, которые не поддерживают HTML5. Он предназначен для использования в сочетании с 2D APIs для отображения динамической графики наподобие Flash.

Мы можем начать использовать новые возможности HTML5 уже сегодня. Некоторые простые приемы будут работать даже в старых браузерах. Если вы планируете построить новый веб-сайт, вы можете рассмотреть возможность применения HTML5, чтобы сделать для вашего сайта более грамотную и разумную структуру с новыми функциями.

2

4 подхода к созданию фона HTML страницы

Старое доброе свойство CSS - background является основным элементом, при помощи которого мы можем управлять фоном при создании дизайна сайта.

В данном уроке мы разберем 4 наиболее распространенных подхода к созданию фона HTML страницы

.http://s4.uploads.ru/t/VQG4p.jpg

Если вы новичок в веб дизайне, вы найдете для себя несколько основных методов работы с CSS, которые в дальнейшем сможете применить на практике при создании своего сайта.
1. Однотонный цвет фона HTML страницы.

http://sa.uploads.ru/t/YPEOw.png
body {
background-color: #a1bad1;
}

Это самый простой способ задать фон HTML странице, при помощи тега BODY. В данном случае для создания фона не используется никаких изображений, цвет фона задается при помощи значения: #a1bad1.
2. Горизонтально и вертикально повторяющееся изображение в качестве фона страницы.
http://s4.uploads.ru/t/4ozGf.jpg
http://s3.uploads.ru/t/5HfrB.jpg
body {
background-color: #a1bad1;
background-image: url(images/pattern.png);
}

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

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

Несмотря на то, что в качестве фона используется фоновое изображение, все равно установите HTML цвет фона веб страницы,  таким образом, как мы это делали в первом примере. Это обеспечит фон, если у посетителя, зашедшего на сайт, в браузере будут отключены изображения.
3. Фоновое изображение повторяющееся по горизонтали.
http://sg.uploads.ru/t/1lPqM.jpg
http://s5.uploads.ru/t/gQSdE.png
body {
background-color: #a1bad1;
background-image: url(images/gradient.jpg);
background-repeat: repeat-x;
}

Фоновое изображение в CSS может повторяться только по оси X или только по оси Y. Значение repeat-x обычно используется, чтобы добавить градиент к различным элементам, особенно часто применяется для элементов, используемых в качестве кнопки. Изображение градиента, вырезанное тонкой полоской, может использоваться в качестве фонового изображения, которое повторяется по горизонтали на всю страницу.

По умолчанию изображение будет располагаться в верхней части страницы, но значения center или bottom так же могут использоваться. Цвет фона страницы должен быть установлен таким как последний цвет изображения градиента. Это обеспечит плавный переход, от градиента в том месте страницы, где изображение, используемое в качестве фона, заканчивается и начинается цвет фона страницы.
4. Большая картинка в качестве фона страницы

http://s9.uploads.ru/t/F0PRw.jpg
http://sg.uploads.ru/t/MjYvP.jpg
body {
background-color: #a1bad1;
background-image: url(images/bg-image.jpg);
background-position: center top;
background-repeat: no-repeat;
}

Файлы изображений использующихся для создания подобного фона должны быть небольшими по размеру. Хотя размер файла большого фонового изображения будет выше, чем маленьких повторяющихся изображений, применив к нему сжатие можно значительно уменьшить размер изображения. Какими бы большими не были фоновые изображения, при прокрутке страницы они в определенный момент заканчиваются. Поэтому необходимо задавать цвет фона страницы, чтобы сделать плавные переход, от фонового изображения к цвету фона. В этом примере используется большое изображение, которое позиционируется по центру в верхней части веб-старницы.


Вы здесь » МЕХЗАВОД | Сайтостроение для начинающих » Курс HTML » Быстрое введение в HTML5 для веб-мастеров


создать форум