Простой сайт на html и css: Создаём простой HTML сайт с помощью блокнота

8 месяцев 6 дней назад

286 просмотров

• html
• css
• HTML5
• Верстка сайта
• HTML-вёрстка

Как сделать сайт html и css

Создание сайта html и css с нуля пошагово – Курс HTML и CSS программирования и верстки для начинающих — Онлайн обучение HTML с нуля

Если сайт состоит из одной или нескольких страниц и в ближайшей перспективе не будет наполнятся большим количеством контента или обрастать сложным функционалом (интернет магазин, каталог товаров, форум и прочее). То создать такой сайт лучше на html в блокноте.

1. Для этого понадобится готовый дизайн сайта собственного производства или скачанный из сети psd исходник. Его нужно раскроить для верстки html. 
2. Блокнот, а именно NotePad++. Его можно скачать с официально сайта. 
3. Файл index.html. Его можно создать в любой удобной папке на компьютере. Но лучше выдели отдельную папку для своего сайта и размести его там. У меня это папка c:\site\index.html 
4. Файл c:\site\style.css. Это файл стилей, зачем он нужен станет понятно позже. 
5. Папка c:\site\images. В эту папку нужно поместить все изображения нужные для будущего сайта. 
6. Купить хостинг и домен если нужно сайт выложить в интернете 

Для удобства я сделал архив с изображениями и уже готовыми пустыми файлами index.html и style.css. Скачай и распакуй архив в нужную тебе папку.



Для работы сайта в сети необходим веб-сервер. Сервер при обращении к домену или папке сайта без указания конкретного файла будет искать в ней index.html или index.php если не найдет отобразит список файлов папки.



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

Теперь нужно открыть файл index и style в NotePad++

Структура html документа

Скопируй код в файл index.html

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

В кратце опишу что значат эти теги. Если хочешь подробнее разобраться то по googl-и как говорится информации на эту тему море.

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

Тег html говорит о том где начинается и заканчивается html документ

Тег head необходим для размещения служебной информации, тут подключаются стили, скрипты и размещена meta информация страницы. Посетители сайта не видят содержимого этого тега.

Тег body содержит разметку страницы, содержимое этого тега видят посетители сайта.

Верстка или создание сайта на html



В процессе верстки сайта будут встречаться теги и атрибуты описать которые в данной статье невозможно. Поэтому рекомендую пользоваться сайтом htmlbook.ru. Кроме того советую внимательно изучать каждый тег и стиль css, который тебе встречается.



Итак что будем верстать:

Фон и основной каркас сайта

Замени содержимое своего файла index.html на следующее:

И добавь в style.css такой код:

Обнови страницу с сайтом в браузере (F5), должно получится так:

Шапка сайта

Добавьте в тег div с идентификатором basic следующий код:

Что бы получилось следующее:

И добавляем в файл css строки:

Верхнее меню сайта

Что бы на нашем html сайте появилось навигационное меню, которое изображено в макете добавить в index. html после:

Что бы получилось так:

А в файл style.css:

Теперь сайт имеет логотип телефон и меню при наведении на которое меняется фон:

Левое меню и контент

Пришло время сделать левое меню и блок с контентом. Для этого копируем код и тщательно изучаем, что к чему. После блока:

Файл index.html будет выглядеть вот так:

И в конец файла css копируем:

Если все сделано правильно получится сайт как на картинке ниже:

Подвал сайта

Теперь весь файл index.html выглядит вот так:

В файл css добавляем код в самый низ:

Теперь весь файл style.css выглядит следующим образом:

А сам сайт вот так:

Другие страницы сайта и ссылки меню

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

Названия страниц должны быть уникальными и состоять из латинских символв. Я просто перевел названия пунктов меню на транслит.

• o-nas.html — О нас 
• assortiment.html — Ассортимент 
• otzivi.html — Отзывы 
• zabronirovat-stolik.html — Забронировать столик 
• nashi-klienty.html — Наши клиенты 
• kontakty.html — Контакты 

То же самое нужно сделать и с левым меню.

• kofe-ayrish.html — Кофе Айриш 
• kofe-amerikano.html — Кофе Американо 
• kofe-glyase.html — Кофе Глясе 
• kofe-dippio.html — Кофе Диппио 
• kofe-kapuchino.html — Кофе Капучино 
• kofe-kon-panna.html — Кофе Кон Панна 
• kofe-koretto.html — Кофе Коретто 
• kofe-latte.html — Кофе Латте 
• kofe-lungo.html — Кофе Лунго 

