Mikä on HTML?

HTML tarkoittaa hypertekstin merkintäkieltä, joka on joukko ennalta määritettyjä elementtejä, joita kutsutaan myös tunnisteiksi ja jotka kertovat selaimelle, että sisältö näytetään ja kuinka sisältö näytetään. Se tarkoittaa, että voin ottaa tyhjän tekstitiedoston, lisätä HTML-tunnisteita ja selain tietää, kuinka Web-sivuni näytetään.

Mikä on tunniste?

Tunniste on ohje, joka kertoo selaimelle, kuinka sen tulisi näyttää tietty sisältö näytöllä. Joskus kehittäjät saattavat viitata tunnisteisiin elementteinä. Tässä on esimerkki merkinnästä, jonka sisällä on tekstiä.

Tämä tunniste tunnetaan otsikkotunnisteena. Tunnisteen h-merkki antaa meille ja selaimelle tietää, että työskentelemme otsikkotunnisteen kanssa. H: tä seuraava osoittaa käytetyn otsikon koon. Tässä tapauksessa 1 on suurin oletusteksti, jonka olet voinut näyttää selaimessa. Tämän tunnisteen tuloste selaimessa näyttää Hello World!

Mikä on ominaisuus?

Attribuutti on lisäarvo, joka voi määrittää tunnisteen tai joka voi säätää tunnisteen käyttäytymistä. Tässä on täydellinen esimerkki tunnisteesta, johon on lisätty attribuutti

Lisää pizza

Id-määritteen arvo voi olla mikä tahansa, jonka haluat sen olevan, vaikka siinä ei voi olla tilaa. Toinen ominaisuus on luokan ominaisuus. Luokkaattribuutti voi ottaa useita arvoja, jotka voivat olla mitä haluat niiden olevan.

Globaali ominaisuus

Globaali attribuutti voidaan asettaa kaikille tunnisteille. Siirrytään neljään yleisimmin käytettyyn globaaliin attribuuttiin.

  • id: Ensimmäinen on id-määrite. Tämä ei lisää mitään visuaalista muutosta itse tunnisteeseen. Sitä käytetään pääosin JavaScriptiin ja muotoiluun, CSS: n (Cascading Style Sheets) kanssa. ID-määritteen arvon on oltava ainutlaatuinen tietyllä sivulla. Tämä tarkoittaa, että kahdella tunnisteella ei voi olla sama arvo tunnuksessa
  • class: class -attribuutti on samanlainen kuin id-tunniste, paitsi että attribuutin arvo voidaan toistaa useita kertoja tietyllä sivulla. Löydät ne, joita käytetään enimmäkseen CSS: n ja joskus JavaScriptin kanssa.
  • style: style -määritteitä käytetään Inline CSS: ssä. Sitä tulisi välttää, jos mahdollista.
  • otsikko: otsikko tarjoaa tunnisteen tai tyyppien työkaluvipun. Kun hiiri on leijautunut tunnisteen päälle, missä otsikko on näkynyt.

Esimerkiksi

Tervetuloa!

Estä tasoelementti vs. rivielementti

Seuraavat ovat Block level -elementin ja Inline-elementin määritteet.

Estä tasoelementti

  • Täyttää vanhemmisäiliön koko leveyden.

Sisäinen elementti

  • Ottaa nykyisen tilan, joka on olemassa.

Tässä on peruskuva.

Tämä vihreä alue edustaa emosäiliötä. Meidän tapauksessamme se on selainikkuna. Selaimen, vanhemman tunnistemme, leveys on lohkotason elementin leveys.

Nämä vaaleanpunaiset alueet edustavat lohkotason elementtejä tai tunnisteita. Kuten voitte nähdä, ne vievät emosäiliön koko leveyden. Tämä tarkoittaa, että kaikkien tunnisteiden on alkava seuraavalla rivillä.

Nämä kolme seuraavaa sinistä aluetta ovat Inline-tunnisteet. Kuten näette, ne sijaitsevat vierekkäin, ottaen vain halutun leveyden, jota tarvitaan heidän hallussaan olevaan sisältöön. Tämä on järkevämpää, kun näemme nämä tunnisteet toiminnassa

Erilaiset HTML-perustunnisteet

Oppitaan erilaisia ​​HTML-tunnisteita.

1) Tunniste - DOCTYPE

DOCTYPE kertoo selaimelle, millainen tiedosto avataan. Koska koodaamme HTML5: ssä. HTML5 on HTML-merkintäkielen uusin versio, DOCTYPE on erittäin yksinkertainen. Huomaa, sulkevaa tunnistetta ei ole.

DOCTYPE on aivan kuten tavallinen tunniste ja alkaa hakasulkeella. Laitamme sitten huutomerkkiin ja kirjoitamme sitten DOCTYPE. Meillä on tilaa ja kirjoitamme sitten html. Tämä tunniste kertoo käytännössä selaimelle, hei, nämä asiakirjat on toimitettava HTML-muodossa.

