h2>Самоучители по CSS
Видеоуроки CSS от Евгения Попова (2014) — 664 MB
С помощью видеоуроков CSS новичкам будет гораздо проще разобраться со всеми хитросплетениями языка стилей, изучить применение вcех его возможностей на практике.
Обучающий видеокурс по CSS отличается высококачественным изложением материала, Вы легко изучите и поэтапно освоите необходимый объем знаний по языку стилей, позволяющий создавать шаблоны веб-сайтов любого уровня сложности.
CSS: обучающие видео уроки. (2012) — 344 MB
Видео по CSS имеет логичную структуру, удобную для изучения последовательность уроков, качественное озвучивание. Видео уроки содержат необходимый знания, позволяющие решать конкретные практические задачи по созданию сайта, его переустройству.
Уроки знакомят с основами CSS, конструкцией языка. По мере усложнения, уроки постепенно знакомят с селекторами, отвечающими за фон, цвет, форматирование текста, созданием списков и ссылок. Далее, блочная модель верстки: создание макетов сайтов с различным количеством колонок, меню сайта, футер, нюансы и специфика CSS.
CSS. Рецепты программирования, 3-е издание. (2011) — 23.3 MB
В книге по CSS содержатся многочисленные примеры, с помощью которых, даже новичок, сможет изучить язык CSS и создать стилевое оформление своего сайта самостоятельно. Подходит для более глубокого освоения и понимания языка.
Книга поможет изучить основы CSS, организованна как справочник по CSS, версий 2.1 и CSS3, удобна в использовании
Пристальное внимание уделяется кроссбраузерности, хитростям при составлении кода, его компактности и универсальности
CSS: 100 и 1 совет, 3-е издание (2010) — 5.8 MB
Учебник CSS написан для веб-дизайнеров и вебмастеров, не желающих тратить время на изучение и штудирование скучных, длинных трудов, из области теоретических разработок. Учебник содержит только готовые решения, которые нужно применять для практической работы сразу.
Учебник будет незаменим, как справочник по CSS, веб-разработчикам при создании сайтов. В нем находятся примеры и готовые решения использования средств языка CSS, как стандартные и функциональные, так и довольно любопытные и оригинальные.
CSS — каскадные таблицы стилей. Подробное руководство, 3-е издание (2008) — 6.8 MB
Самоучитель CSS позволяет изучить и реализовать на практике все возможности каскадных таблиц стилей для стандартов CSS 2 и CSS 2.1. Большое количество примеров в самоучителе по CSS позволят изучить быстроое создание стилевого оформления страниц веб-сайта, отвечающего современным требованиям.
Эрик Мейер, признанный эксперт по CSS, HTML и веб-стандартам, опираясь на свой богатейший опыт, рассматривает в самоучителе все свойства CSS, их взаимодействие, теги, атрибуты, поддержку различными браузерами, дает рекомендации веб-разработчикам по созданию сайтов.
Заинтересованному кругу лиц и друзьям:
Блок . Списки
Наряду с абзацами и заголовками существует еще один важный элемент страницы —
это списки. Такие элементы наверняка знакомы всем пользователям
интернета.
Они представляют собой перечисление чего-либо (список) по пунктам. Возле каждого
пункта списка обычно стоит закрашенный кружок (он называется маркер
списка).
Списки создаются с помощью тега <ul>, внутри
которого обязательно должны идти теги <li>.
Тег ul задает сам список, а в теги li следует ложить пункты списка
(то есть одному li
соответствует один маркер списка). Имейте ввиду, что отдельно теги li
использовать нельзя.
Смотрите пример:
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Списки, созданные через тег ul, называются неупорядоченными
списками.
Такое название им дано потому, что существуют еще и упорядоченные списки,
у которых вместо маркеров-точек будут маркеры-цифры. Такие списки вместо тега ul
имеют тег <ol>, а пункты таких списков также
создаются через теги
li.
Давайте сделаем упорядоченный список, используя тег ol:
- Первый пункт списка.
- Второй пункт списка.
- Третий пункт списка.
Удобство упорядоченных списков в том, что я могу вставить новый пункт
списка в любое место — и нумерация сама перестроится (то есть мне не приходится
за ней следить
в случае каких-либо изменений, как было бы в том случае, если бы я расставлял ее
вручную).
Фреймы
Тег
<iframe>…</iframe> позволяет загружать в область заданных размеров любой другой документ. Основной атрибут —
src. Он задаёт адрес подгружаемого элемента.
Пример:
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML iframe example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
<style>
/* Обязательно нужно задать ширину и высоту для iframe*/
iframe {
width : 200pt;
height : 200pt;
}
</style>
</head>
<body>
<iframe src=»https://urvanov.ru»>
Этот текст будет отображаться только в браузерах, которые не поддерживают iframe.
</iframe>
<iframe src=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/»>
</iframe>
<div>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#iframe»>Фреймы <iframe></iframe></a>
</div>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>HTML iframe example</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″> <style> /* Обязательно нужно задать ширину и высоту для iframe*/ iframe { width200pt; height200pt; } </style> </head> <iframe src=»https://urvanov.ru»> Этот текст будет отображаться только в браузерах, которые не поддерживают iframe. <iframe src=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/»> </iframe> <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#iframe»>Фреймы <iframe></iframe></a> </div> |
Что делать дальше, освоив HTML и CSS?
Когда вы изучите язык разметки и таблицы стилей, советую учить JavaScript. Это язык программирования, который позволяет создавать различные интерактивные элементы на странице, а также использовать технологию AJAX. С ее помощью можно обновлять части страниц без перезагрузки, что значительно ускоряет взаимодействие с сайтом. Пример реализации AJAX – бесконечная загрузка новой информации в ленте новостей.
Зная разметку и JavaScript, вы сможете стать начинающим Frontend-разработчиком и получить высокооплачиваемую работу в веб-студии или выполнять заказы на фрилансе.
Как быстро освоить JavaScript, мы постараемся рассказать в следующих статьях.
- Как и сколько можно заработать на верстке сайтов?
- Как зарабатывают на создании сайтов в интернете?
- Как стать JavaScript программистом?
Рекомендуем
Как найти хорошего маркетолога и где искать специалиста?
Прочитав статью, вы узнаете, где найти специалиста по маркетингу, проверить его квалификацию и выбрать лучшего кандидата. Где разместить вакансии, …
Курсы копирайтинга в Нетологии: обзор, стоит ли учиться на копирайтера?
Копирайтинг или написание текстов – одна из самых востребованных услуг в интернете. Профессиональный автор может зарабатывать 50-60 тыс. рублей в …
Абзац
Спомощью тега <p>…</p> можно делить текст на абзацы. Между абзацами добавляется одна пустая строка. Пример:
p.html
XHTML
HTML p example
Это первый абзац. Здесь можно написать очень много текста. Жил-да-был старик со старухой где-то далеко-далеко. Так далеко, что и не вспомнить уже.
Это второй абзац
Обратите внимание на то, что он отделён от первого абзаца одной пустой строкой. А давеча к нам мужик один заходил
Лапти словно пылают, а сам в стельку.
Абзац <p></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
HTML p example
Это первый абзац. Здесь можно написать очень много текста. Жил-да-был старик со старухой где-то далеко-далеко. Так далеко, что и не вспомнить уже.
Это второй абзац
Обратите внимание на то, что он отделён от первого абзаца одной пустой строкой. А давеча к нам мужик один заходил
Лапти словно пылают, а сам в стельку.
Абзац <p></p>
Картинки
С помощью тега
<img> можно вставить изображение на страницу. Можно использовать картинки в формате GIF, JPEG, SVG, PNG. Адрес изображения указывается с помощью атрибута
src. Также нужно обязательно указать атрибут
alt, который содержит текст, выводящийся в случае отключённых картинок в браузере. Можно с помощью атрибутов
width и
height указать ширину и высоту изображения, чтобы по окончании загрузки текст на странице не прыгал из-за изменения размеров области, занимаемой тегом
<img>.
Пример:
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML img example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
</head>
<body>
<img alt=»картинка» src=»image0001.png» width=»100″ height=»100″>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#img»>Картинки <img></a>
</p>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>HTML img example</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″> </head> <img alt=»картинка»src=»image0001.png»width=»100″height=»100″> <p> <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#img»>Картинки <img></a> </p> |
Пару слов об учебнике
Наш
учебник (самоучитель) по основам языка гипертекстовой разметки
HTML предназначен как для начинающих программистов, так и
состоявшихся профессионалов, которые решили освоить новую область
веб-программирования с нуля. Учебник написан довольно просто и максимально последовательно и не
требует каких-либо отдельных знаний по CSS, т.к. согласно принципу разделения содержимого страницы и ее оформления,
HTML теперь отвечает только за структуру и логическую разметку страницы, а оформление ложится полностью на
каскадные таблицы стилей. Дополнительно к учебнику по HTML прилагается
задачник с решениями, что несомненно позволит новичкам самостоятельно изучить
основы HTML с нуля и за максимально короткие сроки.
Начинать изучать веб-программирование следует именно с языка гипертекстовой разметки HTML, т.к. ни один сайт в
интернете не обходится без него. И хотя HTML скорее является формальным, чем полноценным высокоуровневым языком
программирования, он позволяет начинающим программистам приучиться к аккуратному набору кода (неформатированный код очень тяжело читать и
редактировать), внимательности при вводе синтаксических конструкций (пропуск даже единичных служебных символов может привести к неработоспособности
всего кода), а также знакомит новичков с понятием комментариев и общими правилами их составления.
Чтобы посмотреть результат выполнения исходного кода примеров учебника во фрейме кодового блока, используйте кнопку
«Результат».
Если на вашем хостинге имеется возможность использовать python-скрипты , то вам наверняка будет полезно почитать и наш учебник
«Основы Python с нуля».
Новые уроки HTML | Пример HTML кода
Рассмотрим его элементы:
– теги, определяющие начало и конец документа.
– служебная секция. Здесь размещаются команды для браузеров, инструкции для поисковых роботов, ссылки на отдаленные файлы, скрипты.
– теги, определяющие главный заголовок документа.
– эта секция содержит всю видимую часть web-страницы.
В браузере мы увидим Hello World!:
Откройте результат в новом окне.
Для изучения HTML необходим Блокнот . В нем мы будем вручную печатать код. Пожалуй, все… Интерпретацией кода занимается программное обеспечение для просмотра web-страниц, то есть Internet Explorer, Firefox, Opera, Chrome и другие браузеры.
В уроках данного курса будет представлен HTML 5, XHTML и CSS включения. Такая комбинация является оптимальной для обучения и позволяет значительно ускориться в освоении материала.
В настоящее время на официальном сайте W3C консорциума уже доступна спецификация HTML 5. Разработка пятой версии началась еще в 2007 году, в основе ее лежит XML и по сути она является, дополненным новыми элементами и атрибутами, XHTML-ем. Пятая версия HTML предлагает более широкую функциональность и упрощает процесс создания интерактивных сайтов и web-приложений. Помимо этого, HTML 5 содержит дополнительные элементы, обеспечивающие размещение внутри web-страницы мультимедийного контента.
Новый HTML пока еще не получил статус рекомендации, а его теги, на данном этапе, распознаются только некоторыми браузерами. Но несмотря на это, уроки HTML 5 доступны уже сегодня.
Post Scriptum: Сеть интернет состоит из бесконечного множества страниц, связанных между собой гиперссылками, посредством «протокола передачи гипертекста» — HyperText Transfer Protocol или сокращенно HTTP — протокол передачи данных в виде гипертекстовых документов. А что такое HTML? HTML — HyperText Markup Language или язык гипертекстовой разметки документов.
Сделаем единственный правильный вывод: чтобы самостоятельно создать свой сайт, нужно изучить современные уроки HTML для начинающих создателей сайтов.
Уроки HTML и уроки CSS являются основой сайтостроения. Отделив достаточно времени на их изучение, вы научитесь создавать свои первые интернет-страницы. Уроки Photoshop дадут необходимые знания в области веб-дизайна. Соберитесь с мыслями и вперед – покорять свои вершины!
Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018
Уроки HTML для начинающих Новые уроки HTML » Урок по HTML структуре
Блок
Тег
<div>…</div> позволяет сгруппировать элементы и применить к ним какой-нибудь стиль CSS. Это блочный элемент, и он так же, как и
<p></p> всегда начинается с новой строки и после него автоматически вставляется перевод строки.
Пример:
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>CSS div example</title>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
</head>
<body>
<div style=»border : 1px solid #000000;»>
содержимое первого div.
</div>
<div style=»background-color:#f0f0f0;»>
содержимое второго div.
</div>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#div»>Блок <div></div></a>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>CSS div example</title> <meta http-equiv=»Content-Type»content=»text/html; charset=utf-8″> </head> <div style=»border : 1px solid #000000;»> содержимое первого div. <div style=»background-color:#f0f0f0;»> содержимое второго div. <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#div»>Блок <div></div></a> </body> |
Код
Тег
<code>…</code> предназначен для отображения куска кода. Он обычно отображается моноширинным шрифтом уменьшенного размера. Все пробелы, табуляторы и переводы строк внутри него склеиваются в один пробел, как это происходит в других элементах, чтобы вывести перевод строки нужно использовать элемент
<br>.
Пример:
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML code example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
</head>
<body>
<p>
Обычный текст
</p>
<code>
Тег внутри code.<br>
Можно писать текст программы.<br>
Program lab1;<br>
begin<br>
{Пробелы склеиваются. Поэтому используем нерастяжимые пробелы.}<br>
Writeln(‘Привет’);<br>
end.<br>
</code>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#code»>Код <code></code></a>
</p>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>HTML code example</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″> </head> Тег внутри code.<br> Можно писать текст программы.<br> Program lab1;<br> begin<br> {Пробелы склеиваются. Поэтому используем нерастяжимые пробелы.}<br> Writeln(‘Привет’);<br> end.<br> </code> <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#code»>Код <code></code></a> </p> |
Оглавление учебника
- Глава 1. Введение в HTML
-
§1. Что такое HTML?
-
§2. Отображение веб-документа браузером
-
§3. Понятие тега HTML и его синтаксис
-
§4. Структура html-документа
-
§5. Виды элементов html-разметки
-
§6. Универсальные атрибуты и атрибуты-события
- §7. Форматирование исходного кода html-документа
- §8. Мнемоники и коды Юникод в HTML
-
- Глава 2. Форматирование текста в HTML
-
§9. Блочные и строчные элементы в HTML
-
§10. Абзац, заголовки и преформатированный текст в HTML
-
§11. Теги <br>, <wbr> и <hr>
-
§12. Элементы «span» и «div»
-
§13. Физическое и логическое форматирование документа
-
§14. Cписки в HTML
-
§15. Таблицы в HTML
-
§16. Гиперссылки в HTML
-
- Глава 3. Служебные теги в HTML
- §17. Понятие служебного тега
- §18. Тег <base>
- §19. Тег <link>
-
§20. Тег <meta>
- §21. Тег <title>
- §22. Тег <style>
-
§23. Тег <script>
- Глава 4. Использование графики в html-документе
-
§24. Форматы графических файлов
-
§25. Вставка изображения в документ
-
§26. Понятие карты-изображения
- §27. Тег <canvas>
-
- Глава 5. Вставка в html-документ медиафайлов и других объектов
-
§28. Использование аудиозаписей на странице
-
§29. Использование видеороликов на странице
-
§30. Вставка на страницу объектов при помощи тега <embed>
-
§31. Фреймы в HTML
-
- Глава 6. Формы в HTML
-
§32. Понятие html-формы
- §33. Методы передачи данных GET и POST
-
§34. Универсальный тег <input>, назначение тега <label>
-
§35. Ввод данных в форму в виде многострочного текста
-
§36. Создание кнопок при помощи тега <button>
-
§37. Создание раскрывающихся списков внутри форм
-
§38. Группировка элементов формы, теги <fieldset> и <legend>
-
- Глава 7. Подробнее о структуре html-документа
-
§39. Структура html-документа
-
- Глава 8. Немного о файловой структуре сайта
-
§40. Понятие файловой структуры сайта
-
§41. Установка иконки сайта
-
§42. Карта сайта
-
§43. Служебный файл robots.txt
-
Теги HTML-документа[править]
Как устроен HTML-документправить
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html>
<head>
<title>
Пример 1
</title>
</head>
<body>
<H1>
Привет!
</H1>
<P>
Это простейший пример HTML-документа.
</P>
<P>
Этот *.html-файл может быть
одновременно открыт и в Notepad, и в браузере.
Сохранив изменения в Notepad, просто нажмите
кнопку Reload ('перезагрузить') в браузере,
чтобы увидеть эти изменения реализованными
в HTML-документе.
</P>
</body>
</html>
Попробуйте написать этот документ в программе Блокнот и просмотреть в браузере.
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html>
<head>
<title>Пример 1</title>
</head>
<body>
<H1>Привет!</H1>
<P>Это простейший пример HTML-документа.</P>
<P>Этот *.html-файл может быть одновременно открыт
и в Notepad, и в браузере.
Сохранив изменения в Notepad, просто нажмите кнопку
Reload ('перезагрузить') в браузере, чтобы увидеть
эти изменения реализованными в HTML-документе.</P>
</body>
</html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется тегом (по-английски — tag, читается «тэг»).
Большинство HTML-тегов — парные, то есть на каждый открывающий тег вида <tag> есть закрывающий тег вида </tag> с тем же именем, но с добавлением «/».
Теги можно вводить как большими, так и маленькими буквами. Например, теги <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие теги, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущий тег. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные тегиправить
<html> ... </html>
Тег <html> должен открывать HTML-документ. Аналогично, тег </html> должен завершать HTML-документ.
<head> ... </head>
Эта пара тегов указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание тега <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<meta>
Тег meta определяет кодировку сайта, хранит служебную информацию для поисковых роботов и браузеров.
<title> ... </title>
Всё, что находится между тегами <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> ... </body>
Эта пара тегов указывает на начало и конец тела HTML-документа, которое и определяет содержание документа.
<H1> ... </H1> — <H6> ... </H6>
Теги вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> ... </P>
Такая пара тегов описывает абзац. Всё, что заключено между
<P>
и
</P>
воспринимается как один абзац.
Теги
<Hi>
и
<P>
могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:
<H1 ALIGN=CENTER>Выравнивание заголовка по центру</H1>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
Подытожим всё, что мы знаем, с помощью примера 2:
<html> <head> <title>Пример 2</title> </head> <body> <H1 ALIGN=CENTER>Привет!</H1> <H2>Это чуть более сложный пример HTML-документа</H2> <P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю.</P> </body> </html>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ.
Списки ,
Тег
<ol>…</ol> задаёт упорядоченный список. Элементы в нём имеют нумерацию. Используется когда порядок перечисления элементов имеет значение.
Тег
<ul>…</ul> задаёт неупорядоченный список. Используется когда порядок перечисления элементов не имеет значения.
Внутри тегов
<ol>…</ol> и
<ul>…</ul> пункты списков перечисляются с помощью тега
<li>…</li>.
Пример:
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML ol ul example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
</head>
<body>
Упорядоченный список:
<ol>
<li>Яйцо</li>
<li>Цыплёнок</li>
<li>Курица</li>
</ol>
Неупорядоченный список:
<ul>
<li>Кошка</li>
<li>Собака</li>
<li>Суслик</li>
</ul>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#olul»>Списки <ol></ol>, <ul></ul></a>
</p>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>HTML ol ul example</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″> </head> <li>Яйцо</li> <li>Цыплёнок</li> <li>Курица</li> </ol> <li>Кошка</li> <li>Собака</li> <li>Суслик</li> </ul> <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#olul»>Списки <ol></ol>, <ul></ul></a> </p> |
Таблицы
Тег
<table>…</table> позволяет рисовать таблицы. Внутри тега
<table>…</table> могут быть несколько элементов. Обычно иерархия там такая:
XHTML
<table>
<thead>
<tr>
<th>Столбец 1</th>
<th>Столбец 2</th>
…
</tr>
</thead>
<tbody>
<tr>
<td>Данные 1</td>
<td>Данные 2</td>
…
</tr>
<tr>
<td>Данные 3</td>
<td>Данные 4</td>
…
</tr>
…
</tbody>
</table>
|
1 |
<table> <thead> <tr> <th>Столбец 1</th> <th>Столбец 2</th> … </tr> </thead> <tbody> <tr> <td>Данные 1</td> <td>Данные 2</td> … </tr> <tr> <td>Данные 3</td> <td>Данные 4</td> … </tr> … </tbody> </table> |
Внутри
<thead>…</thead> объявляется одна или несколько строк (но чаще одна), которая обычно представляет собой шапку таблицы.
Внутри
<tbody>…</tbody> объявляются строки таблицы.
Тег
<tr>…</tr> представляет собой строки таблицы.
Тег
<th>…</th> представляет собой ячейку в шапке таблицы.
Тег
<td>…</td> представляет собой ячейку данных.
У тегов
<th>…</th> и
<td>…</td> есть два важных атрибута:
colspan и
rowspan. Они указывают, сколько ячеек нужно объединить по горизонтали и по вертикали соответственно.
По умолчанию у ячеек таблицы нет никаких рамок, поэтому нужно использовать свойства CSS border и border-collapse.
Пример:
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML table example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
<style>
table, td, th {
border : 1px solid;
border-collapse : collapse;
}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Королевство</th>
<th>Город</th>
<th>Население</th>
<th>Эльфы</th>
<th>Гномы</th>
<th>Золото</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan=»3″>Тридевятое</td>
<td>Авалон</td>
<td>15 000</td>
<td>300</td>
<td>254</td>
<td>12 кг</td>
</tr>
<tr>
<td>Святоградск</td>
<td>7 452</td>
<td>12</td>
<td>1</td>
<td>3 кг</td>
</tr>
<tr>
<td>Итого</td>
<td>22452</td>
<td colspan=»2″></td>
<td>15 кг</td>
</tr>
<tr>
<td rowspan=»4″>Заморское</td>
<td>Небесный</td>
<td>45 000</td>
<td>25 000</td>
<td>100</td>
<td>78 кг</td>
</tr>
<tr>
<td>Пантеон</td>
<td>32 000</td>
<td>12 000</td>
<td>14 000</td>
<td>40 кг</td>
</tr>
<tr>
<td>Ангельск</td>
<td>56 000</td>
<td>40 000</td>
<td>2 000</td>
<td>80 кг</td>
</tr>
<tr>
<td>Итого</td>
<td>133 000</td>
<td colspan=»2″></td>
<td>198 кг</td>
</tr>
<tr>
<td colspan=»2″>Итого</td>
<td>155 452</td>
<td colspan=»2″></td>
<td>213 кг</td>
</tr>
</tbody>
</table>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#table»>Таблицы <table></table></a>
</p>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>HTML table example</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″> <style> table, td, th { border1pxsolid; border-collapsecollapse; } </style> </head> <thead> <tr> <th>Королевство</th> <th>Город</th> <th>Население</th> <th>Эльфы</th> <th>Гномы</th> <th>Золото</th> </tr> </thead> <tbody> <tr> <td rowspan=»3″>Тридевятое</td> <td>Авалон</td> <td>15 000</td> <td>300</td> <td>254</td> <td>12 кг</td> </tr> <tr> <td>Святоградск</td> <td>7 452</td> <td>12</td> <td>1</td> <td>3 кг</td> </tr> <tr> <td>Итого</td> <td>22452</td> <td colspan=»2″></td> <td>15 кг</td> </tr> <tr> <td rowspan=»4″>Заморское</td> <td>Небесный</td> <td>45 000</td> <td>25 000</td> <td>100</td> <td>78 кг</td> </tr> <tr> <td>Пантеон</td> <td>32 000</td> <td>12 000</td> <td>14 000</td> <td>40 кг</td> </tr> <tr> <td>Ангельск</td> <td>56 000</td> <td>40 000</td> <td>2 000</td> <td>80 кг</td> </tr> <tr> <td>Итого</td> <td>133 000</td> <td colspan=»2″></td> <td>198 кг</td> </tr> <tr> <td colspan=»2″>Итого</td> <td>155 452</td> <td colspan=»2″></td> <td>213 кг</td> </tr> </tbody> </table> <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#table»>Таблицы <table></table></a> </p> |
Предварительно форматированный текст
Тег
<pre>…</pre> позволяет определить блок предварительно форматированного текста. Он обычно отображается моноширинным шрифтом. Внутри этого тега все пробелы, переводы строк и табуляторы сохраняются при выводе страницы. По умолчанию же все пробелы, табуляторы и переводы строк склеиваются в один пробел. Внутри этого тега можно применять другие теги.
index.html
XHTML
<!DOCTYPE html>
<html>
<head>
<title>HTML pre example</title>
<meta http-equiv=»Content-Type» content=»text/html;charset=utf-8″>
</head>
<body>
<div>
Обычный текст внутри
одного div.
</div>
<pre>
Преформатированный текст
внутри тега
pre
</pre>
<p>
<a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#pre»>Предварительно форматированный текст <pre></pre></a>
</p>
</body>
</html>
|
1 |
<!DOCTYPE html> <title>HTML pre example</title> <meta http-equiv=»Content-Type»content=»text/html;charset=utf-8″> </head> <a href=»https://urvanov.ru/2016/03/02/%D1%83%D1%87%D0%B5%D0%B1%D0%BD%D0%B8%D0%BA-html/#pre»>Предварительно форматированный текст <pre></pre></a> </p> |
Блок . Комментарии HTML
Практически во всех языках программирования есть такое
понятие как «комментарии». Комментарии — это такой текст,
который будет проигнорирован браузером — на экране он будет не виден,
но останется в исходном коде страницы.
Для чего нужны комментарии? Во-первых, для того, чтобы оставлять в
исходном
коде пометки себе или тому человеку, который будет править ваш код после вас.
Во-вторых, с помощью комментариев можно убирать некоторые вещи,
которые вы бы сейчас хотели удалить, но потом, может быть, захотите вернуть.
Их можно просто временно закомментировать, а потом
откомментировать при необходимости.
Комментарии в HTML оформляются следующим образом:
сначала уголок, знак ! и два дефиса — <!—,
потом текст комментария, а потом два дефиса и уголок — —>. Смотрите
пример: