HTML и CSS. Список уроков.


Урок 01. Создание первой страницы.

Урок 02. Форматирование текста.

Урок 03. Макет страницы.

Урок 04. Добавление изображений.

Урок 05. Ссылки и меню.

Урок 06. Компоновка элементов.

Урок 07.

HTML и CSS. Урок 3. Макет страницы.

Приступая к работе над созданием сайта  необходимо представлять, что же мы должны в конечном итоге получить и как это будет выглядеть. Для этого можно набросать эскиз нашей идеи на бумаге. Макет нашего сайта - это прямоугольник (экран монитора) включающий в себя несколько других прямоугольников (верх, центр, низ, правая-левая колонки и т.п.) - это и есть наш дизайн. Для нашего учебного проекта мегапортал выберем простую компоновку, состоящую из трех блоков - верхний, основное содержание, нижний. Чтобы разбить нашу страницу на логические фрагменты мы задействуем элемент: <div>БЛОК</div>  Откроем в нашем редакторе страницу index.html  и напишем следующий код:

 <div class="blok1">Содержание нашего блока</div> 

В кавычках пишется уникальное имя блока, лучше использовать более понятные имена, например logo_top.

 

Теперь откроем style.css и зададим для каждого из блоков различный цвет фона:

.blok1 { background-color: beige;} 

Откроем наш Megaportal. И, о чудо, это гениальное творение более приятно нашему взору. ))

А что такое элемент <span class="blok4"></span>, который присутствует в нашем коде. Элемент span позволяет нам изменять свойства внутри блока, не нарушая его структуры. Добавим в style.css 

.blok4 { color: brown; } и посмотрим на результат. Не бойтесь экспериментировать, благо редактор кода  дает подсказки, какое значение можно подставить.

 Замените span на div  и посмотрите, как нарушится идеальная структура нашего сайта.


Продолжение: HTML и CSS. Урок 4. Добавление изображений.


 

 

Параметы