5. õppetund.

Selles õppetükis me:
1. Uurime, kuidas muuta html-kood meile mugavamaks ja hõlpsamini loetavaks.
2. Vaatame, kuidas tekstirida õigesti murda.

Html-koodi mugavaks muutmine.

Nüüd on meie kood selge ja hõlpsasti loetav, kuna teksti on vähe ja silte praktiliselt pole. Kui loome keerukama lehe, on silte palju, seega on õiget raske leida.

Et vältida siltide segadust, tuleb sildid ja read esialgu paigutada nii, et neid oleks visuaalselt kergem tajuda. Kui brauser loeb teavet aadressilt html lehekülgi, tema jaoks pole vahet, kui palju tühikuid ja kui palju tühjad read koodis.

Muutsin lehe koodi teksti meie loodud teksti suhtes, kuid see ei oma tähtsust. Vasak ja parem pilt näitavad sama koodi. Mõlemad valikud kuvatakse brauseri poolt monitori ekraanil täpselt samamoodi. Nõus, paremal näidatud koodiga töötamine on palju lihtsam kui vasakpoolse koodiga.

Kood, mida me vaatame, on väga lihtne, kuid isegi praegu on erinevus visuaalses tajumises märgatav. "Asjade kordategemiseks" pole konkreetseid reegleid, iga meister otsustab ise, kuidas tal on mugavam töötada.

HTML-i reavahetus. Märgi <br>.

Pöörake tähelepanu pildile. Esimeses variandis on tekst kirjutatud üherealiselt, teises variandis kaherealiselt.

Brauser kuvab mõlemad valikud ühtemoodi. Tekst kirjutatakse ühele reale:

Küsite, miks see nii on? Tõepoolest, ühes koodis on osa teksti teisaldatud teisele reale. Loogiline oleks, kui brauseris oleks osa tekstist ka teisele reale viidud, aga html-il on selles osas oma loogika. Kui teeme html-koodis reavahetuse, siis brauseri jaoks võrdub see ühe tühikuga(Kuidas tavaline ruum sõnade vahel tekstis). Kui nihutame osa tekstist mitte ühe rea võrra allapoole, vaid 2 või 3 (suvaline arv), siis arvestab brauser seda vahemaad ikkagi üheks tavaliseks sõnadevaheks ja ekraanil kuvamisel kirjutatakse tekst ühele reale .

Märgi <br>

Kui kolmandas tunnis siltidega tutvusime, siis mainisin, et on silte, mis ei vaja sulgemist. Tag <br>ühte neist kasutatakse reavahedeks.
Rakendame seda koodis:

Sisestasime sildi <br> meie html-koodi ja nüüd, kui käivitate faili brauseri kaudu, kantakse osa tekstist üle järgmisele reale.
* Ärge unustage salvestada muudatusi Notepadis (Ctrl + S) ja värskendada lehte brauseris (F5).

Tere, kallid lugejad ajaveebi sait! Need, kellel on olnud aega sellega vähemalt pealiskaudselt tutvuda, on ilmselt juba teadmiseks võtnud, kuigi sisse üldine ülevaade. See tähendab, et neil on ettekujutus, millist HTML märgid kasutatakse dokumendi koodis.

Tänases artiklis püüame välja mõelda, mis on tühik HTML-is ja millistel juhtudel saab seda kasutada tühikud koodi vormindamisel hõlpsaks lugemiseks. Saame teada, millal on vaja kasutada mittemurdvat tühikut, ning tutvume ka teiste erimärkidega (või, nagu neid nimetatakse ka mnemoonikaks).

Tegelikult soovitaksin teil mitte eirata erinevate erimärkide kasutamise teemat, kuna see on oluline komponent, mis võimaldab teil keeleõppe lõpule viia. hüperteksti märgistus. Üldiselt ei ole selles väljaandes esitatud teave kindlasti üleliigne. Noh, nüüd asja juurde.

Tühikud ja tühimärgid HTML-is

Kõigepealt pead tegema oluline märkus. Arvuti klaviatuuril on spetsiaalsed võtmed, mis võimaldavad teil rakendada teksti eraldamist (sellest lähemalt allpool). Kuid ainult lai tühikuklahv eraldab sõnu mitte ainult redaktoris, vaid ka brauseriaknas. Joone murdmisel ja servadest taandamisel on nüansse.

Teatud elementide kuvamine veebibrauseris on teatavasti määratud siltide abil. Teksti vormindamiseks kasutatakse üldtuntud , mis on plokipõhine. See tähendab, et selle sisu asub kogu saadaolevas laiuses.

To murra read lõigu P sees, peate kasutama ühte BR-märgendit, millega saate seda teha. Oletame, et peame teksti sisestama mõned read luuletusest, mille sisse kirjutame tekstiredaktor:

Hoolimata asjaolust, et salmi read asuvad õigesti ja sidekriipsud on tehtud õigetesse kohtadesse, näeb brauseris kõik välja teisiti:

Veebibrauseri aknas sama kuva saavutamiseks peate igasse reavahetusse kirjutama BR:

