5 vaihetta HTML -peruskoodin ymmärtämiseen

5 vaihetta HTML -peruskoodin ymmärtämiseen

HTML on tärkeä osa verkkoa sellaisena kuin me sen tunnemme. Ja vaikka harvat web -suunnittelijat luovat sivuja kirjoittamalla HTML -koodin manuaalisesti, on silti kätevää tietää siitä hieman.





Tarkastelemme joitain kielen perusteita, mukaan lukien mitä HTML todella on, joitain peruskäsitteitä ja miten se on vuorovaikutuksessa muiden kielten kanssa. Ajattele tätä 'HTML for dummies' -kurssina.



HTML -perusteet: Mikä on HTML?

HTML tarkoittaa Hypertekstimerkinnän kieli . Ja vaikka se on joskus yhdistetty ohjelmointikieliin, tämä ei ole tarkka.





Kuten a merkintäkieli , HTML: n avulla voit luoda vain sivujen näyttöasettelun. Totuus ohjelmointikieli , kuten Java tai C ++, sisältää logiikkaa ja suoritettavia komentoja.

Vaikka HTML on yksinkertainen, se on jokaisen web -sivun selkäranka. Se on vastuussa siitä, mikä teksti näkyy lihavoituna, lisää kuvia ja linkittää muille sivuille. Meillä on HTML -usein kysytyt kysymykset, jotka selittävät enemmän.



Voit napsauttaa hiiren kakkospainikkeella useimpia selaimen verkkosivuja ja valita Näytä sivun lähdekoodi tai vastaava, jos haluat nähdä HTML -koodin takana. Tämä sisältää todennäköisesti myös paljon koodia, joka ei ole HTML, mutta voit selata sen läpi.

Vaikka sinulla ei olisi lainkaan kokemusta merkintä- tai ohjelmointikielistä, HTML -koodin oppiminen tekee sinusta tietoisemman verkkokäyttäjän. Käydään läpi viisi perusvaihetta, jotka auttavat sinua ymmärtämään, miten HTML toimii. Annamme esimerkkejä matkan varrella.



Vaihe 1: Tunnisteiden käsitteen ymmärtäminen

HTML käyttää järjestelmää tunnisteita luokitella asiakirjan eri osat.

Useimmat tunnisteet tulevat pareittain, jotta ne voivat kääriä tekstin sisälle. Tässä on yksinkertainen esimerkki (



tunniste tekee tekstin lihavoitu ; keskustelemme tästä lisää hetken kuluttua.)

This is some bold text .

Huomaa, kuinka päätöstagi alkaa vinoviivalla (/). Tämä tarkoittaa sulkemista, mikä on tärkeää. Jos et sulje tagia, kaikella on alusta alkaen kyseinen ominaisuus.

kuinka poistaa ponnahdusikkunoiden esto käytöstä Chromessa

Kaikilla tunnisteilla ei kuitenkaan ole paria. Jotkut HTML -elementit, ns tyhjiä elementtejä , niillä ei ole sisältöä ja ne ovat olemassa yksinään. Esimerkki on


-tagi, joka on rivinvaihto. Voit 'sulkea' tällaiset tunnisteet lisäämällä kauttaviivan (kuten


), mutta se ei ole välttämätöntä.

Vaihe 2: Luuranko HTML -asettelu

Oikeassa HTML -asiakirjassa on oltava tietyt tagit, jotka on määritetty oikein. Nämä ovat olennaisia ​​osia:

  • Jokaisen HTML -asiakirjan täytyy alkaa | _+_ | julistaa itsensä sellaiseksi. Siten sen päättäjä, | _+_ | , on HTML -tiedoston viimeinen kohde.
  • Seuraavaksi | _+_ | osio sisältää tietoja, kuten sivun otsikon, erilaisia ​​sivulla suoritettavia skriptejä ja vastaavia. Kuten nimestä voi päätellä, tämä tulee yleensä heti alkukirjaimen | _+_ | jälkeen tag. Loppukäyttäjä ei näe paljon sisältöä näissä tunnisteissa.
  • Lopuksi | _+_ | -tunniste sisältää lukijan näkemän sivun tekstin (ja paljon muuta). Täältä löydät kuvia, linkkejä ja paljon muuta.

Koska

-osio muodostaa suurimman osan HTML -asiakirjasta, ja loput läpikäynnistämme tarkastelevat siihen liittyviä elementtejä.

Vaihe 3: Perus HTML -tunnisteet muotoilua varten

