Home-theater-designers
Nors šiuolaikinės svetainės paprastai yra sukurtos naudojant patogias sąsajas, naudinga žinoti pagrindinį HTML. Jei žinote šias 17 HTML pavyzdžių žymų (ir keletą priedų), galėsite sukurti pagrindinį tinklalapį nuo nulio arba pataisyti kodą, sukurtą tokios programos kaip „WordPress“.
Pateikėme HTML kodų pavyzdžius su daugumos žymų išvestimi. Jei norite pamatyti, kaip jie veikia, atsisiųskite HTML failo pavyzdį straipsnio pabaigoje. Galite žaisti su juo teksto redaktoriuje ir įkelti jį į naršyklę, kad pamatytumėte, ką daro jūsų pakeitimai.
1.
Šios žymos jums reikės kiekvieno jūsų sukurto HTML dokumento pradžioje. Tai užtikrina, kad naršyklė žinotų, kad skaito HTML, ir tikisi HTML5, naujausios versijos.
Nors tai iš tikrųjų nėra HTML žyma, vis tiek verta žinoti.
2.
Tai dar viena žyma, nurodanti naršyklei, kad ji skaito HTML. Žyma eina iškart po DOCTYPE žymos, o jūs ją uždarote su žyma failo pabaigoje. Visa kita jūsų dokumente yra tarp šių žymų.
3.
Žyma pradeda jūsų failo antraštės skyrių. Čia pateikiama medžiaga nerodoma jūsų tinklalapyje. Vietoj to jame yra paieškos variklių metaduomenys ir jūsų naršyklės informacija.
Pagrindiniuose puslapiuose žymoje bus jūsų pavadinimas, ir viskas. Tačiau yra keletas kitų dalykų, kuriuos galite įtraukti ir kuriuos mes netrukus aptarsime.
Keturi.
Ši žyma nustato jūsų puslapio pavadinimą. Viskas, ką jums reikia padaryti, tai įdėti savo pavadinimą į žymą ir uždaryti ją taip (aš taip pat įtraukiau antraštės žymas, kad būtų parodytas kontekstas):
My Website
Tai pavadinimas, kuris bus rodomas kaip skirtuko pavadinimas, kai jis bus atidarytas naršyklėje.
5.
Metaduomenys, kaip ir pavadinimo žyma, dedami į puslapio antraštės sritį. Metaduomenis pirmiausia naudoja paieškos sistemos ir tai yra informacija apie tai, kas yra jūsų puslapyje. Yra daugybė skirtingų meta laukų, tačiau tai yra keletas dažniausiai naudojamų:
- apibūdinimas : Pagrindinis jūsų puslapio aprašymas.
- raktinius žodžius : Jūsų puslapiui taikomų raktinių žodžių pasirinkimas.
- autorius : Jūsų puslapio autorius.
- peržiūros sritis : Žyma, užtikrinanti, kad jūsų puslapis gerai atrodytų visuose įrenginiuose.
Štai pavyzdys, kuris gali būti taikomas šiam puslapiui:
Žymos „viewport“ turinys visada turėtų būti „width = device-width, initial-scale = 1.0“, kad jūsų puslapis būtų gerai rodomas mobiliuosiuose ir staliniuose įrenginiuose.
6.
Uždarę antraštės skyrių, pateksite į kūną. Atidarote tai naudodami žymą ir uždarote ją su žyma. Tai vyksta tiesiai failo pabaigoje, prieš pat žymą.
Visas jūsų tinklalapio turinys yra tarp šių žymų. Tai taip paprasta, kaip skamba:
Everything you want displayed on your page.
7.
Šiek tiek mažiau didelė antraštė
Antraštė
Rezultatas:
Kaip matote, kiekviename lygyje jie tampa mažesni.
8.
Pastraipos žyma pradeda naują pastraipą. Paprastai tai įterpia dvi eilučių pertraukas.
Pažvelkite, pavyzdžiui, į pertrauką tarp ankstesnės ir šios eilutės. Štai ką a
žyma tiks.
Your first paragraph.
Your second paragraph.
Rezultatas:
Jūsų pirmoji pastraipa.
Jūsų antra pastraipa.
Tu taip pat gali naudoti CSS stilius pastraipos žymose, kaip ši, kuri keičia teksto dydį:
This is 50% larger text.
Rezultatas:
9.
Eilutės pertraukos žyma įterpia vieną eilutės pertrauką:
The first line.
The second line (close to the first one).
Rezultatas:
Darbas panašiu būdu yra
žyma. Tai nubrėžia horizontalią liniją jūsų puslapyje ir tinka atskirti teksto dalis.
10.
Ši žyma apibrėžia svarbų tekstą. Apskritai tai reiškia, kad jis bus drąsus. Tačiau kuriant galima naudoti CSS tekstas rodomas kitaip.
Kaip konvertuoti kindle knygą į pdf
Tačiau galite saugiai naudoti iki paryškinto teksto.
Very important things you want to say. Rezultatas:
Labai svarbūs dalykai, kuriuos norite pasakyti.
Jei esate susipažinę su teksto paryškinimo žymą, vis tiek galite ją naudoti. Nėra garantijos, kad jis ir toliau veiks būsimose HTML versijose, tačiau kol kas jis veikia.
vienuolika.
Kaip ir , ir yra giminingi. The žyma nurodo paryškintą tekstą, o tai paprastai reiškia, kad jis bus kursyvu. Vėlgi, yra galimybė, kad CSS paryškintą tekstą rodys kitaip.
An emphasized line. Rezultatas:
Pabrėžta linija.
The žyma vis dar veikia, tačiau vėlgi gali būti, kad ji bus nebenaudojama būsimose HTML versijose.
12.
The arba inkaro žyma leidžia kurti nuorodas. Paprasta nuoroda atrodo taip:
Eikite į MUO Atributas „href“ nurodo nuorodos paskirtį. Daugeliu atvejų tai bus kita svetainė. Tai taip pat gali būti failas, pvz., Vaizdas ar PDF.
Kiti naudingi atributai yra „target“ ir „title“. Tikslinis atributas beveik naudojamas tik norint atidaryti nuorodą naujame skirtuke ar lange, kaip nurodyta toliau.
Go to MUO in a new tab Rezultatas:
Atributas „title“ sukuria patarimą. Užveskite pelės žymeklį ant žemiau esančios nuorodos, kad pamatytumėte, kaip tai veikia:
Hover over this to see the tool tip Rezultatas:
Užveskite pelės žymeklį virš jo, kad pamatytumėte įrankio patarimą
13. ![]()
Jei norite įterpti vaizdą į savo puslapį, turėsite naudoti vaizdo žymą. Paprastai jį naudosite kartu su atributu „src“. Tai nurodo vaizdo šaltinį, pavyzdžiui:
Rezultatas:
s21 ultra vs iphone 12 pro max
Galimi kiti atributai, pvz., „Aukštis“, „plotis“ ir „alt“. Štai kaip tai gali atrodyti:
Kaip ir galima tikėtis, atributai „aukštis“ ir „plotis“ nustato vaizdo aukštį ir plotį. Apskritai, gera idėja yra nustatyti tik vieną iš jų, kad vaizdas būtų teisingas. Jei naudosite abu, galite gauti ištemptą ar suspaustą vaizdą.
Žyma „alt“ nurodo naršyklei, kokį tekstą rodyti, jei vaizdas negali būti rodomas, ir yra gera idėja įtraukti jį į bet kurį vaizdą. Jei kas nors turi ypač lėtą ryšį arba naudoja seną naršyklę, jis vis tiek gali suprasti, kas turėtų būti jūsų puslapyje.
14.
Užsakyta sąrašo žyma leidžia sukurti užsakytą sąrašą. Apskritai tai reiškia, kad gausite sunumeruotą sąrašą. Kiekvienam sąrašo elementui reikia sąrašo elemento žymos (
), todėl jūsų sąrašas atrodys taip:
- First thing
- Second thing
- Third thing
Rezultatas:
- Pirmas dalykas
- Antras dalykas
- Trečias dalykas
HTML5 galite naudoti
pakeisti skaičių eiliškumą. Pradinę vertę galite nustatyti naudodami pradžios atributą. Atributas „tipas“ leidžia naršyklei nurodyti, kokio tipo simbolį naudoti sąrašo elementams. Jis gali būti nustatytas kaip „1“, „A“, „a“, „I“ arba „i“, nustatant sąrašą, kuris bus rodomas su tokiu simboliu:
penkiolika.
Netvarkingas sąrašas yra daug paprastesnis nei jo užsakytas atitikmuo. Tai paprasčiausias sąrašas.
- First item
- Second item
- Third item
Rezultatas:
- Pirmas daiktas
- Antras elementas
- Trečias elementas
Nesutvarkyti sąrašai taip pat turi „type“ atributus, kuriuos galite nustatyti kaip „disk“, „apskritimas“ arba „kvadratas“.
16.
Nors lentelių naudojimas formatavimui yra nemalonus, yra daug kartų, kai norėsite naudoti eilutes ir stulpelius, kad segmentuotumėte informaciją savo puslapyje. Norint, kad lentelė veiktų, reikia kelių žymų. Štai HTML kodo pavyzdys:
1st column
2nd column
Row 1, column 1
Row 1, column 2
Row 2, column 1
Row 2, column 2
The
ir
žymos nurodo lentelės pradžią ir pabaigą. Thežymoje yra visas lentelės turinys. Kiekviena lentelės eilutė yra a
žyma. Kiekviena kiekvienos eilutės ląstelė yra suvyniota į bet kurią iš jųstulpelių antraščių žymas arba stulpelių duomenų žymos. Jums reikia vieno iš jų kiekvienam kiekvienos eilutės stulpeliui. Rezultatas:
1 stulpelis 2 stulpelis 1 eilutė, 1 stulpelis 1 eilutė, 2 stulpelis 2 eilutė, 1 stulpelis 2 eilutė, 2 stulpelis
17.
Kai cituojate kitą svetainę ar asmenį ir norite citatą atskirti nuo likusio dokumento, naudokite „blockquote“ žymą. Viskas, ką jums reikia padaryti, tai pridėti citatą į „blockquote“ žymų atidarymą ir uždarymą:
The Web as I envisaged it, we have not seen it yet. The future is still so much bigger than the past.
Rezultatas:
Žiniatinklis toks, kokį aš įsivaizdavau, jo dar nematėme. Ateitis vis tiek yra daug didesnė nei praeitis.
Tikslus naudojamas formatavimas gali priklausyti nuo naudojamos naršyklės ar svetainės CSS. Tačiau žyma išlieka ta pati.
HTML kodo pavyzdžiai
Turėdami šiuos 17 HTML pavyzdžių, turėtumėte sugebėti sukurti paprastą svetainę. Dabar galite juos visus išbandyti internetiniame teksto redaktoriuje, kad pajustumėte, kaip jie veikia.
Jei norite daugiau įkandamo dydžio HTML pamokų, išbandykite kai kurias mikro mokymosi programas kodavimui. Jie padės greitai pasiekti greitį.
Dalintis Dalintis „Tweet“ Paštu Norite išmokti pagrindinio kodavimo? Išbandykite 5 įkandimo dydžio kodavimo programas laisvalaikiu Norite išmokti pagrindinio kodavimo, bet turite mažai laiko? Šios įkandimo dydžio kodavimo programos užims vos kelias minutes užimtos dienos.
Skaityti toliau Susijusios temos - Programavimas
- „Wordpress“
- HTML
- Interneto svetainių kūrimas
- Kodavimo pamokos
Apie autorių Andy Bettsas(Paskelbti 221 straipsniai) Andy yra buvęs spaudos žurnalistas ir žurnalo redaktorius, kuris apie technologijas rašo 15 metų. Per tą laiką jis prisidėjo prie daugybės publikacijų ir sukūrė tekstų rašymo darbus didelėms technologijų įmonėms. Jis taip pat pateikė ekspertų komentarus žiniasklaidai ir vedė grupes pramonės renginiuose.
Daugiau iš Andy BettsPrenumeruokite mūsų naujienlaiškį
Prisijunkite prie mūsų naujienlaiškio, kad gautumėte techninių patarimų, apžvalgų, nemokamų el. Knygų ir išskirtinių pasiūlymų!
Norėdami užsiprenumeruoti, spustelėkite čia