HTML5: vanhat tagit uudella tarkoituksella. Kuinka tehdä kaunis fontti html:ssä: koot, värit, html-fonttitunnisteet Tagit ja attribuutit - tekstin fonttiparametrit
Kursivointi on yksi suosituimmista tavoista korostaa tekstiä ja antaa sille jotain merkitystä. Se on ihanteellinen lainauksille, alaviitteille, otsikoille ja erisnimille. HTML:ssä on kaksi erityistä tunnistetta kursiivityylin näyttämiseksi. CSS:ssä kursiivia ohjaa font-style-ominaisuus.
Kursiivi vai kursivoitu?
Sama kirjasin voi näyttää erilaiselta kursivoituna.
Kuvassa on kolme tekstilohkoa, jotka on kirjoitettu samalla Playfair Display -fontilla. Ensimmäisessä on tavanomainen roomalainen tyyli, kun taas toisessa ja kolmannessa on kursivoitu. Ne avautuvat samassa Google Chrome -selaimessa, mutta näyttävät täysin erilaisilta.
Tosiasia on, että joillakin fonteilla on omat kursivoitu merkistönsä. Jos selaimella ei ole pääsyä tähän joukkoon, mutta se havaitsee tekstin, joka tulisi hahmontaa kursivoituksi, se yrittää kursivoida sen itse.
Toisessa lohkossa on juuri tällainen selaimen käsittelemä versio, ja kolmannessa on alkuperäinen kursivoitu versio Playfair Display -fontista, jolla on ainutlaatuinen tyyli, enemmän kuin käsin kirjoitettu. Selain yksinkertaisesti kallistaa tekstin jokaista merkkiä tietyssä kulmassa simuloimalla kursivoitua.
Kun mietit kursivointia CSS:ssä tai HTML:ssä, on tärkeää muistaa, että tiettyjen kirjasimien tapauksessa sinun on annettava selaimelle pääsy kursivoituihin sarjoihin. Joissakin tapauksissa selaimen kallistusalgoritmien tulos voi olla epätyydyttävä.
HTML kursivoitu
Kursivoidun tekstin näyttämiseen HTML:ssä on kaksi erityistä tunnistetta: i (sanasta kursivoitu) ja em. Näihin kuvaajiin sisältyvän tekstikappaleen tyyli on sama.
Ero on loogisessa valinnassa. Em-tunniste ilmaisee fragmentin erityisen merkityksen. Tämä on tärkeää hakuroboteille ja näytönlukuohjelmille, jotka korostavat määritetyn tekstin intonaatiolla.
fonttityyppinen ominaisuus
CSS:ssä kursivoitua ohjaa kirjasintyylikäsky. Se voi olla yksi kolmesta perusarvosta:
- normaali - normaali fontti;
- kursiivi - kursivoitu tyyli;
- vino - vino tyyli.
Tällä hetkellä useimmat nykyaikaiset selaimet käsittelevät vino- ja kursivoituarvoja samalla tavalla, mutta edellisen uskottiin alun perin johtuvan selainkohtaisista algoritmeista, jotka kallistavat kutakin merkkiä oikealle.
Jos selain ei löydä etsimääsi fonttia, kursivoitu näyttää täsmälleen samalta kuin vino.
Toisin kuin em-tunniste, se ei anna valinnalle mitään erityistä merkitystä, se vastaa pikemminkin i-kuvaajaa.
Esimerkkejä
Lainauksia käytetään usein kursiivilla. Yritetään saada se näyttämään kivalta.
Lainaus ( font-tyyli: kursivoitu; reunus vasen: 5px tasainen violetti; täyte-vasen: 20px; )
Oikealla olevan koristeellisen reunuksen ja sisennysten lisäksi lainauslohkossa on fonttityylinen sääntö, jonka arvo on kursivoitu.
Käytä sitä kursiivin asettamiseen CSS:ssä.
Html:ssä kirjasinkoolla on tärkeä rooli. Sen avulla voit kiinnittää käyttäjän huomion sivuston sivulla oleviin tärkeisiin tietoihin. Vaikka kirjainten koko ei ole tärkeä, vaan myös niiden väri, paksuus ja jopa perhe.
Tunnisteet ja attribuutit käytettäessä html-fontteja
Hypertekstikielellä on laaja valikoima työkaluja fonttien kanssa työskentelemiseen. Loppujen lopuksi tekstin muotoilu on html:n päätehtävä.
Syynä HTML-kielen luomiseen oli ongelma tekstin muotoilusääntöjen näyttämisessä selaimissa.
Katsotaanpa tunnisteita, joita käytetään työskentelemään HTML-kirjasinten ja niiden attribuuttien kanssa. Tärkein niistä on tagi . Käyttämällä sen attribuuttien arvoja voit asettaa useita fontin ominaisuuksia:
- color – määrittää tekstin värin;
- koko – kirjasinkoko tavanomaisina yksikköinä.
Positiivisia attribuuttiarvoja 1-7 tuetaan.
- face – käytetään määrittämään tekstin kirjasinperhe, jota käytetään tunnisteen sisällä . Useita arvoja tuetaan pilkuilla erotettuina.
Vain pariksi liitetyn fonttitunnisteen osien välissä oleva teksti muotoillaan. Loput tekstistä näytetään tavallisella oletuskirjasimella.
Myös html:ssä on useita parillisia tageja, jotka määrittävät vain yhden muotoilusäännön. Nämä sisältävät:
- — asettaa lihavoitun fontin html:ssä. Tag toiminnaltaan samanlainen kuin edellinen;
- — koko on oletusarvoa suurempi;
- — pienempi kirjasinkoko;
- — kursivoitu teksti (kursivointi). Samanlainen tunniste ;
- — teksti alleviivauksella;
- yliviivattu;- — näyttää tekstin vain pienillä kirjaimilla;
- - isoilla kirjaimilla.
Pelkkää tekstiä
Pikkukuva
Pikkukuva
Tavallista enemmän
Tavallista vähemmän
Kursivointi
Kursivointi
Alaviivalla
Yliviivattu
Tyylimääritteiden ominaisuudet
Kuvattujen tunnisteiden lisäksi on olemassa useita muita tapoja muuttaa fonttia html:ssä. Yksi niistä on käyttää yleistä tyylimääritettä. Sen ominaisuuksien arvojen avulla voit asettaa fontin näyttötyylin:
1) font-family – ominaisuus määrittää kirjasinperheen. On mahdollista luetella useita arvoja.
Html-fontin vaihtaminen seuraavaan arvoon tapahtuu, jos edellistä perhettä ei ole asennettu käyttäjän käyttöjärjestelmään.
Kirjoitussyntaksi:
font-family: fontin-nimi [, fontin-nimi[, ...]]
2) font-size – koko on 1-7. Tämä on yksi tärkeimmistä tavoista lisätä fonttia HTML:ssä.
Kirjoitussyntaksi:
font-size: absoluuttinen koko | suhteellinen koko | merkitys | korko | periä
Voit myös asettaa fontin koon:
- pikseleinä;
- Absoluuttisesti ( xx-pieni, x-pieni, pieni, keskikokoinen, suuri);
- Prosentteina;
- Pisteitä (pt).
Fonttikoko: 7
Fonttikoko: 24px
Fonttikoko: x-large
Fonttikoko: 200 %
Fonttikoko: 24 pt
3) font-style – määrittää fontin kirjoitustyylin. Syntaksi:
font-tyyli: normaali | kursivoitu | vino | periä
Arvot:
- normaali – normaali kirjoitusasu;
- kursivoitu – kursivoitu;
- vino – kirjasin vinossa oikealle;
- inherit – perii pääelementin oikeinkirjoituksen.
Esimerkki fontin vaihtamisesta html:ssä tällä ominaisuudella:
font-style: inherit
font-style: kursivoitu
font-style:normaali
font-style:oblique
4) font-variant – muuntaa kaikki isot kirjaimet isoiksi kirjaimille. Syntaksi:
font-variant: normaali | pienet kirjaimet | periä
Esimerkki fontin vaihtamisesta html:ssä tällä ominaisuudella:
font-variant: inherit
font-variant:normal
font-variant:small-caps
5) font-weight – voit asettaa tekstin paksuuden (kylläisyyden). Syntaksi:
fontin paino: lihavoitu|lihavoitumpi|kevyempi|normaali|100|200|300|400|500|600|700|800|900
Arvot:
- lihavoitu – asettaa html-fontin lihavoiduksi;
- rohkeampi – rohkeampi verrattuna normaaliin;
- kevyempi - vähemmän kylläinen verrattuna normaaliin;
- normaali – normaali kirjoitusasu;
- 100-900 – asettaa kirjasimen paksuuden numeerisena ekvivalenttina.
font-weight:bold
font-weight:bolder
font-weight: kevyempi
font-weight:normal
fontin paino: 900
fontin paino: 100
html-fontin ominaisuus ja fontin väri
Fontti on toinen säilön ominaisuus. Itsensä sisällä se yhdisti useiden fonttien vaihtamiseen tarkoitettujen ominaisuuksien arvot. fontin syntaksi:
font: font-size font-family | periä
Arvo voidaan asettaa myös järjestelmän käyttämille kirjasimille eri säätimien tarroissa:
- kuvateksti – painikkeille;
- kuvake – kuvakkeille;
- menu - valikko;
- viestilaatikko – valintaikkunoita varten;
- pieni kuvateksti – pienille säätimille;
- status-bar – tilapalkin fontti.
font:icon
font:caption
font:menu
font:message-box
pieni kuvateksti
font:status-bar
font:italic 50px lihavoitu "Times New Roman", Times, serif
Voit määrittää fontin värin HTML:ssä käyttämällä väriominaisuutta. Sen avulla voit määrittää värin joko avainsanalla tai rgb-muodossa. Ja myös heksadesimaalikoodilla.
Hei rakkaat blogin lukijat! Tässä artikkelissa puhutaan tekstin muotoilutunnisteet. Esimerkkejä ovat tekstin lihavointi tai kursivoitu. Tarkastellaan myös joidenkin tunnisteiden vaikutusta verkkosivuston sisäiseen optimointiin ja niiden kirjoittamisen sääntöjä. Voit lukea siitä annetusta artikkelista. Vastaavia tekstimuotoiluelementtejä voi muuten löytää monista tekstieditoreista, esimerkiksi Wordista.
Tunnisteet on jaettu kahteen tyyppiin: block ja inline. Kun käytät edellistä, voit muuttaa tekstin osan sisältöä (rivit, yksittäiset katkelmat tai sanat), ja jälkimmäiset ovat . Muotoilutunnisteet, joita tarkastelemme tässä artikkelissa, ovat pääasiassa pieniä kirjaimia.
Tunnisteiden kirjoittamisen säännöt ja järjestys
Tiedät jo, mitä avaus- ja sulkemistunnisteet ovat. Jos ei, lue artikkeli tämän materiaalin alussa. Lyhyesti sanottuna tunnisteita on kahdenlaisia: yksittäinen (esimerkiksi rivinvaihto) ja kontti (pareittain). Joten kaikki tekstin muotoilutunnisteet ovat pariksi. Tämä tarkoittaa, että kaikilla elementeillä on avaus- ja sulkemistunniste, ja korostus on sijoitettava niiden väliin. Esimerkiksi lauseen oikea valinta näyttäisi tältä: Valittu fragmentti
Kun selain käsittelee tämän fragmentin, näet seuraavan tekstin: Valittu fragmentti. Muuten, kaikki tunnisteet eivät näy RSS-syötteessä ().
Tärkeintä tunnisteita kirjoittaessasi ei ole unohtaa sulkea niitä. Muussa tapauksessa kaikki sivulla oleva teksti korostetaan lihavoituna (esimerkissä, jossa on tunniste ). Mutta on tapauksia, joissa sinun on korostettava tietty fragmentti sekä lihavoidulla että kursivoitulla samanaikaisesti. Mutta ei ole tunnistetta, joka suorittaa tämän toiminnon. Tästä tilanteesta on vain yksi tapa: käytä kahta tunnistetta samanaikaisesti. Ei ole väliä missä järjestyksessä niitä käytät. Siksi kirjoita tekstiä tämänkaltaisilla tunnisteilla:
Valittu fragmentti
tai näin:
Valittu fragmentti
Saat silti Valittu fragmentti kursivoitu ja lihavoitu samaan aikaan. On kuitenkin parempi käyttää ensimmäistä vaihtoehtoa, koska se oli alun perin ainoa ja oikea. Älä myöskään unohda, että jokainen selain voi käsitellä tunnisteita eri tavalla () asetuksista riippuen. Siirrytään nyt itse muotoilutunnisteisiin.
Lihavoitu ja kursivoitu teksti - tunnisteet , , Ja
Suosituimmat tekstin muotoilutunnisteet - sen korostaminen lihavoitu Ja kursivoitu. Niitä käytetään yleensä antamaan fragmentille merkitystä. Ensimmäinen tapaus korostaa hyödyllistä tietoa tai avainsanoja sisältävän fragmentin. Kursivointi palvelee samaa tarkoitusta kuin lihavoitu teksti, mutta tiedolla on vähemmän merkitystä, koska kursivoitu on vähemmän havaittavissa leipätekstin taustalla kuin lihavoitu teksti.Mietitään ensin tekstin lihavointi. Tähän toimintoon käytetään kahta tunnistetta − Ja . Ulkonäössä ei ole eroa. Vaikka jokainen selain voi tulkita jokaisen elementin eri tavalla, saatat nähdä eroja. Tunnisteiden teksti näyttää tältä Ja selaimen jo käsittelemässä muodossa:
Teksti tageissa vahva
Teksti b-tunnisteissa
Ja tältä nämä kaksi riviä näyttävät sivun lähdekoodissa:
Teksti tageissa vahva Teksti b-tunnisteissa
Voimme havaita saman tilanteen tapauksessa kursiiviset tunnisteet Ja . Yritä löytää erot kahden esimerkin välillä:
Tekstiä em-tageissa
Teksti tunnisteissa I
Ja tässä lähdekoodi:
Tekstiä em-tageissa Teksti tunnisteissa I
Joten harkitut lihavoitu ja kursivoitu tagit eivät itse asiassa eroa toisistaan, mutta miksi sitten tarvitsemme esimerkiksi tunnistetta jos siellä ? Loppujen lopuksi jälkimmäinen sisältää vain yhden merkin (sulkeja lukuun ottamatta), ja siksi se on helpompi kirjoittaa. Ja koko pointti on siinä, että tagit Ja vaikuttaa. Jos ympäröit avainsanoja näillä tunnisteilla, sillä on suotuisa vaikutus verkkosivuston mainostamiseen. Tärkeintä ei ole liioitella - tekstissä saa olla enintään 5 % lihavoitua tekstiä , ja sama määrä kursiivia tunnisteessa .
Jos haluat vain korostaa jonkin kohdan tekstistä, käytä tunnistetta tai . Yleisesti ottaen uskon, että hakukoneet pitävät myös näiden tunnisteiden tekstiä tärkeämpänä, mutta sisäinen optimointi niillä on silti vähemmän vaikutusvaltaa kuin Ja .
Tunnisteet tekstin korostamiseen rivillä - , Ja
Katsotaanpa nyt muutamia tunnisteita, jotka käyttävät viivaa tekstin suunnittelussa. Tunnetuin tekstieditori, jonka tiedät, on tag
tai alaviiva. Tällä tunnisteella ei ole vaikutusta sijoitukseen (sikäli kuin tiedän), mutta tekstin korostaminen ja huomion kiinnittäminen siihen auttaa. Annoin esimerkin tämän tunnisteen käytöstä juuri edellä. Kaksi muuta samanlaista tunnistetta - Ja . Molemmat suorittavat tekstin yliviivaamisen. Voit käyttää tätä tunnistetta missä tahansa tilanteessa: jos olet päivittämässä dokumenttia (tai pikemminkin osaa siitä), voit yliviivata vanhan ja lisätä uuden; jos aiot kirjoittaa jotain, joka poikkeaa materiaalin aiheesta; jotain, joka ei vastaa moraalisia ja eettisiä normeja.
Erot näiden kahden tunnisteen välillä ovat vain niissä kirjoittaminen, minkä seurauksena on parempi käyttää ensimmäistä, koska Ensinnäkin se on mukavampaa kirjoittaa, ja toiseksi sivusi sisältää vähemmän HTML-koodia, ja hakukoneet rakastavat tätä.
Tag ja attribuutit - tekstin kirjasinparametrit
Harkitse nyt tunnistetta, jota ei käytetä ilman attribuutteja. Sen avulla voit asettaa parametreja tietylle tekstille. Yleisesti ottaen on nyt parempi käyttää (porrastettuja tyylisivuja), koska... Niiden avulla voit pienentää sivun koko HTML-koodia huomattavasti. Joten, katsotaanpa samaa tagia . Kaikki on olemassa häntä varten kolme attribuuttia:
- kasvot- itse fontti. Esimerkiksi Arial, Courier tai Verdana. Voit luetella useita, koska kaikilla käyttäjillä ei ole laajaa fonttisarjaa, ja kirjoittamalla useita face-attribuutissa selain voi valita, kumpaa käyttää, tai pikemminkin, mikä niistä on järjestelmässä;
- koko— attribuutti, joka ilmaisee tekstin koon. Voidaan ilmaista sekä tavanomaisina yksiköinä että pikseleinä;
- väri- tekstin väri. Tätä attribuuttia voidaan käyttää sekä HTML-värikoodeissa että Word-värikoodeissa. Ensimmäiset ovat muotoa #FFFFFF (jossa F on mikä tahansa numero tai kirjain A:sta F) ja toiset kirjoitetaan yksinkertaisilla sanoilla (esimerkiksi punainen).
Tunnisteen teksti näyttää tältä käyttämällä jokaista attribuuttia:
Tämä teksti on 6px
Tämä teksti on punainen Tämä teksti on Arial-fontilla Tämä teksti on punainen ja koko 5pxJa tämä on mitä näet kirjoitetun koodin käsittelyn jälkeen: 
Estä tekstin suunnitteluelementit - otsikot -, kappale
, kappale
Lopuksi tarkastellaan lohkoelementtejä, joita käytetään melkein jokaisessa asiakirjassa. Nämä ovat otsikko- ja kappaletunnisteita. Tarkastellaanpa ensimmäistä. Otsikoita on 6 tyyppiä ja jokaisella on oma tunniste. Jokaisella tyypillä on vain oma sarjanumeronsa, ja ne tallennetaan tunnisteiden avulla
, ,..., . Tältä kaikki otsikot näyttävät käsiteltynä:
. Tältä kaikki otsikot näyttävät käsiteltynä:
Sanan otsikon jälkeinen numero vastaa tunnisteen numeroa
Puhutaan nyt kappaleen korostustunnisteesta
Tämän tunnisteen tehtävänä on erottaa teksti toisen samanlaisen tekstin ja tyhjän rivin välillä. Jos katsot asiakirjan lähdekoodia, näet seuraavat asiat:
Vihreät suorakulmiot sisältävät yhden kappaleen, punaiset suorakulmiot toisen. Ja tältä tämä koodi näyttää selaimen käsittelyn jälkeen (nuoli osoittaa tyhjälle riville):
Seurauksena on, että yksi kappale erottuu melko selvästi toisesta, mikä on hyödyllistä - lukemisesta tulee mukavampaa.
Tämä on artikkelin loppu asiakirjan muotoilutunnisteet. Niitä on paljon enemmän kuin tässä materiaalissa kuvailin. Joistakin niistä on vain sanottava paljon, minkä seurauksena niille omistetaan erilliset artikkelit, joissa on täydellinen arvostelu!
Nyt tutkimme tärkeimpiä tunnisteita. Aloitetaan siitä, mitä tageja sivulla vaaditaan muodostaen sen rakenteen.
Lohko. Yksinkertainen sivurakenne
Verkkosivusto on tavallinen tekstitiedosto, jonka tunniste .html. HTML-sivun teksti tagien kanssa tallennetaan tähän tiedostoon. Tässä tiedostossa on oltava seuraavat tunnisteet: tag , jonka pitäisi sisältää koko sivuston teksti (selain jättää huomioimatta kaiken tämän tagin ulkopuolelle kirjoitetun), ja sen sisällä pitäisi olla kaksi muuta tunnistetta: tag
palvelusivun sisällölle ja tunnisteelle - päätekstille, joka näkyy selaimen näytöllä.Palvelusisältöön, joka sijaitsee tunnisteen sisällä
, mukana on monia erilaisia asioita, mutta toistaiseksi tarvitsemme vain kaksi niistä. Tämä on tunnisteNäet, miltä tämä esimerkki näyttää selaimessa tästä linkistä.
Luulen, että kun olet lukenut sivun perusrakenteesta, olet edelleen hieman hämmentynyt siitä, miltä se kaikki näyttää käytännössä. Siksi tein erityisen videon, jossa näytän sinulle kuinka tehdä ensimmäinen HTML-sivusi ja ajaa se selaimessa (puhun myös sivun otsikosta, koodauksista, koodisuunnittelusta). Katso se ja jatka vasta sitten lukemiseen:
No, nyt, kun olemme oppineet luomaan yksinkertaisimpia sivuja, siirrymme tutkimaan hyödyllisiä tunnisteita, joita tulisi käyttää tagin sisällä.
. Nämä ovat tageja kappaleille, otsikoille, luetteloille, linkeille ja muille hyödyllisille asioille. Joten aloitetaan.Lohko. Kappaleet
Yksi sivun pääelementeistä on kappaleita. Niitä voidaan verrata kirjan kappaleisiin - jokainen kappale alkaa uudelta riviltä ja siinä on ns. punainen viiva (tämä on, kun kappaletekstin ensimmäinen rivi on sisennetty hieman oikealle). Oletuksena punaista viivaa ei ole, mutta se on helppo luoda (lisää tästä myöhemmin).
Kappale luodaan tunnisteen avulla
Täten:
Tämä on kappale.
Siinä yksi kappale lisää.
Ja vielä yksi kappale.
Tämä on kappale.
Siinä yksi kappale lisää.
Ja vielä yksi kappale.
Lohko. Otsikot h1, h2, h3, h4, h5, h6
Kappaleiden lisäksi sivulla on tärkeitä asioita otsikot. Niitä voidaan myös verrata kirjan otsikoihin - jokaisella luvulla on oma otsikkonsa (luvun otsikko) ja se on jaettu kappaleisiin, joilla on myös omat otsikot. No, sivun pääteksti sijaitsee kappaleissa.
Otsikot luodaan tagien avulla
,
,
,
,
,
. Niillä on eriasteinen merkitys. Otsikossa h1 pitäisi sijaita koko HTML-sivun otsikko, V h2- Nimi lohkot sivut, sisään h3- alilohkojen nimi ja niin edelleen.
,
,
,
. Niillä on eriasteinen merkitys. Otsikossa h1 pitäisi sijaita koko HTML-sivun otsikko, V h2- Nimi lohkot sivut, sisään h3- alilohkojen nimi ja niin edelleen.
,
. Niillä on eriasteinen merkitys. Otsikossa h1 pitäisi sijaita koko HTML-sivun otsikko, V h2- Nimi lohkot sivut, sisään h3- alilohkojen nimi ja niin edelleen.
Kaikki otsikot ovat oletuksena lihavoituja ja erikokoisia (tätä voidaan muuttaa CSS:n kautta, mutta siitä lisää myöhemmin). Katso esimerkki:
Otsikko h1
Otsikko h2
Otsikko h3
Otsikko h4
Otsikko h5
Otsikko h6
Tämä on ensimmäinen kappale.
Tämä on toinen kappale.
Tämä on kolmas kappale.
Tältä koodi näyttää selaimessa:
Otsikko h1
Otsikko h2
Otsikko h3
Otsikko h4
Otsikko h5
Otsikko h6
Tämä on ensimmäinen kappale.
Tämä on toinen kappale.
Tämä on kolmas kappale.
Lohko. Rasvainen
Tiedät jo, että otsikot ovat oletuksena rasvainen. Voit kuitenkin lihavoida tavallisen tekstin - laita se vain tunnisteeseen . Katso esimerkki:
Tämä on normaalia tekstiä, ja se on rasvainen teksti.
Tältä koodi näyttää selaimessa:
Tämä on normaalia tekstiä, ja se on rasvainen teksti.
tulee käyttää jonkin muun tunnisteen, kuten kappaleen, sisällä. Tässä tapauksessa kappaleet luovat sivun yleisen rakenteen (kappaleet ja otsikot) ja tunnisteen b lihavoittaa yksittäisiä tekstinpätkiä.
Lohko. Kursivointi
Rasvan lisäksi voit myös tehdä kursivoitu tagia käyttämällä :
Tämä on normaalia tekstiä, ja se on kursivoitu teksti.
Tältä koodi näyttää selaimessa:
Lohko. Luettelot
Kappaleiden ja otsikoiden lisäksi sivulla on toinen tärkeä elementti - tämä luetteloita. Tällaiset elementit ovat luultavasti tuttuja kaikille Internetin käyttäjille. Ne edustavat luetteloa jostain (luettelosta) kohta kohdalta. Jokaisen luettelon kohteen vieressä on yleensä täytetty ympyrä (sitä kutsutaan merkki lista).
Listat luodaan tunnisteen avulla
- , jonka tulee sisältää tunnisteita
- . Tag ul määrittää itse luettelon ja tunnisteet li listakohteet tulee sijoittaa (eli yksi li vastaa yhtä listamerkkiä). Huomaa, että li-tageja ei voi käyttää erikseen. Katso esimerkki:
Tämä on otsikon otsikko - Ensimmäinen kohde luettelossa.
- Toinen kohta luettelossa.
- Kolmas kohta luettelossa.
Tältä koodi näyttää selaimessa:
- Ensimmäinen kohde luettelossa.
- Toinen kohta luettelossa.
- Kolmas kohta luettelossa.
Tunnisteen avulla luodut luettelot ul, kutsutaan häiriintynyt luetteloita. Tämä nimi annettiin heille, koska niitä on myös tilattu luettelot, joissa on numeromerkit pistemerkkien sijaan. Tällaisissa luetteloissa on ul-tunnisteen sijaan tunniste
- , ja tällaisten luetteloiden kohteet luodaan myös tunnisteiden avulla li.
- Ensimmäinen kohde luettelossa.
- Toinen kohta luettelossa.
- Kolmas kohta luettelossa.
- Ensimmäinen kohde luettelossa.
- Toinen kohta luettelossa.
- Kolmas kohta luettelossa.
Tehdään järjestyslista tagin avulla ol:
Tämä on otsikon otsikko Tältä koodi näyttää selaimessa:
Järjestettyjen listojen mukavuus on se, että voin lisätä uuden listakohteen minne tahansa - ja numerointi järjestyy itsestään uudelleen (eli minun ei tarvitse seurata sitä mahdollisten muutosten sattuessa, kuten jos järjestäisin se manuaalisesti).
Lohko. Linkit
Linkit ovat elementtejä, jotka tekevät Internetistä Internetin. Linkkejä napsauttamalla voimme siirtyä sivuston sivulta toiselle. Jos niitä ei olisi olemassa, Internet olisi vain kokoelma sivuja, jotka eivät ole millään tavalla yhteydessä toisiinsa.
Tämä on otsikon otsikko Linkki phphtml.net-sivustolle.Tältä koodi näyttää selaimessa:
Linkkejä on ehdoton Ja suhteellinen, lisäksi ne voivat johtaa sekä sinun että jonkun muun sivustollesi. On parempi näyttää nämä vaikeat hetket kuin kuvata niitä tekstissä, joten tein seuraavan videon sinulle. Katso se ja jatka vasta sitten lukemiseen:
Lohko. Kuvat
Mietitään nyt, miten sijoitetaan kuva verkkosivustosi sivulla. Tätä varten tagi on tarkoitettu
jolla on pakollinen attribuutti src, joka tallentaa polun kuvatiedostoon.
Katsotaanpa, kuinka tämä toimii seuraavassa esimerkissä:
Tämä on otsikon otsikko 
Tältä koodi näyttää selaimessa:
Huomaa, että tunniste
ei vaadi sulkevaa tunnistetta.
Lohko. Linkit kuvien muodossa
Linkki siellä voi olla paitsi tekstiä myös kuva- tunniste riittää tähän
laita tagiin , kuten seuraavassa esimerkissä on tehty. Napsauta kuvaa ja seuraa linkkiä phphtml.net-sivustolle (palataksesi kirjaan napsauttamalla selaimen "takaisin"-painiketta):
Tämä on otsikon otsikko
Tältä koodi näyttää selaimessa:
Lohko. Rivinvaihto
Muista mitä tapahtuu, jos esimerkiksi teet kaksi kappaletta vierekkäin - tässä tapauksessa teksti, joka on jokaisessa kappaleessa alkaa Uusi rivit.
Katsotaanpa tätä seuraavalla esimerkillä:
Tämä on otsikon otsikko Tämä on ensimmäinen kappale.
Tämä on toinen kappale.
Tältä koodi näyttää selaimessa:
Tämä on ensimmäinen kappale.
Tämä on toinen kappale.
On kuitenkin tilanteita, joissa haluaisimme yhden kappaleen, mutta osa tekstistä alkaa uudelta riviltä. Miksi tämä voi olla tarpeen? Haluan esimerkiksi kirjoittaa runon, mutta en halua jakaa jokaista riviä erilliseksi kappaleeksi, koska se ei olisi kovin loogista.
Tätä varten sinun tulee kirjoittaa tunniste kohtaan, jossa pitäisi olla rivinvaihto
. Huomaa, että tämä tagi on erityinen eikä siinä ole sulkevaa tunnistetta.Katsotaanpa, miten se toimii seuraavan esimerkin avulla:
Tämä on otsikon otsikko Tämä on tekstin ensimmäinen rivi,
ja tämä on toinen.Tältä koodi näyttää selaimessa:
Tämä on tekstin ensimmäinen rivi,
ja tämä on toinen.Lohko. HTML-kommentteja
Lähes kaikilla ohjelmointikielillä on sellainen käsite kuin "kommentit".
