Sadržaj

• Koraci
• 1. dio: Kako sam otkrio HTML
• Savjet
• Upozorenje
• Što trebaš

HTML (HyperText Markup Language) je osnovni jezik za izradu web stranica. Stvoren je kao jednostavan i fleksibilan jezik kodiranja. Gotovo svaka web stranica na Internetu razvijena je s nekim oblikom ovog koda (ColdFusion, XML, XSLT). HTML je lako shvatiti, ali možete ga učiti još dugo ako vas zanima njegova sveobuhvatna funkcionalnost. Da biste svojoj web stranici dodali boju i zabavu, možete naučiti osnovne CSS čim se naviknete na osnovnu HTML stranicu.

Koraci

Dio 1 od 4: Izrada dokumenta

1. 

   Otvorite jednostavan uređivač teksta. NotePad je dobra opcija i može se preuzeti besplatno. HTML možete pisati s većinom uređivača teksta, ali složeniji softver s mogućnostima automatskog oblikovanja može otežati organizaciju vaše HTML stranice.
   • Ne koristite TextEdit, jer on obično sprema datoteku u formatu koji vaš preglednik možda neće prepoznati kao HTML.
   • Također možete koristiti internetski uređivač HTML-a. Namjenski programi za uređivanje HTML-a ne preporučuju se početnicima.

2. 

   
   
   Spremite datoteku kao web stranicu. Odaberite Datoteka → Spremi kao u izborniku na vrhu. Promijenite format datoteke u "Web stranica", ".html" ili ".htm". Spremite datoteku tamo gdje je možete lako pronaći.
   • Nema razlike između ove tri mogućnosti.

3. 

   Otvorite datoteku u pregledniku. Dvaput kliknite datoteku i ona će se automatski otvoriti kao prazna web stranica u vašem pregledniku. Možete i otvoriti preglednik, poput Firefoxa ili Internet Explorera, a zatim pomoću Datoteka → Otvoriti datoteku odabrati dokument.
   • Ova web stranica nije na mreži. Vidljiv je samo na vašem računalu.

4. 

   
   
   Osvježite web stranicu i pogledajte izvršene promjene. U prazan dokument unesite sljedeće: zdravo. Spremite dokument. Osvježite praznu web stranicu u pregledniku i na vrhu stranice trebali biste vidjeti riječ "Zdravo" podebljano. Kad god želite testirati svoj novi HTML tijekom ovog vodiča, spremite .htm dokument, a zatim osvježite prozor preglednika da biste vidjeli kako se HTML sastavlja.
   • Ako vidite riječi ""i"'' Pojavi se u vašem pregledniku, datoteka nije pravilno prevedena u HTML. Isprobajte drugi uređivač teksta ili drugi preglednik.

5. 

   
   
   Naučite oznake. HTML naredbe napisane su u "oznakama" koje govore pregledniku kako sastaviti i prikazati vašu web stranicu. Uvijek su zapisani u pojedinačnim navodnicima , i nisu prikazani na web stranici kao što ste ih koristili u gornjem primjeru:
   • je "početna karta" ili "početna karta". Sve napisano nakon ove oznake definirat će se kao "podebljano" (podebljano na web stranici).
   • je "završna oznaka" ili "završna oznaka", koju možete razlikovati po simbolu /. Označava kraj podebljanog teksta. Za funkcioniranje većine (ne svih) oznaka potrebna je završna oznaka, zato je obavezno uključite.

6. 

   Izradite svoj dokument. Izbrišite sve u svom HTML dokumentu. Počnite ispočetka sa sljedećim tekstom, točno onako kako je napisan (umanjeni za točke). Ovaj HTML kôd govori pregledniku koju vrstu HTML-a koristite i da će sav vaš HTML biti smješten unutar oznaka. i .

7. 

   Dodajte oznake glave (glave) i tijela. HTML dokumenti podijeljeni su u dva dijela. Odjeljak "gornji" odnosi se na posebne informacije, poput naslova stranice. Odjeljak "tijelo" sadrži glavni sadržaj stranice. Dodajte oba ova odjeljka u svoj dokument i ne zaboravite uključiti završne oznake. Novo dodani tekst podebljan je:

