Bare Bones web stranica: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:08

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 kreiranje web stranice od nule i otkriti da kodiranje nije tako teško kao što se čini!

Korak 1: Upotreba Notepada

Notepad na Windowsima ćemo koristiti za kreiranje naše prve web stranice. Iako će svaki uređivač teksta to učiniti, bilježnica dolazi unaprijed instalirana na Windows strojevima, pa je to odlična polazna tačka.

Da biste otvorili bilježnicu, idite na traku za pretraživanje u donjem lijevom kutu ekrana i upišite "Notepad". Zatim odaberite aplikaciju "Notepad" koja se pojavljuje u rezultatima pretraživanja. Trebalo 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.

Ovo se naziva html stablo dokumenata. U Notepadu upišite html "elements" ili "tags" kako je prikazano na snimku ekrana. Možete i kopirati i zalijepiti:

Korak 3: Spremanje kao.html stranice

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

1. Odaberite 'Datoteka'> 'Spremi kao …' (Snimka zaslona 1)
2. Promijenite vrstu datoteke u 'Sve datoteke' (snimak ekrana 2)
3. Dajte datoteci ime po vašem izboru. Obavezno zabilježite gdje spremate dokument na računaru kako biste ga kasnije mogli otvoriti. NAPOMENA: Najvažniji dio spremanja ove datoteke je dodavanje ".html" na kraj naziva datoteke. Ovo će omogućiti vašem računaru 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 koja je potrebna web preglednicima za tumačenje i prikaz naše web stranice, ali nemamo nikakav sadržaj. Promijenimo to!

Prvo što trebamo 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 ekrana). 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 npr

i.

Ovo služi za razlikovanje 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 našu web stranicu, ali još uvijek nemamo stvarni sadržaj za nju. Dodajmo malo štiha!

Dodali smo naslov na našu web stranicu koristeći element 'title'. Dajmo našoj web stranici veliko zaglavlje koje plijeni pažnju upotrebom elementa 'h1' koji je element zaglavlja.

Taylorova web stranica

Dobrodošli na moju web stranicu

Korak 6: Sagledavanje naših promjena do sada

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

1. Sačuvajte datoteku u beležnici
2. Idite na mjesto gdje ste spremili datoteku i dvaput kliknite na nju. Trebalo bi se automatski otvoriti u zadanom web pregledniku. Izgleda dobro!

Korak 7: Dodavanje oznake paragrafa

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

Taylor web stranica

Dobrodošli na moju web stranicu

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

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

Korak 8: Dajte mu malo boje

Naša web stranica je u toku, ali prilično je jasna. Dajmo našoj oznaci pasusa boju!

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

Taylor web stranica

Dobrodošli na moju web stranicu

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

Korak 9: Dodavanje slike

Šta 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

Dobrodošli na moju web stranicu

Danas ćemo naučiti kako stvoriti 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!