5 sammu põhilise HTML -koodi mõistmiseks

5 sammu põhilise HTML -koodi mõistmiseks

HTML on veebi oluline osa, nagu me seda teame. Ja kuigi vähesed veebidisainerid loovad lehti käsitsi HTML -i tippides, on siiski mugav sellest natuke teada saada.





Vaatame mõningaid keele põhitõdesid, sealhulgas seda, mis HTML tegelikult on, mõningaid põhimõisteid ja selle suhtlemist teiste keeltega. Mõelge sellele kui kiirkursusele „HTML for Dummies”.



HTML -i põhitõed: mis on HTML?

HTML tähistab Hüperteksti märgistuskeel . Ja kuigi see on mõnikord programmeerimiskeeltega ühendatud, pole see täpne.





Nagu märgistuskeel , HTML võimaldab teil luua ainult lehtede paigutuse. Tõsi programmeerimiskeelt , nagu Java või C ++, sisaldab loogikat ja käske, mida täidetakse.

Kuigi see on lihtne, on HTML veebi iga lehe selgroog. See vastutab selle eest, milline tekst kuvatakse paksus kirjas, lisades pilte ja linkides teistele lehtedele. Meil on HTML -i KKK, mis selgitab rohkem.



Saate paremklõpsata enamikul oma brauseri veebilehtedel ja valida Vaata lehekülje allikat või sarnane, et näha nende taga olevat HTML -i. See sisaldab tõenäoliselt ka palju koodi, mis pole HTML, kuid saate selle läbi sõeluda.

Isegi kui teil pole märgistus- või programmeerimiskeelte kogemusi, muudab HTML -i natuke õppimine teid teadlikumaks veebikasutajaks. Vaatame läbi viis peamist sammu, mis aitavad teil mõista, kuidas HTML töötab. Toome näiteid teel.



1. samm: siltide kontseptsiooni mõistmine

HTML kasutab süsteemi silte dokumendi erinevate elementide kategoriseerimiseks.

Enamik silte on paarikaupa, et mässida mõjutatud tekst nende sisse. Siin on lihtne näide (



silt teeb teksti julge ; me arutame seda hetke pärast rohkem.)

This is some bold text .

Pange tähele, kuidas lõpumärgend algab kaldkriipsuga (/). See tähistab sulgemissilti, mis on oluline. Kui te silti ei sulge, on sellel atribuudil algusest peale kõik.

voogesitage filme tasuta, ilma registreerimiseta

Kõigil siltidel pole aga paari. Mõned HTML -elemendid, nn tühjad elemendid , neil pole sisu ja nad eksisteerivad iseseisvalt. Näiteks on


silt, mis on reavahe. Selliseid silte saate sulgeda, lisades kaldkriipsu (nt


), kuid see pole tingimata vajalik.

2. samm: skeleti HTML -i paigutus

Korralikul HTML -dokumendil peavad olema määratletud teatud sildid, et see oleks õigesti paigutatud. Need on olulised osad:

  • Iga HTML -dokument peab algama tähega | _+_ | end sellisena kuulutama. Seega on selle lõppmärgis | _+_ | , on HTML -faili viimane üksus.
  • Järgmisena | | _+_ | jaotis sisaldab sellist teavet nagu lehe pealkiri, mitmesugused lehel töötavad skriptid jms. Nagu nimigi ütleb, tuleb see tavaliselt kohe pärast algust | _+_ | silt. Lõppkasutaja ei näe nendes siltides palju sisu.
  • Lõpuks | _+_ | silt sisaldab lehe teksti, mida lugeja näeb (pluss palju muud). Siit leiate pilte, linke ja palju muud.

Kuna

jaotis moodustab suurema osa HTML -dokumendist, ülejäänud meie ülevaates vaadeldakse seda puudutavaid elemente.

Samm: vormindamiseks lihtsad HTML -sildid

