Инструкция о том как написать сайт в блокноте и где получить знания для создания шедевров

Поэтапное создание сайтов бесплатно самостоятельно!

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

Вот все не хитрые три действия, которые мы с вами прямо сейчас выполним и получим на уникальный веб-сайт, который будет работать и приносить нам не только радость, но и прибыль!

Скачайте заготовленные мной для Вас исходные файлы сайта здесь. А теперь разархивируйте скачанный файл. В нем будет три файла: файл — index.html, папка — images и папка — css.

Первый шаг: Создание сайтов бесплатно самостоятельно — Создание шаблона сайта:

Эти действия мы с вами будем выполнять в самом удобном и популярном графическом редакторе — Photoshop CS6. Если у Вас его еще нет, то найти и скачать рабочую версию на русском языке Вы сможете вот здесь: СКАЧАТЬ Photoshop CS6

Теперь открываем свой Photoshop CS6 и создаем новые картинки для вашего нового сайта. В папке — images лежат три картинки: 1 — header_img, 2 — content_img и 3 — logo. Теперь по очереди замените каждую картинку своей, но учитывая при этом их размер и расширение. Вот пример на скриншоте, как изменить картинку:

как изменить картинку

Все просто! Поместите в свой Photoshop CS6 картинку и посмотрите ее параметры, нажав на вкладки «Изображение» и затем «Размер изображения«. Затем создайте новый документ с аналогичными размерами и поместите туда свою картинку. Теперь сохраните ее с расширением JPG и аналогичным этой картинке названием. Проделайте такие же действия со всеми картинками из папки images.

Теперь замените картинке в скачанной папке images на созданные вами картинки. Первый шаг — создание сайтов бесплатно самостоятельно Вы прошли!

Второй шаг: Создание сайтов бесплатно самостоятельно — Так называемая верстка:

Откройте скачанный файл — index.html в текстовом редакторе Notepad++ и замените текст на свой. Также не забудьте изменить ссылки на свои и поменяйте путь к файлу со стилями на свой. Также Вы можете в папке CSS в файле style.css изменить цвета фона, текста и т.д. На этом наша верстка закончена.

Третий шаг: — Закачиваем сайт на хостинг.

Полученные файла вам нужно заархивировать в формат zip и отправить на ваш хостинг в заготовленную заранее папку. Теперь разархивируйте его и удалите архив. Все, теперь ваш новый сайт будет доступен по назначенному вами адресу!

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

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

Жду ваших сообщений!

Пример создания простого одностраничного html веб сайта в блокноте

Итак, мы выбрали и установили текстовый редактор. Теперь нам нужно написать следующий код:

<html>
<head>
<meta name="description" content="Описание страницы" />
<meta name="keywords" content="ключевые слова" />
<title>Заголовок</title>
</head>
<body>
Здесь расположено основное содержимое страницы
<body>
</html>

Вот и все. Теперь достаточно просто сохранить этот файл под любым именем себе на компьютер.

По умолчанию документ сохраняется с расширением txt. Щелкаем на файле правой кнопкой мыши и нажимаем «переименовать». Меняем txt на html. Первая страница Вашего сайта создана! После этого, страница сайта будет открываться уже не в блокноте, а в браузере.

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

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

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

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

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

Кроссбраузерность и тестирование

Как упоминалось ранее, разные браузеры отображают элементы по-своему

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

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

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

ИЗОБРАЖЕНИЯ

Слайд шоуГалерея слайд шоуМодальное изображениеЛайтбоксОтзывчивая сетка изображенийСетка изображенийГалерея вкладокЭффект наведения на изображениеНаложение слайда на изображениеНаложение на изображениеНаложение заголовка на изображениеНаложение иконки на изображениеЭффект к изображениюЧерно-белое изображениеТекст на изображенииИзображение с текстовым блокомИзображение c прозрачным текстомИзображение на всю страницуФорма на изображенииИзображение герояРазмытое фоновое изображениеФоновое изображениеВыравненные изображенияОкругленные изображенияИзображение аватарОтзывчивое изображениеИзображение по центруМинитюрное изображениеЗнакомство с командойЛипкое изображениеЗеркальное изображениеДрожание изображенияГалерея портфолиоПортфолио фильтрЗум изображенияЛупа изображенияПолзунок сравнения

