Создание сайта на html

Разное

Создание сайта на html

В целом оценю время на базовое изучение html как 2-8 часов, остальное по желанию. Ну и, конечно же, время изучения зависит от заинтересованности. Рекомендую разбить на несколько дней по 20-30 минут.

Вы готовы? Тогда поехали!

Подключение к интернету для создания страницы на html нам НЕ нужно.

Нам понадобится

1) Выбираем текстовой редактор. На первое время достаточно Блокнота (Notepad) (в нём нам понадобится только команда Сохранить как)

2) Любой интернет-браузер, например, Internet Explorer для Windows или Safari для Mac OS X и iOS. Да-да, можно также Mozilla, Google Chrome, Opera, Yandex и Mail браузеры и тд.

Приступим к созданию страницы HTML

1) создаём на рабочем столе папку html. Это мы сделаем для того, чтобы уроки были структурированы и содержались в одном месте.

2) Создаём наш файл в текстовом редакторе, например в Блокноте (NotePad). Далее Сохранить как.


Создание сайта на html

Кодировку лучше выбирать UTF-8, затем выбрать все типы файлов и выбрать название файла с .html на конце, например index.html

Создание сайта на html

Выбираем в качестве директории (папки), куда сохранить, нашу html
Нажимаем сохранить. Готово!

Часто задают вопрос о том, что не видно расширения файла. Разберём по порядку

Возможность видеть расширения файла может помочь в точном определении типа файла и даёт возможность вручную (при команде переименовать) сменить не только расширение, но и следовательно тип файла (например, с txt на html)

3) вставляем в него Весь код (вместе с комментариями), указанный ниже:

<!-- это комментарии. их не видно при отображении файла в браузере-->  <html> <!-- тег html обозначает открытие файла html--&g.  


 ки         </title> <!-- закрываем тег title иначе у нас всё последующее будет считаться заголовком-->       </head> <!-- тег head также нужно закрыть-->     <body>  <!-- наконец открываем тело нашего документа. Здесь будет всё его содержание-->        <!--начиная отсюда вставляем любые текст, заголовки, ссылки и тп-->      <h1>Заголовок моей странички</h1> <!--h1 служит для обозначения заголовка.       Есть ещё h2, h3 и так до h6. самого маленького заголовка-->      Это моя первая web-страничка!      </body> <!--тело также следует закрыть, после него уже не вставляем текст и тп-->    </html> <!-- закрывающий тег html обозначает закрытие файла html-->

4) открываем файл. Можете выбрать другой браузер для открытия данного файла, для этого нажимаем правую кнопку мыши на нашем файле index.html — Открыть с помощью и выбираем какой-нибудь браузер из списка, например, Internet Explorer, Google Chrome, Mozilla, Яндекс Браузер и тд.

Демонстрация Скачать исходники

В итоге, открыв Интернет-Браузером получившийся index.html, Вы должны увидеть страничку такого вида:

Создание сайта на html

Рисунок 1.

На Рисунке 1 мы видим как в результате браузер отобразил Вашу страничку. Красным выделен текст следующих элементов:

<!--намеренно пропущена часть кода-->     <!-- тег title, отображающий название страницы во вкладке браузера -->.  


 sp;так до h6. самого маленького заголовка-->        Это моя первая web-страничка! <!--обычный текст-->  <!--намеренно пропущена часть кода-->

В коде представленном снизу Вы сможете увидеть базовый минимум html-документа. Её нужно обязательно выучить и не путать местами открывающие и закрывающие теги. 

<html>    <head>  </head>    <body>  </body>    </html>

Тег head выделяет головную часть документа. В ней прописываются элементы в основном связанные с помощью Браузеру в обработке элементов Вашей страницы (название, ключевые слова, авторство и тд) Конкретно о его содержимом мы поговорим позже.

Тег title обозначает Название страницы. Это единственный тег, содержащийся в head, который отображается на странице. То, что вписать после открывающего и перед закрывающим тегом и будет Названием Вашей страницы в Интернете 


<html>    <head>      <title>         Название страницы       </title>    </head>    <body>  </body>    </html>

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

<html>      <head>      <title>         Название страницы       </title>    </head>    <body>    <h1>Любой заголовок</h1>  Просто текст  <p>Текст в параграфе. Он будет писаться с новой строки и заканчиваться с закрывающим тегом</p>  Другой текст    </body>  </html>