Nüüd oleme ülesande täitnud ja poeetilised read kuvatakse brauseris täiesti õigesti:

Seega vajalikud ülekanded read on valmis. Veel üks omadus, mida siinkohal tuleb märkida, on see, et veebibrauser kuvab mitu üksteise järel tulevat tühikut ühena. Seda saate kontrollida, kui proovite samas redaktoris kahe sõna vahele panna mitte ühe, vaid mitu tühikut ja klõpsates nuppu "Salvesta", vaatate tulemust brauseris.

Tühik, tabeldusmärk ja reavahetus

Põhimõtteliselt nendega tühikud tutvume kohe, kui hakkame toimetajas tekstiga töötama ja selle sisse vormistama õigel kujul. Sellise ülesande rakendamiseks on spetsiaalsed klahvid, millest igaüks vastab oma tühikumärgile:

• Tühikuklahv on arvuti klaviatuuri kõige laiem klahv (ilma sildita);
• Tab - vasakpoolne klahv, millel on kiri "Tab" ja kaks erinevatesse suundadesse suunatud noolt;
• Reavahetus - klahv "Enter".

Siiski, nagu ma eespool ütlesin, finaal soovitud tulemus mitte ainult tekstiredaktoris, vaid ka brauseris, saame selle ainult esimest klahvi kasutades. Kõik kolm klahvi (sh tabeldus- ja reavahetus on kasulikud HTML-koodi vormindamisel. Oletame, et selline näeb välja NotePad++ koodifragment (selle redaktori kohta on palju teavet) kõigi tühikumärkide kuvamisel:

Saame koodi, mida on tänu tühikutele lihtne lugeda ja mõista. Oranžid nooled tähistavad klahvi Tab abil loodud taandusi ning sümbolid CR ja LF tähistavad sisestusklahvi abil loodud reavahetusi.

Vaadatakse üksteise sees olevaid konteinereid ning avamis- ja sulgemissildid on selgelt nähtavad. Sellel kujul see kood saate hõlpsalt redigeerida. Nüüd võrrelge seda sama koodiga, millel pole sellist tekstijaotust:

Samamoodi saab kirjutada ka tühimärke kasutades CSS-i reeglid, mis näeb visuaalselt selge ja seeditav:

Kui olete viinud kõik stiilid ühise nimetaja juurde ja olete laadide faili redigeerimise täielikult lõpetanud, saate redigeerida, eemaldades koodist kõik tühikud. Seda on vaja suurendada, mis on ressursi reklaamimisel väga oluline.

Erimärgid (või mnemoonika) HTML-koodis

Nüüd vaatame, millistel juhtudel on vaja kasutada erimärke, mida mainisin artikli alguses. HTML-i erimärgid, mida mõnikord nimetatakse ka mnemoonikaks, võeti kasutusele, et lahendada pikaajaline probleem kodeeringutega, mis tekkisid hüperteksti märgistuskeeles.

Klaviatuuril teksti sisestamisel kodeeritakse kasutatava keele märgid. Veebibrauseris kuvatakse trükitud tekst, kasutades fonte, mille valisite pöörddekodeerimise toimingu tulemusena.

Fakt on see, et selliseid kodeeringuid on palju, nüüd pole meil eesmärki neid üksikasjalikult analüüsida. Asi on selles, et igal neist võivad puududa teatud sümbolid, mida tuleb siiski kuvada. Oletame, et tunnete soovi kirjutada üksikuid jutumärke või rõhumärke, kuid neid ikoone lihtsalt komplektis ei ole.

Selle probleemi kõrvaldamiseks võeti kasutusele spetsiaalsete sümbolite süsteem, mis sisaldab tohutul hulgal erinevaid mnemoonikaid. Kõik need algavad ampersandiga "&" ja lõpevad tavaliselt semikooloniga ";". Alguses oli igal erimärgil oma digitaalne kood. Näiteks mittemurdva tühiku puhul, mida me allpool üksikasjalikumalt käsitleme, kehtib järgmine kirje:

Kuid mõne aja pärast määrati enamlevinud sümbolitele täheanaloogid (mnemoonika), et neid oleks lihtsam meelde jätta. Oletame, et sama katkematu ruumi puhul näeb see välja järgmine:

Selle tulemusena kuvab brauser vastava sümboli. Mnemoonika nimekiri on väga mahukas, HTML-is kõige sagedamini kasutatavad erimärgid saate teada järgmisest tabelist:

Mõnede erimärkide, sealhulgas katkematu tühiku ja pehme sidekriipsu kasutamise juhud

Kui olete tabelit juba veidi uurinud, olete saanud kinnitust sellele, mida ma eespool ütlesin, et kõigi erimärkide kuvamiseks kasutatakse digitaalset koodi () või selle tähestikulist analoogi (sümboolne mnemoonika), kus räsikomplekti asemel kirjutatakse märgid ja numbrid, tähed ().

Nüüd vaatame, millal neid koode kasutada. Oletame, et artiklis peate teavitamise eesmärgil märkima mõne HTML-märgendi, näiteks