Html5 и css3 – HTML5 CSS3 верстка, знакомство

19.07.2020 Разное

Содержание

HTML5 CSS3 верстка, знакомство

Здравствуйте уважаемый читатель моего блога создай сам. Сегодня мы начинаем с вами изучение интересной темы под названием «Верстка сайта с нуля«. Ну не станем затягивать, а сразу приступим к знакомству с гипертекстовым языком разметки HTML5.

План занятия:

Знакомство с html, понятие верстки
Программы для верстки
Шаблон страницы html4 и html5
Разбор тегов шаблона html
Сохранение документа, смена кодировки, просмотр в браузере
Теги: абзаца, жирного выделения, курсива и тега br
Теги заголовков: h2-h6
Понятие парного тега и одиночного
Строчные и блочные элементы
Атрибуты, пример с align
Работа с изображениями
1. Относительный путь
2. Абсолютный путь
Гипер ссылки
1. Ссылка на вторую страницу
2. Ссылка на файл
3. Ссылка графическая
4. Якорная ссылка

Что такое верстка сайта или страницы для интернета

Верстка — это создание страницы по готовому макету psd (

Photoshop) для интернета или для web. Это подразумевает в себе создание некой логической разбивки страницы кодом html и его визуальным оформлением с помощью css (Cascading Style Sheets — каскадные таблицы стилей). Для верстки необходим готовый шаблон прорисован в фотошоп с которого и будет происходить верстка. В ходе верстки у вас получится несколько типов файлов, которые должны находиться в одном месте, то есть в папке, это будет ваша web страница в формате index.html, ваш файл с расширением css в котором будут все стили предназначенные для вашей страницы и папка с картинками, которые используются при оформлении страницы стилями.

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

Совпадение с дизайном макета
Кроссбраузерность
Поддержка популярных разрешений
Валидный и аккуратный код

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

Кроссбраузерность — существует много различных браузеров, от известных нам Opera, Mozilla, Chrome и Internet Explorer и до менее известных их аналогов, вот кроссбраузерность и отвечает за одинаковое отображение верстки во всех этих браузерах. По сути сейчас все современнные браузеры отлично отображают верстку, но этого нельзя сказать о старых версиях IE.

Поддержка популярных разрешений — пользователи используют различные разрешения и аксессуары для серфинга в сети интернет, наша задача сделать верстку таковой, чтобы наша верстка отображалась максимально удобно и качественно на страницах с разных устройств просмотра страниц в сети. Главное ограничение для нас, это ширина монитора, которая минимальная на данный момент 1024px. Если наша страница помещается в этой ширине, это хорошо, а вот при обратном процессе у вас появится горизонтальная страница прокрутки, что для нас есть не совсем хорошо и тем более для будущих пользователей нашей страницы.

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

Знакомство с HTML5

HTML5 — это не новый какой-то язык разметки, а всего лишь обновленный html4 в который были добавлены новые теги в основном предназначенные под оптимизацию и продвижение вашего будущего сайта. Все основные изменения с 4 на 5 версию можно выделить списком:

Доступны новые теги и атрибуты.
Возможность рисовать на странице.
Поддержка элементов ранее доступных только посредством использования Flash (вставка видео или аудио).

Все эти нововведения мы просмотрим с вами на практике и вы убедитесь в простоте их использования и применения на практике.

Программное обеспечение для верстальщика

Для верстальщика нужны определенные программы, которые помогут в работе и станут незаменимыми помощниками при вашей дальнейшей работе. Первое, что мы должны установить себе на компьютер это программу Notepad++. Это такой текстовый редактор, который умеет подсвечивать синтаксис языка программирования и может кодировать документ в различные кодировки. Скачать этот редактор можно скачать абсолютно бесплатно по адресу http://notepad-plus-plus.org/download/v6.7.4.html, по ссылке всегда актуальная версия.

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

Как же обойтись без браузеров, мы уже поняли, что для проверки кроссбраузерности нужно несколько браузеров, поэтому установим себе на компьютер их, рекомендую поставить для начала самые популярные и использовать периодически для просмотра результатов нашей верстки. Установите себе: Opera, Mozilla, Chrome, Internet Explorer и Yandex браузеры.

Основным браузером для верстки я беру Mozilla Firefox, если вам интересно почему, отвечу так — для этого браузера написано наибольшее количество расширений во всевозможных применениях, включая и верстку. Мы будем использовать этот браузер, как основной, а во всех остальных проверять уже нашу кроссбраузерность.

Дополнения для верстальщика на Mozilla

Для нашего основного браузера есть замечательное дополнение под названием Firebug, чтобы установить его, открываем нашу Мозиллу и через меню в правом верхнем углу переходим во вкладку дополнения. Там в поле поиска вводим Firebug и устанавливаем его себе в браузер. Сегодня использовать мы его не будем, но в будущем это станет незаменимый помощник для нашей работы.

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

Сайт с css и без css

Основное отличие сайта с работающими стилями css и без них заключается в его визуальном оформлении. Давайте откроем любую страницу в браузере Mozilla и используя наш плагин Web Developer отключим стили оформления для данной страницы, делается это следующим образом:

На вкладке css отмеченной скриншотом 1 выбираем Disable Styles и Disable All Styles, этим действием мы полностью отключаем стили к данной странице сайта. Вы можете видеть, как работает гипертекстовая разметка html без стилей. По сути страница остается не тронутой, вся информация как была, так и есть, вот только вид у нее не совсем презентабельный ))).

Практическое начало в HTML

Прежде чем мы с вами начнем создавать свою первую страницу на html, я хочу показать и рассказать как это делалось и сейчас многие делают при HTML4

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»> <html xmlns=»http://www.w3.org/1999/xhtml»> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>Название страницы</title> </head> <body> </body> </html>

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd»>

<head>

<title>Название страницы</title>

</head>

<body>

</body>

</html>

Итак первая строка называемая DOCTYPE отвечает за указание или присвоение типа текущему документу, делается это для того, чтобы браузер понимал в каком стандарте отображать данную страницу, а этих стандартов есть несколько (HTML4, HTML5, XHTML и т.д.).

Далее идет тег html, но для начала пару слов о том, что такое теги. Тег это своего рода некий контейнер, который в себе содержит определенное содержание и информацию. Тег это элемент языка разметки html и находится в треугольных скобках, что дает браузеру понять — здесь идет тег.

Теги есть двух видов: парные и одиночные. В данном случае тег html есть парным, в начале страницы он открывается, а в низу страницы закрывается. это мы можем видеть благодаря косой черточки

/ (слэш), вот так выглядит закрывающий тег html </html>. Не парный тег, то есть одиночный, это тег который не требует себе закрывающего тега, по ходу верстки я буду обращать ваше внимание на такие теги и со временем вы запомните все их.

Внутри парного тега html содержатся еще два таких же парных тега, это тег <head>…</head> и тег <body>…</body>. Первый тег head содержит в себе невидимую для пользователя информацию, которая предназначена для браузера и поисковых систем. Все внутренние теги заключенные в head называются служебные и первым служебным тегом сейчас мы рассмотрим тег meta — это есть одиночный тег и указывает он браузеру на какой кодировке будет сверстана наша страница.

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

кодировка и выбрать преобразовать в UTF-8 без BOM.

Чтобы не устанавливать кодировку в ручную каждый раз я вам советую настроить ее по умолчанию для каждого нового документа в Notepad++, делается это следующим образом. Заходим в раздел меню Опции —> настройки и переходим во вкладку Новый Документ с правой стороны указываем UTF-8 без BOM и закрываем настройки. В дальнейшем все ваши документы будут создаваться в этой кодировке по умолчанию.