Järgmisena vaatame mõningaid tavalisi silte, millest HTML -dokumendid koosnevad. Loomulikult ei ole võimalik kõiki elemente hõlmata, seega vaatame üle mõned kõige olulisemad. Oleme katnud palju muid HTML -i näiteid kui need teid ei rahulda.

Kui need sildid tunduvad üsna elementaarsed, pidage meeles, et HTML loodi juba 1993. aastal. Veeb oli algselt väga tekstipõhine.

Lihtne teksti vormindamine

HTML toetab põhilisi tekstistiile, nagu leiate Microsoft Wordist:

  • | _+_ | sildid teevad teksti julge .
  • | _+_ | sildid (mis tähistavad rõhuasetust) kaldkirjas teksti.

HTML toetab ka vanemaid

silt paksule ja

kaldkirja jaoks. Siiski on parem kasutada ülaltoodud.

Lühidalt,

ja

näidata, kuidas midagi tuleks mõista, samas kui viimased sildid ütlevad teile ainult, kuidas see välja peaks nägema. Need endised sildid on nägemispuudega inimeste ekraanilugejatele paremini kättesaadavad.

Lõik ja muud jaotused

HTML -id

silt võimaldab teil määratleda dokumendi osa. Tavaliselt seotakse see teatud viisil CSS -iga (vt allpool).

The

silt võimaldab teil jagada teksti lõikudeks. Brauserid panevad enne ja pärast neid automaatselt ruumi, võimaldades teil teksti loomulikult lõhkuda.

Saate oma dokumendile päiseid lisada ja hõlbustada jälgimist

läbi

silte. H1 on kõige olulisem päis, samas kui H6 on kõige vähem oluline. Peaaegu iga MakeUseOfi artikkel kasutab teabe korrastamiseks päiseid H2 ja H3.

Löömine Sisenema reavahede lisamiseks oma HTML -dokumenti neid tegelikult ei kuvata. Selle asemel võite kasutada

reavahe lisamiseks.

Siin on näide, mis kasutab kõiki neid:

Samm: piltide sisestamine

Pildid on enamiku veebilehtede oluline osa. Saate neid hõlpsalt HTML -iga lisada ja isegi neile erinevaid atribuute seada.

Pildi sisestamiseks kasutage nuppu

silt. Kombineerides seda

atribuut võimaldab teil määrata, kust soovite pildi laadida.

Teine oluline atribuut

kuidas Facebookis postitusest teatada

sildid on

. Alternatiivtekst võimaldab teil kirjeldada pilti ekraanilugejatele või juhul, kui pilti ei laadita korralikult. Pildi altteksti nägemiseks võite hiirega hiirekursori kohale viia.

Kasuta

ja




elemendid, mis määravad pildi pikslite arvu.

Pange see kõik kokku ja pildimärgis näeb välja selline:


Example Heading


This is one paragraph.


This is a second
paragraph split between two lines.



World Wide Web poleks eriline veeb ilma linkideta teistele lehtedele. Kasutades

sildiga, saate linkida mis tahes teksti teistele lehtedele.

Sees

src

silt,

atribuut ütleb, kuhu linkite. Lihtsalt URL -i kleepimine toimib hästi. Võite kasutada

alt

element, et lisada natuke teksti, mis kuvatakse siis, kui keegi viib kursori lingi kohale.

Põhilink näeb välja selline:

width

The

height

sildil on palju muid võimalikke elemente, kuid me ei hakka nendesse siin sukelduma.

Kuidas HTML CSS -i ja JavaScriptiga ühendub?

Oleme uurinud HTML -i põhitõdesid ja seda, kuidas see veebilehte loob. Kuid nagu võite ette kujutada, ei üksi HTML seda tänapäevase veebi jaoks. Lihtsad HTML -veebilehed olid tavalised „Web 1.0” päevil, mil enamik veebisaite ei olnud muud kui staatiline tekst.

Kuid nüüd on meil palju rohkem. CSS (Cascading Style Sheets) on keel, mida kasutatakse HTML -is koostatud teksti väljanägemiseks. Pidage meeles ,.

Dr. Phil