Теперь открываем index. html в NotePad++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

Теперь жми «Сохранить» потом «Файл > Сохранить как» и сохраняй для каждой ссылки файл с соответствующим именем в папке с файлами сайта. Вот что получилось у меня:

Все сайт готов. Осталось только поменять в каждой странице контент.

У такого сайта не смотря на его простоту есть очень большой недостаток. Что бы поменять один пункт меню или элемент дизайна придется это делать это в каждом сайте. Когда страниц больше 10 начинается страшная путаница при его обслуживании. Так что создание сайта html в блокноте советую делать только для очень маленьких сайтов или одно-страничных LandingPage. А для полноценных сайтов осваивать CMS (они не так сложны как кажется).

Верстка сайта с нуля. Меню навигации. Часть 1.

Вы здесь:
 Главная — HTML — HTML 5 — Верстка сайта с нуля. Меню навигации. Часть 1.


 
 

Начиная с этого урока, мы будем учиться верстке сайта с нуля в популярном flat стиле. Эта тема очень объемная и мы посвятим ей не один урок. Что означает это на практике?

Представьте себе, что Вы на бирже фриланса получили заказ на верстку одностраничного сайта. Заказчик передал Вам макет в виде файла .psd и попросил сверстать HTML страницу. В работу верстальщика входит еще и нарезка макета на картинки, но мы опустим этот этап, поскольку это вопрос умения пользоваться фотошопом. На данную тему Вы можете самостоятельно поискать обучающие уроки по фотошопу.

Будем исходить из того, что заказчик оказался добрым человеком и предоставил нам вместе с макетом и заранее порезанные картинки. Для создания HTML страницы, нам потребуется: .psd макет, папка с картинками, Photoshop, Notepad++ и браузер.

Мы говорим с вами про макет, но пока это только картинка, из которой нам предстоит сделать полноценную HTML страницу.

Обратите внимание, что наш макет представляет из себя классический пример flat дизайна. Flat дизайн – это значит «плоский», здесь вы не увидите объемных теней, градиентов и других «наворотов».


 
 
 

Открываем макет в фотошопе и берем оттуда всю нужную информацию – цвет, шрифт, размеры и начинаем писать код, первой у нас идет шапка сайта, состоящая из логотипа и меню навигации. Разумеется, что наш сайт будет адаптивным под любые устройства и разрешения экрана, поэтому все размеры указываем в % и em.


 
 

Верстка шапки сайта

Создаем HTML страницу и делаем разметку нашей шапки. Содержимое шапки пишем внутри парного тега header.

Без оформления CSS стилями выглядит шапка совсем не так, как надо. В файле style.css, пропишим селекторам соответствующие свойства, чтобы шапка выглядела согласно макету.


 
 
 

Разберем основные моменты. Логотип и меню навигации должны быть в одной строке. Поэтому в блоке div с логотипом задаем обтекание &#8212; float: left; Навигационное меню встанет справа от логотипа. Пункты меню должны быть в одной строке &#8212; display:inline-block; Отменить обтекание можно вставкой в код пустого дива &#8212; <div></div>, в стилях соответственно записываем так &#8212; .clear

Код шапки сайта в файле style.css:

&#13; &#13; &#13; &#13; body <
&#13; font-family: ‘Lato’, Verdana;
&#13; font-size: 100%;
&#13; background: #fff;
&#13; >
&#13; .wrap
&#13; <
&#13; margin: 0 auto;
&#13; width: 70%; /* отступы относительно окна браузера */
&#13; >
&#13; .header<
&#13; padding: 1.3em 0em; /* поля вокруг текста */
&#13; >
&#13; .logo<
&#13; float: left; /* обтекание логотипа */
&#13; >
&#13; .logo a <
&#13; display: block; /* переопределение в блочный */
&#13; >
&#13; .nav <
&#13; float: right; /* обтекание логотипа */
&#13; margin-top: 0. 82em;
&#13; >
&#13; .nav > ul > li <
&#13; display:inline-block; /* переопределение в строчно-блочный */
&#13; >
&#13; .nav > ul > li.active a<
&#13; background: #d0a5a5;
&#13; color: #ffffff;
&#13; &#13; >
&#13; .nav > ul > li > a <
&#13; display: block;
&#13; font-family: ‘Lato’, sans-serif;
&#13; font-size: 1.1em;
&#13; text-transform: uppercase;
&#13; padding: 0.5em 1em;
&#13; color: #444;
&#13; -webkit-transition: 0.9s; /* плавный переход */
&#13; -moz-transition: 0.9s;
&#13; -o-transition: 0.9s;
&#13; transition: 0.9s;
&#13; >
&#13; .nav > ul > li > a:hover <
&#13; color: #fff;
&#13; background: #d0a5a5;
&#13; >
&#13; &#13;