Почти все теги в HTML открывающие и закрывающие (исключение, например, тег img, который обозначает вставку изображеия). 


<html>    <head>      <title>         Название страницы       </title>    </head>  <body>    <img src="photo.jpg"> <!--непарный тег-->       </body>  </html>

В очередной раз напомню, что Важно не забывать писать закрывающие теги для всех остальных типов тегов, иначе Браузер не поймёт где именно Вы хотели закончить тот или иной элемент. Как снизу:

<html>    <head>      <title>       </title>    </head>  <body>    Хочу выделить текст <b>жирным, а этот уже <i>курсивом</i> <!--тут забыт закрывающий </b> после слова жирным -->       </body>  </html>

Мы намерено после слова жирным забыли закрывающий тег b. В итоге браузер вывел следующее


Хочу выделить текст жирным, а этот уже курсивом

Как видите, текст до конца будет выделяться жирным, а тот, что подразумевался курсивом, тот будет и жирным, и курсивом. Так что будьте внимательны!

5) Если Вы хотите что-то подредактировать в Вашем файле index.html (а он теперь по умолчанию открывается только браузером), то тогда нажимаем правую кнопку мыши на нашем файле index.html — выбираем Открыть с помощью а из списка выбираем уже текстовой редактор, это будет либо Блокнот (в англ. Notepad), либо установленный Вами другой текстовой редактор.

В принципе азы объяснил. Пока html-страница выглядит достаточно просто, но в следующих уроках я подробно расскажу Вам об этих и других элемента и их назначении — будем вставлять изображения, делать ссылки и много другого интересного)

Мои поздравления!
Несложно же?)

tradebenefit.ru

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML


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

Элементы

Элементы указывают, как определять структуру и содержимое объектов на странице. Некоторые из часто используемых элементов включают в себя несколько уровней заголовков (определены как элементы с <h1> до <h6>) и абзацев (определены как <p>); в список можно включить элементы <a>, <div>, <span>, <strong> и <em> и многие другие.

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

<a>

Теги

Добавление угловые скобок < и > вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа <, затем идёт имя элемента и завершается символом >; например, <div>.


Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например, </div>.

Содержимое, которое находится между открывающим и закрывающим тегами, является содержимым этого элемента. Ссылка, к примеру, будет иметь открывающий тег <a> и закрывающий тег </a>. Что находится между этими двумя тегами будет содержимым ссылки.

Так, теги ссылок будут выглядеть примерно так:

<a>...</a>

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id, который идентифицирует элемент; атрибут class, который классифицирует элемент; атрибут src, который определяет источник встраиваемого содержимого; и атрибут href, который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент <a> с атрибутом href будет выглядеть следующим образом:

<a href="http://shayhowe.com">Shay Howe</a>

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега <a> и закрывающего тега </a> охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href="http://shayhowe.com" в открывающем теге.


Синтаксис HTML в виде схемы включает элемент, атрибут и тег

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

Все HTML-документы содержат обязательную структуру, которая включает следующие декларации и элементы: <!DOCTYPE html>, <html>, <head> и <body>.

Объявление типа документа или <!DOCTYPE html> находится в самом начале HTML-документа и сообщает браузерам, какая версия HTML применяется. Поскольку мы будем использовать последнюю версию HTML, наш тип документа будет просто <!DOCTYPE html>. После этого идёт элемент <html> означающий начало документа.

Внутри <html> элемент <head> определяет верхнюю часть документа, включая разные метаданные (сопроводительная информация о странице). Содержимое внутри элемента <head> не отображается на самой веб-странице. Вместо этого он может включать название документа (который отображается в строке заголовка окна браузера), ссылки на любые внешние файлы или любые другие полезные метаданные.

Всё видимое содержимое веб-страницы будет находиться в элементе <body>. Структура типичного HTML-документа выглядит следующим образом:

<!DOCTYPE html>  <html lang="ru">   <head>   <meta charset="utf-8">   <title>Привет, мир!</title>   </head>   <body>   <h1>Привет, мир!</h1>   <p>Это веб-страница.</p>   </body>  </html>

Этот код показывает документ, начиная с объявления типа документа, <!DOCTYPE html>, затем сразу идёт элемент <html>. Внутри <html> идут элементы <head> и <body>. Элемент <head> содержит кодировку страницы через тег <meta charset="utf-8"> и название документа через элемент <title>. Элемент <body> включает в себя заголовок через элемент <h1> и абзац текста через <р>. Поскольку и заголовок и абзац вложены в элемент <body>, они видны на веб-странице.

Когда элемент находится внутри другого элемента, известный также как вложенный, хорошей идеей будет добавить к нему отступ, чтобы сохранить структуру документа хорошо организованной и читабельной. В предыдущем коде оба элемента <head> и <body> вложены и сдвинуты внутри элемента <html>. Структура отступов для элементов продолжается с новыми добавленными элементами внутри <head> и <body>.

Приведённая структура, сделанная с помощью объявления типа документа <!DOCTYPE html> и элементов <html>, <head> и <body>, является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.

На практике

В качестве веб-дизайнеров и фронтенд-разработчиков мы можем позволить себе роскошь посещать ряд замечательных конференций, посвящённых нашему ремеслу. Мы собираемся организовать собственную конференцию Styles Conference и создать для неё сайт на протяжении следующих уроков. Вот так!

  1. Откройте текстовый редактор, создайте новый файл с именем index.html и сохраните его в место, которое не забудете. Я собираюсь создать папку на рабочем столе с именем styles- conference и сохранить этот файл в ней; не стесняйтесь делать то же самое.

  2. В файле index.html добавим структуру документа, в том числе тип документа <!DOCTYPE html> и элементы <html>, <head> и <body>.

    <!DOCTYPE html> <html lang="ru"> <head> </head> <body> </body> </html>

  3. Внутри элемента <head> добавим элементы <meta> и <title>. Элемент <meta> должен включать в себя правильные атрибуты charset и значение, в то время как элемент <title> должен содержать название страницы, скажем «Styles Conference».

    <head> <meta charset="utf-8"> <title>Styles Conference</title> </head>

  4. Внутри элемента <body> добавим элементы <h1> и <p>. Элемент <h1> должен включать в себя желаемый заголовок — давайте снова воспользуемся «Styles Conference», а элемент <р> должен включать в себя простой абзац для представления нашей конференции.

    <body>   <h1>Styles Conference</h1>   <p>Каждый год самые яркие веб-дизайнеры и фронтенд-разработчики собираются в Чикаго,    чтобы обсудить новейшие технологии. Присоединяйся к нам этим августом!</p>  </body>

  5. Пришло время взглянуть на то, что мы сделали! Отыщем наш файл index.html (у меня он находится в папке styles-conference на рабочем столе). Дважды щёлкнув по этому файлу или перетащив его в браузер мы откроем его для просмотра.

    Наши первые шаги при создании сайта Styles Conference

    Рис. 1.02. Наши первые шаги при создании сайта Styles Conference

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

Основные термины CSS

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

Селекторы

При добавлении элементов на веб-страницу они могут быть оформлены с помощью CSS. Селектор определяет, на какой именно элемент или элементы в HTML нацелиться и применить к ним стили (такие как цвет, размер и положение). Селекторы могут включать в себя комбинацию различных показателей для выбора уникальных элементов, в зависимости от того, насколько конкретными мы желаем быть. Например, мы хотим выбрать каждый абзац на странице или выбрать только один конкретный абзац.

Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде <h1> или <р>.

В CSS селекторы сочетаются с фигурными скобками {}, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы <p>.

p { ... }

Свойства

Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок {} и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background, color, font-size, height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size, применяемые ко всем элементам <p>.

p {   color: ...;   font-size: ...;  }

Значения

Пока мы только выбрали элемент через селектор и определили, какой стиль через свойства мы хотели бы к нему применить. Теперь мы можем задать поведение этого свойства через значение. Значения могут быть определены как текст между двоеточием и точкой с запятой. Ниже мы выбираем все элементы <p> и устанавливаем значение свойства color как orange, а значение свойства font-size как 16 пикселей.

p {   color: orange;   font-size: 16px;  }

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

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

Структура синтаксиса CSS включает селектор, свойства и значения

Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

