Kognityviniai faktai apie viską / Kompiuteriai / Kaip sukurti „Notepad“ svetainę? Tikrasis pavyzdys

Kaip sukurti svetainę Notepad? Nekilnojamasis pavyzdys

Daugelis žmonių mano, kad sukurti savo svetainę -sudėtingas verslas, kuriam reikia rimtų parengimo ir sudėtingų priemonių naudojimo. Tiesą sakant, užtenka mažiausiai žinių ir pagrindinės „Windows“ programos „Notepad“. Vadovaudamiesi paprastomis instrukcijomis, kaip sukurti svetainę „Notepad“, galite sukurti pirmąjį visą puslapį per kelias valandas.

„Notepad“ privalumai

Profesionalūs žiniatinklio kūrėjai, patyręSvetainės kūrėjai retai naudoja Notepad darbo metu, tačiau yra dviejų kategorijų naudotojai, kuriems ši programa yra puikus pasirinkimas:

naujokų išdėstymo dizaineriai;
žmonės, kurie nėra susipažinę su tinklalapių kūrimo procesu, nenori mokytis sudėtingų redaktorių, kad galėtų rašyti paprastą vizitinę kortelę.

Daugelis specialistų susipažino su išdėstymu irHTML, išsiaiškinkite, kaip sukurti svetainę naudojant „Notepad“. Tai leido jiems saugiai ir greitai konsoliduoti visas įgytas žinias. Notepad nėra sukurtas dirbti su kodu ir žymėjimu, jame nėra jokių integruotų raginimų, automatinio užbaigimo ir kitų šiuolaikinėse programose esančių žetonų, o tai reiškia, kad kūrėjas gali tik pasitikėti savimi ir savo atmintimi.

Текстовый редактор "Блокнот" имеет самый скромный minimalistinė sąsaja, o tai reiškia, kad užtrunka ilgai suprasti sudėtingą programos funkcionalumą. Tai labai patraukli vartotojams, kurie nenori praleisti laiko mokytis įrankio, kurio jie dažnai nenaudos.

Darbo pagrindai

Žingsnis po žingsnio, kaip sukurti „HTML“ svetainę „Notepad“, prasideda nuo programos atidarymo. Paprasčiausias būdas yra rasti „Notepad“ per „Windows“ meniu Pradėti standartiniame skyriuje.

Atidarytas naujas failas turi būti išsaugotas suhtml plėtinys. Tai svarbu, nes šiuo plėtiniu naršyklė supras, kad prieš jį yra interneto puslapis. „Išsaugoti kaip“ komandą „Failas“ meniu atidarys naujas langas. Čia reikia pateikti dokumentui pavadinimą index.html, pasirinkite utf-8 kodavimą ir aplanką, kurį norite išsaugoti.

Dabar galite atidaryti šį failą bet kuriuo metu dukart spustelėdami jį arba dešiniuoju pelės mygtuku spustelėdami kontekstinį meniu ir pasirinkdami „Atidaryti naudojant užrašų knygą“.

Puslapis jau sukurtas ir jūs galite pamatyti, kaip jis atrodo naršyklėje. Yra keli būdai, kaip atidaryti dokumentą interneto naršyklėje:

spustelėdami jį dešiniuoju pelės mygtuku ir pasirodžiusiame meniu pasirinkdami komandą „Atidaryti naudojant„ Google Chrome ““ (arba kitą naršyklę);
tiesiog vilkdami piktogramą į atidarytos naršyklės skirtukų juostą;
įvedę naršyklės adreso juostą visą dokumento adresą, pradedant nuo failo: // protokolas

failas: /// C: /Users/UserName/Desktop/my-site/index.html

Numatoma, kad puslapis yra visiškai tuščias, atėjo laikas jį užpildyti informacija.

Hiperteksto žymėjimo kalba

Visi žiniatinklio puslapiaiyra parašyti specialia HTML kalba (hiperteksto žymėjimo kalba). Suprasti jos pagrindus yra labai svarbu norint išsiaiškinti, kaip sukurti svetainę „Notepad“ ar bet kuriame kitame redaktoriuje. Kūrėjas naudoja HTML, kad paaiškintų naršyklei, kaip turėtų atrodyti puslapis. Štai kodėl svarbu nustatyti teisingą failo plėtinį.

Kalba pagrįsta etiketėmis - ženklų kombinacijomis, užklijuotomis skliausteliuose.

Žymų pavyzdžiai:

 Pirmojo lygio antraštė 
 Pabrėžtas tekstas

