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

Я вас всех радостно приветствую, мои дорогие друзья. Сегодня с вами как всегда Дмитрий Костин, и у меня для вас небольшой сюрприз, а именно экзамен! Хотя ладно, насчет экзамена я пошутил. Просто я решил закончить уроки по основам html и в этой статье применить знания, полученные на предыдущих уроках на практике.

Я хочу вам показать простой пример создания сайта html в блокноте Notepad++ за считанные минуты. Конечно сайтик мы создадим простой, не замороченный, быстрый, и я бы даже сказал лоховской (простите за мой французский))). Но все же, благодаря этому вы сможете закрепить полученные знания. Это действительно важно в этом деле.

Только не забудьте при создании нового документа в Notepad++ перекодировать его в UTF-8.

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

Вы спросите: «А почему так мало уроков? В html гораздо больше тегов и атрибутов». Да-да, вы действительно правы, но время идет и многие теги уже не работают в последних версиях html, либо же просто считаются ненужными и ими никто не пользуется.

Вот например есть тег <font>, который отвечает за шрифт. Благодаря ему и атрибутам, можно изменять внутренний контент, например размер шрифта, цвет, сам шрифт. Но сегодня, как я уже и сказал, <font> не принято использовать. Такой код уже не будет являться валидным. Вместо этого мы используем CSS. Это намного удобнее и практичнее. Ну да ладно. Давайте лучше приступим созданию сайта.

Скачайте отсюда необходимые файлы для работы. Внутри вас:

  • 3 документа в формате word
  • 1 текстовый документ с заданием
  • папка img с необходимыми изображениями
  • 3 html-файла с готовой работой

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

Структура

Самым первым заданием вы должны сделать стандартную структуру html-документа. Помните, как ее делать? Это я рассказывал еще тогда, когда мы создавали наш первый сайт html в блокноте. Да-да. Вы правильно поняли. Вам всего лишь нужно поставить главные теги.

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

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

И кстати, сделайте три разные копии со структурой и обзовите их как-нибудь index.html, table.html, obo-mne.html.

Заголовки

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

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

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

Итак, всё сделали? На всех страницах? Молодцы! Так держать. Теперь переходим к следующему заданию.

Абзацы

В этом задании вам нужно правильно разделить текст на абзацы. А как это сделать? Это мы проходили в данной статье, так что если вы не помните, то обязательно повторите. Но на самом деле это легче легкого. Просто заключаем нужные абзацики в парные теги <p></p>.

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

Меню

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

Но сегодня мы делаем таким топорным методом чисто для примера, не более того. Так что зайдите в папку img. Там вы увидите 3 файла в формате png. Их-то нам и нужно будет вставить на каждую страницу нашего html сайта. Для этого вам надо открыть страницу index.html в блокноте (Notepad++) и прямо после открывающего тега <body> поставить три строчки:

<img src="img/index.png">
<img src="img/table.png">
<img src="img/obo-mne.png">

Когда вы сохраните всё это дело, то у вас в верху страницы должны появиться три надписи: Главная, Таблица, Обо мне. Пока это просто ничего незначащие картинки, которые нам надо будет превратить в ссылки.

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

Мы уже проходили как делать гиперссылку в html, но еще пока не делали ее в качестве картинки. Вот давайте и на практике потренируемся. Всё, что нам понадобиться это заключить тег <img> в знакомый нам тег <a> с атрибутом href. Ссылки мы будем вставлять на соответствующие страницы. Смотрите как я сделал это у себя. Я думаю, что вам должно быть всё понятно.

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

Теперь сохраните документ, войдите на главную страницу index.html и попробуйте поклацать по менюшке. Всё круто, всё работает.

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

Шапка

Ну на самом деле любой сайт будет смотреться некрасиво, не будь у него какой-нибудь даже минималистической шапки. Поэтому нам нужно будет ее вставить. В папке img я подготовил и картинку для шапки, которая называется header.jpg.

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

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

Кстати советую вам подогнать размер под другое разрешение, потому что я выложил картинку довольно большую. Для этого вам достаточно поставить атрибут width="900". Ну это я поставил для примера. Вы можете использовать свои параметры.

После этого по традиции смотрим, что у нас получилось.

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

Маркированный и нумерованный списки

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

Я в документе отметил те места, где вы должны будете эти списочки делать, но конечно же на всякий случай я покажу как это должно выглядеть.

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

Сохраняем и смотрим, что у нас получилось. Вроде все как надо. Отлично. Уже продвинулись далеко вперед.

Вставка таблицы

Откройте в блокноте страницу table.html, перетащите из одноименного вордовского документа все заголовки и текст, после чего расставьте все теги и атрибуты как надо.

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

Вот теперь переходим к тому, что нам нужно. Создаем таблицу в 5 строк и 5 столбцов, после чего вставляем в них соответствующие значения. Не забываем ставить нужные атрибуты, а именно border="2", cellpadding и cellspacing по 5. В коде это должно выглядеть примерно так:

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

Сохраняем и смотрим, что у нас получилось. Всё отлично!

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

Страница об авторе

Мы уже почти всё сделали. Нам только осталось закончить страницу об авторе. Зайдите в страницу obo-mne.html и вставьте из одноименного вордовского документа весь текст со всеми заголовками и расставьте теги.

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

