• Автор:

    Flesha
  • Добавлено:

    окт 03, 2015
  • Комментариев:

    1
  • Просмотров:

    894

Введение в HTML и CSS

Введение в HTML и CSS

HTML и CSS - языки программирования, и играют, пожалуй, главную роль при разработке и создании сайта. Для написания сайта Вам необходимо изучить данные языки и если не владеть ими в совершенстве, то, по крайней мере, знать их основы и основные функции. С учётом того, что сейчас интернет в изобилии наполнен различными движками или CMS (система управления сайтом) на бесплатной основе, я замечу, что без знания основ HTML и CSS Вы мало что сможете сделать и изменить, и не получите нужной Вам индивидуальности.

Теперь разберём, каждый из языков, чуть подробнее и начнём с html.

HTML - (от англ. HyperText Markup Language — «язык разметки гипертекста»). Рассказывать Вам о том, как создавался и всякую не нужную ерунда, на мой взгляд, я не буду, ведь Вы же не собираетесь писать докторскую на эту тему. Мы разберём только основные понятия, которые позволят Вам уже сейчас написать свою первую страницу в формате html. Страница в формате html, нечто иное как, документ и является набором элементов, каждый из которых имеет начало и конец - тег. Теги могут быть, открывающие (пример: < тег >) и закрывающие (пример: ), также существуют пустые теги, не имеющие закрывающего тега (пример: <br> - перенос строки).

Основные теги HTML:

1. <html></html> - указывает начало и конец страницы в целом – обязателен.

2. <head></head> - содержит всю основную информацию о странице и может содержать следующие теги:

<title></title> - название страницы (отображается в верху браузера) – обязателен.

кодировку (язык страницы) – обязателен.

<meta http-equiv="content-type" content="text/html;charset=utf-8"/> - указывает

<meta name="keywords" content="ключевые слова" /> - ключевые слова (важный тег при оптимизации) – обязателен.

<meta name="description" content="описание" /> - указывает на описание страницы (важный тег при оптимизации) – обязателен.

<meta name="author" content="автор" /> - указывает автора страницы – не обязателен.

<link type="text/css" href="адрес таблицы стилей" rel="stylesheet" /> - указывает на таблицу стилей (о ней мы поговорим ниже) – не обязательный, но, как правило, используется в 99% случаев, причиной является, то, что таблица стилей может описывать одни и те же элементы, в разных страницах сайта.

<script src="адрес скрипта" type="text/javascript"></script> - указывает адрес обработчика события javascript – не обязательный.

<style></style> - предназначен для определения стилей страницы, её внешнего вида и внешнего вида элементов последнего. Может содержать в себе огромное количество элементов, подробно последние будут описаны в разделе HTML и CSS (часть II).

3. <body></body> - содержание страницы, вся информация, которую Вы желаете передать должна находиться между этими тегами и может содержать:

<div></div> - контейнер для содержимого или блока, может содержать другие дивы и теги. Может иметь следующие атрибуты: align Выравнивание содержимого по горизонтали title Всплывающая подсказка для содержимого.

class Задаёт имя класс элемента, и связывает с таблице стеля. Один класс может использоваться к нескольким элементам.

id Задаёт имя идентификатора стиля. Идентификатор используется только к одному элементу, этим отличается от class dir Задаёт направление текста style Задаёт стиль элемента в теле документа.

<table></table> - создаёт таблицу и содержит два тега:

<tr></tr> - создаёт ячейку. Не может содержать ничего, кроме тега <td>

<td></td> - создаёт строку. Содержит в себе либо ёще таблицу, либо див, либо какой-то текст, рисунок и т.д. Могут иметь следующие атрибуты: align Выравнивание содержимого по горизонтали background Задаёт цвет фон или фоновое изображение.

