Создаём свой сайт из трёх страниц
В этом уроке, мы создадим сайт состоящий из трёх страниц. Но перед этим, для вашего же удобства, вам нужно создать папку на Рабочем столе, папку можете назвать Мой сайт.
Закиньте в папку Мой сайт, все файлы которые у нас уже есть, а именно два HTML-файла:
index.html — Статья о снежном барсе,polyarnyi-volk.html — Статья о полярном волке,
и две фотографии:
irbis.jpgpolyarnyi-volk.jpg
Сделаем третью страницу, она будет посвящена полярной сове.
Данные третьей страницы
Создайте в папке Мой сайт HTML-файл:
polyarnaya-sova.html
Название страницы
Страница о полярной сове
<title> </title>, сделайте:Страница о полярной сове
Внедрите CSS-код:
<style>
h1 {
color: green;
font-family: Arial;
}
p {
color: blue;
font-size: 19px;
width: 60%;
}
</style>
Заголовок статьи
Полярная сова
<h1> </h1>:Полярная сова
Фотография
<img>:
Статья состоящая из двух абзацев
<p> </p>:Полярная сова (белая сова) птица из семейства совиных. Самая крупная птица, из отряда совиных, в тундре. Голова у белой совы круглая, глаза жёлтые, длина тела достигает 70 см, масса 3 кг, размах крыльев 165 см. Ареал распространения - территория тундры: Евразия, Северная Америка, Гренландия. Полярная сова обитает обычно в открытой местности, в лесах встречается редко. Питается в основном, мелкими грызунами: леммингами, в год может съесть более 1600 леммингов. Также в рацион совы входят зайцы, мелкие хищники, птицы, рыба и даже падаль.
В итоге, вы должны получить следующую страницу.
Соединяем ссылками страницы сайта
На данный момент у нас есть три HTML-файла, в которых находятся статьи описывающие различных северных животных:
index.html — Статья о снежном барсе,polyarnyi-volk.html — Статья о полярном волке,polyarnaya-sova.html — Статья о полярной сове.
Теперь нам нужно соединить их ссылками, чтобы получился сайт. Ссылки делать вы уже научились, поэтому я вам дам лишь HTML-код, который нужно разместить перед закрывающим тегом
</body>, в каждом из трёх HTML-документов:<a href="index.html">Снежный барс</a> <a href="polyarnyi-volk.html">Полярный волк</a> <a href="polyarnaya-sova.html">Полярная сова</a>
В итоге, ваш сайт должен выглядеть следующим образом. Нажимая по ссылкам, вы будете попадать на страницы: снежного барса, полярного волка и полярной совы.
<!DOCTYPE html>
Как вы уже знаете, каждый HTML-документ начинается с тега
<html>, данное объяснение было для новичков. На самом деле, каждый HTML-документ, должен начинаться со строки <!DOCTYPE html>, а уже под ним ставится тег <html>. Строка <!DOCTYPE html> даёт понять браузеру, что язык HTML используемый в документе, ориентирован на последнюю, пятую версию языка, т.е. на HTML5.
Конечный HTML-документ, например файла
index.html, в итоге должен выглядеть следующим образом:<!DOCTYPE html> <html> <head> <title>Страница о снежном барсе</title> <style> h1 { color: green; font-family: Arial; } p { color: blue; font-size: 19px; width: 60%; } </style> </head> <body> <h1>Снежный барс</h1> <img src="irbis.jpg"> <p> Снежный барс (ирбис, ак барс) - крупное хищное млекопитающее из семейства кошачьих. Обитает в горных массивах Афганистана, Бирмы, Бутана, Индии, Казахстана, Кыргызстана, Китая, Монголии, Непала, Пакистана, России, Таджикистана и Узбекистана. Ирбис отличается тонким, длинным, гибким телом, относительно короткими лапами, небольшой головой и очень длинным хвостом. Достигая вместе с хвостом длины 200-230 см, весит до 55 кг. Окраска меха светлая дымчато-серая с кольцеобразными и сплошными тёмными пятнами.</p> <p> Охотится снежный барс в основном на горных козлов и баранов, также в его рационе встречаются кабаны, фазаны и даже суслики. В силу труднодоступности местообитания вида, ирбисы до сих пор остаются малоизученными. Однако по приблизительным оценкам их количество варьируется примерно около 10 тысяч особей. По состоянию на 2013 год охота на ирбисов запрещена.</p> <a href="index.html">Снежный барс</a> <a href="polyarnyi-volk.html">Полярный волк</a> <a href="polyarnaya-sova.html">Полярная сова</a> </body> </html>
Всегда добавляйте строку
<!DOCTYPE html>, в начале каждого HTML-документа.Регистрация домена и хостинг
Итак, у вас в папке Мой сайт хранятся три HTML-файла:
index.htmlpolarnayi-volk.htmlpolarnaya-sova.html
и три фотографии:
irbis.jpgpolyarnyi-volk.jpgpolyarnaya-sova.jpg
Для того чтобы разместить всё это в интернете, нужно сначала зарегистрировать себе имя сайта (домен), наиболее качественная компания по регистрации доменов, на данный момент это Вебнеймс:
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU, нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год).
webnames.ru — компания регистрации доменов. Обычно чтобы зарегистрировать домен в зоне .RU, нужно платить около 100 рублей, в первый в год и около 500р в последующие года (оплата производится 1 раз в год).
После регистрации имени сайта, нужно купить себе хостинг, наиболее качественная компания на данный момент это Бегет:
Beget.ru — компания предоставляющая хостинг для сайтов. В компании Бегет, можно разместить сайт бесплатно или платно от 100 до 385 рублей в месяц. Разместить сайт бесплатно!
Beget.ru — компания предоставляющая хостинг для сайтов. В компании Бегет, можно разместить сайт бесплатно или платно от 100 до 385 рублей в месяц. Разместить сайт бесплатно!
Хостинг — это размещение сайта в интернете.
Когда вы разместите сайт в интернете, то при наборе имени сайта, например gabdrahimov.ru, первым откроется файл
index.html Это своего рода главная страница сайта, с которой посетитель начинает путешествие по вашему ресурсу.
В этом разделе, я лишь поверхностно описал что нужно сделать, чтобы разместить сайт в интернете. Более подробней о том, как это сделать, я опишу чуть позже.
В принципе на этом введение в создание сайтов закончено, вам осталось лишь прочитать последний урок, начального цикла учебника HTML.
Немає коментарів:
Дописати коментар