Размещение сайта в Интернете

Итак, мы разобрались с помощью пошаговой инструкции, как создать сайт в «Блокноте». Но сейчас его никто не видит! А ведь личные блоги создаются для того, чтобы делиться своей жизнью со всем миром.

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

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

Сюда следует также добавить HTML-файлы для остальных страниц сайта.

Подвал

Наконец, мы используем элемент <footer> или <div> чтобы создать нижний колонтитул:

<!— Подвал —><footer class=»w3-container w3-padding-64 w3-center w3-black
w3-xlarge»>  <a href=»#»><i class=»fa fa-facebook-official»></i></a> 
<a href=»#»><i class=»fa fa-pinterest-p»></i></a>  <a href=»#»><i
class=»fa fa-twitter»></i></a>  <a href=»#»><i class=»fa fa-flickr»></i></a> 
<a href=»#»><i class=»fa fa-linkedin»></i></a>  <p class=»w3-medium»>    Работает на <a href=»https://schoolsw3.com/w3css/index.php»
target=»_blank»>w3.css</a>  </p></footer>

Классы fa fa являются классами шрифтов и значков.

Для использования этих классов необходимо создать ссылку на библиотеку шрифтов Awesome:

<link rel=»stylesheet» href=»https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css»>

На практике

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

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

  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.

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

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

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

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

Следующие шаги

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

Заключение

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

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

Теги html head и body

Пара тегов html показывает браузеру, что данный документ является html – документом. Между ними располагается все содержимое нашей странички. В том числе и пары тегов head и body.

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

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

Мета теги и тег title

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

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

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

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

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

Структура любого сайта

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

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

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

  • <html></html> — это главный тэг, благодаря которому мы говорим сайту, что сейчас будем писать тут на языке HTML, так что пусть не беспокоится. С него должен начинаться сайт и им же закрываться.
  • <head></head> — сюда заносится служебная информация, например название документа, описание и многие другие. Ставится сразу после открытого тэга <html>.
  • <title></title> — Между этими значениями мы пишем заголовок страницы, то есть это название будет отображаться не в самом содержимом сайта, а во вкладке браузера. Данный тип ставится между <header> и </header>.
  • <body></body> — этот тэг отвечает за отображение содержимого на сайте. То есть всё, что вы напишите между этими тэгами будет отображаться на веб-странице.

Я так чувствую, что не все всё поняли, и у некоторых осталась каша в голове, поэтому я всё покажу вам на живом примере.

Работа с таблицами стилей CSS

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

* {
box-sizing:border-box;
}
.main {
width:1170px;
margin:0 auto;
border: 5px solid black;
}

Звездочка обозначает – любые элементы,
то есть все. Теперь рамки, отступы, не будут увеличивать ширину блоков, а для
установления правил, определяющих внешний вид веб-страницы, нам придётся
обратиться к классу main, задав ряд команд:

  • ширина контейнера;
  • отображение по центру;
  • добавление рамок чёрного цвета с каждой из сторон.

Теперь можно с помощью HTML задать внешний вид
ключевых структурных блоков:

.menu {
margin:0 0 40px 0;
padding:0px;
}
.menu li {
display:inline-block;
width:auto;
padding:7px 15px;
}
.footer {
background-color:#f4f4f4;
}

Принцип работы заключается в
обращении к существующим элементам, у каждого из которых есть персональный
идентификатор или класс. У тега класс прописывается в свойстве class=”myname” и в CSS файле записывается .myname, а идентификатор
по аналогии id=”myname2″
и #myname2.

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

  • ширина;
  • высота;
  • правило float: left – прижатие компонента к
    левой стороне родительского компонента.

Внимание! Идентичное свойство задаётся разделу с контентом,
прижимающемуся с той же стороны, но после колонки. После этого пишем блок
«Подвал»,  который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и  «Боковая колонка», считающиеся
плавающими

«Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both