8. 

   Dajte svojoj stranici naslov. Većinu karata u odjeljku za glavu nevažno je naučiti s početnikom. Oznaka naslova jednostavna je za upotrebu i odredit će što će se prikazati kao naziv prozora preglednika ili na kartici preglednika. Postavite oznake za početak i kraj naslova unutar oznaka glave i između tih oznaka napišite zaglavlja koja želite:
   oglas

Dio 2 od 4: Oblikovanje teksta

1. 

   Dodajte tekst svom tijelu. U ovom ćemo odjeljku raditi samo s oznakama tijela. Drugi će tekst i dalje biti u vašem dokumentu, ali uštedjet ćemo prostor ako ga ne ponovimo u ovom vodiču. Upišite sve što želite između kartica i , a pojavit će se kao prvi sadržaj na vašoj stranici. Na primjer:
   • Slijedio sam upute wikiHow za pisanje HTML stranice.

2. 

   Dodajte naslove za tekst. Organizirajte svoju stranicu s oznakama zaglavlja koje upućuju pregledniku da tekst između njih prikazuje u većoj veličini fonta. Te oznake također koriste tražilice i drugi alati kako bi utvrdili o čemu se radi i kako je organizirano vaše web mjesto.
   je najveći naslov, a možete stvoriti manje naslove do
   . Isprobajte ih na svojoj stranici:
   • Dobrodošli na moju stranicu.

   • Slijedio sam upute wikiHow za pisanje HTML stranice.

   • Moj današnji cilj:

   • Ostvareni ciljevi:

   • Saznajte kako koristiti naslove.

   • Neispunjeni ciljevi:

   • Saznajte više oznaka za oblikovanje teksta.

3. 

   Saznajte više oznaka za oblikovanje teksta. Već ste vidjeli oznaku "strong", ali postoji puno drugih načina za formatiranje teksta. Isprobajte ove oznake ili s više oznaka odjednom za isti tekstualni niz. Ne zaboravite dodati završne oznake straga!
   • Važan tekst, podebljano prikazan u pregledniku.
   • Naglašeni tekst, prikazan kurzivom u pregledniku.
   • Tekst je malo manji nego inače. Tekst će automatski promijeniti veličinu ako se koristi u naslovu.
   • Tekst više nije relevantan, prikazuje se crticom tijela.
   • Tekst se umeće kasnije od ostalih dokumenata, prikazuje se podvlačenjem.

4. 

   Organizirajte tekst na svojoj stranici. Možda ste primijetili da pritiskanje tipke "enter" nije dovoljno da bi se tekst prikazao u drugom retku. Te vam oznake mogu pomoći u stvaranju odlomaka i prijeloma redaka ili uređivanju teksta na druge načine:

   • Kratko od "odlomak", ova će oznaka zadržati sav tekst između tih oznaka u odlomku i odvojiti ga od teksta iznad i ispod njega.

   • 
     Ova će oznaka generirati prijelome redaka. Nemojte joj dodavati završnu oznaku jer ne ometa bilo koji drugi sadržaj. Koristite ovu oznaku u pjesmama ili adresnim linijama, a ne u odlomcima.

   • Ako trebate tekst prikazati vrlo precizno, ova oznaka postavlja tekst unutar njega na font fiksne širine (svako slovo ima istu širinu) i omogućuje vam stvaranje intervala Praznine i prijelomi redaka za redovno uređivanje umjesto oznaka.

   • Ova oznaka definira vrstu teksta koji se citira iz izvora.

     Izvor možete opisati kasnije pomoću citirati karticu.

5. 

   Dodajte nevidljivi tekst opisa. Oznake komentara nisu prikazane na web stranici. Omogućuju vam dodavanje bilješki u HTML dokument bez utjecaja na sadržaj. Nemojte dodavati završnu oznaku.
   • Karte koje idu same bez završenih oznaka nazivaju se "prazne oznake".