Знание нескольких основных терминов и общего синтаксиса CSS — это отличный старт, но у нас есть еще несколько пунктов для изучения, прежде чем мы прыгнем в глубину. В частности, мы должны внимательнее рассмотреть, как селекторы работают в CSS.

Работа с селекторами

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

Селекторы типа

Селекторы типа нацелены на элементы по их типу. Например, если мы хотим ориентироваться на все элементы <div> мы должны использовать селектор div. Следующий код показывает селектор типа для элементов <div>, а также соответствующий HTML.

CSS

div { ... }

HTML

<div>...</div>   <div>...</div>

Классы

Классы позволяют выбрать элемент на основе значения атрибута class. Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.

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

В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class, включая элементы <div> и <p>.

CSS

.awesome { ... }

HTML

<div class="awesome">...</div>  <p class="awesome">...</p>

Идентификаторы

Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class, идентификаторы используют значение атрибута id в качестве селектора.

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

В CSS идентификаторы обозначаются с символом решётки впереди, после чего идёт значение атрибута id. Здесь идентификатор выберет только элемент, содержащий атрибут id со значением shayhowe.

CSS

#shayhowe { ... }

HTML

<div id="shayhowe">...</div>

Дополнительные селекторы

Селекторы чрезвычайно мощная штука и описанные выше относятся к наиболее распространённым селекторам, которые нам попадаются. Эти селекторы только начало. Существует много продвинутых селекторов и они легко доступны. Когда освоитесь с ними, не бойтесь посмотреть и некоторые более прогрессивные.

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

Подключение CSS

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

Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением .css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.

Внутри элемента <head> применяется элемент <link>, который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

В следующем примере HTML-документа элемент <head> указывает на внешний стилевой файл.

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

Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.

Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css. Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.

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

Использование сброса CSS

Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.

Сброс CSS берёт все основные элементы HTML с заданным стилем и обеспечивает единый стиль для всех браузеров. Эти сбросы обычно включают в себя удаление размеров, отступов, полей или дополнительные стили понижающие эти значения. Поскольку каскадирование CSS работает сверху вниз (скоро об этом узнаете) — наш сброс должен быть в самом верху нашего стиля. Это гарантирует, что эти стили прочитаются первыми и все разные браузеры станут работать с общей точки отсчёта.

Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.

Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.

На практике

Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.

  1. Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
  2. Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.

  3. Просматривая файл index.html в браузере мы можем видеть, что элементы <h1> и <p> уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт, скопируйте код и вставьте его в верхней части нашего файла main.css.

    /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }
  4. Наш файл main.css начинает принимать форму, так что подключим его к файлу index.html. Откройте index.html в текстовом редакторе и добавьте элемент <link> в <head>, сразу после элемента <title>.
  5. Поскольку мы указываем на стили через элемент <link> добавьте атрибут rel со значением stylesheet.

  6. Мы также включим ссылку на наш файл main.css используя атрибут href. Помните, наш файл main.css сохранён в папке stylesheets, который находится внутри папки assets. Таким образом, значение атрибута href, который является путём к нашему файлу main.css, должно быть assets/stylesheets/main.css.

    <head> <meta charset="utf-8"> <title>Styles Conference</title> <link rel="stylesheet" href="assets/stylesheets/main.css"> </head>

Время для проверки нашей работы и просмотра, как уживаются вместе наши HTML и CSS. Открытие файла index.html (или обновление страницы, если она уже открыта) в браузере должно показать немного другой результат, чем раньше.

Наш сайт Styles Conference со сбросом CSS

Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

Демонстрация и исходный код

Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

Просмотр сайта Styles Conference или Скачать исходный код

Резюме

Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.

Напомним, что мы рассмотрели следующее:

  • Разница между HTML и CSS.
  • Знакомство с элементами HTML, тегами и атрибутами.
  • Настройка структуры вашей первой веб-страницы.
  • Знакомство с селекторами CSS, свойствами и значениями.
  • Работа с селекторами CSS.
  • Указатель на CSS из HTML.
  • Важность CSS сброса.

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

webref.ru

Главная

Здравствуйте уважаемые будущие веб-мастера! Мне 55 лет и я рад приветствовать Вас на своём сайте.
Этот сайт первый, который я разработал самостоятельно, а до этого умел только входить в интернет.

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

Меню

Создание сайта на htmlГлавная

Создание сайта на htmlCтраница 1

Создание сайта на htmlСтраница 2

