/ / Ako vytvoriť webovú stránku v programe Poznámkový blok? Skutočný príklad

Ako vytvoriť webovú stránku v programe Poznámkový blok? Skutočný príklad

Mnoho ľudí si myslí, že vytvorenie vlastnej webovej stránky jeje to zložitá firma, ktorá si vyžaduje serióznu prípravu a použitie zložitých nástrojov. Na začiatok stačí iba minimum vedomostí a najzákladnejší program Windows - Poznámkový blok. Podľa jednoduchých pokynov o tom, ako vytvoriť webovú stránku v programe Poznámkový blok, si môžete celú prvú stránku vytvoriť za pár hodín.

Výhody programu Poznámkový blok

Profesionálni weboví vývojári, skúseníTvorcovia stránok veľmi zriedka používajú program Poznámkový blok, ale existujú dve kategórie používateľov, pre ktorých je tento program vynikajúcou voľbou:

  • sadzače pre začiatočníkov;
  • ľudia, ktorí sú novým procesom vytvárania webových stránok, ktorí sa nechcú učiť zložitým editorom písať jednoduchý web s vizitkami.

Mnoho odborníkov sa zoznámilo s rozložením aHTML, porozumieť tomu, ako vytvoriť web pomocou programu Poznámkový blok. To im umožnilo bezpečne a rýchlo upevniť všetky získané vedomosti. Program Poznámkový blok nie je navrhnutý tak, aby pracoval s kódom a značkami. V moderných programoch nie sú k dispozícii žiadne zabudované rady, automatické dopĺňanie a iné čipy, čo znamená, že vývojár sa môže spoľahnúť iba na seba a svoju pamäť.

Textový editor Poznámkový blok má najskromnejšieminimalistické rozhranie, čo znamená, že už dlho nemusíte chápať komplexnú funkčnosť programu. Je to veľmi príťažlivé pre používateľov, ktorí neplánujú tráviť čas učením sa nástroja, ktorý často nepoužívajú.

Základy práce

Po otvorení programu sa začína krok za krokom, ako vytvoriť web HTML v programe Poznámkový blok. Najjednoduchší spôsob, ako nájsť Poznámkový blok, je cez ponuku Štart systému Windows v časti Príslušenstvo.

Otvorený nový súbor sa musí uložiť pomocouhtml rozšírenie. To je dôležité, pretože s týmto rozšírením prehliadač pochopí, že má pred sebou webovú stránku. Príkaz Uložiť ako v ponuke Súbor otvorí nové okno. Tu musíte pomenovať dokument index.html, vyberte kódovanie utf-8 a priečinok, ktorý chcete uložiť.

Uloženie súboru do programu Poznámkový blok

Teraz môžete tento súbor kedykoľvek otvoriť dvojitým kliknutím na tento súbor alebo kliknutím pravým tlačidlom myši na kontextovú ponuku a výberom položky „Otvoriť pomocou programu Poznámkový blok“.

Stránka už bola vytvorená a v prehliadači môžete vidieť, ako vyzerá. Existuje niekoľko spôsobov, ako otvoriť dokument v internetovom prehliadači:

  • kliknutím pravým tlačidlom myši a výberom položky „Otvoriť pomocou prehliadača Google Chrome“ (alebo iného prehliadača) v zobrazenej ponuke;
  • iba potiahnutím ikony do panela kariet v otvorenom prehliadači;
  • do panela s adresou prehliadača napíšete úplnú adresu dokumentu, začínajúc protokolovým súborom: //
file: /// C: /Users/UserName/Desktop/my-site/index.html

Teraz je stránka predvídateľne panenská prázdna, je čas vyplniť ju informáciami.

Hypertext Markup Language

Všetky webové stránky na World Wide Webnapísané v špeciálnom jazyku HTML (jazyk na označenie hypertextu). Pochopenie jeho základov je veľmi dôležité pochopiť, ako vytvoriť webovú stránku v programe Poznámkový blok alebo iného editora. Pomocou HTML vývojár povie prehliadaču, ako by stránka mala vyzerať. Preto je dôležité nastaviť správnu príponu súboru.