Следующим тегом находящимся в теге head есть парный тег <title>…</title> — тег, который дает название нашей странице, это название выводится в верху нашей вкладки в браузере. Название имеет очень большое значение для поисковых систем, поэтому в будущем нужно быть внимательным при создании названий вашим документам. Сейчас же можно просто внутри парного тега title написать <title>Мой первый html документ</title>, сохранить и открыть в браузере, в верху вкладки вы найдете это название.

Следующим шагом мы рассмотрим парный тег <body>…</body>. Это тег, который содержит в себе всю видимую страницу браузера. В нем уже и будет содержаться весь макет, который мы будем верстать с макета psd.

Еще скажу пару слов о правильной компоновке кода в редакторе Notepad++, используйте табуляцию, то есть все теги, которые вложены внутри других парных тегов можно сдвигать в право на один TAB. Тогда ваш код будет чистым, понятным и удобочитаемым.

Основные отличия HTML5 от HTML4

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

<!DOCTYPE html> <html> <head> <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> <title>html5 документ</title> <meta name=»description» content=»» /> <meta name=»keywords» content=»» /> </head> <body> <header> <h2>Наш сайт самый классный</h2> </header> <nav> <ol> <li><a href=»#»>Меню 1</a></li> <li><a href=»#»>Меню 2</a></li> <li><a href=»#»>Меню 3</a></li> </ol> </nav> <article> <h2 align=»center» title=»заголовок h2″>Заголовок первого уровня</h2> <h3 align=»center»>Заголовок второго уровня</h3> <img src=»images/author.png» alt=»автор» align=»right» /> <p>Многие думают, что <strong>Lorem Ipsum</strong> — <em>взятый с потолка</em> псевдо-латинский набор слов, но это не совсем так. Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. <br /> В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги «de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э. Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum, ы»Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p> <img src=»images/dvd.jpg» alt=»dvd» /> <p><strong>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. <strong></p> <!— можно и правильно —> <strong><p>Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. </p><strong> <!— нельзя и не правильно —> <section> <h4>Подраздел кошки</h4> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> </section> <section> <h4>Подраздел собаки</h4> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> <p>Текст статьи…</p> </section> </article> <footer> <p>Подвал сайта</p> </footer> </body> </html>

<!DOCTYPE html>

<html>

<head>

<title>html5 документ</title>

</head>

<body>

<h2>Наш сайт самый классный</h2>

</header>

<nav>

<ol>

</ol>

</nav>

<h2 align=»center» title=»заголовок h2″>Заголовок первого уровня</h2>

<h3 align=»center»>Заголовок второго уровня</h3>

<p>Многие думают, что <strong>Lorem Ipsum</strong> — <em>взятый с потолка</em> псевдо-латинский набор слов, но это не совсем так.

Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад.

Ричард МакКлинток, профессор латыни из колледжа Hampden-Sydney, штат Вирджиния, взял одно из самых странных

слов в Lorem Ipsum, «consectetur», и занялся его поисками в классической латинской литературе. <br />

В результате он нашёл неоспоримый первоисточник Lorem Ipsum в разделах 1.10.32 и 1.10.33 книги

«de Finibus Bonorum et Malorum» («О пределах добра и зла»), написанной Цицероном в 45 году н.э.

Этот трактат по теории этики был очень популярен в эпоху Возрождения. Первая строка Lorem Ipsum,

ы»Lorem ipsum dolor sit amet..», происходит от одной из строк в разделе 1.10.32</p>

<p><strong>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. <strong></p> <!— можно и правильно —>

<strong><p>Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. </p><strong> <!— нельзя и не правильно —>

<h4>Подраздел кошки</h4>

<p>Текст статьи…</p>

</section>

<h4>Подраздел собаки</h4>

<p>Текст статьи…</p>

</section>

</article>

<p>Подвал сайта</p>

</footer>

</body>

</html>

DOCTYPE стал короче и проще. Также я добавил два мета тега description и keywords, которые отвечают сугубо за поисковую оптимизацию сайта и предназначаются для поисковых систем. Description — дает краткое описание характеризующее содержание веб страницы. Keywords — содержит в себе перечень основных ключевых слов по которым продвигается эта страница в поисковой выдаче, в настоящее время тег утратил свое значение и практически не используется вебмастерами да и поисковыми машинами тоже.

Парный тег <header> находится в теге <body> и указывает ПС на часть страниц отвечающей за верхнюю часть страницы, так называемая шапка сайта. В этом теге могут находится логотип, меню, слоган сайта, контактные данные и т.д.

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

Очень важный тег <article>, который также парный, он отвечает за основное информационное содержание страницы. Обычно это текстовое наполнение, статья в блоге, описание товара на странице карточки товара, описание рецепта, книги и т.д. Этот тег может содержать в себе еще такой парный тег, как <section>. Section разделяет основную статью на более мелкие части, как в коде выше с примером о кошках и собаках.

Так же, как тег <header> для шапки сайта появился тег <footer> (парный) для подвала или футера сайта. В нем содержится вся нижняя часть сайта такая, как копирайт, нижнее меню навигации, ссылки на разработчика и т.д.

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

Заголовки и подзаголовки в html

Вы уже наверное в коде выше заметили непонятный парный тег <h2>. Это тег заголовка первого уровня, то есть самый главный заголовок нашей страницы. Заголовков есть аж 6 уровней, чем выше цифра заголовка, тем менее значимый он для пользователя и ПС. Все они есть парные и находятся в таком виде:

<h2>Заголовок первого уровня</h2> <h3>Заголовок второго уровня</h3> <h4>Заголовок третьего уровня</h4> <h5>Заголовок четвертого уровня</h5> <h5>Заголовок пятого уровня</h5> <h6>Заголовок шестого уровня</h6>

<h2>Заголовок первого уровня</h2>

<h3>Заголовок второго уровня</h3>

<h4>Заголовок третьего уровня</h4>

<h5>Заголовок четвертого уровня</h5>

<h5>Заголовок пятого уровня</h5>

<h6>Заголовок шестого уровня</h6>

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

Продолжим ознакомление с тегами, которые применяются для оформления текстового наполнения сайта. Предлагаю перейти на сайт http://ru.lipsum.com/и скопировать один абзац предлагаемого текста, для дальнейшего его форматирования с помощью тегов. Вставляем его в наш код пониже заголовка h2 и сдублировав его вставляем на следующей строке еще раз. После сохранения и открытия в браузере вы не увидите двух абзацев, а слитый единый текст, это потому, что браузер не понимает нашего кода так, как мы хотим без специальных разметок — тегов.

Теперь в начале каждого абзаца поставим вот такой вот тег <p>, а в конце абзаца </p>, вы уже догадались, что этот тег парный, так как имеет и открывающий и закрывающий тег. Сохраните еще раз документ и просмотрите на результат в браузере. Изменения на яву )))

Помимо абзацев в тексте очень часто используется принудительный перенос строки, выделяется он одинарным тегом <br /> давайте применим его в первом абзаце по окончании первого предложения и посмотрим на результат. Этот тег можно использовать по несколько раз подряд.

Теги форматирования текста

<strong> — парный тег выделяющий область текста жирным начертанием.
<em> — тег, который также парный и выделенный текст делает курсивом.

Чтобы вы усвоили на практике эти теги, найдите любые пару словосочетаний в ваших абзацах и сделайте их жирными и курсивом, примерно это будет вот так:

<p>Многие думают, что <strong>Lorem Ipsum</strong> — <em>взятый с потолка</em> псевдо-латинский набор слов…</p>

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

Понятие строчного и блочного элемента

Все теги, которые есть в применении разметки html делятся на два вида, а именно блочные и строчные. Строчные еще могут называть инлайн элементами верстки.

