Vsebina

• Koraki
• 1. del: Kako sem odkril HTML
• Nasvet
• Opozorilo
• Kaj rabiš

HTML (HyperText Markup Language) je osnovni jezik za izdelavo spletnih strani. Ustvarjen je bil kot enostaven in prilagodljiv kodni jezik. Skoraj vsako spletno mesto v internetu je razvito z neko obliko te kode (ColdFusion, XML, XSLT). HTML je enostavno razumeti, vendar se lahko še dolgo učite o njem, če vas zanima njegova celovita funkcionalnost. Če želite na svoje spletno mesto dodati barvo in zabavo, se lahko takoj, ko se navadite na osnovno stran HTML, naučite osnovnih CSS.

Koraki

1. del od 4: Izdelava dokumenta

1. 

   Odprite preprost urejevalnik besedil. NotePad je dobra možnost in ga lahko brezplačno prenesete. HTML lahko pišete z večino urejevalnikov besedil, vendar lahko bolj zapletena programska oprema z možnostmi samodejnega oblikovanja oteži organizacijo strani HTML.
   • Ne uporabljajte TextEdit, saj običajno shrani datoteko v obliki, ki je vaš brskalnik morda ne bo prepoznal kot HTML.
   • Uporabite lahko tudi spletni urejevalnik HTML. Namenski programi za urejanje HTML niso priporočljivi za začetnike.

2. 

   
   
   Datoteko shranite kot spletno stran. V meniju na vrhu izberite Datoteka → Shrani kot. Spremenite obliko datoteke v "Spletna stran", ".html" ali ".htm". Datoteko shranite tam, kjer jo boste enostavno našli.
   • Med temi tremi možnostmi ni razlike.

3. 

   Odprite datoteko v brskalniku. Dvokliknite datoteko in v brskalniku se bo samodejno odprla kot prazna spletna stran. Lahko pa odprete tudi brskalnik, kot je Firefox ali Internet Explorer, in nato z datoteko → Odpri datoteko izberete dokument.
   • Ta spletna stran ni na spletu. Ogledljiv je samo v računalniku.

4. 

   
   
   Osvežite spletno stran in si oglejte izvedene spremembe. V prazen dokument vnesite naslednje: zdravo. Shranite dokument. Osvežite prazno spletno stran v brskalniku in na vrhu strani se bo pojavila beseda "Hello" v krepkem tisku. Kadar želite med tem vadnikom preizkusiti svoj novi HTML, shranite dokument .htm in nato osvežite okno brskalnika, da vidite, kako je HTML sestavljen.
   • Če vidite besede ""in"'' Prikaže se v vašem brskalniku, datoteka ni bila pravilno prevedena v HTML. Poskusite z drugim urejevalnikom besedila ali drugim brskalnikom.

5. 

   
   
   Naučite se oznak. Ukazi HTML so zapisani v "oznakah", ki brskalniku sporočajo, kako sestaviti in prikazati vašo spletno stran. Vedno so zapisani znotraj enojnih narekovajev , in niso prikazani na spletni strani, kot ste jih uporabili v zgornjem primeru:
   • je "začetna karta" ali "uvodna karta". Vse, kar je zapisano za to oznako, bo opredeljeno kot »krepko« (krepko na spletni strani).
   • je "končna oznaka" ali "zaključna oznaka", ki jo lahko ločite po simbolu / znaku. Označuje konec krepkega besedila. Večina (ne vseh) oznak potrebuje končno oznako za delovanje, zato jo obvezno vključite.

6. 

   Sestavite svoj dokument. Izbrišite vse v dokumentu HTML. Začnite z naslednjim besedilom, natančno tako, kot je bilo napisano (minus točke). Ta koda HTML brskalniku sporoča, katero vrsto HTML uporabljate in da bo ves HTML postavljen znotraj oznak. in .

7. 

   Dodajte oznake glave (glave) in telesa. Dokumenti HTML so razdeljeni na dva dela. V zgornjem razdelku so posebne informacije, kot je naslov strani. Oddelek "telo" vsebuje glavno vsebino strani. Oba odseka dodajte v dokument in ne pozabite vključiti končnih oznak. Novo dodano besedilo je krepko:

8. 

   Dajte svoji strani naslov. Večino kart v poglavju z glavo ni pomembno učiti z začetnikom. Naslovna oznaka je enostavna za uporabo in bo določala, kaj se prikaže kot ime okna brskalnika ali na zavihku brskalnika. Postavite začetno in končno oznako naslova znotraj oznak glave in med te oznake zapišite poljubne glave:
   oglas

2. del od 4: Oblikovanje besedila

1. 

   Dodajte besedilo v svoje telo. V tem razdelku bomo delali samo z oznakami telesa. Drugo besedilo bo še vedno v vašem dokumentu, vendar bomo prihranili prostor, če ga ne bomo ponavljali v tej vadnici. Med karte pišite, kar želite in in bo prikazana kot prva vsebina na vaši strani. Na primer:
   • Sledil sem navodilom wikiHow za pisanje strani HTML.

2. 

   Dodajte naslove besedila. Stran uredite z naslovnimi oznakami, ki brskalniku nalagajo, naj besedilo med njimi prikaže v večji velikosti pisave. Te oznake uporabljajo tudi iskalniki in druga orodja, da ugotovijo, za kaj gre in kako je organizirano vaše spletno mesto.
   je največji naslov in lahko ustvarite manjše naslove do
   . Preizkusite jih na svoji strani:
   • Dobrodošli na moji strani.

   • Sledil sem navodilom wikiHow za pisanje strani HTML.

   • Moj današnji cilj:

   • Dokončani cilji:

   • Naučite se uporabljati naslove.

   • Neizpolnjeni cilji:

   • Preberite več o oznakah za oblikovanje besedila.

3. 

   Preberite več o oznakah za oblikovanje besedila. Oznako "močan" ste že videli, vendar obstaja veliko drugih načinov za oblikovanje besedila. Preizkusite te oznake ali z več oznakami hkrati za isti besedilni niz. Ne pozabite dodati končnih oznak zadaj!
   • Pomembno besedilo, ki je v brskalniku prikazano krepko.
   • Poudarjeno besedilo, v brskalniku prikazano ležeče.
   • Besedilo je nekoliko manjše kot običajno. Velikost tega besedila se bo samodejno spremenila, če bo uporabljeno v naslovu.
   • Besedilo ni več relevantno, prikazano s pomišljajem telesa.
   • Besedilo se vstavi pozneje kot drugi dokumenti, prikazano s podčrtaji

4. 

   Organizirajte besedilo na svoji strani. Morda ste opazili, da pritisk na tipko "enter" ni dovolj, da se besedilo prikaže v drugi vrstici. Te oznake vam lahko pomagajo ustvariti odstavke in prelome vrstic ali razporediti besedilo na druge načine:

   • Skrajšana za "odstavek", ta oznaka bo ohranila vse besedilo med temi oznakami v odstavku in ga ločila od besedila nad in pod njim.

   • 
     Ta oznaka bo ustvarila prelome vrstic. Ne dodajajte mu končne oznake, saj ne moti nobene druge vsebine. To oznako uporabite v pesmih ali naslovnih vrsticah, ne v odstavkih.

   • Če morate besedilo prikazati zelo natančno, ta oznaka nastavi besedilo v njem na pisavo s fiksno širino (vsaka črka ima enako širino) in omogoča ustvarjanje intervalov prazne in prelome vrstic, kot želite, za redno urejanje namesto uporabe oznak.

   • Ta oznaka določa vrsto besedila, ki je citirano iz vira.

     Vir lahko kasneje opišete z citiraj kartico.

5. 

   Dodajte nevidno besedilo napisa. Oznake komentarjev niso prikazane na spletni strani. Omogočajo vam, da se v dokument HTML pripišete, ne da bi to vplivalo na njegovo vsebino. Ne dodajajte končne oznake.
   • Karte, ki gredo same brez končnih oznak, se imenujejo "prazne oznake".

