комментарии
Комментарии нужны не только, чтобы описать выполняемые действия или разграничить блоки. Они также помогают временно убрать часть кода, который понадобится потом, но не нужно выводить сейчас.
В HTML комментарии выглядят так - <!-- якомментарий! -->
В CSS - /* Иякомментарий! */
Оба - многострочны.
Комментировать код желательно, но тоже нужно знать меру. Слишком много комментариев путают гораздо больше, чем их полное отсутствие.
Также плохая практика бросать в коде большие куски закомменченого.
+
Рассказ пошел немного не в ту сторону, куда я изначально планировал, поэтому пришлось писать этот дополнительный пост.
Дело в том, что есть два основных течения верстки - блочная и табличная.
В табличная верстка немного проще и предсказуемее. Сейчас уже не так критично, но когда с браузерами было совсем плохо - проще было сразу повесится, чем пытаться заставить выглядеть блочную верстку одинаково во всех браузерах.
Потом стало немного получше, браузеры чуть поумнели, стали боль-мень одинково отображать основные моменты и началась вечная война фанатов. Блочная против табличной. Много было сломано копий, как обычно...
Основной аргумент любителей блочной вертки - табличная вертка - это не семантично. На практике это означает... Да в общем-то совершенно ничего это не означает на практике. =)
Основной аргумент противников - иногда некоторые моменты в блочной верстке очень сложно сделать, а некоторые, если и возможно то только очень криво. Ну и какая тогда разница, если на практике вся выгода от сугубо блочной верстки - моральное удовлетворение исполнителя. )
Даже анекдот по этому поводу был. Помните рекламу моющего средства и две итальянские деревни? Вот на мотив...
- В Вилларибо верстают блоками. А в Вилабаджо давно все сверстали таблицами и рубят друг друга в кваку.
( Read more...Collapse )
Таблицы и блоки.
Таблицы несколько сложнее.
"Полная версия" таблицы выглядит так:
( Read more...Collapse )
CSS
Что такое CSS?
CSS это описание стилей элементов страницы.
CSS чаще всего подключается отдельным файлом, но может записываться и прямо в страницу с HTML.
Под стилями подразумевается внешнее оформление - цвета, размеры, фоны, расположение и всякое такое.
Стили можно присваивать по имени тэга, по классу и по айди элемента.
Чтобы было все было понятно - нужна практика.
Ею сейчас и займемся. =)
Где-нибудь в удобном месте создаем новый пустой файл и называем его - index.html
Открываем его любым текстовым редактором. В Ubuntu будет удобнее потому что втроенный текстовый редактор очень удобно сделан и имеет подстветку кода - все элементы HTML будут выделены разными цветами по типу.
На виндовс с этим проблемы - нужно подбирать хороших сторонний редактор. Без подстветки кода будет дальше тяжело, когда появится большой объем кода.
Пишем в файл следущий код и сохраняем в кодировке UTF-8 (обычно - сохранить как... и там можно выбрать кодировку):
- <html>
- <head>
- <title>My First Page</title>
- </head>
- <body>
- <p>Hello, cruel world!</p>
- </body>
- </html>
Открываем сохраненную страницу любимым браузером.
На страничке будет заголовок (у окна или вкладки) и текст.
Как вы уже поняли, тэг title вложенный в тэг head - создает заголовок у страницы. Заголовок очень важен, т.к. на него обращают внимание поисковики и пользователю удобнее ориентироваться во вкладках, если текст заголовка подобран правильно.
Тэг p - параграф. Используется для выделения абазцев в тексте. Может содержать только текст.
Теперь - слегка добавим в на страничку много страшных букв. )
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>My First Page</title>
- <style>
- body {
- background-color: lightblue;
- }
- p {
- color: red;
- }
- .myclass {
- color: green;
- font-style: italic;
- }
- #myid {
- color: blue;
- font-weight: bold;
- }
- </style>
- </head>
- <body>
- <p>Hello, cruel world!</p>
- <div class="myclass">Еще немного текста.</div>
- <div id="myid">И еще немного текста.</div>
- </body>
- </html>
У нас добавилось несколько новых тэгов.
Тэг div - это блок. Его можно представить в виде деревянной рамки, в которую можно вставить, что угодно - кратинку, текст. другие рамки поменьше...
Тэг meta - в head'е используется для задания всяких технических вещей - вроде описания страницы для поисковиков, имя автора и прочее. В данном случае этот тэг указывает, что содержимое документа (Content-Type) является простым html в кодировке UTF-8.
Этот тэг очень важен, потому что благодаря ему браузер будет знать точно в какой кодировке страница и не будет у пользователя в итоге кракозябров вместо текста. )
И конечно же тэг style - в нем как раз и содержаться инструкции CSS.
Разберем инструкции стилей.
Первая - элементу body назначается задний фон светло-синего цвета. Цвета в css задаются несколькими способами. Пока нам достаточно ключевых слов. Попозже рассмотрим все варианты.
Вторая - элементу p задается цвет текста - красный.
Третья - элементу со значением аттрибута myclass задается цвет текста и наклонный шрифт.
Четвертая - элементу с айди myid задается цвет текста и полужирное начертание шрифта.
Т.е. - задаются имена тэгов прямо как есть, класс - начинается с точки. адишник - с хэша.
При этом следует учесть, что айди - это уникальный идентефикатор элемента. Их не должно быть двух одинаковых на странице.
