5 koraka za razumijevanje osnovnog HTML koda

5 koraka za razumijevanje osnovnog HTML koda

HTML je vitalni dio weba kakvog poznajemo. I dok nekoliko web dizajnera stvara stranice ručnim upisivanjem HTML -a, ipak je zgodno znati malo o tome.





Pogledat ćemo neke osnove jezika, uključujući ono što HTML zapravo jest, neke temeljne koncepte i njegovu interakciju s drugim jezicima. Zamislite ovo kao rušni tečaj 'HTML za lutke'.



Osnove HTML -a: Što je HTML?

HTML označava Jezik označavanja hiperteksta . Iako je ponekad povezan s programskim jezicima, to nije točno.





Kao jezik za označavanje , HTML omogućuje samo stvaranje prikaza stranica. Istina programski jezik , poput Jave ili C ++, sadrži logiku i naredbe koje se izvršavaju.

Iako je jednostavan, HTML je okosnica svake stranice na webu. Odgovoran je za ono što se tekst prikazuje podebljano, dodavanje slika i povezivanje s drugim stranicama. Imamo HTML FAQ koji objašnjava više.



Možete desnom tipkom miša kliknuti većinu web stranica u pregledniku i odabrati Pogledaj izvor stranice ili slično da biste vidjeli HTML iza njih. Ovo će vjerojatno sadržavati i mnogo koda koji nije HTML, ali to možete pregledati.

Čak i ako nemate iskustva s označavanjem ili programskim jezicima, učenje o HTML -u učinit će vas informiranijim korisnikom weba. Prođimo kroz pet osnovnih koraka koji će vam pomoći razumjeti kako HTML funkcionira. Usput ćemo navesti primjere.



Korak 1: Razumijevanje koncepta oznaka

HTML koristi sustav oznake kategorizirati različite elemente dokumenta.

Većina oznaka dolazi u parovima kako bi u njih umotali zahvaćeni tekst. Evo jednostavnog primjera (



oznaka čini tekst podebljano ; o ovome ćemo razgovarati još jednom.)

This is some bold text .

Primijetite kako završna oznaka počinje kosom crtom (/). To označava završnu oznaku, što je važno. Ako ne zatvorite oznaku, sve će od početka pa nadalje imati taj atribut.

kako staviti homebrew na wii

Međutim, nemaju sve oznake par. Neki HTML elementi, tzv praznih elemenata , nemaju sadržaj i postoje samostalno. Primjer je


tag, što je prijelom retka. Takve oznake možete 'zatvoriti' dodavanjem kose crte (kao što je npr


) ali to nije strogo potrebno.

Korak 2: HTML izgled skeleta

Ispravan HTML dokument mora imati određene oznake kako bi bio pravilno postavljen. Ovo su bitni dijelovi:

  • Svaki HTML dokument mora početi s | _+_ | da se tako izjasni. Dakle, njegova završna oznaka, | _+_ | , posljednja je stavka u HTML datoteci.
  • Zatim, | _+_ | odjeljak uključuje informacije poput naslova stranice, razne skripte koje se izvode na stranici i slično. Kao što naziv govori, to obično dolazi odmah nakon početnih | _+_ | označiti. Krajnji korisnik ne vidi mnogo sadržaja u ovim oznakama.
  • Konačno, | _+_ | oznaka sadrži tekst stranice koji čitatelj vidi (plus mnogo više). Ovdje ćete pronaći slike, veze i još mnogo toga.

Budući da je

odjeljak čini većinu HTML dokumenta, ostatak našeg prolaska razmatra elemente koji se na njega odnose.

Korak 3: Osnovne HTML oznake za oblikovanje

Zatim pogledajmo neke uobičajene oznake koje čine HTML dokumente. Naravno, nije moguće pokriti svaki element, pa ćemo pregledati neke od najvažnijih. Pokrili smo još mnogo primjera HTML -a ako vas ovo ne zadovoljava.

Ako vam se ove oznake čine prilično osnovnima, sjetite se da je HTML stvoren sve do 1993. godine. Web je tada bio još jako temeljen na tekstu u svojim ranim fazama.

Jednostavno oblikovanje teksta

HTML podržava osnovne stilove teksta kakve ćete pronaći u Microsoft Wordu:

  • | _+_ | oznake stvaraju tekst podebljano .
  • | _+_ | oznake (što znači 'naglasak') će kurzivom tekst.

HTML podržava i starije

oznaka za podebljano i

za kurziv. Međutim, poželjno je koristiti gore navedene.

Ukratko,

i

pokazuju kako nešto treba shvatiti, dok vam posljednje oznake samo govore kako bi to trebalo izgledati. Ove bivše oznake pristupačnije su čitačima zaslona koje koriste osobe sa oštećenim vidom.

Stavak i druge podjele

HTML -ovi

tag vam omogućuje definiranje dijela dokumenta. Obično je to upareno sa CSS -om (vidi dolje) za oblikovanje odjeljka na određeni način.

The

tag vam omogućuje da tekst podijelite u odlomke. Preglednici će automatski postaviti malo prostora prije i poslije ovih, dopuštajući vam da prirodno razbijete tekst.

Možete dodati zaglavlja u dokument i olakšati njegovo praćenje pomoću

kroz

oznake. H1 je najvažnije zaglavlje, dok je H6 najmanje važno. Gotovo svaki članak MakeUseOf koristi zaglavlja H2 i H3 za organiziranje informacija.

Udaranje Unesi dodavanje prijeloma retka u vaš HTML dokument neće ih zapravo prikazati. Umjesto toga, možete koristiti

za dodavanje prijeloma retka.

Evo primjera koji koristi sve ovo:

Korak 4: Umetanje slika

Slike su vitalni dio većine web stranica. Možete ih jednostavno dodati pomoću HTML -a, pa čak i postaviti im različita svojstva.

Možete umetnuti sliku pomoću

označiti. Kombinirajući ovo sa

Atribut omogućuje vam da odredite odakle želite učitati sliku.

Još jedan važan atribut

kako spojiti telefon na xbox one za gledanje filmova

oznake je

. Zamjenski tekst omogućuje vam da sliku opišete čitačima zaslona ili u slučaju da se slika ne učita pravilno. Možete prijeći mišem preko slike da biste vidjeli njen zamjenski tekst.

Koristiti

i




elemenata za određivanje broja piksela na kojima se slika prikazuje.

Sve to spojite, a oznaka slike izgleda ovako:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web ne bi bio mnogo web bez veza na druge stranice. Koristiti

oznaku, možete se povezati s drugim stranicama u bilo kojem tekstu.

Unutar

src

oznaka,

attribute govori gdje se povezujete. Jednostavno lijepljenje URL -a dobro će funkcionirati. Možete koristiti

alt

element za dodavanje malo teksta koji se pojavi kad netko zadrži pokazivač iznad veze.

Osnovna veza izgleda ovako:

width

The

height

tag ima mnogo drugih mogućih elemenata, ali ovdje nećemo ulaziti u njih.

Kako se HTML povezuje s CSS -om i JavaScript -om

Pogledali smo osnove HTML -a i način na koji uspostavlja web stranicu. No, kao što možete zamisliti, sam HTML ne služi za moderni web. Jednostavne HTML web stranice bile su uobičajene u danima 'Web 1.0', kada većina web stranica nije bila ništa više od statičkog teksta.

Ali sada imamo mnogo više. CSS (Cascading Style Sheets) je jezik koji se koristi za opisivanje izgleda teksta koji ste pripremili u HTML -u. Sjetite se

Dr. Phil

oznaka o kojoj smo razgovarali? Unutar ove (i drugih oznaka) možete definirati

atribut. Zatim u popratni CSS dokument možete napisati upute kako to učiniti

treba pogledati.

Ove elemente stila možete definirati umetnutim u svom HTML kodu, ali to se smatra lošom praksom jer ih je mnogo teže održavati. Saznajte više s ovih jednostavnih primjera CSS -a . Također provjerite kako optimizirati vaše CSS datoteke .

JavaScript

Vidjeli smo da HTML definira sadržaj, a CSS izgled. JavaScript, posljednji član trojca od vitalnog značaja za web, omogućuje web stranicama da reagiraju na radnje ljudi bez svakog učitavanja nove stranice.

Na primjer, JavaScript dopušta web stranici da vas upozori da lozinka koju ste unijeli ne ispunjava njegove zahtjeve prije nego što je pokušate poslati. Web dizajner može koristiti JavaScript za kruženje kroz slike u slideshowu ili zatražiti od korisnika unos.

Ovo je samo nekoliko elementarnih primjera. JavaScript je skriptni jezik koji može učiniti puno i relativno je kompliciraniji od HTML -a i CSS -a. Vidjeti naš pregled JavaScripta za mnogo više.

Razmatranje cjelokupnog opsega web dizajna nadilazi opseg ovog članka, ali dovoljno je reći da HTML komunicira s drugim jezicima kako bi stvorio web stranice koje poznajemo danas.

Evolucija HTML -a

Važno je napomenuti da HTML nije statičan. HTML je prošao kroz nekoliko revizija, od kojih je najnovija HTML 5. Značajno, ovaj standard podržava ugrađivanje izvornih videozapisa umjesto da se oslanja na vlasničke formate poput Adobe Flash -a.

Nove iteracije HTML -a također s vremena na vrijeme deklariraju određene arhaične oznake kao zastarjele. To uključuje užasne oznake poput

href

i

title

(s pomicanjem i flash tekstom) koji se uobičajeno pojavljuju u dizajnu web stranica 1990 -ih. Zato imajte na umu da se standardi mijenjaju s vremenom.

Malo HTML znanja ide dugim putem

Kratko smo obišli kako funkcionira HTML dokument. Sada znate osnove strukture web stranica. Čak i ako ne nastavite s izradom web stranica, malo ste svjesniji weba koji svakodnevno koristite.

kako napraviti gif svoju pozadinu

Da biste saznali više, nadogradite svoje vještine razvoja weba osnovnim alatima, a zatim se odjavite naš vodič o tome kako dizajnirati svoju prvu web stranicu .

Kredit za sliku: Belyaevskiy/ Depositphotos

Udio Udio Cvrkut E -pošta 5 savjeta za nadopunu vaših VirtualBox Linux strojeva

Umorni ste od loših performansi koje nude virtualni strojevi? Evo što biste trebali učiniti kako biste povećali performanse VirtualBox -a.

Pročitajte Dalje Povezane teme
  • Programiranje
  • HTML
  • Web razvoj
  • JavaScript
  • Alati za webmastere
  • Programiranje
  • HTML5
O autoru Ben Stegner(1735 objavljenih članaka)

Ben je zamjenik urednika i upravitelj za uključivanje u MakeUseOf. Napustio je svoj IT posao kako bi pisao s punim radnim vremenom 2016. godine i nikada se nije osvrnuo. Više od sedam godina pokriva tehničke vodiče, preporuke videoigara i više kao profesionalni pisac.

Više od Bena Stegnera

Pretplatite se na naše obavijesti

Pridružite se našem biltenu za tehničke savjete, recenzije, besplatne e -knjige i ekskluzivne ponude!

Kliknite ovdje za pretplatu