Tekstas tarp atidarymo ir uždarymo žymų bus specialiai tvarkomas naršyklėje.

Kurdami puslapį, be tiesiogiai rodomų puslapyje duomenų, turėtumėte nurodyti ir specialią paslaugų informaciją, skirtą pačiai naršyklei.

Pirmieji eskizai

Turėtumėte pradėti dirbti su teisingu html dokumento formatavimu. Pagrindinė puslapio struktūra atrodo taip:

<! DOCTYPE html> <html>  <head> <meta charset = "utf-8"> <title> Geriausia svetainė pasaulyje </title> </head>  <body>  </body>  </html>

Kiekvieno elemento reikšmė:

DOKTIPAS - techninė informacija apie naršyklę, nurodant, kaip ji turėtų suprasti kodą;
html - puslapio šaknies žyma;
galva - paslaugos informacijos skyrius, nematomas svetainės lankytojams;
meta - paslaugos žyma, charset atributas nusako teksto kodavimą;
pavadinimas - naršyklės skirtuke rodomo puslapio pavadinimas;
kūną - dokumento turinys, tiesiogiai rodomas puslapyje.

Išsaugoję kodą ir iš naujo atidarę (arba iš naujo įkėlę) failą į naršyklę, galite pamatyti pirmąjį pakeitimą - skirtuko lape atsirado svetainės pavadinimas.

Tema ir struktūra

Prieš suprasdami, kaip sukurti savo svetainę HTML naudojant „Notepad“, turite aiškiai įsivaizduoti, kaip ši svetainė turėtų atrodyti. Pavyzdžiui, paimkime asmeninį tam tikro Johno Doe'o tinklaraštį.

Pagrindiniai šio puslapio struktūros elementai:

kepurė su logotipu ir pirmo lygio antrašte;
horizontali naršymo juosta;
pagrindinis turinys, kurį sudaro trys straipsniai, kuriuos kiekvieną sudaro pavadinimas, trumpas aprašymas ir nuoroda į visą tekstą;
rūsyje su pranešimu apie autorių teises.

Šio puslapio HTML kodas atrodys taip:

<!DOCTYPE html> <html>  <head> <meta charset = "utf-8"> <title> Geriausia svetainė pasaulyje </title> </head>  <body>  <div class = "wrapper">  <header> <a href="index.html"> <img src = "/ images / images / logo.png" alt = "" width = "100"> </a> <h1> Jonas Doe </h1> </header>  <nav> <ul> <li> <a href="bio.html"> Autobiografija </a> </li> <li> <a href="life.html"> Mano gyvenimas, mano pasiekimai </a> </li> <li> <a href="gallery.html"> Nuotraukų albumas </a> </li> <li> <a href="contacts.html"> Susisiekite su manimi </a> </li> <li> <a href="thanks.html"> Ačiū </a> </li> </ul> </nav>  <pagrindinis>  <straipsnis> <h2> Puikus koncertas </h2> <div> Buvo verta kilometro ilgio eilės bilietams mėgautis šia laida !! </div> <a href="posts/concert.html"> Sužinokite daugiau </a> </article>  <straipsnis> <h2> Kodėl man patinka ledai </h2> <div> Noriu pasidalinti giliomis priežastimis mano meilė ledams ... </div> <a href="posts/ice-cream.html"> Žr. daugiau </a> </article>  <straipsnis> <h2> Būti ar nebūti? </h2> <div> Gyvenimo ir mirties reikalai. </div> <a href="posts/to-be-or-not-to-be.html"> Žr. Išsamią informaciją </a> </article> </main>  <pėdas> John Doe (c) 2018 m </footer>  </div>  </body> </html>

Tinklalapiui apibūdinti naudojamos HTML5 standarto semantinės žymos: antraštė, pagrindinis, nav, poraštę, straipsnis.

Kodo paaiškinimai:

Antraštėje yra vaizdas, įvyniotas į nuorodą. Su jo pagalba vartotojas gali grįžti į pagrindinį puslapį iš bet kurios svetainės vietos.
Pats vaizdas yra aplanke vaizdai praplaukite failą index.html... Jo kode, naudojant atributą plotis plotis yra griežtai nustatytas iki 100 taškų.
Pavadinimas sukurtas kaip žyma h1, kuris pabrėžia jo svarbą.
Naršymo meniu pateikiamas kaip nenumeruotas sąrašas, o kiekvienas jo elementas yra nuoroda į atitinkamą svetainės puslapį. Šių skyrių dar nėra, tačiau jie gali būti sukurti ateityje.
Straipsnių pavadinimams naudokite žymą h2.
Nuoroda „Žiūrėti“ išsamiau veda į atskirą puslapį su visu straipsnio tekstu. Šie puslapiai taip pat dar neegzistuoja.
Visas turinys suvyniotas į bendrą bloką su klase vyniojamasis popierius... Klasės atributai dažniausiai naudojami stiliaus elementams kurti.

Dabar puslapis atrodo taip:

Ši nuomonė nėra labai panaši į planuotą. Norėdami išspręsti situaciją, turite pridėti apdailą.

Norėdami tai padaryti, turite sukurti kitą failą šalia index.html ir pavadink style.css... Jame bus visi reikalingi stiliai.

Šiuo metu projekto struktūra atrodo taip:

Stilius

Toliau aiškindamiesi, kaip sukurti svetainę „Notepad“, pereiname į naują lygį - sujungiame stiliaus lapą.

Kad naršyklė suprastų, kur gauti dizainą, turite nurodyti css failo adresą. Tai yra aptarnavimo informacija, ji turėtų būti dedama į skyrių galva.

<head> <meta charset = "utf-8"> <title> Geriausia svetainė pasaulyje </title> <link rel = "stylesheet" href = "style.css"> </head>

Dabar viskas, kas bus aprašyta byloje style.css, naršyklė pritaikys puslapį. Pavyzdžiui, pakeiskime fono spalvą:

kūnas { fonas: # 89745d; }

Visas stiliaus lapo turinys atrodys taip:

kūnas { užpildas: 0; šrifto šeima:sans-serifas; šrifto dydis: 16 taškų; fonas: # 89745d; } .vyniojamasis popierius { užpildas: 20 taškų; kairė paraštė: automatinis; paraštė-dešinė: automatinė; plotis: 960px; } antraštė a { teksto dekoravimas: nėra; } antraštė img { vertikalus-lygiuoti: vidurys; paraštė-dešinė: 20 taškų; } antraštė h1 { ekranas: inline-block; vertikalus-lygiuoti: vidurys; spalva: # f8d9b7; } nav { „topding-top“: 20 taškų; kamšalo apačia: 20 taškų; } nav ul { paraštė: 0; text-align: centre; } nav ul li { ekranas: inline-block; list-style: nėra; užpildymas: 0px 15px; } nav ul li a { spalva: # f8d9b7; teksto dekoravimas: nėra; } nav ul li a: užveskite { teksto dekoravimas: pabraukimas; } straipsnis { užpildas: 20 taškų; paraštė: 20 taškų 0; fonas: # f8d9b7; langelis-šešėlis: 0 0 15px # f8d9b7; } straipsnis h2 { paraštė viršuje: 0 taškų; paraštė apačioje: 15 taškų; spalva: # d57106; } straipsnis a { šrifto dydis: 14 taškų; šrifto stilius: kursyvas; spalva: # d57106; } poraštė { užpildas: 20 taškų; text-align: dešinė; spalva: # f8d9b7; šrifto dydis: 14 taškų; šrifto svoris: paryškintas; }

Stilių paaiškinimai:

Kūno elementas nustatomas pagal pagrindinius šrifto parametrus: „sans-serif“ šeima ir 16 taškų dydis.
Pagrindinis konteineris yra pastovus 960 taškų pločio ir yra centre.
Meniu sąrašo elementai yra deklaruojami inline-block elementais, todėl juos galima išdėstyti vienoje eilėje. Nuorodoms pašalintas pabraukimas, dabar jis rodomas tik užvedus pelės žymeklį.
Straipsnių blokas turi kontrastingą foną ir nedidelį šešėlį.

Jei atnaujinate dokumentą naršyklėje, galite pamatyti jo galutinį vaizdą. Pirmasis tinklalapis sėkmingai sukurtas!

Tačiau tinklaraštis negali būti sudarytas tik iš pagrindiniopuslapiai su straipsnių sąrašu. Būtina kažkaip parodyti atskirą įrašą su visu tekstu, be to, navigacijos meniu nurodyti puslapiai jau yra suplanuoti.

Svarbiausia interneto samprata yra atskirų dokumentų susiejimas per nuorodas. Kaip sukurti hipersaitinę svetainę „Notepad“?

Pridedami puslapiai

Tiesą sakant, viskas būtina jau padaryta. Meniu elementai ir rodyklės „Žiūrėti“ išsamiau suvynioti į specialią žymą a, kuris yra atsakingas už hipersaito susidarymą. Reikalingas adresas nurodomas atribute href... Belieka tik patiems susikurti puslapius ir įdėti juos šalia failo index.html.

Nuotraukų albumo puslapio kodo pavyzdys (gallery.html):

<!DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Geriausia svetainė pasaulyje </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> Jonas Doe </h1> </header>  <nav> <ul> <li> <a href="bio.html"> Autobiografija </a> </li> <li> <a href="life.html"> Mano gyvenimas, mano pasiekimai </a> </li> <li> <a href="gallery.html"> Nuotraukų albumas </a> </li> <li> <a href="contacts.html"> Susisiekite su manimi </a> </li> <li> <a href="thanks.html"> Ačiū </a> </li> </ul> </nav>   <pagrindinis> <div class = "gallery"> <figūra> <img src = "/ images / images / in-forest.jpg" alt = ""> <figcaption> Miške </figcaption> </figure>  <figūra> <img src = "/ images / images / winter.jpg" alt = ""> <figcaption> Žiemą </figcaption> </figure>  <figūra> <img src = "/ images / images / on-beach.jpg" alt = ""> <figcaption> Paplūdimyje </figcaption> </figure>  <figūra> <img src = "/ images / images / work.jpg" alt = ""> <figcaption> Darbe </figcaption> </figure>  <figūra> <img src = "/ images / images / new-year.jpg" alt = ""> <figcaption> Naujieji metai </figcaption> </figure>  <figūra> <img src = "/ images / images / picture.jpg" alt = ""> <figcaption> Autoportretas </figcaption> </figure> </div> </main>  <pėdas> Johnas Doe (c) 2018 m </footer> </div> </body> </html>

Pagrindinė struktūra, antraštė, navigacija ir poraštė visiškai dubliuoja pagrindinį puslapį, keičiasi tik skyrius pagrindiniskurioje dabar yra galerija su keliais blokais figūra... Kiekviename bloke yra paveikslėlis ir antraštė.

Puslapio dizainui naudojamas tas pats failas style.csssujungtas sekcijos viduje galva... Jums reikia pridėti keletą galerijos taisyklių:

.galerija { šrifto dydis: 0; } figūra { rodyti:inline-block; vertikaliai lygiuoti: apačia; plotis: 33,3333%; dėžutės dydis: rėmelis; užpildas: 10px 15px; paraštė: 0px; šrifto dydis: 14 taškų; spalva: # f8d9b7; text-align: centre; } paveikslėlis img { plotis: 100%; paraštė apačioje: 10 taškų; }

Čia naudojama „css“ technika, leidžianti blokus dėti į tris iš eilės ir nustatyti jiems lygiai trečdalį pirminio konteinerio pločio.

Galutinis galerijos vaizdas parodytas žemiau.

Hipersaitai suteikia galimybę judėti tarp svetainės puslapių: iš meniu galite pereiti į „Nuotraukų albumą“, o spustelėję logotipą galite grįžti į pagrindinį puslapį.

Svetainės talpinimas internete

Taigi, mes išsiaiškinome, kaip naudoti žingsnis po žingsnio instrukcijas, kaip sukurti svetainę „Notepad“. Bet dabar jo niekas nemato! Tačiau asmeniniai tinklaraščiai kuriami siekiant pasidalinti savo gyvenimu su visu pasauliu.

Norėdami ištaisyti padėtį, turite įdėtivisus sukurtus failus talpinant ir pasirinkite domeną svetainei naudodamiesi specialia paslauga. Yra daugybė prieglobos paslaugų teikėjų, kurie teikia paslaugas kiekvienam skoniui ir piniginei.

Susitarę su vedėju, turėsite prieigą prie valdymo skydelio, kur galėsite perkelti visus sukurtus failus. Šiuo metu projekto struktūra yra tokia:

Tai taip pat turėtų apimti HTML failus likusiems svetainės puslapiams.

Kodo redaktoriai

Dabar jūs žinote, kaip sukurti HTML svetainę„Notepad“, bet yra ir patogesnių būdų. Profesionalai naudoja specialius redaktorius, skirtus dirbti su kodu. Jie siūlo daug patogių parinkčių, kad būtų lengva kurti ir redaguoti svetaines.

Populiariausi įrankiai - „Visual Studio“Kodas, didingas tekstas, „Notepad ++“. Nereikėtų bijoti jų sudėtingumo. Žinodami, kaip sukurti svetainę naudojant „Notepad“, galite lengvai suprasti, kas yra kas. Visos papildomos šių redaktorių funkcijos sukurtos taip, kad palengvintų žiniatinklio valdytojo darbą ir neturėtų jam trukdyti.