Displaying items by tag: html

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

 

 

План урока:

 

  • Определение HTML, определение понятия тега
  • Структура HTML страницы
  • Инлайновые (строчные)  и блочные теги, закрытые теги, порядок тегов
  • Атрибуты тегов
  • Определение CSS, понятие селектора
  • Способы задания стилей элементам - атрибутом style="", в <head> html-файла и в файле стилей.

 

Опубликовано в HTML/CSS

Верстальщик - это человек, который превращает картинку в html-страницу. 

 

Когда веб только начал развиваться, дизайна особо не существовало. Да и функционала было не много. Изначально сайты представляли собой набор перелинкованых html-страничек, на которых отражалась основная информация.  Не знаю, было ли тогла понятие css-стилей, но все необходимое оформление легко можно было задать инлайновыми стилями.

 

Опубликовано в HTML/CSS

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

 

Опубликовано в HTML/CSS

Учимся верстать блоками! Цель: создать шаблон html страницы с тремя колонками (левой, правой, центральной) одинаковой высоты, с футером, прижатым книзу.

В этой статье я расскажу о том, с какими сложностями сталкивается верстальщик при создании html-страницы. Мы создадим только оболочку страницы(шаблон), не рассматривая ее внутренних элементов - логотип, меню, контент и т.д. Зато в дальнейшем вы сможете использовать этот шаблон как основу для написания любой html страницы. Понятно, что вид шаблона и его реализация зависит от конкретной задачи, от полученного макета. Здесь рассматривается html страница с тремя колонками, но если нужны только две, то придется немного изменить стили. Верстать будем блоками, в данном шаблоне страница имеет фиксированную высоту (1000px, позже узнаете почему именно так) и footer (подвал), прижатый к низу. 

 

Для прижатия футера страницы будем использовать вспомогательный элемент с классом wrapper, который будет объединять все блоки кроме подвала. Какие стили нужны для этого элемента, подробно будет описано ниже.  

Для создания иллюзии(почему это только иллюзия узнаете ниже) одинаковой высоты колонок шаблона html страницы, используем дополнительные блоки с абсолютным позиционированием. Именно они на демо окрашены в разные цвета.

Опубликовано в HTML/CSS
< 1 2 3 4 >
Страница 4 из 4

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов