Rivit ja kappaleet
Tässä osassa kuvataan riveihin ja kappaleisiin liittyvää HTML-koodia. Aloitamme <DIV> ja <P> -tagit.
Tämä opetusohjelma tarjoaa historiallisen arvon. Jotkut tässä opetusohjelmassa esitetyistä tunnisteista ja määritteistä on vanhentunut, eikä niitä tule käyttää. Selaimen tuki vanhentuneille elementeille ja määritteille voi olla rajoitettua, ja niiden käyttö voi tuottaa odottamattomia tuloksia.
Yksityiskohtainen kuvaus nykyaikaisesta html: stä on oppaissamme semanttisista merkinnöistä, HTML-dokumenttirakenteesta, kirjasimista ja verkkotyypistä h2> < DIV > -elementti
<DIV>, a lohkotason elementti, määrittää vain sivulohkon. Lohkon määrittelyn lisäksi <DIV> itse ei tee mitään. Esimerkiksi seuraava koodi luo <DIV> -elementin, jonka sisällä on kaksi kappaletta. Huomaa, että voit sijoittaa <P> -elementtejä <DIV> -elementtien sisään.
Mikä antaa meille:
<DIV ...>.
<DIV ...>: n sisällä. Tämä on enemmän juttuja <DIV ...>. Nämä ovat juttuja <DIV ...>: n jälkeen.
ALIGN-attribuutti
ALIGN asettaa elementin <DIV> sisällön tasauksen. Kaikki neljä arvoa, LEFT, CENTER, RIGHT ja JUSTIFY, ovat kaikki hyvin tuettuja. LEFT on oletusarvo.
Tämä koodi näyttää oletusarvon:
Mikä antaa meille:
Kappaleelementti
<P> tarkoittaa uuden kappaleen alkua. Tämä tehdään yleensä kahdella rivinvaihdolla, jolloin kahden kappaleen väliin muodostuu yksi tyhjä rivi:
Mikä tuottaa tämän:
ALIGN-attribuutti
ALIGN osoittaa kappaleen kohdistuksen.
Mikä tuottaa tämän:
Tämä on kohdistettu vasemmalle. Tämä on oletusarvo.
Tämä on kohdistettu keskelle.
Tämä on kohdistettu oikealle.
TYHJENNÄ MÄÄRITELMÄ
Jotkin selaimet tunnistavat CLEAR ja toimii hyvin samankaltaisesti kuin <BR>. Se ei kuitenkaan ole tavallinen HTML-koodi ja sitä ei vielä tueta laajalti, joten käytä sen sijaan <BR>.
Onko P-lopputunniste vaadittu?
W3C sanoo </P>: ”Lopputunniste on valinnainen, koska jäsentäjä voi aina päättää siitä.” Tämä tarkoittaa, että uusi <P> tarkoittaa edellisen <P> (ja edellisen ).
Kaikkien muiden lohkotason elementtien, kuten <HR> tai <BLOCKQUOTE>, tulisi myös päättyä Se ei kuitenkaan aina toimi tällä tavalla. Esimerkiksi jotkin selaimet tasaavat tekstin oikealle tasolle myös taulukon jälkeen. Seuraavassa esimerkissä MSIE renderöi ”taulukon jälkeen” -osan oikealle tasattuna, kun Netscape renderöi sen vasemmalle tasattuna:
 |
 |