Дополнительная информация

Текст дополнительной информации

starper55plys.ru

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>   <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Заголовок страницы для браузера</title>   <link rel="stylesheet" href="/style.css" type="text/css" />   </head>   <body>   <h1>Заголовок страницы</h1>   <!-- Комментарий -->   <p>Абзац.</p>      </body>  </html>

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

Вставить код в блокнот Так выглядит сайт html в браузере

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<html>...</html>

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

<head>...</head>

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

<body>...</body>

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

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

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

макет сайта

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  	</div>  </body>  </html>

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

/*Каркас сайта*/  body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}  #basic {width:960px; min-height:950px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}  img {border:0;}  a {color:#ff9c00;}  a:hover {text-decoration:none;}

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

Каркас html сайта

Шапка сайта

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

 <!-- Шапка сайта -->  	<div id="head-site">  	<a href="/"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  	<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  </div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  		<!-- Шапка сайта -->  		<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>  		  	</div>  </body>  </html>

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

/*Шапка сайта*/  li.none-bg {background:none!important;}  .telefon {float:right;}

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

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

<!-- Шапка сайта -->  			<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>

Этот код:

<!-- Верхнее меню сайта -->  	<div id="menu-top">   <div class="bg-1">   <ul>   <li><a href="#">О нас</a></li>   <li><a href="#">Ассортимент</a></li>   <li><a href="#">Отзывы</a></li>   <li><a href="#">Забронировать столик</a></li>   <li><a href="#">Наши клиенты</a></li>   <li class="none-bg"><a href="#">Контакты</a></li>   </ul>   </div>   <div class="bg-2"></div>  	</div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>   <!-- Основной блок сайта -->   <div id="basic">      	<!-- Шапка сайта -->   <div id="head-site">   <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>   <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />   </div>      <!-- Верхнее меню сайта -->   <div id="menu-top">   <div class="bg-1">   <ul>   <li><a href="#">О нас</a></li>   <li><a href="#">Ассортимент</a></li>   <li><a href="#">Отзывы</a></li>   <li><a href="#">Забронировать столик</a></li>   <li><a href="#">Наши клиенты</a></li>   <li class="none-bg"><a href="#">Контакты</a></li>   </ul>   </div>   <div class="bg-2"></div>   </div>      </div>  </body>  </html>

А в файл style.css:

/*Верхнее меню сайта*/  #top-menu {width:960px; height:74px; }  .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}  .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}  .bg-1 ul {margin:0; padding:0; list-style:none;}  .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}  .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}  .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}

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

Логотип, меню и телефон html сайта

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

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

<!-- Верхнее меню сайта -->  <div id="menu-top">  ......  </div>

Добавляем следующее:

<!-- Левое меню и Контент -->  			<div id="content">  			  			<!-- Контент - правый блок -->  			<div class="right">  				<h1>Кофе Американо</h1>  				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>    				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>  				  				<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img3.png" alt="" title="" />    				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>    				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>    				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>    				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>  			</div>  			  			<!-- Левое меню - левый блок блок -->  			<div class="left">  				<div id="left-menu">  					<div class="block-nad-menu"></div>  					<div class="block-menu">  					<ul>  					<li><a href="#">Кофе Айриш</a></li>  					<li><a href="#">Кофе Американо</a></li>  					<li><a href="#">Кофе Глясе</a></li>  					<li><a href="#">Кофе Диппио</a></li>  					<li><a href="#">Кофе Капучино</a></li>  					<li><a href="#">Кофе Кон Панна</a></li>  					<li><a href="#">Кофе Коретто</a></li>  					<li><a href="#">Кофе Латте</a></li>  					<li class="none-bg"><a href="#">Кофе Лунго</a></li>  					</ul>  					</div>  					<div class="block-pod-menu"></div>  				</div>  			  			</div>  		  		</div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>   <!-- Основной блок сайта -->   <div id="basic">      	<!-- Шапка сайта -->   <div id="head-site">   <a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>   <img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />   </div>      <!-- Верхнее меню сайта -->   <div id="menu-top">   <div class="bg-1">   <ul>   <li><a href="#">О нас</a></li>   <li><a href="#">Ассортимент</a></li>   <li><a href="#">Отзывы</a></li>   <li><a href="#">Забронировать столик</a></li>   <li><a href="#">Наши клиенты</a></li>   <li class="none-bg"><a href="#">Контакты</a></li>   </ul>   </div>   <div class="bg-2"></div>   </div>      <!-- Левое меню и Контент -->   <div id="content">      	<!-- Контент - правый блок -->  		<div class="right">   <h1>Кофе Американо</h1>   <p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>      <p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>      <img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />   <img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />   <img src="/images/img3.png" alt="" title="" />      <p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>      <p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>      <p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>      <p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>     		</div>  		   		<!-- Левое меню - левый блок блок -->  		<div class="left">  			<div id="left-menu">  				<div class="block-nad-menu"></div>  				<div class="block-menu">  				<ul>  				<li><a href="#">Кофе Айриш</a></li>  				<li><a href="#">Кофе Американо</a></li>  				<li><a href="#">Кофе Глясе</a></li>  				<li><a href="#">Кофе Диппио</a></li>  				<li><a href="#">Кофе Капучино</a></li>  				<li><a href="#">Кофе Кон Панна</a></li>  				<li><a href="#">Кофе Коретто</a></li>  				<li><a href="#">Кофе Латте</a></li>  				<li class="none-bg"><a href="#">Кофе Лунго</a></li>  				</ul>  				</div>  			<div class="block-pod-menu"></div>  			</div>     		</div>      </div>      </div>  </body>  </html>

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