silt, mida arutasime? Selle (ja muude siltide) sees saate määratleda a

atribuut. Seejärel saate oma kaasasolevasse CSS -dokumenti kirjutada juhised selle kohta

peaks vaatama.

Saate need stiilielemendid HTML -koodis inline määratleda, kuid seda peetakse halvaks tavaks, kuna seda on palju keerulisem säilitada. Lisateave teenusega need lihtsad CSS -i näited . Vaadake ka välja kuidas oma CSS -faile optimeerida .

JavaScript

Oleme näinud, et HTML määrab sisu ja CSS määrab välimuse. Veebile elulise kolmiku viimane liige JavaScript võimaldab veebilehtedel reageerida inimeste toimingutele ilma iga kord uut lehte laadimata.

Näiteks lubab JavaScript veebisaidil enne selle esitamist proovida hoiatada, et sisestatud parool ei vasta selle nõuetele. Veebidisainer võib kasutada JavaScripti, et sirvida pilte slaidiseansis või paluda kasutajal sisestada.

Need on vaid mõned elementaarsed näited. JavaScript on skriptikeel, mis suudab palju ära teha ja on suhteliselt palju keerulisem kui HTML ja CSS. Vt meie ülevaade JavaScripti kohta palju enama eest.

Veebidisaini täieliku ulatuse vaatamine jääb selle artikli raamest välja, kuid piisab sellest, kui öelda, et HTML suhtleb teiste keeltega, et luua täna tuntud veebilehti.

HTML -i areng

Oluline on märkida, et HTML pole staatiline. HTML on läbinud mitmeid muudatusi, millest viimane on HTML 5. Märkimisväärselt toetab see standard natiivvideo manustamist selle asemel, et tugineda varalistele vormingutele nagu Adobe Flash.

HTML -i uued iteratsioonid kuulutavad ka teatud arhailised sildid aeg -ajalt aegunuks. Nende hulka kuuluvad sellised kohutavad sildid nagu

href

ja

title

(seda vastavalt kerimis- ja välkteksti), mida 1990ndate veebisaitide kujundamisel tavaliselt täheldati. Nii et pidage meeles, et standardid muutuvad aja jooksul.

Väikesed HTML -teadmised lähevad kaugele

Oleme teinud lühikese ülevaate HTML -dokumendi toimimisest. Nüüd teate veebisaitide ülesehituse põhialuseid. Isegi kui te ei hakka veebisaite ehitama, olete iga päev kasutatava veebi osas pisut teadlikum.

Kuidas vähendada jpeg -faili suurust?

Lisateabe saamiseks täiendage oma veebiarendusoskusi oluliste tööriistadega ja vaadake seejärel meie juhend esimese veebisaidi kujundamiseks .

Pildikrediit: Beljajevski/ Depositphotos

Jaga Jaga Piiksuma E -post 5 näpunäidet VirtualBox Linuxi masinate ülelaadimiseks

Kas olete väsinud virtuaalmasinate halvast jõudlusest? Siin on, mida peaksite tegema oma VirtualBoxi jõudluse suurendamiseks.

Loe edasi Seotud teemad
  • Programmeerimine
  • HTML
  • Veebiarendus
  • JavaScript
  • Veebimeistri tööriistad
  • Programmeerimine
  • HTML5
Autori kohta Ben Stegner(Avaldatud 1735 artiklit)

Ben on MakeUseOfi toimetaja asetäitja ja alustamisjuht. Ta lahkus IT-tööst täiskohaga kirjutama 2016. aastal ega ole kunagi tagasi vaadanud. Ta on professionaalse kirjanikuna üle seitsme aasta kajastanud tehnilisi õpetusi, videomängude soovitusi ja palju muud.

Veel Ben Stegnerilt

Telli meie uudiskiri

Liituge meie uudiskirjaga, et saada tehnilisi näpunäiteid, ülevaateid, tasuta e -raamatuid ja eksklusiivseid pakkumisi!

Tellimiseks klõpsake siin