RUS | ANG | |

StepkinBlog.ru

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

HTML

CSS

PHP

WordPress

Bootstrap

Автор

Главная » Основы HTML » Создание простого мини сайта. Практика по пройдённому материалу

25.04.2016


22:32


15156


4


Создание простого мини сайта. Практика по пройдённому материалу

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

В конце практики, если вы учитель или воспитатель и вам нужен бесплатный мини сайт, вы сможете его скачать бесплатно – подарок от Костаневича Степана (StepkinBLOG.RU).
Итак, что нам нужно сделать?
Составим себе маленькое техническое задание.
Создадим мини сайт учителю либо воспитателю из 4 страниц.

  • 1 страница – «главная» - (index.html)
  • 2 страница – «обо мне»- (obo-mne.html)
  • 3 страница – «услуги»- (uslugi.html)
  • 4 страница – «обратная связь»- (obratnaja-svjaz.html).

Структура сайта будет такой:

Создание простого мини сайта. Практика по пройдённому материалу

План действий:

  1. Создание макета
  2. Фоновое оформление
  3. Создаем меню
  4. Заполняем ячейку «Лого», «Название сайта», «Контент» и «Футер»
  5. Сохранение и добавление остальных страницы
  6. Проверка работоспособности сайта

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" width="1200">
<tr>
<td colspan="2">Меню</td>
</tr>
<tr>
<td width="400">Лого</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" width="1200">
<tr>
<td colspan="2">Меню</td>
</tr>
<tr>
<td width="400">Лого</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" width="1200">

<tr bgcolor="#795548">
<td colspan="2">Меню</td>
</tr>

<tr bgcolor="#fff">
<td width="400">Лого</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>&#160;&#160;&#160;&#160;
<a href="obo-mne.html">ОБО МНЕ</a>&#160;&#160;&#160;&#160;
<a href="uslugi.html">УСЛУГИ</a>&#160;&#160;&#160;&#160;
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>

&#160; - спецсимвол пробела, который я поставил  между ссылками.

Вот код:

<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" width="1200">

<tr bgcolor="#795548">
<td colspan="2">
<a href="index.html">ГЛАВНАЯ</a>&#160;&#160;&#160;&#160;
<a href="obo-mne.html">ОБО МНЕ</a>&#160;&#160;&#160;&#160;
<a href="uslugi.html">УСЛУГИ</a>&#160;&#160;&#160;&#160;
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
</td>
</tr>

<tr bgcolor="#fff">
<td width="400">Лого</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»
В названии сайта пишем адрес сайта и кратное описание, например, так:

<h1><font size="+5">StepkinBLOG.RU</font></h1>
<p><font size="+2" color="#666">обучение основам HTML</font></p>

В ячейке «Контент» вставляем текст, заголовок страницы и картинки. Вот что-то подобное:

<h2>ГЛАВНАЯ</h2>
<p>Здесь будет текст для главной страницы</p>

В ячейке «Футер» пропишем копирайт:

<font color="#fff">StepkinBLOG.RU&#169;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.jpg" link="#00FF00" alink="#FFFF00" vlink="#EEE9E9">
<center>
<table border="1" cellpadding="20" cellspacing="0" width="1200">

<tr bgcolor="#795548">
<td colspan="2"><a href="index.html">ГЛАВНАЯ</a>&#160;&#160;&#160;&#160;
<a href="obo-mne.html">ОБО МНЕ</a>&#160;&#160;&#160;&#160;
<a href="uslugi.html">УСЛУГИ</a>&#160;&#160;&#160;&#160;
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
</td>
</tr>

<tr bgcolor="#fff">
<td width="400"><center><img src="image/logo.png"></center></td>
<td>
<center>
<h1><font size="+5">StepkinBLOG.RU</font></h1>
<p><font size="+2" color="#666">обучение основам HTML</font></p>
</center>
</td>
</tr>

<tr bgcolor="#fff">
<td colspan="2">
<h2>ГЛАВНАЯ</h2>
<p>Здесь будет текст для главной страницы</p>
</td>
</tr>

<tr bgcolor="#795548">
<td colspan="2"><font color="#fff"> StepkinBLOG.RU &#169; 2016</font></td>
</tr>

</table>
</center>
</body>
</html>

Результат:

Создание простого мини сайта. Практика по пройдённому материалу

Увеличить изображение?

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" width="1200">

<tr bgcolor="#795548">
<td colspan="2">
<a href="index.html">ГЛАВНАЯ</a>&#160;&#160;&#160;&#160;
<a href="obo-mne.html">ОБО МНЕ</a>&#160;&#160;&#160;&#160;
<a href="uslugi.html">УСЛУГИ</a>&#160;&#160;&#160;&#160;
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
</td>
</tr>

<tr bgcolor="#fff">
<td width="400"><center><img src="image/logo.png"></center></td>
<td>
<center>
<h1><font size="+5">StepkinBLOG.RU</font></h1>
<p><font size="+2" color="#666">обучение основам HTML</font></p>
</center>
</td>
</tr>

<tr bgcolor="#fff">
<td colspan="2">
<hr>
<h2>ГЛАВНАЯ</h2>
<p>Здесь будет текст для главной страницы</p>
</td>
</tr>

