Такие языки гиперразметки, как html и CSS не так сложны в изучении, как это может представляться в начале знакомства с ними. В их основе лежат вполне закономерные и доступные для понимания принципы, освоив которые можно с легкостью решать многочисленные проблемы, появляющиеся в работе собственного сайта.
Базовое владение основами html и CSS позволит вам самостоятельно устранять неизбежно возникающие мелкие неполадки в работе веб-ресурса, редактировать информацию на сайте, расставлять гиперссылки, размещать изображения, выделать необходимую информацию различными способами.
Html — основа верстки и базовый компонент в организации элементов сайта
Html — это тот базис, на который впоследствии накладываются другие знания об управлении ресурсом и организации его элементов. Данный язык разметки является одним из самых главных и наиболее часто используемых. И именно возможности html позволяют располагать элементы на веб-странице в необходимом месте и придавать им нужный размер и вид.
Считывают информацию, которая размечается с помощью html, специально разработанные приложения, более известные под названием браузеров или интернет-обозревателей. Самыми используемыми сегодня интернет-браузерами являются:
- Internet Explorer
- Google Chrome;
- Opera;
- Mozilla Firefox.
При этом создатели браузеров могут самостоятельно формировать новые наборы элементов для html. В конце 90-х годов именно по причине такого активного творчества конкурирующих разработчиков браузеров и сформировалось явление «браузерная война». Его суть сводилась к тому, что некоторые html-страницы отображаются корректно в одном интернет-обозревателе, а в другом пользователь видит их с ошибками. Единственным выходом из ситуации браузерного конфликта является использование кросс-браузерной верстки.
Редакторы для создания страниц html
Создать или отредактировать html-страницу можно с использованием редакторов html. Самым простым и известным является текстовый редактор Notepad, который не написан специально для работы с разметкой html, но поддерживает эту функцию. Более функциональными и разработанными именно для работы с html являются редакторы:
- Notepad++ — работает с исходным кодом и распространяется свободно.
- Macromedia Dreamweaver — отличается набором расширенных функций по редактированию и просмотру создаваемой разметки, а так же имеет возможность показывать готовую страницу.
- Adobe Dreamweaver — подобно предыдущему редактору обладает функцией показа готовой страницы, то есть позволяет пользователю просматривать редактируемый вариант в том виде, в котором она будет отображена в браузере. Эта программа является более поздней версией, которая появилась вследствие усовершенствования специалистами Adobe выкупленной у компании Macromedia их редактора. Ввиду этого обстоятельства программы Macromedia Dreamweaver и Adobe Dreamweaver очень похожи.
- Microsoft Front Page — входит в пакет приложений Office и имеет достаточный объем возможностей для обработки и создания html-разметки.
Основные теги
Документ, в котором использована html-разметка, является простым набором компонентов, которые сегментированы с помощью специальных знаков, называемых тегами. Теги заключают элемент, тем самым придавая ему определенный вид и определяя его место. Есть и случаи, когда тег ничего не заключает: это касается сочетания <br>, которое отбивает строку.
Тег, который находится перед заключаемым элементом, называется открывающим и выглядит так < тег >. Тег, который находится после заключаемого элемента, называется закрывающим и выглядит так </ тег >. Наличие слеша (/) для закрытия тэга обязательно, иначе компонент не сработает. Это правило относится к большинству тегов, за исключением упомянутого выше <br> и некоторых других. К основным тегам html относятся:
- <html> </html> — тег, непосредственно указывающий на принадлежность файла к html-формату;
- <head> </head> — тег, который является невидимым в документе и предназначен для обозначения имени документа и его характеристик для поисковых роботов;
- <body> </body> — тег, определяющие границы видимой части документа;
- <title> </title> — тег, отправляющий название страницы в оглавление;
- <strong></strong>, <i> </i>, <p> </p>, <ul> </ul> — теги форматирования текста и создающие жирный текст, наклонный текст, отбивающие абзац, формирующие нумерацию.
Наряду с тегами, результат которых видит посетитель страницы в виде жирных или курсивных написаний, существуют и служебные теги, которые называются мета-тегами и дают необходимую информацию поисковым машинам, браузеру, но не видимы обычному пользователю.
Для создания html страницы необходимо последовательное выполнение описанных ниже действий. Использовать можно обычный блокнот.
1) Создаём документ. В него вставляем следующий код:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
</head>
<body>
<p> Содержимое этого элемента будет отображается в браузере </p>
</body>
</html>
Примечание: обязательно в «<head></head>» указываем кодировку документа <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ /> как показано выше.
2) Далее: файл – сохранить как. В поле «тип файла» вместо «txt» выбираем «All files» (все файлы), в поле codepage (кодировка страницы) – выбираем 65001 (UTF-8), в поле «имя файла» после названия документа ставим точку и расширение html (.html), далее нажимаем сохранить. У нас в той же папке появился второй документ, но уже в html. Это и есть наша веб страница, которую теперь можно открыть в любом браузере.
Примеры html кода
- Текст разбитый на параграфы
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
</head>
<body>
<p> параграф 1 </p>
<p> параграф 2 </p>
<p> параграф 3 </p>
</body>
</html>
- Заголовки и абзацы с выравниванием по центру
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
</head>
<body>
<h1 style=»text-align:center»> Это заголовок выровнен по центру. </h1>
<p style=»text-align:center»> Текст абзаца выровнен по центру. </p>
<h2 style=»text-align:center»> Заголовок второго уровня выровнен по центру. </h2>
<p style=»text-align:center»> Текст абзаца выровнен по центру. </p>
</body>
</html>
- Мета-теги, название страницы (title), описание страницы (description) и ключевые слова (keywords)
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title> Название страницы </title>
<meta name=»description» content=»Примеры HTML»>
<meta name=»keywords» content=»HTML, DHTML, CSS, XML, XHTML, JavaScript, VBScript, создание веб-сайта, сайт, создание сайта»>
</head>
<body>
<p> абзац с ключевыми словами указанные в «keywords» </p>
</body>
</html>
CSS — дополнение механизмов html
Там, где функционал html оказывается недостаточным, на помощь приходят каскадные таблицы стилей — CSS. Они представляют собой более совершенные мощные параметры для изменения внешнего вида веб-страницы. CSS функционируют вместе с возможностями html. Эти два набора параметров взаимодействуют и никаким образом не заменяют друг друга.
Параметры CSS могут быть размещены в самом веб-документе путем использования:
- тегов <style> </style>, которые находятся между тегами <head> и </head>;
- атрибута style, располагающегося внутри любого другого тега.
Также указания CSS могут быть присоединены к веб-документу с помощью:
- тега <link>, размещаемого между <head> и </head>;
- директивы @import, располагаемой между тегами <style> и </style>.
В процессе написания таблицы стилей необходимо строго соблюдать особый синтаксис, предполагающий соподчинение элементов и их иерархию, в которой позиции распределены между указателем, свойством, значением, описанием и строкой. При этом для обозначения свойств используются фигурные скобки, и каждому тегу можно присвоить сразу несколько свойств.
Способы подключения таблиц CSS стилей
Существует несколько способов подключения CSS к html:
- встроенные таблицы, при котором в заголовок страницы встраивается таблица стилей с использованием тега <style></style>;
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title> Страница со встроенной таблицей стилей </title>
<style type=»text/css»>
.ztx {
font-family:Verdana, Geneva, sans-serif;
font-size: 12px;
color: #4A4A4A;
}
.ztx_2 {
font-family:Verdana, Geneva, sans-serif;
font-size: 18px;
color:#F00;
background-color:#3FF;
}
</style>
</head>
<body>
<p class=»ztx»> Отформатированный текст </p>
<p class=»ztx_2″> К этому тексту уже применён второй стиль </p>
</body>
</html>
Примечанеие: «font-family» — это название шрифта, «font-size» — размер шрифта, «color» — цвет шрифта, «background-color» — цвет фона.
- внутренние таблицы CSS, когда таблица помещается внутри элемента html;
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title> Страница со стилями внутри элемента </title>
</head>
<body>
<p style=»font-family:Verdana, Geneva, sans-serif; font-size: 12px; color: #4A4A4A;»> Отформатированный текст </p>
<p style=»font-family:Verdana, Geneva, sans-serif; font-size:18px; color: #F00; background-color:#3FF;»> К этому тексту уже применёт второй стиль </p>
</body>
</html>
- внешние таблицы CSS, при использовании этого способа подключения таблицы стилей создаются отдельным файлом.
Такой способ является наиболее удобным и поэтому часто используемым. Подключение в данном случае производится с использованием тега <link> и будет выглядеть следующим образом:
<html>
<head>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
<title> Подключение CSS к HTML </title>
<link rel=»stylesheet» type=»text/css» href=»style.css»>
</head>
<body>
<h1> Это заголовок первого уровня </h1>
<p class=”form”> Здесь просто текст <p>
<h2> Это заголовок второго уровня </h2>
<p class=”form”> Здесь просто текст </p>
</body>
</html>
А вот содержимое CSS файла «style.css» таким образом для текста, которому присвоен класс «form» применяются стили, в данном случае: название шрифта, размер шрифта и цвет фона.
.form {
font-family:Verdana, Geneva, sans-serif;
font-size:12px;
background-color:#3FF;
}
Информационный материал подготовлен сотрудниками студии веб-дизайна «БЕЛЫЙ ПАРУС»
Мы искренне надеемся, что он будет полезен всем, кто решил овладеть основами html и css.