/*Левое меню и Контент*/  #content {width:960px; padding:20px 0 0 0; }  .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}  .right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}  .left {width:250px; float:left;}  .block-nad-menu {width:240px; height:10px; background:#ff9c00;}  .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}  .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}  .left ul {margin:0; padding:10px 0 0 0; list-style:none;}  .left ul li {background:url(images/m3.png) no-repeat bottom left;}  .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}  .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}  li.none-bg {background:none!important;}

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

Создание html сайта в блокноте

Подвал сайта

После блока:

<!-- Левое меню - левый блок блок -->  <div class="left">  ...  </div>

Вставляем:

<div class="myclr"></div>  		  		<!-- Подвал -->  		<div id="podval">  			<div class="yellow"></div>  			<div class="p1">ООО “Кофейня” 2015г.<br/>  			г. Москва, ул Революционная 1а</div>  			<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>  			<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>  			  		</div>  		<div class="myclr"></div>

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  		<!-- Шапка сайта -->  		<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>  		  		<!-- Верхнее меню сайта -->  		<div id="menu-top">  		<div class="bg-1">  			<ul>  			<li><a href="#">О нас</a></li>  			<li><a href="#">Ассортимент</a></li>  			<li><a href="#">Отзывы</a></li>  			<li><a href="#">Забронировать столик</a></li>  			<li><a href="#">Наши клиенты</a></li>  			<li class="none-bg"><a href="#">Контакты</a></li>  			</ul>  		</div>  		<div class="bg-2"></div>  		</div>  		  		<!-- Левое меню и Контент -->  		<div id="content">  		  			<!-- Контент - правый блок -->  			<div class="right">  				<h1>Кофе Американо</h1>  				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>    				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>  				  				<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img3.png" alt="" title="" />    				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>    				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>    				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>    				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>  			  			</div>  			  			<!-- Левое меню - левый блок блок -->  			<div class="left">  				<div id="left-menu">  					<div class="block-nad-menu"></div>  					<div class="block-menu">  					<ul>  					<li><a href="#">Кофе Айриш</a></li>  					<li><a href="#">Кофе Американо</a></li>  					<li><a href="#">Кофе Глясе</a></li>  					<li><a href="#">Кофе Диппио</a></li>  					<li><a href="#">Кофе Капучино</a></li>  					<li><a href="#">Кофе Кон Панна</a></li>  					<li><a href="#">Кофе Коретто</a></li>  					<li><a href="#">Кофе Латте</a></li>  					<li class="none-bg"><a href="#">Кофе Лунго</a></li>  					</ul>  					</div>  					<div class="block-pod-menu"></div>  				</div>  			  			</div>  		  		</div>  		  		<div class="myclr"></div>  		  		<!-- Подвал -->  		<div id="podval">  			<div class="yellow"></div>  			<div class="p1">ООО “Кофейня” 2015г.<br/>  			г. Москва, ул Революционная 1а</div>  			<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>  			<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>  		</div>  		<div class="myclr"></div>  		  	</div>  </body>  </html>

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

