Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером,
даже если вы впервые слышите это слово



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



style="display:block"
data-ad-client="ca-pub-4066320629007052"
data-ad-slot="6126629122"
data-ad-format="link">

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

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

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

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

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

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

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

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

Структура

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

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

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

Заголовки

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

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

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

Абзацы

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

Меню

Давайте теперь на каждой странице нашего сайта сделаем небольшое меню. Вообще, если честно, то таким образом меню уже мало кто делает. Сейчас рулить 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, но еще пока не делали ее в качестве картинки. Вот давайте и на практике потренируемся. Всё, что нам понадобиться это заключить тег <img> в знакомый нам тег <a> с атрибутом href. Ссылки мы будем вставлять на соответствующие страницы. Смотрите как я сделал это у себя. Я думаю, что вам должно быть всё понятно.

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

Шапка

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



style="display:block"
data-ad-client="ca-pub-4066320629007052"
data-ad-slot="7184559928"
data-ad-format="link">

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Этот блог читают уже более 4000 человек, которые решили покончить с компьютерной неграмотностью. Присоединяйся
Комментариев 12
  • Как то для меня это сложновато, я думаю в моем случае лучше обращаться к людям которые умеют это делать!!

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

      Дмитрий
      28 июня 2016 в 09:35
      • Молодец! Быстро сориентировался.

        Дмитрий
        28 июня 2016 в 15:54
  • Наверно смешно, но мне что английский, что французский, что html — все для меня сложные и непонятные, очень тяжело даются и в итоге я все свои потуги забрасываю :)

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

      Миша
      30 июня 2016 в 03:28
      • Да. Webformyself действительно по полочкам всё раскладывают)

        Дмитрий
        30 июня 2016 в 09:57
  • Спасибо за статью! Каши в голове больше, чем мыслей!

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

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

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

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

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

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

    Галина
    20 августа 2016 в 12:38
  • :( :- ( :8

    gcfhujil[;]
    05 июня 2017 в 06:05
Оставить коментарий
:p :-p 8) 8-) :lol: =( :( :-( :8 ;) ;-) :(( :o:


Блог Дмитрия Костина
© 2015-2017 Блог Дмитрия Костина
Помогу вам найти общий язык с компьютером, даже если вы впервые слышите это слово
Политика конфиденциальности