Код HTML разметки шапки сайта:

В процессе верстки сайта с нуля мы получаем готовую шапку сайта.

&#13; &#13; &#13; &#13;

Результат работы можно посмотреть на &#13; jsfiddle

• &#13; &#13; Создано 12.10.2017 12:50:40 &#13;
• &#13; &#13; Михаил Русаков &#13;

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Она выглядит вот так:

Она выглядит вот так: Как создать свой сайт

Пошаговая инструкция о том, как создать сайт html быстро и легко

От автора: без html не обходится создание любого веб-сайта. Это первый шаг к разработке нового интернет-проекта. Поэтому вопрос, как создать сайт html, нужно обсудить детально.

HTML – по сути текст. Поэтому в качестве его редактора может выступать даже блокнот. В предыдущей статье мы как раз создавали простейшую веб-страничку в блокноте. И вообще эта статья связана с той, потому что является ее непосредственным продолжением. Можете продолжить работать в блокноте или выбрать что-то удобнее. В процессе чтения статьи вы поймете, как создать сайт через html и css, хотя бы самый простой.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

Создаем сайт с нуля в html

Как в html создаются блоки? Очень просто, с помощью тега div. Он парный.

<div>Это будет шапка сайта</div> <div>Это будет боковая колонка</div> <div>Это будет основная часть страницы</div> <div>Это будет ее нижняя часть</div>

<div>Это будет шапка сайта</div>

<div>Это будет боковая колонка</div>

<div>Это будет основная часть страницы</div>

<div>Это будет ее нижняя часть</div>

Все это нужно вставить в содержимое тега body. Я думаю, вам предельно понятно, что должны будут представлять собой эти блоки. А ну-ка теперь откройте страницу в браузере. Вы увидите там эти четыре строчки, которые идут одна за другой. Пока совершенно непонятно, как из них сделать что-то похожее на сайт.

Рис. 1. Пока что перед нами лишь 4 строчки.

В бой идет один CSS

Настал час CSS! Сейчас мы используем его возможности. Чтобы обратиться к тегу div, в css файле нужно написать его название без угловых скобок. Вот так:

border: 3px solid black;

Обновите страницу. Мы задали нашим блокам толщину и цвет рамки, высоту и ширину. Только пока наша боковая колонка располагается не сбоку, да и вообще все элементы идут друг за другом сверху вниз. Но это ладно, видите ли вы гораздо более серьезную проблему? Мы обратились ко всем тегам div и правила применились ко всем блокам. Но ведь понятно, что блоки должны быть разными по размеру и местоположению, так что нам надо понять, как обращаться к каждому из них отдельно.

В CSS есть идентификатор. Чтобы задать его, нужно добавить тегу атрибут id с произвольным значением, которое будет именем идентификатора.

<div будет шапка сайта</div> <div будет боковая колонка</div> <div будет основная часть страницы</div> <div будет ее нижняя часть</div>

<div будет шапка сайта</div>

<div будет боковая колонка</div>

<div будет основная часть страницы</div>

<div будет ее нижняя часть</div>

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

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

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

Но у меня сайт выровнен по центру, а вас наверняка прижат к левому краю, если вы делали все так, как в статье. Как отцентрировать все блоки? Очень просто, достаточно все их обернуть в один блок. Можно дать ему идентификатор. Например, wrapper, а потом в стилях задать для него:

border: 3px solid black;

Мы задали контейнеру ширину и внешние отступы (margin). Первая цифра задает отступ снизу и сверху, а вторая – слева и справа. Соответственно, ключевое слово auto создает такие отступы, чтобы элемент был выровнен прямо по центру.