Блочными элементами являются заголовки, параграфы и т.д. Для того, чтобы проверить блочный или строчный элемент можно использовать плагин на Mozilla, который мы ранее установили. Сделайте, как указанно на скриншоте у меня, чтобы выделить блочные элементы страницы.

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

А вот два тега, которые мы рассмотрели с вами <strong> и <em> являются уже строчными или инлайн элементами. Вы спросите зачем нам все это знать и понимать, отвечаю.

ВАЖНО понимать, что блочные элементы могут в себе содержать, как строчные, так и другие блочные элементы, чего не умеют делать однострочные. Вот два примера, где первый правильно, а второй нет:

<p><strong>Многие думают, что Lorem Ipsum — взятый с потолка псевдо-латинский набор слов, но это не совсем так. <strong></p> <!— можно и правильно —> <strong><p>Его корни уходят в один фрагмент классической латыни 45 года н.э., то есть более двух тысячелетий назад. </p><strong> <!— нельзя и не правильно —>

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

Атрибуты — это дополнительные управляющие слова, которое задают определенные свойства элементам. И первым атрибутом с которым мы познакомимся будет align (элайн), который задает выравнивание элементу. По умолчанию все выравнивание идет по левому краю, чтобы сделать нашим абзацам выравнивание по центру примените атрибут align так, как указано на картинке выше. Проделайте это со всеми значениями данного атрибута.

На практике это уже не применяется, ибо это устаревшее и сейчас все делается с помощью css, то есть с помощью каскадной таблицей стилей. Этот пример вам я привел лишь для понимания, что такое атрибуты и как они применяются.

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

<h2 align=»center» title=»заголовок h2″>Заголовок первого уровня</h2>

В примере кода вы видите два атрибута применяемые к тегу h2, первый задает выравнивание заголовку и он не используется в html5, а второй задает пояснение данному элементу. Имя атрибута title, а значение вы пишете которое поясняет место применения, я написал, что это заголовок h2. Рекомендую применять в изображениях, к ним мы еще дойдем и затронем там еще один атрибут alt.

Изображения на веб странице

Изображение ставится на страницу с помощью тега <img src=»» alt=»» />, который имеет два обязательных атрибута!

Тег img не имеет парного закрывающего тега
Имеет два обязательных атрибута

src — атрибут, который указывает путь к изображению, alt — альтернативный текст описывающий кратко картинку, нужен для того случая, если у пользователя отключен просмотр картинок или же картинка повреждена и браузер не может ее показать. Разберем несколько путей указания картинки браузеру.

Абсолютный путь к картинке — <img src=»http://obuchaemsja.com/images/romantic.png» alt=»романтика» />. Абсолютный, потому, что где бы вы не вставили этот код, он будет отображать мою картинку, не важно на сайте это или у вас в рабочем документе.

Относительный путь к картинке — <img src=»images/dvd.jpg» alt=»dvd» />. Это относительный путь к картинке, которая находится в папке рядом с документом html.

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

Хочу еще указать на два не обязательных атрибута применяемые во вставке картинки в теге img. Это атрибут height — высота и width — ширина картинки, их значения пишутся в пикселях, но без px. Попробуйте вставить любую картинку и применив к ней атрибут align, который мы проходили выровнять ее по правому краю.

Создание гиперссылок

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

Внешние ссылки

<a href=»http://google.com.ua»>Google</a> <a href=»http://google.com.ua» target=»_blank»>Google</a>

<a href=»http://google.com.ua»>Google</a>

<a href=»http://google.com.ua» target=»_blank»>Google</a>

Здесь приведены два примера ссылки ведущие с нашего документа на страницу поиска Google, в чем же отличие первой от второй. Первая ссылка имеет парный тег и обязательный атрибут href, который и указывает куда ведет ссылка. Такая ссылка откроет страницу Гугл вместо нашей страницы, что не совсем правильно, ведь это внешняя ссылка, а не внутренняя. А вот второй пример, как раз добавляет ссылке атрибут target, который и указывает, что ссылку нужно открывать в новом окне. Хочу добавить, что в данных примерах мы указывали абсолютный путь, как в изображении. То есть эта ссылка будет работать абсолютно везде, на любом сайте она будет вести на сайт Гугл.

Внутренние ссылки

А сейчас давайте создадим внутреннюю ссылку. В папке, где находится наш документ, создаем еще один по html шаблону и называем его page.html, можно вставить туда параграф или просто написать заголовок используя теги h2-H6. После создания второго документа переходим в первый и создаем ссылку на второй. Что следует учитывать, во первых путь уже не абсолютный, а относительный, и так как второй документ находится в одной директории и одной папке нам нужно в атрибуте href указать всего лишь имя и расширение документа. Давайте взглянем на пример:

<a href=»page.html»>Вторая страница</a>

Наверное вы заметили отсутствие второго не обязательного атрибута тега a target, это потому, что ссылка внутренняя, а такие ссылки не принято открывать в новых окнах.

Помимо внешних и внутренних ссылок на другие страницы, есть еще ссылки на разного вида документы, это могут быть архивы, pdf, картинка, видео и т.д. Если этот файл находится на одной директории и возможно в одной папке с вашим документом html, тогда ссылка указывается относительной, а если это к примеру ссылка на ролик с Ютюб, то здесь уже ссылка будет абсолютной. Вот пример ссылки, которая относительная и ведет к документу находящемуся в одной папке с html страницей.

<a href=»file.pdf»>Скачать файл</a>

Здесь можно по желанию использовать второй атрибут тега a target для открытия в новой вкладке браузера, но я это н стал делать.

Графическая ссылка

Что такое графическая ссылка, это картинка (строчный элемент) завернутая или вложенная в анкор другого строчного элемента в данном случае тега a. Ну и как же без примера:

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

Якорная ссылка

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

По идентификатору (id)
По атрибуту тега a name

Второй вариант я рассмотрю на примере нашей страницы, в самом низу документа перед закрывающимся тегом body я создаю такой якорь: <a name=»foot» />, это и есть

якорь, а рядом с уже ранее созданными ссылками создаю еще одну на наш якорь.

<a href=»#foot»>Подвал сайта</a>

Если ссылка ведет на другую страницу к якорю, то указывается вначале полный (абсолютный путь) к странице, а потом после знака # ставится имя якоря.

Ссылка на почтовый адрес

Хочу еще затронуть такой вид ссылок, как ссылка на написание почты или ее отправку. Делается это аналогично любой ссылки с использованием тега <a>, вот только в значении обязательного атрибута href ставится следующее:mailto: и после двоеточия пишется уже почтовый адрес. Ну и конечно вот пример:

<a href=»mailto:[email protected]»>Написать письмо<a/>

Адрес я указал вымышленный, но это не помешало проверить на практике работоспособность ссылки.

sozdaj-sam.com

HTML5 и CSS3 — начнём верстать. Часть 1

Из серии статей «HTML5 и CSS3 – наступает время пользоваться»

Продолжение статьи Чем нас радует CSS3

Теперь мы готовы к тому, чтобы запачкать наши руки в типографской краске. Почувствуйте себя верстальщиком в типографии середины 20-го века. Ритмичный шум печатных станков, запах свежей печати, щелчки задвигаемых на своё место латунных буковок. Большие рулоны девственно чистой газетной бумаги, ожидающие получить на себя порцию тиражной информации. И вы, сидящий за наборным станком, укладываете в нужное место информационный блок …

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

Для выполнения заданий вам потребуются (будет повод обновиться):

Программное обеспечение или ресурс	Требуемая версия
Notepad++, или любой текстовый редактор, который не добавляет лишнего в начало файла с кодировкой utf-8	—
Mozilla Firefox Opera Chrome	4+ 11.10+ 11+