6. 

   Združite jih skupaj. Najboljši način, da si zapomnite te oznake, je, da jih uporabite na svojem spletnem mestu. Tu je primer uporabe kart v dosedanjih korakih. Poskusite predvideti, kako se bodo prikazali v brskalniku, nato jih kopirajte v svoj dokument in ugotovite.
   • Dobrodošli na moji spletni strani.

   • Upam, da boste uživali na tej strani!

     Naredil sem ga samo za vas.

   • 1. del: Kako sem odkril HTML

   • HTML sem se naučil že v eno dvaure, tako da sem zdaj strokovnjak.
   oglas

Del 3 od 4: Dodajanje povezav in slik

1. 

   Spoznajte atribute. V oznake so lahko zapisane dodatne informacije, imenovane atributi. Ti atributi so predstavljeni z dodatnimi besedami znotraj samih oznak v obliki ime lastnosti = "določena vrednost". Na primer, katera koli oznaka HTML lahko ima atribut naslova:

   • Uvodni odstavek je tukaj.

     Odstavek naslovite kot »Uvod«, ki se prikaže, ko na spletni strani premaknete miškin kazalec nad odstavek.

2. 

   Povezave do drugih spletnih mest. Uporaba kart da ustvarite hiperpovezavo do katere koli druge spletne strani. Vstavite URL spletne strani, na katero želite povezati z uporabo atributa href. Tu je primer povezave do spletne strani, ki jo berete:
   • Obiskovalci vašega spletnega mesta lahko kliknejo to besedilo, da sledijo povezavi.

3. 

   Oznaki dodajte atribut id. Drug atribut, ki ga lahko uporabi katera koli oznaka HTML, je element "id". V katero koli kartico napišite id = "vidu" ali uporabite katero koli ime, ki ne vsebuje presledkov. Ne povzroča nobenega vidnega učinka, vendar ga bomo uporabili v naslednjem koraku.
   • Na primer v dokument dodajte naslednje:

     Ta odstavek se uporablja kot primer za opis delovanja atributa id.

4. 

   Povezava do elementa z določenim id. Zdaj lahko uporabimo oznako hiperpovezave, , za povezavo do drugega mesta na isti strani. Namesto URL-ja bomo uporabili simbol #, čemur sledi vrednost id, na katero se želimo povezati. Na primer To besedilo bo vodilo do besedila z ID-jem "vidu".
   • Vse vrednosti HTML so občutljive na velike in male črke. "#VIDU" in "#vidu" se bosta povezali na isto lokacijo.
   • Če je vaša stran dovolj kratka, da lahko prikaže celotno stran hkrati, verjetno ne boste opazili ničesar, ko kliknete povezavo v brskalniku. Spremenite velikost okna, dokler se ne prikaže drsnik, in poskusite znova.

5. 

   Dodajte fotografije. Kartica je prazna oznaka, kar pomeni, da končna oznaka ni potrebna. Vse informacije, ki jih brskalnik potrebuje za prikaz slike, se dodajo z uporabo atributov. Tu je primer za prikaz logotipa wikiHow z opisom vsakega atributa:
   • 
   • Lastnosti src = "" brskalniku pove, kje je fotografija. (Upoštevajte, da je objava fotografije s strani nekoga drugega neprimerna - in slika izgine, ko stran ne bo več aktivna.)
   • Lastnosti style = "" Naredi lahko marsikaj, predvsem pa se uporablja za nastavitev širine in višine slike v slikovnih pikah. (Namesto tega lahko uporabite tudi ločena atributa width = "" in height = "", vendar lahko to povzroči čudne težave s spreminjanjem velikosti, če uporabljate CSS.)
   • Lastnosti alt = "" je kratek opis slike, ki jo bo uporabnik videl, če slike ni bilo mogoče naložiti. To velja za zahtevo, saj se uporablja za bralnike zaslona za slepe obiskovalce spletnega mesta.
   oglas

4. del od 4: Več o dodajanju in dostopu do vašega spletnega mesta