После этого пишем блок
«Подвал»,  который по умолчанию не
высокий и имеет свойство clear, препятствующее наезду на разделы «Контент»
и  «Боковая колонка», считающиеся
плавающими. «Подвал» теперь будет видеть эти блоки и всегда размещаться под
ними, но при условии, что ему будет задана команда clear: both.

  1. Фон прописывается контейнеру по классу .content и
    задаётся сразу для всего сайта.
  2. Отдельно задаётся для каждого из блоков, для
    подвала, шапки, контента и т.д.

Рекомендую дать сайт общий цвет, воспользовавшись одним кодом:

.main {backgroun-color:#f9f9f9;}

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


Архивархив с готовым сайтом на HTML

Альтернативные методы бесплатного создания сайтов

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

  • Weblium;
  • UKit;
  • Nethouse;
  • UMI.

Альтернативой конструкторам служат CMS системы, пригодные для разработки
блогов, визиток и даже корпоративных ресурсов и форумов.  Наиболее популярны следующие из них:

  • WordPress;
  • Joomla;
  • InstantCms.

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

Создаём свою первую веб-страницу

В голове созрело решение сделать сайт самому? Поздравляю: вы стоите на пороге нового хобби, которое принесёт неплохую прибыль, если всё делать правильно. Однако, не будем заглядывать в будущее. Поговорим о ключевых тегах и структуре веб-страницы.

Создание сайта начинается с основных элементов. Рассмотрим каждый из них по отдельности.

DOCTYPE и <html>

Без них ни один браузер не сможет точно распознать веб-страницу и определить её тип

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

<head> и <title>

Эти теги предназначены для хранения служебной информации, которую считывают поисковые системы или браузеры. Здесь вы можете указать кодировку или подключить внешний файл CSS со стилями. В <title> указывается название сайта или каждой его страницы.

<body>

Всё, что вы видите в данный момент на моём блоге, находится в пределах парного тега. Изображения, текст, ссылки — эти элементы сайта отображаются благодаря <body>, который должен закрываться в конце html-документа.

Тема и структура

Прежде чем разбираться, как через «Блокнот» создать свой сайт на HTML, нужно четко представить себе, как этот сайт должен выглядеть. Для примера возьмем персональный блог некого Джона Доу.

Основные элементы структуры этой страницы:

  • шапка с логотипом и заголовком первого уровня;
  • горизонтальная панель навигации;
  • основное содержимое, представленное тремя статьями, каждая из которых состоит из заголовка, краткого описания и ссылки на полный текст;
  • подвал с указанием копирайта.

HTML-код этой страницы будет выглядеть так:

Для описания веб-страницы использованы семантические теги из стандарта HTML5: , , , , .

Пояснения к коду:

  • В шапке размещено изображение, обернутое в ссылку. С ее помощью из любого места сайта пользователь сможет вернуться на главную страницу.
  • Само изображение находится в папке на одном уровне с файлом . В коде для него с помощью атрибута строго задана ширина в 100 пикселей.
  • Заголовок оформлен как тег , что подчеркивает его значимость.
  • Навигационное меню представлено ненумерованным списком, а каждый его пункт является ссылкой на соответствующую страницу сайта. Сейчас этих разделов еще нет, но в будущем они могут быть созданы.
  • Для заголовков статей используется тег .
  • Ссылка «Смотреть» подробнее ведет на отдельную страницу с полным текстом статьи. Этих страниц пока также нет.
  • Весь контент обернут в общий блок с классом . Атрибуты классов обычно используются для стилизации элементов.

Сейчас страница выглядит вот так:

Этот вид не очень похож на запланированный. Чтобы исправить ситуацию, нужно добавить оформление.

Для этого потребуется создать еще один файл, рядом с и назвать его . В нем разместятся все необходимые стили.

На данный момент структура проекта выглядит так:

Пара слов об HTML

С одной стороны, создание универсального синтаксиса для разметки интернет-страниц позволило этому самому интернету перерасти из технологии объединения сетей до современного WEB’а со всем его многообразием. С другой стороны, так можно сказать про любой язык программирования – он помогает преобразовывать логические структуры в машинный код. Но для того, чтобы получить более-менее внятный результат нужно проделать огромный пласт работы: изучить и досконально знать синтаксис, а на это может уйти много времени и сил, накопить опыт по созданию своих скриптов и т.п., а это ещё больше времени.

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

Фактически это язык разметки, который позволяет выделять определённые элементы страницы и задавать для них специфичные параметры (размер, шрифт, тип: картинка это, текст, ссылка, видеофайл и т.д.).

Стилевое оформление

Продолжая разбираться, как создать сайт в «Блокноте», выходим на новый уровень — подключение листа стилей.

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

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

Полностью содержимое файла стилей будет выглядеть так:

Пояснения к стилям:

  • Для элемента body устанавливают базовые параметры шрифта: семейство без засечек и размер 16 пикселей.
  • Главный контейнер имеет постоянную ширину 960 пикселей и выровнен по центру.
  • Пункты списка меню объявлены строчно-блочными элементами, это позволяет разместить их в один ряд. Для ссылок убрано подчеркивание, теперь оно появляется только при наведении курсора.
  • Блок статьи имеет контрастный фон и небольшую тень.

Если обновить документ в браузере, можно увидеть его конечное представление. Первая веб-страница успешно создана!

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

Важнейшей концепцией интернета является связывание отдельных документов посредством ссылок. Как же в «Блокноте» создать сайт с гиперссылками?

Топиарная фигураЛось

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

Чтобы понять, как сделать сайт
html, надо уяснить правила использования разметки гипертекста. Данный формат,
помимо текста содержит теги, позволяющие задавать команды для браузера, который
руководствуясь ими, отображает информацию в определённом виде, например, как заголовок
первого уровня: <h1>…</h1>.

Файл index.html можно делать в программе «Блокнот», но лучше воспользуйтесь бесплатной программой Notepad++, подсвечивающей синтаксис и ошибки языка HTML. Создайте новый файл и сохраните его в формате *.html  Впоследствии его нужно открыть в окне браузера, который и отобразит представленный на веб-странице контент. Надо вставить в этот документ стандартный код:

<!DOCTYPE html>
<html>
<head>
<title>Заголовок страницы для браузера</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="main">
<h1>Мой заголовок страницы</h1>
<p>Мой текст.</p>
</div>
</body>
</html>

Теперь осталось подключить «style.css» – файл со стилями, а для этого придётся прописать перед тегом </head>:

<link rel="stylesheet" href="style.css">

У тега могут быть различные
свойства, например, класс, идентификатор, высота и другие. Но в современном
интернете обходятся классом, а любые параметры – цвет, размер, бордюр, фон и
другие – задаются в CSS
стилях через класс.

Верстка сайта на html

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

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

Я думаю, что здесь не сложно разобраться, что к чему.

10 строка – прописываем шапку сайта атрибутом background;

15, 16, 17, 18 – вставляем кнопки и прописываем ссылки;

22 строка – прописываем фон меню атрибутом background;

23 – 28 строчки – прописываем пункты меню сайта;

33 строка – текст сайта.

Оказывается, что ничего сложного в создании сайта на html нет.

В итоге мы узнали, как сделать сайт в html.

Да, это, конечно, простая страница, созданная на html.

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

Попробуйте и начните с малого, и если вы научитесь создавать простые страницы, со временем вы сможете создать нечто большее. Самое главное – не бросайте обучение, тогда в скором времени вы научитесь создавать профессиональные сайты.
Рекомендую:

Добавляем страницы

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

Пример кода для страницы фотоальбома ():

Основная структура, шапка, навигация и подвал полностью дублируют главную страницу, меняется лишь секция , которая теперь содержит галерею с несколькими блоками . Внутри каждого блока — картинка и подпись к ней.

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

Здесь используется css-прием, позволяющий разместить блоки по три в ряд и задать им ширину ровно в треть от ширины родительского контейнера.

Итоговый вид галереи представлен ниже.

Гиперссылки обеспечивают перемещение между страницами сайта: из меню можно попасть в «Фотоальбом», а кликнув на логотип — переместиться обратно на главную.

Оцените статью
Рейтинг автора
5
Материал подготовил
Илья Коршунов
Наш эксперт
Написано статей
134
Добавить комментарий