border Задаёт границу bordercolor Задаёт цвет границы cellspacing Задаёт расстояние между ячейками cellpadding Задаёт расстояние между границей ячейки и содержимым width Задаёт ширину height Задаёт высоту valign Выравнивание содержимого по вертикали colspan Задаёт количество столбцов объединённых в одной ячейке rowspan Задаёт количество строк объединённых в одной ячейке class Задаёт имя класс элемента, и связывает с таблице стеля. Один класс может использоваться к нескольким элементам.

id Задаёт имя идентификатора стиля. Идентификатор используется только к одному элементу, этим отличается от class style Задаёт стиль элемента в теле документа.

<p></p> - создаёт абзац текста. Может иметь следующие атрибуты: align Выравнивание содержимого по горизонтали background Задаёт цвет фон или фоновое изображение.

class Задаёт имя класс элемента, и связывает с таблице стеля. Один класс может использоваться к нескольким элементам.

id Задаёт имя идентификатора стиля. Идентификатор используется только к одному элементу, этим отличается от class style Задаёт стиль элемента в теле документа.

<a></a> - создаёт ссылку. Может иметь следующие атрибуты: href Задаёт адрес ссылки (url) title Всплывающая подсказка для содержимого.

class Задаёт имя класс элемента, и связывает с таблице стеля. Один класс может использоваться к нескольким элементам.

style Задаёт стиль элемента в теле документа.

target Задаёт способ открытия ссылки и может быть:

"_self" - по умолчанию (можно не указывать)

"_blank" - открывает в новом окне name Задаёт якорь в документе, возвращая к элементу на странице.

<b></b> - задаёт выделение текста жирным.

<em></em> и <i></i> - задаёт выделение текста курсивом.

<ins></ins> - задаёт подчёркивание текста.

<font></font> - задает стиль текста, устаревает и потому рекомендуется от него отказываться. Может иметь следующие атрибуты: color Задаёт цвет текста fase Задаёт стиль шрифта size Задаёт размер шрифта

<br> - перенос строки.

<hr> - горизонтальная черта.

<img /> - задаёт отображение рисунков и картинок в форматах: gif, jpeg и png. Может, находится в теге <a></a>, и иметь следующие атрибуты: align Выравнивание рисунок по горизонтали и задает обтекание alt Задаёт альтернативный текст картинки, отображение текста происходит если картинка не отображается браузером src Задаёт адрес изображения style Задаёт стиль элемента в теле документа.

width Задаёт ширину height Задаёт высоту hspace Задаёт горизонтальный отступ vspace Задаёт вертикальный отступ border Задаёт границу

<span></span> - выделяет часть текста внутри другого тега и задаёт ей отдельный стиль. Атрибуты такие же, как у тега <p></p>.

<h1></h1>,<h2></h2>,<h3></h3>,<h4></h4>,<h5></h5>,<h6></h6> - задаёт размер текста, используется для заголовков со степень важности: от менее важного 6 до более важного 1.

<ul></ul> - задаёт маркированный список и содержит только тег <li></li>.

<ol></ol> - задаёт нумерованный список и содержит только тег <li></li>.

<li></li> - определяет отдельный элемент списка (вне тегов <ul> и <ol> не используется). Все три последних элемента могут иметь следующие атрибуты: type Задаёт вид маркера value Задает начальное значении списка style Задаёт стиль элемента в теле документа.

width Задаёт ширину height Задаёт высоту hspace Задаёт горизонтальный отступ vspace Задаёт вертикальный отступ border Задаёт границу

Так же для обозначения комментария используется набор символов <!-- комментарий -->, которые отображаются только в редакторе и не отображаются браузером. Комментарии используются сугубо по усмотрению автора для создания пометок в коде.

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

Комментарии:


  1. piratvdn → 5 октября 2015 13:02
    У Дмитрия Охрименко хороший курс по HMTL5+CSS3 на ютубе выложен - https://www.youtube.com/playlist?list=PLvItDmb0sZw9cJossgyJepu6N9hybEjKU
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.