Урок #1.1 Основы HTML и CSS, создание простого макета

Перед началом обязательно прочтите это!

1. Необходимый инструментарий
1.1. Браузер (любой, кроме говна а ля Амиго Браузера и доисторической Оперы 12)
1.2. Фотошоп (желательно с пятой версии и выше, скачать можно тут)
1.3. Программу для создания скриншотов (любая, рекомендую monosnap)

2. Начало

HTML - это разметка веб страниц. Разметка представляет собой набор тегов и текста. Увидеть разметку любой страницы любого сайта можно нажав в браузере Ctrl + U. Для главной страницы колорфорума часть разметки выглядит так:
все картинки в статье кликабельны

Дабы лучше понять, как работает html разметка, можете создать новый документ, скажем, в блокноте, и вписать в него:

Код:

<html>
<head>
</head>
<header>
<h2>Тут шапка страницы</h2>
</header>
<body>
<div>я отдельный элемент страницы</div>
<div>я ещё один элемент </div>
</body>
</html>

дабы увидеть их очертания, добавьте между тегом head следующее:

Код:

<style>
body {
background: #ef4c4e; }
header {
background: #4cc2ef; }
div {
border: 1px solid #ef4c4e; }
</style>

В итоге, код выйдет таким:

Код:

<html>
<head>
<style>
body {
background: #ef4c4e; }
header {
background: #4cc2ef; }
div {
border: 1px solid #ef4c4e; }
</style>
</head>
<header>
<h2>Тут шапка страницы</h2>
</header>
<body>
<div>я отдельный элемент страницы</div>
<div>я ещё один элемент </div>
</body>
</html>

Сохраните код и откройте документ в браузере. Вы должны увидеть следующее:

Если у вас появились крякозябры вместо русских букв - не страшно. Это называется кодировкой и исправляется добавлением

Код:

<meta charset="utf-8">

между тегом head.

Теперь давайте сделаем все элементы фиксированной ширины и по центру. Это можно сделать по разному, но мы добавим промежуточный div между body и содержимым страницы, так будет удобней:

<body>
<div id="content">
<div>я отдельный элемент страницы</div>
<div>я ещё один элемент </div>
</div>
</body>

Теперь между body и содержимым есть промежуточный div с ИД content. Давайте сделаем его шириной в 900 пикселей:
<style>
#content {
width: 900px; }
</style>
И выровняем по центру. Чтобы он был всегда по центру, мы используем margin.
<style>
#content {
width: 900px;
margin: 0 auto; }
<style>

У margin 0 означает, что по вертикали мы никак не двигаем элементы, т.е. он не смещается ни вверх, ни вниз, а auto - что он должен автоматически создавать нужные отступы по горизонтали, чтобы элемент был по центру. Это сработает только в том случае, если родитель (элемент, в котором находится наш пациент) имеет относительное позиционирование. Позиционирование в CSS указыванием при помощи position. Есть три основных указателя позиции - relative (по-умолчанию у всех, элемент позиционируется по-очередно, т.е. следует за своим предшественником), absolute (элемент независим от других элементов страницы, он как бы отделён от них и может перемещаться поверх или под ними), fixed (элемент фиксирован, он всегда находится на одной позиции и движется вместе с страницей, на майббе используется для стрелок, к примеру).

Сделаем наш промежуточный div выделяющимся на фоне:
<style>
#content {
width: 900px;
margin: 0 auto;
background: #ff9b3c; }
<style>

В итоге, наш код выглядит так:

Код:

<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #ef4c4e; }
header {
background: #4cc2ef; }
div {
border: 1px solid #ef4c4e; }
#content {
width: 900px;
margin: 0 auto;
background: #ff9b3c; }
</style>
</head>
<header>
<h2>Тут шапка страницы</h2>
</header>
<body>
<div id="content">
<div>я отдельный элемент страницы</div>
<div>я ещё один элемент </div>
</div>
</body>
</html>

Давайте сделаем и шапку такого же размера и отцентрируем:

Код:

header {
background: #4cc2ef;
width: 900px;
margin: 0 auto; }

И уберём границ для элементов внутри #content:
#content > div {
border: 0; }

Стрелка > означает непосредственное подчинение. Легче объяснить так:

<div id="content">
<div> - будет без границ
<div> - будет с границами
</div>
</div>
</div>

Поскольку второй div внутри #content находится внутри другого div'а, он уже не находится в непосредственном подчинении у #content.

Теперь давайте сделаем отступы для шапки и содержимого:

Код:

header, #content {
padding: 10px; }

padding: 10px выставляет отступ в 10px сверху, снизу и по бокам. Чтобы указать отступ только из одного направления, можно использовать padding-left, padding-right, padding-left и padding-bottom.

И отцентрируем шапку:

Код:

header {
text-align: center; }

Так же давайте добавим изображение в шапку, некий аватар. Для примера, я возьму свой аватар на этом форуме:

Код:

<img src="https://forumavatars.ru/img/avatars/000c/77/06/4729-1423245196.png">

Добавим его в шапку:

Код:

<header>
<img src="https://forumavatars.ru/img/avatars/000c/77/06/4729-1423245196.png">
<h2>Тут шапка страницы</h2>
</header>

Заодно уменьшим размер аватара до 100 пикселей. Поскольку аватар квадратный, можно указывать только ширину, высота будет пропорциональной:

Код:

header img {
    width: 100px;
}

Так же сделаем изображение обтекаемым, дабы оно было по левую сторону от текста, заодно сделаем эффект абсолютного позиционирования (которого нет, просто изображение обтекаемо):

Код:

header img {
    width: 100px;
    float: left;
}

В итоге получим это:

Дабы текст имел отступ и не начинался сразу под аватаром, можно сделать по разному - дать отсуп под изображением, или сделать отступ для div'ов. Давайте дадим отступ div'ам:

Код:

#content > div {
    border: 0px none;
    padding-left: 120px;
}

В итоге, получим так:

Теперь заменим текст в первом div'е на таблицу с произвольным содержимым:

Код:

<table>
    <thead>
    	<tr>
        <td>
        	#
        </td>
        <td>
        	название
        </td>
        <td>
        	стоимость
        </td>
    	</tr>
    </thead>
    <tbody>
    	<tr>
        <td>
        	456
        </td>
        <td>
        	перо
        </td>
        <td>
        	23$
        </td>
    	</tr>
    	<tr>
        <td>
        	457
        </td>
        <td>
        	краска
        </td>
        <td>
        	51$
        </td>
    	</tr>
    	<tr>
        <td>
        	458
        </td>
        <td>
        	кисть
        </td>
        <td>
        	183$
        </td>
    	</tr>
    	<tr>
        <td>
        	459
        </td>
        <td>
        	бумага
        </td>
        <td>
        	3$
        </td>
    	</tr>
    </tbody>
	</table>

thead - шапка таблицы, tbody - содержимое.
Таблицы изначально не во всю ширину, посему давайте исправим:

Код:

table {
	width: 100%;
}

Добавим таблице границы. Лучше всего это сделать так:

Код:

table td {
	border: 1px solid #ca6200;
}

И сделаем текст жирным в шапке таблицы:

Код:

table thead td {
	font-weight: bold;
}

Так же давайте зададим фон для таблицы:

Код:

table td {
	background: #f3b57a;
}

Получаем:

Чтобы убрать расстояние между ячейками таблицы:

Код:

table { 
    border-spacing: 0px;
}

Теперь наши ячейки соединились, но в местах их соприкосновения граница стала в 2 пикселя (1 пиксель от одной ячейки, 1 от другой), а по бокам таблицы только по одному пикселю. Исправить это можно так:

Код:

table {
border: 1px solid #ca6200;
}

Теперь можно сделать изображение круглым. Для этого добавляем изображению класс:

Код:

<img class="round" src="https://forumavatars.ru/img/avatars/000c/77/06/4729-1423245196.png">

и стиль для класса:

Код:

.round {
	border-radius: 100px;
}

Можем также округлить шапку сверху и содержимое снизу

Код:

header {
    border-radius: 10px 10px 0px 0px;
}
#content {
	border-radius: 0px 0px 10px 10px;
}

Мы разбили border-radius на четыре угла. По очереди:

border-radius: [левый верхний] [правый верхний] [правый нижний] [левый нижний]

Заполним второй div текстом для объёма и получим такое:

3. Задания

1) Добавить под содержимое ещё один элемент, назовём его футером. Выбрать для него цвет фона и наполнить любым содержимым.
2) Сделать нижние углы футера округленными, у содержимого убрать округление снизу.
3) Добавить белую границу для изображения в шапке.
4) Опустить все элементы (нашу страницу) на 100 пикселей вниз.
5) В ячейках таблицы подвинуть текста на несколько пикселей вправо.