Если интересно, вы можете проверить на сколько ваш веб-браузер поддерживает стандарт HTML5. Пройдите по ссылке http://html5test.com, там вы увидите баллы, сумма которых формируется по количеству поддерживаемых пунктов из стандарта. На момент написания статьи, на моей машине (Ubuntu10.10), Opera11.10 набирала 258 баллов, а FireFox4 всего лишь 240. Интересно, что у вас?

В этом тьюториале, мы:

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

Для работы нам будет достаточно создать один HTML-файл index.html и один CSS-файл styles.css. В странице по ходу выполнения заданий появятся скрипты, так что будьте готовы, к тому что ваш браузер предупредит вас об этом. Нужно будет разрешить выполнение скриптов на странице.

Готовим каркас страницы

Браузер должен знать страницу в лицо! Если вы не расскажите ему кто она такая и откуда, то он включит режим совместимости и вам придётся гадать — “как слово ваше отзовётся” в браузере клиента. Чтобы до такого не дошло, вам необходимо записывать в самом начале страницы правильный тип документа, соответствующий коду страницы.

Видимо, услышав мольбы верстальщиков, парни из W3C сжалились, и для стандарта HTML5 сделали коротенький тег <!DOCTYPE HTML>. Любая веб-страница, поддерживающая последний стандарт, должна начинаться с него. А помните как было раньше … public … transitional или strict … ещё и адрес файла описания типа документа, ну ооочень длинно.

Приступим. Создайте себе папку на рабочем столе, в ней будет лежать наша сладкая парочка HTML и CSS файлы. Создайте простой текстовый файл index.html, в кодировке utf-8. Эта кодировка символов уже давно стала стандартной для всех не англоязычных текстов.

Первая строка — пишем тип документа.
Вторая — открываем главный тег всего документа html и указываем параметр lang, записав там базовый язык страницы — русский.
Переходим к заголовку.
Первое что укажем — кодировка символов документа.
Затем заголовок, для окна браузера.
Потом, не долго думая, подключим файл стиля.
И, под конец, добавим пустой контейнер тела документа.

Всё что мы здесь описали есть в листинге №1:

Листинг 1. Базовая структура документа HTML5


<!DOCTYPE html>
<html lang="ru">
	<head>
		<meta charset="utf-8" />
		<title>Инвесторы видят перспективу</title>
		<link rel="stylesheet" href="styles.css" />
	</head>
	<body>

	</body>
</html>

Обращаем ваше внимание на то, что большинство тегов теперь стали не такими длинными как ранее. Тегу <html> больше ничего не нужно кроме lang. Для метатега достаточно написать charset. Кроме того, для тега link не нужно указывать type.

Каркас готов, но страницу в браузер нам пока рано выставлять. Идём далее — семантические элементы страницы.

Делаем разметку контента

Разместим на каркасе семантические блоки

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

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

Разместим блоки в контейнере <body></body>. Будем придерживаться следующей последовательности этих элементов:

– header
– – hgroup
– nav
– article
– – header
– – “content”
– – section
– – – header
– – – “content”
– footer

В начале, у нас будет блок — заголовок страницы. с группой заголовков, говорящих о сайте. Затем семантический блок для меню. Ссылки в меню сделаем фиктивными. После этого начинается статья, обозначенная соответствующим семантическим блоком. В ней блок заголовка для записи названия статьи и даты публикации. Далее идёт содержимое статьи, к которой добавлены собственные выводы автора, написавшего новость. Это добавка оформляется в виде секции, также сопровождается блоком заголовка и контентом. В заключении страницы идёт блок footer, в котором мы разместим дополнительную информацию о контенте наших страниц.

Всё что мы с вами здесь описали представлено в Листинге №2. Мы не приводим полный код страницы, а только то, что должно быть между тегами <body> … </body>.

Листинг 2. Размещение семантических блоков HTML5


<header>
	<hgroup>
		<h2>ООО Рога и копыта</h2>
		<h3>Полный текст новости</h3>
	</hgroup>
</header>

<nav>
	<ul>
		<li><a href="#">Главная</a></li>
		<li><a href="#">О нас</a></li>
		<li><a href="#">Контакты</a></li>
		<li><a href="#">Архивы новостей</a></li>
	</ul>
</nav>

<article>
	<header>
		<time datetime="2011-04-26" pubdate>
			<span>Апр</span> 26
		</time>
		<h2>
			<a href="#" title="Ссылка на новость" rel="bookmark">
				Инвесторы видят перспективу
			</a>
		</h2>
	</header>
	<p>Ничто не мешает людям воспользоваться рогами зайцелопа. Однако копыт у него нет.</p>
	<section>
		<header>
			<h2>Что думает общественность</h2>
		</header>
		<p>В реальности существует только Ubuntu с таким странным именем "Зайцелоп".</p>
	</section>
</article>

<footer>
	<p>&copy; 2011 ООО Рога и копыта. Свои права мы держим в надёжном месте.</p>
</footer>

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

Покрасим фасад

У нашей страницы пока унылый и не привлекательный вид. Сделаем ей мэйкап. Реализуем его в нашем файле стилей styles.css Первое, что мы сделаем — это определимся со шрифтом для всего документа. Если кто не знает, то скажем, проводились исследования какой шрифт лучше воспринимается с экрана монитора, выяснилось — тот, у которого нет засечек. Такие шрифты называют sans-serif — без засечек. К ним относятся, например: Arial, Helvetica, Verdana. Идём дальше, будем по порядку определять правила для оформления всех элементов нашей страницы. Для того, чтобы не забегать сильно вперёд, воспользуемся пока несколькими фишками — тенями и закруглёнными краями у блоков.

Большинство из того, что мы здесь накодим было доступно ещё в ранних стандартах CSS. Новенькие фичи мы перечислим.

box-shadow
Данный параметр указывается для блочного элемента страницы, и создаёт тень вокруг него. Первые четыре числа это линейные параметры тени, соответственно указываются либо в пикселах px, либо других линейных единицах (em, pt), либо без них, в случае нулевого размера. Первое число означает — горизонтальное отбрасывание тени вправо, хотите сделать влево — ставьте отрицательное число. Следующий — вертикальное вниз, чтобы сделать вверх — ставьте отрицательное число. Далее — величина размытия тени, затем — разброс тени. После линейных размеров указывается цвет тени, и если вы хотите внутреннюю тень то ключевое слово inset. Если вам мало одной тени, то реализуйте свои теневые фантазии через запятую.

text-shadow
Этот параметр по своим настройкам похож на предыдущий, отличие только в отсутствии разброса тени и внутренней тени. И вам также никто не мешает фантазировать на счёт количества теней, через запятую.

border-radius (-moz-border-radius, -webkit-border-radius)
Радиус скругления у блоков. Углов у блока может быть четыре, соответственно и элементов у этого параметра может быть столько же. Перечисляются по часовой стрелки начиная от верхнего левого угла. Указанные в скобке названия параметров, используются в браузерах семейства Mozilla и на движке Webkit (Chrome, Safari). Так что дублируйте в правиле настройки, указанные для border-radius ещё и в эту парочку параметров.

Придуманное и закодированное нами оформление будет выглядеть так, как показано в Листинге №3. Этот код, вам нужно поместить в файл styles.css.

Листинг 3. CSS для новых семантических элементов HTML5


* {
	font-family: Lucida Sans, Arial, Helvetica, sans-serif;
}

body {
	width: 480px; margin: 0px auto;
}

header.mainH {
	-webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px;
	-webkit-box-shadow: 0 3px 5px 0 #AA4400; -moz-box-shadow: 0 3px 5px 0 #AA4400; box-shadow: 0 3px 5px 0 #AA4400;
	padding: 5px;
	text-align: center;
}

