5 korakov za razumevanje osnovne kode HTML

5 korakov za razumevanje osnovne kode HTML

HTML je pomemben del spleta, kakršnega poznamo. In čeprav le malo spletnih oblikovalcev ustvarja strani z ročnim vnosom HTML, je še vedno priročno vedeti nekaj o tem.





Pogledali bomo nekaj osnov jezika, vključno s tem, kaj HTML v resnici je, nekaj temeljnih konceptov in njegovo interakcijo z drugimi jeziki. Pomislite na to kot na zrušitveni tečaj HTML za lutke.



Osnove HTML: Kaj je HTML?

HTML pomeni Jezik označevanja hiperteksta . Čeprav je včasih povezan s programskimi jeziki, to ni točno.





Kot označevalni jezik , HTML vam omogoča samo ustvarjanje prikaza strani. Resnica programski jezik tako kot Java ali C ++ vsebuje logiko in ukaze, ki se izvajajo.

Čeprav je preprost, je HTML hrbtenica vsake strani v spletu. Odgovoren je za tisto besedilo, ki je prikazano kot krepko, za dodajanje slik in povezovanje na druge strani. Imamo pogosta vprašanja o HTML -ju, ki pojasnjujejo več.



Z desno miškino tipko kliknite večino spletnih strani v brskalniku in izberite Ogled vira ali podobno, če si želite ogledati HTML za njimi. To bo verjetno vsebovalo tudi veliko kode, ki ni HTML, vendar jo lahko presežete.

Tudi če nimate izkušenj z označevalnimi ali programskimi jeziki, boste s spoznavanjem HTML -ja postali bolj obveščen spletni uporabnik. Pojdimo skozi pet osnovnih korakov, ki vam bodo pomagali razumeti, kako deluje HTML. Na poti bomo podali primere.



1. korak: Razumevanje pojma oznak

HTML uporablja sistem oznake kategorizacijo različnih elementov dokumenta.

Večina oznak je v parih, da v njih zavijejo prizadeto besedilo. Tukaj je preprost primer (



oznaka naredi besedilo krepko ; v kratkem se bomo o tem bolj pogovorili.)

This is some bold text .

Opazite, kako se zaključna oznaka začne s poševnico naprej (/). To pomeni zaključno oznako, kar je pomembno. Če oznake ne zaprete, bo vse od začetka dalje imelo ta atribut.

kako poslati datoteke v drug računalnik

Vendar nimajo vse oznake para. Nekateri elementi HTML, imenovani prazni elementi , nimajo vsebine in obstajajo sami. Primer je


tag, ki je prelom vrstice. Takšne oznake lahko 'zaprete' tako, da dodate poševnico (npr


), vendar to ni nujno potrebno.

2. korak: Skeleton HTML Layout

Ustrezen dokument HTML mora imeti določene oznake, da je pravilno postavljen. To so bistveni deli:

  • Vsak dokument HTML se mora začeti z | _+_ | da se kot tak razglasi. Tako je njegova zaključna oznaka, | _+_ | , je zadnji element v datoteki HTML.
  • Nato, | _+_ | razdelek vsebuje informacije, kot so naslov strani, različni skripti, ki se izvajajo na strani, in podobno. Kot že ime pove, to običajno pride takoj po začetnem | _+_ | oznaka. Končni uporabnik ne vidi veliko vsebine v teh oznakah.
  • Končno je | _+_ | tag vsebuje besedilo strani, ki ga bralec vidi (in še veliko več). Tu boste našli slike, povezave in drugo.

Ker je

Odsek predstavlja večino dokumenta HTML, preostanek našega navodila obravnava elemente, ki se nanj nanašajo.

3. korak: Osnovne oznake HTML za oblikovanje

Nato poglejmo nekaj skupnih oznak, ki sestavljajo dokumente HTML. Seveda ni mogoče zajeti vseh elementov, zato bomo pregledali nekaj najpomembnejših. Pokrili smo še veliko primerov HTML če te te ne zadovoljijo.

Če se vam zdijo te oznake precej osnovne, ne pozabite, da je bil HTML ustvarjen vse do leta 1993. Splet je takrat v zgodnjih fazah zelo pisal besedilo.

Enostavno oblikovanje besedila

HTML podpira osnovne sloge besedila, kot jih najdete v programu Microsoft Word:

  • | _+_ | oznake naredijo besedilo krepko .
  • | _+_ | oznake (kar pomeni 'poudarek') bo poševno besedilo.

HTML podpira tudi starejše

oznaka za krepko in

za poševno pisavo. Vendar je bolje uporabiti zgornje.

V kratkem,

in

kažejo, kako je treba nekaj razumeti, slednje pa samo povedo, kako bi moralo biti videti. Te stare oznake so bolj dostopne bralcem zaslona, ​​ki jih uporabljajo slabovidni.

Odstavek in drugi oddelki

HTML -jev

tag vam omogoča, da določite del dokumenta. Običajno je to združeno s CSS (glej spodaj) za oblikovanje razdelka na določen način.

The

tag vam omogoča, da besedilo razdelite na odstavke. Brskalniki bodo samodejno namestili nekaj prostora pred in po tem, kar vam bo omogočilo naravno razbijanje besedila.

V dokument lahko dodate glave in olajšate sledenje z uporabo

skozi

oznake. H1 je najpomembnejša glava, H6 pa najmanj. Skoraj vsak članek MakeUseOf uporablja glave H2 in H3 za organiziranje informacij.

Zadetki Vnesite če dodate prelome vrstic v dokument HTML, jih dejansko ne prikaže. Namesto tega lahko uporabite

za dodajanje preloma vrstice.

Tukaj je primer, ki uporablja vse to:

4. korak: Vstavljanje slik

