Создание простого мини сайта. Практика по пройдённому материалу
Главная » Основы HTML » Создание простого мини сайта. Практика по пройдённому материалу
25.04.2016
Всем привет!
Вот и подошли мы к завершению изучения основ HTML.
Сегодня будем учиться использовать на практике знания, которые вы получили на моем курсе и вместе попробуем сделать простой мини сайт на чистом HTML для воспитателя или учителя.
В конце практики, если вы учитель или воспитатель и вам нужен бесплатный мини сайт, вы сможете его скачать бесплатно – подарок от Костаневича Степана (StepkinBLOG.RU).
Итак, что нам нужно сделать?
Составим себе маленькое техническое задание.
Создадим мини сайт учителю либо воспитателю из 4 страниц.
- 1 страница – «главная» — (index.html)
- 2 страница – «обо мне»- (obo-mne.html)
- 3 страница – «услуги»- (uslugi.html)
- 4 страница – «обратная связь»- (obratnaja-svjaz.
Структура сайта будет такой:
План действий:
- Создание макета
- Фоновое оформление
- Создаем меню
- Заполняем ячейку «Лого», «Название сайта», «Контент» и «Футер»
- Сохранение и добавление остальных страницы
- Проверка работоспособности сайта
1. Создание макета
Открываем блокнот и вставляем стандартный HTML код c кодировкой «windows-1251»:
<html> <head> <title> Практика по основам HTML на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> </body> </html>
Про кодировку сайта можете почитать здесь.
Теперь создадим макет сайта. Макет сайта будем создавать из таблицы.
Ширина таблицы 1200 px.
Вот так будет выглядеть таблица:
<table border="1" cellpadding="20" cellspacing="0"> <tr> <td colspan="2">Меню</td> </tr> <tr> <td>Лого</td> <td>Название сайта</td> </tr> <tr> <td colspan="2">Контент</td> </tr> <tr> <td colspan="2">Футер</td> </tr> </table>
В результате у нас выйдет вот такой макет:
Увеличить изображение?
Вроде бы неплохо получилось, вот только весь макет сдвинут влево, давайте его отцентрируем.
Я думаю, вы помните, чтобы выровнять таблицу по центру, нужно использовать тег <center></center>:
<html> <head> <title> Практика по основам HTML на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> <center> <table border="1" cellpadding="20" cellspacing="0"> <tr> <td colspan="2">Меню</td> </tr> <tr> <td>Лого</td> <td>Название сайта</td> </tr> <tr> <td colspan="2">Контент</td> </tr> <tr> <td colspan="2">Футер</td> </tr> </table> </center> </body> </html>
Во, теперь другое дело:
Увеличить изображение?
2. Фоновое оформление
Здесь нам пригодится картинка для заднего фона.
Создайте папку «image»и закиньте туда картинку «fon. jpg»:
[скачать картинку]
<html> <head> <title> Практика по основам HTML на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body background="image/fon.jpg"> <center> <table border="1" cellpadding="20" cellspacing="0"> <tr bgcolor="#795548"> <td colspan="2">Меню</td> </tr> <tr bgcolor="#fff"> <td>Лого</td> <td>Название сайта</td> </tr> <tr bgcolor="#fff"> <td colspan="2">Контент</td> </tr> <tr bgcolor="#795548"> <td colspan="2"><font color="#fff">Футер</font></td> </tr> </table> </center> </body> </html>
В результате выйдет вот такой неплохой макетик:
Я думаю, вы помните, что чтобы сделать фоновую картинку, нужно использовать атрибут «background», чтобы закрасит ячейку фоновым цветом, используем атрибут «bgcolor».
3.Создаем меню
Нам нужно создать ссылки на такие страницы, как:
- 1 страница – «главная» — (index.html)
- 2 страница – «обо мне»- (obo-mne.html)
- 3 страница – «услуги»- (uslugi.html)
- 4 страница – «обратная связь»- (obratnaja-svjaz.html).
<a href="index.html">ГЛАВНАЯ</a>     <a href="obo-mne.html">ОБО МНЕ</a>     <a href="uslugi.html">УСЛУГИ</a>     <a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
  — спецсимвол пробела, который я поставил между ссылками.
Вот код:
<html> <head> <title> Практика по основам HTML на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body background="image/fon.
jpg" link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
<center>
<table border="1" cellpadding="20" cellspacing="0">
<tr bgcolor="#795548">
<td colspan="2">
<a href="index.html">ГЛАВНАЯ</a>    
<a href="obo-mne.html">ОБО МНЕ</a>    
<a href="uslugi.html">УСЛУГИ</a>    
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
</td>
</tr>
<tr bgcolor="#fff">
<td>Лого</td>
<td>Название сайта</td>
</tr>
<tr bgcolor="#fff">
<td colspan="2">Контент</td>
</tr>
<tr bgcolor="#795548">
<td colspan="2"><font color="#fff">Футер</font></td>
</tr>
</table>
</center>
</body>
</html>
Результат:
Увеличить изображение?
4.
Заполняем ячейку «Лого», «Название сайта», «Контент» и «Футер»
В ячейке «Лого» вставим картинку «logo.png»:
[скачать картинку]
Скачайте картинку и залейте в папку «image»
В названии сайта пишем адрес сайта и кратное описание, например, так:
<h2><font size="+5">StepkinBLOG.RU</font></h2> <p><font size="+2" color="#666">обучение основам HTML</font></p>
В ячейке «Контент» вставляем текст, заголовок страницы и картинки. Вот что-то подобное:
<h3>ГЛАВНАЯ</h3> <p>Здесь будет текст для главной страницы</p>
В ячейке «Футер» пропишем копирайт:
<font color="#fff">StepkinBLOG.RU©2016</font>
Код будет вот таким:
<html> <head> <title> Практика по основам HTML на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body background="image/fon.RU © 2016</font></td> </tr> </table> </center> </body> </html>
jpg" link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
<center>
<table border="1" cellpadding="20" cellspacing="0">
<tr bgcolor="#795548">
<td colspan="2"><a href="index.html">ГЛАВНАЯ</a>    
<a href="obo-mne.html">ОБО МНЕ</a>    
<a href="uslugi.html">УСЛУГИ</a>    
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
</td>
</tr>
<tr bgcolor="#fff">
<td><center><img src="image/logo.png"></center></td>
<td>
<center>
<h2><font size="+5">StepkinBLOG.RU</font></h2>
<p><font size="+2" color="#666">обучение основам HTML</font></p>
</center>
</td>
</tr>
<tr bgcolor="#fff">
<td colspan="2">
<h3>ГЛАВНАЯ</h3>
<p>Здесь будет текст для главной страницы</p>
</td>
</tr>
<tr bgcolor="#795548">
<td colspan="2"><font color="#fff"> StepkinBLOG.
Результат:
Увеличить изображение?
5. Сохранение и добавление остальных страниц
Для начала сделаем border=»о» для таблицы, мне кажется, так лучше будет. И добавим перед заголовком линию <hr>:
<html> <head> <title> Практика по основам HTML на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body background="image/fon.jpg" link="#00FF00" alink="#FFFF00" vlink="#EEE9E9"> <center> <table border="0" cellpadding="20" cellspacing="0"> <tr bgcolor="#795548"> <td colspan="2"> <a href="index.html">ГЛАВНАЯ</a>     <a href="obo-mne.html">ОБО МНЕ</a>     <a href="uslugi.html">УСЛУГИ</a>     <a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a> </td> </tr> <tr bgcolor="#fff"> <td><center><img src="image/logo.png"></center></td> <td> <center> <h2><font size="+5">StepkinBLOG.RU</font></h2> <p><font size="+2" color="#666">обучение основам HTML</font></p> </center> </td> </tr> <tr bgcolor="#fff"> <td colspan="2"> <hr> <h3>ГЛАВНАЯ</h3> <p>Здесь будет текст для главной страницы</p> </td> </tr> <tr bgcolor="#795548"> <td colspan="2"><font color="#fff"> StepkinBLOG.RU © 2016</font></td> </tr> </table> </center> </body> </html>
Результат будет вот таким:
Увеличить изображение?
Сохраните файл как «index.
html».
Теперь внимание!!!
В ячейке «Контент» замените вот это:
<h3>ГЛАВНАЯ</h3> <p>Здесь будет текст для главной страницы</p>
На вот это:
<h3>ОБО МНЕ</h3> <p>Здесь будет текст для страницы ОБО МНЕ</p>
Жмите в блокноте не сохранить, а «Сохранить как…»
И даете файлу название «obo-mne.html».
Такой процесс делаем к остальным пунктам меню:
«услуги»- (uslugi.html)
«обратная связь»- (obratnaja-svjaz.html)
В результате у вас должно получиться 4 файла и папка «image»:
На страницу «обратная связь»- (obratnaja-svjaz.html) можно вставить форму:
<html> <head> <title> Практика по основам HTML на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body background="image/fon.
jpg" link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
<center>
<table border="0" cellpadding="20" cellspacing="0">
<tr bgcolor="#795548">
<td colspan="2">
<a href="index.html">ГЛАВНАЯ</a>    
<a href="obo-mne.html">ОБО МНЕ</a>    
<a href="uslugi.html">УСЛУГИ</a>    
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
</td>
</tr>
<tr bgcolor="#fff">
<td><center><img src="image/logo.png"></center></td>
<td>
<center>
<h2><font size="+5">StepkinBLOG.RU</font></h2>
<p><font size="+2" color="#666">обучение основам HTML</font></p>
</center>
</td>
</tr>
<tr bgcolor="#fff">
<td colspan="2">
<hr>
<h3>ОБРАТНАЯ СВЯЗЬ</h3>
<form method="post" action=" ">
<fieldset>
<legend>Форма обратной связи </legend>
<p><inputtype="text" name="name" pattern="[А-Яа-яЁё]{4,}" placeholder="Ваше Имя" title="Имя должно быть на русском.
Пример: Степа, Петя, Вася, Оля"/></p>
<p><input type="email" name="email" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="Ваш E-mail" title="Пример: 6. Проверка работоспособности сайта
Можете посмотреть, как получилось.
[смотреть результат]
А те, кто пришел сюда случайно по запросу «создать свой мини сайт бесплатно для воспитателя или учителя», могут скачать результат сегодняшней практики:
[скачать результат]
Поздравляю всех, кто проходил мои курсы от самого начала до сегодняшнего момента, с окончанием изучения основ HTML. С этой минуты вы уже можете создавать простые мини сайты.
Если вы желаете усовершенствоваться в создании сайтов, рекомендую пройти курс CSS.
Удачи!
Размещение на GitHub Pages | Основы HTML, CSS и веб-дизайна
Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером
Хостинг
Мы уже изучили вкратце такие темы, как хостинг и HTTP-запросы в уроке Хостинг курса «Введение в веб-разработку». Стоит освежить память, перечитав тот урок, если следующие термины вам не сразу понятны:
- хостинг
- сервер
- IP-адрес
- хост
- DNS
- HTTP
- whois
Сегодня мы хотим разместить нашу простую HTML-страницу в интернете таким образом, чтобы она стала доступна всем.
Если бы мы писали полноценное веб-приложение с какой-то логикой, например, с регистрацией и авторизацией пользователей, отправкой и сохранением информации, то нам требовалось бы достаточно комплексное решение с серверами и, возможно, базами данных. Конечному посетителю в любом случае будет приходить HTML, но на стороне сервера могут происходить самые разные сложные операции.
Но у нас простой случай: есть один HTML-файл и один CSS-файл, нет никакой бизнес-логики или взаимодействий. Достаточно чтобы какая-то машина, подключённая к интернету, отдавала содержимое этих файлов в браузер пользователя по запросу.
По сути это та же операция, что происходит у вас на компьютере, когда вы просто открываете свой локальный HTML-файл в браузере:
- Операционная система делает запрос в жёсткий диск или оперативную память.
- Жёсткий диск или оперативная память отдают содержимое файла.
- Операционная система направляет содержимое файла в программу «браузер».
- Браузер обрабатывает файлы (потому что знает как это делать, ведь файлы написаны по стандартам HTML и CSS) и формирует внешний вид.
Всё, что мы хотим сделать, это перенести файлы с локального компьютера на удалённый, и сделать так, чтобы к нему можно было обращаться по протоколу HTTP через интернет. В итоге получится так:
GitHub
Если вы проходите наши курсы по порядку, в рамках программ обучения (например, «Бэкенд JS-программист» или «Фронтенд JS-программист»), то в скором будущем вас ожидает курс по Git. Один из уроков там будет посвящён GitHub.
GitHub — это хранилище кода. Кроме этого GitHub предоставляет бесплатный хостинг для статических файлов — как раз то, что нам нужно. Этот сервис называется GitHub Pages.
Страницы, размещённые на GitHub Pages, могут быть доступны на их поддомене (например, https://guides.hexlet.io/ru/) или на домене второго уровня (например, мой блог https://rakh.im/), если у вас есть свой домен.
Для полноценной работы с GitHub необходимо хотя бы базовое понимание Git. Но если вы совсем не знакомы с этой темой — ничего страшного! Прямо сейчас, чтобы разместить страницу на GitHub Pages, нам достаточно следовать простому алгоритму.
Начнём:
- Зарегистрируйтесь на https://github.com/, если ещё не сделали этого.
- Создайте новый репозиторий с именем
username.github.io, гдеusername— ваш ник на GitHub. - Создайте новый файл. Когда репозиторий не пуст, то в верхнем правом углу есть кнопка «Create New File», но сейчас, когда ещё нет ни одного файла, создать первый можно по прямой ссылке
https://github.com/username/username.github.io/new/master, гдеusername— ваш ник. - Введите имя index.html и скопируйте туда содержание файла index.html, который у вас получился в предыдущем уроке.
- Нажмите кнопку «Commit new file».
- Повторите то же самое для файла style.css.
- Подтвердите публикацию на GitHub Pages. В настройках репозитория: Settings -> Раздел Options -> Секция GitHub Pages.
- Через несколько мгновений страница станет доступна по вашему адресу
https://username.github.io
(Если вы умеете работать с Git и собираетесь делать всё локально, то при создании репозитория советую выбрать «Initialize this repository with a README» — в таком случае репозиторий сразу создастся непустым, и его можно будет клонировать.
В противном случае нужно будет инициализировать репозиторий локально и добавить удалённый репозиторий).
Вам ответят команда поддержки Хекслета или другие студенты.
HTML и CSS: построение на одном странице веб-сайта
Просмотр
Chevron RightКомпьютерная наука
ПравоМобильная и веб-разработка
Заполненные звезды StarFiled Starfilled Starhalf Faded Star4.6
Звезды
428 Ratings
70003
428 Ratings
.
12 918 уже зарегистрированы
В этом управляемом проекте вы будете:
создавать полностью структурированные веб-страницы HTML с наиболее распространенными элементами, такими как разделы, изображения, гиперссылки, текст и т. д.
Создание таблиц стилей, которые устанавливают и изменяют различные свойства стиля выбранного элемента HTML
Описание блочной модели CSS и свойства отображения CSS, которые являются важными понятиями для веб-дизайнеров Видео с разделенным экраном
Английский
Только рабочий стол
В этом часовом курсе вы узнаете, как создать одностраничный веб-сайт для воображаемого турагента с помощью HTML и CSS.
HTML и CSS являются основой для создания любого веб-сайта или веб-приложения и являются незаменимыми знаниями для любого веб-разработчика. HTML позволяет создавать макет и структуру веб-страниц, в то время как CSS обогащает HTML-страницы, добавляя к ним стиль и ощущение. Со временем вы сможете использовать полученные знания в очень сложных проектах, так или иначе использующих эти технологии.
Примечание. Этот курс лучше всего подходит для учащихся, проживающих в регионе Северной Америки. В настоящее время мы работаем над тем, чтобы предоставить такой же опыт в других регионах.
Навыки, которые вы разовьете
В видео, которое воспроизводится на разделенном экране с вашей рабочей зоной, инструктор проведет вас по следующим шагам:
Введение
Добавление элементов HTML
- Завершение 90 Макет HTML
Начало оформления страницы
Блочная модель
Свойство отображения CSS
Завершение
Ваше рабочее пространство представляет собой облачный рабочий стол прямо в вашем браузере, загрузка не требуется.
Преподаватель пошагово ведет вас на разделенном экране
Халед М. Аттиа
Ассистент лектора
Компьютерная инженерия
28 820 Учащиеся
4 Курсы
Отзывы
4.6
Заполненная звездаЗаполненная звездаЗаполненная звездаЗаполненная звездаНаполовину заполненная звезда03 отзыва0006 5 stars
68.69%
4 stars
22.42%
3 stars
6.54%
2 stars
1.86%
1 star
0.46%
ЛУЧШИЕ ОТЗЫВЫ ИЗ HTML И CSS: СОЗДАНИЕ ОДНОСТРАНИЧНОГО ВЕБ-САЙТА0003 Filled StarFilled StarFilled StarFilled StarFilled Star
by JL
17 сентября 2020 г.
Это было прямо к делу, объяснение вместе с проектом было в самый раз.
by PT
10 октября 2020 г.
Преподаватель говорит быстро и не может вовремя выполнить часть кода. экран слишком маленький и его трудно смотреть.
Filled StarFilled StarFilled StarFilled StarStarby DZ
16 декабря 2020 г.
простая цель для простых первых шагов в HTML и CSS
Просмотреть все отзывы
Купив управляемый проект, вы получите все необходимое для выполнения управляемого проекта, включая доступ к рабочему пространству облачного рабочего стола через веб-браузер, который содержит файлы и программное обеспечение, необходимые для начала работы, а также пошаговые видеоинструкции от эксперта в данной области.
Поскольку ваша рабочая область содержит облачный рабочий стол, размер которого подходит для ноутбука или настольного компьютера, управляемые проекты недоступны на вашем мобильном устройстве.
Инструкторы управляемых проектов — это эксперты в данной области, которые имеют опыт работы с навыками, инструментами или областями своего проекта и страстно желают поделиться своими знаниями, чтобы повлиять на миллионы учащихся по всему миру.
Вы можете загрузить и сохранить любой из созданных вами файлов из управляемого проекта. Для этого вы можете использовать функцию «Файловый браузер» во время доступа к своему облачному рабочему столу.
Финансовая помощь не предоставляется для управляемых проектов.
Аудит недоступен для управляемых проектов.
В верхней части страницы вы можете нажать на уровень опыта для этого управляемого проекта, чтобы просмотреть необходимые знания.