Начало публикаций на тему HTML/CSS

И так, наверно, вы подумаете: "Зачем плодить одни и те же темы, если в интернете и так достаточно тем касающихся HTML/CSS?". Отвечу очень просто.. Все дело в том, что сегодня, почти, у каждого пользователя ПК есть интернет. Большинство из них используют сеть, либо, для развлечений или же для поиска информации, но все чаще среди таких пользователей появляются желающие создать свой сайт, блог, портал или простую страничку в сети. Конечно, есть множество бесплатных сервисов, которые позволяют "в два клика" развернуть готовый сайт, не зная элементарных вещей, таких как разметка страницы, стили.. Все это приводит, к тому, что в последнее время мне стали задавать глупые вопросы, и вот некоторые из них:

Подскажите плагин, с помощью которого можно изменить цвет текста или ссылки
Как в html сделать, чтоб текст автоматически разбивался на страницы?

И подобных вопросов бесконечное множество. Была даже идея создать мини-сайт на котором публиковать подобные изощрения. Но позже эту затею оставил, то ли из моральных соображений, а может не захотел нарушать авторские права.. И вот я решил пойти другим путем - создать серию заметок на тему HTML/CSS простыми словами и примерами, постараться добиться того, чтоб пользователь имел представление как все это работает и что от чего зависит.

Начну, пожалуй с общего представления о HTML и CSS.

HTML - язык, который служит для разметки вашего текста. Например, с помощью его вы можете определить: абзацы, цитаты, списки, блоки информации и многое другое.

CSS - это язык для определения стилей, тех самых элементов, которые мы определяем в HTML.

Как эти два языка работают вместе, можно образно представить такое:
Есть у вас квартира, которая разделена на области: кухня, спальня, туалет. Вот квартира, в нашем случае - это HTML страничка, а вот области - это наша разметка.

Теперь.. У каждого из нас, скажем, на кухне есть стол на котором стоят тарелки, стул и т.д. Давайте реализуем нашу фантазию в код в виде блоков. Но для начала, немного о самой маркировке.

Каждый элемент в HTML маркируется тегами (к примеру:

картинка - <img>, абзац - <p>
и т.д., но об этом позже). Стоит отметить, что некоторые теги имеют начальный вид и конечный. Пример:
<p>Начало абзаца, текст, конец абзаца</p>
И так, наша представленная квартира в виде кода:
<html> 
   <body> 
      <div class="kuhnia">
          <div class="stol">
                Стол на кухне
          </div>
      </div>
      <div class="tyalet">
          <div class="ynitaz">
              Унитаз в туалете
          </div>
      </div>
  </body> 
</html> 

Как видим, с помощью тега html мы создали начало странички (или же квартиры), тегом body показали начало содержимого нашей квартиры. А вот о самом содержимом сейчас подробней:
У каждого тега есть такое свойство class, служит оно для того, чтоб индивидуализировать определенный тег или группу тегов. Если представить это на нашем примере, то туалет и кухня - это помещения квартиры (теги). Но чтоб стало понятно, где кухня, а где туалет на плане квартиры мы должны это указать (К примеру БТИ на планах присваивают цифры каждому помещению и потом описывают: 1 - коридор, 2 - комната и т.д. Мы же присваиваем именно классы, к примеру: class="tyalet"). Вот так и в нашем коде:
Мы открыли блок с классом tyalet, тем самым показали что этот блок отвечает за помещения туалета, указали еще один блок с классом ynitaz - указываем что в туалете есть унитаз и в конечном счете каждый блок закрыли "закрывающими тегами" (закрывающий тег отличается от начального наличием обратного слеша).

Что же касается CSS, как выше уже писал, - это язык определения стилей. Опять же, основываясь на примере, у нас есть кухня. Кухня может иметь разные размеры, цвет, а стол на кухне, может иметь разные размеры, цвет, высоту. С помощью CSS мы можем все это указать. Как и любой язык, CSS имеет свой синтаксис. Если в двух словах, то это выглядит так: название_элемента { свойства_элемента }
Вот к примеру код, в котором мы присвоим зеленый цвет блоку со столом, а также задаем ширину нашей "кухни"

.kuhnia { width: 500px; } /* Ширина кухни равна 500 пикселей*/
.stol { background-color:green; } /*фон блока стола - зеленый*/

Как видно, задавая классы в CSS мы описываем их свойства (ширину, высоту, цвет и т.д.). Тоже самое мы бы делали, если бы просто описывали это простыми словами. На вопрос "какая ширина вашей кухни и какого цвета в ней стол?", вы бы ответили: "кухня имеет ширину N стол имеет цвет N".
По сути, данный ответ мы реализовали с помощью синтаксиса CSS.

На этом данная статья подходит к концу. Конечно же я понимаю, что у вас, наверняка, останется масса вопросов. Но на все вопросы постараюсь дать ответ в следующих публикациях и в комментариях к ним.

Надеюсь в этой статья у меня получилось пролить свет на общее представление о HTML/CSS.

Блог Статьи Начало публикаций на тему HTML/CSS