Задания стрелками - тут.
На скриншоте ошибка с "сделать фон в правую сторону для ячеек". Сделать текст, естественно.

Если у вас будут вопросы - задавайте их в этой теме. Результат скидывать кодом под скрытым текстом.

Код страницы:

Код:

<html>
<head>
<meta charset="utf-8">
<style>
body {
background: #ef4c4e; }
header {
background: #4cc2ef;
width: 900px;
margin: 0 auto; }
div {
border: 1px solid #ef4c4e; }
#content {
width: 900px;
margin: 0 auto;
background: #ff9b3c; }
#content > div {
    border: 0px none;
    padding-left: 120px;
}
header, #content {
padding: 10px; }
header {
text-align: center; }
header img {
    width: 100px;
    float: left;
}
table {
	width: 100%;
}
table td {
	border: 1px solid #ca6200;
	background: #f3b57a;
}
table thead td {
	font-weight: bold;
}
table { 
    border-spacing: 0px;
    border: 1px solid #ca6200;
}
.round {
	border-radius: 100px;
}
header {
    border-radius: 10px 10px 0px 0px;
}
#content {
	border-radius: 0px 0px 10px 10px;
}
</style>
</head>
<header>
<img class="round" src="https://forumavatars.ru/img/avatars/000c/77/06/4729-1423245196.png">
<h2>Тут шапка страницы</h2>
</header>
<body>
<div id="content">
<div>
	<table>
    <thead>
    	<tr>
        <td>
        	#
        </td>
        <td>
        	название
        </td>
        <td>
        	стоимость
        </td>
    	</tr>
    </thead>
    <tbody>
    	<tr>
        <td>
        	456
        </td>
        <td>
        	перо
        </td>
        <td>
        	23$
        </td>
    	</tr>
    	<tr>
        <td>
        	457
        </td>
        <td>
        	краска
        </td>
        <td>
        	51$
        </td>
    	</tr>
    	<tr>
        <td>
        	458
        </td>
        <td>
        	кисть
        </td>
        <td>
        	183$
        </td>
    	</tr>
    	<tr>
        <td>
        	459
        </td>
        <td>
        	бумага
        </td>
        <td>
        	3$
        </td>
    	</tr>
    </tbody>
	</table>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. <br><br>
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur? </div>
</div>
</body>
</html>

COLOR MATE

Меню навигации

Пользовательские ссылки

Информация о пользователе

Урок #1.1 Основы HTML и CSS, создание простого макета

Сообщений 1 страница 6 из 6

Поделиться129-08-2015 09:36:12

Поделиться229-08-2015 11:54:12

Поделиться329-08-2015 23:17:19

Поделиться402-09-2015 01:37:07

Поделиться502-09-2015 21:16:07

Поделиться607-09-2015 23:51:12