Заметка по созданию сайта с нуля

Опубликовал 25 декабря 2011 в рубрике Бесплатные видеокурсы. Комментарии: Комментариев нет

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

Тем не менее, ниже представленная статья на простом примере  покажет процесс создания сайта с нуля. Она скорее призвана дать начальное понимание в этом занятии людям с “нулевым” знанием в этой области.

Проделав все шаги самостоятельно, Вы получите начальные понимания в создании простых html страниц или создания примитивного сайта.

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

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

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

01_kodirovka-fayla-35

Вообще то в html гораздо больше тегов и атрибутов». Да! В этом  Вы действительно правы, но время идет и многие теги уже умерли и перестали работать в последних версиях html, либо же просто считаются лишними, и ими уже перестали пользоваться. Некоторые используются повсеместно и сейчас. В любом случае у Вас будут базовые знания и понимание основ, и нововведения будут восприниматься более понятно.

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

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

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

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

Структура самой html страницы

Самым первым заданием, необходимо сделать стандартную структуру html-документа. Знаете, как ее делать? Вы правильно поняли. Вам всего лишь следует поставить главные теги.

02_struktura-dokumenta-_1-19

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

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

Заголовки html документа

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

03_zagolovki_2-16

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

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

Абзацы страницы html

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

04_abzaci_3-15

Меню страницы документа

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

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

05-ssilka-kartinka_4-15

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

<img>

в знакомый нам тег

<a>

с атрибутом href.

Ссылки мы будем вставлять на соответствующие страницы. Смотрите как сделано это у на примере ниже. Думаю, что вам должно быть всё понятно.

06_ssilka-kartinka_5-13

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

07-zagolovki-menyu-v-brauzere_6-10

Шапка нашего создаваемого сайта

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

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

08_vstavka-header_8-5

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

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

09_header-brauzere

Создаем маркированный и нумерованный списки

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

10_numerovaniy-spisok-_9-3

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

Вставка таблицы на создаваемую страницу

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

11_sozdaem-tablicu_10-1

Вот теперь переходим к тому, что нам нужно. Создаем таблицу в 5 строк и 5 столбцов, после чего вставляем в них соответствующие значения. Помним о простановке необходимых атрибутов, а именно

border="2", cellpadding

и

cellspacing по 5.

В коде это будет выглядеть примерно так:

12_sozdaem-tablicu_10-1

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

13_smotrim-tablicu-v-brauzere_10-1

Делаем страницу об авторе

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

obo-mne.html

и вставьте из одноименного вордовского документа весь текст со всеми заголовками и внимательно расставьте теги.

14_str.-ob-avtore_13

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

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

15_vstavka-foto-avtora_15

Все сделали? Всё получилось? Расчитываю, что да.

Вставляем  видео из ютуба в html-документ

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

16_vstavka-koda-youtube

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

17_rezultat-sayta-v-brauzere_17

Уж если и брать какие-то курсы, то лучше у профессионалов, которые отлично в этом разбираются. Лично могу рекомендовать вам посмотреть курс Е. Попова «HTML и CSS». Курс просто потрясающий и простой в освоении, рассчитанный на любой уровень пользователя и благодаря ему почерпнете базовые знания по предмету изучения html и CSS. Благодаря ему вы реально научитесь верстать довольно красивые сайты.

Статья сделана с использованием материала сайта http://koskomp.ru/sozdanie-saytov/primer-sozdaniya-sayta-na-html/

Такой сайт Вы вполне можете разместить на бесплатном хостинге или хостинге с дешевым тарифом, если надумаете развиваться в этом направлении дальше. Примером такого хостинга может быть вот этот, сам на нем держу свой один сайт на wordpress, а для простого сайта его хватает с лихвой.

Шесть замечательных уроков общей продолжительностью 2 часа 46 минут расскажут Вам о том, как быстро и легко создать собственный сайт своими руками.

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

Получать новые статьи блога

Обновления на свой email получить:




Комментарии