2) Tunniste - html

HTML-tunniste, jota kutsutaan myös juurielementiksi, seuraa DOCTYPE-tunnistetta. Tällä tunnisteella voi olla normaalit globaalit määritteet plus määrite nimeltään manifest. HTML-tunnistetta voidaan käyttää vain kerran HTML-sivulla.

Kaikki HTML: ään liittyvä sisältyy tähän tunnisteeseen. Tämä tarkoittaa, että kaikki tunnisteemme sijaitsevat HTML-tunnisteiden avaamisen ja sulkemisen välillä.

3) Tag - pää

Otsakilpi tarjoaa yleisiä tietoja näytöllä olevasta verkkosivusta. Päätunnisteeseen lisätään erillinen tunniste, joka antaa selaimelle tietää tietyt yksityiskohdat, kuten sivun otsikon, sivun kirjoittajan ja muut sellaiset tiedot.

Mikään tässä otsikkotunnisteessa ei näy verkkosivulla. Jotkut tiedot, kuten välilehden otsikko, näkyvät kuitenkin varsinaisessa selainsovelluksessa. Tälle tunnisteelle on saatavana yleisiä globaaleja määritteitä.

4) Tag - runko

Rungotunniste antaa selaimelle tietää, mitä sivulla näytetään. Ruumiin sisällä tunniste sijoittaa kaiken sisältömme, kuten tunnisteet ja tekstin. Kaikki kehotunnisteen sisällä olevat asiat näytetään verkkosivulla.

Rungotunniste asetetaan päätunnisteen jälkeen HTML-tunnisteen sisään. Sivua kohden on vain yksi tunniste. Rungotunnisteella voi olla normaalit globaalit määritteet.

5) Tag - span

Ensimmäinen tagimme on span tag. Tämä tunniste on yleinen Inline-säilö. Tämä tarkoittaa, että siihen ei ole liitetty oletustyyliä. Haluat käyttää tätä tunnistetta, jos tarvitset ryhmitellä tekstejä, jotka haluat pitää yhdessä rivissä.

6) Tag - s

Kappaletagia tai p-tagia käytetään, kun haluat pitää tekstin kappaleen yhdessä. Tämä elementti on lohkotason elementti, mikä tarkoittaa, että se vie emorasiansa leveyden. Ihanteellinen käyttö olisi, kun sinulla on paljon tekstiä näytettäväksi. Vain globaalit määritteet ovat sallittuja tälle elementille.

7) Tag - div

Jakotunniste, tai yleisesti tunnettu nimellä div-tunniste, on yleinen lohkosäiliö. Tämä tarkoittaa, että voit ryhmitellä paljon tageja yhdessä muodostaen osan sivustostasi. Tämä tunniste on globaalit määritteet.

8) Tunniste - alaosa

Alaindeksitunniste tai alamerkki sallii seuraavan olla normaalin tekstirivin alapuolella. Se on Inline-elementti, koska se käyttää globaaleja määritteitä. Täydellinen esimerkki käytöstä olisi saada H2O: ssa olevat 2 näyttämään vähän.

Esimerkki: H20

9) Tag - sup

Yläkooditunniste tai sup-tunniste, joka on rivielementti, sallii tekstin olla normaalin tekstirivin yläpuolella. Esimerkki olisi matematiikkayhtälön käsittelemisessä. Huomaa, että 2 on korkeampi kuin tämän yhtälön muu teksti.

Esimerkki: E = mc 2

Tämä on globaali ominaisuus.

10) Tunniste - u

  • U tarkoittaa alleviivausta. Tämä korostaa avoimen ja suljetun tunnisteen tekstiä. Se on inline-elementti ja globaali ominaisuus.

11) Tunniste - em

Em-tunniste tarkoittaa painotusta. Tällöin ajatus minkä tahansa tekstin korostamisesta saa tekstin näyttämään kursivoitulta tai kaltevalta. Tätä rivielementtiä käytetään, kun haluat ilmaista tietty painotus tekstin osiin. Tämä on globaali ominaisuus.

12) Tag - vahva

Jos haluat joskus tehdä tekstistä lihavoidun, käytä vahvaa tunnistetta. Tämä sisäinen tunniste on sijoitettu lihavoidun tekstin ympärille. Aivan kuten korostustunniste. Vahva tunniste antaa Web-sivustosi tekstille tärkeyden.

13) Tag - br

BR-tagi seisoo tauolla. On joitain tunnisteita, jotka eivät tarvitse sulkevaa tunnistetta. Se ei ole lohko- ja rivielementti. Se on globaali ominaisuus.

14) Tag - hr