1. 

   Potrdite svoj HTML. Preverjanje HTML preverja napake v kodi. Če se vaše spletno mesto ne prikazuje pravilno, vam lahko validacija pomaga najti napako, ki povzroča težavo. Prav tako vas lahko nauči več o HTML-ju, tako da ugotovi, da je koda videti dobro na zaslonu, vendar ni več priporočljiva zaradi novih posodobitev standarda HTML. Če uporabljate neveljaven HTML, vaše spletno mesto ne postane neuporabno, lahko pa povzroči težave ali prikaže nestabilen prikaz v različnih brskalnikih.
   • Preizkusite brezplačno spletno storitev preverjanja veljavnosti W3C ali poiščite drugo orodje za preverjanje HTML 5 v spletu.

2. 

   Preberite več o oznakah in atributih. Obstaja veliko drugih oznak in atributov HTML in veliko krajev, kjer se jih lahko naučite:
   • Preizkusite w3schools in HTML Dog za več vadnic in popolne sezname oznak.
   • Poiščite spletno stran, ki vam je všeč, kako izgleda, nato pa v brskalniku uporabite funkcijo »Ogled vira strani«, da sami pridobite kodo HTML. Kopirajte ga v dokument in preučite, kako deluje.
   • Preberite druge članke in se naučite, kako ustvariti tabele v HTML-ju, uporabite metaoznake, da povečate možnosti, da vas najdejo iskalniki, ali uporabite oddelek. nastavite območje na strani) in razpon (ki se uporablja za določanje sloga elementa besedila) za lažje oblikovanje s pomočjo CSS.

3. 

   Pridobite spletno mesto na spletu. Izberite storitev za gostovanje vašega spletnega mesta, nato pa lahko v svojo osebno spletno domeno naložite toliko strani HTML, kot želite. Če želite to narediti, boste morali uporabiti programsko opremo za nalaganje FTP, vendar številne storitve spletnega najema ponujajo tudi to storitev.
   • Pri povezavi do strani ali slik, ki so neposredno na vašem spletnem mestu, boste morali uporabiti celoten naslov. Če je na primer vaše ime domene www.chuyengiahtmlsieudang.com, potem besedilo je v teh oznakah se bo povezal na "www.chuyengiahtmlsieudang.com/nhatky/thuhai.html"

4. 

   Dodajte sloge s CSS. Če je vaša stran HTML videti nekoliko enolična, se poskusite naučiti osnov CSS-ja, da dodate barve, različne pisave in boljši nadzor nad tem, kam so postavljeni elementi. Če povežete "tabelo slogov" CSS na stran HTML, boste lahko sproti spreminjali in dinamično prilagajali slog celotnega besedila znotraj dane oznake. Tu se lahko nekoliko poigrate z osnovno plastjo za oblikovanje ali pa se potopite v podrobnejše vadnice v vadnici CSS za HTML Dog.

5. 

   Dodajte JavaScript na svoje spletno mesto. JavaScript je programski jezik, ki se uporablja za dodajanje veliko funkcionalnosti vašim stranim HTML. Ukazi JavaScript so vstavljeni med začetno in končno oznako , in se lahko uporablja za dodajanje interaktivnih gumbov, izračun matematičnih problemov in še več. Več o tem v primerih w3c. oglas

Nasvet

• Deklaracija dokumenta (uporabljena deklaracija vrste dokumenta), uporabljena v tej vadnici, je "ohlapen prehod HTML 4.0.1" (HTML 4.0.1 ni tesen prehod), enostavna oblika. za začetnike. Uporaba () namesto, da bi ga brskalnik sestavil v strogem formatu HTML 5, kar je priporočljiv (čeprav manj pogosto uporabljen) standardni slog.

Opozorilo

• Namen HTML je ohraniti vsebino v globalni obliki. Nima nadzora nad predstavitvijo vašega spletnega mesta, kot sta barva ozadja in natančna postavitev elementov. Čeprav še vedno obstajajo oznake, ki vam to omogočajo, je dobro uporabiti CSS za ustvarjanje bolj nadzorovanega in doslednega spletnega mesta.

Kaj rabiš

• Preprost urejevalnik besedil, na primer NotePad ali TextEdit
• Spletni brskalnik, kot sta Internet Explorer ali Mozilla Firefox
• (Izbirno) Urejevalnik HTML, kot so Adobe Dreamweaver, Aptana Studio ali Microsoft Expression Web