Web stranica Bare Bones: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja promjena: 2024-01-30 09:37

Danas ćemo stvoriti vrlo jednostavnu, golu kost web stranicu od nule. Govorit ćemo o HTML elementima, stiliziranju vaše web stranice (boje, fontovi, poravnanje itd.), I na kraju o tome kako umetnuti sliku na svoju web stranicu!

Do kraja ovog uputstva imat ćete osnovne vještine za stvaranje web stranice od nule i otkriti da kodiranje nije tako teško kao što se čini!

Korak 1: Korištenje bilježnice

Notepad na prozorima koristit ćemo za izradu naše prve web stranice. Iako će bilo koji uređivač teksta to učiniti, bilježnica dolazi unaprijed instalirana na Windows strojevima, pa je to izvrsno polazište.

Da biste otvorili bilježnicu, idite na traku za pretraživanje u donjem lijevom kutu zaslona i upišite "Notepad". Zatim odaberite aplikaciju "Notepad" koja se pojavljuje u rezultatima pretraživanja. Trebao bi se otvoriti novi prozor.

Korak 2: Dodavanje osnovnog stabla HTML dokumenata

Sve web stranice moraju slijediti standardnu skeletnu strukturu kako bi vaš web preglednik (Chrome, Firefox, Edge, Internet Explorer, Safari …) mogao obraditi i prikazati vašu web stranicu.

To se naziva html stablo dokumenata. U Notepad upišite html "elements" ili "tags" kako je prikazano na snimci zaslona. Također slobodno kopirajte i zalijepite:

Korak 3: Spremanje kao.html stranice

Sada kada imamo svoju osnovnu html strukturu u Notepadu, spremimo je kako ne bismo izgubili posao i kako bismo mogli vidjeti naše promjene dok napredujemo po Instructable.

1. Odaberite "Datoteka"> "Spremi kao …" (Snimka zaslona 1)
2. Promijenite vrstu datoteke u "Sve datoteke" (Snimka zaslona 2)
3. Dajte datoteci ime po vašem izboru. Zabilježite gdje spremate dokument na računalu kako biste ga kasnije mogli otvoriti. NAPOMENA: Najvažniji dio spremanja ove datoteke je dodavanje ".html" na kraj naziva datoteke. To će omogućiti vašem računalu da ga prepozna kao web stranicu. Dakle, ako želite dati datoteci ime "moja_web stranica", svakako dodajte.html na kraj toga, npr. "my_webpage.html"

Korak 4: Dodavanje naslova na vašu web stranicu

Dakle, imamo osnovnu html strukturu potrebnu za web preglednike za tumačenje i prikaz naše web stranice, ali nemamo nikakav sadržaj. Promijenimo to!

Prvo što bismo trebali učiniti je dati naslov našoj web stranici. Većina web stranica ima naslov. To je ono što se prikazuje na kartici u vašem web pregledniku (pogledajte snimak zaslona). Svojoj web stranici dat ću naslov "Taylorova web stranica". Da bismo to učinili, moramo dodati element 'title'.

Taylorova web stranica

U ovom trenutku ćete primijetiti da svaka oznaka ima oznaku "otvaranja" i oznake "zatvaranja". Kao što je npr

i.

Time se želi razaznati gdje naslov počinje, a gdje završava. Gotovo sve html oznake slijede ovo, međutim postoje neke iznimke.

Korak 5: Dodavanje sadržaja na vašu web stranicu

Pa, imamo naslov za svoju web stranicu, ali još uvijek nemamo stvarni sadržaj za nju. Dodajmo malo štiha!

Dodali smo naslov na našu web stranicu pomoću elementa 'title'. Dajmo našoj web stranici veliko zaglavlje koje plijeni pozornost pomoću elementa 'h1' koji je element zaglavlja.

Taylorova web stranica

Dobro došli na moju web stranicu

Korak 6: Sagledavanje dosadašnjih promjena

Imamo naslov, imamo sadržaj, provjerimo našu web stranicu kako napreduje do sada.

1. Spremite datoteku u bilježnicu
2. Idite na mjesto gdje ste spremili datoteku i dvaput je kliknite. Automatski bi se trebao otvoriti u zadanom web pregledniku. Izgledaš dobro!

Korak 7: Dodavanje oznake odlomka

Imamo naslov, naslov, a sada dodajmo odlomak s još malo teksta. Naziv elementa za odlomak je 'p'. U nastavku možete vidjeti njegovu upotrebu:

Taylorova web stranica

Dobro došli na moju web stranicu

Danas ćemo naučiti kako izraditi ovu vrlo jednostavnu web stranicu!

Napomena: Promjene možete vidjeti kad god želite spremanjem bilježnice i otvaranjem datoteke.

Korak 8: Dajte mu malo boje

Naša web stranica je u tijeku, ali to je prilično jednostavno. Dajmo našoj oznaci odlomka boju!

Možemo obojiti različite elemente dodavanjem atributa 'style' oznaci 'p' kako je dolje navedeno:

Taylorova web stranica

Dobro došli na moju web stranicu

Danas ćemo naučiti kako izraditi ovu vrlo jednostavnu web stranicu!

Korak 9: Dodavanje slike

Što je web stranica bez slika? Dodajmo sliku na našu web stranicu!

Prvi korak je pronaći sliku koja vam se sviđa. Koristio sam google slike za traženje zlatnog retrivera. Povucite sliku prema gore i pobrinite se da URL završi na.jpg,.png,.gif,-j.webp

Nakon što odaberete svoju sliku, moramo je dodati na html stranicu pomoću oznake 'img'. Moja slika je:

Dodajte je na svoju stranicu pomoću oznake 'img' s atributom 'src':

Taylorova web stranica

Dobro došli na moju web stranicu

Danas ćemo naučiti kako izraditi ovu vrlo jednostavnu web stranicu!

Korak 10: Pregled konačnog proizvoda

Spremite datoteku bilježnice i otvorite konačni proizvod. Trebali biste vidjeti svoju web stranicu!