6. 

   Kombinirajte ih zajedno. Najbolji način da zapamtite ove oznake je da ih koristite na svojoj web stranici. Evo primjera korištenja karata u dosadašnjim koracima. Pokušajte predvidjeti kako će se prikazati u pregledniku, a zatim ih kopirajte u svoj dokument i saznajte.
   • Dobrodošli na moju web stranicu.

   • Nadam se da ćete uživati ​​na ovoj stranici!

     Napravio sam ga samo za tebe.

   • 1. dio: Kako sam otkrio HTML

   • HTML sam naučio već u jedan dvasati, pa sam sada stručnjak.
   oglas

Dio 3 od 4: Dodavanje poveznica i slika

1. 

   Saznajte više o atributima. Oznake mogu sadržavati dodatne podatke koji se nazivaju atributima. Ti su atributi predstavljeni dodatnim riječima unutar samih oznaka, u obliku ime svojstva = "specifična vrijednost". Na primjer, bilo koja HTML oznaka može imati atribut naslova:

   • Uvodni odlomak nalazi se ovdje.

     Naslovite odlomak "O programu", koji će se pojaviti kada zadržite pokazivač iznad odlomka na web stranici.

2. 

   Veze do drugih web mjesta. Korištenje karata stvoriti hipervezu na bilo koju drugu web stranicu. Umetnite URL web stranice na koju ćete voditi pomoću atributa href. Evo primjera koji vodi do web stranice koju čitate:
   • Vaši posjetitelji vaše web stranice mogu kliknuti na ovaj tekst da bi slijedili vezu.

3. 

   Oznaku dodajte atribut id. Još jedan atribut koji bilo koja HTML oznaka može koristiti je element "id". U bilo koju karticu napišite id = "vidu" ili koristite bilo koje ime koje ne sadrži razmake. Ne daje nikakav vidljivi učinak, ali koristit ćemo ga u sljedećem koraku.
   • Na primjer, dodajte sljedeće u svoj dokument:

     Ovaj se odlomak koristi kao primjer za opisivanje rada atributa id.

4. 

   Veza do elementa s određenim id-om. Sada možemo koristiti oznaku hiperveze, , za povezivanje na drugo mjesto na istoj stranici. Umjesto URL-a, upotrijebit ćemo simbol #, nakon čega slijedi vrijednost id-a na koji se želimo povezati. Na primjer, Ovaj tekst povezat će se s tekstom s id-om "vidu".
   • Sve HTML vrijednosti razlikuju velika i mala slova. "#VIDU" i "#vidu" povezat će se na isto mjesto.
   • Ako je vaša stranica dovoljno kratka da odjednom prikazuje cijelu stranicu, vjerojatno nećete primijetiti da se ništa događa kada kliknete vezu u pregledniku. Promijenite veličinu prozora dok se ne pojavi traka za pomicanje, a zatim pokušajte ponovo.

5. 

   Dodajte fotografije. Kartica je prazna oznaka, što znači da nije potrebna krajnja oznaka. Sve informacije koje preglednik treba za prikaz slike dodaju se pomoću atributa. Evo primjera za prikaz logotipa wikiHow, s opisom svakog atributa iza:
   • 
   • Svojstva src = "" kaže pregledniku gdje je fotografija. (Imajte na umu da se objavljivanje fotografije s tuđe web lokacije smatra neprikladnim - a fotografija će nestati kad stranica više ne bude aktivna.)
   • Svojstva stil = "" Može učiniti mnogo stvari, ali što je najvažnije koristi se za postavljanje širine i visine slike u pikselima. (Umjesto toga možete upotrijebiti i zasebne atribute width = "" i height = "", ali to može dovesti do čudnih problema s veličinom ako koristite CSS.)
   • Svojstva alt = "" je kratki opis slike koji će korisnik vidjeti ako se slika nije uspjela učitati. To se smatra uvjetom jer se koristi za čitače zaslona posjetiteljima web mjesta koji su slijepi.
   oglas

Dio 4 od 4: Saznajte više Dodavanje i postavljanje web stranice na mrežu