А помните мы задавали стиль для всех div-ов? Он же применится и к wrapper-у, что неизменно приведет к ошибке. Поэтому далее я указал с помощью псевдокласса :not, что правила следует применять ко всем дивам, кроме блока с потому что ему рамка явно не нужна, а в высоту он точно не 150 пикселей.

Делаем сайт более близким к реальности

Пока у нас и шапка и основное содержимое имеет одинаковую высоту. Но в реальности это определенно не так, поэтому можете удалить строку, которая задает высоту для всех блоков. Обычно в боковой колонке, шапке и футере количество информации не меняется, поэтому там можно выставить фиксированную высоту, а основное содержимое на то и основное, что количество текста может там быть разным. Поэтому этому блоку лучше поставить min-height, то есть минимальную высоту.

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

А ну-ка обновите страничку.

Стало красивее, уже сейчас наше творение выглядит в разы лучше, чем в начале этой статьи. А представьте, в какую конфетку можно превратить сайт после вставки графики, разных декоративных элементов и более кропотливого оформления содержимого. В боковой колонке можно вывести меню, внизу можно указать контактную информацию, а в основной части вывести статью. Вот так вот и создаются сайты. Черные рамки, как вы понимаете, очень легко убрать при необходимости.

Как видите, создание сайта с помощью html не является очень сложной задачей, для которой нужно обладать большими знаниями.

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Пошаговое создание сайта html. В чем состоит работа?

От автора: здравствуйте, уважаемые читатели блога webformyself. В этой статье будет показано пошаговое создание сайта html. Мы продолжим работу с сайтом, полученным в результате действий в предыдущей статье. Если не читали, то ничего, ссылка будет дана. Там мы уже разобрали на практике часть шагов, поэтому здесь они будут описаны лишь в теории, зато мы доработаем наш простенький сайт. Вы также можете скачать исходные файлы с кодом.

Планирование

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

Подготовка к работе

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

Создание и оформление базовой структуры.

В этой статье мы создали четыре главных структурных блока простого шаблона – шапку, боковую колонку, основную часть и футер. Сделали мы это с помощью html-тегов. После этого нужно было оформить эти элементы и сайт стал гораздо привлекательнее.

Под базовой структурой нужно понимать самые главные блоки. Например, в сложных шаблонах могут быть сотни элементов, но самых главных всегда всего лишь несколько.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Уроки создания сайта html нужно проходить пошагово. Например, на нашем сайте в премиум-разделе вся информация подается от простого к сложному.

Создание и оформление дополнительных элементов

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

Работать нужно снизу вверх. Это необязательно, просто так удобней. Сначала занимайтесь оформлением шапки. Например, что у нас обычно размещают вверху страницы? Правильно, логотип и название сайта. Давайте мы тоже это сделаем. Для шапки у вас уже задан фоновый цвет, теперь нужно задать фоновое изображение. Я выбрал в качестве фонового изображения файл html5.png, который нужно скопировать туда же, где лежит наша страничка.

background: #D2E4AF url(html5.png) no-repeat 10% 50%

Слишком сложно будет объяснить вам эту строчку в полной мере, если вы впервые работаете с CSS. Вкратце: дописали после цвета адрес изображения, указали, что его не нужно повторять и задали позицию относительно блока: сдвиг на 10% ширины блока влево от левого края по горизонтали и на 50% от высоты вниз от верхнего края по вертикали. Напоминаю, все это нужно прописывать для блока header. Если все сделано правильно, логотип появится в шапке. Естественно, можно использовать и свое изображение, заодно и потренируетесь.

Давайте теперь в шапке разместим красивое название сайта. Заголовки в html задаются тегами h3-h6, в зависимости от размера и важности заголовка. Определенно, заголовок сайта очень важен, поэтому заключаем его в парный тег h3.

Отлично, у нас появился новый элемент. Как теперь до него дотянутся через CSS? Очень просто:

text-shadow: 0 0 2px blue

Мы указали, что данные правила нужно применить ко всем тегам h3, находящимся внутри блока с То есть ко всем самым крупным заголовкам внутри шапки. Я решил сделать цвет заголовка оранжевым, отцентрировать его и дать небольшую синюю размытую тень. Вам необязательно сейчас разбираться в написанном, просто скопируйте себе в таблицу стилей.