header h2 {
	font-size: 36px; margin: 0px;
}

header h3 {
	font-size: 18px; margin: 0px; color: #888;
	font-style: italic;
}

nav ul {
	list-style: none; padding: 0px; display: block;
	clear: right; background-color: #666;
	padding-left: 4px; height: 24px;
	-webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px;
}

nav ul li {
	display: inline; padding: 0px 20px 5px 10px;
	height: 24px; border-right: 1px solid #ccc;
}

nav ul li a {
	color: #EFD3D3; text-decoration: none;
	font-size: 13px; font-weight: bold;
}

nav ul li a:hover {
	color: #fff;
}

article > header time {
	font-size: 14px; display: block; width: 26px;
	padding: 2px; text-align: center; background-color: #993333;
	color: #fff; font-weight: bold; -moz-border-radius: 6px;
	-webkit-border-radius: 6px; border-radius: 6px; float: left;
	margin-bottom: 10px;
}

article > header time span {
	font-size: 10px; font-weight: normal;
	text-transform: uppercase;
}

article > header h2 {
	font-size: 20px; float: left;
	margin-left: 14px; text-shadow: 2px 2px 1px #FFFFFF, 2px 2px 5px #888;
}

article > header h2 a {
	color: #993333;
	text-decoration: none;
}

article > section header h2 {
	font-size: 16px;
}

article p {
	clear: both;
}

footer p {
	text-align: center; font-size: 12px;
	color: #888; margin-top: 24px;
}

article > section {
	-moz-border-radius: 6px 0 0 0;
	-webkit-border-radius:6px 0 0 0;
	border-radius: 6px 0 0 0;
	box-shadow: 3px 3px 3px 0 #FFAA88 inset;
	padding: 5px;
	color: #665588;
	margin-top: 40px;
}

Если вы откроете свою индексную страничку сейчас, то она уже будет выглядеть, не так уныло, посмотрите на Рисунок 1. По сравнению с предыдущим видом, она будет просто СУПЕР

Рисунок 1. Вид стилизованой страницы

Если страница выглядит по-другому, значит вы открыли её не в том браузере. Под “не в том” я подразумеваю браузер отличный от Mozilla4+, Chrome11.0+, Opera11.10+, они показывают страницу одинаково — проверено.

Примечание: Если кому-то непонятны записи правил в листинге, например, вам непонятно зачем нужно использовать > в селекторе? Тогда пишите свои вопросы в комментариях.

Далее, в части №2 порисуем, выведем видео и проверим новые элементы формы.

HTML5 и CSS3 – начнём верстать. Часть 2

Понравилась статья? Посоветуйте другу

artanovy.com

Верстка сайта на HTML5 и CSS3

От автора: с тех пор, как в сети стали появляться статьи, демонстрирующие новые свойства HTML5 и CSS3, у меня родилась идея создания верстки сайта без изображений. Взяв на вооружение улучшения HTML5 и CSS3 (по сравнению с предыдущими почтенными спецификациями), не слишком сложно сверстать достойно выглядящий веб сайт, которому не придется полагаться на изображения в качестве элементов разметки.

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Также скачайте исходники себе на компьютер!

Выше на изображении вы видите контент папки, содержащей финальную демоверсию страницы – как и обещано, ни одного изображения. У нас имеется страница HTML с «продвинутой» разметкой, файл CSS, содержащий стили, управляемые CSS3 и папка, содержащая несколько шрифтов, которые мы собираемся вставить, применив правило @font-face.

Как обычно, я советую расположить все содержимое сайта в файле index.html еще до того, как вам в голову придет перейти к CSS, так что давайте прямиком к этому и приступим.

Верстка на HTML5 — разработка быстрее, а код гибче

Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 & CSS3</title> <!—[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]—> <link href=styles.css rel=stylesheet /> </head>

<!DOCTYPE html>

<head>

<title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 & CSS3</title>

<!—[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]—>

</head>

Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

А вот как это было раньше:

<!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN» «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: ; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

<body> <header> <hgroup> <h2>Fictive Company Blog</h2> <h3>a blog showcasing the übercoolness of HTML5 & CSS3</h3> </hgroup> <nav id=global> <ul> <li><a href=#>Home</a></li> <li><a href=#>About</a></li> <li id=services> <a href=#>Services</a> <ul id=subMenu> <li><a href=#>Whatever</a></li> <li><a href=#>Your Heart</a></li> <li><a href=#>Desires</a></li> </ul> </li> <li><a href=#>Portfolio</a></li> <li><a href=#>Contact</a></li> </ul> </nav> </header>

<body>

<h2>Fictive Company Blog</h2>

<h3>a blog showcasing the übercoolness of HTML5 & CSS3</h3>

</hgroup>

<ul>

<li><a href=#>About</a></li>

<a href=#>Services</a>

<li><a href=#>Whatever</a></li>

<li><a href=#>Your Heart</a></li>

<li><a href=#>Desires</a></li>

</ul>

</li>

<li><a href=#>Portfolio</a></li>

<li><a href=#>Contact</a></li>

</ul>

</nav>

</header>

Элемент Header

Сразу же после открытия тэга body мы воспользуемся одним из новых элементов HTML5 – header. Вот какое определение дает элементу заголовка консорциум Word Wide Web (W3C):

Элемент заголовка (header) представляет вступительную группу или вспомогательные средства навигации.

Следуя их рекомендации, элемент header будет содержать наш логотип, подзаголовок и основную навигацию. При вводе элемента заголовка header у нас появляется деталь разметки, содержащая все те части страницы, которые мы интуитивно считаем заголовком. (Или все те детали страницы, которые будут вложены в элемент div с id заголовка.) На странице элемент header можно употребить не один раз, и мы снова будем пользоваться им внутри элементов article, в которых будут содержаться вступления к постам.

Элемент Hgroup

Первым внутри элемента заголовка идет другой новый тэг – hgroup. Мы воспользуемся им для показа соответственно логотипа нашего сайта и подзаголовка в тэгах h2 и h3.

Элемент hgroup используется для группирования набора элементов h2-h6, когда у заголовка имеются множественные уровни, такие как субименования, альтернативные названия или подзаголовки.

Элемент hgroup может смотреться излишним, пока вы не обернете, как обычно, заголовки в элемент div для того, чтобы у названия или субименования(й) был обычный фон или стиль. Однако в схеме документа hgroup играет важную роль. Алгоритм схемы проверяет вашу страницу и передает структуру заголовка. Проверить набросок своей работы с помощью инструмента Outliner. Когда алгоритм схемы столкнется с элементом hgroup, он проигнорирует все, кроме заголовка самого высшего уровня (обычно h2).

Теперь у нас возникла проблема: алгоритм схемы не безупречен и не завершен. Например, следующий элемент, который мы обсудим – это элемент nav, и разметка помечает его как «Untitled Section» (область без названия). К разработчикам разметки поступали просьбы об изменении алгоритма схемы для того, чтобы тот представлял элемент nav как «Navigation» (навигация). В любом случае, элемент hgroup обеспечивает вас способом группирования своих заголовков и, таким образом, организует их как структурно, так и семантически.

Элемент Nav

Мы переходим к следующему элементу HTML5 – nav. В nav мы включим основную навигацию сайта, обернутую в неупорядоченный список.

Элемент nav представляет сектор страницы, который ссылается на другие страницы или области внутри страницы: область со ссылками навигации.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Использование nav для создания основной навигации сайта – это нечто вроде данности, но обстоятельства таковы, что на вашем сайте будет больше областей, содержащих ссылки; вопрос в том, которые из них вам следует обернуть тэгом nav. Вот некоторые примеры использования, которые, я считаю, могут подойти:

Таблица содержания (TOC) в длинном документе;

Навигация «ссылки-цепочки»;

Нумерованные ссылки типа «предыдущий/следующий» и

Связанные посты.

Согласно спецификации, это могут быть подходящие или неподходящие случаи употребления элемента nav. Спецификация не очень четкая, а приводимые примеры не слишком помогают. Так что пока спецификация не окончательная и более конкретная, для выбора правильного метода использования элемента nav можно полагаться только на сообщество разработчиков.

Элемент Article

Следующий элемент, который я хочу вам представить – article. Основная область нашей демо-страницы содержит три цитаты из постов, и каждую из них мы обернем в тэг article.

<article> <header> <div class=time> <div class=year>2010</div> <div class=date>16<span>apr</span></div> </div> <h2>Sample Post 1</h2> <div class=comments>38</div> </header> <p>Curabitur ut congue hac, diam turpis[…]</p> <footer> <em>Written by:</em> <strong>Author Name</strong> <span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span> <a class=button href=#>Continue Reading</a> </footer> </article>

</div>

<h2>Sample Post 1</h2>

</header>

<p>Curabitur ut congue hac, diam turpis[…]</p>

<em>Written by:</em> <strong>Author Name</strong>

<span class=newLine><em>Tags:</em> <a class=tags href=#>cool</a><a class=tags href=#>modern</a><a class=tags href=#>hype-friendly</a></span>

<a class=button href=#>Continue Reading</a>

</footer>

</article>

Вот определение W3C для элемента article:

Элемент article представляет в документе модульную композицию […], таким образом, он предназначен стать автономно распределяемым или многократно используемым, например, при синдикации (одновременном опубликовании контента на нескольких веб-узлах).

На этот раз спецификация более понятная и пост в блог (или его отрывок) гораздо лучше (обратите внимание на упоминание о синдикации) подходит к article. Конечно, мы можем разместить на странице много элементов article.

Вы, несомненно, заметили, что внутри article мы разместили элементы заголовка и нижнего колонтитула. Как header, так и footer могут быть использованы более одного раза на отдельной HTML-странице. Так как header – это «вступительная группа или вспомогательный элемент навигации», то мы включили в него дату, название и количество комментариев. Далее, у нас имеется параграф с отрывком из поста, за которым следует footer (нижний колонтитул).

Элемент Footer

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

Элемент footer представляет нижний колонтитул той секции, к которой обращается. Обычно нижний колонтитул содержит информацию о своей секции, такую, как авторство, ссылки на связанные документы, дату копирайта и прочее.

У нас на демо-странице есть четыре элемента footer: по одному на каждый из трех элементов article и общий нижний колонтитул для всей страницы. Нижний колонтитул в элементе article содержит имя автора поста, тэги и кнопку ссылки на полную версию поста в блоге.

Общий нижний колонтитул содержит три элемента секций и извещение об авторском праве. Оба варианта использования элемента footer правомерны и соответствуют рекомендации W3C.

Элемент Section

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

Элемент section представляет общую область документа или приложения. Секция в данном случае – это тематическое группирование содержимого, обычно при помощи заголовка.

Элемент section довольно хитрый, потому что в определении по спецификации кажется очень похожим на элемент div. Я попался в эту ловушку, когда начал писать код для демо-страницы; я разместил внутри элемента section три элемента article. Вскоре я понял ошибочность своих методов. Единственный способ решить, употреблять ли section – это посмотреть, нужно ли той области, которую вы хотите обернуть элементом section, название (заголовок). Из определения видно, что у элемента section обычно есть заголовок.

Другой вопрос, который полезно задавать для установления обоснованности использования элемента section, это: добавляете ли вы его исключительно для стилей? Вы добавляете его просто потому, что нужно выделить эту секцию с помощью JavaScript, или потому что нужно применить к ней обычный стиль, и вы вместо того должны использовать элемент div.

Обертывание в тэг section трех элементов article нашей демо-страницы было бы оправдано, если бы section включал заголовок типа «Последние посты в блогах». Это имело бы смысл; иначе тэг, внутри которого расположены элементы article – это просто поддержка стилей – нечто, помогающее нам нацелиться на него при помощи JavaScript или CSS.

Элемент Aside

Последний используемый для демо-страницы элемент HTML5 – aside; мы использовали его как контейнер боковой колонки.

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

Как видно из спецификации, один из примеров идеального использования элемента aside – это боковая колонка. Ниже на графике можно увидеть расположение иерархии элемента aside нашей демо-страницы.

Мы разместили два section и один nav. Первый элемент section содержит ссылки на Twitter и RSS, а второй представляет последний твит (запись пользователя в Twitter’е). Второй элемент section, кроме того — один из редких случаев, когда у него отсутствует заголовок. У него могло бы быть название, что-нибудь типа: «Последний твит», но, я думаю, это необязательно, потому что читатели привыкли видеть блоки вроде этого, а метка Twitter’а под цитатой очень узнаваема. Элемент nav нашей боковой колонки используется для отражения списка блогов и, в отличие от основной навигации, у него есть заголовок.

Последнее слово

Итак, вот и подошла к завершению первая часть нашей статьи посвящённой верстке сайта на HTML5 и CSS3. Я старался сделать ее настолько короткой, насколько можно, и не тратить слишком много времени на неопределенности в спецификации HTML5, потому что она еще не закончена. Тем временем нам придется полагаться на сообщество и труд «лекарей» HTML5, что станут нашими проводниками по внедрению новых элементов в сайты.

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

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

Автор: Marko Randjelovic

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: [email protected]

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

webformyself.com

HTML5 и CSS3 на примерах

HTML (HyperText Markup Language, язык разметки гипертекста) — это прежде всего система вёрстки, которая определяет, как и какие элементы должны располагаться на веб-странице. Информация на сайте, способ её представления и оформления зависят исключительно от разработчика и тех целей, которые он перед собой ставит.

Что же такое стили или CSS (Cascading Style Sheets, каскадные таблицы стилей)? Стилем называется набор параметров форматирования, который применяется к элементам документа, чтобы изменить их внешний вид. Возможность работы со стилями издавна включают в развитые издательские системы и текстовые редакторы, тем самым позволяя одним нажатием кнопки придать тексту заданный, заранее установленный вид. Теперь это доступно и создателям сайта, когда цвет, размеры текста и другие параметры хранятся в определённом месте и легко «прикручиваются» к любому элементу.

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

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

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

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

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

Влад Мержевич

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

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 05.09.2017

Редакторы: Влад Мержевич

webref.ru

HTML5 | htmlbook.ru

