„Bare Bones“tinklalapis: 10 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:48

Šiandien mes nuo pat pradžių sukursime labai paprastą, pliką kaulų tinklalapį. Mes kalbėsime apie HTML elementus, tinklalapio stilių (spalvas, šriftus, derinimą ir kt.) Ir galiausiai, kaip įterpti vaizdą į savo tinklalapį!

Pasibaigus šiai pamokai, turėsite pagrindinius įgūdžius sukurti tinklalapį nuo nulio ir sužinosite, kad koduoti nėra taip sunku, kaip atrodo!

1 žingsnis: „Notepad“naudojimas

Norėdami sukurti pirmąjį tinklalapį, „Windows“naudosime „Notepad“. Nors bet kuris teksto redaktorius tai padarys, užrašų knygelė yra iš anksto įdiegta „Windows“kompiuteriuose, todėl tai yra puikus atspirties taškas.

Norėdami atidaryti bloknotą, eikite į paieškos juostą apatiniame kairiajame ekrano kampe ir įveskite „Notepad“. Tada pasirinkite „Notepad“programą, kuri atsiranda paieškos rezultatuose. Turėtų atsidaryti naujas langas.

2 veiksmas: pridėkite pagrindinį HTML dokumentų medį

Visi tinklalapiai turi atitikti standartinę skeleto struktūrą, kad jūsų žiniatinklio naršyklė („Chrome“, „Firefox“, „Edge“, „Internet Explorer“, „Safari“ir kt.) Galėtų apdoroti ir rodyti jūsų tinklalapį.

Tai vadinama html dokumentų medžiu. „Notepad“įveskite html „elementus“arba „žymas“, kaip parodyta ekrano kopijoje. Taip pat galite kopijuoti ir įklijuoti:

3 veiksmas: išsaugokite kaip.html puslapį

Dabar, kai „Notepad“turime savo pagrindinę html struktūrą, išsaugokime ją, kad neprarastume jokio darbo ir kad galėtume matyti savo pokyčius, kai einame „Instructable“.

1. Pasirinkite „Failas“> „Išsaugoti kaip …“(1 ekrano kopija)
2. Pakeiskite failo tipą į „Visi failai“(2 ekrano kopija)
3. Suteikite savo failui pasirinktą pavadinimą. Nepamirškite pažymėti, kur išsaugojote dokumentą savo kompiuteryje, kad galėtumėte jį atidaryti vėliau. PASTABA: Svarbiausia išsaugoti šį failą - failo pavadinimo pabaigoje pridėti „.html“. Tai leis jūsų kompiuteriui atpažinti jį kaip tinklalapį. Taigi, jei norite savo failą pavadinti „my_webpage“, prie jo pabaigos būtinai pridėkite.html, pvz. "my_webpage.html"

4 veiksmas: pavadinimo pridėjimas prie savo tinklalapio

Taigi mes turime pagrindinę html struktūrą, reikalingą žiniatinklio naršyklėms interpretuoti ir rodyti mūsų tinklalapį, tačiau neturime jokio turinio. Pakeiskime tai!

Pirmas dalykas, kurį turėtume padaryti, yra suteikti tinklalapiui pavadinimą. Dauguma visų tinklalapių turi pavadinimą. Tai rodoma žiniatinklio naršyklės skirtuke (žr. Ekrano kopiją). Savo tinklalapiui suteiksiu pavadinimą „Taylor's Website“. Norėdami tai padaryti, turime pridėti elementą „title“.

Taylor svetainė

Šiuo metu pastebėsite, kad kiekviena žyma turi „atidarymo“ir „uždarymo“žymas. Toks kaip

ir.

Taip siekiama išsiaiškinti, kur prasideda ir kur baigiasi pavadinimas. Beveik visos html žymos laikosi to, tačiau yra keletas išimčių.

5 veiksmas: turinio pridėjimas prie savo tinklalapio

Na, mes turime savo tinklalapio pavadinimą, bet vis dar neturime tam tikro turinio. Pridėkime šiek tiek nuojautos!

Mes pridėjome savo tinklalapio pavadinimą naudodami elementą „title“. Suteikime savo tinklalapiui didelę, dėmesį patraukiančią antraštę, naudodami elementą „h1“, kuris yra antraštės elementas.

Taylor svetainė

Sveiki atvykę į mano tinklalapį

6 žingsnis: peržiūrėkite mūsų pokyčius iki šiol

Turime pavadinimą, turinį, peržiūrėkime mūsų tinklalapį, kaip viskas vyksta iki šiol.

1. Išsaugokite failą užrašų knygelėje
2. Eikite ten, kur išsaugojote failą, ir dukart spustelėkite jį. Jis turėtų būti automatiškai atidarytas numatytojoje žiniatinklio naršyklėje. Gražiai atrodo!

7 veiksmas: pastraipos žymos pridėjimas

Turime pavadinimą, antraštę, dabar pridėkime pastraipą su šiek tiek daugiau teksto. Pastraipos elemento pavadinimas yra „p“. Jo naudojimą galite pamatyti žemiau:

Taylor svetainė

Sveiki atvykę į mano tinklalapį

Šiandien mes išmoksime sukurti šį labai paprastą tinklalapį!

Pastaba: pakeitimus galite peržiūrėti bet kada, išsaugodami užrašų knygelę ir atidarydami failą.

8 žingsnis: suteikite tam tikrą spalvą

Turime savo tinklalapį, bet jis yra gana paprastas. Suteikime savo pastraipos žymei spalvą!

Mes galime nuspalvinti skirtingus elementus, pridėdami „style“atributą prie „p“žymos, kaip nurodyta toliau:

Taylor svetainė

Sveiki atvykę į mano tinklalapį

Šiandien mes išmoksime sukurti šį labai paprastą tinklalapį!

9 veiksmas: paveikslėlio pridėjimas

Kas yra svetainė be nuotraukų? Pridėkime nuotrauką prie mūsų svetainės!

Pirmasis žingsnis - surasti jums patinkantį vaizdą. Aukso retriverio paieškai naudojau „Google“vaizdus. Patraukite vaizdą aukštyn ir įsitikinkite, kad URL baigiasi.jpg,.png,.gif,-j.webp

Kai pasirinksite savo vaizdą, turime jį pridėti prie html puslapio naudodami žymą „img“. Mano vaizdas yra:

Pridėkite jį prie savo puslapio naudodami žymą „img“su atributu „src“:

Taylor svetainė

Sveiki atvykę į mano tinklalapį

Šiandien mes išmoksime sukurti šį labai paprastą tinklalapį!

10 žingsnis: Galutinio produkto peržiūra

Išsaugokite bloknotų failą ir atidarykite galutinį produktą. Turėtumėte pamatyti savo tinklalapį!