Обновим нашу страничку и увидим, что в целом шапка стала в разы красивее, хотя на реальном сайте в ней обычно содержится что-то еще.

Вставляем меню в боковую колонку

Боковая колонка часто используется для того, чтобы вывести в ней главную навигацию по сайту. Давайте и мы поступим также. Нам нужен список. Каким тегом он задается? Тегом ul, а отдельные его пункты заключаются в теги li. Проще показать на примере:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Естественно, в реальном проекте будут названия разделов сайта, а не текст: «Пункт 1″. И это будут ссылки. То есть вот так:

По умолчанию рядом с каждым пунктом списка выводится маркер. В этом случае он нам не нужен. Убрать его можно так:

Опять же заметьте, что мы обратились к спискам, которые находятся именно в боковой колонке. Ко всем остальным (если они будут) данный стиль применен не будет. Остается только немного украсить само меню.

border-bottom: 2px solid orange;

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

#sidebar ul li:hover

#sidebar ul li:hover<

Вставьте этот код и обновите страничку. Вроде неплохо, да?

Оформляем контент

В основном блоке можно просто написать много случайного текста (как будто статья), добавить к статье заголовок (вы уже знаете как) и добавить небольшие внутренние отступы (padding), чтобы содержимое не прилипало к бокам блока.

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

Итак, получилось что-то симпатичное. Нашей целью не было создать крутой шаблон – на это может уйти много дней работы. Моей целью было показать вам, как вообще создается сайт, по каким принципам это делается. У нас получился простейший шаблон, который теперь можно дорабатывать сколько угодно. Даже веб-дизайнер нам с вами не понадобился, сами по-быстрому подобрали цвета.

Это было пошаговое создание сайта html для чайников. Проще уже некуда. Если вам понравилось, вы можете продолжить изучать html, css и другие веб-технологии на нашем сайте. И однажды, может быть, создать сайт вам будет проще, чем пожарить картошку.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Верстка сайта на HTML5 и CSS3

От автора: с тех пор, как в сети стали появляться статьи, демонстрирующие новые свойства HTML5 и CSS3, у меня родилась идея создания верстки сайта без изображений. Взяв на вооружение улучшения HTML5 и CSS3 (по сравнению с предыдущими почтенными спецификациями), не слишком сложно сверстать достойно выглядящий веб сайт, которому не придется полагаться на изображения в качестве элементов разметки.

Вот изображение сайта, который мы будем верстать на HTML5 и CSS3:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Перед тем, как мы приступим к практическим шагам, я Вам рекомендую просмотреть демо-результат работы.

Также скачайте исходники себе на компьютер!

Выше на изображении вы видите контент папки, содержащей финальную демоверсию страницы – как и обещано, ни одного изображения. У нас имеется страница HTML с «продвинутой» разметкой, файл CSS, содержащий стили, управляемые CSS3 и папка, содержащая несколько шрифтов, которые мы собираемся вставить, применив правило @font-face.

Как обычно, я советую расположить все содержимое сайта в файле index.html еще до того, как вам в голову придет перейти к CSS, так что давайте прямиком к этому и приступим.

Верстка на HTML5 — разработка быстрее, а код гибче

Вдобавок к размещению новых семантических элементов HTML5 еще и сильно укорачивает код.

<!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 &amp; CSS3</title> <!&#8212;[if lt IE 9]><script src=http://html5shiv. googlecode.com/svn/trunk/html5.js></script><![endif]&#8212;> <link href=styles.css rel=stylesheet /> </head>

<title>Fictive Company Blog | a blog showcasing the übercoolness of HTML5 &amp; CSS3</title>

<!&#8212;[if lt IE 9]><script src=http://html5shiv.googlecode.com/svn/trunk/html5.js></script><![endif]&#8212;>

<link href=styles.css rel=stylesheet />

Заметно, что они вышли гораздо аккуратнее, чем то, что у вас получилось бы, если писать HTML4 или XHTML. Объявление doctype занимает всего четыре буквы.

А вот как это было раньше:

<!DOCTYPE html PUBLIC &#171;-//W3C//DTD XHTML 1.0 Strict//EN&#187; &#171;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