Jazyk je založený na značkách - kombináciách znakov uzavretých v zátvorkách.

Príklady značiek:

Nadpis úrovne 1

Kurzívou upravený text

Text medzi štítkami otvárania a zatvárania bude prehliadačom špeciálne spracovávaný.

Pri vytváraní stránky by ste okrem údajov priamo zobrazených na stránke mali zadať aj špeciálne servisné informácie určené pre samotný prehliadač.

Prvé návrhy

Mali by ste začať pracovať so správnym návrhom dokumentu html. Základná štruktúra stránky je nasledovná:






 Najlepšie miesto na svete 






Hodnota každého prvku:

  • DOCTYPE - technické informácie pre prehliadač, v ktorých sa uvádza, ako by mal kód vnímať;
  • html - koreňová značka stránky;
  • hlava - časť servisných informácií, ktorá nie je viditeľná pre návštevníkov stránok;
  • meta - servisná značka, atribút charset určuje kódovanie textu;
  • nadpis - názov stránky zobrazenej na karte prehľadávača;
  • telo - telo dokumentu zobrazené priamo na stránke.

Po uložení kódu a opätovnom otvorení (alebo opätovnom načítaní) súboru v prehliadači sa zobrazí prvá zmena - na karte sa zobrazil názov lokality.

Téma a štruktúra

Predtým, ako pochopíte, ako vytvoriť svoju vlastnú stránku HTML pomocou programu Poznámkový blok, musíte si jasne predstaviť, ako by táto stránka mala vyzerať. Napríklad si vezmite osobný blog určitého Johna Doeho.

Vytvorenie lokality v programe Poznámkový blok

Hlavné prvky štruktúry tejto stránky:

  • klobúk s logom a hlavičkou prvej úrovne;
  • horizontálna navigačná lišta;
  • hlavný obsah predstavovaný tromi článkami, z ktorých každý pozostáva z nadpisu, stručného opisu a odkazu na plné znenie;
  • suterén s autorským právom.

HTML kód pre túto stránku bude vyzerať takto:






 Najlepšie miesto na svete 




John Doe

Na popis webovej stránky sa používajú sémantické značky zo štandardu HTML5: hlavička, hlavná, nav, zápätie, článok.

Vysvetlenie kódu:

  • V hlavičke je obrázok zabalený do odkazu. Vďaka tejto pomoci sa používateľ bude môcť vrátiť na hlavnú stránku odkiaľkoľvek na webe.
  • Samotný obrázok je v priečinku snímky zarovnané so súborom index.html, V kóde pre to pomocou atribútu šírka prísne nastavená šírka na 100 pixelov.
  • Názov je označený x1, čo zdôrazňuje jeho význam.
  • Navigačná ponuka je predstavená neusporiadaným zoznamom a každá položka je odkazom na príslušnú stránku webu. Teraz tieto sekcie ešte nie sú, ale v budúcnosti môžu byť vytvorené.
  • Pre názvy článkov použite značku x2.
  • Odkaz Sledovanie vedie na samostatnú stránku s úplným článkom. Tieto stránky tiež chýbajú.
  • Celý obsah je zabalený do spoločného bloku s triedou obálka, Atribúty triedy sa bežne používajú na úpravu prvkov.

Stránka teraz vyzerá takto:

Zobrazenie webovej stránky bez stylingu

Tento pohľad nie je príliš podobný plánovanému. Na vyriešenie situácie je potrebné pridať dizajn.

Ak to chcete urobiť, musíte vytvoriť ďalší súbor vedľa index.html a zavolajte ho style.css, Bude vyhovovať všetkým potrebným štýlom.

V súčasnosti štruktúra projektu vyzerá takto:

Štruktúra stránky

Štýlový dizajn

Pokračujeme v zisťovaní, ako vytvoriť webovú stránku v programe Poznámkový blok, ideme na novú úroveň - spájame šablónu so štýlmi.