| MSIE: n renderointi | Netscape-renderöinti |
Jos määrität kappalelementin tasauksen tai muun tyyliominaisuuden, on parasta käyttää </P>. Jos et koskaan käytä asetettuja tyylejä, voit yleensä jättää huomiotta </P>.
Katso lisätietoja aiheesta W3C: n teknisistä tiedoista.
Tekstin tasaus
Voit asettaa minkä tahansa HTML-elementin kohdistuksen tyylisäännön text-align avulla. text-align -asetusta voidaan käyttää kohdistamaan kappale, asiakirjan osa tai jopa koko asiakirja. text-align -asetusta voidaan käyttää kohdistuksen asettamiseen vasemmalle, oikealle, keskelle tai perustellulle.
Oletetaan esimerkiksi, että haluamme keskittää kappaleen.Ensin luomme tyyliluokan nimeltä centeralign asettamalla seuraava koodi asiakirjan osioon:
Nyt voimme asettaa minkä tahansa kappaleen keskitetyn luokan luokalle näin:
Mikä antaa meille tämän:
Saada keskitetty
Voimme soveltaa samaa luokkaa <DIV> -elementtiin keskittämään osan sivu:
Mikä antaa meille:
Jokainen keskitetyn DIV: n elementti perii keskitetyn tyylin.
Perustelu
Oletusarvoisesti , useimmat selaimet hahmottavat tekstin rosoisella oikealla reunalla.
Jos haluat, että kaikki teksti hahmonnetaan kuten kirjassa, jolla on tasainen oikea reuna, voit käyttää yhtä tyylisääntöä. Jos haluat asettaa kaiken tekstin oikeutetuksi, kopioi seuraava koodi i n asiakirjan osioon.
Perustelun ongelmana on, että monet selaimet sekoittuvat viimeisen tekstirivin sijaintiin (jota ei pitäisi olla perusteltu). Esimerkiksi MSIE 4.x sekoitetaan, kun tekstilohkoa seuraa välittömästi taulukko. Huomaa tässä kuvassa, että tekstin viimeinen rivi venyttää sanat ”yksi agenttimme” koko rivin yli:
Tämän tilanteen korjaamiseksi ympäröi kaikki tekstilohkot <P> ja </P>:
Nyt virheellinen MSIE tekee asioita enemmän sanely:
Sisentäminen
Kappaleiden ja kokonaisen verkkosivun osien sisennykseen on useita tapoja Seuraavissa osissa kuvataan neljä sisennysmenetelmää:
- Kappaleen sisennys
- Sivun osan sisennys
- Koko sivun sisennys
- Jokaisen kappaleen ensimmäisen rivin sisennys
Ennen kuin aloitamme, kannattaa kuitenkin sanoa muutama sana <BLOCKQUOTE> On yleinen väärinkäsitys, että <BLOCKQUOTE> tulisi käyttää sivun osien sisennykseen. Tämä uskomus johtuu siitä, että useimmat visuaaliset selaimet renderoivat lainattua tekstiä kuten sisennetty. Muista kuitenkin, että HTML ei ole muotoilukieli ja antaa arvaamattomia tuloksia, kun yrität käyttää sitä yhtenä. Käytä <BLOCKQUOTE>, jos sinulla on lainattu tekstilohko, käytä muuten seuraavissa kappaleissa kuvattuja tekniikoita.
Kappaleen sisennys
Voit sisenyttää yhden kappaleen tyylien avulla. Oletetaan esimerkiksi, että haluamme sisällyttää kappaleen 50 pistettä. Ensin luodaan luokka nimeltä sisennetty seuraavilla tyylisäännöillä. Lisää tämä koodi asiakirjasi osioon.
Nyt asetamme kappaleluokan sisennykseksi lisäämällä CLASS-määritteen <P> -tagi:
Mikä antaa meille tämän sisennetyn kappaleen:
Et tiedä minusta, ellet ole lukenut kirjaa nimeltä Tom Sawyerin seikkailut; mutta se ei ole väliä. Tämän kirjan teki herra Mark Twain, ja hän kertoi totuuden, lähinnä. Oli asioita, joita hän venytti, mutta pääasiassa hän kertoi totuuden. Se ei ole mitään. En ole koskaan nähnyt ketään muuta kuin valehdellut kerta toisensa jälkeen, ilman että Polly-täti tai leski , tai ehkä Mary. Polly-täti – Tomin täti Polly, hän on – ja Mary, ja leski Douglasista kerrotaan kaikki kirjassa, joka on enimmäkseen totta kirja, jossa on joitain paareita, kuten sanoin aiemmin. Suomi
Sivun osan sisennys
Useamman kuin yhden sisennyksen sisennys Agraph käytämme samaa tyyliä kuin asetimme edellisessä esimerkissä. Lisää tämä koodi sivusi osioon:
Sitten käytämme sisennyttä luokkaa sarakkeessa <DIV> element:
Mikä antaa meille tällaisen sisennyksen:
Nämä tuotteet voidaan viedä kierrätyskeskukseen jakelua varten. Tämä on paljon parempi kuin heittää ne pois.
- Kotitalouksien siivoojat
- Tietokoneet ja atk-tarvikkeet
- Vaatteet
Koko sivun sisennys
Jos haluat koko sivun sisennyksen, aseta tyylisääntö, joka asettaa elementin oikean ja vasemmanpuoleisen täytteen. Esimerkiksi tämä tyyli asettaa oikean ja vasemmanpuoleisen täytön 100 pikseliksi:
Tämä tekniikka on suosittu, kun sitä käytetään yhdessä taustakuvan kanssa. Oletetaan esimerkiksi, että haluamme tämän kuvan kulkevan sivun vasemmalla puolella.
Tämä kuva on 56 pikseliä leveä, joten asetetaan täytteeksi 60.Seuraava tyyli asettaa taustakuvan, asettaa toiston toistoksi-y (toista vain pystysuunnassa sivun vasemmalla puolella) ja vasemmanpuoleisen täytteen arvoksi 60 (emme aseta oikeaa täytettä).
Näin se saattaa näyttää:
Jokaisen kappaleen ensimmäisen rivin sisennys
Jokaisen kappaleryhmän ensimmäisen rivin sisennys tyylisääntö, jossa käytetään teksti-luetelmakohtaa. Esimerkiksi seuraava koodi sisentää kunkin kappaleen ensimmäisen rivin 30 pistettä. Kopioi tämä koodi sivusi osioon:
Tämä koodi sisentää kunkin <P> elementti, mutta todennäköisesti törmäät ärsyttävään ongelmaan. Jos olet kuin useimmat suunnittelijat, et todennäköisesti laita P: tä ensimmäisen kappaleen eteen tai otsikon väliin, kuten <H1> ja sitä seuraava teksti. Valitettavasti sinun on tehtävä juuri tämä, jos haluat kappaleen sisennyksen. Näissä tilanteissa teksti on osa nimettömiä lohkoja, eikä siihen voi suoraan viitata. Sisentää se lisäämällä teksti <P> -elementtiin.
Joten esimerkiksi seuraavalla koodilla ei ole <P> otsikon ja tekstin välillä, joten tekstiä ei sisennetä:
Mikä antaa meille:
Tätä kappaletta ei ole sisennetty.
Tällä koodilla on <P> otsikon ja tekstin välissä, joten teksti on sisennetty:
Tämä kappale on sisennetty.
< BR > Elementti
<BR> lisää yhden rivin paluun . Kun <P> tarkoittaa uuden kappaleen alkua, <BR> tarkoittaa vain saman kappaleen sisällä olevaa paluupalautetta. <BR> hahmonnetaan yleensä yhdellä rivillä.
Esimerkiksi tämä koodi:
Mikä tuottaa tämän:
joka piti kaiken taikinansa ämpärissä
Tyttärensä nimi Nan
Ajoi miehen kanssa
Mitä ämpäriin tulee, Nantucket
Koska <BR> ei aloita uutta kappaletta, kaikki nykyiset kappalemääritteet pysyvät ennallaan:
Mikä tuottaa tämän:
Oli kerran mies Nantucketista
joka piti kaiken taikinansa ämpärissä
Tyttärensä nimi Nan
Ajoi miehen kanssa pois. Ja mitä ämpäriin tulee, Nantucket
TYHJENNÄ MÄÄRÄ
CLEAR sanoo, että rivinvaihdon lisäämisen lisäksi, jos oikealla tai vasemmalla on kuva tai muu esine, mene myös sen ohitse. Esimerkiksi tämä koodi kertoo, että kuva tulisi kohdistaa sivun vasemmalle puolelle. Sitten on teksti ja sitten LEFT. Kuvan ohi seuraava teksti:
Mikä tuottaa tämän:
Tule alas Halloween-juhliin! Tulet pidä hauskaa aikaa. 20.00–24.00. Käytä pukua tai tule omaksi pelottavaksi itsellesi!
BOTH on sama kuin ALL, mutta ei ole tuettu niin monessa selaimessa, joten käytä sen sijaan ALL.
CENTER-elementti
Käyttösuositus: Käytä <DIV> sen sijaan.
Mikä antaa meille:
Mikä on sama kuin:
Mikä antaa meille:
< HR > -elementti
<HR> piirtää vaakasuoran viivan (”vaakasääntö”) sivun yli. Se on siinä. Tällaisen yksinkertaisen konseptin osalta vaakasäännöt ovat yllättävän suosittuja. Aloitetaan perusasioista. id = ”7b03933f8e”>
ei ole lopputunnistetta eikä vaadi määritteitä:
Mikä luo tämän säännön:
Osa tekstiä täällä ylhäällä
Osa tekstiä täällä täällä
<HR> tarkoittaa yleensä jakoa sivulla. Tavaraa ennen kuin sääntö on eri ”osiossa” kuin sen jälkeen. Tästä syystä monet suunnittelijat pitävät <HR> loogista tagia, ei asettelutagia.
NOSHADE-attribuutti
NOSHADE osoittaa, että sääntö on esitettävä tasaisena kolmiulotteisen sijaan.Vertaa tätä säännöllistä vaakasääntöä:
NOSHADE -sääntöön:
Mikä antaa meille:
NOSHADE käytetään usein yhdessä SIZE:
Luo tämän säännön:
NOSHADE on suosittu, koska selaimet eivät yleensä esitä kolmiulotteisia sääntöjä kovin hyvin. Monissa olosuhteissa sääntö on esitetty samalla värillä kuin tausta, joten se on lähes näkymätön.
SIZE-attribuutti
SIZE osoittaa säännön korkeuden. (Luulen, että sen kutsuminen ”KORKEUDEKSI” olisi ollut liian helppoa.) Katso vaakaleveys kohdasta WIDTH. Vertaa joitain näistä koista:
Mikä antaa meille nämä säännöt:
Selaimet eivät yleensä tee <HR> -kokoa suuremmaksi kuin 100 .
WIDTH-attribuutti
WIDTH asettaa säännön vaakasuoran leveyden. Voit ilmaista koon pikseleinä tai prosentteina.
Nämä <HR> -asetukset on asetettu pikselileveydellä:
Mikä antaa meille nämä säännöt:
WIDTH ilmaistaan yleensä prosentteina. Jos käytät prosenttileveyttä, muista liittää arvo lainausmerkit.
Luo nämä säännöt:
Oletusarvo on 100%. Oletuksena sääntö on keskitetty. Määritä toinen kohdistus käyttämällä ALIGN.
Prosenttileveydet käytä prosenttiosuutta o f käytettävissä oleva leveys, ei sivun koko leveys. Jos sääntö on esimerkiksi taulukossa, leveys on prosenttiosuus taulukon solun leveydestä.
Mikä tuottaa tämän taulukon:
Ompele ajoissa säästää yhdeksän
ALIGN-attribuutti
ALIGN asettaa kohdistuksen sääntö. ALIGN on hyödyllinen vain, jos käytät myös WIDTH.
Anna meille tämä:
< PRE > -elementti
<PRE> on yksi kätevimmistä tageista HTML-työkalupakissa. <PRE> merkitsee tekstin ”valmiiksi muotoilluksi” – kaikki välilyönnit ja rivinvaihdot palautetaan täsmälleen samalla kun kirjoitat ne.
Mikä tuottaa tämän:
<PRE> teksti renderöidään kiinteän leveydellä, mikä tarkoittaa, että kaikki merkit ja välilyönnit ovat sama leveys. Kiinteän leveyden ansiosta tekstin asettelu on helppoa haluamallasi tavalla, joten <PRE> soveltuu erinomaisesti yllä olevien kaltaisten ”nopeiden ja likaisten” taulukoiden luomiseen.
<PRE> EI saa selainta ohitsemaan tunnisteita. Voit silti luoda linkkejä ja muita herkkuja:
tuottaa tämän:
Kun aloitat merkintöjen lisäämisen , on vaikeampi nähdä, miten teksti muuttuu (tunnisteiden sijoittaminen tasaisesti, kuten yllä oleva taulukko auttaa). <PRE> käytetään usein lainaamaan suuria tekstilohkoja, joita et halua ”HTMLize”, mutta ”voi sekoittaa tekstiä. Muutamaa riviä suuremmalle pöydälle on yleensä helpompaa pitkällä aikavälillä käyttää taulukon koodia.
”Element
” estää vaunun paluun. Esimerkiksi seuraava koodi tuottaa yhden pitkän rivin hölynpölyruno:
Mikä tuottaa tämän:
is most useful for making the page layout more attractive by disallowing breaks inside logical groups of symbols and words. The poem quoted above breaks in appropriate places if each phrase is surrounded by:
Mikä tuottaa tämän:
sähisevä ja möly,
pelkäävät ja hölmöilevät,
kompastelemme ja huutamme,
juoksemme ja hyppäämme,
kuorimme ja kuutioimme,
ruoanlaitto ja punnitsemme,
kustannukset ja hinnoittelu,
syöminen ja juominen,
kaikki päivän työssä.
Elementti
is for the situation where you have used estää rivinvaihdot osiossa ja sitten haluat sanoa ”mutta voit rikkoa TÄSTÄ, jos haluat”.”ei pakota rivinvaihtoa, se vain sallii sen:
Tuottaa:
Kun olet keksinyt , Netscape now seems to have abandoned it. It"s better to stick to grouping non-breakable sets of words within, näin:
Mikä antaa meille tämän kappaleen:
työntää ja sopia ja täyttää niin monta sanaa kuin voin ajatella niin paljon kuin voin