1. 

   Potvrdite svoj HTML. Provjera HTML-a provjerava ima li pogrešaka u kodu. Ako se vaša web lokacija ne prikazuje ispravno, provjera valjanosti može vam pomoći pronaći pogrešku koja uzrokuje problem. Također vas može naučiti više o HTML-u utvrđivanjem da kod izgleda dobro na zaslonu, ali više se ne preporučuje zbog novih ažuriranja HTML standarda. Korištenje nevaljanog HTML-a ne čini vašu web lokaciju beskorisnom, ali može uzrokovati probleme ili nestabilno se prikazivati ​​u različitim preglednicima.
   • Isprobajte besplatnu internetsku uslugu provjere valjanosti tvrtke W3C ili potražite drugi alat za provjeru HTML 5 na mreži.

2. 

   Saznajte više oznaka i atributa. Postoji mnogo drugih HTML oznaka i atributa i mnoga mjesta za njihovo učenje:
   • Isprobajte w3schools i HTML Dog za više vodiča i cjelovite popise oznaka.
   • Pronađite web stranicu koja vam se sviđa kako izgleda, a zatim upotrijebite funkciju preglednika izvora stranice kako biste sami dobili HTML kôd. Kopirajte ga u svoj dokument i proučite kako to funkcionira.
   • Pročitajte druge članke i naučite kako stvoriti tablice u HTML-u, upotrijebite metaoznake kako biste povećali šanse da ih pronađete putem tražilica ili upotrijebite odjeljak. postaviti područje na stranici) i raspon (koristi se za određivanje stila elementa teksta) za pomoć u stilu kroz CSS.

3. 

   Nabavite svoje web mjesto na mreži. Odaberite uslugu za hostiranje vašeg web mjesta, a zatim možete prenijeti onoliko HTML stranica koliko želite na svoju osobnu web domenu. Da biste to učinili, morat ćete upotrijebiti softver za prijenos FTP-a, ali mnoge usluge iznajmljivanja weba nude i ovu uslugu.
   • Prilikom povezivanja na stranice ili slike koje se nalaze izravno na vašoj web lokaciji, morat ćete upotrijebiti punu adresu. Na primjer, ako je vaše ime domene www.chuyengiahtmlsieudang.com, tada tekst je u tim oznakama povezat će se na "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

   Dodajte stilove pomoću CSS-a. Ako vaša HTML stranica izgleda pomalo monotono, pokušajte naučiti osnove CSS-a za dodavanje boja, različitih fontova i bolju kontrolu nad smještajem elemenata. Povezivanje CSS "tablice stilova" s HTML stranicom omogućit će vam drastične promjene u hodu, automatski prilagođavajući stil cjelokupnog teksta unutar zadane oznake. Ovdje se možete malo poigrati s osnovnim slojem za oblikovanje ili zaroniti u detaljnije vodiče u CSS Tutorialu za HTML Dog.

5. 

   Dodajte JavaScript na svoju web stranicu. JavaScript je programski jezik koji se koristi za dodavanje puno funkcionalnosti vašim HTML stranicama. JavaScript naredbe umetnute su između početne i završne oznake , a može se koristiti za dodavanje interaktivnih gumba, izračunavanje matematičkih zadataka i još mnogo toga. Saznajte više u primjerima w3c. oglas

Savjet

• Deklaracija doktypea (korištena deklaracija vrste dokumenta) koja se koristi u ovom vodiču je "labavi HTML 4.0.1 prijelazni" (HTML 4.0.1 nije tijesan prijelaz), jednostavan format. za novake. Koristiti () alternativa tome da ga preglednik kompajlira u strogom HTML 5 formatu, što je preporučeni (iako rjeđe korišteni) standardni stil.

Upozorenje

• Svrha HTML-a je zadržati sadržaj u globalnom formatu. Nema kontrolu nad prezentacijom vašeg web mjesta, poput boje pozadine i točnog postavljanja elemenata. Iako još postoje oznake koje vam to omogućuju, dobra je ideja koristiti CSS za stvaranje više kontroliranog i dosljednog web mjesta.

Što trebaš

• Jednostavan uređivač teksta, poput NotePada ili TextEdita
• Web preglednik, kao što je Internet Explorer ili Mozilla Firefox
• (Izborno) HTML uređivač poput Adobe Dreamweaver, Aptana Studio ili Microsoft Expression Web