Теперь нам нужно вставить фотографию автора. В папке img я для вас припас одну такую. Она носит название autor.jpg. Запомните это.

Короче, теперь после тегов шапки сайта и менюшек вам нужно будет прописать адрес этой картинки и поставить атрибут align="left", что текст оплетал фотографию. Если выглядит некрасиво, то можно поиграться с отступами на несколько пикселей. Примерно это должно выглядеть так.

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

Все сделали? Всё получилось? Я надеюсь, что да. Но теперь нам нужно вставить видео из ютуба в html-документ. В документе ссылка есть. Всё, что вам нужно — это просто вставить ее после основного текста. Если вдруг видео налезает на фотографию автора, то просто после текста сделайте парочку отступов с помощью <br>.

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

Ну вот вроде бы и всё. По заданию всё выполнено и теперь у вас есть такой простенький html сайт, сделанный в блокноте Notepad++ буквально за 10-15 минут. Несмотря на то, что это наипростейший html каркас без CSS свойств и других приблуд, оказывается до сих пор существуют люди, которые продают курсы аля «Как создать сайт» с информацией, подобной этой. Причем берут за это деньги — и 500 рублей, и даже 2000. Я просто в шоке!)

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

Уж если и брать какие-то курсы, то лучше у профессионалов, которые собаку на этом съели. Лично я рекомендую вам посмотреть курс Андрея Бернадского "HTML5 и CSS3 с нуля до гуру". Курс просто потрясающий, несложный в освоении и рассчитанный на любой уровень пользователя. Благодаря ему вы реально научитесь верстать довольно неплохие сайты.

Кстати как ваши ручки? Надеюсь, что вы не филонили и всё прописывали своими чудесными ручками. Я надеюсь, что каши в голове у вас нет и я все нормально объяснил. Ну а если у вас что-то не получилось, то в папке лежит готовая версия нашего сайта со всеми комментариями, чтобы вы смогли разобраться.

Фух. В общем на сегодня я всё. Воды сегодня выпил литра 4 наверное из-за жары. Так что надеюсь, что вам моя статья понравилась и была полезной в плане изучения. Не забывайте подписываться на новые статьи моего блога. Я вам расскажу еще много всего интересного. А вам я желаю удачи и спокойно перетерпеть жару. Ну а я пошел охлаждаться. Увидимся. Пока-пока!

С уважением, Дмитрий Костин.

Оцените статью
Блог Дмитрия Костина
Добавить комментарий

  1. Ольга Парфенова

    Как то для меня это сложновато, я думаю в моем случае лучше обращаться к людям которые умеют это делать!!

    Ответить
    1. Дмитрий Костин автор

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

      Ответить
      1. Дмитрий

        Молодец! Быстро сориентировался.

        Ответить
  2. Руслан

    Наверно смешно, но мне что английский, что французский, что html — все для меня сложные и непонятные, очень тяжело даются и в итоге я все свои потуги забрасываю 🙂

    Ответить
    1. Миша

      Я могу с уверенностью заявить, что html намного проще английского. Вообще за месяц можно выучить, а если по курсам таких ребят как Web4myself, то еще быстрее. С английским такое не прокатит)

      Ответить
      1. Дмитрий Костин автор

        Да. Webformyself действительно по полочкам всё раскладывают)

        Ответить
  3. Игорь

    Спасибо за статью! Каши в голове больше, чем мыслей!

    Ответить
  4. Валентин

    Вот не мог я пройти мимо этой статьи. Дим не тольк font в твоей стате устаревший, тег br, width, align все это устаревшее, все идет через файл стилей. И в самом начале должно быть что-то вроде

    Ответить
    1. Миша

      Ну на счет тега br не согласен, перенос строки по-моему еще актуален. А так да, все устаревшее, но все равно полезно знать для понимания работы атрибутов в html. Я вот начал изучение html с какого-то старого сайта, где уроки были хорошие, но сама информация сильно устарела. Потом новые знания было принять гораздо проще, когда получена база.

      Ответить
    2. Дмитрий Костин автор

      Если честно, Валь, то даже не знал, что они устарели, хотя сам понимаю, что этим уже толком никто не пользуется. Но вроде как эти теги спецификацией html не осуждаются в отличие от font, center и др. Просто по htmlbook я всё равно стараюсь сверяться.

      Ну а вообще да. Ты прав. Сейчас уже всё через CSS настраивается.

      Ответить
  5. Галина

    Так и атрибуты тегов тоже лучше в контенте не прописывать. А то потом захочется заголовки от центра к левому краю перенести, а у них...намертво align='center' (конечно, можно попробовать перебить такое позиционирование через css при помощи !important. Но все равно, код уже не так красиво смотрится со всеми этими атрибутами =)

    И кстати, есть же относительно новые теги: header, aside и так далее, весьма удобно и их использовать) Чтобы хотя бы дивы разбавить))

    Ответить
  6. gcfhujil[;]

    🙁 :- ( :8

    Ответить
Следи за нами в FaceBook.
Все новые статьи и много уникального!
Спасибо, не показывайте мне эту штуку больше!
Друг, ты хочешь уйти? Тогда подпишись на мой блог в ВК, чтобы не пропустить следующие статьи!
Дорогой друг, хотел бы ты всегда быть в курсе всех новостей блога? Тогда подпишись на блог в ВК