HTML5 | htmlbook.ru
HTML5 — это не продолжатель языка разметки гипертекста, а новая открытая платформа, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и многое другое.
Семантика
Семантика дает представление о структуре документа и позволяет людям и программам более полно управлять данными. В HTML5 добавлено множество семантических тегов, а также поддержка RDFa, микроформатов и микроданных.
Автономная работа
Благодаря кэшу HTML5, веб-приложения могут быстрее работать и запускаться даже без подключения к Интернету.
3D, графика и эффекты
Можно рисовать прямо на веб-странице используя Canvas API. Технологии WebGL и CSS3 3D позволяют отображать трехмерную графику непосредственно в браузере.
Мультимедиа
Приложения и сайты могут проигрывать аудио и видео без установки дополнительных плагинов вроде Flash-а.
Производительность и интеграция
Сделайте свои веб-приложения быстрыми и динамичными с разными технологиями вроде Web Workers и XMLHttpRequest 2.
CSS3
CSS3 в интеграции с HTML5 позволяет управлять видом любых элементов на странице, создавать потрясающие эффекты без ущерба семантической структуры, производительности и без дополнительных скриптов.
Ничего не знаете об HTML5?
Начните изучение HTML5 с книги Марка Пилгрима Погружение в HTML5.
В HTML5 появилось множество семантических элементов, а также тегов, позволяющих вставлять аудио и видео на сайт.
<article> <aside> <audio> <canvas> <command> <datalist> <details> <figcaption> <figure> <footer> <header> <hgroup> <keygen> <main> <mark> <menu> <meter> <nav> <output> <progress> <rp> <rt> <ruby> <section> <source> <summary> <time> <video> <wbr>
Вёрстка сайта на HTML5
Описание процесса вёрстки сайта lionindesert.ru на HTML5.
Форум
Также разные аспекты HTML5 можно обсудить на форуме.
Проверка знаний
Вы можете проверить свои знания форм в HTML5 с помощью тестирования.
Пройти тест Формы в HTML5
О сайте
Помощь
Копирование материалов
Борьба с ошибками
Технологии
Поисковый плагин
Основные разделы
Статьи
Блог
Практикум
Цифровые книги
Форум
HTML
Самоучитель HTML
XHTML
Справочник по HTML
HTML5
CSS
Самоучитель CSS
Справочник по CSS
Рецепты CSS
CSS3
Сайт
Вёрстка
Макеты
Веб-сервер
htmlbook.ru использует Друпал хостинг it-patrol
© 2002–2019 Влад Мержевич, по всем вопросам пишите по адресу [email protected]
Подпишитесь на материалы сайта по RSS
htmlbook.ru
Чего я ждал от HTML5 и CSS3 / Habr
Веб разработкой я занимаюсь давно, и помню еще IE3 и NN4.xx. Многое изменилось с тех пор, много воды утекло. Пришло понимание всех технологий не на уровне «HTML — это текстовый файлик, в котором попадаются какие-то слова в скобочках», а понимание логики построения самого языка разметки, его абстракций.
Начало разработки спецификаций HTML5 и CSS3 уже не вызывала у меня щенячьего восторга и бурной радости, а воспринималась как вполне эволюционное событие. Заглядывал я в рабочие черновики изредка, отмечая для себя основные направления развития. Но чем больше спецификации приближаются к финалу, тем страшнее мне становится. Это не то направление развития, которое требует рынок!
Возникает резонный вопрос, куда делись все те люди, которые разрабатывали стандарты 10 лет назад? Куда делись инновации? Почему w3c создает стандарт, который, по некоторым меркам, уже устарел?
Давайте разберемся.
HTML5

Одними из самых непонятных мне тегов являются del и ins. Они грязным хаком прошли по всей структуре языка, имея при этом весьма сомнительную пользую. Попытки перенести логику офисных документов на веб-страницу закончатся полным фиаско. Почему? Да очень просто! Если вам нужно получить историю изменений документа, то сделать это можно внешними программами, не перенося этот функционал внутрь языка. История правок нужна менее чем одной сотой доле процента пользователей, все остальные спокойно довольствуются текущей актуальной версией данных на момент поиска информации. Парсинг кода с учетом этих двух «замечательных» тегов будет сплошным негативом, потому что нарушается стройность и логичность языка, его предсказуемость.
Второй прикол, это попытка всунуть в HTML вещи, которые нельзя было туда добавлять ни в коем случае. Это атрибуты contenteditable, draggable и прочие интерактивы. Это должно быть вынесено в CSS, DOM, куда угодно, только не в HTML. Это интерактивы, а не разметка. Интерактив должен быть управляемым, и для управления есть замечательный JS и великолепный CSS. Писать эти атрибуты прямо в HTML — очень сильно попахивает HTML образца версии 3.2.
Третий прикол, это жалкие попытки структурировать документ, путем введения дополнительных структурных элементов. Это просто цирк какой-то. За эти слова в меня будут кидаться тапками, но, надеюсь, ряд людей поймет, почему я так говорю. Отойдем от этой темы в сторону и порассуждаем о том, зачем же нужен HTML. А нужен он для того, чтобы сделать разметку некой информации. На данный момент времени разметка включает не только контент, но и дизайнерские изыски. Итак, у нас есть мухи отдельно (структуры, которые нужны для оформительских целей), и котлеты отдельно (непосредственно сам контент). Для контента HTML подходит на ура, а вот с дизайнерскими изысками большие проблемы. Да и с логическими структурами страницы тоже проблемы. У одного на сайте меню, сайдбар и контент, а у второго — шапка с главным меню, второстепенное меню, два сайдбара слева и справа, рекламный бокс, список товаров и прочее. Как их подружить? Да легко! Нужно всего лишь позволить придумывать свои теги! XML для оформления страницы, HTML — для оформления контента. Почему бы сразу не использовать XML? С ним будет больше сложностей для поисковиков. На рынке есть удачное решение проблем поиска при такой структуре документов — микроформаты. Создав, например, атрибут behavior, который будет содержать описание поведения элемента, можно спокойно рассказывать поисковым системам где и что у тебя организовано.
Насоздавали всевозможные типы форм ввода. Забыли только придумать, как это все богатство стилизовать. Понимаю, что однообразие интерфейса важная вещь, но стилизация может быть как позитивным, так и негативным фактором в развитии веб-интерфейсов. Рынок требует этого, значит нужно это делать.
Вот мы и подошли плавно к теме CSS3
CSS3