Seuraavaksi katsotaan joitain yleisiä tunnisteita, jotka muodostavat HTML -asiakirjoja. Kaikkia elementtejä ei tietenkään voida kattaa, joten tarkastelemme joitain tärkeimmistä. Olemme peittäneet paljon muita HTML -esimerkkejä jos nämä eivät tyydytä sinua.

Jos nämä tunnisteet vaikuttavat melko perustavanlaatuisilta, muista, että HTML luotiin aina vuonna 1993. Verkko oli tuolloin hyvin tekstipohjaista.

Yksinkertainen tekstin muotoilu

HTML tukee perustekstityylejä, kuten Microsoft Wordissa:

  • | _+_ | tunnisteet luovat tekstiä lihavoitu .
  • | _+_ | tunnisteet (eli 'korostus') kursivoida teksti.

HTML tukee myös vanhempia

tunniste lihavoille ja

kursiiville. On kuitenkin parempi käyttää yllä olevia.

Lyhyesti,

ja

näyttää, miten jotain pitäisi ymmärtää, kun taas jälkimmäiset tunnisteet kertovat vain, miltä sen pitäisi näyttää. Nämä aiemmat tunnisteet ovat helpommin saatavilla näkövammaisten käyttämille näytönlukuohjelmille.

Kappale ja muut divisioonat

HTML: t

-tunnisteen avulla voit määrittää asiakirjan osan. Yleensä tämä yhdistetään CSS: ään (katso alla) osion muotoilemiseksi tietyllä tavalla.

The

-tunnisteen avulla voit jakaa tekstin kappaleiksi. Selaimet asettavat automaattisesti jonkin verran tilaa ennen ja jälkeen, jolloin voit luonnollisesti hajottaa tekstin.

Voit lisätä otsikoita asiakirjaasi ja helpottaa seurantaa käyttämällä

kautta

tunnisteita. H1 on tärkein otsikko, kun taas H6 on vähiten tärkeä. Lähes jokainen MakeUseOf -artikkeli käyttää H2- ja H3 -otsikoita tietojen järjestämiseen.

Lyöminen Tulla sisään rivinvaihtojen lisääminen HTML -asiakirjaasi ei näytä niitä. Sen sijaan voit käyttää

rivinvaihdon lisäämiseksi.

Tässä on esimerkki, joka käyttää kaikkia näitä:

Vaihe 4: Kuvien lisääminen

Kuvat ovat tärkeä osa useimpia verkkosivuja. Voit lisätä ne helposti HTML -koodilla ja jopa asettaa niille erilaisia ​​ominaisuuksia.

Voit lisätä kuvan näppäimellä

tag. Yhdistämällä tämä

määritteen avulla voit määrittää, mistä haluat ladata kuvan.

Toinen tärkeä ominaisuus

wifi nopeampi puhelimessa kuin kannettava

tunnisteet on

. Vaihtoehtoisen tekstin avulla voit kuvata kuvaa näytönlukuohjelmille tai jos kuva ei lataudu oikein. Voit viedä hiiren kuvan päälle nähdäksesi sen vaihtoehtoisen tekstin.

Käytä

ja




elementit kuvapisteiden määrän määrittämiseksi, missä kuva näkyy.

Yhdistä kaikki, ja kuvamerkki näyttää tältä:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web ei olisi suuri verkko ilman linkkejä muille sivuille. Käyttämällä

tunnisteella, voit linkittää minkä tahansa tekstin muille sivuille.

Sisällä

src

tunniste,

attribuutti kertoo mihin linkität. Pelkkä URL -osoitteen liittäminen toimii hyvin. Voit käyttää

alt

elementti, jos haluat lisätä hieman tekstiä, joka tulee näkyviin, kun joku vie hiiren linkin päälle.

Peruslinkki näyttää tältä:

width

The

height

tunnisteessa on monia muita mahdollisia elementtejä, mutta emme mene niihin tässä.

Kuinka HTML muodostaa yhteyden CSS: ään ja JavaScriptiin

Olemme tarkastelleet HTML: n perusasioita ja sitä, miten se luo verkkosivun. Mutta kuten voitte kuvitella, HTML yksin ei leikkaa sitä nykyaikaiseen verkkoon. Yksinkertaiset HTML -verkkosivut olivat yleisiä Web 1.0 -päivinä, jolloin useimmat verkkosivustot olivat vain staattista tekstiä.

Mutta nyt meillä on paljon enemmän. CSS (Cascading Style Sheets) on kieli, jota käytetään kuvaamaan, miltä HTML -muodossa valmisteltu teksti näyttää. Muista