Aby prehliadač vedel, kde získať návrh, musíte zadať adresu súboru css. Jedná sa o servisné informácie, mali by ste ich uviesť v časti hlava.

<head> <meta charset = "utf-8"> <title> Najlepšie stránky na svete </title> <link rel = "stylesheet" href = "style.css"> </head>

Teraz bude všetko, čo bude opísané v súbore style.css, na stránku sa použije prehliadač. Napríklad zmeňte farbu pozadia:

telo {
pozadie: # 89745d;
}

Celý obsah šablóny bude vyzerať takto:

telo {
čalúnenie: 0;
font-family:bezpätkové;
veľkosť písma: 16px;
pozadie: # 89745d;
}
.wrapper {
čalúnenie: 20px;
ľavý okraj: auto;
pravý okraj: auto;
šírka: 960px;
}
záhlavie a {
dekorácia textu: žiadna;
}
hlavička img {
vertikálne zarovnanie: stredné;
pravý okraj: 20px;
}
hlavička h1 {
displej: vložený blok;
vertikálne zarovnanie: stredné;
farba: # f8d9b7;
}
nav {
výplň: 20px;
čalúnenie: 20px;
}
nav ul {
marža: 0;
zarovnanie textu: stred;
}
nav ul li {
displej: vložený blok;
štýl zoznamu: žiadny;
čalúnenie: 0px 15px;
}
nav ul li a {
farba: # f8d9b7;
dekorácia textu: žiadna;
}
nav ul li a: hover {
dekorácia textu: podčiarknutie;
}
článok {
čalúnenie: 20px;
marža: 20px 0;
pozadie: # f8d9b7;
tieň v tvare: 0 0 15px # f8d9b7;
}
článok h2 {
horná hranica: 0px;
okraj-spodok: 15px;
farba: # d57106;
}
článok a {
veľkosť písma: 14px;
typ písma: kurzíva;
farba: # d57106;
}
footer {
čalúnenie: 20px;
zarovnanie textu: vpravo;
farba: # f8d9b7;
veľkosť písma: 14px;
font-weight: bold;
}

Vysvetlenie štýlov:

  • Element body je nastavený na základné parametre písma: bezpätková rodina a veľkosť 16 pixelov.
  • Hlavný kontajner má konštantnú šírku 960 pixelov a je vycentrovaný.
  • Položky zoznamu ponúk sú vyhlásené za prvky vloženého bloku, čo umožňuje ich umiestnenie do jedného riadku. Podčiarknutie bolo pre odkazy odstránené; teraz sa zobrazuje iba pri umiestnení kurzora myši.
  • Blok článkov má kontrastné pozadie a mierny tieň.

Ak dokument obnovíte v prehliadači, uvidíte jeho konečné zastúpenie. Prvá webová stránka bola úspešne vytvorená!

Blog však nemôže pozostávať iba z hlavnéhostránky so zoznamom článkov. Je potrebné nejako zobraziť samostatný príspevok s plným textom, navyše stránky uvedené v navigačnom menu sú už naplánované.

Najdôležitejšou koncepciou internetu je prepojenie jednotlivých dokumentov pomocou odkazov. Ako vytvoriť web s hypertextovým odkazom v programe Poznámkový blok?

Pridávajú sa stránky

V skutočnosti už bolo urobené všetko potrebné. Položky ponuky a ukazovatele „Sledovať“ sú podrobnejšie zabalené v špeciálnej značke a, ktorý je zodpovedný za vytvorenie hypertextového odkazu. Požadovaná adresa je uvedená v atribúte href... Zostáva len vytvoriť samotné stránky a umiestniť ich vedľa súboru index.html.