Продолжим тему веб-форм. Рынок веб-интерфейсов ожидает контроллируемую стилизацию полей ввода. На практике это означает, что я хочу из любого элемента сделать любое поле ввода. Я хочу сделать чекбокс со своим собственным дизайном, хочу сделать селектбокс со своим оформлением, каждую опцию создавать из своей собственной XML-структуры и так далее. Что мы видим в рабочем варианте спецификации? А ничего.
Темплейты отображения (Template Layout) сперва меня вдохновили, потом, после моделирования реальных ситуаций, я понял, что это работать не будет вообще. Если контент статичен, то такой подход работать будет. Но как только появляется динамика…
Возьмем вполне нормальную ситуацию: у нас есть четыре блока, которые, в зависимости от ширины контента или окна браузера, должны выстраиваться друг за другом, и занимать или одну строку, или две, три, четыре строчки. Обычные float’ы. Все, коллапс, ведь темплейт не описывает поведение блока и перемещение его в случае, если он не влазит в некое пространство. Позиция блока в темплейте четко зафиксирована, адаптивную верстку делать будет крайне затруднительно. А это требует рынок, а это сейчас делается при помощи костылей. Кроме этого не совсем понятно, как при изменении DOM дерева, блок, у которого прописана четкая позиция в темплейте на странице, будет себя вести. Но это никого не волнует, мы из веб-страничек делаем журнальную верстку. Я писал про это Д. Барону, но эффект нулевой.
Вернемся еще к одной очень важной вещи, под названием точка отсчета. Точка отсчета на данный момент времени выбрана одна — левый верхний угол. Рассчет позиции того же фона ведется именно из этого места. Но в мире существуют не только те, кто читает слева направо, а еще и те, кто читает справа налево, сверху вниз и так далее. Теперь попробуйте без костылей сделать мультиязыковый дизайн. А решение проблемы у всех под носом — нужно всего лишь изменить точку отсчета, и позиция фона для жителей Саудовской Аравии, чудным образом осталась бы неизменной, например 10px 10px, и находилась бы в верхнем правом углу, ровно на данное смещение. Развивая идею с точкой отсчета, можно обнаружить более управляемый контроль позиции абсолютных элементов, контроль трансформации объектов и много полезного. Но этого я не нашел в спецификации.
Перечислять неувязки можно долго. Не думайте, что моя задача очернить работу w3c, там работают очень умные люди. Просто за время создания новой спецификации часть изначальных целей перестала быть актуальной. Рынок развивается очень быстрыми темпами, и от w3c требуется больше интерактива с разработчиками. Моя же основная цель — заставить людей задуматься над тем, что они делают и как они думают.
UPD: Огромное спасибо всем за позитивную и негативную карму!
UPD2: Изменил абзац про темплейты отображения
habr.com
Видео курс HTML 5, CSS и созданию сайтов. Введение в HTML5
В первом видео уроке Вы узнаете об истории развития языка HTML, о возможностях, которые описаны в спецификации HTML5 и которые начинают реализовываться в современных браузерах. Основной темой этого урока является семантическая разметка – набор новых элементов, таких как header, section, nav, article, которые направлены на создание более описательной структуры HTML документа, в которой каждый элемент самостоятельно описывает назначение той или иной части страницы. В этом уроке Вы получите рекомендации по верстке сайтов и узнаете список веб ресурсов, которые помогут Вам находить ответы на вопросы по веб разработке и определять поддержку новых функций HTML 5 в браузерах.
Здравствуйте, Я рад приветствовать Вас на курсе, который посвящен разработке приложений на HTML 5 и CSS3. Это базовый курс. Что бы успешно усвоить материал данного курса, вы должны знать основы HTML верстки и иметь базовые навыки работы с JavaScript кодом. Тема урока: введение в HTML5. Мы сегодня с вами разберем кратко историю развития спецификации, увидим основные возможности, так же мы разберем семантическую разметку, это новые элементы, которые применяются при делении структуры документа и так же рассмотрим несколько особенностей, о которых вы должны знать создавая новый документ используя HTML 5. Что такое HTML я думаю уже знают все, даже те кто не имеют отношения к веб программированию.
HTML – стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц создаются при помощи языка HTML. Язык HTML интерпретируется браузерами и отображается в виде документа в удобной для человека форме.
HTML5 – это пятая версия языка разметки HTML, предназначенная для создания веб-приложений использующих аудио, видео, графику, анимацию и другие функции необходимые для разработки мультимедийных приложений.
Давайте кратко рассмотрим историю развития языка HTML, для того чтобы понимать, на каком этапе мы находимся.
Язык HTML был разработан вначале 90-х годов британским ученым Бернардсом Ли, он так же является автором многих других веб-стандартов и веб-технологий, например протокол HTTP.
Его биографию, историю созданий некоторых приложений вы можете посмотреть на Википедии.
Язик HTML 5, если посмотреть на историю, достаточно быстро начал развиваться. С 1995 – 1997 год, вышло 3 версии. В 1999 году вышел HTML версии 4.1 и на этом этапе развитие HTML затихло.
Я думаю вы все знаете организацию World Wide Web Consortium, которая занимается стандартизацией веб технологий. В 2004 году несколько крупных производителей браузеров собрали группу и под ее руководством было положено развитие новой спецификации HTML5. К 2008 году консорциум переподключился к развитию этой спецификации и со временем от разработки XML и XHTML второго стандарта отказались. Акцент был сделан на HTML5 спецификацию. В 2008 году появилась первая версия и на данный момент HTML5 все так же остается в разработке. На текущий момент спецификация еще не завершена. Завершение разработки планируется в 2014 году. Всю историю разработки вы можете посмотреть на Википедии или на сайте самой группы разработчиков. Давайте перейдем к следующему слайду и посмотрим идеологию, которой придерживается компания разрабатывающая HTML5 спецификацию. Первый пункт это
Совместимость – если вы разрабатываете сайт на HTML5, то можете не беспокоится, он будет корректно работать, без сбоев, даже в тех браузерах, которые не поддерживает HTML5.
Второй пункт: удобство в использовании – если при разработке возникают спорные вопросы, то в решении на первом месте пользователи, на втором месте разработчики, браузеры, которые занимаются разработкой продукта и на последнем месте идут разработчики стандарта. HTML5 спецификация на первое место ставит потребности конечного пользователя.
Упрощение взаимодействия с браузером. В HTML5 есть много функций, которые предоставляются браузером. Раньше нужно было писать большие блоки кода для решение поставленных задач, сейчас решение задачи будет в вызове 1-2 строчек кода, которые будут обращаться к инструментам браузера.
Универсальность доступа – возможность получения информации с сайта всеми пользователями в независимости от их возможностей, от языка и т.п. По сути универсальность доступа базируется на 3-х принципах: доступность, сайт HTML5 спецификации работает с несколькими стандартами, которые предназначены для предоставления функциональности пользователям с ограниченными возможностями. Следующий пункт это – независимость от мультимедийных устройств.
Парадигма без подключаемых модулей – для поставки решения не надо использовать внешние плагины.
Первый пункт: Canvas – элемент для использования растровых изображений в документе.
Передача сообщений между документами – 2 разных документа могут наладить между собой общение.
Geolocation API – возможность, встроенная в браузер, которая дает информацию об текущем расположении пользователя.
MathMl – набор элементов для отображения сложных формул.
Microdata – элемент для добавления специальных данных. Можно добавить элементы для читания поисковиками.
WebSocket – протокол для создания приложений реального времени. Можно сделать приложение, в котором серверная сторона может обратится к клиентской. Например: чат.
С использованием данного инструмента можно оповестить всех участников чата об сообщении.
Веб-хранилища – дополнительные возможности сохранять данные на стороне клиента.
Web SQL Database – возможность использование базы данных в коде. База будет собой представлять текстовый файл.
Web Workers – инструмент для создания отдельных веб приложений.
XMLHttpRequest Level 2 – инструмент для написания Ajax сайта.
Теперь давайте перейдем в Visual Studio и начнем разбирать примеры по текущему уроку. Конечно вы можете использовать не только Visu
itvdn.com

Comments

Leave Comment

Html5 и css3 – HTML5 CSS3 верстка, знакомство

HTML5 CSS3 верстка, знакомство

План занятия:

Что такое верстка сайта или страницы для интернета

Знакомство с HTML5

Программное обеспечение для верстальщика

Дополнения для верстальщика на Mozilla

Сайт с css и без css

Практическое начало в HTML

Основные отличия HTML5 от HTML4

Заголовки и подзаголовки в html

Теги форматирования текста

Понятие строчного и блочного элемента

Изображения на веб странице

Создание гиперссылок

Внешние ссылки

Внутренние ссылки

Графическая ссылка

Якорная ссылка

Ссылка на почтовый адрес

HTML5 и CSS3 — начнём верстать. Часть 1

Из серии статей «HTML5 и CSS3 – наступает время пользоваться»

Продолжение статьи Чем нас радует CSS3

Готовим каркас страницы

Делаем разметку контента

Разместим на каркасе семантические блоки

Покрасим фасад

Верстка сайта на HTML5 и CSS3

Верстка на HTML5 — разработка быстрее, а код гибче

Элемент Header

Элемент Hgroup

Элемент Nav

Элемент Article

Элемент Footer

Элемент Section

Элемент Aside

Последнее слово

PSD to HTML

HTML5 и CSS3 на примерах

Влад Мержевич

Автор и редакторы

HTML5 | htmlbook.ru

Семантика

Автономная работа

3D, графика и эффекты

Мультимедиа

Производительность и интеграция

CSS3

Ничего не знаете об HTML5?

Вёрстка сайта на HTML5

Форум

Проверка знаний

О сайте

Основные разделы

HTML

CSS

Сайт

Чего я ждал от HTML5 и CSS3 / Habr

HTML5

CSS3

Видео курс HTML 5, CSS и созданию сайтов. Введение в HTML5

Leave a Comment Отменить ответ

Leave a Comment
Отменить ответ