Dr. Phil

tunniste, josta keskustelimme? Tämän (ja muiden tunnisteiden) sisällä voit määrittää a

attribuutti. Sitten voit kirjoittaa mukana toimitetussa CSS -asiakirjassa ohjeet sen tekemiseen

pitäisi katsoa.

Voit määrittää nämä tyylielementit HTML -koodissasi, mutta tätä pidetään huonona käytäntönä, koska sen ylläpito on paljon vaikeampaa. Opi lisää nämä yksinkertaiset CSS -esimerkit . Tarkista myös kuinka optimoida CSS -tiedostosi .

JavaScript

Olemme nähneet, että HTML määrittelee sisällön ja CSS määrittää ulkoasun. JavaScript, joka on webille elintärkeän trion viimeinen jäsen, antaa verkkosivujen vastata ihmisten toimiin lataamatta uutta sivua joka kerta.

Esimerkiksi JavaScript sallii verkkosivuston varoittaa sinua siitä, että antamasi salasana ei täytä sen vaatimuksia ennen kuin yrität lähettää sitä. Verkkosuunnittelija voi käyttää JavaScriptiä diaesityksen kuvien selaamiseen tai pyytää käyttäjää syöttämään tietoja.

Nämä ovat vain muutamia alkeellisia esimerkkejä. JavaScript on skriptikieli, joka pystyy tekemään paljon ja on suhteellisen paljon monimutkaisempi kuin HTML ja CSS. Katso yleiskatsauksemme JavaScriptistä paljon enemmän.

Verkkosuunnittelun koko laajuuden tarkastelu ei kuulu tämän artikkelin soveltamisalaan, mutta riittää, kun sanotaan, että HTML toimii vuorovaikutuksessa muiden kielten kanssa luodakseen nykyään tunnettuja verkkosivuja.

HTML: n evoluutio

On tärkeää huomata, että HTML ei ole staattinen. HTML on käynyt läpi useita tarkistuksia, joista viimeisin on HTML 5. Erityisesti tämä standardi tukee natiivivideon upottamista sen sijaan, että se luottaisi omiin muotoihinsa, kuten Adobe Flash.

HTML: n uudet iteraatiot myös julistavat tiettyjä arkaaisia ​​tunnisteita aika ajoin vanhentuneiksi. Näitä ovat hirvittävät tunnisteet, kuten

href

ja

title

(selaus- ja flash -teksti vastaavasti) yleisesti 1990 -luvun verkkosivujen suunnittelussa. Muista siis, että standardit muuttuvat ajan myötä.

Pienellä HTML -tiedolla pääsee pitkälle

Olemme tutustuneet lyhyesti HTML -asiakirjan toimintaan. Nyt tiedät verkkosivujen rakenteen perusteet. Vaikka et aio rakentaa verkkosivuja, olet hieman tietoisempi joka päivä käyttämästäsi verkosta.

mistä tiedän onko Facebook -tiliini hakkeroitu

Saat lisätietoja päivittämällä verkkokehitystaitosi tärkeillä työkaluilla ja tutustu sitten oppaamme ensimmäisen verkkosivuston suunnittelusta .

Kuva: Beljajevski/ Depositphotos

Jaa Jaa Tweet Sähköposti 5 vinkkiä VirtualBox Linux -koneiden lataamiseen

Oletko kyllästynyt virtuaalikoneiden heikkoon suorituskykyyn? Tässä on, mitä sinun pitäisi tehdä parantaaksesi VirtualBox -suorituskykyäsi.

Lue seuraava Liittyvät aiheet
  • Ohjelmointi
  • HTML
  • Verkkokehitys
  • JavaScript
  • Verkkovastaavan työkalut
  • Ohjelmointi
  • HTML5
Kirjailijasta Ben Stegner(1735 artikkelia julkaistu)

Ben on varatoimittaja ja aloituspäällikkö MakeUseOfissa. Hän jätti IT-työnsä kirjoittaakseen kokopäiväisesti vuonna 2016 eikä ole koskaan katsonut taaksepäin. Hän on kattanut teknisiä opetusohjelmia, videopelisuosituksia ja paljon muuta ammattikirjailijana yli seitsemän vuoden ajan.

Lisää Ben Stegneriltä

tilaa uutiskirjeemme

Liity uutiskirjeeseemme saadaksesi teknisiä vinkkejä, arvosteluja, ilmaisia ​​e -kirjoja ja ainutlaatuisia tarjouksia!

Klikkaa tästä tilataksesi