Säännöt HTML-dokumenttien rakentamiseen. Luokkien tunnisteet ja nimet. CSS-muotoilusäännöt
Mikä on HTML
Maailmanlaajuinen web World Laaja verkko(WWW) koostuu Web-sivuista, jotka on luotu käyttämällä niin kutsuttua merkintäkieltä HTML hyperteksti(Hypertekstin merkintäkieli). Vaikka monet ihmiset puhuvat ohjelmoinnista tällä kielellä, HTML ei ole ohjelmointikieli perinteisessä merkityksessä. HTML on asiakirjankuvauskieli. HTML-dokumenttia kehitettäessä tehdään merkintä tekstiasiakirja aivan kuten editori tekee punaisella kynällä. Nämä merkit osoittavat, missä muodossa asiakirjan sisältämät tiedot esitetään.
Erityisiä HTML-dokumenttien katseluohjelmia, joita usein kutsutaan selaimiksi, käytetään tulkitsemaan sääntöjen mukaan merkittyjä tiedostoja HTML-kieli, muotoilemalla ne Web-sivuiksi ja näyttämällä niiden sisällön käyttäjän tietokoneen näytöllä. Olemassa suuri määrä eri yritysten kehittämät selainohjelmat, mutta nykyään koko ohjelmien joukosta erottuu selvästi kaksi johtavaa ohjelmaa - Netscape Communicator ja Microsoft Internet Explorer.
Netscape Navigatorin on kehittänyt Netscape Communications Corporation. Kuten moni ohjelmistotuotteita, tästä ohjelmasta on useita versioita. Netscape Communicatorin uusin versio kirjoitushetkellä oli versio 4.7. Internet-ohjelma Explorerin on kehittänyt Microsoft. Uusin versio tämä ohjelma on 5.0.
Muut selaimet ovat suosiossa paljon jäljessä. Useita vuosia sitten Netscapen selain oli johtavassa asemassa selainten joukossa, ja yli kaksi kolmasosaa käyttäjistä käytti juuri tätä selainta. Kun vapautat selaimesi, Microsoft yritys on tehnyt suuria ponnisteluja valloittaakseen tämän osan markkinoista. Keinoin joukkotiedotusvälineet usein
Selainten välisestä sodasta on raportoitu käyttäjiä kohtaan. Nyt näiden kahden selaimen suosio on vertailukelpoinen. Microsoft-selaimen kasvavaa suosiota edesauttaa selaimen sisällyttäminen käyttöjärjestelmään Windows-järjestelmät 98, selaimen valinta on kuitenkin viime kädessä käyttäjän päätettävissä.
Nykyaikaisissa selaimissa on laajat mahdollisuudet, mutta heille tärkeintä on HTML-sääntöjen mukaan merkittyjen asiakirjojen tulkinta. Tämä kirja on omistettu pääasiassa näiden sääntöjen kuvaukselle. Ensimmäisessä osassa tarkastellaan vain HTML-dokumenttien rakentamisen perusperiaatteita.
Ymmärtääksemme, mikä merkintäkieli on, muistetaan vanhoja hyviä aikoja, jolloin monet työskentelivät WordStarin kaltaisten tekstieditorien kanssa. Niissä lauseen korostamiseksi, esimerkiksi lihavoituna, sen alkuun ja loppuun sijoitettiin erityisiä merkkejä (/B ja /b):
/B Tämä teksti näytetään lihavoituna/b
Tulostettaessa tällaista tekstiä tulostuslaitteeseen (ei puhuta vielä näytöistä, noina kaukaisina aikoina niitä joko ei ollut ollenkaan tai oli aakkosnumeerisia näyttöjä, jotka eivät sallineet fonttien vaihtamista), symbolit / in pakotettiin käyttämään lihavointia. fonttia, kunnes merkit /b kohtaavat.
HTML toimii täsmälleen samalla tavalla. Jos on tarpeen korostaa tekstiä näytöllä lihavoituna, tämä voidaan tehdä samalla tavalla:
Tämä teksti näkyy lihavoituna
Symbolit lihavoittuvat ja symbolit sammuttavat sen. Tällaisia merkkejä, jotka ohjaavat tekstin näyttämistä ja joita ei itse näy näytöllä, kutsutaan yleensä HTML-kielellä tunnisteiksi (englannin sanasta tag - label, sign).
Kaikki HTML-kielitunnisteet on erotettu erotinmerkeillä (< и >), jonka väliin kirjoitetaan tagin tunniste (nimi) (esimerkissämme se on), ja mahdollisesti sen parametrit. Ainoa poikkeus tästä säännöstä on kommenttitunnisteet, joissa on monimutkaisemmat erottimet (). Tunnisteiden nimet sekä niiden parametrit voidaan kirjoittaa mihin tahansa rekisteriin. Johdonmukaisuuden vuoksi useimmat tämän kirjan tunnisteet on kirjoitettu isoilla kirjaimilla.
Suurin osa HTML-tunnisteet käytetään pareittain, eli tietylle tunnisteelle, sanotaanko sitä avaukseksi, dokumentissa on vastaava päättävä tagi. Tekijä: HTML-säännöt Lopputunniste kirjoitetaan samalla tavalla kuin aloitustunniste, mutta / (vinoviiva) tagin nimen eteen. Ainoa perustavanlaatuinen ero parillisten tunnisteiden välillä on se, että sulkevat tagit eivät käytä parametreja.
Tunnisteita, jotka vaativat vastaavat lopputunnisteet, kutsutaan säilötunnisteiksi. Kutsumme kaikkea, mikä on kirjoitettu vastaavien avaus- ja sulkemistunnisteiden väliin, konttitunnisteen sisällöksi. Joskus lopputunniste voidaan jättää pois. Esimerkiksi tagille, joka kuvaa taulukon solun tietoja
Useimmat asiakirjan tekijät jättävät pois useiden tunnisteiden lopputunnisteet. Esimerkki olisi luettelokohteen tunniste
Nykyaikaiset selaimet muotoilevat asiakirjat monissa tapauksissa oikein, jos jotkin lopputunnisteet jätetään pois, mutta tätä käytäntöä ei voi suositella.
Jotkut tagit eivät vaadi lopputunnisteita ollenkaan. Esimerkkejä ovat kuvan lisäystunniste , pakotettu rivinsyöttö
, perusfontin merkintä jne. Usein tunnisteen tarkoituksen perusteella voit arvata, tarvitseeko se lopullisen fontin.
On olemassa yleisiä sääntöjä, joilla selaimet tulkitsevat tunnisteita. Toisin kuin ohjelmointikielissä, joissa virheelliset lausunnot johtavat vastaavien sanomien antamiseen ohjelman käännösvaiheessa ja vaativat muokkausta, HTML:ssä ei ole tapana reagoida virheellisiin tunnistemerkintöihin. Väärin kirjoitettu tunniste tai sen parametri tulisi yksinkertaisesti jättää selaimen huomiotta. Tämä on yleinen sääntö kaikille selaimille, ja se ei koske vain virheellisesti kirjoitettuja tunnisteita, vaan myös tunnisteita, joita tämä selaimen versio ei tunnista. Esimerkkinä voisivat olla tunnisteet, jotka on ehdotettu ja otettu käyttöön tietylle selaimelle ja tuntemattomia toiselle. Esimerkiksi säilötunniste, jonka tehtävänä on tarjota vaihtoehtoista tietoa Selaimet, jotka eivät tue kehysrakenteita, eivät tunnista selainta. Kehyksiä tukeva selain ohittaa kaikki sen sisältämät tiedot, kun se kohtaa tunnisteen. Ja selain, joka ei tunne kehyksiä, ei luonnollisesti ymmärrä tunnistetta. Yllä olevan säännön mukaan tämä tunniste kuitenkin yksinkertaisesti ohitetaan, mutta kaikki myöhemmät tiedot näytetään.
Tunnisteet voidaan kirjoittaa parametrien tai attribuuttien avulla (englanniksi attribuutti). Tässä kirjassa käytämme useimmiten termiä parametri. Sarjat hyväksyttävät parametrit ovat yksilöllisiä jokaiselle tunnisteelle. Yleiset säännöt Parametrien merkinnät ovat seuraavat. Tunnisteen nimen perässä voi olla parametreja välilyönnillä erotettuna. Tunnisteparametrien järjestys on mielivaltainen. Monet parametrit vaativat arvojen määrittämistä, mutta joillakin parametreilla ei ole arvoja tai ne voidaan kirjoittaa ilman niitä, ottamalla oletusarvot. Jos parametri vaatii arvon, se ilmoitetaan parametrin nimen jälkeen yhtäläisyysmerkillä. Parametrin arvo voidaan kirjoittaa lainausmerkkeihin tai ilman niitä. Ainoa tapaus, jossa et tule toimeen ilman lainausmerkkejä, on silloin, kun parametrin arvossa on välilyöntejä. Parametriarvoissa (toisin kuin tunnisteiden nimissä ja parametreissa) kirjainkoko on joskus tärkeä. Tässä on esimerkki tunnistemerkinnästä, jossa on parametrit:
Parametri |
Tarkoitus |
LINKKI |
|
TAUSTA |
Osoittaa taustana käytetyn kuvan URL-osoitteeseen |
ALAMAARJA |
Asettaa asiakirjan alamarginaalin reunuksen pikseleinä. |
BGCOLOR |
Määrittää asiakirjan taustavärin |
BGPROPERTIES |
Kun asetuksena on FIXED, taustakuvaa ei rullata |
VASEN MARGINAALI |
Asettaa asiakirjan vasemman marginaalin pikseleinä. |
LINKKI |
Määrittää linkin värin, jota ei ole vielä katsottu |
OIKEA MARGIN |
Asettaa asiakirjan oikean reunuksen pikseleinä. |
SCROLL |
Asettaa vierityspalkkien läsnäolon tai puuttumisen selainikkunassa |
TEKSTI |
Määrittää tekstin värin |
TOPMARGIN |
Asettaa asiakirjan ylämarginaalin reunuksen pikseleinä. |
VLINK |
Määrittää jo katsotun linkin värin |
Asiakirjan taustan määrittävien BACKGROUND- ja BGCOLOR-parametrien käyttöä käsitellään yksityiskohtaisesti kohdassa.
Vain selain tukee BGPROPERTIES-parametria, joka hyväksyy yhden arvon FIXED Microsoft Internet Tutkimusmatkailija.
Vain Microsoft Internet Explorerin versio 4.0 ja uudemmat tunnistavat parametrit BOTTOMMARGIN, LEFTMARGIN, RIGHTMARGIN ja TOPMARGIN, jotka määrittävät tekstin reunojen ja vastaavien ikkunan reunojen välisen etäisyyden pikseleinä, sekä SCROLL-parametrin.
ALINK-, LINK-, TEXT- ja VLINK-parametrit määrittävät linkkien ja asiakirjatekstin värit.
HTML:ssä värit määritellään heksadesimaaliluvuilla. Värijärjestelmä perustuu kolmeen pääväriin - punaiseen, vihreään ja siniseen - ja on nimetty RGB:ksi. Jokaiselle värille annetaan heksadesimaaliarvo, joka vaihtelee välillä 00 - FF, joka vastaa desimaalialuetta 0-255. Nämä arvot yhdistetään sitten yhdeksi numeroksi, jota edeltää #-symboli. Esimerkiksi numero #800080 edustaa violettia väriä. Jotta et muista lukujoukkoja, voit käyttää värien nimiä, jotka on annettu liitteessä P2. Selainten varhaiset versiot tunnistivat vain 16 vakiovärin nimet, jotka on merkitty sovelluksessa tähdellä. Selainten nykyaikaiset versiot tunnistavat kaikki 140 värinimeä.
Tekstin muotoilu
Tässä osiossa tarkastellaan mahdollisuuksia muotoilla yksittäisiä merkkejä asiakirjan tekstissä.
Lohkotason tagit ja peräkkäiset tunnisteet
Joitakin BODY-osiossa mahdollisesti esiintyviä HTML-tageja kutsutaan lohkotason tageiksi, kun taas toisia kutsutaan tekstitason tageiksi, vaikka tämä tagien jako tasot ovat jossain määrin mielivaltaisia.
Erona HTML-tunnisteiden tasojen välillä on se, että lohkotason tagit voivat sisältää peräkkäisiä tageja ja muita lohkotason tageja, kun taas peräkkäiset tagit sisältävät vain dataa ja muita peräkkäisiä tunnisteita. Lohkotunnisteet kuvaavat suurempia asiakirjarakenteita kuin peräkkäiset tunnisteet.
Oletuksena tämäntyyppiset tunnisteet sijoitetaan eri tavalla kuvaustekstiin: lohkotason tagit alkavat uudelta riviltä, kun taas peräkkäiset tagit eivät.
Looginen ja fyysinen muotoilu
HTML-dokumenttien tekstin muotoilua varten tarjotaan koko joukko tunnisteita, jotka voidaan jakaa loogisiin ja fyysisiin muotoilutageihin.
Loogiset muotoilutunnisteet ilmaisevat (nimistillään) niiden tekstiosien rakennetyypit, kuten ohjelmakoodi (tunniste), lainaus (tag), lyhenne (tunniste) jne. (katso näiden ja muiden vastaavien tunnisteiden kuvaukset seuraavassa osiossa ). Tunnisteiden ja avulla voit esimerkiksi merkitä yksittäisiä fragmentteja korostetuiksi tai voimakkaasti korostetuiksi. Huomaa, että puhumme rakenteellisesta merkinnästä, joka ei vaikuta selaimen fragmentin näyttöön. Siksi tällaista merkintää kutsutaan loogiseksi. Selaimet näyttävät oletusarvoisesti loogisia muotoiltuja katkelmia näytöllä tietyllä tavalla. Näyttötyypillä ei ole mitään tekemistä fragmentin rakennetyypin (eli loogisen muotoilutunnisteen nimen) kanssa, mutta se voidaan helposti ohittaa.
Fyysiset muotoilutunnisteet määrittävät muodon, jolla niissä määritellyt tekstifragmentit näytetään selainikkunassa (asiakirjan tekijän mieltymysten mukaan). Jos haluat esimerkiksi näyttää katkelman kursiivilla, voit käyttää kursivoitutunnistetta . Tämä ja muut yleisesti käytetyt fyysiset muotoilutunnisteet kuvataan myöhemmin tämän luvun "Fyysisen tekstin muotoilutunnisteet" -osiossa.
HTML-dokumenttien kehittäjien välillä on jo pitkään käyty keskustelua yhden tai toisen lähestymistavan eduista ja haitoista. HTML 4.0 -määrityksen julkaisun myötä tämä keskustelu päättyi loogisen muotoilun käytölle, kun julistettiin periaate asiakirjan rakenteen erottamisesta sen esittämisestä. Todellakin, vain loogisen muotoilun pohjalta voidaan joustavasti ohjata dokumentin esitystapaa nykyaikaisilla menetelmillä (tyylisivujen, dynaamisesti muuttuvien asiakirjojen jne. perusteella).
Fyysistä muotoilua voidaan kuitenkin tällä hetkellä käyttää vapaasti. HTML 4.0 -spesifikaatio poisti käytöstä joitakin fyysisiä muotoilutunnisteita, mutta kaikki selaimet tukevat niitä edelleen. Huomaa, että kaikki selaimet eivät tunnista kaikkia loogisia muotoilutunnisteita, jotka on suunniteltu korvaamaan yksittäisiä fyysisiä muotoilutunnisteita, mikä tekee niiden käytöstä erittäin hankalaa. Esimerkkinä on looginen tunniste, jota suositellaan käytettäväksi fyysisen tunnisteen sijaan.
Alla käsitellyt tunnisteet liittyvät tekstitason tunnisteisiin, eli ne on suunniteltu pääasiassa merkitsemään pieniä merkkiryhmiä. Jotkut tagit voivat myös määrittää merkinnän lohkotasolla.
Loogiset tekstin muotoilutunnisteet
Tag
Tunniste merkitsee tekstinsä lyhenteenä (ABBReviation). Vaikka tämä tunniste sisältyy HTML 4.0 -määritykseen, mikään selain ei tue sitä tällä hetkellä.
Tag
Tag. Aivan kuten tunnistetta, sitä käytetään merkitsemään lyhenteitä. Tätä tagia suositellaan käytettäväksi niin sanottujen lyhenteiden eli lyhenteistä koostuvien puhuttujen sanojen merkitsemiseen. Tunnistetta voidaan jatkossa käyttää elementtien ei-visuaaliseen esittämiseen, esimerkiksi puhesynteesissä.
Tätä tunnistetta on kätevä käyttää yhdessä TITLE-parametrin kanssa, jonka arvoksi voit määrittää lyhenteen täyden muodon. Sitten visuaaliset selaimet näyttävät koko nimen työkaluvihjeenä, kun viet hiiren osoittimen tunnisteella merkityn tekstin päälle.
Huomaa, että vain Microsoft Internet Explorer -selain tunnistaa tunnisteen. Esimerkki:
SPbGITMO - yksi Pietarin johtavista teknisistä yliopistoista
Tag
Tunnisteella merkitään lainaukset tai kirjojen ja artikkeleiden otsikot, linkit muihin lähteisiin jne. Selaimet näyttävät tällaisen tekstin yleensä kursiivilla. Esimerkki:
Nevskoe Vremya on yksi Pietarin suosituimmista kaupunkilehdistä
Tag
Tunniste merkitsee tekstinsä pieneksi osaksi ohjelmakoodia. Näytetään yleensä monospace-fontilla. Tätä tunnistetta ei pidä sekoittaa lohkotason elementtitunnisteeseen, jota tulisi käyttää suurten koodipalojen (listausten) merkitsemiseen.
Esimerkiksi:
Esimerkki C-ohjelmointikielen yksinkertaisimmasta operaattorista:
puts("Hei, maailma!");
Tunnisteiden käytössä on toinen ero ja Ohjelmakoodissa useiden peräkkäisten välilyöntien läsnäolo on usein tärkeää. Niiden näyttö tallennetaan vain tunnistetta käytettäessä.
Tag
Tunniste merkitsee tekstinsä poistetuksi. Tämä elementti on hyödyllinen dokumenttiin versiosta toiseen tehtyjen muutosten merkitsemiseen. Tunnistetta voidaan käyttää tekstitason elementtinä ja lohkotason elementtinä.
Tunnisteella on kaksi valinnaista parametria: CITE ja DATETIME. CITE-parametrin arvon on oltava URL-osoite asiakirjaan, joka selittää, miksi fragmentti poistettiin.
Parametri DATETIME määrittää poistopäivämäärän muodossa: VVVV-KK-PPThh:mm:ssTZD, joka määrittää poiston vuoden, kuukauden, päivän, tunnit, minuutit ja sekunnit sekä aikavyöhykkeen (aikavyöhyke). Esimerkiksi:
Viimeisin hyväksytty HTML-kuvauskielen määritys on versio 3.2 4.0
Merkitty teksti näytetään yleensä yliviivattuna tekstinä. HTML 4.0 -spesifikaatio antaa tälle tunnisteen etusijalle fyysisen muotoilutunnisteen tai tunnisteen sijaan, joka tarkoittaa yliviivattua tekstiä. Kuitenkin tag
Tag
Tunniste merkitsee tekstifragmenttinsa määritelmäksi (DeFinitionN). Tällä tunnisteella voidaan esimerkiksi merkitä termi, kun se esiintyy tekstissä ensimmäistä kertaa. Esimerkki:
Internet Explorer on suosittu verkkoselain
Tunnistetta tukee vain Microsoft Internet Explorer. Näytetään oletuksena kursiivilla.
Tag
Tunniste merkitsee tekstinsä lisäyksellä (INSertion). Tämä elementti on hyödyllinen dokumenttiin versiosta toiseen tehtyjen muutosten merkitsemiseen. Tunnistetta voidaan käyttää tekstitason elementtinä ja lohkotason elementtinä.
Tunnisteella on kaksi valinnaista parametria: CITE ja DATETIME. CITE-parametrin arvon tulee olla URL-osoite asiakirjaan, joka selittää lisäysten yksityiskohdat.
Parametri DATETIME määrittää lisäyspäivämäärän muodossa: VVVV-KK-PPThh:mm:ssTZD, joka määrittää lisäyksen vuoden, kuukauden, päivän, tunnin, minuutit ja sekunnit sekä aikavyöhykkeen (aikavyöhyke).
Teksti, jossa on merkintä, näytetään yleensä alleviivattuna tekstinä. Tällä hetkellä vain Microsoft Internet Explorer tunnistaa tunnisteen.
Tag
Tunnisteella (EMphasis - korostus, alleviivaus) korostetaan tärkeitä tekstinpätkiä. Selaimet näyttävät tämän tekstin yleensä kursiivilla. Esimerkki:
Esimerkki yksittäisten tekstin sanojen korostamisesta
.
Tag
Tunniste merkitsee tekstin käyttäjän syöttämäksi näppäimistöltä. Näytetään tyypillisesti monospace-fontilla, esimerkiksi:
Käynnistä tekstieditori kirjoittamalla: notepad
Tämän tunnisteen käyttö on parempi kuin fyysisen muotoilutunnisteen käyttö.
Tag
Tunniste merkitsee lyhyitä lainausmerkkejä tekstirivillä. Toisin kuin lohkotason tunniste, näyttö ei erota merkittyä tekstiä tyhjillä riveillä. Näytetään yleensä kursiivilla. Tunnisteen (toisin kuin ) tunnistaa tällä hetkellä vain Microsoft Internet Explorer.
Tagissa on CITE-parametri, jonka arvo voi olla lainauksen lähde.
Tag
Tunniste merkitsee tekstin näytteeksi (SAMPle). Tämän tunnisteen yleinen käyttö on ohjelmien tekstitulosteen merkitseminen (näytetuloste). Sitä käytetään myös korostamaan useita merkkejä monospace-fontissa.
Tämän tunnisteen käyttö on parempi kuin fyysisen muotoilutunnisteen käyttö. Esimerkiksi:
Ohjelman toiminnan seurauksena tulostetaan seuraavaa: Hei, maailma! .
Tag
Tunnisteella korostetaan yleensä tärkeitä tekstinpätkiä. Selaimet näyttävät tämän tekstin yleensä lihavoituna. Esimerkki:
Pietari sijaitsee Suomenlahden itäisimmässä kärjessä Nevajoen suulla< /STRONG>
Tämän tunnisteen käyttö on parempi kuin fyysisen muotoilutunnisteen käyttö. Tunniste merkitsee yleensä tärkeämpiä tekstinpätkiä kuin tunnisteella merkityt.
Tag
Tunniste merkitsee ohjelman muuttujien nimet. Yleensä tämä teksti näytetään kursiivilla. Esimerkki:
Aseta muuttujan N arvo
Kuvassa on näyttö joistakin esimerkeistä, jotka on annettu kuvattaessa loogisia tekstin muotoilutunnisteita. 1.1. Kuvassa näkyy, kuinka kun viet hiiren osoittimen tunnisteella merkityn tekstin päälle, näkyviin tulee työkaluvihje.
Riisi. 1.1. Esimerkkejä tekstin muotoilusta
Olet luultavasti huomannut, että jotkut elementit antavat saman tuloksen. Lisäksi jotkin elementit eivät välttämättä muuta tekstin esitystapaa näytöllä millään tavalla. Voi herää oikeutettu kysymys: miksi niin monenlaisia muotoiluelementtejä luotiin?
Vastaus on tämän elementtiryhmän nimessä. Ne on suunniteltu asettamaan loogisia painotuksia, korostamaan loogisia osia ja korostamaan väitteiden olemusta. Niiden käyttö on erittäin merkityksellistä, koska luultavasti lähitulevaisuudessa selainten ominaisuudet lisääntyvät, esimerkiksi on mahdollista etsiä viittauksia verkosta, ja ehkä seuraavan sukupolven selaimet oppivat lukemaan asiakirjoja ääneen. Lisäksi mikään ei estä nykyään tyylisivuja käyttäviä asiakirjojen tekijöitä asettamasta haluttua näyttöä millekään tunnisteelle ohittaen oletusarvot.
Fyysiset tekstin muotoilutunnisteet
Tässä on kuvaus fyysisen muotoilun tunnisteista. Joitakin niistä ei suositella käytettäväksi HTML 4.0 -määrityksen mukaan edellä mainituista syistä. HTML 4.0 -spesifikaatio on poistanut jotkin tunnisteet käytöstä, mutta selaimet tukevat niitä edelleen.
Tag
Tunniste näyttää tekstin lihavoituna. Useimmissa tapauksissa on suositeltavaa käyttää loogista muotoilutagia tagin sijaan. Esimerkiksi:
Tämä on lihavoitu fontti.
Riisi. 1.2. Esimerkkejä fyysisestä tekstin muotoilusta (Netscape-selain)
Tag
Tag näyttää tekstin kursiivilla. Useimmissa tapauksissa on suositeltavaa käyttää , tai -tunnisteita tämän tunnisteen sijaan, koska jälkimmäinen kuvastaa paremmin valitun tekstin tarkoitusta. Esimerkiksi:
Valinta kursivoitu
Tag
Tunniste näyttää tekstin monospace-fontilla. Useimmissa tapauksissa on parempi käyttää , tai -tunnisteita tämän tunnisteen sijaan. Esimerkki:
Tämä on monospace-fontti.
Tag
Tag näyttää tekstin alleviivattuna. Peruutettu tunniste. Sen sijaan on suositeltavaa käyttää tai -tageja. Esimerkiksi:
Esimerkki alaviivat teksti
Tunnisteet ja
Tunnisteet näyttävät tekstin vaakaviivalla sen läpi. Peruutettu tunniste. Tunnistetta tulee käyttää sen sijaan. Esimerkiksi:
Esimerkki yliviivatusta tekstistä.
Tällä hetkellä kaikki selaimet eivät tue tunnistetta, joten toistaiseksi on suositeltavaa käyttää sitä yhdessä tagin kanssa. Nimittäin säilötunnisteen sisään voi laittaa pari tagia
... .
Tag
Tunniste näyttää tekstin suuremmalla fontilla (kuin koodaamaton osa tekstistä). Tämän elementin sijasta on parempi käyttää otsikkotunnisteita, esim.
Suurempi fonttikoko.
Tag
Tunniste näyttää tekstin pienemmällä kirjasinkoolla. Koska HTML:ssä ei ole tunnistetta, joka olisi päinvastainen kuin tagi, tunnistetta voidaan käyttää näihin tarkoituksiin. Useimmat selaimet tukevat sisäkkäisiä tunnisteita, mutta tätä lähestymistapaa ei suositella. Esimerkiksi:
Pienempi fonttikoko.
Tag
Tunniste siirtää tekstiä rivitason alapuolelle ja näyttää sen (jos mahdollista) pienemmällä kirjasinkoolla. Kätevä käyttää matemaattisille indekseille. Esimerkiksi:
Esimerkki fontista alaindeksille.
Tag
Tunniste siirtää tekstin rivitason yläpuolelle ja näyttää sen (jos mahdollista) pienemmällä kirjasinkoolla. Kätevä käyttää numeroiden potenssien määrittämiseen matematiikassa. Esimerkiksi:
Esimerkki fontista yläindeksille.
Tag
Tunniste näyttää vilkkuvaa tekstiä. Tämä tunniste ei ole osa HTML-spesifikaatiota, ja sitä tukee vain Netscape-selain. Kokeneet kehittäjät käyttävät harvoin tätä tunnistetta, koska vilkkuvien merkkien esiintyminen sivulla ärsyttää monia käyttäjiä.
Tag
Säilötunniste on analoginen lohkotason tagin kanssa. Voidaan käyttää, kun haluat merkitä tekstin sen ominaisuuksien määrittämiseksi, eikä muita rakenteellisia muotoilutunnisteita voi käyttää.
Microsoft Internet Explorer -selain mahdollistaa lisäksi seuraavien tunnisteparametrien käytön: DIR, DATAFLD, DATAFORMATAS, DATASRC. Parametrien kuvaus löytyy kirjan toisesta osasta.
Riisi. 1.3. Sisäkkäisten tekstin muotoilutunnisteiden käyttö
Muotoilutunnisteet voidaan upottaa toistensa sisään. Tässä tapauksessa sinun on varmistettava huolellisesti, että yksi säiliö sijaitsee kokonaan toisessa astiassa. Kuvassa Kuvassa 1.3 on esimerkki kursivoitun elementin sijoittamisesta lihavoituun elementtiin. Käytössä on seuraava HTML-koodin fragmentti:
Tämä on lihavoitu fontti.
Tämä kursivoitu.
Ja tässä on teksti lihavoitu ja kursivoitu
Tag
Tunniste määrittää fonttiparametrit. Se viittaa tekstitason fyysisiin muotoilutunnisteisiin.
Fonttiparametrien määrittäminen suoraan dokumenttitekstissä rikkoo perusajatusta dokumentin sisällön erottamisesta ja dokumentin esitysmuodon kuvauksesta. Siksi HTML 4.0 -määrittelyssä tämä tunniste, samoin kuin tagi, luokitellaan peruutetuiksi. Niiden jatkokäyttöä ei suositella.
Näistä hirveistä varoituksista huolimatta näyttää siltä, että fyysistä muotoilua voidaan pitää hyväksyttävänä yksinkertaisimmille asiakirjoille. Lisäksi helpoin tapa aloittaa muotoilun perusteiden oppiminen on elementtimuotojen suoran määrittämisen säännöillä. Aloittelevan kehittäjän on vielä kasvattava tyylisuunnitteluun.
Tunniste viittaa peräkkäisiin elementteihin, eikä se siksi voi sisältää lohkotason elementtejä, esim.
Tai
Teksti taulukon solun sisällä |
Teksti taulukon perään
Yllä oleva esimerkki ohittaa oletuskirjasinkoon kahdesti. Aluksi se on 3 (oletus). Sitten se asetetaan arvoon 2, sitten 4. Kiinnitä huomiota tämän esimerkin näyttöön (kuva 1.7). Voidaan nähdä, että tunnisteen määritys ei toimi taulukoissa. Tämä on tyypillistä monille selaimille, vaikka se rikkoo muodollisesti tunnisteen käyttöä.
Riisi. 1.7. Näytetään esimerkki TAG:lla (Netscape-selain)
HTML-asiakirjan muotoilu
Jakaminen kappaleisiin
Kaikella tekstillä, olipa se sitten koulun essee, huomautus sanomalehdessä tai tekninen kuvaus laitteesta, on tietty rakenne. Tällaisen rakenteen elementtejä ovat otsikot, alaotsikot, taulukot, kappaleet jne.
Yksi ensimmäisistä säännöistä melkein minkä tahansa asiakirjan laatimisessa on jakaa sen teksti erillisiin kappaleisiin, jotka ilmaisevat täydellisen ajatuksen. HTML-dokumentit eivät ole poikkeus tästä säännöstä. Kun luot asiakirjoja tekstieditoreilla, jako kappaleisiin tapahtuu syöttämällä rivinvaihtomerkki. Useimmat editorit toteuttavat tämän, kun painat näppäintä. HTML-dokumenteissa rivinvaihto ei luo uutta kappaletta.
HTML olettaa, että dokumentin kirjoittaja ei tiedä mitään lukijan tietokoneesta. Lukijalla on oikeus asettaa minkä tahansa ikkunan koko ja käyttää mitä tahansa käytettävissään olevia fontteja. Tämä tarkoittaa, että se, missä riviviiva esiintyy, määräytyy yksinomaan katsojan ja loppukäyttäjän asetuksista. Koska alkuperäisen asiakirjan rivinsiirrot ohitetaan, teksti, joka näyttää hyvältä asiakirjan tekijän muokkausikkunassa, voi muuttua kiinteäksi, lukukelvottomaksi tekstiksi katseluikkunassa.
Voit välttää tämän ongelman käyttämällä erityistä kappalejakotunnistetta.
Ennen jokaisen tekstikappaleen alkua sinun tulee sijoittaa tunniste
Sulkeva tagi
ei vaadittu. Selaimet erottavat kappaleet yleensä tyhjällä rivillä.Huomautus
Selaimet tulkitsevat yleensä useita kappaletunnisteita peräkkäin
Yhtenä. Sama koskee rivinvaihtotunnistetta
. Siksi ei ole mahdollista luoda useita tyhjiä rivejä käyttämällä näitä tunnisteita.
Tag
Voidaan määrittää vaakakohdistusparametrilla ALIGN. Mahdolliset parametriarvot on annettu taulukossa. 1.4. Oletusasetus on kohdistus vasemmalle.
Taulukko 1.4. ALIGN Parametrien arvot
ALIGN-parametrin arvo |
Toiminta |
VASEN |
Tasaa teksti selainikkunan vasempaan reunaan |
KESKUSTA |
Kohdista selainikkunan keskelle |
OIKEIN |
Kohdista selainikkunan oikeaan reunaan |
PERUSTELLA |
Perustelut (molemmilla puolilla) |
Huomaa, että selaimet eivät ole tukeneet tasausta (ALIGN = JUSTIFY) pitkään aikaan. Monet HTML-kielikuvaukset määrittelevät vain kolme vaihtoehtoa kohdistusparametriarvoille (VASEN, KESKUS ja OIKEA). Tällä hetkellä kaikki suositut selaimet voivat suorittaa leveyden kohdistuksen. Joitakin perusteltujen asiakirjojen luomiseen liittyviä ongelmia käsitellään myös luvussa 8.
Huomautus
Perusteen puute tuntuu tällä hetkellä yllättävältä. Tätä tilaa käytetään hyvin usein painetuissa julkaisuissa. Riittää, kun nostat minkä tahansa sanomalehden tai katsot tarkasti tämän kirjan kappaleita - ne ovat kaikki kohdakkain leveyssuunnassa. Viime aikoihin asti HTML-dokumenttien perustelut eivät kuitenkaan olleet sallittuja. Vain pari vuotta sitten missään selaimessa ei ollut tällaista tilaa. Näin ollen lukijat, jotka edelleen käyttävät Netscape-selaimen versiota 3.x, eivät näe suoria viivoja dokumentissa. Voit yrittää ennustaa, mitä muita ominaisuuksia selaimilla on tulevaisuudessa, vertaamalla tehokkaiden tekstieditorien ja nykyaikaisten selainten ominaisuuksia. Esimerkki ominaisuuksista, joita ei ole vielä otettu käyttöön, olisi automaattinen tavutus jne.
Rivikäännös
Kun tekstidokumentteja näytetään selaimessa, rivinvaihtojen sijainti kappaleessa määritetään automaattisesti fonttien koon ja katseluikkunan koon mukaan. Rivinvaihdot voidaan tehdä vain käyttämällä sanaerotinmerkkejä (esimerkiksi välilyöntejä). Joskus asiakirjoissa on asetettava pakotettu rivinsyöttö, joka toteutetaan selaimen asetuksista riippumatta. Tämä tehdään pakotetun rivinsyöttötunnisteen avulla.
, jolla ei ole vastaavaa lopputunnistetta. Tunnisteen käyttöönotto
asiakirjan tekstiin varmistaa, että seuraava teksti sijoitetaan uuden rivin alkuun. Tätä lähestymistapaa voidaan käyttää esimerkiksi luettelotyyppisten rakenteiden luomiseen ilman erityisiä luettelomerkintätageja. Tai esimerkiksi tällä tunnisteella ei voi näyttää runoja jne.
Tässä on esimerkki pakotetun rivinsiirron käytöstä (kuva 1.8):
Pakotetun rivinsiirron käyttö
Pimeän Petrogradin yli
Marraskuu hengitti syksyn kylmyyttä.
Roiskuminen meluisa aalto
Hoikkasi aitasi reunoihin,
Neva heitteli ympäriinsä kuin sairas ihminen
Levoton sängyssäni.
A.S. Pushkin. Pronssi ratsastaja
Riisi. 1.8. Tag
voidaan käyttää rivinsiirron pakottamiseen
Toisin kuin kappaletunniste
Tunnistetta käytettäessä
tyhjää merkkijonoa ei luoda.
Tunnisteen käyttäminen
vaatii varovaisuutta - on mahdollista, että selain on jo tehnyt rivinvaihdon yhden tai kaksi sanaa ennen kuin se kohtasi tagisi
. Näin tapahtuu, jos lukijan katseluikkunan leveys on pienempi kuin sen ohjelman asetus, jolla testasit asiakirjaa. Tässä tapauksessa voi käydä niin, että vain yksi sana jää riville keskellä kappaletta, mikä pilaa asiakirjan asettelun kauneuden.
Huomautus
Tunnistetta käytettäessä
Jos haluat katkaista tekstin kuvan tai taulukon ympärille, voit asettaa CLEAR-parametrin lopettamaan tekstin rivityksen. Voit lukea tästä luvuista 3 ja 4.
Tunnisteet u
On tilanteita, joissa sinun on suoritettava päinvastainen toimenpide - poista rivinsyöttö käytöstä. Tätä varten on konttitunniste. Tällä tunnisteella merkitty teksti on taatusti yhdellä rivillä sen pituudesta riippumatta. Jos tuloksena oleva viiva ulottuu selaimen katseluikkunan ulkopuolelle, näkyviin tulee vaakasuuntainen vierityspalkki.
Huomautus
Taulukon soluissa olevan tekstin jatkuvuuden varmistamiseksi on olemassa erityinen NOWRAP-tunnisteen parametri
Merkitsemällä tekstiä katkeamattoman rivin tunnisteella saat erittäin pitkiä rivejä. Tämän välttämiseksi voit ilmoittaa lukijan selaimelle mahdollisen rivinsiirron sijainnin, joka suoritetaan vain tarvittaessa (ns. "pehmeä" rivinsyöttö). Tämä voidaan tehdä asettamalla tunniste (Word BReak) oikeaan paikkaan tekstissä, joka on sama kuin tagi
, ei tarvitse sulkevaa tunnistetta.
Huomautus
Netscape-selain ei tue tunnistetta ollenkaan. Microsoft Internet Explorer -selain tunnistaa tämän tunnisteen vain tunnisteilla merkityssä tekstissä.
Otsikot HTML-dokumentin sisällä
Web-sivu voi käyttää koko asiakirjan otsikon lisäksi otsikoita asiakirjan yksittäisille osille. Näillä otsikoilla voi olla kuusi eri tasoa (kokoa), ja ne ovat tekstinpätkiä, jotka erottuvat näytöstä, kun selain näyttää sivun.
Tunnisteita , , , ja käytetään otsikoiden merkitsemiseen. Nämä tunnisteet vaativat vastaavan sulkevan tagin. Otsikko 1 on suurin (ylitason otsikko) ja otsikko 6 on pienin. Otsikkotunnisteet ovat lohkotason elementtejä, joten niitä ei voida käyttää yksittäisten tekstin sanojen merkitsemiseen niiden koon kasvattamiseksi. Otsikkotunnisteet lisäävät tyhjän rivin ennen ja jälkeen otsikon, joten kappaleita tai rivinvaihtotunnisteita ei tarvita.
Otsikkotunnisteet voidaan määrittää vaakakohdistusparametrilla ALIGN. Parametrin mahdolliset arvot ovat samat kuin kappaletunnisteen tasausparametrit
(katso taulukko 1.4).
Esimerkki eritasoisten otsikoiden käytöstä eri kohdistuksilla (kuva 1.9):
Esimerkkejä otsikoista
Otsikon koko 1
Otsikon koko 2
Otsikon koko 3
Otsikon koko 4
Otsikon koko 5
Otsikon koko 6
Asiakirjan runko
Riisi. 1.9. Näytä otsikot eri kokoisina
Vaakasuuntaiset linjat
Toinen tapa jakaa asiakirja osiin on piirtää vaakasuoria viivoja. Ne korostavat visuaalisesti sivun tietyn alueen täydellisyyttä. Nykyään käytetään usein kohotettua, puristettua viivaa osoittamaan asiakirjan "volubility".
Tunnisteen avulla voit piirtää kohotetun vaakaviivan useimpien katseluohjelmien ikkunaan. Tämä tagi ei ole säilö, joten se ei vaadi sulkevaa tunnistetta. Tyhjä rivi lisätään automaattisesti rivin eteen ja jälkeen. Tunnisteparametrit on esitetty taulukossa. 1.5.
Taulukko 1.5. Tunnistevaihtoehdot
Esimerkki:
Tämä esimerkki asettaa vaakaviivan, joka vie puolet näkymän leveydestä ja on sijoitettu ikkunan keskelle. Huomaa, että kohdistusvaihtoehdot ovat järkeviä vain, kun viiva ei peitä ikkunan koko leveyttä.
Huomautus
Netscape-selain ei salli COLOR-tunnisteparametria.
Käytä esimuotoiltua tekstiä
Kuten yllä olevista osioista näet, erityisiä tunnisteita tulisi käyttää tekstin jakamiseen kappaleiksi ja rivinvaihdon pakottamiseksi. Joskus on kuitenkin tarpeen sisällyttää tekstiä HTML-dokumenttiin, joka on jo muotoiltu perinteisellä tavalla rivienvaihdolla, tarvittavalla määrällä välilyöntejä, sarkainmerkkejä jne. Tällaisten ongelmien ratkaisemiseksi tarjotaan erityinen säilötunniste. Esimuotoillun (n uudelleen muotoillun) tekstin määrittäminen.
Tunnisteella merkitty teksti näytetään sellaisena kuin se näyttää tavallisessa tekstieditorissa. Näytössä käytetään aina yksivälistä fonttia. Tämä antaa sinulle enemmän hallintaa asiakirjan katseluohjelman tulostukseen, vaikkakin joustavuuden kustannuksella.
Yksi tämän tagin käyttövaihtoehdoista on taulukot, jotka on rakennettu ilman erityisiä taulukon merkintätageja. Muut tärkeät
Sovelluksen tarkoituksena on näyttää suuria ohjelmakoodilohkoja (Java, C++ jne.) näytöllä, mikä estää selainta alustamasta niitä uudelleen.
Säilön sisällä oleva teksti Voi sisältää tekstitason muotoilua lukuun ottamatta seuraavia: , , , , , , , , . Ei ole hyväksyttävää sisällyttää esimuotoiltuun tekstiin lohkotason muotoiluelementtejä, kuten otsikkotunnisteita. Kappaletunnisteen ei loogisesti pitäisi myöskään esiintyä esimuotoillun tekstin sisällä, mutta jos esiintyy, se toteuttaa uuden rivin siirtymisen (luomatta tyhjää).
Huomautus
Tunnisteella on valinnainen WIDTH-parametri, jonka tarkoituksena on kertoa selaimelle valmiiksi muotoillun tekstirivin enimmäispituus. Tästä arvosta riippuen selain voi valita halutun fontin ja/tai sisennyksen esimuotoillun tekstin näyttämiseksi optimaalisesti. Oletusarvoksi on ehdotettu 80. Muita suositeltuja arvoja ovat 40 ja 132. Huomaa, että lukijoille, joilla on paljon kokemusta tietokoneista, nämä luvut puhuvat paljon. Itse asiassa nykyaikaiset selaimet jättävät huomioimatta WIDTH-parametrin.
On olemassa useita muita tunnisteita, jotka ratkaisevat samanlaisen ongelman. Näitä ovat , AND -tunnisteet. Kaikki nämä kolme tunnistetta on merkitty vanhentuneiksi HTML 4.0 -määrityksessä. Tämä tarkoittaa, että selaimet eivät enää tue niitä tulevissa versioissa. On suositeltavaa käyttää tunnistetta näiden tunnisteiden sijasta.
Tag
Säilötunniste on lohkotason elementti, joka korostaa osan dokumentista. Tämän valinnan tarkoituksena on hallita tämän fragmentin parametreja, mikä yleensä tehdään määrittämällä tyylejä. Tässä on esimerkki:
(Asiakirjan fragmentti)
Tässä esimerkissä HTML-dokumentin fragmentti kehystetään tunnisteilla joidenkin sen ominaisuuksien määrittämiseksi. Tässä tapauksessa kaikki valitun fragmentin tekstielementit näkyvät vihreinä. Tekstitason tagin analogi on elementti.
Huomaa, että erillisen fragmentin tyyliominaisuuksien suoraa osoittamista ei kannata käyttää, kuten esimerkissä tehdään dokumentin rakenteen ja sen esityksen erottamisen käsitteen mukaisesti. Sinun tulee käyttää tyylisivuja, joista keskustellaan kirjan toisessa osassa.
Tag
Säilötunniste on suunniteltu kohdistamaan kaikki elementit vaakasuoraan selaimen näkymän keskelle. Se on lohkotasoinen ja on hyödyllinen elementtien, kuten taulukoiden, keskittämiseen, koska niitä ei voi keskittää kohdistamalla
ALIGN=CENTER-tunniste
$ 5.00 | $ 4.50 |
Käytä kelvollista CSS-koodia paitsi tapauksissa, joissa vaaditaan selainriippuvaista koodia tai joissa on validointivirheitä.
Käytä työkaluja, kuten W3C CSS Validator, vahvistaaksesi koodisi.
Validiteetti on tärkeä ja mitattavissa oleva koodin laatu. Kelvollisen CSS:n kirjoittaminen auttaa poistamaan ylimääräisen koodin ja varmistaa tyylisivujen oikean käytön...
Luokkien tunnisteet ja nimet Käytä jokerimerkkejä tai merkityksellisiä luokkanimiä ja tunnisteita.Sen sijaan, että käyttäisit koodeja tai kuvailet elementin ulkonäköä, yritä ilmaista sen luomisen merkitys luokan tai tunnisteen nimessä tai anna sille mallinimi...
Jokerimerkkinimet ovat yksinkertaisesti muunnelmia elementeille, joilla ei ole erityistä tarkoitusta tai joita ei voida erottaa sisaruksistaan. Heitä yleensä tarvitaan "auttajina".
Toiminnallisten tai mallinimien käyttäminen vähentää tarpeettomia muutoksia asiakirjaan tai malleihin.
Vanhentunut: /* Vanhentunut: merkityksetön */ #yee-1901 () /* Vanhentunut: ulkoasun kuvaus */ .button-green() .clear()
Suositus: /* Suositeltava: tarkka ja ytimekäs */ #gallery () #login () .video () /* Suositeltu: mallin nimi */ .aux () .alt ()
Yritä muotoilla, mitä tämän elementin pitäisi tarkalleen tehdä, ja olla mahdollisimman lyhyt.
Tämä luokkien ja tunnisteiden käyttö tekee koodista helpommin ymmärrettävän ja tehokkaamman.
Tyyppivalitsimet Vältä luokkien nimien tai tunnisteiden käyttöä elementtityypin (tunnisteen) valitsimissa.Älä käytä elementin nimiä luokkanimien tai tunnisteiden kanssa, ellei se ole ehdottoman välttämätöntä (esimerkiksi auttajaluokissa).
Ominaisuuksien pikakuvakkeet Käytä ominaisuuksien pikanäppäimiä aina kun mahdollista.CSS tarjoaa monia erilaisia pikamuotoja (kuten font ), joita suositellaan käytettäväksi aina kun mahdollista, vaikka vain yksi arvoista olisi määritetty.
Lyhyen ominaisuusmerkinnän käyttäminen on hyödyllistä tehokkuuden parantamiseksi ja koodin ymmärtämiseksi paremmin.
Ei suositella: /* Ei suositella */ border-top-style: ei mitään; kirjasinperhe: palatino, georgia, serif; kirjasinkoko: 100%; linjan korkeus: 1,6; pehmuste-pohja: 2em; pehmuste-vasen: 1em; täyte-oikea: 1em; pehmuste-top: 0;
Suositeltu: /* Suositeltu */ border-top: 0; fontti: 100 %/1,6 palatino, georgia, serif; pehmuste: 0 1em 2em;
Älä määritä yksiköitä nolla-arvoille, ellei siihen ole syytä.
0 koko murto-osaan Älä laita ”0” murto-osien koko osaan.Älä sijoita 0:a kokonaislukuosaan arvojen -1 ja 1 välissä.
Lainaukset linkeissä Älä käytä lainausmerkkejä linkeissäÄlä käytä lainausmerkkejä ("" , "") kanssa url() .
Heksadesimaalivärien nimet Käytä kolmimerkkistä heksadesimaalimerkintää aina kun mahdollista.Värien kolmen merkin heksadesimaalimerkintä on lyhyempi ja vie vähemmän tilaa.
Etuliitteet Etuliitevalitsimet, joissa on nykyiselle sovellukselle ainutlaatuiset etuliitteet. (ei välttämättä)Käytä suurissa projekteissa sekä koodissa, jota käytetään muissa projekteissa tai muilla sivustoilla, käytä etuliitteitä (nimiavaruina) tunnisteille ja luokkanimille. Käytä lyhyitä, ainutlaatuisia otsikoita ja väliviivaa.
Nimiavaruuksien käyttäminen auttaa estämään nimiristiriitoja ja helpottaa sivustosi ylläpitoa. Esimerkiksi etsiessä ja vaihtaessa.
Erottimet luokissa ja tunnisteet Erottele sanat tunnisteissa ja luokkien nimissä yhdysviivalla.Vältä käyttämästä mitään muuta kuin yhdysviivaa sanojen ja lyhenteiden yhdistämiseen valitsimissa parantaaksesi koodin luettavuutta ja ymmärtämisen helpotusta.
Ei suositella: /* Ei suositella: sanoja "demo" ja "image" ei eroteta */ .demoimage () /* Ei suositella: alaviivaa käytetään yhdysviivan sijaan */ .error_status ()
Suositus: /* Suositeltu */ #video-id().ads-sample()
Voi olla houkuttelevaa torjua selaimen eroja CSS-suodattimilla, hakkeroinneilla tai muilla kiertotavoilla. Kaikkia näitä lähestymistapoja tulisi harkita vain viimeisenä keinona, jos haluat tehokkaan ja helposti ylläpidettävän koodikannan. Yksinkertaisesti sanottuna hakkeroinnin ja selaimen havaitsemisen salliminen vahingoittaa projektia pitkällä aikavälillä, koska se tarkoittaa, että projekti kulkee vähiten vastustuskykyä. Tämä helpottaa hakkerien käyttöä ja mahdollistaa niiden käytön yhä useammin, mikä johtaa siihen, että niitä käytetään liian usein.
CSS-muotoilusäännöt Mainosten järjestäminen Lajittele mainokset aakkosjärjestykseen.Määrittele ilmoitukset aakkosjärjestyksessä varmistaaksesi johdonmukaisen koodin, jonka kanssa on helppo työskennellä.
Jätä selaimen etuliitteet huomioimatta lajittelussa. Lisäksi jos yhdelle omaisuudelle käytetään useita selaimen etuliitteitä, ne on myös lajiteltava (esim. -moz tulee olla ennen --webkit)
Sisennykset lohkoissa. Sisennä aina eston sisältö.Sisennä aina kaikki lohkon sisältö, kuten sääntöjen sisällä olevat säännöt tai ilmoitukset, jotta hierarkia näkyy ja koodi on helpompi ymmärtää.
Ilmoitusten jälkeen Laita puolipiste jokaisen ilmoituksen jälkeen.Käytä puolipistettä jokaisen ilmoituksen jälkeen koodin johdonmukaisuuden varmistamiseksi ja uusien ominaisuuksien lisäämisen helpottamiseksi.
Ominaisuuksien nimien jälkeen Käytä ilmoituksissa välilyöntejä kaksoispisteiden jälkeen.Käytä aina yksi välilyönti kaksoispisteen jälkeen (mutta ei ennen) ilmoituksissa koodin järjestyksen saamiseksi.
Valitsimien ja ilmoitusten erottaminen Erottele valitsimet ja ilmoitukset rivinvaihdolla.Aloita jokainen valitsin tai ilmoitus uudelta riviltä.
Erotussäännöt Erottelevat säännöt rivinvaihdoilla.Aseta aina rivinvaihto sääntöjen väliin.
Metasäännöt CSSRyhmittelysäännöt Ryhmäsäännöt ja osoittavat ryhmät kommentilla. (ei välttämättä)Aina kun mahdollista, ryhmäsäännöt yhdessä. Merkitse ryhmät kommenteilla ja erottele ne rivinvaihdoilla.
Johtopäätös Ole johdonmukainenJos muokkaat koodia, käytä muutama minuutti ymmärtääksesi, miten se on kirjoitettu. Jos matemaattiset operaattorit erotetaan välilyönnillä, tee samoin. Jos kommentit on ympäröity suluilla tai viivoilla, tee samoin kommenteissasi.
Tämän oppaan ideana on luoda yhteinen sanasto, jonka avulla kehittäjät voivat keskittyä siihen, mitä he haluavat ilmaista, eikä miten.
Tarjoamme yhtenäiset suunnittelusäännöt, joiden avulla voit kirjoittaa koodia samalla tyylillä, mutta myös projektissa käytetty koodityyli on tärkeä.
Jos koodisi eroaa suuresti olemassa olevasta koodista, se voi häiritä lukijan rytmiä ja vaikeuttaa sen lukemista. Yritä välttää tätä.
Kääntäjän huomautus Haluan myös huomauttaa, että Google keskittyy ensisijaisesti suuriin, paljon kuormitettuihin projekteihin, joissa jokainen tavu on kallis, joten kannattaa harkita, jos he suosittelevat aloittamaan jokaisen valitsimen uudelta riviltä tai käyttämään välilyöntejä sarkainten sijaan. , tämä tarkoittaa ensisijaisesti , että koodi välttämättä pienennetään ja pakataan ennen käyttöä sivustolla.Kiitos kaikille tähän asti lukeneille.
Tunnisteet: Lisää tunnisteita
Tällä hetkellä useimmat selaimet näyttävät sivustoja itsenäisesti tulkitsemalla ja korjaamalla verkkovastaavan virheet. Sinun on kuitenkin oltava varovainen kirjoittaessasi HTML-koodia - sinun on noudatettava kelvollisuussääntöjä, koska oikea asettelu on tärkeää sivuston optimoinnissa, ja se auttaa myös olemaan hulluksi käyttäjille, jotka avaavat sivustosi aiemmissa selainversioissa.
KäyttääElementti sijaitsee minkä tahansa HTML-sivun ensimmäisellä rivillä. Se määrittää sivulla käytetyn sivunkuvauskielen version. Tällä hetkellä on suositeltavaa käyttää lomakkeen doctypeä - se on universaali kaikille kielen versioille.
Käytä oikeaa asiakirjarakennettaTunnisteet , , tulee aina olla mukana koodissa. Tämä tekee sivusta standardien mukaisen ja varmistaa, että se näkyy oikein.
Väärä
Hei maailma!
Hei maailma!
Oikein
Hei maailma!
Hei maailma!
Määritä sivun tekniset tiedot oikein
Sisällönkuvauskentät ja tyylit tulee määrittää -kentässä, ei missään sivun tekstiosassa. On suositeltavaa sisällyttää komentosarjat sivun alareunaan ennen sulkevaa tunnistetta. Tämän lähestymistavan etuna on, että ennen sivun sisällön näyttämistä selain lataa vain tyylit ja se lataa komentosarjat viimeisenä, jolloin käyttäjä näkee sivun sisällön nopeammin.
Väärä
Hei maailma!
Oikein
Hei maailma!
Kuvissa on aina oltava alt-attribuutti. Selain luottaa tähän määritteeseen tarjotakseen kontekstin kuvalle. Alt-määritteen tulee sisältää tekstiä, joka näytetään, jos kuvaa ei ole ladattu.
Väärä
Oikein
Älä käytä tyylejä HTML-merkinnöissäTämä luo sivuja, joiden lataaminen kestää liian kauan ja joita on vaikea ylläpitää. Kirjoita kaikki tyylit erilliseen CSS-dokumenttiin. Yritä käyttää tunnistetta ja tyylimääritettä mahdollisimman vähän.
Kirjoita kommenttejaKommentoi koodia, mutta älä liioittele sitä. Lyhyesti ja selkeästi kirjoitetut kommentit voivat olla suureksi avuksi muille kehittäjille sekä tärkeänä muistutuksena sinulle jonkin ajan kuluttua.
Esimerkki:
Sivu
Anna css-luokille nimet lohkon sisällön mukaan, esimerkiksi: header - header, alatunniste - alatunniste, menu - menu, content - content. Tämä tekee koodista paljon selkeämmän ja helpompi ylläpitää.
Huono koodi
- Valikkokohta 1
- Valikkokohta 2
- Valikkokohta 3
Hyvä koodi
Säännöt CSS:n kirjoittamiseenCSS:ssä on myös sääntöjä, joita voit noudattaa pitääksesi koodisi yksinkertaisena, helppolukuisena ja hyvin järjestettynä.
Palauta selaimen tyylit oletusasetuksiinNe voivat häiritä tyylejä, joita todella haluamme soveltaa. Voit ladata tiedoston vakioselaintyylien nollausta varten täältä - reset.css.
Käytä lyhennettyjä ominaisuuksia ja arvojaHuono koodi
pehmuste-top: 5px;
täyte-oikea: 10px;
pehmuste-ala: 15px;
täyte-vasen: 20px;
Hyvä koodi
täyte: 5px 10px 15px 20px;
Määritä valitsimet ja säännöt uudelle rivilleHuono koodi
Elementti (näyttö:lohko;sijainti: suhteellinen;täyte:5px 10px 15px 20px;)
Hyvä koodi
Elementti (
näyttö: lohko;
asema: suhteellinen;
täyte: 5px 10px 15px 20px;
}
Huono koodi
täyte: 10px 0px;
marginaali vasen: 0 %;
Hyvä koodi
täyte: 10px 0;
marginaali vasen: 0;
Erottele päälohkot kommenteilla, tämä parantaa koodin luettavuutta.
Esimerkki:
/*HEADER*/
header(
}
/*HEADER END*/
/*PÄÄ*/
main(
}
/*PÄÄPÄÄTÖ*/
/*ALATUNNISTE*/
alatunniste(
}
/*ALAKIRJA LOPPU*/
Nämä ohjeet ja säännöt ovat vain perusasiat, sillä HTML- ja CSS-kielet kehittyvät nopeammin ja uusia menetelmiä oikean koodin kirjoittamiseen kehitetään. Noudattamalla suosituksiamme varmistat, että koodisi on yksinkertainen, helppolukuinen ja optimoitu. Saat myös +100 karmaa ja kiitollisuutta kehittäjiltä, jotka työskentelevät sivustolla sinun jälkeensi.
Huolimatta erinomaisesta online-editorista, jota parannamme ja laajennamme jatkuvasti DashaMailissa, jotkut asiakkaistamme käyttävät mieluummin . Joskus tämä johtuu brändikirjan tiukoista säännöistä, joskus aikaisempien markkinoijien jättämästä perinnöstä.
Joka tapauksessa kunnioitamme tätä oikeutta ja yritämme auttaa asiakkaitamme tekemään sähköpostikampanjoista responsiivisia ja näyttämään upeilta erilaisissa sähköpostiohjelmissa ja selaimissa. Loppujen lopuksi, kuten tiedät, sähköpostiohjelmia ja ohjelmia on monia:
- sähköpostien verkkoversiot (Gmail, Yandex, Mail, Yahoo jne.)
- työpöytäohjelmat (Outlook, Mail, Mozilla Thunderbird ja jopa Bat)
- mobiilisähköpostiohjelmat (iphone, iPad, eri Android-versiot jne.)
Valitettavasti kaikkien näiden sovellusten kehittäjät toimivat epäjohdonmukaisesti standardien moninkertaistamisen parhaiden perinteiden mukaisesti.
Jotkut näistä asiakkaista ovat, jotkut eivät, joitain määritteitä ja tyylejä tukevat mobiiliasiakkaat, mutta eivät pöytätietokoneet. Lisäksi HTML- ja CSS-tuki voi vaihdella saman ohjelman versiosta toiseen. Web-versiot joskus yksinkertaisesti leikkaavat koodin tai lisäävät oman.
Tämän bakkanaalian seurausten minimoimiseksi olemme kehittäneet 5 sääntöä, joita tulee noudattaa luotaessa omaa html-asettelua.
1. Asettelu taulukoillaJos haluat yksinkertaisen ja luotettavan ratkaisun, taulukot ovat ilmeisin valinta. Se säästää sinut varmasti vanhojen sähköpostiohjelmien ongelmilta. Älä unohda selaimia, jotka avaavat sähköpostiohjelmien verkkoversioita, jotkin niistä voivat olla IE7 tai jopa IE6.
2. Tarkista HTML-tunnisteiden ja CSS-ominaisuuksien attribuuttituen yleisyysMe, jonka avulla voit nopeasti ja helposti tarkistaa eri attribuuttien ja ominaisuuksien tuen 10 suosituimmassa sähköpostiohjelmassa. Jos et ole varma jostain, älä epäröi ja tarkista olettamuksesi asettelun oikeellisuudesta.
3. Unohda estää CSSCSS:n käyttö on ehdottomasti suositeltavaa. Tämä voi tietysti aiheuttaa kipua luotaessa html-koodia manuaalisesti, joten DashaMail tarjoaa tämän työkalun automaattisen käytön heti html-koodin lataamisen jälkeen uutiskirjeen luomisen toisessa vaiheessa.
4. Kirjaimen leveys 600 pikseliäMonien työpöytäsähköpostiohjelmien suurin viestien katselualue on noin 600 pikseliä, minkä ansiosta voimme sovittaa kirjeen pienet marginaalit jättäen. 600 on myös 1-2-3-4-5-6:n kerrannainen, jonka avulla voit toteuttaa normaalin mukautuvan monisarakerakenteen ilman "paskaa ja tikkuja". Jos jaat 600 9:llä, saat paljon kuusia. Tämä ei periaatteessa sovellu millään tavalla, mutta se on vain siistiä. Yleensä, kuten sanotaan, "älä heijasta - levitä sitä".
5. Media-kysely ei ole kovin siistiä.Mediakyselyiden tuki useimmissa sähköpostiohjelmissa on rajoitettu, esimerkiksi se on tyhmästi poistettu käytöstä Gmail-sähköpostiohjelmissa sekä selaimessa että mobiilisovelluksissa. Responsiivisuus on mahdollista saavuttaa ilman tätä CSS-komponenttia, vaikka se onkin hieman hankalaa. Mutta uskon teihin, nuoret padawanit.
Näiden 5 säännön avulla voit luoda oikean html-koodin, joka näkyy yleisesti kaikissa sähköpostiohjelmissa ja selaimissa, mikä tarkoittaa, että kaikki tilaajasi kokevat syvimmän tyytyväisyyden pohtiessaan sitä postilaatikossaan.
Olkoon niin! Rakkaudella, Dasha.