Когнитивни факти за всичко / компютри / Как да създадете уеб сайт в Notepad? Истински пример

Как да създадете сайт в Notepad? Реален пример

Много хора смятат, че създаването на собствен уебсайт -сложен бизнес, който изисква сериозна подготовка и използване на сложни инструменти. Всъщност, за начало е достатъчен минимум от познания и най-основната програма на Windows, Notepad. Следвайки простите инструкции как да създадете уебсайт в Notepad, можете да създадете първата пълна страница за няколко часа.

Предимства на Notepad

Профессиональные веб-разработчики, опытные Създателите на сайтове много рядко използват Notepad в процеса на работа, но има две категории потребители, за които тази програма е отличен избор:

дизайнери за начинаещи оформления;
хора, които не са запознати с процеса на създаване на уеб страници, не искат да научат сложни редактори за писане на прост сайт за визитки.

Многие профессионалы знакомились с версткой и HTML, разберете как да създадете уебсайт, използвайки Notepad. Това им дава възможност да осигурят сигурно и бързо консолидиране на всички придобити знания. Notepad не е предназначен за работа с код и маркиране, няма вградени подкани, автодовършване и други чипове, налични в съвременните програми, което означава, че разработчикът може да разчита само на себе си и своята памет.

Текстовият редактор на Notepad има най-скромниминималистичен интерфейс, което означава, че не е нужно да разбирате сложната функционалност на програмата за дълго време. Това е много привлекателно за потребители, които не планират да отделят време за изучаване на инструмент, който няма да използват често.

Основи на работата

Инструкциите стъпка по стъпка как да създадете HTML уебсайт в Notepad започват с отваряне на програмата. Най-лесният начин да намерите Notepad е чрез менюто "Старт" на Windows в раздела "Аксесоари".

Новоотвореният файл трябва да бъде запазен сразширение html. Това е важно, защото това разширение ще каже на браузъра, че е уеб страница. Командата "Запазване като" в менюто "Файл" ще отвори нов прозорец. Тук трябва да наименувате документа index.html, да изберете кодирането utf-8 и папката, която да запазите.

Сега можете да отворите този файл по всяко време, като щракнете двукратно върху него или като щракнете с десния бутон върху контекстното меню и изберете „Отваряне с Notepad“.

Страницата вече е създадена и можете да видите как изглежда в браузъра. Има няколко начина за отваряне на документ в уеб браузър:

като щракнете върху него с десния бутон на мишката и изберете командата „Отваряне с Google Chrome“ (или друг браузър) в менюто, което се появява;
като просто плъзнете иконата в лентата с раздели на отворен браузър;
като напишете в адресната лента на браузъра пълния адрес на документа, започвайки с файл: // протокол

файл: /// C: /Users/UserName/Desktop/my-site/index.html

Сега страницата е предвидимо девствена празна, време е да я попълните с информация.

Език за маркиране на хипертекст

Всички уеб страници в необятността на World Wide Webса написани на специален език HTML (Hypertext Markup Language). Разбирането на основите му е много важно, за да разберете как да създадете уебсайт в Notepad или друг редактор. Разработчикът използва HTML, за да обясни на браузъра как трябва да изглежда страницата. Ето защо е важно да зададете правилното разширение за файла.

Езикът се основава на тагове - комбинации от символи, затворени в ъглови скоби.

Примери за етикети:

<h1> Заглавие от първо ниво </h1> <i> Курсив текст </i>

Текстът между етикетите за отваряне и затваряне ще се обработва по специален начин от браузъра.

В допълнение към данните, директно показани на страницата, при създаването на страница трябва да посочите специална сервизна информация, предназначена за самия браузър.

Първи скици

Трябва да започнете да работите с правилното форматиране на html документа. Основната структура на страницата изглежда така:

<! DOCTYPE html> <html>  <head> <meta charset = "utf-8"> <title> Най-добрият сайт в света </title> </head>  <body>  </body>  </html>

Значението на всеки елемент:

ДОКТИП - техническа информация за браузъра, указваща как той трябва да интерпретира кода;
HTML - етикет на корен на страница;
глава - раздел с информация за услугата, който не се вижда от посетителите на сайта;
мета - таг за услуга, атрибутът charset определя кодирането на текст;
заглавие - името на страницата, показана в раздела на браузъра;
тяло - тялото на документа, директно показано на страницата.

След запазване на кода и повторно отваряне (или презареждане) на файла в браузъра можете да видите първата промяна - името на сайта се появи в раздела.

Тема и структура

Преди да разберете как да създадете своя сайт в HTML с помощта на Notepad, трябва ясно да си представите как трябва да изглежда този сайт. Да вземем например личния блог на определен Джон Доу.

Основните елементи на структурата на тази страница:

шапка с лого и заглавие от първо ниво;
хоризонтална навигационна лента;
основно съдържание, представено от три статии, всяка от които се състои от заглавие, кратко описание и връзка към пълния текст;
мазе с известие за авторски права.

HTML кодът за тази страница ще изглежда така:

<!DOCTYPE html> <html>  <head> <meta charset = "utf-8"> <title> Най-добрият сайт в света </title> </head>  <body>  <div class = "wrapper">  <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> Джон Доу </h1> </header>  <nav> <ul> <li> <a href="bio.html"> Автобиография </a> </li> <li> <a href="life.html"> Моят живот, моите постижения </a> </li> <li> <a href="gallery.html"> Фотоалбум </a> </li> <li> <a href="contacts.html"> Свържете се с мен </a> </li> <li> <a href="thanks.html"> Благодаря </a> </li> </ul> </nav>  <основна>  <статия> <h2> Супер концерт </h2> <div> Заслужаваше километрова опашка за билети да се насладите на това шоу !! </div> <a href="posts/concert.html"> Вижте повече </a> </article>  <статия> <h2> Защо обичам сладолед </h2> <div> Искам да споделя дълбоките причини любовта ми към сладоледа ... </div> <a href="posts/ice-cream.html"> Вижте повече </a> </article>  <статия> <h2> Да бъдеш или да не бъдеш? </h2> <div> Въпроси на живот и смърт. </div> <a href="posts/to-be-or-not-to-be.html"> Виж детайлите </a> </article> </main>  <долния колонтитул> Джон Доу (c) 2018 </footer>  </div>  </body> </html>

Семантичните тагове от стандарта HTML5 се използват за описание на уеб страницата: удар с глава, основен, навигация, долния, статия.

Обяснения за кода:

Заглавката съдържа изображение, обвито в линк. С негова помощ от всяко място в сайта потребителят може да се върне на главната страница.
Самото изображение е в папката снимки изравнете с файла index.html... В кода за него с помощта на атрибута широчина ширината е строго зададена на 100 пиксела.
Заглавието е оформено като таг h1, което подчертава неговото значение.
Навигационното меню е представено като неномериран списък и всеки от неговите елементи е връзка към съответната страница на сайта. Тези раздели все още не са налични, но може да бъдат създадени в бъдеще.
За заглавия на статии използвайте маркера h2.
Връзката „Преглед“ по-подробно води до отделна страница с пълния текст на статията. Тези страници също все още не съществуват.
Цялото съдържание е обвито в общ блок с клас обвивка... Атрибутите на класа обикновено се използват за стилизиране на елементи.

Сега страницата изглежда така:

Тази гледна точка не е много подобна на планираната. За да поправите ситуацията, трябва да добавите декорация.

За да направите това, ще трябва да създадете друг файл до index.html и го назовете style.css... Той ще съдържа всички необходими стилове.

В момента структурата на проекта изглежда така:

Стайлинг

Продължавайки да разберем как да създадем уебсайт в Notepad, отиваме на ново ниво - свързване на таблица със стилове.

За да може браузърът да разбере откъде да вземе дизайна, трябва да посочите адреса на css файла. Това е сервизна информация, тя трябва да бъде поставена в раздела глава.

<head> <meta charset = "utf-8"> <title> Най-добрият сайт в света </title> <link rel = "stylesheet" href = "style.css"> </head>

Сега всичко, което ще бъде описано във файла style.css, браузърът ще се приложи към страницата. Например, нека променим цвета на фона:

тяло { фон: # 89745d; }

Цялото съдържание на таблицата със стилове ще изглежда така:

тяло { подплата: 0; шрифтово семейство:безсериф; размер на шрифта: 16px; фон: # 89745d; } .wrapper { подложка: 20px; поле вляво: автоматично; поле вдясно: автоматично; ширина: 960px; } заглавка a { декорация на текст: няма; } заглавка img { вертикално подравняване: средна; поле вдясно: 20px; } заглавка h1 { дисплей: вграден блок; вертикално подравняване: средна; цвят: # f8d9b7; } nav { подложка: 20px; подложка отдолу: 20px; } nav ul { марж: 0; подравняване на текст: център; } nav ul li { дисплей: вграден блок; стил на списък: няма; подплата: 0px 15px; } nav ul li a { цвят: # f8d9b7; декорация на текст: няма; } nav ul li a: hover { декорация на текст: подчертаване; } статия { подложка: 20px; марж: 20px 0; фон: # f8d9b7; box-shadow: 0 0 15px # f8d9b7; } статия h2 { margin-top: 0px; margin-bottom: 15px; цвят: # d57106; } статия a { размер на шрифта: 14px; стил на шрифта: курсив; цвят: # d57106; } долен колонтитул { подложка: 20px; подравняване на текст: вдясно; цвят: # f8d9b7; размер на шрифта: 14px; шрифт-тегло: получер; }

Обяснения за стилове:

Елементът body е зададен на основните параметри на шрифта: семейство sans-serif и размер 16 пиксела.
Основният контейнер има постоянна ширина от 960 пиксела и е центриран.
Елементите от списъка с менюта са декларирани вградени блокови елементи, което им позволява да бъдат поставени в един ред. Подчертаването е премахнато за връзки, сега се появява само при нанасяне на курсора на мишката.
Блокът с статии има контрастен фон и лека сянка.

Ако опресните документа в браузъра, можете да видите окончателното му представяне. Първата уеб страница е създадена успешно!

Блогът обаче не може да се състои само от основнотостраници със списък със статии. Необходимо е по някакъв начин да се покаже отделна публикация с пълния текст, освен това страниците, посочени в навигационното меню, вече са планирани.

Най-важната концепция на Интернет е свързването на отделни документи чрез връзки. Как да създам уеб сайт с хипервръзка в Notepad?

Добавяне на страници

Всъщност всичко необходимо вече е направено. Елементите от менюто и указателите „Гледайте“ са увити по-подробно в специален етикет и, който е отговорен за формирането на хипервръзката. Необходимият адрес е посочен в атрибута HREF... Остава само да създадете самите страници и да ги поставите до файла index.html.

Примерен код за страница на фотоалбум (gallery.html):

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Най-добрият сайт в света </title> <link rel = "stylesheet" href = "style.css"> </head> <body> <div class = "wrapper"> <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> Джон Доу </h1> </header>  <nav> <ul> <li> <a href="bio.html"> Автобиография </a> </li> <li> <a href="life.html"> Моят живот, моите постижения </a> </li> <li> <a href="gallery.html"> Фотоалбум </a> </li> <li> <a href="contacts.html"> Свържете се с мен </a> </li> <li> <a href="thanks.html"> Благодаря </a> </li> </ul> </nav>   <основна> <div class = "gallery"> <фигура> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> В гората </figcaption> </figure>  <фигура> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> През зимата </figcaption> </figure>  <фигура> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> На плажа </figcaption> </figure>  <фигура> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> На работното място </figcaption> </figure>  <фигура> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> Нова година </figcaption> </figure>  <фигура> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> Автопортрет </figcaption> </figure> </div> </main>  <долния колонтитул> Джон Доу (c) 2018 </footer> </div> </body> </html>

Основната структура, заглавката, навигацията и долният колонтитул напълно дублират главната страница, само раздела се променя основенкоято сега съдържа галерия с множество блокове фигура... Всеки блок съдържа снимка и надпис.

Същият файл се използва за проектиране на страницата style.cssсвързани вътре в секцията глава... Трябва да добавите няколко правила за галерията към него:

.gallery { размер на шрифта: 0; } фигура { дисплей:вграден блок; вертикално подравняване: отдолу; ширина: 33,3333%; оразмеряване на кутия: гранична кутия; подплата: 10px 15px; марж: 0px; размер на шрифта: 14px; цвят: # f8d9b7; подравняване на текст: център; } фигура img { ширина: 100%; margin-bottom: 10px; }

Тук се използва css техника, която ви позволява да поставяте блокове на три поред и да ги задавате на точно една трета от ширината на родителския контейнер.

Окончателният изглед на галерията е показан по-долу.

Хипервръзките осигуряват движение между страниците на сайта: от менюто можете да отидете до „Фотоалбум“, а като кликнете върху логото, можете да се върнете към главната страница.

Поставяне на сайт в Интернет

И така, разбрахме с помощта на инструкции стъпка по стъпка как да създадем уебсайт в Notepad. Но сега никой не го вижда! Но се създават лични блогове, за да споделите живота си с целия свят.

За да поправите ситуацията, трябва да поставитевсички създадени файлове на хостинг и изберете домейн за сайта с помощта на специална услуга. Има огромен брой хостинг доставчици, които предоставят услуги за всеки вкус и портфейл.

След сключване на споразумение с хостера ще имате достъп до контролния панел, където можете да прехвърлите всички създадени файлове. В момента структурата на проекта е следната:

Това трябва да включва и HTML файлове за останалите страници на сайта.

Редактори на кодове

Сега знаете как да създадете html сайт вNotepad, но има и по-удобни начини. Професионалистите използват специални редактори, предназначени за работа с код. Те предлагат много удобни опции, които улесняват създаването и редактирането на сайтове.

Най-популярни инструменти - Visual StudioКод, възвишен текст, Notepad ++. Човек не трябва да се страхува от тяхната сложност. Знаейки как да създадете уебсайт с помощта на Notepad, можете лесно да разберете какво е какво. Цялата допълнителна функционалност на тези редактори е предназначена да улесни работата на уеб администратора и не трябва да му пречи в процеса.