Ukážkový kód pre stránku fotoalba (gallery.html):

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Najlepšie stránky na svete </title> <link rel = "stylesheet" href = "style.css"> </head> <body> <div class = "wrapper"> <hlavička> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> John Doe </h1> </header>  <nav> <ul> <li> <a href="bio.html"> Autobiografia </a> </li> <li> <a href="life.html"> Môj život, moje úspechy </a> </li> <li> <a href="gallery.html"> Fotoalbum </a> </li> <li> <a href="contacts.html"> Kontaktujte ma </a> </li> <li> <a href="thanks.html"> Ďakujeme </a> </li> </ul> </nav>   <hlavný> <div class = "gallery"> <obrázok> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> V lese </figcaption> </figure>  <obrázok> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> V zime </figcaption> </figure>  <obrázok> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> Pláž </figcaption> </figure>  <obrázok> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> V práci </figcaption> </figure>  <obrázok> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> Nový rok </figcaption> </figure>  <obrázok> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> Autoportrét </figcaption> </figure> </div> </main>  <chodidlo> John Doe (c) 2018 </footer> </div> </body> </html>

Hlavná štruktúra, hlavička, navigácia a päta úplne duplikujú hlavnú stránku, zmení sa iba oddiel hlavnáktorá teraz obsahuje galériu s viacerými blokmi obrázok... Vo vnútri každého bloku je obrázok a jeho popis.

Rovnaký súbor sa používa na návrh stránky style.csspripojený vo vnútri sekcie hlava... Musíte do galérie pridať niekoľko pravidiel:

.galéria { veľkosť písma: 0; } obrázok { displej:vložený blok; vertical-align: bottom; šírka: 33,3333%; box-sizing: border-box; výplň: 10px 15px; okraj: 0px; veľkosť písma: 14px; farba: # f8d9b7; zarovnanie textu: na stred; } obrázok obrázok { šírka: 100%; spodný okraj: 10px; }

Tu sa používa technika css, ktorá umožňuje umiestniť bloky do troch za sebou a nastaviť ich šírku presne na jednu tretinu šírky nadradeného kontajnera.

Konečný pohľad na galériu je uvedený nižšie.

Rozloženie stránky Fotoalbum

Hypertextové odkazy poskytujú pohyb medzi stránkami webu: z ponuky môžete prejsť do „Fotoalbumu“ a kliknutím na logo sa môžete vrátiť späť na hlavnú stránku.

Umiestnenie stránok na internete

Takže sme na to prišli pomocou podrobných pokynov, ako vytvoriť web v programe Poznámkový blok. Teraz ho však nikto nevidí! Ale osobné blogy sú vytvárané s cieľom zdieľať váš život s celým svetom.

Ak chcete napraviť situáciu, musíte umiestniťvšetky vytvorené súbory na hostiteľskom serveri a pomocou špeciálnej služby vyberte doménu pre tento web. Existuje obrovské množstvo poskytovateľov hostingu, ktorí poskytujú služby pre každý vkus a peňaženku.

Po uzavretí dohody s hostiteľom získate prístup do ovládacieho panela, kam môžete preniesť všetky vytvorené súbory. V súčasnosti je štruktúra projektu nasledovná:

Štruktúra projektu

Tu by ste mali tiež pridať súbory HTML pre zvyšok stránok webu.

Redaktori kódu

Teraz viete, ako vytvoriť html stránku v prehliadačiPoznámkový blok, ale existujú aj pohodlnejšie spôsoby. Profesionáli používajú špeciálne editory určené na prácu s kódom. Ponúkajú veľa užitočných možností, ktoré uľahčujú vytváranie a úpravy webov.

Najobľúbenejšie nástroje - Visual StudioKód, Vznešený text, Poznámkový blok ++. Jeden by sa nemal báť ich zložitosti. Ak budete vedieť, ako vytvoriť web pomocou programu Poznámkový blok, môžete ľahko zistiť, čo. Všetky ďalšie funkcie týchto editorov sú navrhnuté tak, aby uľahčovali prácu správcovi webu a nemali by s ním zasahovať do procesu.

Program poznámkového bloku

Vytváranie webových stránok prostredníctvom programu Poznámkový blok je len začiatkom dlhej a zaujímavej cesty webového vývojára.

páčilo sa:
0
y