HR-tunniste ei myöskään tarvitse sulkevaa tunnistetta sen suorittamiseksi. Hr-tagi, joka tarkoittaa vaakatasoa, luo rivin verkkosivulle. Se on lohkotason elementti. Se on globaali ominaisuus.

Sisäiset elementit / tunnisteet

  • Pesäkkeet
  • Jos yksi tunniste on toisen tunnisteen sisällä

esimerkki

16) Tag - li

Listaelementin pysyvä li-tunniste on sisäkkäinen tunniste. Li-tunnisteen sisälle laitat kaikenlaista sisältöä, joka on luettelo.

17) Tag - ol

Tilattua luetteloa edustava ol-tunniste on sisäkkäisen li-tunnisteen säilö. Et koskaan näe näitä kahta tunnistetta, li- tai ol-tunnistetta, yksinään. Koska tämä on tilausluettelo, joka tarkoittaa luettelon kunkin kohdan vieressä, on arvo.

Oletuksena luettelo käyttää numeroita.

määritteet

Globaali, käänteinen, aloitus, tyyppi (a, A, I, i)

18) Tag - ul

Ul-tunniste tai järjestämätön luettelo on sisäkkäisen li-tunnisteen säilö, aivan kuten ol-tunniste. Mutta toisin kuin ol-tunniste, joka näyttää numeroarvon jokaisen luettelon kohteen vieressä, tämä ul-tunniste tarjoaa vain luettelomerkkien luettelon kohteiden viereen.

19) Tunniste - h1, h2, h3, h4, h5, h6

Otsikkotunnisteita on yhteensä kuusi. Jokaisella näistä on oma numero, joka alkaa välillä 1 - 6. H1-tag ja kaikki muut otsikkotunnisteet tarjoavat lyhyen kuvauksen osasta tekstiä tai sisältöä. Nämä tunnisteet ovat globaaleja määritteitä.

20) Tunniste - a

Tunniste tai ankkuritunniste on suosittu tunniste, koska se luo linkkejä verkkosivuston muille sivuille ja se voi luoda linkkejä ulkopuolisiin verkkosivustoihin. Tunniste on inline-elementti, ja siinä on lukuisia ominaisuuksia siihen liittyvien globaalien ominaisuuksien lisäksi.

Hei maailma!

Yksi ylimääräinen ominaisuus, jonka mainitsemme, on href. Tämä tarkoittaa hypertekstin viitettä. Tärkeintä on muistaa, että href on ominaisuus, jolle tarjoamme polun, jotta voimme linkittää toiselle sivulle tai toiselle verkkosivustolle.

Ominaisuus, href. Ja me haluamme aina laittaa lopputunnisteemme. Linkki takaisin Google.com-verkkosivustoon.

ulostulo

21) Tunniste - kuva

Img-tunniste tai kuvatunniste antaa meille mahdollisuuden näyttää kuvia sivuillamme.

Nyt huomaat tässä esimerkissä, että kuvatunnisteella ei ole sulkevaa tunnistetta. Tämä on yksi kourallisista tunnisteista. Mutta toisin kuin br tag ja hr tag, merkitsemme tämän tunnisteen loppua eteenpäinviivalla. Jotkut saattavat itse asiassa viitata tähän oikotieksi tapaan kirjoittaa sulkeva tunniste.

Src-attribuutti ja alt-attribuutti. Src tai lähdeattribuutti, kuten esimerkistä näet, vaaditaan.

Nyt tämän ominaisuuden arvo on polku kuvaan, jonka haluaisimme näyttää. Polku voi olla joko ehdoton polku tai suhteellinen polku. Toinen ominaisuus on alt-attribuutti. Tämä tarkoittaa vaihtoehtoa. Alt-arvon tulisi kuvaa kuvaa. Alt-teksti näkyy selaimessa kuten alla.

Johtopäätös - HTML-tunnisteet

HTML on kirjaimellisesti hämmästyttävän valtava aihealue, jolla ajatellaan olevan hallussaan. Kun olet onnistunut saamaan niin paljon, olet kylläkin enemmän kuin täydellisesti kykenevä evoluutiovoiman etuosaan. Sinun on oltava paljon turvallisempi hajottamalla verkkosivu niiden elementtikohteisiin ja sen jälkeen koodiin, joka liittyy HTML: ään ja CSS: ään.

Suositellut artikkelit

Tämä on opas HTML-tunnisteisiin. Täällä keskustellaan myös Mikä on tagi? ja erilaisia ​​HTML-perustunnisteita sekä attribuutin? merkitys. Saatat myös katsoa seuraavia artikkeleita saadaksesi lisätietoja -

  1. Johdanto HTML: ään
  2. Opi XHTML-käsite
  3. Mitkä ovat HTML-määritteet?
  4. HTML-sovellukset
  5. HTML-luettelotyylien esittely
  6. HTML-kehykset
  7. HTML-esteet

Luokka:

Web-kehitystyökalut