<!DOCTYPE html PUBLIC &#171;-//W3C//DTD XHTML 1.0 Strict//EN&#187; &#171;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd»>

Способ HTML5 гораздо лучше, правда? Далее мы открываем тэг html и устанавливаем язык документа. (Подтэг своего языка можно найти в IANA Language Subtag Registry). Еще одно заметное тут изменение – отсутствие кавычек, окружающих значение en. Вам приходилось для подтверждения правильности включать кавычки в XHTML, но исходя из того, что это HTML5, они больше не необходимы.

Может, это покажется совсем небольшим выигрышем: сколько (кило)байт вы сэкономите на нескольких кавычках? Но ведь страница грузится не единожды; со временем она вам за все отплатит. У вас в действительности может приключиться другая сложность — по привычке вы продолжите добавлять кавычки. Если в своем любимом текстовом редакторе вы пользуетесь великолепным плагином Zen Coding, то он добавляет кавычки автоматически. Единственное решение проблемы – найти и убрать их все после окончания работы над файлом.

В элементе head мы сначала определяем набор символов и добавляем заглавие. Весьма стандартно, без кавычек. Двигаясь дальше, вставляем условный комментарий, внутрь которого загружаем файл JavaScript, который поможет нам работать с Internet Explorer (IE) 8 и более ранними его версиями.

Условный комментарий – это вид HTML-комментария, который Microsoft использует в IE, по сути, для реализации отдельных (или всех) версий своего браузера.

Используемый нами здесь комментарий проверяет, является ли браузер, открывающий страницу, Internet Explorer’ом с номером версии менее 9. Другой комментарий, который мы бы использовали, это: ; он проверил бы, является ли открывающий страницу браузер IE версией ниже или равной 8. По существу, между этими двумя комментариями нет разницы; они оба направлены на один ряд версий IE, так что можете взять любой.

Причина включения скрипта HTML5Shiv Реми Шарпа (Remy Sharp) кроется в отсутствии у Internet Explorer’а поддержки элементов HTML5. Проблема IE в том, что он не применяет никаких стилей CSS к элементам, которые не распознает. Таким образом, чтобы заставить более старые версии IE правильно выполнять элементы HTML5, нам нужно при помощи JavaScript создать незнакомые элементы.

Продвигаясь к тэгу body, размечаем область заголовка своей страницы, где полно элементов HTML5:

Как сделать сайт html и css

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, WordPress, Bootstrap

Создание сайта с нуля на HTML + CSS.

Всем привет!
Вот и подошли мы к завершению изучения основ CSS.
Сегодня испробуем на практике все знания, которые вы получили, изучая основы CSS. Предлагаю вместе со мной создать простой сайт-визитку с использованием HTML + CSS.
Вот сама схема и план действий:

1). Создание файла «index.html» и «CSS».
2). Вставка в файл «index.html» скелет html (стандартный код).
3). Подключение «index.html»с «style.css».
4). Создание меню.
5). Вставка логотипа.
6). Создание блока для контента.
7). Создание подвала.
8). Создание остальных страниц.

Создание файла «index.html» и «CSS».
Итак, создайте себе отдельную папочку «Мой сайт». Теперь в этой папочке создайте два файла «index.html» и «style.css» .
Чтобы создать «index.html»:
на компьютере снизу в левом углу нажмите на кнопку «Пуск» .
Далее выберите «Все программы» => «Стандартные» => «Блокнот» .

Далее нажмите «Файл» => «Сохранить как» :

Укажите место, куда вы хотите сохранить файл, в нашем случае это папка под названием «Мой сайт».
В поле « Имя файла » напишите « index.html» , а не просто « index» ( это важно! ). Таким способом мы создаем файл с расширением « *.html » для веб-страниц. Далее нажмите на кнопку « Сохранить »:

Чтобы создать «style.css»:
кнопка «Пуск» => «Все программы» => «Стандартные» => «Блокнот» :

В открывшем блокноте нажмите в меню сверху «Файл» => «Сохранить как…» :

Далее укажите место, куда вы хотите сохранить файл, лучше файл разместить вместе с остальными HTML файлами.

В поле «Имя файла» напишите «style.css» , а не просто style ( это важно! ). Таким способом мы создаем файл с расширением « *.css ». Далее нажмите на кнопку « Сохранить »:

Вот, что должно получиться у вас в папке «Мой сайт»:

Вставка в файл «index. html» скелет html (стандартный код)
Откройте файл «index.html» через программу «Блокнот» и вставьте вот такой стандартный HTML код:

Сохраните файл «index.html».

Подключение «index.html» к «style.css»
Напомню вам, чтобы подключить файл со стилями « style.css » к « index.html » перед тегом </head> ,пропишите вот такой код:

Сохраните файл «index.html» .
Вот теперь можем создавать сайт.
Начнем с меню.

Создание меню
Через списки HTML создадим меню и, естественно, сразу пропишем для каждого раздела меню ссылку на другую страницу:

Вот полный пример:

В результате ничего особенного вы не увидите:

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

Теперь выровняем меню посредине

Закрасим меню и добавим тень:

Осталось поменять размер и цвет в названиях меню:

Итак, вот весь CSS стиль для меню:

Смотрим на результат:

Вставка логотипа

Для логотипа создайте папку « image ». В этой папке будут храниться все изображения сайта-визитки.

Залейте в эту папку « image » ваш логотип, размерами примерно 200 х 200 px.
Дайте название логотипу « logo » и расширении файла « png ».
Вот так это будет выглядеть в HTML:

Выровняем лого по центру и закруглить через CSS:

Создание блока для контента
Теперь создадим блок для контента. Добавьте в HTML вот такой код:

В CSS выровняем блок «content» по центру. Укажем ему ширину, сделаем внутри отступы, выделим блок тенью:

Выровняем заголовок по центру, увеличим размер и поменяем цвет:

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

Вот весь CSS код для блока «content» :

Создание подвала
Теперь внизу сайта создадим подвал и разместим там копирайт.
В HTML добавьте вот такой код:

В CSS выровняем подвал по центру, изменим цвет текста и ссылки, поменяем размер:

Вот так выглядит мой абсолютно весь CSS код файла «style. css» :

Создание остальных страниц
Вот и готова первая страница. Весь HTML код файла « index.htm l»:

Она же нам послужит как шаблонная страница.
После того, как вы сохранили « index.html », создайте файлы:

• rabota.html – для страницы «Наши работы»
• prais.html – для страницы «Прайс»
• contakt.html – для страницы «Контакты»

И во все эти файлы вставьте такой же код, какой в файле « index.html », меняя только текст в <title> и текст с заголовками в блоке « content ».
Смотрим результат!

А те, кто пришел сюда случайно по запросу «создать сайт визитку бесплатно», могут скачать результат, который получился в процессе сегодняшней практики:

Поздравляю всех, кто изучал мои курсы от самого начала до сегодня, с окончанием изучения основ CSS.

Книга Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress

Продавец этого товара

Все о книге Как создать сайт. Комикс-путеводитель по HTML, CSS и WordPress

Пытаясь сделать сайт для своего портфолио, художница Ким попадает на удивительную планету. Чтобы вернуться домой, ей придется выучить азы HTML, победить злобного дракона 404, подружиться с веб-гуру и доброй колдуньей CSS и выяснить, что таится за стенами WordPress-сити.

В формате увлекательного комикса книга познакомит детей с языками HTML и CSS, а также с конструктором сайтов WordPress.

Статика / Девман

Перед тем, как говорить о статике, сначала разберёмся из чего состоят сайты. Когда вы кликаете на ссылку в браузере, вы получаете страницу, которая содержит код сразу на трёх языках. Первый — это HTML, язык разметки. Файл с использованием одного только HTML выглядит примерно так:

это скриншот с нашей Энциклопедии, если отключить от неё всю статику.

HTML определяет, что будет на сайте по части содержания. Он решает, какие подгрузить файлы, какой на странице будет текст, какие на сайте будут ссылки. Только содержание, без красивостей и анимаций.

Раньше сайты пытались разнообразить с помощью стилей в HTML: поменять цвет или размер текста. Прямо в HTML это делать оказалось неудобно. Появился CSS — каскадная таблица стилей. Теперь в CSS определяют цвет, размер текста, отступы и тонну других настроек.

Третий язык — JavaScript, это уже язык программирования, в отличие от HTML и CSS — это языки разметки. Он позволяет менять стили, менять HTML-теги, менять текст и ещё много чего. Это штука, которая оживляет страницу: в ответ на действия пользователя (движение мышки, клики и т.д.) он может менять и стили (CSS), и содержание (HTML).

