Основы html и CSS

    Такие языки гиперразметки, как 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.

Comments are closed.