Slike so pomemben del večine spletnih strani. Z lahkoto jih lahko dodate s HTML -jem in jim celo nastavite različne lastnosti.

Sliko vstavite s pomočjo

oznaka. Če to združimo s

Atribut vam omogoča, da določite, od kod želite naložiti sliko.

Še ena pomembna lastnost

wifi hitreje v telefonu kot prenosnik

oznake je

. Nadomestno besedilo vam omogoča opis slike za bralnike zaslona ali v primeru, da se slika ne naloži pravilno. Za prikaz nadomestnega besedila lahko premaknete miškin kazalec.

Uporabi

in




elementi, ki določajo število slikovnih pik, pri katerih se slika prikaže.

Vse skupaj sestavi in ​​oznaka slike izgleda tako:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



Svetovni splet ne bi bil velik splet brez povezav do drugih strani. Uporabljati

oznako, lahko se povežete na druge strani v katerem koli besedilu.

Znotraj

src

oznaka,

Atribut pove, kje povezujete. Preprosto lepljenje URL -ja bo delovalo v redu. Uporabite lahko

alt

element, da dodate malo besedila, ki se prikaže, ko nekdo premakne miškin kazalec nad povezavo.

Osnovna povezava izgleda tako:

width

The

height

tag ima veliko drugih možnih elementov, vendar se tu ne bomo poglabljali.

Kako se HTML poveže s CSS in JavaScript

Preučili smo osnove HTML -ja in kako vzpostavlja spletno stran. Toda kot si lahko predstavljate, HTML sam za sodobni splet ni primeren. Enostavne spletne strani HTML so bile pogoste v dneh »Spleta 1.0«, ko večina spletnih mest ni bila nič drugega kot statično besedilo.

Zdaj pa imamo še veliko več. CSS (Cascading Style Sheets) je jezik, ki opisuje, kako naj bi izgledalo besedilo, ki ste ga pripravili v HTML. Zapomnite si

Dr. Phil

oznaka, o kateri smo razpravljali? Znotraj te (in drugih oznak) lahko določite

atribut. Nato lahko v priloženi dokument CSS napišete navodila za to

bi morali pogledati.

Te slogovne elemente lahko definirate v svoji kodi HTML, vendar se to šteje za slabo prakso, saj je njihovo vzdrževanje veliko težje. Več o tem z te preproste primere CSS . Preverite tudi kako optimizirati datoteke CSS .

JavaScript

Videli smo, da HTML določa vsebino, CSS pa videz. JavaScript, zadnji član trojice, pomembne za splet, omogoča spletnim stranem, da se odzovejo na dejanja ljudi, ne da bi vsakič naložili novo stran.

JavaScript na primer omogoča, da vas spletno mesto opozori, da geslo, ki ste ga vnesli, ne izpolnjuje njegovih zahtev, preden ga poskusite predložiti. Spletni oblikovalec lahko uporablja JavaScript za premikanje po slikah v diaprojekciji ali uporabnika pozove k vnosu.

To je le nekaj osnovnih primerov. JavaScript je skriptni jezik, ki zmore veliko in je razmeroma veliko bolj zapleten kot HTML in CSS. Glej naš pregled JavaScript za veliko več.

Pregled celotnega obsega spletnega oblikovanja presega obseg tega članka, vendar je dovolj reči, da HTML sodeluje z drugimi jeziki, da ustvari spletne strani, ki jih poznamo danes.

Evolucija HTML -ja

Pomembno je omeniti, da HTML ni statičen. HTML je doživel več revizij, zadnja je bila HTML 5. Predvsem ta standard podpira vdelavo domačih videov, namesto da se zanaša na lastniške oblike, kot je Adobe Flash.

Nove iteracije HTML prav tako občasno razglasijo nekatere zastarele oznake za zastarele. Ti vključujejo grozne oznake, kot so

href

in

title

(to drsno in utripajoče besedilo), ki se pogosto pojavlja pri oblikovanju spletnih mest v devetdesetih letih. Zato ne pozabite, da se standardi sčasoma spreminjajo.

Malo znanja HTML je daleč

Na kratko smo si ogledali, kako deluje dokument HTML. Zdaj poznate osnove strukture spletnih strani. Tudi če ne gradite spletnih strani, ste nekoliko bolj ozaveščeni o spletu, ki ga uporabljate vsak dan.

zakonito brezplačno prenašanje glasbe za računalnik

Če želite izvedeti več, nadgradite svoje sposobnosti spletnega razvoja z osnovnimi orodji in se nato odjavite naš vodnik o tem, kako oblikovati svojo prvo spletno stran .

Zasluga za sliko: Belyaevskiy/ Depositphotos

Deliti Deliti Cvrkutati E-naslov 5 nasvetov za polnjenje vaših strojev VirtualBox Linux

Ste naveličani slabe zmogljivosti, ki jo ponujajo virtualni stroji? Tukaj je tisto, kar morate storiti za povečanje zmogljivosti VirtualBox.

Preberite Naprej Sorodne teme
  • Programiranje
  • HTML
  • Spletni razvoj
  • JavaScript
  • Orodja za spletne skrbnike
  • Programiranje
  • HTML5
O avtorju Ben Stegner(1735 objavljenih člankov)

Ben je namestnik urednika in vodja vključevanja v MakeUseOf. Leta 2016 je zapustil službo IT, da bi pisal s polnim delovnim časom, in se nikoli ni ozrl nazaj. Že več kot sedem let pokriva tehnične vaje, priporočila za video igre in še več kot poklicni pisatelj.

Več od Bena Stegnerja

Naročite se na naše novice

Pridružite se našemu glasilu za tehnične nasvete, ocene, brezplačne e -knjige in ekskluzivne ponudbe!

Kliknite tukaj, da se naročite