<tr bgcolor="#795548">
<td colspan="2"><font color="#fff"> StepkinBLOG.RU &#169; 2016</font></td>
</tr>

</table>
</center>
</body>
</html>

Результат будет вот таким:

Создание простого мини сайта. Практика по пройдённому материалу

Увеличить изображение?

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

Теперь внимание!!!
В ячейке «Контент» замените вот это:

<h2>ГЛАВНАЯ</h2>
<p>Здесь будет текст для главной страницы</p>

На вот это:

<h2>ОБО МНЕ</h2>
<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" width="1200">

<tr bgcolor="#795548">
<td colspan="2">
<a href="index.html">ГЛАВНАЯ</a>&#160;&#160;&#160;&#160;
<a href="obo-mne.html">ОБО МНЕ</a>&#160;&#160;&#160;&#160;
<a href="uslugi.html">УСЛУГИ</a>&#160;&#160;&#160;&#160;
<a href="obratnaja-svjaz.html">ОБРАТНАЯ СВЯЗЬ</a>
</td>
</tr>

<tr bgcolor="#fff">
<td width="400"><center><img src="image/logo.png"></center></td>
<td>
<center>
<h1><font size="+5">StepkinBLOG.RU</font></h1>
<p><font size="+2" color="#666">обучение основам HTML</font></p>
</center>
</td>
</tr>

<tr bgcolor="#fff">
<td colspan="2">
<hr>
<h2>ОБРАТНАЯ СВЯЗЬ</h2>
<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="Пример: stepkinblog@mail.ru" required /></p>
<p><input type="text" name="tel" pattern="\+([0-9]{1,3})(\([0-9]{2,3}\))-([0-9]{3})-([0-9]{2})-([0-9]{2})" placeholder="Ваш телефон" title="Пример: +380(93)-000-00-00"/></p>
<p><textarea name="quest" rows="6" cols="40" placeholder="Ваш вопрос"></textarea></p>
<input type="submit" name="subscribe" value="Отправить!">
</fieldset>
</form>
</td>
</tr>

<tr bgcolor="#795548">
<td colspan="2"><font color="#fff"> StepkinBLOG.RU &#169; 2016</font></td>
</tr>

</table>
</center>
</body>
</html>

6. Проверка работоспособности сайта
Можете посмотреть, как получилось.

[смотреть результат]

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

[скачать результат]

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

Удачи!

Создание простого мини сайта. Практика по пройдённому материалу



Случайные записи:

  1. Уведомления для веб-страниц. Основы bootstrap 3 для начинающих. Урок №16
  2. Основы bootstrap для начинающих. Урок №1
  3. Коды цветов в HTML. Основы HTML для начинающих. Урок №11
  4. Кнопки. Основы bootstrap 3 для начинающих. Урок №7
  5. Оформление ссылок в CSS. Основы CSS для начинающих. Урок №11

Последние записи рубрики:

  1. Приложение для смартфонов (андроид) – основы HTML
  2. Бесплатный курс по основам HTML
  3. Шпаргалка по HTML на русском языке
  4. Тесты HTML онлайн. Основы HTML для начинающих

4 ответа(ов) на статью: “Создание простого мини сайта. Практика по пройдённому материалу”

  1. Samur says:
    25.11.2018 в 06:50

    Большое спасибо, Броу! Полностью прошел твой курс по HTML) Очень много твоих сил вложено в этот образовательный проект, было очень познавательно и интересно, благодарен тебе! Щас уже 07:45 (утро), еще даже не лег спать))) Буду проходить твои курсы и дальше!

    Ответить

    Степка ответил(а) на комментарий:
    20 декабря, 2018 at 11:04

    Пожалуйста! Приятно, что Вы оценили мой труд.
    Постараюсь и я набраться сил для продолжения в написании бесплатных курсов по php, wordpress, JS

    Ответить

  2. Александр says:
    14.12.2019 в 20:36

    КЛАСС!!!!!КЛАСС!!!КЛАСС!!!
    Кучу сайтов облазил,чтобы научиться хоть малюсенький сайт сообразить. Везде либо заумно объясняют, либо запутано. А тут - просто шикарно!!! Время потрачено не впустую!
    БРАВО!!! ТАК ДЕРЖАТЬ!!!
    P.S. наконец-то сайт свой смогу сделать, пусть пока не суперский, но и это круто)

    Ответить

    Степка ответил(а) на комментарий:
    28 января, 2020 at 17:24

    Александр, спасибо!!!

    Ответить

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

  • Разные темы:

    • Реклама на блоге:

    Последние записи на блоге:

    Мои цели на
    2019 год:

    Довести количество статей до 150

    Доделать этот блог

    Закончить тему «Основы CSS»

    Закончить тему «Основы PHP»

    Начать тему «Основы JavaScript»

    Добиться посещаемости 500 чел/сутки

    Облако меток:

    bootstrap CSS HTML php WordPress Итог работы дополнение основы отдых праздники

    Статистика:

    Записей: 111
    Страниц: 3
    Рубрик: 9
    Меток: 11
    Комментариев: 347

    StepkinBlog.com © 2023

    Автор Костаневич Степан.

    Заказать сайт

    html css php wordpress bootstap Автор