/*Подвал*/  .myclr {clear:both; float:none; width:100%; height:1px;}  #podval {border-top:10px solid #4c281e; margin-top:20px;}  .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}  .p1 {float:left; width:300px; padding:15px 0 0 0;}  .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}  .p3 {float:right; width:30px; padding:15px 0 0 0;}

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

/*Каркас сайта*/  body {padding:0px; margin:0; background:#4c281e; font-size:14px; font-family:Arial, Sans-serif;}  #basic {width:960px; min-height:500px; margin:0 auto; padding:20px 20px 20px 20px; background:#fff;}  img {border:0;}  a {color:#ff9c00;}  a:hover {text-decoration:none;}    /*Шапка сайта*/  #head-site {height:70px;}  li.none-bg {background:none!important;}  .telefon {float:right;}    /*Верхнее меню сайта*/  #top-menu {width:960px; height:74px; }  .bg-1 {width:950px; height:64px; background:#4c281e url(images/m1.png) repeat-x; padding:0 0 0 10px;}  .bg-2 {width:940px; height:8px; background:#ff9c00; margin:0 auto;}  .bg-1 ul {margin:0; padding:0; list-style:none;}  .bg-1 ul li {float:left; background:url(images/m2.png) no-repeat right center; padding:0 2px 0 0;}  .bg-1 ul li a {display:block; height:40px; padding:24px 27px 0 27px; color:#ff9c00; text-decoration:none; text-transform:uppercase;}  .bg-1 ul li a:hover {color:#fff; background:#ff9c00;}    /*Левое меню и Контент*/  #content {width:960px; padding:20px 0 0 0; }    /*Контент - правый блок*/  .right { float:right; width:690px; padding:0 0 0 20px; text-align:justify;}  .right h1 {text-transform:uppercase; color:#4c281e; font-weight:normal; margin-top:0;}    /*Левое меню - левый блок*/  .left {width:250px; float:left;}  .block-nad-menu {width:240px; height:10px; background:#ff9c00;}  .block-pod-menu {width:240px; margin:0 0 0 10px; height:10px; background:#4c281e;}  .block-menu {width:240px; border-left:10px solid #ff9c00; background:#4c281e;}  .left ul {margin:0; padding:10px 0 0 0; list-style:none;}  .left ul li {background:url(images/m3.png) no-repeat bottom left;}  .left ul li a {display:block; width:195px; color:#fff; text-decoration:none; padding:10px 5px 10px 40px; background: url(images/marker.png) no-repeat 10px 8px;}  .left ul li a:hover {background:#ff9c00 url(images/marker.png) no-repeat 10px 8px;}      /*Подвал*/  .myclr {clear:both; float:none; width:100%; height:1px;}  #podval {border-top:10px solid #4c281e; margin-top:20px;}  .yellow {width:940px; height:5px; margin:0 auto; background:#ff9c00;}  .p1 {float:left; width:300px; padding:15px 0 0 0;}  .p2 {float:right; width:200px; text-align:right; padding:15px 20px 0 0;}  .p3 {float:right; width:30px; padding:15px 0 0 0;}

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

сайт на html в блокноте готов

 

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

Получился сайт, но при клике на ссылки меню ничего не происходит. Поэтому нам нужно придумать название страниц, прописать их в 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++ и добавляем нужные ссылки соответствующему меню, что бы получилось так:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">  <html>  <head>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <title>Мой первый сайт на html</title>   <link rel="stylesheet" href="/style.css" type="text/css" />  </head>  <body>  	<!-- Основной блок сайта -->  	<div id="basic">  	  		<!-- Шапка сайта -->  		<div id="head-site">  			<a href="#"><img src="/images/logo.png" alt="Кофейня" title="Кофейня" /></a>  			<img src="/images/telefon.png" alt="+7 (3537) 25-60-60" title="+7 (3537) 25-60-60" class="telefon" />  		</div>  		  		<!-- Верхнее меню сайта -->  		<div id="menu-top">  		<div class="bg-1">  			<ul>  			<li><a href="/o-nas.html">О нас</a></li>  			<li><a href="/assortiment.html">Ассортимент</a></li>  			<li><a href="/otzivi.html">otzivi.html</a></li>  			<li><a href="/zabronirovat-stolik.html">Забронировать столик</a></li>  			<li><a href="/nashi-klienty.html">Наши клиенты</a></li>  			<li class="none-bg"><a href="/kontakty.html">Контакты</a></li>  			</ul>  		</div>  		<div class="bg-2"></div>  		</div>  		  		<!-- Левое меню и Контент -->  		<div id="content">  		  			<!-- Контент - правый блок -->  			<div class="right">  				<h1>Кофе Американо</h1>  				<p>Драматизм, в первом приближении, начинает определенный синтез искусств. Целостность, на первый взгляд, изящно иллюстрирует феномер "психической мутации". Герменевтика, как бы это ни казалось парадоксальным, изящно продолжает онтогенез, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. </p>    				<p>Согласно теории "вчувствования", разработанной Теодором Липпсом, флегматик дает эйдос. Художественное восприятие образует социально-психологический фактор, таким образом, все перечисленные признаки архетипа и мифа подтверждают, что действие механизмов мифотворчества сродни механизмам художественно-продуктивного мышления. Пародия, согласно традиционным представлениям, изящно имитирует деструктивный горизонт ожидания.</p>  				  				<img src="/images/img1.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img2.png" alt="" title="" style="margin-right:40px;" />  				<img src="/images/img3.png" alt="" title="" />    				<p>Художественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>    				<p>Диалогичность готично образует художественный ритуал. Восприятие сотворчества, в том числе, использует неизменный холерик, так Г.Корф формулирует собственную антитезу. Беллетристика иллюстрирует принцип артистизма. </p>    				<p>Горизонт ожидания аккумулирует фактографический эдипов комплекс, таким образом, сходные законы контрастирующего развития характерны и для процессов в психике. Игровое начало, так или иначе, выстраивает конструктивный этикет, так Г.Корф формулирует собственную антитезу.</p>    				<p>Удожественный ритуал, по определению, иллюстрирует метод кластерного анализа. Сангвиник, так или иначе, изменяем. Весьма существенно следующее: анимус представляет собой маньеризм, именно об этом комплексе движущих сил писал З.Фрейд в теории сублимации.</p>  			  			</div>  			  			<!-- Левое меню - левый блок блок -->  			<div class="left">  				<div id="left-menu">  					<div class="block-nad-menu"></div>  					<div class="block-menu">  					<ul>  					<li><a href="/kofe-ayrish.html">Кофе Айриш</a></li>  					<li><a href="/kofe-amerikano.html">Кофе Американо</a></li>  					<li><a href="/kofe-glyase.html">Кофе Глясе</a></li>  					<li><a href="/kofe-dippio.html">Кофе Диппио</a></li>  					<li><a href="/kofe-kapuchino.html">Кофе Капучино</a></li>  					<li><a href="/kofe-kon-panna.html">Кофе Кон Панна</a></li>  					<li><a href="/kofe-koretto.html">Кофе Коретто</a></li>  					<li><a href="/kofe-latte.html">Кофе Латте</a></li>  					<li class="none-bg"><a href="/kofe-lungo.html">Кофе Лунго</a></li>  					</ul>  					</div>  					<div class="block-pod-menu"></div>  				</div>  			  			</div>  		  		</div>  		<div class="myclr"></div>  		  		<!-- Подвал -->  		<div id="podval">  			<div class="yellow"></div>  			<div class="p1">ООО “Кофейня” 2015г.<br/>  			г. Москва, ул Революционная 1а</div>  			<div class="p3"><img src="/images/stat.png" alt="" title="" /></div>  			<div class="p2">Создание сайтов веб-студия <a href="#">«Парампампам»</a></div>  			  		</div>  		<div class="myclr"></div>  		  	</div>  </body>  </html>

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

Ссылки меню и страницы html сайта

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

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

www.opengs.ru


Лучшие статьи читаем:

Default ThumbnailВаш с большой или маленькой буквы Default ThumbnailDropbox как пользоваться Default ThumbnailЧто такое движок сайта Семантические теги html5Семантические теги html5

You May Also Like

Стрелочка вверх

Стрелочка вверх

Где купить доменное имя

Где купить доменное имя

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.