Все 3 составляющие чаще всего лежат в отдельных файлах. Иногда CSS даже разложен по нескольким файлам, каждый из которых подключается в HTML. Есть ещё шрифты и картинки, которые тоже лежат в отдельных файлах. Получается, что чтобы показать один сайт, браузер скачивает для вас огромное количество разных файлов и перерабатывает их в страничку.

Одна страница сайта — это много файлов

Файлов нужно много, но всё начинается с HTML. В нём указано, какие файлы нужно подключать. Если что-то не подключилось, начинайте поиск оттуда.

Всё начинается с HTML

Так что же такое статика?

Когда у вас есть сайт интернет-магазина, на нём изо дня в день меняются цены, товары и уникальные предложения. Всё это меняется в HTML-составляющей сайта, т.к. это содержание страницы. Остальное же: стили, JS-скрипты, шрифты, лого сайта — не меняется, поэтому эти файлы называют статикой.

Статика — это файлы CSS и JS, картинки и шрифты

Браузеры ленивые и не загружают все стили google.com или vk.com каждый раз, когда вы заходите на эти сайты. У браузеров есть память, где они хранят файлы статики. Так, например, когда вы заходите на google.com второй раз за день, браузер скачивает только HTML, а стили, логотип сайта и т.д. он берёт из своей памяти на вашем компьютере.

Как подключить CSS

CSS файл можно подключить к HTML документу. Для примера рассмотрим простую страницу, состоящую всего из двух файлов. Есть каталог site, в нем находятся такие файлы:

site
├── index.html
└── styles.css

Подключение CSS происходит внутри HTML документа index.html. Откройте файл и в начале документа найдите тег <head>. Внутрь <head> добавьте новый тег <link>, он отвечает за подгрузку других файлов, и его атрибут href содержит адрес CSS файла:

<html>
  <head>
   <link rel="stylesheet" href="styles.css">
   ...
  </head> 
...

У <link> есть второй атрибут, rel. Он говорит браузеру “Что это за файл и что с ним делать”. Для CSS-файлов в rel проставляется значение stylesheet (переводится как список стилей).

Содержимое атрибута href очень похоже на путь к файлу — styles.css. Но на самом деле это адрес. В чем здесь отличие читайте в статье про относительные адреса.

Как подключить JS

Чтобы запустить код внутри JS файла, его надо подключить к HTML документу. Вот простой сайт, он состоит из двух файлов внутри каталога site:

site
├── index.html
└── script.js

Принцип подключения тот же, что и с CSS. В HTML есть специальный тег <script>. Внутри него можно подключать JS-код из других файлов. Обычно скрипты подключают в самом конце документа, прямо перед закрытием тега <body>:

<html>
  <head>
    ...
  </head>
  <body>
    ...
    <script src="script.js"></script>
  </body>
</html>

Внутри атрибута src указан относительный адрес файла script.js. Что такое адрес и чем отличается от пути читайте в статье про относительные адреса.

Что такое media

Вернёмся к примеру с интернет-магазином. У него есть код, а есть данные. Код сайта — это скрипты на Python, HTML страницы, статика… Без кода сайт будет выглядеть неправильно или вообще не работать. Данные сайта — это товары, их цены и фотографии, логины и кредитные карточки пользователей. Сайт может жить без данных, просто он будет пустым.

Есть картинки, относящиеся к коду: логотип сайта, иконки соцсетей, фоновая картинка… Они прибиты к сайту гвоздями, вынимать их никак нельзя. Все эти картинки — статика. Есть же картинки, относящиеся к данным: аватарки пользователей, фотографии товаров и так далее. Они могут меняться по несколько раз на дню. Их называют media.

Статика живёт с кодом, а Media живёт с базой данных

В популярных CMS на PHP большинство картинок (логотип, иконки) заливаются через админку и лежат с базой данных. Там они не статика, а media. Девман это не одобряет.

Примеры W3.CSS

❮ Предыдущий Далее ❯

Заголовок

Цвета W3.CSS

Цвета фона Цвета текста Hover Colors

Объяснение примеров

Контейнеры W3.CSS

Контейнеры Контейнеры с цветом Заголовок контейнера с использованием