HTML aloittelijoille: Opi koodaamaan HTML tänään

Disclosure: Tukisi auttaa pitämään sivuston toiminnassa! Ansaitsemme lähetysmaksun joistakin tämän sivun suosittelemista palveluista.


HTML-tieto on uskomattoman hyödyllistä pienyrityksen omistajasta luokkaprojektin luomaan opiskelijaan tai jopa satunnaisiin henkilöihin, jotka työskentelevät blogin tai henkilökohtaisen projektin parissa verkossa. Vaikka mahdollisuus oppia ohjelmointikieli vaikuttaa varmasti pelottavalta, hyvä uutinen on, että HTML käyttää yleisiä sanoja, joten sen ottaminen on melko helppoa.

Tässä oppaassa käsitellään perusteet (toivottavasti) helposti ymmärrettävällä tavalla, täydellisesti ehdottomalle aloittelijalle. Emme kuitenkaan pysähdy perusasioihin – jopa kokenut verkkovastaavat löytävät hyödyllisiä vinkkejä HTML-tietojesi laajentamiseksi. Sukellamme jopa XHTML: ään, DHTML: ään ja HTML5: n uusimpiin juttuihin.

HTML aloittelijoille

Contents

Lyhyt historia HTML 1-4: stä

Tim Berners-Lee keksi HTML: n 1980-luvun lopulla ja 1990-luvun alkupuolella. Ensimmäinen ”julkinen” julkaisu oli vuonna 1991. Se perustui aikaisempaan merkintäkieleen, SGML (Standardized General Markup Language)..

HTML: n tärkein innovaatio oli hyperlinkin käyttö. Olemme nyt niin tottuneet tähän, että on vaikea ymmärtää kuinka vallankumouksellinen tämä ajatus oli tuolloin.

Hyperlinkki sallii minkä tahansa asiakirjan viitata mihin tahansa muuhun asiakirjaan, ja tarjoaa välittömän pääsyn kyseiseen toiseen asiakirjaan. Hyperlinkit tekevät Internetistä (WWW) verkon eikä vain kirjaston tai tietokannan.

IETF otti HTML: n vakiona ja julkaisi ensimmäisen HTML-ehdotuksen vuonna 1993. HTML 2.0, ensimmäinen täydellinen virallinen eritelmä julkaistiin vuonna 1995. Vuoteen 1997 mennessä W3C oli ottanut standardin hoidon haltuunsa, ja HTML 3.2 julkaistiin..

HTML 4.0 julkaistiin vuoden 1997 lopulla ja seuraavana vuonna jälleen muutamalla päivityksellä. Tämä standardin versio kolmella muunnelmalla (tiukka, siirtymäkauden ja kehyssetti) määritteli HTML: n suurimman osan seuraavasta vuosikymmenestä.

Se oli versio, joka oli voimassa verkon merkittävimpien ominaisuuksien noustessa: Wikipedia, Google, Facebook, WordPress, Myspace, AOL. Jos opit rakentamaan verkkosivuja ennen vuotta 2008, opit melkein varmasti tämän version.

HTML 4.0: n rinnalla oli siihen liittyvä projekti nimeltään XHTML. Tämä julkaistiin ensimmäisen kerran vuosina 2000 ja 2001 HTML 4.0: n XML-pohjaisena toteutuksena. Koska XML: n syntaksi oli tiukempi kuin HTML: n ja XML-jäsentäjä voi sen helposti vahvistaa, ajateltiin, että XHTML: n käyttöönotto pakottaisi web-sisällöntekijät luomaan tarkempia asiakirjoja.

Suurimmaksi osaksi tätä ei tapahtunut. Käytännössä XHTML – yhdessä HTML4-kolmen muunnoksen ja selaimen hahmonnuksen villien variaatioiden kanssa – myötävaikutti yleiseen sekaannukseen siitä, mikä oli ja ei ollut “vakio” HTML.

Yksi XHTML: n merkittävä vaikutus on ajatus, että tyhjät tunnisteet on suljettava loppuviivalla. Jos sinulla on tapa kirjoittaa
eikä vain
, voit kiittää XHTML: ää – se oli XML-syntaksin vaatimus, että kaikkien tunnisteiden on oltava suljettuina.

Yleinen HTML

Yleinen HTML

Aloita lukeminen alla tai siirry tiettyyn aiheeseen käyttämällä oikeanpuoleista navigointia.

HTML-perusteet

Tämä osa esittelee HTML-koodin, verkkosivustojen kirjoittajan kielen, ja tarjoaa vähän taustaa sen historiasta ja käytön syystä.

Mikä on HTML?

HTML on Hypertext Markup Language, muoto dokumenttien ja verkkosivujen luomiseen. Sen keksi alun perin 1990-luvun alkupuolella Tim Berners-Lee, ja se perustui aikaisempaan merkintäkieleen, nimeltään SGML (Standard Generalized Markup Language), joka perustui aikaisempaan muotoon, jota yksinkertaisesti kutsutaan GML (Generalized Markup Language), joka kehitettiin IBM: ssä 1960-luvulla.

HTML koostuu ensisijaisesti parista kulmahaaroitettuja tunnisteita, jotka ympäröivät ihmisen kannalta merkityksellistä tekstiä (kuten tämä). Tunnisteet tarjoavat merkityksen, kontekstin ja näytön tiedot ympäröimälle tekstille.

Mikä on merkintäkieli?

Kuvittele mitä tahansa tekstipohjaista asiakirjaa, jonka olet koskaan lukenut: verkkosivusto, kirja, PDF, Word-dokumentti, kirkotiedote. Siellä on tietysti teksti – mutta siellä on jotain muuta: miten teksti näytetään. Jotkut sanoista ovat suurempia tai pienempiä, osa kursivoitu tai lihavoitu, jotkut ovat eri väriä tai eri kirjasinta.

Tiedoston, johon yksi näistä asiakirjoista on tallennettu, on sisällettävä sekä ihmisille luettava teksti että myös näytön tiedot. Useita eri tapoja tämän saavuttamiseksi on kokeiltu, ja kätevin tapa tehdä se on tallentaa tiedot itse tekstin mukaisesti.

Joten esimerkiksi jos haluat tehdä tekstistä lihavoidun tai kursivoidun, voit tehdä jotain tällaista:

Haluan tehdä [aloitus lihavoitu] nämä sanat lihavoituna [loppu lihavoitu] ja [aloittaa kursivointi] nämä muut sanat kursivoitu [loppu kursivointi].

Joiden teoriassa pitäisi tuottaa jotain:

Haluan tehdä nämä sanat lihavoitu ja nämä muut sanat kursivoitu.

Näitä tyylilausekkeita vastaavia pareja kutsutaan tunnisteiksi, ja tällainen on melkein jokaisen merkintäkielen perusta. Mutta tämä yllä esitetty muoto ei ole HTML, se on vain pieni valmis esimerkki.

Yllä olevassa esimerkissä on monia ongelmia, ja HTML: n (ja SGML: n ja GML: n) keksijät keksivät jotain vastaavaa, mutta paljon parempaa:

  • Numerohakasulkeita käytetään usein tekstissä, joten niiden varaaminen tunnisteisiin voi aiheuttaa ongelmia. Sen sijaan HTML käyttää kulmasulkeita: < ja >.
  • Alku- ja loppukirjoittaminen on yhä työlästä. HTML yksinkertaistaa tätä käyttämällä itse tunnisteen nimeä ”aloitus” -ilmoituksena. Tunnisteen nimeä, jonka edessä on viiva (/), käytetään päättötunnisteena.
  • Koko sanan ”lihavoitu” ja ”kursivointi” sijaan HTML käyttää lyhenteitä, jotta kirjoittaminen olisi nopeampaa ja vähemmän häiritsevä lukemista.

Joten ottaen nämä asiat huomioon, yllä oleva esimerkki näyttää seuraavalta:

Haluan tehdä nämä sanat lihavoitu ja nämä muut sanat kursivoitu.

Haluan tehdä nämä sanat lihavoitu ja nämä muut sanat kursivoitu.

Viime aikoina on siirrytty eroon nimenomaisesti typografisten yksityiskohtien ilmoittamisesta (kuten lihavoitu ja kursivoitu) ja sen sijaan, että merkinnät välittävät merkityksen, ei vain ulkoasun. Siksi ja tunnisteita ei enää suositella käytettäväksi. Sen sijaan edulliset tunnisteet ovat ja (painotus). Joten nykyaikaisissa asiakirjoissa yllä oleva lause olisi:

Haluan tehdä nämä sanat erottuvat ja korostaa näitä sanoja.

Haluan tehdä nämä sanat erottuvat ja korostaa näitä sanoja.

HTML ei ole ytimessään mitään monimutkaisempaa kuin joukko määriteltyjä merkintätunnisteita.

Mikä on hyperteksti?

Hyperteksti on sana, joka keksittiin 1960-luvulla kuvaamaan asiakirjoja, jotka sisältävät linkkejä, joiden avulla lukija voi siirtyä muihin kohtiin asiakirjassa tai toiseen asiakirjaan kokonaan. Nämä linkit, jotka pidämme itsestäänselvyytenä modernissa verkossa, olivat iso juttu tietokoneiden alkaessa kypsyyteen.

Sisäisen ja ulkoisen linkittämisen “hyper” -konsepti oli niin vallankumouksellinen tapaan, jolla sisältö järjestetään Internetissä, että sana esiintyy monissa paikoissa:

  • HTML on HyperText-merkintäkieli
  • http: // tarkoittaa ”HyperText Transfer Protocol
  • Linkkiä sivulta toiselle kutsutaan “hyperlinkiksi”, ja tietoominaisuutta, joka määrittelee mihin linkki osoittaa, kutsutaan “hyperviitteeksi”.

Missä ja miten HTML: tä käytetään?

HTML: ää käytetään melkein kaikilla verkkosivuilla. Nyt lukemasi verkkosivu käyttää HTML: ää. Se on verkkosivustojen oletuskieli.

Sitä voidaan käyttää myös muun tyyppisiin asiakirjoihin, kuten e-kirjoihin.

HTML-asiakirjat tuottaa selain (sovellus, jota käytät tämän sivun lukemiseen). HTML-renderöinti piilottaa kaikki tunnisteet ja muuttaa muun sisällön näyttöä sen perusteella, mitä näiden tunnisteiden mukaan sen pitäisi näyttää.

Pitääkö minun oppia HTML-koodia verkkosivustoni käyttämiseen?

Ellet aio tulla verkkokehittäjäksi ja rakentaa sivuja tyhjästä, sinun ei tarvitse tietää kaikkia HTML: n monimutkaisia ​​yksityiskohtia.

Jos käytät vain blogi-alustaa, sivuston rakentajaa tai jonkun toisen perustamaa sisällönhallintajärjestelmää (CMS), saatat pystyä selviytymään tietämättä HTML-koodia – käytettävissä on “graafisia” toimittajia, jotka tekevät sisällön lisäämisestä blogiin, joka on samanlainen kuin kirjoittaminen Microsoft Wordissa tai sähköpostitse.

Joskus nuo graafiset toimittajat eivät kuitenkaan toimi oikein, ja joskus haluat tehdä jotain etkä ymmärtää miksi et voi. Siksi on erittäin suositeltavaa, että jos aiot kirjoittaa verkkoa varten, jopa vain säännöllisiä blogi-viestejä ja ilmoituksia, saat hyvän ymmärryksen HTML-peruskäsitteistä.

Lisäksi on yksityiskohtia siitä, kuinka HTML-asiakirjat on rakennettu ja joilla on vaikutusta esimerkiksi hakukoneoptimointiin (SEO) ja tietojen yhdistämiseen. Jos haluat pysyä ajan tasalla siitä, kuinka verkkosivustosi näyttää vierailijoille, jotka eivät ole ihmisiä, HTML: n ymmärtäminen on tärkeä taito.

Samoin verkkosivustojen saavutettavuus – mahdollisuus liikkua verkkosivuilla onnistuneesti ihmisillä, joilla on visuaalisia tai muita haittoja – on yhä tärkeämpi huomio. Sokeat luottavat tietokoneistettuihin näytönlukijoihin verkkosivustojen kääntämiseksi ääniksi, ja HTML-asiakirjan laadulla ja rakenteella on suuri vaikutus näytönlukijan kykyyn toimia oikein.

Enimmäkseen HTML on nykyajan Internetin yleinen taustalla oleva kieli. Jos haluat ymmärtää, miten maailma toimii, on hyvä idea ainakin tuntea HTML.

HTML-koodin alareuna

HTML – Hypertext Markup Language – on kieli, jota käytetään verkkosivujen ja muiden web-pohjaisten asiakirjojen luomiseen. Se koostuu pääosin sopivista pareista kulmassa hajotettuja tunnisteita, jotka sulkevat osia ihmisen kannalta merkityksellisestä tekstistä. Tunnisteita, joita Web-selaimet eivät näytä, käytetään antamaan tietoja siitä, kuinka teksti ja sivu tulee näyttää.

HTML-elementit ja tunnisteet

Tässä osassa tarkastellaan tarkkaan tageja, HTML: n perustavanlaatuisia rakennuspalikoita. Se kattaa heidän työskentelynsä, eräitä poikkeuksia tavanomaiseen työskentelytapaan ja lyhyen keskustelun tunnisteominaisuuksista.

Tunnisteiden rakenne

Yleensä vastaavat tunnisteparit ympäröivät sitä tekstiosaa, johon ne vaikuttavat. Kaksi vastaavaa tunnisteparia ja niiden sisältämää sisältöä kutsutaan ”elementiksi”.

Tämä elementti alkaa ja päättyy "vahva" tag.

Avaava tunniste voi sisältää lisämääritteitä, jotka antavat lisätietoja tunnisteen sisällöstä ja siitä, kuinka ne näytetään. Nämä ominaisuudet kirjoitetaan nimellisarvopareina, erotettuna yhtälö (=) -merkillä, ja arvo lainausmerkeissä.

href ="http://example.com">Tämä on linkki. Tunniste on "" varten "ankkuri," ja href (hyperreferenssi) määrittelee mihin linkki osoittaa.

Muutamia tunnisteita ei tapahdu parillisina pareina, koska niitä käytetään lisäämään jotain tekstin kuvaamisen sijasta. Niitä kutsutaan “tyhjiksi” tai “tyhjiksi” tunnisteiksi, ja yleisimpiä niitä käytetään kuvan lisäämiseen. Src-määritteellä määritetään kuvan URL-osoite.

src ="Kuvien / html-for-aloittelijoille-learn-to-koodin-html-today.png" />

Huomaa, että sulkevaa tunnistetta ei ole, eikä siksi mukana olevaa tekstiä. Kaltevuus suoraan ennen lopullista kulmakiinnikettä (/> ) käytetään tagin sulkemiseen itse. Tätä ei ehdottomasti tarvita, mutta se on hyvä muistutus siitä, että mitä seuraa, ei suljeta. (Se vaaditaan XHTML: ssä, josta keskustellaan myöhemmin tässä artikkelissa.)

On olemassa useita muita tyhjiä tunnisteita. Kaksi ovat melko suoraviivaisia ​​ja yhteisiä.

  • lisää rivinvaihdon.
  • Lisää vaakasuuntaisen (viivan) erottimen.

Toiset eivät lisää jotain visuaalista, mutta niitä käytetään antamaan tietoja sivusta itsestään.

rel ="tyylisivu" type ="text / css" href ="theme.css" />

name ="kuvaus" content ="Tämän sivun otsikko." />

Lisäksi tunniste (jota käytetään Javascriptin lisäämiseen sivulle) voi olla tyhjä, mutta sen ei tarvitse olla.

(Lisätietoja, ja tunnisteet annetaan myöhemmin tässä oppaassa.)

Lohkotaso vs. suoraviivainen

Lukuun ottamatta tunnisteita, jotka antavat tietoja itse dokumentista, HTML-tunnisteet jakaantuvat kahteen luokkaan, lohkoon ja riviin.

Estä elementit

Lohkoelementit edustavat suorakulmaisia ​​sisältölohkoja. Heillä on epäsuora linjakatko ennen ja jälkeen. Estävät elementit sisältävät leikkaussisällön, kuten kappaleet

), divisioonat () ja otsikot (

,

, jne).

Yleinen käytäntö on kirjoittaa useimmat lohkotason tunnisteet yksittäisille riveille niiden sisällön ylä- ja alapuolelle:

Tämä on div.

Tätä ei kuitenkaan aina tehdä, etenkin otsikoilla:

Tämä on sivun otsikko

Tämä on tärkeä osa

Jotkut kappaleen sisällöstä.

Lohkotason elementit voidaan sisäkkäin sijoittaa, mutta jotkut lohkotason elementit eivät voi sisältää muita lohkotason elementtejä:

Artikkelin nimi

Artikkelin ensimmäinen kappale.

Kappaleet ja otsikot eivät voi sisältää muita lohkotason elementtejä.

Sisäiset elementit

Inline-elementit ovat tekstissä käytettyjä elementtejä. Lihavoitu ( ), kursivoitu () ja linkit () ovat kaikki inline-elementtejä.

Inline-elementtejä kutsutaan joskus ”span-level” elementeiksi. Siellä on myös yleinen span-tason elementti, jota yksinkertaisesti kutsutaan span (): ksi. Tämä ei tee itsessään paljon, mutta sitä voidaan käyttää räätälöityjen tekstinäyttötyyppien luomiseen elementtien avulla.

class ="erityisrahaston teksti">Tämä teksti on erityinen.

(Katso CSS: n osiosta, kuinka luokka ="erityisrahaston teksti" näyttö erityisessä muodossa.)

Joskus sillä ei ole mitään järkeä

Kuvat ( ) tuntuu lohkotason elementeiltä – ne ovat suorakaiteen muotoisia, niillä on selkeät mitat ja ne näytetään yleensä tekstivirtauksen ulkopuolella.

Ne ovat kuitenkin tosiasiallisesti inline-elementtejä. Syynä tähän on useimmiten lykkäys vähemmän kehittyneeltä verkkosuunnittelukaudelta, mutta olivat sen takana. Tämän outoja vaikutuksia voidaan välttää helposti, mutta se on hyvä tietää. (Katso kuvat ja myös CSS: n osa.)

On myös muita outoja aiheita, kuten tämä, ja niitä käsitellään myöhemmin tässä oppaassa, kun ne ilmaantuvat.

Lisätietoja ominaisuuksista

Lähes jokainen elementtitagi voi sisältää määritteitä. Monilla elementeillä on erityinen attribuuttijoukko, joita ne tukevat (kuten ja src = -attribuutti), mutta on olemassa useita elementtejä, joita kaikki elementtityypit tukevat yleisesti.

Kaksi tärkeää ominaisuustyyppiä ovat luokka ja tunnus.

href ="http://example.com" class ="Esimerkiksi-linkki" id ="link27">Tällä ankkuritunnisteella on kolme ominaisuutta.

Luokan määritteet

Luokkaattribuutteja käytetään merkitsemään yksi tai useampi elementti tiettyyn “luokkaan” tai ryhmään kuuluvana – tätä voidaan käyttää niiden näyttämiseen kaikilla samalla tavalla.

Esimerkiksi on yleistä käyttää järjestämätöntä luetteloa (

    ) valikkona ja luettelon tekemiseksi (
  • ), joka osoittaa nykyiselle sivulle näyttää erilaiselta kuin kaikki muut linkit samassa luettelossa.

    class ="valikko">
    class ="valikon vaihtoehtojen">
    href ="/Koti">Koti

  • class ="nykyinen-erä">
    href ="/noin">Noin

    class ="valikon vaihtoehtojen">
    href ="/ottaa yhteyttä">Ottaa yhteyttä

Elementillä voi olla useampi kuin yksi luokka. Useita luokkia erottaa välilyönnit luokkaelementin sisällä.

class ="ensimmäinen tippakorkki">
Tämä on ensimmäinen kappale, ja se on myös osa drop-cap-luokkaa.

Koska luokat erotetaan välilyönnillä, luokat eivät välttämättä sisälly välilyöntejä nimiinsä.

CSS: ssä, JavaScript: ssä ja muissa kielissä elementin luokka on merkitty pisteellä nimen edessä.

/ * CSS * /

.ensimmäinen {
väri: vihreä;
}

Yllä oleva CSS-koodi tarkoittaa, että kaikissa elementeissä, joilla on ensimmäinen luokka, tekstin värin tulee näkyä vihreänä.

ID-ominaisuus

ID-ominaisuus toimii samalla tavalla kuin Class-määrite, mutta on käsitteellisesti erilainen. Sen sijaan, että se merkitsisi elementtien jäsenyyttä ryhmässä, se yksilöi yksilöllisesti kyseisen elementin. Tästä syystä millä tahansa tietyllä sivulla voi olla vain yksi elementti jollakin tietyllä tunnuksella.

id ="sivun otsikko">Tämä on sivun otsikko

Tunnuksia käytetään harvemmin näytön vaikuttamiseen ja useammin toiminnallisiin tarkoituksiin.

Tunnuksia voidaan käyttää asiakirjan, kuten wikipediaartikkelin sisällysluettelon, linkittämiseen sisäisesti.

  1. href ="#intro">intro
  2. href ="#history_of_topic">Aiheen historia

id ="intro" class ="osa otsikon">esittely

Johdantokappaleen teksti.

id ="history_of_topic" class ="osa otsikon">

Jotkut historiat aiheesta.

Huomaa, että linkit osioihin sisältävät tunnisteen nimen, joka on liitetty hash- tai puntamerkillä (#). Tämä on tavanomainen tapa viitata elementin tunnukseen:

/ * CSS * /

#intro {
kirjasinkoko: 14 kuvapistettä;
}

Muut määritteet

Jokaisella HTML-tunnisteella on omat käytettävissä olevat määritteet, jotka liittyvät niiden erityiseen tarkoitukseen. Esimerkiksi tunniste, joka määrittelee hyperlinkin, sisältää href (hyper-reference) -määritteen, joka määrittelee linkitettävän URL-osoitteen.

Nämä attribuutit katetaan yksityiskohtaisemmin, kun tarkastelemme kutakin tunnistetta erikseen myöhemmissä osioissa.

Siellä on myös joukko “globaaleja” määritteitä – attribuutit, joilla jollakin elementillä voi olla. Niitä käsitellään myös myöhemmin tarkemmin, kun niiden käyttötarkoitukset muuttuvat entistä merkityksellisemmiksi.

Kommentoi tunnisteita

Viimeinen kohta HTML-tunnisteiden kattamiseksi on kommentti. Kommentit alkavat kulmasulkeella, jota seuraa huutomerkki ja kaksi viivaa. Ne päättyvät kahdella viivalla ja sulkevalla kulmakiinnikkeellä.

Kommentit voivat olla monirivisiä.

Milloin käyttää

ja

hakukoneet pitävät tunnistetta sivun tärkeimmästä otsikosta, ja etsi siitä ohjeet sivun suhteen. Siksi sen on vastattava tagin sisältöä jos mahdollista, ja niiden tulisi olla vain yksi

elementti millä tahansa sivulla.

Kotisivusi ja blogin hakemistosivulla on parasta laittaa sivustosi otsikko

tunniste ja artikkeleiden otsikot blogihakemistossa

tunnisteet.

Yhden artikkelisivun viestin tai artikkelin otsikon tulisi kuitenkin olla

-tunniste, jonka verkkosivuston otsikko on

tai jopa

tag.

Samoin luokka- tai tunnistepohjaisilla arkistosivuilla on yleensä parasta laittaa luokka tai tunnisteen nimi

tag.
Hierarkkinen organisaatio

Se on (lievästi) hyvä SEO: lle ja erittäin hyvä lukijoille, jakaa artikkelit loogisiin osioihin ja käyttää sopivia otsikkotunnisteita artikkelin sisältöön. Otsikkotunnisteita tulisi käyttää hierarkkisesti – jos

seuraa

tunnisteen, sen tulisi olla alaisen osion otsikko.

tekstitys

Tekstityksen otsikon pitäisi olla ei käytti kahta erilaista otsikkotunnistetta:

Aseta sen sijaan koko otsikko ja tekstitys yhdeksi otsikkotunnisteeksi ja määritä suhde toisella tunnisteella:

Tämän artikkelin pääotsikko:
Saman artikkelin alaotsikko

Tämän artikkelin pääotsikko: class ="Otsikko">Saman artikkelin alaotsikko

Widgetien otsikot

Sivupalkkiosat tai widgetit tarvitsevat otsikoita, mutta ne eivät yleensä ole merkityksellisiä sisällön (SEO) kannalta. Useimmat tietoiset suunnittelijat käyttävät

tunnisteet tähän tarkoitukseen, varaaminen

,

, ja

avainsanan kannalta merkityksellistä sisältöä.
 

Uusimmat viestit

  • href ="#">Viestin otsikko
  • href ="#">Viestin otsikko
  • href ="#">Viestin otsikko

Arkisto

  • href ="#">Kesäkuu 2015
  • href ="#">Toukokuuta 2015
  • href ="#">Huhtikuuta 2015

Jos sivusi sisällössä on kuitenkin säännöllisesti niin monta alaosaa, joita sinun on käytettävä

päätekstisi otsikot, mikään ei ole käytännössä huono
tai jopa
sivupalkin otsikoissa.
Otsikot linkkikohteina

Erityisen pitkässä asiakirjassa voi olla hyvä idea antaa linkitys paitsi koko sivulle myös tiettyyn osioon.

Aikaisemmin vain ankkuritunnisteet ( ) voitaisiin käyttää linkin kohteena, mutta niin ei enää ole – mistä tahansa elementistä voi tulla sivukohtaisen linkin kohde.

Tällaisten linkkien luonnollinen ehdokas on otsikkotunnisteet, koska niitä käytetään tunnistamaan osioiden alku.

Tämän työn tekemiseen tarvitaan vain ainutlaatuisen lisääminen id attribuutti otsikkoelementille. Linkit kyseiseen osioon ovat yksinkertaisesti sivun URL-osoitetta, joka on liitetty hash-merkillä ( # ) ja tunnus.




 id ="Joskus otsikko">Jotkut otsikko sivun puolivälissä
href ="Http://example.com/page#some-headline">Napsauta tätä siirtyäksesi sinne.
  • Se on huono.
  • Se on väärin.
  • Sitä ei tueta.
  • Tilattu luettelo

    Tilatut luettelot ovat luetteloita, jotka on numeroitu tai merkitty. Ulkoelementti on

      , ja
    1. tunnistetta käytetään uudelleen jokaiselle kohteelle.

      1. Kerää alushousut.
      2. ???
      3. Voitto.
      1. Kerää alushousut.
      2. ???
      3. Voitto.

        elementti tukee useita määritteitä, jotka muuttavat luettelon numerointia.

        Tyyppimääritteellä voidaan muuttaa arabialaisten oletusnumerot (1, 2, 3) kirjaimiksi tai roomalaisiksi numeroiksi (isot kirjaimet tai pienet kirjaimet).

        type ="minä">
      1. Pienet roomalaiset numerot 1.
      2. Pienet roomalaiset numerot 2.
      3. Pienet roomalaiset numerot 3.
      1. Pienet roomalaiset numerot 1.
      2. Pienet roomalaiset numerot 2.
      3. Pienet roomalaiset numerot 3.

      Tyyppivaihtoehdot ovat:

      • 1 - arabialaiset numerot (1, 2, 3) - tämä on oletusasetus.
      • A - isot kirjaimet (A, B, C)
      • a - pienet kirjaimet (a, b, c)
      • I - roomalaiset isot numerot (I, II, III)
      • i - pienet roomalaiset numerot (i, ii, iii)

      Start-määrite voidaan käyttää luettelon numeroinnin aloittamiseen muulla kuin yhdellä numerolla. Tätä voidaan käyttää numeroihin tai muun tyyppisiin numeroihin..

      start ="10">
    2. Suklaa
    3. Vanilja
    4. Moottoriöljy
    type ="minä" start ="8">
  • Telesphorus
  • Hyginus
  • Pius
  • Anicetus
    1. Suklaa
    2. Vanilja
    3. Moottoriöljy
    1. Telesphorus
    2. Hyginus
    3. Pius
    4. Anicetus

    Lopuksi käännettyä attribuuttia voidaan käyttää luettelon kohteiden numeroimiseksi käänteisessä järjestyksessä. Tämä voidaan yhdistää jompaankumpaan muihin määritteisiin (tai molempiin).

    Ulos lähtöportista!

    start ="-3">
  • Odota sitä.
  • Odota sitä.
  • Odota sitä.
  • MENNÄ!
  • Kymmenen syytä

    start ="10" käänteinen>
  • Koska.
  • Ja niin siis.
  • QED
  • jne.
  • Ulos lähtöportista!

    1. Odota sitä.
    2. Odota sitä.
    3. Odota sitä.
    4. MENNÄ!

    Kymmenen syytä

    1. Koska.
    2. Ja niin siis.
    3. QED
    4. jne.

    Huomioitavaa näistä kahdesta esimerkistä:

    1. Aloitusominaisuus voi olla negatiivinen.
    2. Vaikka luettelo käännetään, aloitusarvo on ensimmäinen luettelon numero.
    3. Käänteisen attribuutin ei tarvitse määrittää arvoa. Tämä johtuu siitä, että sillä on vain kaksi mahdollista arvoa: tosi (nykyinen) tai epätosi (poissa).
    4. Kymmenen suurimman (tai vastaavan lähtölaskennan) luettelon ei tarvitse määrittää aloitusmääritettä, jos se loppuu luvulla 1, joka on aina käännetyn luettelon viimeinen numero, ellei toisin mainita. Yllä oleva esimerkki ei tosiasiallisesti sisältänyt kymmentä tuotetta, joten oli tarpeen määritellä.
    5. Oletuskäyttäytyminen on lisätä kunkin seuraavan luettelon kohteen lukumäärää. Siksi, jos haluat ”laskea” negatiivisesta luvusta, sinun pitäisi ei sisällytä käänteinen attribuutti.
    Kuvaus / määritelmäluettelot

    Kuvausluettelot (tai “määritelmä” -luettelot, koska niitä kutsutaan tavallisemmin) ovat hiukan erilaisia ​​kuin tilatut ja järjestämättömät. Niitä käytetään tarjoamaan luettelo termeistä ja kuvauksista, kuten sanastossa.

    Koko luettelo on kääritty tunnisteeseen. Jokainen luettelon termi on merkitty tunnisteella (”määritelmätermi”), ja jokaista termiä seuraa yksi tai useampi elementti (“määritelmäkuvaus”).

    Luettelotyypit

    Tilattu luettelo Numeroitu luettelo kohteista. Järjestämätön luettelo Luettelo luetteloista. Määritelmäluettelo Luettelo termeistä ja niihin liittyvät määritelmät. Jokaisella termillä voi olla yksi tai useampi määritelmäkuvaus.

    Luettelotyypit

    Tilattu luettelo Numeroitu luettelo kohteista. Järjestämätön luettelo Luettelo luetteloista. Määritelmäluettelo Luettelo termeistä ja niihin liittyvät määritelmät. Jokaisella termillä voi olla yksi tai useampi määritelmäkuvaus.

    Kuvausluettelon ilmeinen käyttö on sanastoa tai sanakirjaa, mutta se ei ole ainoa vakiokäyttö.

    Nimilista: Yhteystiedoilla kuvauksessa. Ääniraitojen nimikkeiden luettelo: yksityiskohtaiset raitatiedot kuvauksessa. Tuoteluettelo: sisältää tiedot kuvauksessa olevista tuotteista. Tilastojen luettelo: termina stat-nimi ja kuvauksessa stat-arvo

    Aina kun sinulla on luettelo tavaroista, jotka kukin vaativat lisätietoja, kuvausluettelo on hyvä idea.

    Määritelmäluettelot ovat jopa tehokkaampia kuin saatat jo tietää, koska tunniste - kuvaus - voi sisältää muita elementtejä: kappaleita, kuvia ja muita luetteloita. Tämä tarkoittaa, että kuvausluettelo voi olla erittäin sisältörikas merkintäjärjestelmä aina, kun sinulla on yksittäisiä kohteita, joista jokainen tarvitsee minkäänlaisia ​​lisätietoja.

    Kuvausluetteloille on myös olemassa yksi käyttö ulkopuolella, mikä on hieman kiistanalainen. Se sisälsi esimerkin HTML4-määritykseen, mutta poistettiin HTML5: skriptimäisestä vuoropuhelusta.

    Lukija Mikä on suosikki HTML-kokonaisuutesi? kirjailija Hauska sinun pitäisi kysyä! Se on kuvausluettelo. Lukija Todella? Mikä siinä on niin upeaa? kirjailija Se on niin omituisen joustava.

    Tämä näyttää huonosti

    1. Kohta yksi
    2. Kohta kaksi
      1. Alakohta A.
      2. Alakohta B.
        1. Ala alakohta i.
        2. Alakohta ii.
        3. Ala alakohta iii.
      3. Alakohta C.
    3. Kohta kolme

    Heres miten sinun täytyy tehdä se

    1. Kohta yksi
    2. Kohta kaksi
      1. Alakohta A.
      2. Alakohta B.
        1. Ala alakohta i.
        2. Alakohta ii.
          1. Alas hierarkiassa.
          2. Tarvitseeko kukaan tätä monta luettelotasoa?
            1. Tämä on naurettavaa.
        3. Ala alakohta iii.
      3. Alakohta C.
    3. Kohta kolme

    Sisäkkäiset luettelot voivat sekoittaa luettelotyyppejä.

    Tämä on tilattu luettelo:
    1. kakut.
    2. piirakat.
    3. Kakku on valetta.
    Tämä on järjestämätön luettelo, jossa luetellaan luettelotyypit:
    • Tilatut luettelot
    • Järjestämättömät luettelot
    • Kuvausluettelot
    Tämä on järjestämätön luettelo, joka on sisäkkäin tilatun luettelon sisällä, joka on tämän kuvausluettelon sisällä:
    1. Ensimmäinen kohta.
    2. Toinen kohta.
    3. Kolmas kohde, joka on sisäkkäinen luettelo.
      • Veitsi
      • Haarukka
      • Lusikka
      • spork
      • Syömäpuikot
    4. Tämä neljäs kohta on täällä vain kehyttää sisäkkäiset luettelot paremmin.
    Tämä on tilattu luettelo:
    1. kakut.
    2. piirakat.
    3. Kakku on valetta.
    Tämä on järjestämätön luettelo, jossa luetellaan luettelotyypit:
    • Tilatut luettelot
    • Järjestämättömät luettelot
    • Kuvausluettelot
    Tämä on järjestämätön luettelo, joka on sisäkkäin tilatun luettelon sisällä, joka on tämän kuvausluettelon sisällä:
    1. Ensimmäinen kohta.
    2. Toinen kohta.
    3. Kolmas kohde, joka on sisäkkäinen luettelo.
      • Veitsi
      • Haarukka
      • Lusikka
      • spork
      • Syömäpuikot
    4. Tämä neljäs kohta on täällä vain kehyttää sisäkkäiset luettelot paremmin.

    On huomattava, että luetteloita ei voida upottaa kappaleelementtien sisään (

    ). Tämä johtuu siitä, että kaikki luettelot ovat lohkotason elementtejä, ja kappaleet (jotka ovat myös lohkoja) voivat sisältää vain span-tason elementtejä.

    Tämä voi joskus olla ärsyttävää, koska normaalissa kirjoitetussa tekstissä on joskus täysin hyviä syitä, joiden vuoksi haluamme sisällyttää luettelon kappaleen sisään. Se ei kuitenkaan yksinkertaisesti toimi.

    Estä lainausmerkit ja sisäiset lainaukset

    Jos lainaat jotakuta tai jotain, käytä yhtä kahdesta HTML-lainauselementistä.

    Blockquotes

    Blockquote on paljon yleisempi. Tämä johtuu normaalista typografisesta käytännöstä:

    • blockquotes (moniriviset lainaukset tai otteet) näytetään erikoisella tavalla (yleensä sisennettynä ja joskus kursivoituna),
    • taas inline-lainaukset on yksinkertaisesti merkitty leikkauksella.
    Ollakseen olla tai ollakseen olla, tässä kysymys.

    Ollakseen olla tai ollakseen olla, tässä kysymys.

    Blockquote -sovelluksia voidaan käyttää suuriin lainatun materiaalin lohkoihin riippumatta siitä, onko kyseessä ote kirjallisesta teoksesta, kappaleesta, toisesta blogi-viestistä tai sähköpostiviestistä, johon vastaat..

    Jos haluat mainita tarjouksen lähteen, siihen on kaksi tapaa. Elementille voidaan antaa cite-määrite tai lisätä viiva rivillä, joissa lähdeotsikko ympäröi tunnistetta. Voit myös tehdä molemmat.

    mainitsevat ="http://www.gutenberg.org/ebooks/2265"> Ollakseen olla tai ollakseen olla, tässä kysymys.
    - Hamlet, William Shakespeare

    Ollakseen olla tai ollakseen olla, tässä kysymys.
    - Hamlet, William Shakespeare

    On huomattava, että tagin tulee sisältää alkuperäisen teoksen otsikko, jota lainataan, ja se voi sisältää valinnaisesti kirjoittajan nimen ja muut tiedot (kuten sivun tai tapahtuman ja kohtauksen numeron).

    Lainauksen lopussa oleva viittaus voitaisiin tunnistaa paremmin, jos se sijoitettaisiin elementin sisälle ja jos itse viittaus linkittyisi lähdemateriaaliin. Tämän tekeminen tekisi tunnisteessa olevan cite-määritteen tarpeettomaksi, joten poista se hyvin. Lisää lopuksi hyvin kappaleitagi ja poista merkki (-), jotta vain tiedot - eivät näytön yksityiskohdat - sisältyvät.

    mainitsevat ="http://www.gutenberg.org/ebooks/2265">

    Ollakseen olla tai ollakseen olla, tässä kysymys.

    href ="http://www.gutenberg.org/ebooks/2265">Hamlet, William Shakespeare

    Lohkotarjous voi sisältää myös, jota voidaan käyttää itse tarjouksen esittämiseen tai alkuperäisen otsikkotiedon lainaamiseen.

    Sisäinen tarjous

    Harvemmin käytetty lainauselementti on inline-lainaus, .

    Suosikkilinjani Hamletissa on, kun hän sanoo, cite ="http://www.gutenberg.org/ebooks/2265"> Ollakseen olla tai ollakseen olla, tässä kysymys.

    Oma suosikkilinjani Hamletissa on, kun hän sanoo ollakseen tai olematta ollakseni, tässä kysymys.

    Tätä ei käytetä usein, koska on jo olemassa erinomainen tapa osoittaa, että olet lainaannut jotain - käyttämällä lainausmerkkejä.

    Tunnisteen käytöllä yksinkertaisten lainausmerkkien sijasta on kuitenkin muutamia etuja.

    • Lainausmerkkien näyttöä voidaan muuttaa CSS: n avulla, mikä on hyödyllistä kansainvälistymiselle, koska kaikki maat eivät käytä samoja symboleja lainausmerkeissä.
    • Se, että teksti on lainaus toisesta lähteestä, on semanttisesti selvä, kun taas lainausmerkkejä voidaan käyttää muista syistä:
      • retorinen "pelottele lainauksia"
      • sanan mainitseminen tai sanamuoto
      • raportoi todellisesta keskustelusta, jossa ei ole lähdetekstiä
    • Mahdollisuus sisällyttää sitaattribuutti, joka linkittää tarjouksen alkuperäiseen lähteeseen.

    Hyperlinkit

    Yksi HTML: n tärkeimmistä tunnisteista on ankkuritunniste (), joka määrittää hyperlinkin. Mahdollisuus linkittää asiakirjat yhteysverkkoon on Webin ydin ja ”hypertekstin” määritelmä.

    Elementtiä kutsutaan “ankkuriksi”, koska sitä käytetään ankkuroimaan linkitetty URL-osoite tiettyyn sivun tiettyyn tekstiin. (Tämä on toisin kuin tagi, joka yhdistää koko asiakirjan, ei tiettyä tekstiosaa.)

    Elementin sisällä olevaa tekstiä kutsutaan ”ankkuritekstiksi” ja linkitetty URL määritetään href-määriteessä.

    href ="http://example.com">Tämä on linkki esimerkki.com Tämä on linkki esimerkki.com

    Tunnisteella on hrefin lisäksi useita tärkeitä ominaisuuksia.

    • kohde määrittää, missä ikkunassa (tai selain-välilehdessä) linkki avataan. Oletusarvo on sama ikkuna. Jos haluat avata uuden välilehden, aseta tavoite ="_tyhjä".
    • otsikko asettaa linkin työkaluvihjeen tai hiiren osoitetiedoston. Tämä näkyy pienessä ponnahdusikkunassa, kun käyttäjä siirtää hiiren ankkuritekstin päälle. On hyödyllistä antaa lisätietoja siitä, mitä käyttäjä aikoo napsauttaa.
    • rel raportoi linkitetyn asiakirjan ja nykyisen asiakirjan välisestä suhteesta. Sillä on useita mahdollisia arvoja:
      • vaihtoehtoinen - linkitetyllä asiakirjalla on sama sisältö kuin nykyisellä asiakirjalla, mutta vaihtoehtoisessa muodossa. Käytetään useimmiten linkittämiseen RSS-syötteisiin.
      • kirjailija - linkitetty dokumentti on nykyisen asiakirjan tai artikkelin kirjoittajan profiilin kotisivu.
      • kirjanmerkki - linkki tiettyyn pisteeseen asiakirjassa (esimerkiksi luotaessa sivun sisällysluetteloa).
      • ohje - linkitetty asiakirja tarjoaa ohjeasiakirjat nykyiseen asiakirjaan.
      • lisenssi - linkitetty dokumentti on nykyisen asiakirjan lisenssiteksti.
      • seuraava - linkitetty dokumentti on seuraava osa sivunomaisessa sarjassa. Jotkut selaimet hakevat ennakkoon linkitetyn asiakirjan sisällön renderoinnin nopeuttamiseksi, kun käyttäjä lopulta napsauttaa sitä.
      • nofollow - Linkitetty asiakirja on ei hyväksytty nykyisen asiakirjan laatija. Käytetään estämään SEO-edun myöntäminen linkitetylle sivulle. Kommenttijärjestelmät lisäävät tämän usein käyttäjän kirjoittamiin linkkeihin oletuksena.
      • noreferrer - Käytetään estämään viitetietojen lähettäminen HTTP-pyyntöotsikossa, kun käyttäjä napsauttaa linkkiä. Tyypillisesti HTTP-pyyntö määrittelee käyttäjän lähtöpaikan (nykyinen sivu). Tämä vaatii, että selainasiakas jättää nämä tiedot pois.
      • esihaku - samanlainen kuin seuraava, mutta ilman, että viitataan todelliseen peräkkäiseen suhteeseen. Tämä vaatii, että selain hakee linkitetyn sivun sisällön, ennen kuin käyttäjä napsauttaa sitä, niin että navigointi seuraavalle sivulle tuntuu välitöntä.
      • edellinen - Seuraavan käänteisarvo, tämä arvo määrittää, että linkitetty asiakirja on sivunomaisen sarjan edellinen sivu. Jotkut selaimet saattavat hakea sisällön etukäteen.
      • haku - linkitetty sivu tarjoaa käyttöliittymän, joka on tarkoitettu erityisesti nykyisen asiakirjan ja siihen liittyvien asiakirjojen hakuun.
      • tag - linkitetty dokumentti tarjoaa kontekstin nykyisen sivun aiheelle.

    Muut kuin tekniset verkkosivustojen luojat käyttävät rel-ominaisuutta liian vähän, ja se on hieno tapa tuoda rikas, semanttinen tieto merkintöihin tavalla, jonka hakukoneet, aggregaattorit ja näytönlukijat ymmärtävät.

    Esimerkiksi: Google käyttää rel ="kirjailija" linkki (jos linkitetty Google+ -profiiliin) näyttääksesi saman kirjoittajan linkit muihin sisältöihin hakutuloksissa. - Google-kuvahaussa on mahdollisuus hakea lisenssillä, löytää Creative Commons -lisensoitu sisältö uudelleenkäyttöön. Tämä ominaisuus riippuu osittain suhteesta rel ="lisenssi" attribuutti, jota käytetään linkkeissä Creative Commonsiin ja muihin avoimiin lisensseihin. Useat hakukoneet ja uutisia yhdistävät sivustot käyttävät rel =: n ankkuritekstiä ja viitattua sivua"tag" linkki määrittääksesi tietyn sivun aiheen.

    Rel-tunnistetta voidaan käyttää myös mikromuodossa, joka on yksinkertainen tapa sisällyttää semanttista lisätietoa olemassa oleviin HTML-määritteisiin (yleensä rel ja luokka).

    Esimerkiksi XFN-mikromuoto ehdottaa rel-määritteen käyttämistä linkitettäessä niiden ihmisten kotisivuille tai profiilisivuille, joiden kanssa sinulla on suhde.

    Ensi kuussa vietän koko viikonlopun konferenssissa href =: n kanssa"http://example.com/kami-profile" rel ="työtoveri">Kami. Konferenssi on lähellä kotikaupunkiani, joten toivon voivani syödä lounasta href =: n kanssa"http://example.com/dave-profile" rel ="vanhempi">minun isäni.

    On olemassa useita lisämikroformaatteja, jotka käyttävät rel-tunnistetta, samoin kuin muita tapoja sisällyttää tällainen semanttinen tieto verkkosivustosi merkintöihin. Ne käsitellään Semanttista HTML-osaa koskevassa osiossa.

    Tekstin koristelu

    On olemassa useita yksinkertaisia ​​tunnisteita, joita käytetään perustekstimerkinnässä kappaleessa tai muussa elementissä.

    Lihavoitu

    On olemassa kaksi tagia, joita voidaan käyttää tekstin tekemiseen lihavoitu.

    • suositellaan käytettäväksi “tärkeän” tekstin merkitsemiseksi. Se aiheuttaa käärityn tekstin näkymisen lihavoituna, mutta sillä on myös semanttinen merkitys (että teksti itse on jotenkin tärkeä).
    • yksinkertaisesti lihavoi teksti ehdottamatta mitään erityistä semanttista merkitystä.
    kursivoitu

    Kuten lihavoitu, on olemassa kaksi tapaa tehdä teksti näytettäväksi kursivoituna.

    • ehdottaa, että kääritty teksti korostetaan jollain tavalla.
    • on yksinkertaisesti kursivoitu ilman erityistä semanttista merkitystä.
    Korostaa

    Vaikka siitä on tullut viime aikoina vähemmän suosittua, hyperlinkkien () tavallinen tekstinäyttö on korostaa niitä. Siksi, ei-linkin alleviivaus ei tottu kovin usein. Sille on kuitenkin merkintätunnisteita.

    • on yleinen tunniste tekstin alleviivaamiseen. Eritelmien esittämä käyttötapa korostaa väärin kirjoitettuja sanoja. HTML5-eritelmä haluaa myös sinun tietävän, että muut elementit ovat yleensä tarkoituksenmukaisempia, ja älä käytä tätä, jos se voi erehtyä linkin vuoksi.
    • tarkoittaa tekstiä, joka on lisätty ja jota käytetään yleensä yhdessä tunnisteen kanssa, tekstiin tehtyjen muutosten näyttämiseksi.

    Esitys alkaa klo 19.00–20.00.

    Esitys alkaa klo 19.00–20.00

    Linja-Through

    On kaksi elementtiä, jotka merkitsevät tekstiä, joka on vuorattava. Jokaisella on hiukan erilainen merkitys.

    • tarkoittaa tekstiä, joka on ymmärrettävä poistettuna tai muuttuneena, ja sitä käytetään yllä mainitun tunnisteen kanssa.
    • käytetään tekstissä, joka ei ole enää oikea tai ei enää merkityksellinen.

    On myös tunniste, joka oli saatavana HTML4: ssä.

    Vaikka eritelmät kuvaavat ja ovat teoriassa hiukan erilaisia, asiantuntijat eivät ole päässeet sopimukseen eron käytännön yksityiskohdista tai siitä, mitkä tilanteet vaativat nimenomaan yhtä kuin toista.

    Lähdekoodi ja käsittelemätön teksti

    Tekstin tai koodin näyttämiseen käytetään kahta elementtiä, joita et halua, että selain näyttää, vaan ne näytetään vain "raa'ina" käytetylle.

    • - Käytetään koodilohkoissa tai käsittelemättömässä tekstissä.
    • - Käytetään, kun joudut sisällyttämään tekstiin lyhyen sanan tai lausekoodin.

    Ne molemmat näkyvät oletusarvoisesti yksiavaruudessa (yleensä Courier), säilyttävät välilyönnin eivätkä anna mitään tunnisteita.

    Tässä oppaassa hyödynnetään paljon sekä elementtejä lähdekoodiesimerkkien näyttämiseen ja elementtien tunnisteiden keskusteluun.

    Tekstin koko

    Voit tehdä tekstistä mielivaltaisesti suuremman tai pienemmän kahdella elementillä, joilla ei muuten ole erityistä merkitystä:

    Kokoelementtien yleisin käyttö on sivun tai artikkelin tekstityksen sijoittaminen otsikkotunnisteen sisäkkäiseen elementtiin.

    Yleinen osa

    Jos joudut merkitsemään tietyn tekstin pituuden semanttisiin tai muotoilutarkoituksiin, mutta mikään olemassa olevista tunnisteista ei ole järkevää, voit luoda yleisen elementin luokka-määritteen (ja joidenkin CSS: ien) lisäksi halutun tehosteen.

    En ole varma, miksi ei ole sarkasmitunnistetta. Ehkä sitä ei vain tarvita, koska luokka ="sarkasmi">ääni on niin helppo lukea Internetissä.

    / * CSS * / .sarkasmi { väri: violetti; kirjasintyyli: kursivoitu; }

    .sarkasmi {
    väri: violetti;
    kirjasintyyli: kursivoitu;
    }

    En ole varma, miksi ei ole sarkasmin tunnistetta. Ehkä sitä ei vain tarvita, koska ääni on niin helppo lukea Internetissä.

    erottimet

    HTML tarjoaa kaksi tagia erotuksen lisäämiseksi tekstiin.


    • lisää rivinvaihdon
    • lisää vaakaviivan

    Kumpikaan näistä elementeistä ei vaadi sulkevaa tunnistetta, koska ne eivät sisällä tekstiä. Jos se auttaa sinua lukemaan lähdekoodiasi paremmin, voit sisällyttää itsesulkeutuvan pääteviivan:
    ja .

    Rivinvaihdot ovat erityisen hyödyllisiä, kun tarvitset kovia rivinvaihtoja, mutta muita ratkaisuja - kuten useita

    tunnisteilla ei ole järkeä. Kaksi hyvää esimerkkiä ovat runous tai laulusanat ja osoitteet.

    Ruusut ovat punaisia
    Orvokit ovat sinisiä
    Rhyming on vaikeaa
    HTML5 on mahtava.

    123 Main St.
    Fort Worth, Yhdysvallat 76148

    Ruusut ovat punaisia
    Orvokit ovat sinisiä
    Rhyming on vaikeaa
    HTML5 on mahtava.

    123 Main St.
    Fort Worth, Yhdysvallat 76148

    Tämä on helpompaa kuin miltä se näyttää

    Kaikki tämä voi tuntua monimutkaiselta, mutta sitä ei todellakaan ole. Suurin osa säännöllisesti tarvitsemistasi tunnisteista on helppo muistaa: otsikot, kappaleet, järjestämätön luettelo. Sinun ei tarvitse muistaa kaikkia erilaisia ​​vaihtoehtoja tai merkityksiä kunkin takana. Yritä vain pitää mielessä, että kaikilla tavallisilla typografisilla esineillä (kuten otsikko, luettelo, kappale tai linkki) on todennäköisesti olemassa HTML-tunniste sen suorittamiseksi. Jos pidät tämän mielessä, voit vain kirjoittaa keskittymättä näihin asioihin ja etsiä sitten kohteita, joita et muista.

    Yritä myöskään olla sekoittumattomia vaihtoehtoihin. Tärkeää on, että merkinnät ovat mahdollisimman merkityksellisiä ilman, että ne ovat liian monimutkaisia. Jos et voi päättää, mikä kahdesta tai useammasta vaihtoehdosta on paras, kysy, kumpi on merkityksellisempi. Jos et pysty selvittämään sitä, kysy mikä on yksinkertaisempi. Jos et edelleenkään voi päättää, valitse vain yksi - jos ne vaikuttavat niin samanlaisilta, niin todennäköisesti ei ole mitään suurta eroa siinä, miten se toimii.

    Rakenteellinen HTML

    Tässä osassa selitetään HTML-asiakirjan yleinen rakenne, mukaan lukien minkä tyyppiset tiedot ovat ja. Se selittää myös, kuinka tyypillisen verkkosivun eri osiot järjestetään. Lisätietoja on alla olevassa HTML5-osiossa.

    HTML-asiakirjan perusrakenne

    HTML-asiakirjojen (verkkosivujen) on noudatettava muutamia rakenteellisia perussääntöjä, jotta ne toimivat oikein ja luetaan oikein selaimilla.

    Asiakirjan on aloitettava julistamalla DOCTYPE. On olemassa useita erilaisia ​​HTML (ja niihin liittyviä) standardeja, joita on käytetty vuosien varrella, ja siksi on tärkeää määritellä, minkä tyyppistä asiakirjaa (mitä HTML-standardia) dokumentti käyttää.

    Nykyään oikea DOCTYPE on yksinkertaisesti html. Joten HTML-asiakirjan pitäisi alkaa:

    html>

    Tämä ei ole täsmälleen HTML-tunniste oikeassa merkityksessä, vaan se kertoo selaimelle kuinka tulkita kaikki muut seuraavat tunnisteet.

    DOCTYPE-ilmoituksen jälkeen avaintunniste on tunniste. Tunnisteen sulkeminen on asiakirjan viimeinen rivi.

    HTML-tunnisteen sisällä voit määrittää asiakirjan kielen (tässä tapauksessa englannin).

    html> lang ="fi"> . . . . .

    Tunnisteen sisällä on kaksi osaa, ja. Runko sisältää kaiken näkyvän sisällön, kun taas pää sisältää tietoja itse asiakirjasta. Mikään ei ole näiden kahden osan ulkopuolella.

    html> lang ="fi"> . . . . . .

    Tämä on jokaisen HTML-asiakirjan perusrakenne. Kaikki on periaatteessa ylimääräistä.

    Sisältö

    Html-dokumentin elementti sisältää yleensä kaikki tiedot, joita selain tarvitsee asiakirjan asianmukaiseksi tuottamiseksi, sekä lisätietoja sisällöstä kuvaamalla (aggregaattoreiden ja robotien hyödyksi).

    metadata

    Tunnistetta käytetään useita kertoja määrittämään erilaisia ​​metatietoja (asiakirjan tietoja).

    Sisämerkit ovat tyhjiä tunnisteita, jotka eivät vaadi sulkevaa tunnistetta. Voit lopettaa ne itsesulkeutuvalla viivalla (/>), mutta tätä ei vaadita (ja jotkut jopa estävät sitä erityisesti).

    Merkkikoodaus

    Hahmojen (kirjainten, numeroiden ja välimerkkien) koodaamiseksi tietokoneen muistiin on useita erilaisia ​​yleisiä tapoja. Jos et määritä käyttämääsi, selain saattaa hämmentää ja näyttää joitain vääriä merkkejä.

    Nykyään haluat suurimmaksi osaksi määrittää UTF-8-merkkijoukon.

    (Toisessa yleisessä koodauksessa - ASCII - ei ole kaikkia laajennettuja merkkejä, kuten em. Viivat ja kiharalainaukset. Jos olet koskaan nähnyt outoja tyyppisiä häiriöitä, joissa lainausmerkit tai apostrofit on korvattu näennäisesti satunnaisilla merkkeillä, se johtuu siitä, että asiakirja kirjoitettiin UTF-8, mutta näytetään ASCII: llä - mikä tarkoittaa, että joku ei määrittänyt asiakirjassa oikeita merkistöjä.)

    charset ="UTF-8">
    Kuvaus, tekijä ja avainsanat

    Perustiedot asiakirjasta - kuka sen kirjoitti ja mistä se on kyse - välitetään myös tunnisteiden avulla. Näillä molemmilla on kaksi ominaisuutta: tunnisteen nimi ja tunnisteen sisältö.

    name ="kuvaus" content ="HTML-sivu."> name ="avainsanat" content ="HTML, tunnisteet, metatiedot"> name ="kirjailija" content ="Adam Michael Wood">

    Tällainen tieto oli ennen erityisen tärkeää SEO-tarkoituksiin. Ei ole enää niin, että tällä on valtava rooli hakukoneoptimoinnissa, mutta se vaikuttaa siihen. Vielä tärkeämpää on, että oikeiden ja yksityiskohtaisten tietojen sisällyttäminen näihin elementteihin myötävaikuttaa semanttiseen verkkoon, jossa kaikki sisältö on koneiden helposti löydettävissä ja luettavissa.

    (Jos käytät sisällönhallintajärjestelmää, muokkausnäytössä kirjoittamasi tunnisteet ja viestikuvaukset näkyvät yleensä näissä metakoodeissa.)

    otsikko

    Tunniste näkyy päässä, eikä siinä yleensä ole attribuutteja. Se liittää otsikon.

    Tämä on sivun otsikko.

    Otsikon on oltava tarkka ja mahdollisuuksien mukaan vastattava sivulla näkyvää otsikkoa (yleensä

    tai

    otsikkotunniste) kehossa. Otsikon sisältö näkyy tyypillisesti selainikkunan yläreunassa olevassa välilehdessä.

    se on ei hyvä idea sijoittaa otsikon kaikki muut tunnisteet (kuten tai ), koska ne eivät yleensä näy oikein.

    HTML-dokumentti voi määrittää vain yhden otsikon.

    CSS-linkit

    CSS (Cascading Style Sheet) -kielellä kirjoitetut tyylitaulukot ovat erillisiä asiakirjoja, jotka tarjoavat tietoja sivun näyttämisestä selaimessa. Tiedot kooista, väreistä, sijoittelusta ja kirjasimista sisältyvät kaikki tyyliarkkiin. Pitämällä nämä tiedot erillään HTML-pääasiakirjasta on helpompaa muuttaa niitä vaikuttamatta itse asiakirjan sisältöön.

    CSS-tyylisivut linkitetään HTML-asiakirjan sisällä tunnisteen avulla. Attribuutti href määrittelee tyylitiedoston URL-osoitteen ja rel-määritteen mukaan linkki on tyylilinkki (on olemassa muun tyyppisiä linkkejä).

    href ="/css/style.css" rel ="tyylisivu">
    RSS-tiedot

    RSS - Rich Site Summary tai Really Simple Syndication - on tapa tarjota syöttäjä sivuston päivityksistä (kuten uusista blogiviesteistä) tilaajille, jotta heille ilmoitetaan uudesta sisällöstä, kun se lähetetään, ja he voivat lukea kyseisen sisällön RSS: stä. lukija tarvitsematta käydä sivustollasi.

    Jos käytät sisällönhallintajärjestelmää, se luo yleensä RSS-syötteen, joka on XML-dokumentti, joka on saatavana omalla URL-osoitteella. Tähän URL-osoitteeseen olisi linkitettävä blogisi päähakemistosivulta, jotta RSS-lukijat ja selaimet löytävät sen helposti.

    rel ="vaihtoehtoinen" type ="application / rss + xml" title ="RSS" href ="/feed.xml" />

    Rel ="vaihtoehtoinen" attribuutti tarkoittaa, että linkitetty URL sisältää saman sisällön (luettelo blogiviesteistä), mutta vaihtoehtoisessa muodossa. Type-attribuutti määrittelee muodotyypin (RSS).

    Muu tieto

    Asiakirjassa näkyy usein paljon lisätietoja asiakirjasta. Niitä tarkastellaan yksityiskohtaisemmin myöhemmin, asianomaisissa osissa.

    Javascript-linkit

    Voit linkittää JS-tiedostoihin pään sisällä, ja tämä on yleinen käytäntö. Yleensä on kuitenkin parempi sijoittaa ne asiakirjan loppuun, jos mahdollista.

    Esimerkki HTML-asiakirjasta, jossa elementti on valmis

    html> lang ="fi"> charset ="UTF-8"> name ="kuvaus" content ="HTML-sivu."> name ="avainsanat" content ="HTML, tunnisteet, metatiedot"> name ="kirjailija" content ="Adam Michael Wood"> href ="/css/style.css" rel ="tyylisivu"> Opas HTML: ään rel ="vaihtoehtoinen" type ="application / rss + xml" title ="RSS" href ="/feed.xml" /> . . . .

    Sisältö

    Tunniste on HML-asiakirjan pääosa, ja se voi sisältää kaikenlaisia ​​asioita.

    Tyypillisesti HTML-rungon rakenne voidaan jakaa useisiin osiin, jokaisella voi olla yksi tai useampi alajakso:

    • ylätunniste
      • logo / tuotemerkki / sivuston otsikko
      • päänavigointi
      • hakupalkki
    • pääsisältö
      • yksi tai useampi artikkeli
      • artikkelin otsikko
      • artikkelin sisältö
      • artikkelin metatiedot (tekijä, tunnisteet, julkaisupäivä)
    • sivupalkki (s)
      • widgetit
      • toissijainen navigointi (arkistot päivämäärän, luokan tai tunnisteen mukaan)
    • alatunniste
      • tekijänoikeus- / lisenssitiedot
      • tertiäärinen navigointi
      • yhteystiedot
      • osoite / puhelin
      • sosiaaliset linkit

    Kaikkia näitä osioita ei sisälly jokaiselle sivulle tai ne ilmestyvät samalla tavalla. Tämä on kuitenkin hyvä lähtökohta esimerkille siitä, kuinka nämä eri kappaleet yhdistetään asiakirjaan.

    Elementti

    Yleisin lohkotason elementti verkkosivun jäsentämiselle on elementti. Tätä käytettiin kerran jokaisessa sivun osiossa ja alajaksossa.

    Tämä johti paljon sisäkkäisiin tunnisteisiin.

    class ="ylätunniste"> class ="logo"> class ="main-nav"> class ="search bar"> class ="sivun sisällön"> class ="tärkein"> class ="artikla"> class ="artikkeli otsikon">

    Artikkelin otsikko

    class ="article-meta"> class ="artikkeli-sisältöä">

    Artikla.

    Sisältö.

    class ="article-footer"> class ="kommentit"> class ="sivupalkki"> class ="alatunniste"> class ="lisenssi"> class ="yhteystiedot">

    Uusimman HTML-standardin (HTML5) laajennetun rakenteellisten tunnisteiden ansiosta tämä voidaan tehdä helpompaa lukea merkityksellisemmäksi hakukoneille ja muille järjestelmille, jotka poimii tietoja sivultasi (kuten sokeille näytönlukijoille)..

    HTML-taulukot

    Tämä osa kattaa HTML-taulukot, mukaan lukien kaiken, mitä sinun on tiedettävä eri käyttötapausten merkitsemisestä. Kaikki tärkeimmät taulukon elementit ja määritteet ovat katettu, mukaan lukien taulukon otsikot, alatunniste, runko ja sarakkeet. Tämä osa tarjoaa konkreettisia ehdotuksia joidenkin taulukkojen merkitsemiseen liittyvien vaikeuksien käsittelemiseksi ja koskettaa todellisen maailman käytäntöjä.

    Mitä taulukot ovat??

    HTML-taulukko on tapa esittää ”taulukkotiedot” - tietoa, joka voidaan esittää taulukossa. HTML-taulukot ovat kaksiulotteisia taulukoita, joissa on rivejä ja sarakkeita.

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41

    Taulukkotietoja on monissa muodoissa. Helpoin tapa selvittää, pitäisikö jonkin taulukossa olevan olla, toisin kuin eri syntaksi, kuten määritelmäluettelo, on kysyä itseltäsi: "Olisiko tämä järkevää laskentataulukkona?"

    Jos tieto olisi järkevää laskentataulukkona, se on hyvä ehdokas taulukkoon.

    Taulukon syntaksi

    Perussyntaksi

    Kaikki taulukot käyttävät

    elementti, taulukkorivi ( ) elementti ja taulukkosolu ( ) kerrallaan.

    ) elementti.

    Pelkästään nämä kolme elementtiä riittävät yksinkertaiseen taulukkoon. Pöytä on rakennettu yhdellä rivillä (

    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Taulukon otsikot: Vaihtoehto 1

    Usein on suotavaa laittaa otsikot pöydän yläosaan. Yksi tapa tehdä tämä on korvata normaalit taulukkosolut ( ) taulukon otsikkosoluilla ().

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41

    Tämän lähestymistavan etuna on, että se ei vaikuta koko riviin, vain niihin soluihin, jotka on nimetty otsikoiksi. Se on - siitä on hyötyä, jos thats mitä tapahtuu.

    Pöydän otsikot (ja runko): Vaihtoehto 2

    Toinen tapa tehdä pöydän otsikoita on kääri koko ensimmäinen rivi (tai jopa useita rivejä) taulukko-pääelementtiin ().

    Kun tämä on tehty, loput sisällöstä kääritään yleensä pöydän runkoelementtiin ().

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41

    Tämän avulla koko otsikkorivi voidaan muotoilla.

    teatteri { taustaväri: musta; väri valkoinen; kirjasinpaino: lihavoitu; }

    # thead-esimerkki thead {
    taustaväri: musta;
    väri valkoinen;
    kirjasinpaino: lihavoitu;
    }

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41

    Ehkä mielenkiintoisempaa, tämä mahdollistaa myös pöydän rungon muotoilun vaikuttamatta päähän.

    tbody tr: n. lapsi (pariton) { taustaväri: #eee; } tbody tr: n. lapsi (parillinen) { background-color: #fff; }

    # tbody-esimerkki teatteri {
    taustaväri: musta;
    väri valkoinen;
    kirjasinpaino: lihavoitu;
    }
    # tbody-esimerkki tbody tr: n. lapsi (pariton) {
    taustaväri: #eee;
    }
    # tbody-esimerkki tbody tr: n. lapsi (parillinen) {
    background-color: #fff;
    }

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Pöydän alatunniste

    Pöytäpään ja pöydän rungon ohella voit myös määrittää yhden tai useamman rivin kuuluvan pöydän alatunnisteeseen (). Tämä on hyödyllistä, jos joudut viimeistelemään viimeisen rivin eri tavalla kuin muut rivit. Yleensä tätä voidaan käyttää, jos viimeinen rivi on summaus tai laskelma sen yläpuolella olevien rivien perusteella.

    teatteri { taustaväri: musta; väri valkoinen; kirjasinpaino: lihavoitu; } tbody tr: n. lapsi (pariton) { taustaväri: #eee; } tbody tr: n. lapsi (parillinen) { background-color: #fff; } jalka { taustaväri: # 222222; väri valkoinen; kirjasintyyli: kursivoitu; } Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67

    # tfoot-esimerkki teatteri {
    taustaväri: musta;
    väri valkoinen;
    kirjasinpaino: lihavoitu;
    }
    # tfoot-esimerkki tbody tr: n. lapsi (pariton) {
    taustaväri: #eee;
    }
    # tfoot-esimerkki tbody tr: n. lapsi (parillinen) {
    background-color: #fff;
    }

    # tfoot-esimerkki tfoot {
    taustaväri: # 222222;
    väri valkoinen;
    kirjasintyyli: kursivoitu;
    }

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67
    Taulukon sarakkeet

    Joskus sinun on muotoiltava taulukkosarake. Tämä voidaan saavuttaa (jossain määrin) käyttämällä pylväsmerkintöjä.

    Sarakkeet toimivat hieman omituisesti HTML-muodossa. Koska taulukot on kirjoitettu rivisarjoina, sarakkeet määritetään taulukon toissijaisena peittokuvana.

    Taulukon yläreunassa oleva elementti määrittelee, kuinka sarakkeet asetetaan pöydän päälle. Niiden sisällä on yksittäiset pylväsmääritelmät elementtiä käyttämällä. Jokainen kattaa yhden tai useamman sarakkeen ja määrittää muokattavan kokonaisuuden.

    style ="taustaväri: syaani;"> style ="background-color: yellow;"> style ="background-color: red;"> Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67
    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67

    Jokainen yllä olevassa esimerkissä kattaa yhden taulukkosolun sarakkeen. Jos halusimme soveltaa tyylejä kahteen nimisarakkeeseen yhtenä kokonaisuutena, voisimme tehdä span kaksi solu saraketta.

    span ="2" style ="taustaväri: syaani;"> style ="background-color: yellow;"> Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67
    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67

    Merkinnän käytössä on valitettavasti ongelmia:

    • tukee vain taustaan, leveyteen, reunukseen ja näkyvyyteen liittyviä tyylejä. Tämä tarkoittaa, että et voi esimerkiksi muotoilla taulukon ensimmäistä saraketta lihavoitu.
    • Koska mikään taulukko-osio (pää, vartalo, alatunniste) ei ole vanhempi eikä alaosa, et voi kohdistaa tiettyyn sarakkeeseen osiossa.
    • Lisäksi taulukko-osat ja taulukkorivit ovat tarkempia kuin elementti, joten osastoihin sovelletut tyylit ohittavat kaikki tyylit, joita sovelletaan

    Näiden ongelmien takia sillä on rajoitettu hyöty pöytien muotoilussa.

    Tähän on kaksi yhteistä ratkaisua: luokan ominaisuudet ja n. Lapsen valitsimet.

    Jos haluat käyttää luokan määritteitä, käytä vain sarakekohtaista luokkaa kuhunkin (ja / tai) elementti.

    class ="col1">Etunimi class ="col2">Sukunimi class ="sarake3">Ikä class ="col1">Johannes class ="col2">seppä class ="sarake3">31 class ="col1">jane class ="col2">Valkoinen class ="sarake3">32 class ="col1">frotee class ="col2">Jones class ="sarake3">41 class ="col1"> class ="col2">Keskimääräinen ikä class ="sarake3">34.67

    Tietysti tämä lisää paljon merkintöjä, joita ei ehdottomasti vaadita. Parempi tapa olisi käyttää: ensimmäisen lapsen,: n: nnen lapsen ja: viimeisen lapsen CSS-valitsimia.

    Entä esimerkiksi jos haluamme etunimi-sarakkeen olevan lihavoitu ja ikäryhmien näkyvän punaisella, yksitilaan kirjasimella - yhdessä muiden aiemmin määriteltyjen otsikko- ja alatunnistetyylien kanssa?

    teatteri { taustaväri: musta; väri valkoinen; kirjasinpaino: lihavoitu; } tbody tr: n. lapsi (pariton) { taustaväri: #eee; } tbody tr: n. lapsi (parillinen) { background-color: #fff; } jalka { taustaväri: # 222222; väri valkoinen; kirjasintyyli: kursivoitu; } td: ensimmäisen lapsen { kirjasinpaino: lihavoitu; } td: viimeinen lapsi { fontti-perhe: monospace; väri punainen; Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67

    # pseudocolumns-esimerkki teatteri {
    taustaväri: musta;
    väri valkoinen;
    kirjasinpaino: lihavoitu;
    }
    # pseudocolumns-esimerkki tbody tr: n. lapsi (pariton) {
    taustaväri: #eee;
    }
    # pseudocolumns-esimerkki tbody tr: n. lapsi (parillinen) {
    background-color: #fff;
    }

    # pseudocolumns-example tfoot {
    taustaväri: # 222222;
    väri valkoinen;
    kirjasintyyli: kursivoitu;
    }

    # pseudocolumns-esimerkki td: ensimmäinen lapsi {
    kirjasinpaino: lihavoitu;
    }

    # pseudocolumns-esimerkki td: last-child {
    fontti-perhe: monospace;
    väri: # a20000;
    }

    # pseudocolumns-esimerkki tfoot td: last-child {
    väri: # ff3e3e;
    }

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67
    Ristikon katkaiseminen: riviväli ja kääntölevy

    Joskus taulukkotiedot eivät sovi siististi taulukon luomaan ruudukkoon. Jos tarvitset taulukkosolun kahden tai useamman sarakkeen katkaisemiseksi, käytä colspan-määrite. Jos sinun on ulotettava useampi kuin yksi rivi, käytä riviväliä.

    Esimerkiksi ikätaulukoissamme on alatunnerivi, jossa on tarra ”Keskimääräinen ikä”. Tätä ei tarvitse leikata toiseen sarakkeeseen. Näyttää paremmalta, jos tarra ulottuu viimeisen sarakkeen kahteen ensimmäiseen soluun.

    colspan ="2"> Keskimääräinen ikä: 34.67

    # colspan-esimerkki teatteri {
    taustaväri: musta;
    väri valkoinen;
    kirjasinpaino: lihavoitu;
    }
    # colspan-esimerkki tbody tr: n. lapsi (pariton) {
    taustaväri: #eee;
    }
    # colspan-esimerkki tbody tr: n. lapsi (parillinen) {
    background-color: #fff;
    }

    # colspan-example tfoot {
    taustaväri: # 222222;
    väri valkoinen;
    kirjasintyyli: kursivoitu;
    }

    Etunimi Sukunimi Ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41
    Keskimääräinen ikä 34.67

    Samanlaista syntaksia voidaan käyttää kahden rivin katkaisemiseksi. (No, on lisättävä tähän sarake, koska meillä ei ole hyviä ehdokkaita solujen yhdistämiseen.)

    Etunimi Sukunimi Ikä kohortti rowspan ="2">Oregon Trail Generation colspan ="2">Keskimääräinen ikä
    Johannes seppä 31
    jane Valkoinen 32
    frotee Jones 41 Sukupolvi X
    34.67

    # rowspan-esimerkki teatteri {
    taustaväri: musta;
    väri valkoinen;
    kirjasinpaino: lihavoitu;
    }
    # rowspan-esimerkki tbody tr: n. lapsi (pariton) {
    taustaväri: #eee;
    }
    # rowspan-example tbody tr: n. lapsi (parillinen) {
    background-color: #fff;
    }

    # rowspan-example tfoot {
    taustaväri: # 222222;
    väri valkoinen;
    kirjasintyyli: kursivoitu;
    }

    Etunimi Sukunimi Ikä kohortti
    Johannes seppä 31 Oregon Trail Generation
    jane Valkoinen 32
    frotee Jones 41 Sukupolvi X
    Keskimääräinen ikä 34.67

    Mitkä eivät taulukot ole?

    Sitä ei todellakaan tarvitse sanoa, mutta:

    Taulukoita ei ole tarkoitettu asetteluun. Taulukoita ei tule käyttää kätevänä tapana tehdä sarakkeita ja otsikoita koko asiakirjan tasolla.

    Tämä on joskus edelleen ongelma tänään, koska ennen standardipohjaisten selainten ja semanttisen merkinnän aikakautta monet ihmiset käyttivät taulukoita (paljon monimutkaisia ​​tyylisääntöjä) HTML-asiakirjojen asetteluun.

    Tämä oli huono idea monista syistä, jopa silloin: siitä tehtiin lähdeasiakirja lähes lukemattomaksi, se rikkoi semantiikan kokonaan, se teki melkein mahdottomaksi muuttaa sivua uudelleen koodattamatta sitä kaikkia.

    Nykyään on uusi syy välttää tämä - syy, joka lyö kaikki muut: se ei toimi mobiililaitteilla. Pöytäpohjainen asettelu ei todellakaan ole reagoiva, kykenemätön mukauttamaan sulavasti eri näytön kokoja varten.

    Kaiken tämän lisäksi - taulukkoon perustuva asettelu on paljon vaikeampaa kuin oikea tapa toimia. Älä vain tee sitä.

    Table Edge Case - käännökset vierekkäin

    Yksi melko yleinen taulukkojen muu kuin tietojenkäyttö on kääntäminen rinnakkain. Mieti seuraavaa otosta Dantesin jumalallisesta komediosta.

    # etumaton avaaminen {
    raja: ei mitään;
    reunaväli: 10px;
    }

    Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    ché la diritta kautta erar smarrita.
    Elämämme matkan puolivälissä
    Löysin itseni pimeästä metsästä,
    Sillä suoraviivainen polku oli menetetty.
    Ahi quanto on johtava aikakausi osa cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Ah minua! kuinka vaikea asia on sanoa
    Mikä oli tämä metsä villi, karkea ja ankara,
    Mikä ajattelee uutta pelkoa.
    Tant-amara che poco-pi morte;
    Ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    Joten katkera on, kuolema on vähän enemmän;
    Mutta hoidon hyvästä, jonka sieltä löysin,
    Puhun minä muista asioista, jotka olen nähnyt siellä.

    Tämä on tietysti vain pieni muotoilu taulukko:

    # etumaton avaaminen { raja: ei mitään; reunaväli: 10px; } id ="inferno-aukko"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    ché la diritta kautta erar smarrita.
    Elämämme matkan puolivälissä
    Löysin itseni pimeästä metsästä,
    Sillä suoraviivainen polku oli menetetty.
    Ahi quanto on johtava aikakausi osa cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    Ah minua! kuinka vaikea asia on sanoa
    Mikä oli tämä metsä villi, karkea ja ankara,
    Mikä ajattelee uutta pelkoa.
    Tant-amara che poco-pi morte;
    Ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    Joten katkera on, kuolema on vähän enemmän;
    Mutta hoidon hyvästä, jonka sieltä löysin,
    Puhun minä muista asioista, jotka olen nähnyt siellä.

    Taulukoiden käytön etuna tässä esimerkissä on, että jokainen rivi säätää korkeuttaan automaattisesti rivin kaikkien solujen sisällön perusteella. Tämä pitää käännetyn sisällön lähteen vieressä, vaikka yksi kieli olisi sanallisempi kuin toinen.

    Monet kehittäjät käyttävät tätä mallia käännetyssä tekstissä, ja se on täysin hieno. Kuitenkin voi olla parempi tapa.

    Mieti seuraavaa HTML: tä:

    id ="canto-1"> class ="italialainen"> id ="se-1" class ="P1"> Nel mezzo del cammin di nostra vita
    mi ritrovai per una selva oscura,
    ché la diritta kautta erar smarrita.
    id ="se-2" class ="P2"> Ahi quanto on johtava aikakausi osa cosa dura
    esta selva selvaggia e aspra e forte
    che nel pensier rinova la paura!
    id ="se-3" class ="P3"> Tant-amara che poco-pi morte;
    Ma per trattar del ben chi vi trovai,
    dirò de laltre cose chi vho scorte.
    class ="Englanti"> id ="en-1" class ="P1"> Elämämme matkan puolivälissä
    Löysin itseni pimeästä metsästä,
    Sillä suoraviivainen polku oli menetetty.
    id ="en-2" class ="P2"> Ah minua! kuinka vaikea asia on sanoa
    Mikä oli tämä metsä villi, karkea ja ankara,
    Mikä ajattelee uutta pelkoa.
    id ="en-3" class ="P3"> Joten katkera on, kuolema on vähän enemmän;
    Mutta hoidon hyvästä, jonka sieltä löysin,
    Puhun minä muista asioista, jotka olen nähnyt siellä.

    CSS: llä kelluvat kaksi kieltä vierekkäin, ja JS: llä sen varmistamiseksi, että jokainen kappalepari (en-1 ja it-2 jne.) On saman korkeuden, sama efekti voidaan luoda käyttämättä taulukko- pohjainen asettelu.

    edut:

    • Jotkin näytöt eivät ehkä ole riittävän leveitä sopimaan molemmat tekstisarakkeet vierekkäin. Tätä lähestymistapaa käyttämällä voidaan toista tai toista tarkastella erikseen.
    • Tämä mahdollistaa yhden tekstin useiden kappaleiden valinnan kopioitavaksi ja liitettäväksi. Pöytäpohjaisessa versiossa tämä ei ole mahdollista.

    haitat:

    • Vaatii JavaScriptin
    • Jokainen kappale on tunnistettava merkinnässä.

    Pöydät oikeassa maailmassa

    Taulukoiden oletustyylit ovat todella melko houkuttelemattomia, ja siksi niitä käytetään harvoin. Useimmat käyttöliittymäkehykset (kuten Bootstrap ja Skeleton) tarjoavat erittäin parannetun oletuspöydän muotoilun.

    Vaikka et käyttäisikään käyttöliittymän käyttöliittymää, voi olla hyvä idea vetää pöytätyyli yhdestä kevyestä modulaarisesta kehyksestä. Pöydissä on paljon omituisia muotoilureunoja, joita todennäköisesti ei peitetä, jos yrität korjata muotoilun itse tyhjästä.

    Pöydät ovat tehokkaita

    Taulukot ovat luultavasti HTML-muodon monimutkaisin merkintärakenne, ja niitä on käytetty aiemmin väärin toimittaakseen asetteluastioita. Kun taulukkotietoja on kuitenkin näytettävä sivulla, taulukot ovat tie.

    HTML-lomakkeet

    Tämä osa kattaa yksityiskohtaisesti HTML-lomakkeet. Kaikenlainen lomakeelementtien ja käyttäjän syöttämien käyttöliittymien valikoima on katettu sekä vinkkejä lomakkeiden järjestämiseen ja muotoiluun.

    Lomakkeen perusteet

    HTML-muoto on joukko käyttöliittymäelementtejä, joiden avulla käyttäjä voi antaa tietoja, sekä mekanismin, jonka avulla nämä tiedot toimitetaan palvelimelle..

    Hyvin yksinkertainen esimerkki voi näyttää seuraavalta:

    Jopa tässä yksinkertaisessa muodossa voidaan nähdä, että käyttäjällä on mahdollisuus syöttää tietoja (etunimi ja sukunimi) ja lähettää nämä tiedot palvelimelle..

    Lomakkeista voi tulla erittäin monimutkaisia, ja HTML5: n ansiosta on nyt saatavana monia mielenkiintoisia syöttötyyppejä, mutta HTML-lomakkeen ydin on riippumatta siitä, kuinka monimutkaisia ​​ne ovat, HTML: n sydän on sama: sarja käyttäjän syöttöelementtejä sekä tapa lähettää syöttö palvelimelle.

    Kuinka lomake toimii

    Ennen kuin sukellat kaikkiin eri käyttöliittymäelementteihin, olisi hyvä idea saada selkeä käsitys siitä, kuinka lomake toimii lähettäessään käyttäjätietoja palvelimelle.

    Lomake luo HTTP-pyynnön - saman tyyppinen pyyntö, jonka selaimesi lähettää sivua ladattaessa. Pyynnön sisältö määräytyy lomakkeeseen syötettyjen arvojen perusteella. Palvelimen vastaus on olennaisesti sama kuin sivukuormituksella vastaanotetun vastauksen tyyppi - ja selain vastaa samalla tavalla lataamalla vastauksen uudella sivulla.

    Toisin sanoen: lomakkeen lähettäminen on olennaisesti samaa kuin uuden sivun pyyntö, paitsi että pyyntö sisältää käyttäjän määrittämiä tietoja, jotka toimitetaan lomaketulon kautta.

    Pyydettyjen tietojen kanssa tapahtuu palvelinpuolen komentosarjojen aiheita (PHP, Ruby jne.), Joten emme tapana huolehtia siitä.

    HTTP-pyynnöt ja lomakemenetelmät

    Lomakkeet voivat lähettää kahden tyyppisiä pyyntöjä:

    • LÄHETTÄÄ
    • SAADA

    Näillä kahdella pyyntötyypillä on erilaiset merkitykset, jotka saavat heidät käyttäytymään eri tavalla, joten niitä tulisi käyttää eri tilanteissa.

    __Semanttinen ero POST: n ja GET: n välillä

    GET on oletus HTTP-pyyntö, ja se on samantyyppinen pyyntö, jota selaimesi käyttää, kun kirjoitat osoitteen osoitepalkkiin. Se on pyyntö "saada" jotain.

    POST ei ole pyyntö saada jotain, vaan pyyntö lähettää tai lähettää jotain. Voit miettiä kirjeen, takuita tai merkin lähettämistä.

    Tekninen ero

    Kun käytetään GET-pyyntöä, syöttöparametrit sisällytetään URL-osoitteeseen.

    http://example.com/search?term=thing+i+am+searaching+for

    POST-pyynnöllä syöttöparametreja ei sisällytetä URL-osoitteeseen, vaan ne lähetetään pikemminkin pyynnön rungossa.

    Tässä oleva ero on järkevä kunkin pyynnön tyypin perusteella:

    • GET-pyyntö vaatii tietyn resurssin, jonka määrittelee URL. Siksi pyynnön yksityiskohdat olisi sisällytettävä URL-osoitteeseen, koska nämä yksityiskohdat määrittelevät mitä resurssia pyyntö todella vaatii.
    • POST-pyyntö lähettää viestin tiettyyn osoitteeseen. Osoite määritetään URL-osoitteessa ja viesti määritetään pyynnön rungossa.
    Milloin POST- ja GET-muotoa käytetään lomakkeissa

    Jos lomaketta käytetään tietojen ja tietojen pyytämiseen - kuten hakulomaketta - ja sen tarkoituksena ei ole ensisijaisesti lisätä tai muokata sisältöä, on todennäköisesti parasta käyttää GETrequest.

    Muut merkinnät GET on oikea valinta:

    • Kahden eri käyttäjän, jotka toimittavat samat tiedot lomakkeeseen, pitäisi saada samat vastaukset.
    • Lomakkeen vastaus on asia, johon haluat ehkä linkittää suoraan.
    • Paitsi liikenteen ja toiminnan kirjaaminen, tietokanta on sama lomakkeen lähettämisen jälkeen kuin se oli ennen.
    • Lomake on hakulomake.
    • Käyttäjä käyttää lomaketta saadakseen tietoja sivustoltasi, ei toimittaakseen sinulle tietoja.

    Jos lomaketta käytetään tietojen toimittamiseen, POST on todennäköisesti oikea valinta.

    Muut merkit siitä, että POST on oikea valinta:

    • On erittäin epätodennäköistä, että kaksi eri käyttäjää toimittaisi samanlaisia ​​tietoja.
    • On erittäin epätodennäköistä, että yksi käyttäjä toimittaisi täsmälleen samat tiedot useammin kuin kerran.
    • Lomaketta käytetään tietojen lähettämiseen sivustoon, ei tietojen hakemiseen siitä.
    • Linkki suoraan vastaussivulle olisi turhaa.
    • Tietokanta on erilainen lomakkeen lähettämisen jälkeen kuin se oli ennen.

    Lisäksi POST-järjestelmän käyttämiseen on kaksi syytä, vaikka GET-pyyntö olisi järkevämpi muista syistä:

    • Turvallisuussyistä on edullista olla syöttämättä syöttöparametreja URL-osoitteeseen.
    • GET-pyyntöä käyttävän URL-osoitteen pituus ylittää 2000 merkkiä.
    Missä määritellään POST tai GET

    Jokainen lomake toimittaa tiedot palvelimelle joko GET- tai POST-pyyntötyypillä. Tämä määritetään elementissä olevalla menetelmäattribuutilla.

    menetelmä ="SAADA"> menetelmä ="LÄHETTÄÄ">

    Oletusmenetelmä on GET, joka on johtanut monien epäonnistuneen GET-käytön käyttämiseen, kun POST olisi ollut oikea valinta. Älä luota oletukseen - käytä oikeaa tapaa tilanteeseesi.

    Lomakkeen toiminta - pyydetty URL

    Lomake joko hakee resurssin (URL-osoitteen määrittelemä) tai lähettää tiedot resurssille (URL-osoitteen määrittelemä).

    Resurssin URL-osoite määritetään toiminnon määritteellä muodossa.

    action ="search.php" menetelmä ="SAADA"> action ="edit-post.php" menetelmä ="LÄHETTÄÄ">

    Kuten href - ja src - määritteissä, URL voi olla suhteellinen (action ="search.php") tai ehdoton (toiminta ="http://example.com/search.php").

    Jos toimintoattribuutti jätetään pois, oletus-URL on nykyinen sivu. (Tämä aiheuttaa silti sivun uudelleenlatauksen normaalioloissa.

    Muut ryhmän ominaisuudet

    Seuraavat ominaisuudet koskevat elementtiä:

    • accept-charset - Määrittää merkistö, jota käytetään lomaketietojen lähettämiseen. Oletusasetus on sama kuin asiakirjojen merkistö, joten sitä ei yleensä tarvita.
    • toiminta - lomakkeen lähettämisen kohde-URL. Selitetty yllä.
    • automaattinen täydennys - Ottaa automaattisen täydennyksen käyttöön tuetuissa selaimissa. Arvot ovat päällä tai pois. Oletusarvo on käytössä. Tämä asetus on mahdollista ohittaa yksittäisillä lomakeelementeillä.
    • enctype - Määrittää, miten lomaketiedot koodataan. Tämä koskee vain POST-lomakkeita. Arvot ovat:
      • application / x-www-form-urlencoded - Kaikki merkit koodataan ennen lähettämistä. Välilyönnit muunnetaan + -symboleiksi ja erikoismerkit muunnetaan ASCII HEX -arvoiksi. Tämä on oletusasetus.
      • moniosainen / lomaketieto - merkkejä ei ole koodattu. Tämä on tarpeen, jos käytät muodossa olevaa tiedostojen lataajaa.
      • teksti / tavallinen - välilyönnit muunnetaan + symboleiksi, mutta erikoismerkkejä ei koodata.
    • menetelmä - GET tai POST
    • nimi - lomakkeen nimi. Yleensä on hyvä idea sisällyttää sellainen, eikä siitä ole mitään syytä, että se ei voisi olla sama kuin id.
    • novalidate - Määrittää, että lomaketietoja ei validoida automaattisesti niiden toimittamisen yhteydessä. Tämä ominaisuus ei hyväksy arvoa. (Ole varovainen tässä.)
    • kohde - Vastaa ankkurilinkkien kohdemääritteitä (), tämä ominaisuus määrittelee, missä lomakkeen vastaus tulee näyttää.
      • _ Self - Avaa vastauksen samassa ikkunassa. Tämä on oletusasetus.
      • _ tyhjä - Avaa vastauksen uudessa ikkunassa tai välilehdessä.
      • _näkyvä - Avaa vastauksen lomakkeiden yläikkunassa tai kehyksessä.
      • _top - Avaa vastauksen ikkunan koko rungossa.
      • framename - Voit myös määrittää kehyksen nimen, johon vastaus avataan, jos olet aiemmin avannut ja nimetnyt kehykset sivulle.

    Lomakeelementtien käyttäminen

    Alkuaineiden nimet

    Kun lomake lähetetään palvelimelle, pyyntö - onko kyseessä POST vai GET - sisältää käyttäjän käyttäjän kirjoittamat tiedot. Nämä tiedot lähetetään avain-arvo-parisarjojen muodossa.

    Kunkin lomake-elementin arvo on käyttäjän syöttämä data. Kunkin elementin avain on kyseisen elementin nimiominaisuus. Tästä syystä on kriittistä, että jokaisella lomakkeen tiedonsyöttöelementillä on yksilöivä nimiominaisuus.

    action ="" menetelmä ="lähettää"> for ="etunimi">Etunimi type ="teksti" name ="etunimi" id ="etunimi"> for ="etunimi">Sukunimi type ="teksti" name ="sukunimi" id ="sukunimi"> type ="Lähetä">
    Elementtitarrat

    Elementti on erittäin tärkeä, koska se määrittelee minkä tahansa muotoelementin etiketin.

    Jotkut suunnittelijat eivät halua käyttää lomakkeet, koska he mieluummin sijoittavat tarrojen tekstin syöttöelementtiin.

    action ="" menetelmä ="lähettää"> type ="teksti" name ="etunimi" paikkamerkki ="Etunimi"> type ="teksti" name ="sukunimi" paikkamerkki ="Sukunimi"> type ="Lähetä">

    Vaikka tämä saattaisi näyttää paremmalta suunnittelustasi, theres ovat kaksi vakavaa käytettävyysongelmaa:

    • Näytönlukijat käyttävät etikettejä sokeille käyttäjille kertomaan kentät.
    • Kaikki selaimet eivät tue ”placeholder” -ominaisuutta.

    Ilman asianmukaista merkintää riski on, että jotkut käyttäjät eivät pysty täyttämään lomaketta.

    On myös valitettavasti liian yleistä, että ihmiset sisällyttävät elementtiä, mutta älä käytä sitä oikein.

    Jotta tarraelementti toimisi kunnolla, varten – määritteen tulisi sisältää id omaisuus tuloelementissä.

     for ="etunimi">Etunimi
     type ="teksti" name ="etunimi" id ="etunimi">

    Tämä palvelee kahta tarkoitusta:

    • Varmista, että merkinnässä määritetään, mihin elementtiin etiketti koskee, auttaa näytönlukijoita yhdistämään tarroja syöttöelementteihin, jotta sokeat käyttäjät voivat paremmin liikkua lomakkeessasi.
    • Tarraan napsauttaminen toimii kuten napsauttamalla syöttöelementtiä. Tämä parantaa käytettävyyttä huomattavasti, etenkin napsautettavissa olevilla elementeillä, kuten valintaruudut ja radionäppäimet.

    Sen lisäksi, että varten attribuutti, tarra voidaan sitoa tuloon sisällyttämällä tulo elementti.

    
    
    Väri

    Punainen

    Sininen

    Vihreä

    Oletusarvojen asettaminen

    arvo attribuutti vastaa lomakkeen syöttöelementin nykyistä arvoa. Lisäämällä arvo arvo, Voit asettaa oletus (aloitus) tilan mille tahansa lomakeelementille.

     action ="" menetelmä ="lähettää">
     for ="etunimi">Etunimi
     type ="teksti" name ="etunimi" id ="etunimi"arvo="John">
     for ="sukunimi">Sukunimi
     type ="teksti" name ="sukunimi" id ="sukunimi" arvo ="Smith">
     type ="Lähetä">
    

    Joillakin kehittäjillä on houkutus käyttää arvo attribuutti tapa tarjota paikkamerkki- tai käyttäjävihjeteksti. Tämä on yleensä huono idea, koska jos arvoa ei korvata, paikkamerkkiteksti lähetetään palvelimelle, joka melkein koskaan ei halua toimintoa.

    Yllä olevassa esimerkissä (henkilön nimi) olisi huono idea käyttää ”John Smith” -arvoja vain paikanvaraisena tai vihjeenä käyttäjälle – käyttäjä saattaa lähettää tämän palvelimelle. Jos tämä oli (esimerkiksi) profiilisivu, jossa käyttäjät voivat päivittää omia tietojaan tai jätä se sama, sitten arvon käyttäminen tällä tavalla on järkevää.

    Jos käyttäjä muuttaa muotoelementin syöttötietoja, arvo myös ominaisuuksien muutokset. Jos käyttäisit JavaScriptiä elementtien arvon saamiseksi, se olisi päivitetty arvo, ei alkuperäinen arvo asiakirjan lähteessä.

    Elementtien poistaminen käytöstä

    Useimmat elementit voidaan poistaa käytöstä lisäämällä liikuntarajoitteinen määritellä heille. Poistettuja elementtejä ei voida napsauttaa tai muokata.

     action ="" menetelmä ="lähettää">
     for ="etunimi">Etunimi
     type ="teksti" name ="etunimi" arvo ="John" id ="etunimi">
     for ="sukunimi">Sukunimi
     type ="teksti" name ="sukunimi" arvo ="Smith" id ="sukunimi" liikuntarajoitteinen>
     type ="Lähetä">
    

    Estetyt elementit eivät lähetä arvoa, kun lomake lähetetään, joten ole varovainen käyttäessäsi tätä esimerkiksi profiilitietojen näyttämiseen, joita et halua käyttäjän muuttavan.

    elementti

    Tärkein ja monipuolisin muotoelementti on . Toisin kuin useimmat muut muotoelementit, joilla on yksi funktio, elementtiä käytetään monenlaisissa toiminnoissa yksinkertaisesta tekstistä monimutkaiseen vuorovaikutukseen painikkeisiin (lomakkeen lähetyspainike on yleensä elementti).

    Erityyppiset tulonsäätimet määritellään tyyppi attribuutti elementti.

    Tyyppi: Teksti

    Tyypillisin (ja oletus) tulotyyppi on teksti. Tämä määrittelee yksirivisen tekstinsyötön, jota käytetään sisäänkirjautumislomakkeen käyttäjänimelle tai kyselyn kirjoittamiseen hakumuodossa.

    type ="teksti">

    lista -määritteellä voidaan määrittää syötteen ennalta määritettyjen arvojen luettelo.

    type ="teksti" list ="Vaihtoehdot"> id ="Vaihtoehdot"> arvo ="punainen"> arvo ="vihreä"> arvo ="sininen">
    Tyyppi: Lähetä

    Toinen perusteellisin syöttötyyppi on Lähetä input, joka määrittelee lomakkeiden lähetyspainikkeen.

     type ="Lähetä">

    Lähetyspainikkeen oletusteksti on ”Lähetä”. Tätä voidaan muuttaa arvo ominaisuus.

    name ="Hae"> type ="Lähetä" arvo ="Hae">

    Toinen syöttötyyppi luo samanlaisen käyttöliittymän kuin Lähetä tyyppi – nappi tyyppi. Älä kuitenkaan käytä nappi yleisen lomakkeen toimittamista varten. (Se ei toimi.) Ja älä käytä Lähetä painike muodossa olevien yleisten painikkeiden painikkeelle – se toimii väärin.

    Tyyppi: Salasana

    Jos haluat peittää tekstinsyöttöön merkit, käytä Salasana tyyppi.

    for ="Käyttäjänimi">Käyttäjätunnus
    name ="Käyttäjänimi" type ="teksti" id ="Käyttäjänimi">

    for ="Salasana">Salasana
    type ="Salasana" name ="Salasana" id ="Salasana">

    type ="Lähetä" arvo ="Kirjaudu sisään">
    Tekstinsyöttötyypit validoinnilla

    Useat syöttötyypit luovat saman käyttöliittymän – ruudun tekstin kirjoittamiseen -, mutta luovat eri ehdot syötteen validoimiseksi.

    Esimerkiksi sähköposti tyyppitarkistukset varmistaaksesi, että syötetyt tiedot ovat vakiona sähköpostiosoitemuodossa (tekstiä, jota seuraa @ merkki, jota seuraa teksti, joka käsittää vähintään yhden pisteen).

    Nämä tyypit ovat:

    • sähköposti
    • määrä – Kenttä hyväksyy vain numerot.
    • puh – Puhelinnumero. (Telephone-numeroiden validointia ei tueta laajalti selaimissa.)
    • url – Hyväksyy vain hyvin muotoilut URL-osoitteet.

    Nämä arvot vahvistetaan, kun lomake lähetetään, paitsi novalidate attribuutti määritetään lomakkeessa tai formnovalidate attribuutti määritetään yksittäisissä elementeissä.

    Tyypit päivämäärän tai ajan valitsimilla

    Useat syöttötyypit luovat ponnahdusikkunoiden elementit päivämäärän ja / tai ajan valitsemiseksi kalenterista. Nämä käyttöliittymäelementit ovat selainpohjaisia, eikä niitä tueta yleisesti.

    Nämä tyypit ovat:

    • Päivämäärä
    • treffiaika
    • datetime-local
    • kuukausi
    • aika
    • viikko
    for ="Päivämäärä">Esimerkki päivämäärän syöttämisestä
    type ="Päivämäärä" name ="Päivämäärä" id ="Päivämäärä">

    for ="treffiaika">Esimerkki päivämäärän syöttämisestä
    type ="treffiaika" name ="treffiaika" id ="treffiaika">

    for ="Datetime-paikallinen"> Esimerkki aikataulun paikallisesta
    type ="Datetime-paikallinen" name ="Datetime-paikallinen" id ="Datetime-paikallinen">

    for ="kuukausi">Esimerkki kuukauden syöttöstä
    type ="kuukausi" name ="kuukausi" id ="kuukausi">

    for ="aika">Esimerkki aikataulusta
    type ="aika" name ="aika" id ="aika">

    for ="viikko">Esimerkki viikon syötöstä
    type ="viikko" name ="viikko" id ="viikko">

    Tyyppi: Radio

    Radiopainikkeet ovat tyyppisiä lomaketuloja, joissa sarjasta voidaan valita vain yksi kohde.

    Jokainen painike radionäppäinjoukossa on oma -painiketta, eikä ole mitään vaatimusta, että ne olisi sidottu toisiinsa sisältävän elementin lapsina.

    Ominaisuus, joka sitoo useita radiopainikkeita sarjaan, on nimi ominaisuus.

    type ="radio" name ="muoto" arvo ="neliö"> Neliö
    type ="radio" name ="muoto" arvo ="ympyrä"> Ympyrä
    type ="radio" name ="muoto" arvo ="kolmio"> Kolmio
    type ="radio" name ="väri" arvo ="punainen"> Punainen
    type ="radio" name ="väri" arvo ="sininen"> Sininen
    type ="radio" name ="väri" arvo ="Vihreä"> Vihreä
    Muoto



    Väri



    Kullekin palvelimelle lähetetty arvo nimi on arvo kunkin parin valitun radiopainikkeen ominaisuus. Kaikki merkinnät on tarkoitettu vain käyttäjälle, eikä sillä ole vaikutusta palvelimelle siirrettyyn arvoon.

    Paras tapa merkitä tulot radionäppäinjoukkoon on kääri elementti ja tarran teksti osaksi a elementti. Tämä tekee tarran tekstistä napsautettavissa, mikä on helpompaa käyttää.

    
    
    type ="radio" name ="muoto" arvo ="neliö"> Neliö
    type ="radio" name ="muoto" arvo ="ympyrä"> Ympyrä
    type ="radio" name ="muoto" arvo ="kolmio"> Kolmio
    type ="radio" name ="väri" arvo ="punainen"> Punainen
    type ="radio" name ="väri" arvo ="sininen"> Sininen
    type ="radio" name ="väri" arvo ="Vihreä"> Vihreä
    Muoto

    Neliö

    Ympyrä

    Kolmio

    Väri

    Punainen

    Sininen

    Vihreä

    Huomaa, että elementti kääri elementti, varten ja id määritteitä ei tarvita.

    Tyyppi: Valintaruutu

    Valintaruudun tulotyyppiä voidaan käyttää määrittämään yksi kahdesta tuloohjaintyypistä (jotka molemmat näyttävät valintaruuduilta).

    Ensimmäinen tyyppi on yksi näppäin, jolla voi olla useita arvoja (joskus kutsutaan monivalitsemiseksi). Toinen tyyppi on looginen (TRUE / FALSE) -näppäin.

    Luo joukko arvoja, jotka voidaan osoittaa samaan avaimeen, yksinkertaisesti luomalla ryhmä valintaruutu tulot samalla nimi ominaisuus.

    Värit pidän
    type ="Valintaruutu" name ="väri" arvo ="sininen"> Sininen
    type ="Valintaruutu" name ="väri" arvo ="vihreä"> Vihreä
    type ="Valintaruutu" name ="väri" arvo ="keltainen"> Keltainen
    type ="Valintaruutu" name ="väri" arvo ="punainen"> Punainen
    Värit pidän

    värit

    Sininen

    Vihreä

    Keltainen

    Punainen

    Tässä esimerkissä useita väri- valintoja voidaan tehdä. Kukin niistä lähetetään palvelimelle erillisinä parametreina pyynnössä. Esimerkiksi, jos ne kaikki valittiin a SAADA lomake, pyydetty URL näyttää seuraavalta:

    http://example.com?color=blue&color=green&color=yellow&color=red

    Voit myös käyttää valintaruutuja erikseen edustaa boolean (TRUE / FALSE) arvoja.

    type ="Valintaruutu" name ="Tos" arvo ="TOTTA"> Napsauttamalla tätä vakuutat, että hyväksyt käyttöehtomme.

    Napsauttamalla tätä vakuutat, että hyväksyt käyttöehtomme.

    Tietysti mikä tahansa arvo toimisi, kunhan palvelinpuolen koodi osaa tulkita määritteen olemassaolon.

    Kummassakin tapauksessa, jos mitään ruutua ei ole valittu, nimi avainta ei lähetetä pyynnössä.

    Esimerkiksi yllä olevassa värimallissa, jos mitään vaihtoehdoista ei tarkistettu, toimitetut tiedot Eikö sisältää kaikki viittaukset väri- syöttöavain. (Ei edes tyhjää sarjaa.)

    Tyyppi: Painike

    Painike voidaan luoda muodossa käyttämällä syöttötyyppiä nappi. Toisin kuin muut syöttötyypit, tällä ei ole erityistä merkitystä lomakkeessa, ja sitä käytetään yleensä vain jonkin JavaScript-toiminnan käynnistämiseen.

     type ="-Painiketta" arvo ="Button Label" onclick ="hälytys ('Olen painike!')">
    Tyyppi: Väri

    Uusi HTML5: ssä – ja jota tuetaan vain joissain selaimissa – on värivaihtoehtoinen syöttötyyppi.

    Selaimessa, jotka tukevat sitä, tämän elementin napsauttaminen tuo käyttöön GUI: n värin valitsemiseksi. Palvelimelle lähetetty arvo on HTML / CSS-heksaväriarvo (entinen. valkoinen = #ffffff).

    for ="lempiväri">Mikä on lempivärisi?
    type ="väri" name ="lempiväri" id ="lempiväri">

    Tyyppi: Range

    Myös uusi HTML5: ssä ja riippuen selaimen tuesta, on alue tulo. Tämä tulo näkyy liukusäätimenä, jota käyttäjä voi liikuttaa vaakasuunnassa.

    Syöttöelementin on määritettävä alueen korkein ja alin arvo. Käyttäjän asettama arvo lähetetään lomakkeen mukana.

    
    
    for ="Muodossa ymmärtämisen">Kuinka hyvin ymmärrät lomakkeet?

    Ei lainkaan.
    type ="Alue" name ="Muodossa ymmärtämisen" id ="Muodossa ymmärtämisen" min ="0" max ="100"> Hyvä on.

    Ei lainkaan.

    Hyvä on.

    Tyyppi: Kuva

    kuva tulo korvaa a Lähetä -painiketta, jolloin voit käyttää kuvaa painikkeena.

    Painikkeen toimintatavan muuttamisen lisäksi lähetyspyyntö sisältää myös kuvan X napsauttajien X- ja Y-koordinaatit. Tämän avulla lähetyslomake toimii palvelinpuolen kuvakartana.

    type ="kuva" src ="Esimerkki.jpg">
    Tyyppi: Tiedosto

    Lomake voi sisältää tiedostojen lataussisällön tiedosto tyyppi. Tiedoston latauskäyttöliittymän tarkkaa näyttöä ja toiminnallisuutta hallitsee selain. Tiedoston käsittely (missä tiedosto tallennetaan) on myös määritettävä palvelinpuolella.

    type ="Tiedosto" name ="File-upload">

    Voit rajoittaa tiedostojen syöttämisen hyväksymiä tiedostoja hyväksyä attribuutti, jonka avulla voit määrittää joko luettelon laajennuksista tai luettelon MIME-tyypeistä.

    
    
    
    type ="Tiedosto" name ="Laajennus-rajoitettu-lataaja" hyväksy =".png, .gif, .jpg, .jpeg">
    type ="Tiedosto" name ="Mime-rajoitettu-lataaja" hyväksy ="kuva, kuva / png, kuva / gif, kuva / jpg, kuva / jpeg">

    Selaimen tuki tiedostopäätelle ei ole yleistä, joten MIME-tyyppinen luettelo on todennäköisesti parempi tapa edetä. (Katso yksityiskohdat tästä luettelosta MIME-tyypeistä.)

    Vaikka käytät hyväksyä -ominaisuuden avulla rajoittaa lomakkeen kautta ladattavia tiedostopäätteitä, on tärkeää tarkistaa sekä tiedostotyyppi että palvelimen tiedostojen sisältö. Ainakin kahdesta syystä:

    • Vahingollinen (tai huolimaton) käyttäjä voi nimetä väärän tiedoston tiedostolla, jolla on väärä tiedostopääte. hyväksyä tiedoston lataajan rajoitukset tarkastelevat vain tiedostotunnistetta, eivät varsinaista tiedostomuotoa, joten tiedossa olevan oikean tyyppinen takuu ei ole takuu.
    • Lomake on mahdollista ohittaa ja lähettää pyyntö suoraan palvelimelle. (Siksi KAIKKI tulot olisi validoitava palvelimella.)
    Tyyppi: Piilotettu

    Voit nimetä näkymättömän panos elementti, jonka arvo sisällytetään, kun lomake lähetetään, käyttämällä tyyppiä kätketty.

     type ="Piilotettu" name ="Piilotettu-arvoa" arvo ="">

    Piilotettujen tietojen yleisin käyttö on haltija muualla sivulla luodulle arvolle, yleensä JavaScriptin kautta. Sivun käyttäjän vuorovaikutus aiheuttaa arvon osoittamisen piilotetulle tulolle, joka sisällytetään sitten lomakkeen lähettämiseen.

    Ominaisuudet

    elementillä on suuri määrä määritteitä. Jotkut niistä soveltuvat vain tietyille tulotyypeille, ja toisia voidaan käyttää minkä tahansa tulon kanssa.

    • hyväksyä – Määrittää luettelon tiedostotyypeistä joko laajennuksen tai MIME-tyypin mukaan. Käytetään vain type = "tiedosto".
    • alt – Määrittää korkean tekstin. Käytetään vain type = "image".
    • Automaattinen täydennys – Määrittää, onko syöttökentän automaattinen täyttö. Arvot ovat päällä tai vinossa. Ohittaa lomaketason Automaattinen täydennys määrite. Koskee vain tekstipohjaisia ​​syötteitä.
    • automaattitarkennus – Määrittää, että pitäisi olla keskittynyt, kun sivu latautuu. Arvoa ei tarvita. Sitä tulisi käyttää vain kerran asiakirjassa.
    • tarkistettu – Asettaa a radio tai valintaruutu tulo valittuun tilaan.
    • liikuntarajoitteinen – Poistaa käytöstä elementti. Estetyt elementit eivät lähetä arvoaan, kun lomake lähetetään. Arvoa ei vaadita.
    • muoto – Määrittää a
      johon kuuluu, käytettäväksi kun elementti on elementti. Arvo on id kohdemuodosta. Tätä ominaisuutta ei tueta yleisesti.
    • formaction – Määrittää URL-osoitteen, johon lomake lähetetään. Ohittaa toiminta – ominaisuus
      itse tai korvaa sen. Tätä käytetään vain Lähetä tai kuva tyypit. Ainoa syy käyttää tätä lomakkeiden sijasta toiminta attribuutti on, jos lomake vaatii useita lähetyspainikkeita, joissa on eri toiminnot.
    • formenctype – Määrittää toimitettujen tietojen merkkikoodauksen. Ohittaa enctype – ominaisuus
      elementti. Tätä käytetään vain Lähetä ja kuva tyypit. arvot:
      • application / x-www-lomakkeella-urlencoded
      • multipart / form-data
      • text / plain
    • formmethod – Määrittää menetelmän (saada tai lähettää) lomakkeen toimittamisesta. Ohittaa menetelmä – ominaisuus
      elementti. Tätä käytetään vain Lähetä ja kuva tyypit.
    • formnovalidate – Määrittää, että lomaketietoja ei tulisi vahvistaa ennen toimittamista. Ohittaa novalidate – ominaisuus
      elementti. Tätä käytetään vain Lähetä ja kuva tyypit. Tämä ominaisuus ei vaadi arvoa.
    • formtarget – Määrittää selainkontekstin, jossa vastaus näytetään. Ohittaa kohde – ominaisuus
      elementti. Tätä käytetään vain Lähetä ja kuva tyypit. arvot:
      • _tyhjä
      • _self
      • _parent
      • _top
      • framename
    • korkeus – Määrittää ankkurin korkeuden pikseleinä kuva tulo. Olisi parempi käyttää CSS: ää sen määrittämiseen.
    • lista – Määrittää id of a elementti, joka sisältää ennalta määritetyt vaihtoehdot. Käytetään vain tekstipohjaisissa syöttöissä.
    • max – Määrittää numero- tai päiväyspohjaisen syötteen maksimiarvon.
    • Maksimi pituus – Määrittää tekstipohjaisen merkin enimmäismäärän.
    • min – Määrittää numero- tai päiväyspohjaisen syötteen vähimmäisarvon.
    • moninkertainen – Määrittää, että käyttäjä voi syöttää useamman kuin yhden arvon. Käytetään sähköposti ja tiedosto syöttötyypit. Tämä ominaisuus ei vaadi arvoa.
    • nimi – Määrittää syötteen nimen. Käytetään avaimena avain-arvoparissa, joka edustaa syötettä lomakkeen lähettämisen yhteydessä. Uniikki nimi tulisi antaa kaikille lomakeelementeille.
    • kuvio – Määrittää säännöllisen lausekkeen, jota käytetään tekstipohjaisen syötteen arvon vahvistamiseen.
    • paikanpitäjä – Määrittää paikkamerkinnän tai ”auttajan” tekstin tekstipohjaiseen syötteeseen.
    • Lue ainoastaan – Määrittää, että käyttäjä ei voi muokata tuloa. Samanlainen käyttäytyminen kuin liikuntarajoitteinen attribuutti, lukuun ottamatta vain kirjoitettavia tuloja tehdä lähettää arvonsa palvelimelle, kun lomake lähetetään. Käytetään usein JavaScriptin avulla sen varmistamiseksi, että käyttäjä ei voi muokata arvoa ennen kuin tietyt ehdot täyttyvät, tai ei voi arvoa tiettyjen ehtojen täyttyessä. Tämä ominaisuus ei vaadi arvoa.
    • vaaditaan – Määrittää, että täytyy olla arvo, tai lomaketta ei lähetetä. Tämä ominaisuus ei vaadi arvoa.
    • koko – Määrittää tekstipohjaisen syöttöelementin leveyden merkeinä. CSS: n käyttö on tyypillisesti parempi tapa saavuttaa tämä.
    • src – Määrittää kuvan URL-osoitteen kuva panos.
    • vaihe – Määrittää numeropohjaisen tulon voimassa olevien tulojen välisen ajan.
    • tyyppi – Määrittää elementti. Oletus on teksti. Kaikkia mahdollisia arvoja ei tueta kaikissa selaimissa. arvot:
      • nappi
      • valintaruutu
      • väri-
      • Päivämäärä
      • treffiaika
      • datetime-local
      • sähköposti
      • tiedosto
      • kätketty
      • kuva
      • kuukausi
      • määrä
      • Salasana
      • radio
      • alue
      • asettaa uudelleen
      • Hae
      • Lähetä
      • puh
      • teksti
      • aika
      • url
      • viikko
    • arvo – Määrittää tulon aloitusarvon.
    • leveys – Määrittää ankkurin leveyden pikseleinä kuva tulo. CSS: n käyttö on tyypillisesti parempi tapa saavuttaa tämä.

    Tekstialue

    Jos haluat syöttää lyhyen, yhden rivin tekstiä, käytä elementti. Mutta jos tarvitset suuremman alueen pidempään viestiin, käytä

    # textarea-esimerkki textarea {
    korkeus: 6em;
    leveys: 30em;
    }

    Elementin sisällä oleva teksti näkyy tekstialueella.


    for ="Sanoma">Viestisi:

    name ="Sanoma" id ="Sanoma">Tämä teksti on teksta-elementin sisällä. Käyttäjä näkee sen. Jos käyttäjä ei muuta sitä, se lähetetään lomakkeen mukana.

    # textarea-text-esimerkki textarea {
    korkeus: 6em;
    leveys: 30em;
    }

    Viestisi:

    Ominaisuudet ovat:

    • autofocus - Määrittää, että sen tulisi olla tarkennettu, kun sivu latautuu. Sitä tulisi käyttää vain kerran asiakirjassa. Tämä ominaisuus ei vaadi arvoa.
    • cols - Määrittää tekstialueen leveyden merkeinä. Tämä saavutetaan paremmin CSS: llä.
    • poistettu käytöstä -. Poistetut lomakeelementit eivät lähetä arvoaan palvelimelle, kun lomake lähetetään. Tämä ominaisuus ei vaadi arvoa.
    • muoto - Määrittää sen tunnuksen, jolle kuuluu, käyttöä varten, jota ei ole elementissä. Ei tueta kaikissa selaimissa.
    • enimmäispituus - Määrittää .
    • nimi - määrittelee nimen, ja toimii avaimena avain-arvoparille, joka edustaa lomakkeen lähetyspyynnössä olevaa arvo-paria. Kaikissa lomakeelementeissä tulisi olla yksilöivä nimi.
    • paikkamerkki - määrittelee paikkamerkin tai auttajan tekstin, joka näytetään ennen käyttäjän kirjoittamista siihen.
    • readonly - Määrittää, että käyttäjä ei voi muokata tuloa. Samanlainen käytöksessä kuin käytöstä poistettu attribuutti, paitsi lukuisat elementit lähettävät arvonsa palvelimelle, kun lomake lähetetään. Käytetään usein JavaScriptin avulla sen varmistamiseksi, että käyttäjä ei voi muokata arvoa ennen kuin tietyt ehdot täyttyvät, tai ei voi arvoa tiettyjen ehtojen täyttyessä. Tämä ominaisuus ei vaadi arvoa.
    • vaaditaan - Määrittää, että pakolla on oltava arvo, tai lomaketta ei lähetetä. Tämä ominaisuus ei vaadi arvoa.
    • rivit - Määrittää. Joissakin tapauksissa tämä on parempi kuin CSS: n käyttö (esimerkiksi kun todellinen rivimäärä on merkityksellinen), mutta korkeuden määrittämiseksi CSS on yleensä parempi vaihtoehto.
    • wrap - Määrittää, syötetäänkö syötteen kova rivitys (lisää rivinvaihdon merkki jokaiseen rivinvaihtoon) vai pehmeä kääri (lisää rivinvaihtomerkki vain, kun käyttäjä määrittelee rivinvaihdon). Arvot ovat pehmeitä tai kovia.

    Valitse (avattava)

    Jos haluat määrittää avattavan valitsimen, käytä elementtiä alaelementtien kanssa.

    for ="lempiväri">Mikä on lempivärisi?
    name ="lempiväri" id ="lempiväri">
    arvo ="punainen">Punainen
    arvo ="sininen">Sininen
    arvo ="vihreä">Vihreä
    arvo ="keltainen">Keltainen

    Mikä on lempivärisi?
    Punainen
    Sininen
    Vihreä
    Keltainen

    Vaihtoehdot voidaan ryhmitellä toisiinsa ja antaa ryhmätason tarrat elementin kanssa.

    for ="lempiväri">Mikä on lempivärisi?
    name ="lempiväri" id ="lempiväri">
    label ="Ensisijaiset värit">
    arvo ="punainen">Punainen
    arvo ="sininen">Sininen
    arvo ="keltainen">Keltainen

    label ="Toissijaiset värit">
    arvo ="vihreä">Vihreä
    arvo ="oranssi">Oranssi
    arvo ="violetti">Violetti

    label ="Ei oikeastaan ​​värit">
    arvo ="musta">Musta
    arvo ="valkoinen">Valkoinen
    arvo ="harmaa">harmaa

    Mikä on lempivärisi?
    Punainen
    Sininen
    Keltainen

    Vihreä
    Oranssi
    Violetti

    Musta
    Valkoinen
    harmaa

    Elementin sisällä oleva sisältö tarjoaa käyttäjäystävällisen tarran, mutta palvelimelle lähetetyn arvon määrittelee arvoattribuutti, ei elementin sisältö..

    Elementin ominaisuudet:

    • autofocus - Määrittää, että elementin on oltava tarkennettuna, kun sivu latautuu. Sitä tulisi käyttää vain kerran asiakirjassa. Tämä ominaisuus ei vaadi arvoa.
    • poistettu käytöstä - poistaa elementin käytöstä. Estetyt elementit eivät lähetä arvoa palvelimelle, kun lomake lähetetään. Tämä ominaisuus ei vaadi arvoa.
    • muoto - Määrittää tunnuksen, johon tämä elementti kuuluu, käytettäväksi, jolloin elementtiä ei ole. Ei tueta kaikissa selaimissa.
    • useita - Määrittää, että käyttäjä voi valita useita. Useita valintoja lähetetään useina avain-arvo-pareina. Tämä ominaisuus ei vaadi arvoa.
    • name - elementin nimi, joka toimii avaimena arvo-parissa, joka edustaa elementtiä, kun lomake lähetetään palvelimelle.
    • vaaditaan - Määrittää, että elementillä on oltava valittu arvo, muuten lomaketta ei lähetetä. Tämä ominaisuus ei vaadi arvoa.
    • koko - Määrittää näkyvien asetusten lukumäärän. Oletusasetus on 1.

    Elementtien ominaisuudet ovat:

    • poistettu käytöstä - Määrittää, että kansiota ei voida valita.
    • tarra - Määrittää tarran, joka korvaa elementin sisällön avattavassa näytössä.
    • valittu - Määrittää, että se pitäisi olla esivalittu sivun latauksen yhteydessä.
    • arvo - määrittää palvelimelle lähetetyn arvon.

    Lomakkeen järjestäminen

    Suuri tai monimutkainen muoto voidaan tehdä muotoilusta ja käytöstä helpompaa ryhmittelemällä muotoelementit astioihin. Jokainen voidaan nimetä elementillä.

    Henkilökohtaisia ​​tietoja
    for ="etunimi">Etunimi
    name ="etunimi" id ="etunimi">

    for ="sukunimi">Sukunimi
    name ="sukunimi" id ="sukunimi">

    for ="syntymäpäivä">Syntymäpäivä
    name ="syntymäpäivä" id ="syntymäpäivä">

    Lempiasiat
    for ="lempiväri">Lempiväri
    name ="lempiväri" id ="lempiväri">
    label ="Ensisijaiset värit">
    arvo ="punainen">Punainen
    arvo ="sininen">Sininen
    arvo ="keltainen">Keltainen

    label ="Toissijaiset värit">
    arvo ="vihreä">Vihreä
    arvo ="oranssi">Oranssi
    arvo ="violetti">Violetti

    label ="Ei oikeastaan ​​värit">
    arvo ="musta">Musta
    arvo ="valkoinen">Valkoinen
    arvo ="harmaa">harmaa

    for ="favoriteShape">Suosikki muoto
    name ="favoriteShape">
    arvo ="kolmio">Kolmio
    arvo ="neliö">Neliö
    arvo ="ympyrä">Ympyrä

    type ="Lähetä">

    Muotoilulomakkeet

    Useimmissa selaimissa lomakeelementtien oletusnäyttö on erittäin houkutteleva. Painikkeiden ja avattavan käyttöliittymän yleisen "taistelulaivaharmaan" lisäksi tyypillisesti vakavia ongelmia kohdistuksessa, viivan korkeudessa ja etäisyydessä.

    Tämä aiheuttaa kaksi ongelmaa:

    • Monet lomakeelementit näyttävät huonoilta yksittäin.
      • Esimerkiksi - radiopainikkeet ja valintaruudut eivät yleensä kohdistu oikein omien tarrojensa kanssa.
    • Muotoelementit eivät näytä hyvältä yhdessä.
      • Esimerkiksi - saman rivin elementti ja pudotusvalikko eivät ole linjassa toistensa kanssa oikein.

    Tämä voi olla hyvin turhauttavaa.

    Joitakin ongelmista - kuten pystysuora korkeus ja etäisyys - käsitellään joissakin suosituimmissa CSS-palautuksissa, mutta ei kaikissa.

    Jos aiot rakentaa CSS-tyylisivun projektillesi tyhjästä, muista luoda useita yksityiskohtaisia ​​esimerkilomakkeita käyttämällä kaikkia lomakeelementtejä useassa yhdistelmässä. Ole erityisen tietoinen monisarakkeista lomakkeista.

    Muotoilun vaikeuksien takia on usein hyvä idea käyttää lomaketyylejä suositusta käyttöliittymästä.

    HTML ja CSS - lyhyt johdanto

    Tämä osa esittelee verkkojen muotoilukielen - CSS - ja selittää, kuinka se toimii HTML: n kanssa. Vaikka tämä ei olekaan täydellinen opas aiheeseen, se tarjoaa melko perusteellisen käsitteellisen katsauksen sivustosuunnitteluun. Käsiteltyjä aiheita ovat rakenteellinen CSS, ”laatikkomalli”, tekstin muotoilu, typografia, animaatiot, reagoiva suunnittelu ja käyttöliittymien käyttö.

    Mikä on CSS?

    CSS tarkoittaa CSS-tyylisivuja. Se on kieli, jota käytetään määrittelemään, kuinka HTML-asiakirja tulee näyttää sivulla.

    Sitä kutsutaan ”tyylilomakkeeksi” viitaten ajatukseen, että asiakirjan tulisi sisältää koko sisältö ja vain sisältö ja että erillisessä asiakirjassa tai arkissa tulisi olla tietoja tyyleistä.

    Sitä kutsutaan "asteittaiseksi", koska tyylit, jotka liittyvät tekstinäytön "kaskadiin" vanhemmista lapsille. Jos esimerkiksi kappaleen CSS (

    ) asettaa tekstin värin siniseksi, lihavoituna ( ) tai kursivoitu () teksti kyseisen kappaleen sisällä olisi myös sininen, ellei uusi tyyli-ilmoitus muuta sitä.

    Kuinka CSS toimii - yleiskatsaus

    Kuinka sisällyttää CSS asiakirjaan

    CSS voidaan sisällyttää asiakirjan elementtiin tai erillisiin .css-tiedostoihin (nimeltään “tyylisivut”), joihin on linkitetty HTML-dokumentista, pään sisällä.

    rel ="tyylisivu" type ="text / css" href ="theme.css">

    p {
    kirjasinperhe: Georgia, "Times New Roman", serif;
    }

    Voit linkittää useisiin tyylitaulukoihin yhdessä asiakirjassa ja sisällyttää useita tageja.

    Lähes aina on parempi käytäntö sisällyttää CSS linkitetyn tyylitaulukon kautta kuin upottaa elementti sivulle. Joissakin tapauksissa upotetut tyylit ovat järkeviä (esimerkiksi sähköposti), mutta yleinen nyrkkisääntö on - jos voit linkittää tyylitaulukkoon, sinun pitäisi.

    Tyyli-ilmoitukset

    Tyylitaulukko on tyyliselvityksen sarja. Ne merkitään seuraavasti:

    [valitsin] {
    [ominaisuus]: [arvo];
    [ominaisuus]: [arvo];
    }

    / * kommentit täällä * /

    Tuo on:

    • Valitsin tai elementin tunniste, joka määrittää, mitä muotoillaan. Näitä ovat seuraavat (niitä on enemmän):
      • Elementtityypin nimi: a, p, dl jne. Tämä koskee tyylejä kaikkiin kyseisen tyypin elementteihin.
      • Luokan tunniste - luokan nimi, etuliitetty pisteellä (.).
      • ID-tunniste - tunnuksen nimi, joka on liitetty hash-merkillä (#).
      • Yksi yllä mainituista sekä jokin muu erikoisvalitsin, kuten pseudoklassi, kuten: leiju.
    • Avautuva kihara, joka merkitsee tyylisääntöjen alkua annetulle elementille.
    • Tyylisäännöt, jotka ilmaistaan ​​ominaisuus-arvo-pareina, jotka on kytketty kaksoispisteisiin ja päättynyt puolipisteisiin.
    • Sulkeva kihara-aukko, joka osoittaa kyseisen elementin tyylisääntöjen lopun.

    Esimerkiksi:

    html {
    väri: # 222222; / * tekstin väri - erittäin tummanharmaa * /
    kirjasinperhe: Georgia, "Times New Roman", Garamond, serif;
    kirjasinkoko: 14 kuvapistettä;
    linjan korkeus: 22px;
    }

    / * Tämä on kommentti. * /

    #logo {/ * tyyli elementtitunnuksella * /
    väri: # B20000;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    }

    .widget {/ * Tyyli elementtiluokittain. * /
    leveys: 100%;
    reunus: kiinteä 2px musta;
    täyte: 22 x 11 px;
    }

    a {
    väri: # 008AE6;
    }

    a: leijuta {
    väri: # 006EB8;
    tekstikoriste: alleviivattu;
    }

    Asiakirjapuu

    Monet ihmiset ajattelevat vain HTML-asiakirjaa lineaarisena rakenteena: ensin, sitten, sitten, ja sitten .

    HTML-asiakirja on kuitenkin todella puu:

    • HTML
      • Pää
      • otsikko
      • Meta
      • ruumis
      • ylätunniste
        • H1
        • nav
      • tärkein
        • p
          • vahva
        • olia
          • li
          • li
          • li
      • syrjään
        • jakso
        • jakso
        • jakso
      • Alatunniste

    Jokainen elementti on sisäkkäin toisen elementin sisällä.

    CSS: ssä jotkut tyyli-ilmoitukset vaikuttavat itse elementin kokoon tai muotoon. Tällä ei ole vaikutusta sen sisällä oleviin elementteihin.

    Mutta muut tyylit vaikuttavat elementin sisältöön - tyylit, kuten tekstin väri, taustaväri, fontin koko, välimatka. Näiden tyylien sanotaan olevan "kaskadia" asiakirjapuussa. Kaikki sisältö, mukaan lukien muut elementit, vaikuttaa, ellei eri tyyli-ilmoitus syrjäytä sitä tarkemmassa kohdassa.

    Mieti seuraavaa esimerkkiä:

    href ="">Ankkuri otsikon sisällä

    href ="">

    `Otsikko ankkurissa

    a {
    väri: sininen;
    }

    h1 {
    väri: vihreä;
    }

    Joka on sininen ja mikä vihreä?

    Tässä tapauksessa ensimmäinen rivi (ankkuri otsikon sisällä) on sininen, kun taas toinen on vihreä.

    Miksi?

    Ensimmäisessä esimerkissä

    tyyli on vihreä, joten kaiken sen sisällä tulisi olla vihreää. Mutta sitten sen sisällä on ankkuri, joka tyylittää sinisen tekstin. Ankkuri on tarkempi - lähempänä muotoiltavaa tekstiä -, joten sininen muotoilu vallitsee.

    Toisessa esimerkissä on päinvastoin. Elementillä tulisi olla sininen sisältö, mutta otsikko korvaa kyseisen tyylin, joka muuttaa sen sisällön vihreäksi.

    CSS-valitsimet

    Jokainen CSS-ilmoitus alkaa valitsimella. Tämä voi olla tyyppinen elementti, luokka ja tunnus tai useita muita asioita.

    On tapa kohdentaa mihin tahansa asiakirjan elementtiin - ei vain luokan ja tunnuksen, vaan sijainnin mukaan asiakirjassa, kontekstin ja muiden määritteiden mukaan.

    Valitsijoiden ilmoitukset voidaan myös yhdistää. Esimerkiksi:

    #container div {
    }

    Tämä valitsee kaikki elementit, jotka ovat #container-elementin sisällä.

    Tässä on joitain tärkeimmistä valitsimista ja valintamuodoista.

    • * - Valitsee kaikki elementit.
    • elementin nimi - Valitsee kaikki tietyn tyyppiset elementit.
    • .class-name - Valitsee elementit luokan nimen perusteella.
    • #id - Valitsee elementit tunnuksen perusteella.
    • elementti-nimi.luokan nimi - Valitsee tietyn tyyppiset elementit, jotka vastaavat luokan nimeä.
    • valitsin1, valitsin2 - pilkuilla erotetut valitsimet vastaavat kaikkia elementtejä, jotka joko valitsin1 tai valitsin2 osoittavat.
    • valitsin1 valitsin2 - yksi valitsin seuraa toista valitsinta, jossa on vain välilyönti, valitsee kaikki elementit, jotka vastaavat valitsinta2, jotka ovat elementin vastaavan valitsimen1 sisällä.
    • selector1>valitsin2 - Valitsee kaikki valitsinta 2 vastaavat elementit, jotka ovat valitsimen1 välittömiä lapsia.
    • [attribute] - hakasulkeissa oleva attribuutin nimi valitsee kaikki elementit, joilla on kyseinen ominaisuus, riippumatta sen arvosta.
    • [attribute = arvo] - Valitsee elementit, joilla on tietty attribuutti-arvo-pari.
    • [attribuutti ~ = merkkijono] - Valitsee elementit, joissa määritetty määritteiden arvo sisältää ilmoitetun merkkijonon.
    • valitsin: ensimmäinen lapsi - Valitsee elementit, jotka ovat vanhempien elementtien ensimmäinen lapsi. Tätä voidaan käyttää pääasiallisena p: esimerkiksi ensimmäinen lapsi (sivu) muotoilemaan sivun alkuosa.
    • valitsin :: ensimmäinen kirjain - Valitsee vastaavan elementin ensimmäisen kirjaimen. Voidaan käyttää luomaan drop-cap-tehosteita.
    • valitsin :: ensimmäinen rivi - Valitsee ensimmäisen rivin sopivassa elementissä.
    • input: focus - Tyylittää lomaketulon, kun siinä oli tarkennus.
    • a: leiju, a: aktiivinen, a: vieraili - tyylit ankkuroivat linkit vuorovaikutusjakson eri pisteisiin.

    Näiden lisäksi on paljon enemmän.

    CSS ja sivurakenne - laatikkomalli

    CSS-laatumalli selittää tapaa, jolla CSS näyttää ja sijoittaa lohkotason elementit.

    Mitkä ovat estoelementit?

    Lohkotason elementit ovat HTML-elementtejä, joilla on leveys ja korkeus ja (oletusarvoisesti) rivinvaihto ennen ja jälkeen. Ne edustavat sisältölohkoja. (Tämä on toisin kuin rivielementit, jotka edustavat tekstiväliä eivätkä oletusarvoisesti luo uusia rivejä.)

    On olemassa useita elementtejä, jotka ovat oletuksena lohkotason:

    • - Yhteystiedot.
    • - Artikkelin sisältö.
    • - Sivun sisältö.
    • - Äänentoisto.
    • - Pitkä ("estää") tarjous.
    • - piirtäminen kankaalle.
    • - Määritelmäkuvaus.
    • - Asiakirjajako.
    • - Määritelmä.
    • - Kenttäjoukko.
    • - Kuvan kuvateksti.
    • - Media (yleensä kuva), jolla on kuvateksti.
    • - Osion tai sivun alatunniste.
    • - Syöttömuoto.
    • ,

      ,

      ,

      ,

      ,
      - Otsikot.

    • - Osion tai sivun otsikko.
    • - vaakasääntö (jakoviiva).
    • - Sisältää tämän asiakirjan ainutlaatuisen keskeisen sisällön.
    • - Sisältää navigointilinkit.
    • - Sisältö, jota käytetään, jos komentosarjoja ei tueta tai poistetaan käytöstä.
      1. - Tilattu luettelo.
      2. - Lomakkeen lähtö.
      3. - Kappale.

      4. - Esimuotoiltu teksti.
      5. - Web-sivun osa.
      6. - Pöytä.
      7. - Pöydän alatunniste.
        • - Järjestämätön luettelo.
        • - Videosoitin.

        Voit myös aiheuttaa minkä tahansa elementin käyttäytymisen lohkotason elementtinä määrittämällä sille tyylinäytön: block;.

        Leveys ja korkeus

        Oletuksena lohkotason elementin leveys on 100% sitä sisältävästä lohkotason elementistä, mukaan lukien mahdolliset reunat, reunukset tai täyte. (Toisin sanoen koko elementti, mukaan lukien reuna, reunus ja pehmuste, mahtuu säiliön sisään.)

        Lohkotason elementin oletuskorkeus on kaiken sen sisällön korkeus sekä mahdolliset reunat, reunukset tai pehmusteet.

        Suunnitellessasi sivun asettelua haluat yleensä määrittää elementtien leveyden, mutta et niiden korkeutta. Tämä johtuu siitä, että näyttöikkunan leveys on kiinteä koko missä tahansa näytössä, mutta sivu voi vierittää ylös ja alas mitä tahansa korkeutta pitkin.

        Oudot asiat leveyden (ja korkeuden määrittämisessä, mutta et tee sitä niin usein) on, että määrittämäsi leveys ei ole elementin kokonaisleveys.

        Marginaalit, reunus ja pehmuste

        Elementin sisällön lisäksi kokonaisleveys ja kokonaiskorkeus määräytyvät kolmella muulla määritteellä:

        • marginaali - elementin ympärillä oleva alue.
        • reuna - viiva elementin kehän ympärillä.
        • pehmustus - tilaa vain elementin kehän sisällä.

        Kaikki taustailmoitukset (kuten tausta, taustaväri tai taustakuva) kattavat sisältöalueen, pehmusteen ja reunan. Marginaali ei näytä taustaa.

        .kenttä {
        leveys: 100%;
        taustaväri: # 66FF33; /* Limenvihreä*/
        }
        .sisällä {
        leveys: 100px;
        marginaali: 25 px;
        reunus: katkoviiva 15xx musta;
        pehmustus: 25 px;
        taustaväri: # 90acff;
        väri: # 002346;
        kirjasinpaino: lihavoitu;
        }

        class ="ala">
        class ="sisällä">
        Tämä on teksti sisällä. Huomaa, että se on sijoitettu kauemmas sisäreunasta. Tämän aiheuttaa pehmuste.

        # marginaali-täyttö-reuna. kenttä {
        leveys: 100%;
        taustaväri: # 66FF33; /* Limenvihreä*/
        }
        # marginaali-padding-border .inside {
        leveys: 100px;
        marginaali: 25 px;
        reunus: katkoviiva 15xx musta;
        pehmustus: 25 px;
        taustaväri: # 90acff;
        väri: # 002346;
        kirjasinpaino: lihavoitu;
        }

        Tämä on teksti sisällä. Huomaa, että se on sijoitettu kauemmas sisäreunasta. Tämän aiheuttaa pehmuste.

        Huomaa: Marginaali, reunus ja täyte lisätään CSS: n ilmoittamaan leveyteen. - Korkeus määräytyy sisällön perusteella. - Sisämarginaali työntää sen pois kentän vasemmasta reunasta, mutta sama ei pidä paikkaansa ylä- ja alaosaa. Tämä on CSS: n virka. Jos haluat työntää sisäelementin pois pakkauksen yläosasta, lisääisit pehmusteen sisältävään elementtiin. - Elementin vasemmalla ja oikealla puolella oleva marginaali vaikuttaa sen suhteeseen vanhempaan elementtiin JA sisaruselementteihin. - Elementin ylä- ja alareunan marginaali vaikuttaa vain sen suhteeseen sisaruselementteihin. - Taustaväri täyttää sisällön, tyynyn ja reunan alueen, mutta ei reunusta.

        Koska kokonaisleveys sisältää ilmoitetun leveyden ja myös reunusten, reunusten ja pehmusteiden leveyden, seuraava ilmoitus ei toimi:

        div {
        leveys: 100%;
        marginaali: 5 px;
        täyte: 15xx;
        }

        Jos teet jotain tällaista, huomaat, että laajenee sisältävän elementin oikean puolelle 40 pikseliä.

        Koska tässä esimerkissä ajatuksena näyttää olevan säiliön koko leveyden täyttäminen, oikea toimenpide olisi yksinkertaisesti jättää leveysilmoitus pois. Tämä saa elementin täyttämään vain säiliön leveys automaattisesti ilman ylivuotoa.

        div {
        marginaali: 5 px;
        täyte: 15xx;
        }

        Jos kuitenkin haluat elementin, joka vie vain puolet käytettävissä olevasta leveydestä, jotta saisit sarakkeita, sinun on tehtävä asia hieman eri tavalla.

        Kelluvat elementit

        Lohkotason elementtien oletuskäyttäytyminen on, että ne täyttävät koko säiliön leveyden ja luovat rivinvaihdon ennen itseään ja sen jälkeen. JOS sijoitat useita lohkotason elementtejä sarjaan, ne näkyvät vain suoraan sivulla alas, jokainen edellisen alapuolella:

        #container {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        }
        #container div {/ * Kohdistaa kaikki divs, jotka ovat #containerin lasten elementtejä. * /
        korkeus: 50px;
        }
        #red {
        taustaväri: punainen;
        }
        #blue {
        taustaväri: sininen;
        }
        #vihreä {
        taustaväri: vihreä;
        }

        id ="kontti">
        id ="punainen">
        id ="sininen">
        id ="vihreä">

        # div-stack .container {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        }
        # div-stack .container div {
        korkeus: 50px;
        }
        # div-stack .red {
        taustaväri: punainen;
        }
        # div-stack .blue {
        taustaväri: sininen;
        }
        # div-stack .green {
        taustaväri: vihreä;
        }

        Vaikka tekisimme jokaisen sisäisen tarpeeksi pieneksi, jotta he voisivat istua peräkkäin vieressä, rivinvaihto on silti olemassa.

        #container {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        }
        #container div {
        korkeus: 50px;
        leveys: 50px;
        }
        #red {
        taustaväri: punainen;
        }
        #blue {
        taustaväri: sininen;
        }
        #vihreä {
        taustaväri: vihreä;
        }

        id ="kontti">
        id ="punainen">
        id ="sininen">
        id ="vihreä">

        # div-pino-laiha .säiliö {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        }
        # div-pino-laiha .kontier div {/ * Kohde kaikkiin div-osiin, jotka ovat #containerin lasten elementtejä. * /
        korkeus: 50px;
        }
        # div-pino-laiha .red {
        taustaväri: punainen;
        }
        # div-pino-laiha .sininen {
        taustaväri: sininen;
        }
        # div-pino-laiha .vihreä {
        taustaväri: vihreä;
        }

        Jotta heidät voidaan istua vierekkäin, heidän on annettava "kellua". CSS: ssä ”kellua” tarkoittaa sallimaan muiden asiakirjan elementtien virtauksen kelluvan elementin ympäri. Lohkoelementti voidaan kellua vasemmalle, oikealle tai keskelle (keskusta on epätavallinen). Jos useita sisaruselementtejä asetetaan kelluvaksi, ne riviinvät vierekkäin marginaaliensa kanssa erotettuna.

        Jotta nämä kolme värillistä ruudullinen sivusto vierekkäin, meidän on vain lisättävä kellua: vasen tai kellua: oikea kaikille kolmelle.

        #container {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        }
        #container div {
        korkeus: 50px;
        leveys: 50px;
        kellua: vasen;
        }
        #red {
        taustaväri: punainen;
        }
        #blue {
        taustaväri: sininen;
        }
        #vihreä {
        taustaväri: vihreä;
        }

        id ="kontti">
        id ="punainen">
        id ="sininen">
        id ="vihreä">

        # div-float .container {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        }
        # div-float .container div {/ * Kohdistaa kaikki divs, jotka ovat #containerin lasten elementtejä. * /
        korkeus: 50px;
        }
        # div-float .red {
        taustaväri: punainen;
        }
        # div-float .blue {
        taustaväri: sininen;
        }
        # div-float .green {
        taustaväri: vihreä;
        }

        Ilmoitus:

        • Ensimmäinen värillinen lohko (#red) on astian vasemmalla puolella, jota seuraa #blue ja #green.
        • Heillä ei ole marginaalia, joten he ovat suoraan vierekkäin.
        • #Kontin sisäpuolella oleva pehmuste työntää lohkot alas ja pois vasemmasta yläkulmasta.

        Mutta - voi ei - mitä tapahtuu #container-elementin kanssa? Miksi värilliset lohkot roikkuvat siitä?

        Tässä on ongelma kelluvilla: kelluva elementti ei oletuksena vaikuta astiansa korkeuteen. Joten kontin korkeus määritetään seuraavien summien perusteella:

        • sen korkeusilmoitus, jos sillä on yksi (tällä ei ole) TAI sen kellumaton sisältö, jos sillä ei ole ilmoitettua korkeutta (tässä tapauksessa sillä ei myöskään ole)
        • pystysuora pehmuste (ylä ja ala)
        • pystysuorat reunat (ylä ja ala)
        • pystysuuntainen marginaali (ylä ja ala)

        #Kontin elementin sisäkorkeus on tässä tapauksessa nolla, ja kokonaiskorkeus on vain 2x sen pehmusteen kokoinen.

        Tämä on erittäin ärsyttävä ja hyvin yleinen ongelma. Ratkaisua (vähän hakkerointia) kutsutaan clearfix-ratkaisuksi. Tätä varten on useita vaihtoehtoja, mutta esimerkkeissä käytämme yksinkertaisinta, lisäämällä ylikuormitus: auto #konttimeen. Tämä ei toimi kaikissa selaimissa tai kaikissa yhteyksissä, mutta se toimii riittävän hyvin useimmissa selaimissa, jotta se sopii täällä oleviin esimerkkeihimme.

        Tässä on seurausta korjauskorjauksen lisäämisestä.

        #container {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        ylivuoto: automaattinen;
        }
        #container div {
        korkeus: 50px;
        leveys: 50px;
        kellua: vasen;
        }
        #red {
        taustaväri: punainen;
        }
        #blue {
        taustaväri: sininen;
        }
        #vihreä {
        taustaväri: vihreä;
        }

        id ="kontti">
        id ="punainen">
        id ="sininen">
        id ="vihreä">

        # div-float-fix .container {
        leveys: 400px;
        taustaväri: #eeeeee;
        täyte: 20 px;
        }
        # div-float-fix .container div {/ * Kohdistaa kaikki divs, jotka ovat #containerin lasten elementtejä. * /
        korkeus: 50px;
        }
        # div-float-fix .red {
        taustaväri: punainen;
        }
        # div-float-fix .blue {
        taustaväri: sininen;
        }
        # div-float-fix .green {
        taustaväri: vihreä;
        }

        Nyt, jos lisäämme marginaaleja, pehmusteita, sisältöä ja vähemmän kirkkaita värejä, näet kuinka tämä perusidea voidaan muuttaa normaaliksi sisältöksi + sivupalkin asetteluksi.

        #container {
        taustaväri: #eeeeee;
        ylivuoto: automaattinen;
        täyte: 20 px;
        leveys: 600px;
        }

        tärkein {
        kellua: vasen;
        taustaväri: #efefef;
        leveys: 300 kuvapistettä;
        täyte: 15xx;
        marginaali-oikea: 20px;
        }

        syrjään {
        kellua: vasen;
        taustaväri: #dedede;
        täyte: 15xx;
        leveys: 220px;
        }

        id ="kontti">

        Lorem Ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        Arcu metais, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputate neque eget ante tincidunt sodades. Quisque tehokkuus jatkaa muualle kuin muualle. Donec commodo, diam id sequat sooles, justo quam posuere libero, non fringilla ante dui id tortor. Sed-tehokkuus muualla luokittelemattomassa ipsum-pelletissä.

        arkisto

        • Toukokuuta 2015
        • Huhtikuuta 2015
        • Maaliskuuta 2015
        • Helmikuu 2015
        • Tammikuu 2015

        # yksinkertainen sivupalkki .säiliö {
        taustaväri: #eeeeee;
        ylivuoto: automaattinen;
        täyte: 20 px;
        leveys: 600px;
        }

        # yksinkertainen sivupalkin pää {
        kellua: vasen;
        taustaväri: #efefef;
        leveys: 300 kuvapistettä;
        täyte: 15xx;
        marginaali-oikea: 20px;
        }

        # yksinkertainen sivupalkki sivu {
        kellua: vasen;
        taustaväri: #dedede;
        täyte: 15xx;
        leveys: 220px;
        }

        Lorem Ipsum

        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur pretium, mi eu elementum ullamcorper, dui justo egestas turpis, sed auctor turpis tellus eget augue. Quisque vel malesuada erat. Vestibulum non felis et turpis iaculis iaculis.

        Arcu metais, finibus id dolor a, interdum lacinia lectus. Vestibulum vulputate neque eget ante tincidunt sodades. Quisque tehokkuus jatkaa muualle kuin muualle. Donec commodo, diam id sequat sooles, justo quam posuere libero, non fringilla ante dui id tortor. Sed-tehokkuus muualla luokittelemattomassa ipsum-pelletissä.

        arkisto

        • Toukokuuta 2015
        • Huhtikuuta 2015
        • Maaliskuuta 2015
        • Helmikuu 2015
        • Tammikuu 2015

        #### __Lisäosa

        s__

        Täydellisessä maailmassa jokainen HTML-asiakirjan elementti olisi semanttisesti merkittävä, liittyisi vain asiakirjan sisältöön eikä koskaan lisätty pelkästään esitystyyliin..

        Todellinen maailma ei valitettavasti ole kaukana täydellisestä. Asiat ovat parantuneet paljon paremmin viimeisen vuosikymmenen aikana, mutta on kuitenkin aikoja, jolloin joudut lisäämään vieraan elementin ilman syytä, paitsi että se tekee sivusta oikean.

        Useimmat blogit - luultavasti useimmat verkkosivustot - noudattavat tyypillistä mallia:

        • Otsikkoosa, joka kattaa sivun leveyden
        • Keskitetty sisältöalue, joka on jaettu kahteen sarakkeeseen:
          • 2/3 ensisijaisen sisällön leveydestä
          • Widget-sivupalkin leveys on 1/3
        • Alatunnisteosio, joka kattaa sivun leveyden.

        Ihanteellinen merkintä tälle asiakirjarakenteelle olisi:

        Valitettavasti siellä ei ole juuri mitään tapaa saada elementtejä istumaan kunnolla vierekkäin, elleivät ne voi kellua sisältävän elementin sisällä.

        Siksi tyypillisen blogin ulkoasun yleisin merkintärakenne näyttää todella seuraavalta:

        id ="kontti">

        Usein tarvitaan samanlaisia ​​säilytyselementtejä sivun oikean näyttämisen saamiseksi. Älä murehdi siitä - Web on yhtä paljon visuaalinen väline kuin kokoelma tekstipohjaisia ​​asiakirjoja.

        CSS-tekstin muotoilu

        CSS: ää käytetään kaikissa asiakirjan esittämisen näkökohdissa, mukaan lukien sekä sivurakenne että tekstin muotoilu. CSS: stä ja typografiasta voisi olla kokonainen kirja, mutta lyhyt johdanto keskeisiin käsitteisiin tekee tästä oppaasta.

        Cascade

        Kun ajatellaan CSS: n tekstin muotoilua, on erityisen tärkeää muistaa Cascading-tyylitaulukkojen kaskadiosa.

        Kun lisäät tyylin, joka vaikuttaa sisältöön (toisin kuin elementin muoto, koko tai sijoittelu), tyylit hiukan hirsivät asiakirjapuuta. Joten kaikki tyylit, jotka on sovellettu vaikuttamaan kaikkiin sisältöihin, kun taas kaikki tyylit, joita käytetään, vaikuttavat kaikkiin sen sisällöihin, mutta eivät sen ulkopuolelle.

        Tämän käytännöllinen merkitys on, että sinun tulisi rakentaa tyylitaulukko yleisestä erityiseen. Sinun tulisi yleensä asettaa yksi perus fontti, joka kattaa suurimman osan sisällöstäsi, ja sitten asettaa kaikki fontit, jotka poikkeavat siitä (kuten valikoissa tai painikkeissa), tiettyyn kohtaan, jossa ne ovat erilaisia.

        Kaikkien typografiaan liittyvien tyyli-ilmoitusten on oltava mukana yleisimmässä (puun korkeimmassa) kohdassa, jota siihen sovelletaan. Tämä auttaa välttämään tyylien päällekkäisyyttä.

        Tyylit

        Tekstin muotoilussa ja typografiassa tärkeimmät tyylilausekkeet ovat:

        font-perhe: Määrittää käytettävät fontit. : Paras käytäntö on julistaa fonttiluettelo, joka alkaa ensisijaisesta fontista ja varmuuskopioiden sarjasta ja päättyy yleiseen fonttiperheeseen. : Välilyöntejä sisältävät fontinimet on käärittävä lainausmerkeihin. : kirjasinperhe: Garamond, Georgia, "Times New Roman", serif;

        font-size: Määrittää tekstin koon. : Voi olla koko pikselinä (14 pikseliä), typografiset ems perustuvat vanhempien tekstin kokoon (1em), prosenttimäärä vanhempien tekstikokoon perustuen (115%), kuvaava koon nimi (pieni, keskikoko, iso) tai vertaileva kuvaus vanhemman tekstin koon perusteella (pienempi, suurempi). : fonttikoko: 14px;

        rivin korkeus: Määrittää tekstirivin korkeuden. : Tämän tulee yleensä olla suurempi kuin fonttikoko. Tekstirivi on yleensä keskitetty rivin korkeuden sisäpuolelle. : Rivin korkeus voidaan määrittää pikselinä, ems tai prosentteina. Se voidaan asettaa myös fonttikoon kertoimeksi; tämä tapahtuu jättämällä yksikkö- loppuliite. : linjan korkeus: 1,4;

        marginaali-pohja: Kappaleiden, otsikkojen, luetteloiden ja muiden typografisten elementtien alapuolella oleva marginaali vaikuttaa yleiseen luettavuuteen. : Tämä ominaisuus on asetettava jokaiselle asiaankuuluvalle elementille, ei dokumentille tai osalle. : Tyypillisesti marginaalin pohjan asettaminen yhtä suureksi viivan korkeudesta tuotti parhaat tulokset. : marginaali-pohja: 1.4em;

        väri: Tekstin oletusväri on musta. Voit halutessasi muuttaa tämän jonkin verran vähemmän karuksi. : väri: # 111111; : Linkkissä on myös joukko oletusvärejä, jotka osoittavat, onko niissä käyty, ja väreissä, jotka osoittavat niiden aktiivisen tilan. : Tyypillisesti oletuslinkin väri ei ole erityisen toivottava. Ankkurimerkinnän eri tilojen värin muuttamiseksi käytä: a: linkki (oletus), a: hover, a: vieraili ja a: aktiivinen. : a: leiju {väri: # 3399FF; }

        font-weight: fonttipaino on ominaisuus, joka säätelee, onko teksti lihavoitu vai normaalia. : Eritelmän mukaan voit käyttää numeerista arvoa painon asettamiseen erittäin tarkasti. Useimmat fontit tai selaimet eivät kuitenkaan tue tätä hyvin, eikä se ole yleinen käytäntö. : Tavallisin fonttipaino on yksinkertaisen lihavoinnin määrittäminen. : vahva {kirjasinpaino: lihavoitu; }

        font-style: Fonttityyliä käytetään osoittamaan kursivointityyppi. : Asiaankuuluvat arvot ovat normaaleja ja kursivoituja. (Kolmatta vaihtoehtoa, vino, käytetään harvoin.: Em {font-style: italic;}

        tekstikoriste: Tätä käytetään lisäämään rivi tekstin väliin: yli (yläviiva - harvoin käytetty), läpi (suoraviivainen - käytetty poistetulle tekstille) tai alle (alleviivattu - käytetään linkkien ja joskus otsikoiden yhteydessä) . : {teksti-koriste: alleviivattu; }

        tekstin muuntaminen: Tämän ominaisuuden avulla voit hallita tekstin isoja kirjaimia. : Asiaankuuluvat arvot ovat: isot kirjaimet (otsikkokirjaimet), isot kirjaimet (KAIKKI CAPS) ja pienet (kaikki pienet kirjaimet). : h3 {tekstimuunnos: iso kirjain; }

        font-variant: Tätä käytetään pienten kirjaimien määrittämiseen. Se asettaa kaikki sisällön pienet kirjaimet isoiksi kirjaimiksi pienemmällä fonttikokolla. : h1 {font-variantti: pienet kirjaimet; }

        @ font-face: Tämä ei ole elementille määritetty ominaisuus, mutta toimii CSS-asiakirjan valitsimena. Sitä käytetään uuden fonttiperheen määrittelemiseen. Tämän avulla suunnittelijat voivat määritellä haluamansa fontin sen sijaan, että luottavat vain asiakastietokoneiden järjestelmä fontteihin. : Fonttiperheen ominaisuus määrittelee uuden fontin nimen (jota käytetään muiden elementtien fonttiperheen ominaisuudessa), ja src-ominaisuus määrittää fonttitiedoston. : Kaikkia selaimia ei tueta kaikkia fonttitiedostomuotoja. Laajimmin tuetut muodot ovat TTF, OTF ja WOFF (mutta ei WOFF2). : Jos fontin muunnelmat (lihavoitu, kursivoitu) vaativat erilliset fonttitiedostot, voidaan asettaa useita @ font-face -ilmoituksia, jokaisella on erilainen src-ominaisuus ja niiden ominaisuuksia määrittelevät lisäominaisuudet (esimerkiksi - font-weight: lihavoitu) ;): @ font-face {font-perhe: myNewFont; src: url (myNewFont.woff;}

        Typografiavinkit

        Web-typografia on hankala. Tekstin oletusnäyttö useimmissa selaimissa on todella houkuttelematonta. Tekstin saaminen hyvältä ja luettavalta on ei-triviaali ongelma..

        Jos suunnittelet sivustojen typografiaa, pidä seuraavat vinkit mielessä.

        • Käytä tekstisivua, joka sisältää kaikki mahdolliset typografiset tyylit. Monet web-typografian suunnittelijat unohtavat kuvausluettelot (), lausekkeet (), otsikot jälkeen

          (

          ,

          ,
          ) ja muut harvoin käytetyt tyylit. Vaikka niitä käytetäänkin harvoin, he kuitenkin tottuvat. Muista sisällyttää sisäkkäiset luettelot, kuvat kuvateksteillä ja ilman niitä ja koodinäytteet (jos kirjoitat tekniikasta).
        • Huomaa, kuinka elementtien reunat ovat vuorovaikutuksessa keskenään ja kontekstinsa kanssa. Esimerkiksi on yleistä laittaa marginaali otsikoihin. Tämä saattaa olla järkevä joissain tilanteissa, mutta jos se on ensimmäinen elementti, tämä ei välttämättä näytä oikealta. Samoin kappaleen jälkeinen leikkausotsikko saattaa päätyä rivivälin päällekkäisyyteen luomalla enemmän visuaalista taukoa kuin halutaan.
        • Käytä viivakorkeuden arvoa skaalaussääntönä, jotta sivujen teksti pysyy vakiona. Fonttien, jotka ovat suurempia kuin globaali viivakorkeus (esimerkiksi otsikot), tulisi olla linjakorkeudensa asetettu moninkertaiseksi globaalista arvosta. Käytä myös rivikorkeuden arvoa elementtien alapuolella oleville marginaaleille ja sisäänrakennetuille (sisennetyille) osille.
        • On yleistä tunnistaa kappaleet kaksinkertaisella rivinvaihdolla (suoritetaan marginaalin alaosan ollessa asetettu samaan arvoon kuin viivan korkeus). On myös yleistä, että luetelmakohdat eivät ole luetelmakohdassa.
        • Listat näyttävät yleensä paremmalta asetettuina (marginaali-vasen) suunnilleen samalla etäisyydellä kuin linjan korkeus (tai niiden monikerta).
        • Kuvausluetteloissa on todella huono oletusmuoto. Ne näyttävät yleensä parhaimmilta, kun koko lista on asetettu, lihavoitu ja asetettu vielä enemmän.
        • Sivun ensisijaiseksi fonttikokoksi on asetettu 12px, mutta tämä ei ole kovin luettavissa. Harkitse 14 tai jopa 16 kuvapistettä globaaliksi peruskirjasinkokoksi (fonttiperheestäsi riippuen).
        • On erittäin yleistä, että fontin väri jätetään mustaksi (oletus), mutta yleensä hyvin tumma harmaa on houkuttelevampi ja luettavissa.
        • Linkit () ovat oletuksena sinisiä melkein jokaisessa selaimessa Internetin alusta lähtien. Vaikka haluat muuttaa linkkien väriä sopimaan tuotemerkkiisi (ja sinun pitäisi), sen pitäisi todennäköisesti olla sininen. Ole varovainen myös sinisen tekstin käyttämisessä muissa paikoissa, koska se saattaa ilmoittaa käyttäjille, että heidän pitäisi pystyä napsauttamaan tekstiä.
        • Samoin alleviivattu teksti on lähes universaali signaali siitä, että jotain voidaan napsauttaa. Muuta tätä yleissopimusta omalla vaarassasi.
        • Aikaisemmin se oli suositus välttää serif-fontteja verkossa ja käyttää vain sans serif-fontteja. Tämä oli hyvä neuvo, koska serif-fontit eivät näy niin alhaisen resoluution näytöissä. Tämä ei kuitenkaan ole enää huolenaihe useimmille ihmisille. Serif-fontin (kuten Georgia, Times tai Garamond) käyttö voi tehdä tekstistä helpommin luettavan.
        • Yleensä et halua sivulta enemmän kuin kolme kirjasinta:
          • Sisältö fontti, joka voi olla joko serif tai sans.
          • Valikko- ja navigointifontti, jonka tulisi yleensä olla sans serif ja joka voi olla sama kuin sisältö fontti.
          • Koodinäytteiden fontti (jos teet tällaista), jonka tulisi olla monospace fontti kuten Courier tai Console.
        • Tekstin "mitta" on merkkien lukumäärä rivillä. Yli 80 merkkiä pitkä mitta tulee lukukelvottomaksi. Useimmat asiantuntijat asettavat ihanteellisen mitan arvoon noin 65 merkkiä rivillä. Tämä on sisältöalueen leveyden ja fontin koon funktio.
        • Jos käytät @ font-face tuodaksesi oman kirjasimesi sivulle, testaa ehdottomasti kuinka se näyttää useilla selaimilla. Jotkut selaimet tuottavat tiettyjä fontteja huonosti. Lisää myös varmuuskopiot kirjasinperheilmoituksiin - et voi aina luottaa @ font-face toimimiseen kaikissa tilanteissa..

        CSS-animaatio

        CSS antaa sinun animoida HTML-elementtejä ilman Javascriptiä. Yksinkertaisten tehosteiden vuoksi tämä voi olla varsin kätevä. Se tekee nopeammin kuin vastaavat Javascript-sovelluksessa luodut tehosteet, ja sitä tuetaan jopa selaimissa, joissa Javascript on poistettu käytöstä.

        avainkehyksiä

        Animaatio määritetään CSS-valitsimella, jonka nimi on @keyframes. @Keyframes-ilmoituksella on nimi ja tyylisääntöjoukko animaation eri pisteille (avainkehyksille).

        @keyframes colorChange {
        alkaen {
        taustaväri: punainen;
        }
        {
        taustaväri: sininen;
        }
        }

        Yllä olevassa esimerkissä “colorChange” -animaatio saa elementin vaihtamaan taustavärin punaisesta siniseksi.

        Enemmän kuin väriä voidaan animoida. Kun @keyframes-sääntöjä käytetään asemien asettamiseen, aiheutunut elementti siirtyy paikasta toiseen.

        @keyframes moveLeft {
        alkaen {
        asema: suhteellinen;
        vasen: 100px;
        {
        asema: suhteellinen;
        vasen: 0px;
        }
        }

        Monipisteanimaatio voidaan myös määrittää käyttämällä prosenttimääriä.

        @keyframes moveAround {
        0% {
        yläosa: 0px;
        vasen: 0px;
        }
        25% {
        yläosa: 0px;
        vasen: 50px;
        }
        50% {
        yläosa: 50 kuvapistettä;
        vasen: 50px;
        }
        75% {
        yläosa: 50 kuvapistettä;
        vasen: 0px;
        }
        100% {
        yläosa: 0px;
        vasen: 0px;
        }
        }

        Tämä animaatio aiheuttaisi animoidun elementin siirtymisen yli, alas, taaksepäin ja sitten takaisin alkuperäiseen sijaintiinsa.

        Animaatioiden määrittäminen elementeille

        Animaatiot määritetään erikseen elementeistä, joihin ne vaikuttavat. Animaatiot määritetään @keyframes-ilmoituksissa yllä esitetyllä tavalla, ja niitä sovelletaan sitten elementteihin.

        Animaatioita käytetään elementteihin, joissa käytetään @keyframe-nimeä ja kuinka kauan animaation tulisi kestää. Muut määritteet voivat vaikuttaa myös animaatioon.

        @keyframes colorChange {
        alkaen {
        taustaväri: punainen;
        }
        {
        taustaväri: sininen;
        }
        }

        .väriä vaihtava {
        leveys: 100px;
        korkeus: 100px;
        animaation nimi: colorChange;
        animaation kesto: 5 s;
        }

        @keyframes colorChange {
        alkaen {
        taustaväri: punainen;
        }
        {
        taustaväri: sininen;
        }
        }

        @ -webkit-keyframes colorChange {
        alkaen {
        taustaväri: punainen;
        }
        {
        taustaväri: sininen;
        }
        }

        # värinvaihto-esittely .väriä muuttava {
        leveys: 100px;
        korkeus: 100px;
        animaation nimi: colorChange;
        animaation kesto: 5 s;
        -webkit-animaation nimi: colorChange;
        -webkit-animaation kesto: 5 s;
        }

        Jos et määritä animaation kestoa, animaatio ei toimi, koska oletusarvo on 0.

        Voit asettaa myös useita muita animaation ominaisuuksia:

        • animation-delay - määrittää viiveen animaation alkamiselle. Oletusasetus on 0, mikä tarkoittaa, että animaatio toistetaan heti. Yleensä merkitään sekunneissa (s), mutta voidaan myös merkitä millisekunnissa (ms).
        • animaatiosuunta - Määrittää, tuleeko animaation suorittaa normaalisti (oletus), taaksepäin vai vaihtako eteenpäin taaksepäin. Vaihtoehtoinen arvo toimii vain, jos animaation iteraation määrä on suurempi kuin 1.
        • animaation täyttötila - Määrittää, vaikuttavatko animaation tyylit ja miten niiden, ja miten animaatio ei ole käynnissä (kun se on valmis tai viive).
          • normaali - oletusasetus. Animaatiotyyleillä ei ole vaikutusta elementtiin, kun elementtiä ei toisteta.
          • eteenpäin - Viimeinen avainruudun tyyli (100%: iin tai 100%, jos animaatio ei toiminut käänteisesti) sovelletaan elementtiin.
          • taaksepäin - Elementtiin sovelletaan ensimmäistä avainryhmän tyyliä (alkaen tai 0%, jos animaatio ei toiminut käänteisesti).
        • animation-iteration-count - Määrittää, kuinka monta kertaa animaatio tulisi toistaa.
        • animaatio-ajoitus-toiminto - Määrittää animaation nopeuskäyrän:
          • helppous - Animaatio alkaa hitaasti, nopeuttaa ja loppuu sitten hitaasti.
          • easy-in - Animaatio alkaa hitaasti, nopeutuu ja loppuu täydellä nopeudella.
          • helppous - Animaatio alkaa täydellä nopeudella, mutta hidastuu loppuessa.
          • lineaarinen - Animaatio toimii täydellä nopeudella alusta loppuun.
        Selaimen tuki animaatioille

        Suurin osa suurimmista selaimista tukee CSS-animaatioita, mutta omituinen viritys selaimilla, jotka käyttävät WebKit-tekniikkaa (Safari, Chrome, Opera).

        Jotta voidaan varmistaa, että animaatiot toimivat näillä selaimilla, sinun on kopioitava @keyframes-ilmoitus ja animaation osoitusmääritteet erityisellä webkit-syntaksilla.

        / * Tämä koskee muita kuin webkit-selaimia. * /
        @keyframes moveLeft {
        alkaen {
        asema: suhteellinen;
        vasen: 100px;
        {
        asema: suhteellinen;
        vasen: 0px;
        }
        }

        / * Tämä koskee webkit-selaimia: Chrome, Safari ja Opera. * /
        @ -webkit-keyframes moveLeft {
        alkaen {
        asema: suhteellinen;
        vasen: 100px;
        {
        asema: suhteellinen;
        vasen: 0px;
        }
        }

        #animationSupportDemo {
        animaation nimi: moveLeft;
        animaation kesto: 4 s;
        -webkit-animaation nimi: moveLeft; / * Chrome, Safari ja Opera. * /
        -webkit-animaation kesto: 4 s; / * Chrome, Safari ja Opera. * /
        }

        (Yllä olevissa live-esimerkeissä nämä ylimääräiset tyylit on lisätty käynnissä olevaan demo-koodiin, mutta ei koodiesimerkkejä, vain sen helpottamiseksi.)

        Tämä saattaa vaikuttaa tarpeettomalta ja typerältä (koska se on), mutta se on ainoa tapa saada animaatiosi toimimaan noissa selaimissa.

        Milloin CSS-animaatioita käytetään

        Jos tarvitset erittäin dynaamisia elementtejä, jotka lentävät näytön ympäri kuin arcade-peli, CSS-animaatiot eivät oikeastaan ​​ole oikea tapa - se on Javascriptille sopivampi.

        CSS-animaatioita käytetään parhaiten sivun hienovaraisten parannusten tarjoamiseen. Joitakin esimerkkejä: kaavion palkkien täyttäminen - välilehden vetäminen leijuessa - elementtien lentäminen käyttäjänä vierittämällä sivua alas - hitaita ja hienovaraisia ​​taustavärin muutoksia - “pomppivia” painikkeita napsauttamisen kannustamiseksi

        CSS-animaation yhdistäminen Javascriptiin

        CSS-animaatiot alkavat joko heti tai tietyn viiveen kuluttua. Jos kuitenkin haluat laukaista CSS-animaation, kun jokin tapahtuma tapahtuu, voit asettaa animaation ”taukotilaan” CSS: ssä ja peruuttaa sen myöhemmin Javascriptin avulla. Animaation keskeyttäminen tehdään määritteellä animation-play-state.

        .pausedAnimation {
        animaation nimi: esimerkki;
        animaation kesto: 5 s;
        animaatio-toistotila: keskeytetty;
        -webkit-animaation nimi: esimerkki;
        -webkit-animaation kesto: 5 s;
        -webkit-animation-play-tila: keskeytetty;
        }

        Animaatio-toistotilan arvo, kun keskeytyksettä on käynnissä. Tätä voidaan manipuloida Javascriptissa:

        [elementti] .style.animationPlayState = "käynnissä"

        CSS oikeassa maailmassa

        Verkkokehityksen ja suunnittelun todellisessa maailmassa hyvin harvat kehittäjät istuvat HTML-asiakirjan ja tyhjän CSS-tiedoston kanssa ja alkavat määritellä tyylejä tyhjästä. (Vaikka sen tekeminen voi varmasti olla hauskaa.)

        On olemassa joukko tyypillisiä "parhaita käytäntöjä", joita CSS-suunnittelijat yleensä noudattavat työstään helpottamiseksi ja johdonmukaisuuden lisäämiseksi.

        CSS palauttaa

        Kaikkien HTML-elementtien oletusasetukset on määritetty selaimessa. Jokaisella selaimella on hiukan erilaiset oletustyylit. Tämä tarkoittaa, että yksi asiakirja, jolla on yksi tyylitaulukko, voi näyttää erilaiselta eri selaimissa. (Tukea ja yhteensopivuutta lukuun ottamatta.)

        ”CSS-palautus” on joukko tyylejä, jotka voidaan sijoittaa CSS-tyylitaulukkoon ennen kuin muut tyylit julistetaan. CSS-vastaus tarjoaa yhteisen perustan tyylien lisäämiselle kaikille selaimille.

        CSS-nollauksia käytetään myös HTML5-elementtien oletusnäyttötyylien asettamiseen, joilla ei ehkä ole oletusnäyttöjä vanhemmissa selaimissa - elementtejä kuten ja .

        CSS: n nollausmalleja on useita. Tunnetuin on Eric Meyerin luoma.

        / * http://meyerweb.com/eric/tools/css/reset/
        v2.0 | 20110126
        Lisenssi: ei mitään (julkinen)
        * /

        html, runko, div, span, appletti, objekti, iframe,
        h1, h2, h3, h4, h5, h6, p, blockquote, pre,
        a, abbr, lyhenne, osoite, iso, siteerata, koodi,
        del, dfn, em, img, ins, kbd, q, s, samp,
        pieni, lakko, vahva, sub, sup, tt, var,
        b, u, i, keskusta,
        dl, dt, dd, ol, ul, li,
        kenttäjoukko, muoto, tarra, selite,
        taulukko, kuvateksti, tbody, jalka, thead, tr, th, td,
        artikkeli, sivu, kangas, yksityiskohdat, upota,
        kuva, kaavio, alatunniste, otsikko, ryhmä,
        valikko, navigointi, lähtö, rubiini, osio, yhteenveto,
        aika, merkki, ääni, video {
        marginaali: 0;
        täyte: 0;
        reuna: 0;
        fonttikoko: 100%;
        fontti: periä;
        pystysuunnassa: perustaso;
        }
        / * HTML5-näyttöroolin nollaus vanhemmille selaimille * /
        artikkeli, sivu, yksityiskohdat, kuvio, kuva,
        alatunniste, otsikko, ryhmä, valikko, navigointi, osio {
        näyttö: estää;
        }
        vartalo {
        linjan korkeus: 1;
        }
        ol, ul {
        luettelotyyli: ei mitään;
        }
        blockquote, q {
        lainaukset: ei;
        }
        blockquote: ennen, blockquote: jälkeen,
        q: ennen, q: jälkeen {
        sisältö: '';
        sisältö: ei mitään;
        }
        pöytä {
        rajan romahtaminen: romahtaminen;
        reunaväli: 0;
        }

        CSS-esikäsittelyt

        Kuvittele, että määrität värisarjan verkkosivustosi suunnitteluun ja haluat käyttää niitä eri paikoissa koko CSS: n alueella.

        Jos lisäät toisen värin toissijaisiin otsikoihin, joita teet tekijänoikeusilmoitukseen (ja niin edelleen), päädyt monistamaan väri-ilmoituksen useissa eri paikoissa.

        Mitä tapahtuu, kun haluat muuttaa sitä?

        Entä asteikolla tekstiä? Olet asettanut oletustekstin koon 12 pikseliä, ja jokainen otsikkoko on kyseisen koon tietty monikerta, jotta muodostuu yhtenäinen kokojoukko. Mitä tapahtuu, kun muutat oletuskokoa?

        CSS on deklaratiivinen kieli - se vaatii jokaisen yksittäisen ominaisuuden ja arvon määrittämisen, eikä asioita helpota muuttujia, toimintoja tai laskelmia.

        Samoin PHP (ja muut kielet) helpottavat HTML: n tulostamista joutumatta toistamaan sisältöä jokaisella sivulla. CSS-esiprosessorit antavat sinun sisällyttää muuttujat, funktiot ja muut ohjelmointirakenteet tyylitaulukoihin..

        Tämä helpottaa värimallien, koon suhteiden ja muun tyyppisten toistuvien ilmoitusten määrittämistä.

        Kaksi suosituinta CSS-prosessoria ovat: Vähemmän - Twitter Bootstrapin käyttämä - Sass - Ruby on Rails, Jekyll ja monet muut Ruby-pohjaiset kehitystyökalut.

        Yleensä kehittäjät kirjoittavat tyylitaulukonsa Less- tai Sass-tiedoissa ja kääntävät sitten CSS: ään ennen sivuston käynnistämistä. On myös asiakaspuolen (selaimen sisäisiä) kääntäjiä, jotka on kirjoitettu Javascriptillä, mutta ne käyttävät paljon resursseja ja ovat yleensä vain kehitysvaiheessa.

        Tässä vaiheessa on erittäin epätavallista, että ammattimainen web-kehittäjä ei käytä Lessiä tai Sassia.

        Tämä opas ei voi olla johdanto kumpaankaan näistä työkaluista, joten rohkaisemme sinua vain oppimaan lisää itse.

        Vastuullinen suunnittelu

        Oli aika, jolloin voitte olla varmoja siitä, että tiesit, minkä tyyppisellä näytöllä sivustosi kävijät aikovat katsella sivusi: työpöytämonitorilla, joka on yksi kourallisista oletuskokoista.

        Nuo päivät ovat kauan poissa.

        Käyttäjät voivat katsella sivustosi millä tahansa useista laitteista ja näytön kokoista: matkapuhelin, minitabletit, tabletit, kannettavat tietokoneet, pöytätietokoneet, televisiot.

        On melkein mahdotonta kohdistaa kaikkia näitä erilaisia ​​näytön kokoja erikseen, ja et voi yksinkertaisesti sivuuttaa niitä.

        Saatat ajatella, että sivustosi demografiset tiedot näkyvät todennäköisemmin työpöydällä, mutta tuskin todennäköisesti pidä paikkaansa missään tilanteessa. Yli 60% Internet-liikenteestä tulee mobiililaitteista. Sellaisen verkkosivuston käyttäminen, jolla on huono mobiilikokemus, tulee haittaa yrityksellesi.

        Lisäksi Google on alkanut muuttaa hakutuloksia sen perusteella, onko sivustot optimoitu mobiililaitteille. Lisääntyvästi, jos et näytä hyvältä mobiililaitteissa, kukaan ei näe sinua muutenkaan.

        Ratkaisu tähän ongelmaan on Responsive Design.

        Responsiivinen suunnittelu on lähestymistapa sivustosuunnitteluun - filosofia - ei työkalu tai ohjelma. Se on tapa jäsentää sivumerkinnät ja CSS niin, että sivuelementit konfiguroituvat uudelleen asianmukaisesti erikokoisissa ikkunoissa.

        Responsiivisen web-suunnittelun kolme pilaria ovat:

        Nestemäiset ruudukot: Nestemäiset ruudukot sisältävät sivuruudukkojen jakamisen prosenttimäärien, ei absoluuttisten pikseleiden sijaan. Saatat esimerkiksi olla pääsisältösarake, joka kattaa 70% näytöstä, ja sivupalkkisarake, joka kattaa 30%. Kun näytön koko kasvaa tai pienenee, ruudukko myös laajenee tai kutistuu.

        Nestemäiset kuvat: Kuvien ei tulisi koskaan olla leveämpiä kuin näyttö, jolla ne näytetään, mikä tarkoittaa, että kuvien ei tulisi koskaan olla leveämpiä kuin niitä sisältävä ruudukkoelementti. Helpoin ratkaisu tähän on asettaa kuvien enimmäisleveys 100%: iin. img {max-leveys: 100%; }

        Mediakyselyt: Mediakyselyt ovat hieman monimutkaisempia. Niiden avulla CSS voi kohdistaa tiettyihin näyttötyyppeihin ja -kokoihin ilmoittaen sääntöjä, joita sovelletaan vain tietyissä olosuhteissa. Mediakyselyjen avulla voit saada pääsisältösi ja sivupalkin näyttämään vierekkäin suuremmilla näytöillä ja saat ne pinoamaan toistensa päälle pystysuunnassa pienemmillä näytöillä. Mediakyselyjä voidaan käyttää myös piilottamaan tai näyttämään tiettyjä elementtejä, jotka olisivat enemmän tai vähemmän hyödyllisiä erilaisissa tilanteissa, samoin kuin muuttamaan esimerkiksi kirjasinkokoja tai jopa vaihtamaan eri kuvia.

        Reagoiva web-suunnittelu perustuu yksinkertaisiin konsepteihin, mutta sen varsinainen toteuttaminen - yrittää saada se oikein niin monissa erilaisissa tilanteissa, eri näytön kokoisilla, laitetyypeillä ja selaimilla - on itse asiassa erittäin monimutkainen ja vaikea.

        Tästä syystä ja muista syistä monet nykyään työskentelevät suunnittelijat eivät yritä ratkaista näitä ongelmia itse, vaan päättävät käyttää käyttöliittymäkehystä.

        Käyttöliittymäkehykset

        CSS: n koodaamisessa sivustosuunnitteluun on ajateltava paljon asioita, ja tämä lyhyt johdanto koski vain vähän sitä.

        • Reagoivan verkkorakenteen saaminen toimimaan kaikissa selaimissa ja laitteissa.
        • Suunnitellaan sopivat mediakyselyt ja määritetään optimaaliset näytön leveyden väliajat.
        • Typografia, joka on kaunis ja helppo lukea.
        • Muotojen näyttäminen jopa kohtuullisen kohtuullisilta, puhumattakaan kauniista ja käyttäjäystävällisistä.
        • Tyylipöydät näyttämään siltä kuin ne eivät ole vuodesta 1997 lähtien.
        • Siro huonontuminen vanhemmille selaimille.
        • Muista käyttää kaksoismuotoilusääntöjä tietyille -webkit-ominaisuuksille (ja varmista, että kirjoitat saman säännön samalla tavalla joka kerta).
        • CSS: n ja Javascriptin käyttö oikealla tavalla.

        Monet näistä asioista ovat yksinkertaisia ​​“kattilalevy” -koodaustehtäviä, jotka vievät aikaa uusien mallien ja ominaisuuksien koodaamiseen, ja monet ovat aivan liian monimutkaisia ​​riskittääkseen “käsikoodauksen” jokaisessa projektissa. Kukaan ei halua käyttää 50% tai enemmän kehitysajasta vianetsinnässä peruskoodia - kehittäjät haluavat kehittää.

        Näistä syistä ja seuraten samanlaista suuntausta sovelluskoodien kehittämisessä, yhä useammat kehittäjät ovat siirtymässä käyttöliittymäkehyksiin.

        Käyttöliittymä tarjoaa yhden tai useamman HTML-asiakirjarakenteen ja täydellisen CSS-tyylitaulukon, joka käsittelee joitain tai kaikkia yllä lueteltuja perustarpeita. Tämä vapauttaa kehittäjät keskittymään todellisiin suunnittelupäätöksiin sen sijaan, että yritetään saada mediakyselyjä toimimaan kunnolla.

        Sovelluskehityskehysten tapaan mahdollisuuksia on laaja. Jotkut kehykset määrittelevät paljon sisustuselementtejä, mukaan lukien värit ja painikkeiden muodot. Toiset tarjoavat yksinkertaisesti minimaalisen reagoivan ruudukon. Jotkut kehykset ovat erittäin muokattavissa, ja toiset tarjoavat yhden koon sopivuuden tai ei-lähestymistavan. Jotkut sisältävät Javascriptin interaktiivisuuden, toiset eivät.

        Jotkut nykyisin suosituimmista käyttöliittymäsuunnittelukehyksistä ovat:

        • Bootstrap - Twitterin kehitysryhmältä Bootstrap suunniteltiin nopeuttamaan web-sovellusten prototyyppien laatimista ja kehittämistä. Se tarjoaa erinomaisen muodon ja interaktiivisuuden käyttöliittymän ja rohkea, erottuva muotoilu. Monet ihmiset valittavat, että se luo turvonneet merkinnät (se tekee), koska kokemattomia käyttäjiä kannustetaan lisäämään tyyliluokka HTML: ään. Siitä huolimatta se tarjoaa loistavan työkalun kaikkien prototyyppien nopeaan prototyyppien muotoiluun.
        • Pure.css - CSS-kehysosien modulaarinen työkalupakki, jota voidaan käyttää erikseen tai kokonaisuutena.
        • Säätiö - Laskuttaa itseään "maailman edistyksellisimmäksi reagoivaksi käyttöliittymäksi", monien mielestä säätiö on kuin Bootstrap ihmisille, jotka välittävät hyvästä merkinnästä.
        • Skeleton - Skeleton on ”kuollut yksinkertainen” CSS-kehysteline, joka tarjoaa reagoivan ruudukon, puhtaan typografian ja yleensä yleensä minimaalisen suunnittelun. Sen on tarkoitus olla ”lähtökohta, ei kehys”.

        Näiden lisäksi on paljon enemmän, ja uusia kehitetään jatkuvasti. Lisäksi on olemassa yksittäisiä kappaleita - CSS-katkelmia -, jotka voidaan koota räätälöityyn kehykseen. Voit esimerkiksi yhdistää yksinkertaisen nesteverkotyökalun typografisen kirjaston kanssa ja käyttää kolmatta työkalusarjaa lomakkeisiin.

        CSS-kehykset - kuten ohjelmistokehityskehykset - ovat tie eteenpäin monimutkaiselle web-suunnittelulle ja -kehitykselle. Ei ole mitään järkeä keksiä pyörää uudelleen tai koodata sama ratkaisu jokaiseen uuteen projektiin.

        Silti - saadaksesi kaiken hyödyn CSS-kehyksestä, sinun on ymmärrettävä, kuinka CSS toimii ja miten se toimii HTML: n kanssa.

        CSS on olennainen osa HTML: tä

        CSS - Cascading Style Sheets - on suunnittelun ja visuaalisen esityksen kieli verkossa. HTML-dokumentti on vain kokoelma sisältösolmuja, mutta CSS kertoo selaimelle, kuinka sisältö esitetään käyttäjälle.

        Kuten HTML, myös CSS: ssä on rakenteellisia näkökohtia ja tekstitasoisia näkökohtia. CSS: ää voidaan käyttää myös dynaamisten animaatioiden ja reagoivien asettelujen luomiseen.

        Nykyaikaisen sivustosuunnittelun erittäin monimutkaisuuden vuoksi - mikä johtuu suurelta osin selainlaitteiden ja näyttökokojen moninaisuudesta - sivustosuunnittelun on oltava reagoiva. Toisin sanoen sen on toimittava minkä tahansa kokoisessa tai tyyppisessä laitteessa - sivun on vastattava ympäristöönsä.

        Useiden kehittäjien on vaikea ja vaivalloista varmistaa, että sivustosuunnittelu toimii niin monissa erilaisissa olosuhteissa ja että käsitellään useita kilpailevia etuja, ja useimmat kehittäjät ovat ottaneet käyttöön CSS-kehykset..

        Kuten sovelluskehityskehys, myös CSS (tai “käyttöliittymä”) -kehykset tarjoavat lähtökohdan uuden sivustosuunnittelun kehittämiselle. Ne tarjoavat rakenteen, ohjeet ja lausunnon sivun asettelusta.

        CSS-kehykset voivat antaa lähes kaikille mahdollisuuden luoda reagoivia, toimivia verkkosivustoja, mutta vain joku, jolla on oma CSS: n ja HTML: n ymmärtämisen syvyys, voi hyödyntää sitä parhaiten..

        JavaScript ja HTML

        Tässä osassa esitellään Javascript, nykyaikaisimpien selainten sisäänrakennettu skriptikieli. Keskitytään siihen, miten Javascript toimii HTML: n ja selaimen kanssa, samoin kuin käytännön vinkkejä JavaScriptin käyttämiseen kehittäjänä. Käsiteltäviä aiheita ovat asiakirjaobjektimalli, JavaScript-kirjastot ja JavaScript-sovelluskehykset. Tämä osa ei ole JavaScript-opetusohjelma.

        Mikä on JavaScript

        JavaScript on skriptikieli, joka on rakennettu (melkein) jokaiseen selaimeen. Sitä käytetään dynaamisen interaktiivisuuden ja komentosarjojen lisäämiseen verkkosivuille. (Sitä voidaan käyttää myös palvelinpuolella yhdessä työkalujen, kuten Node.js, kanssa, mutta se ei ole tässä painopiste.)

        JavaScript on täysin varusteltu ohjelmointikieli, joten kaikki on mahdollista. Se on kuitenkin suunnattu erityisesti HTML-asiakirjojen vuorovaikutuksen ja manipuloinnin tarpeisiin.

        ECMAScript

        Jos työskentelet lainkaan JavaScriptin kanssa, törmäät hyvin omituisella nimellä ”ECMAScript”. Tämä on JavaScripiptin "virallinen" nimi.

        Kielen vakioeritelmää ylläpitää Ecma-niminen organisaatio, joka aiemmin oli Euroopan tietokonevalmistajien liitto. Sittemmin he ovat vaihtaneet nimensä yksinkertaisesti ”Ecma”, joka ei ole enää lyhenne mistään.

        Jokainen selain toteuttaa ECMAScript-standardin hiukan eri tavalla (ja Microsoft menee niin pitkälle, että kutsuu niiden käyttöönottoa JScriptiksi Javascriptin sijasta). Joten jotkut ihmiset käyttävät ”ECMAscriptiä” viitatakseen nimenomaisesti kielen vakiomuotoon, ei mihinkään selaimiin rakennettuihin murteisiin tai johdannaisiin.

        JavaScript ja Java

        Vain niin, ettei siinä ole mitään sekaannusta - JavaScriptillä ei ole todellista suhdetta Javaan. Java oli uusi ja trendikäs kieli, kun JavaScriptiä kehitettiin ensimmäisen kerran, ja alkuperäinen ajatus oli, että JavaScripti perustuisi Javaan - siis nimi. JavaScriptin ei kuitenkaan tullut perustuvan Javaan ollenkaan, ja kahden kielen välillä on nimenomaisesti hyvin vähän yhtäläisyyksiä.

        Asiakirjaobjektimalli

        Yksi tärkeimmistä asioista, jotka ymmärretään, jos haluat saada JavaScriptin käsitteen hyväksi, on Document Object Model.

        Asiakirjaobjektimalli on käsitteellisesti hyvin samankaltainen kuin aiemmissa osioissa kuvattu asiakirjapuurakenne - itse asiassa se viittaa olennaisesti samaan asiaan.

        DOM on API (Application Programming Interface), jolla Javascript-koodi on vuorovaikutuksessa HTML-asiakirjan kanssa. Kun selain renderoi asiakirjan, selain ei vain näytä lähdekoodia, johon on liitetty joitain lisätyylitietoja. Selain on lukenut lähdekoodin ja luonut näkymän sen perusteella. Jokainen asiakirjan elementti on muunnettu esineeksi (ohjelmoinnin kannalta), jonka ominaisuuksilla ja menetelmillä on pääsy Javascriptiin.

        DOM-objektin määritteet sisältävät HTML-elementin ilmoitetut (ja ilmoitettavat) määritteet (kuten luokka, tunnus ja nimi), elementin CSS-tyyli ja itse elementin sisältö. Jokaiseen DOM-objektiin liittyvät menetelmät sisältävät toimintoja minkä tahansa näiden määritteiden muuttamiseksi.

        Selaimen renderoitu verkkosivu on asiakirjaobjektimallin suora näkymä. Tämä tarkoittaa, että jos DOM muuttuu muutenkin (esimerkiksi - minkä tahansa elementin määritteet muuttuvat), näkymä muuttuu myös. Tämän avulla JavaScript voi päivittää tai muuttaa verkkosivun sisältöä joutumatta päivittämään tai lataamaan sivua uudelleen.

        JavaScriptillä on myös sovellusliittymiä useimpiin selaintoimintoihin, joten se voi esimerkiksi lukea asiakirjan nykyisen tilan, laukaista päivityksiä, saada selainikkunan leveyden ja muuttaa selainikkunan kokoa.

        Javascriptin käyttäminen

        Tämä ei ole JavaScript-opetusohjelma. Tässä osiossa yritetään tarjota hyödyllistä kontekstia vain HTML-kehittäjille, jotka käsittelevät JavaScriptiä.

        Sisältää JavaScriptin sivulle

        Aivan kuten CSS, JavaScript voidaan sisällyttää verkkosivulle kahdella tavalla - sulautetut skriptit ja linkitetyt resurssit.

        Upota skripti sisällyttämällä JavaScript-koodi tunnisteisiin vain.

        funktio changeColor (toChange, newColor) {
        document.getElementbyId (toChange) .style.backgroundColor = newColor;
        }
        </ script>

        Jos haluat sisällyttää erillisen JavaScript-tiedoston HTML-dokumenttiin, linkitä se elementtiin.

        type ="text / javascript" src ="app.js">

        JavaScript-tiedoston URL (suhteellinen tai täysin määritelty) sijoitetaan src-määrite. Tyyppiominaisuutta ei tarvita HTML5: ssä ehdottomasti, mutta se on hyvä sisällyttää sekä taaksepäin että (mahdollisesti) yhteensopivuuteen. Lisäksi, jos sivulla on useita elementtejä, ei ole huono idea antaa niille jokaiselle yksilöivä id-määritte.

        Yleensä pidetään parempana sisällyttää JavaScripti erillisenä tiedostona eikä upotettuna sivulle. Tämä pitää toiminnallisuuden (JS) erillään sisällöstä (HTML). Tästä yleisestä politiikasta on kuitenkin käytännön poikkeuksia. Esimerkiksi, on tyypillinen käytäntö sisällyttää seurantakoodi (kuten Google Analyticsin tarjoama JS-katkelma) suoraan sivulle.

        Mihin laittaa JavaScript

        Kaksi yleistä paikkaa JavaScriptin sisällyttämiseksi sivulle ovat ja alapuolella .

        Linkkien sijoittaminen JavaScript-tiedostoon asiakirjan asiakirjassa on hyvä semanttinen järki - se on skripti, jolla on vaikutus koko sivulle, joten se kuuluu asiakirjan muihin vastaaviin elementteihin .

        Koska sivun lataaminen keskeytetään, kun JavaScript-tiedostot noudetaan ja jäsennetään, tunnisteiden asettaminen sivustoon on perinteisesti paheksutettu. Tyypillinen ohje on sijoittaa ne viimeisenä elementtinä heti .

        Tämä on edelleen hyvä neuvo. Siellä on kuitenkin vääntö neuvoihin: on nyt tapa sijoittaa elementtejä asiakirjaan aiheuttamatta sivun hahmottamista. HTML5: stä alkaen tunniste sisältää attribuutin, jolla on merkintä async. Jos lisäät async-määrite skriptitunnisteeseesi, sivu ei lopeta renderointia, ja JS jäsennetään ja suoritetaan asynkronisesti (ts. Erillisessä säikeessä).

        type ="text / javascript" src ="app.js" async>

        Tämän pitäisi nopeuttaa koko sivun lataamista ja renderointia. Asynkroninen lataaminen ja jäsentäminen voi kuitenkin aiheuttaa ongelmia. Jos datayhteys on hidasta tai jos asiakaskoneen virta on erityisen heikko, se saattaa silti hidastaa sivun renderointia.

        Jos olet huolestunut hitaiden yhteyksien ja vähätehoisten laitteiden tehottomuuksien poistamisesta, voi silti olla järkevää sijoittaa tunnisteesi asiakirjan alaosaan..

        JSON

        Java-osajoukko, jota käsiteltiin semanttisen HTML-osion kohdissa, on JSON - JavaScript Object Notation.

        JavaScript on oliokeskeinen kieli, joka tarkoittaa (muun muassa), että yksittäiset esineet (sanan todellisessa merkityksessä) voidaan koodata tietokohteiksi (sanan ohjelmointitarkoituksessa). Esimerkiksi blogiteksti (”todellisen maailman” objekti) voidaan koodata JavaScript-objektiin:

        {
        "otsikko" : "Lorem Ipsum ja All That Jazz",
        "kirjailija" : "Adam Wood",
        "sisältö" :
        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed mauris metus, euismod non sooles eu, molestie congue nibh. Nunc eu dignissim est. Donec ei arvioi sapien rutrum imperdiet. Nunc vitae libero nec velit porta pulvinar vitae ut sapien. Aliquam seurauksena orci eget libero blandit semper. Aenean malesuada risus muualle luokittelematon volutpat dapibus. Aliquam istuu amet bibendum enim. Jousitus faucibus eratissa. Proin quis facilisis nisl. Vivamus sit amet enim elit. Aliquam nisl sapien, sagittis vitae nisi, muualle luokittelematon, vulputate effeitur urna. ”,
        }

        Kuten semanttisen merkinnän yhteydessä näimme, JSON: ää voidaan käyttää koodaamaan sivun sisältöä koskevia tietoja Semanttisen merkinnän sovellusliittymänä. Tästä on apua Googlesin indeksoinnissa.

        Theres on myös toinen tärkeä käyttö JSON - AJAX: lle.

        AJAX

        AJAX on suunnittelumalli (ei erityinen tekniikka), jossa JavaScript tekee asynkronisia HTTP-pyyntöjä ja sallii tuoreiden tietojen asettamisen verkkosivulle ilman, että sivua tarvitsee ladata uudelleen..

        AJAX tarkoitti alun perin ”asynkronista JavaScriptiä ja XML: ää”, koska alun perin yleisin tiedonsiirtokieli tämäntyyppiselle suunnittelulle oli XML. JSONista on kuitenkin tullut yleisin kieli, koska se on kevyempi, joustava, JavaScriptin kotoisin ja helpompi lukea. (Valitettavasti ”AJAJ” ei ole kovin tarttuva, joten vanha nimi on juuttunut.)

        AJAX-kuviolla ei ole mitään järkeä useimmilla sivuilla, mutta verkkosovelluksissa (kuten esimerkiksi sähköposti) se voi tehdä kaiken muutoksen maailmassa.

        AJAX on nimeltään ”asynkroninen JavaScript”, koska JS-koodi soittaa palvelimelle muina aikoina kuin sivun lataamisen aikana (jolloin selain yleensä soittaa palvelimelle). Käyttäjän toimien tai kuluneen ajan perusteella AJAX-tyylinen verkkosovellus lähettää pyynnön palvelimelle lataamatta sivua uudelleen. Tämän vastauksen tietoja käytetään sitten DOM: n (ja siten käyttäjän näkymän) päivittämiseen lataamatta uudelleen.

        Tämän tyyppistä mallia voidaan käyttää (esimerkiksi) sähköposti- tai chat-sovelluksessa uusien viestien lähettämiseen ja hakemiseen. Sosiaalisen verkostoitumisen sivustot lisäävät sitä uusiin viesteihin, ja jopa jotkut blogit lisäävät sitä vasta julkaistuun sisältöön sivulle.

        JSON on ihanteellinen tietomuoto tämäntyyppisille käyttötapauksille, koska se on JavaScriptin kotoisin. Toisin kuin XML, joka on selattava JavaScriptiin selaimen ymmärtämiseksi, JSON on jo kohdekielellä.

        Lisäksi, koska JSON voi olla JavaScript-tiedoston ainoa sisältö (jolla voi olla millä tahansa verkkotunnuksella src-URL-osoite), JSON: ää voidaan käyttää välittämään alkuperien välisen lukituksen vaikeudet. Tyypillisesti selaimet estävät verkkosivustoja tekemästä pyyntöjä ja vastaanottamasta tietoja muilta kuin ensisijaisen asiakirjan toimialueilta. JavaScriptiä (kuten CSS: ää ja kuvia) kuitenkin käsitellään erillisenä resurssina, joka voi tulla mistä tahansa. AJAX-mallin JSON-toteutuksella ristin alkuperäpyyntö voidaan ”naamioida” resurssien sisällyttämiseksi.

        JavaScript oikeassa maailmassa

        jQuery

        JavaScriptin syntaksi voi olla toisinaan vähän sanallista (ja räikeää), ja monet hyvin yleiset toiminnot vaativat runsaasti “kattilalevy” -koodia.

        Tästä syystä melkein kaikki JS-kehittäjät käyttävät JavaScript-kirjastoa nimeltä JQuery. JQuery tarjoaa tiiviit sovellusliittymät useille yleisille käyttötapauksille, kuten asiakirjan kulkeminen, DOM-manipulointi ja AJAX.

        Suurimmalla osalla ohjelmointikieleistä on ”vakiokirjasto”, ydinjoukko kielilaajennuksia, jotka automatisoivat tai abstraktit yleisimmät asiat, jotka ohjelmoijien on tehtävä kielellä. JavaScriptillä ei ole virallista vakiokirjastoa. Vaikka on myös muita kilpailevia projekteja, joilla on omistettu kehittäjäpohja (kuten Closure ja Prototype), JQuery on - monille ihmisille - JavaScript-standardi kirjasto.

        Tässä on hyvin lyhyt esimerkki siitä, kuinka JQuery nopeuttaa kehitystä. Oletetaan, että haluat muuttaa elementin määritteen.

        // "puhdas" JavaScript-tapa.

        document.getElementById ("muuttua") .SetAttribute ("otsikko","Uusi otsikkoteksti");

        // JQuery-tapa.

        $. ("#muuttua") .Attr ("otsikko","Uusi otsikkoteksti");

        Tässä tapauksessa vain 28 merkkiä tallennetaan, mutta joskus se on paljon enemmän. Ja jopa pienet säästöt kasvavat suuressa projektissa.

        JavaScript Front End -kirjastot

        Monet kunnollisista web-suunnittelijoista, joilla on hyvä ymmärrys HTML: stä ja CSS: stä, käyttävät JavaScript GUI -parannuksia tulematta JavaScriptin ohjelmoijiksi.

        Tämä on mahdollista, koska on olemassa useita JavaScript-käyttöliittymäkirjastoja (kuten JQuery UI) ja käyttöliittymäkehyksiä (kuten Bootstrap), jotka tarjoavat suhteellisen helpon HTML-sovellusliittymän.

        API (kuten edellä mainittiin) sovellusohjelmointirajapinnassa. Tämä on tapa käyttää ohjelmiston toiminnallisuutta kyseisen ohjelmiston ulkopuolelta. JavaScript-ominaisuuksien ja HTML-sovellusliittymien yhteydessä tämä tarkoittaa helppoa tapaa sisällyttää JavaScript-ominaisuuksia HTML: ään yksinkertaisesti lisäämällä asioita merkintöihin (yleensä erikoisluokat).

        JavaScriptin käyttöliittymäkirjastojen ominaisuuksien tutkiminen voi tarjota aloittelijoille (ja ei niin aloittaville) paljon helppoja ideoita sivuston interaktiivisuuden parantamiseksi ja työkaluja näiden ideoiden toteuttamiseen. (Muista vain valita yksi ja pysyä sen mukana projektissa - yritä olla sekoittamatta ja sovittamassa erilaisia ​​käyttöliittymäkirjastoja. Tulokset ovat visuaalista kaaosta ja suunnittelun sekaannusta.)

        JavaScript-käyttöliittymäsovelluskehykset

        Erillään CSS: n edellisessä osassa käsitellyistä käyttöliittymäsuunnittelukehyksistä (kuten Bootstrap), käyttöliittymäsovellus on luuranko-ohjelmistosovellus, joka toimii lähtökohtana ei visuaaliselle suunnittelulle, vaan sen todelliselle toiminnallisuudelle. verkkosovellus.

        JavaScript-sovelluskehykset, kuten Backbone.js ja Angular, tarjoavat jäsennellyn mallin verkkosovellukselle, automatisoivat useita yleisiä tehtäviä ja tarjoaa suunnitteluarkkitehtuurin.

        Useimmat JS-sovelluskehykset toteuttavat MVC: n tai Model View Controller -suunnittelijakuvion. Tämä malli toimii näin:

        • Malli käsittelee tietoja
        • Näkymä näyttää tiedot
        • Ohjain yhdistää mallin tiedot näkymään ja käsittelee sovelluslogiikkaa

        Jokainen JS-kehys toteuttaa tämän mallin eri tavalla, mutta melkein kaikki niistä tekevät jonkin version tästä.

        Jos yrität rakentaa JavaScript-sovellusta, yrittää rakentaa tyhjästä on melkein aina kauhea idea. Kehyksen käyttö varmistaa, että sovelluksesi on rakennettu vankalle arkkitehtoniselle perustalle ja säästää lukemattomia tunteja, jotka muuten kuluttaisivat matalan tason, yleisen toiminnallisuuden koodaamiseen..

        Kuten useimmissa ohjelmistokehityksissä on käynyt, hyvä Java-kehittäjä ei ole vain JavaScriptin koodaamisen tuntemus - se on tieto siitä, mitkä kirjastot ja kehykset soveltuvat parhaiten erityyppisiin sovelluksiin, ja kyvystä käyttää niitä tietyssä määrin sujuvuus.

        JavaScript on tehokkaampi ja hyödyllisempi kuin koskaan

        JavaScripti aloitti elämänsä vähätehoisena kielenä, jota käytetään typeräihin tehosteisiin ja pieniin parannuksiin verkkosivuilla. Mutta viimeisen vuosikymmenen aikana uuden sukupolven standardien kanssa yhteensopivia verkkoselaimia, edistyneiden JavaScript-kirjastojen ja -kehysten kanssa, on kääntänyt kielen vakavaksi alustaksi täysimittaisiin selaimen sisäisiin sovelluksiin.

        HTML vs. kaikki

        Tämä jakso kietoa HTML-kattavuutemme tarkastelemalla vaihtoehtoja HTML: lle useissa yhteyksissä ja osoittamalla, että HTML: stä on tullut hallitseva sisältökieli nykyaikaisella teknologiamaisemalla.

        HTML vaihtoehtona

        HTML on verkon oletuskieli, mutta sitä käytetään myös alustana muun tyyppiselle suunnittelulle ja sisällölle.

        E-kirjat

        E-kirjojen suosituin avoimen lähdekoodin standardi .epub-muoto - jota voidaan käyttää melkein kaikissa e-lukijoissa paitsi Amazon Kindle - on oikeastaan ​​vain HTML-pohjainen muoto. Yksittäiset osiot ja osiot, kuten sisällysluettelot ja hakemistot, ovat erillisiä HTML-tiedostoja. Kaikki sisältötiedostot sekä sisältö, kuten kuvat ja CSS-tiedostot, pakataan yksinkertaisesti yhdeksi tiedostoksi ja niille annetaan .epub-tiedostotunniste. .Epub-kirja on monella tapaa analoginen verkkosivustolle, jolla on useita sivuja.

        Amazon Kindle on aina pitänyt parempana omaa tiedostomuotoa. Ensimmäisen sukupolven Kindles käytti .mobi, ja sen jälkeen siihen liittyvä muoto, nimeltään .azw. Ne olivat monimutkaisempia kuin .epub-muoto, eivätkä perustu HTML: ään.

        Viimeisin Kindles-sukupolvi käyttää kuitenkin uutta .azw3-muotoa, joka perustuu HTML5: ään. Vaikka Kindle-e-kirjoja oli aina mahdollista luoda HTML-tiedostosta muunto-ohjelmiston avulla, HTML on nyt e-kirjojen sisällön ensisijainen kirjoituskieli.

        Mobiilisovellukset

        Kaksi suosituinta mobiilialustaa - Android ja iPhone - käyttävät sovellusten kehittämiseen täysin erilaisia ​​ohjelmointikieliä. Android-sovelluskehitys tehdään yleensä Java-sovelluksessa, kun taas iOS käyttää Object C: tä ja uutta kieltä Swift.

        Tämä tarkoittaa, että jos haluat rakentaa ja julkaista sovelluksen molemmille alustoille, sinun on yleensä rakennettava koko asia kahdesti kahdella eri kielellä. Tämä on hienoa suurille ohjelmistoyrityksille, kuten Facebook, mutta se voi aiheuttaa vakavan rasituksen pienemmille kehitystaloille.

        Muutamia erilaisia ​​ratkaisuja tähän ongelmaan on luotu, mutta kiehtovin on HTML: n käyttö (yhdessä JavaScriptin ja CSS: n kanssa).

        Työkalujen, kuten PhoneGapin, avulla kehittäjät voivat rakentaa sovelluksen kerran selainpohjaisilla kielillä (HTML, JS, CSS) ja sitten pakata ne sovelluksiin eri käyttöjärjestelmille. PhoneGap-ohjelmisto kääri selainpohjaisen sovelluksen ”kromittomaan selaimeen” - selaintyyppiseen renderointikehykseen, joka tarkastelee vain sovellushakemistossa olevia tiedostoja eikä tarjoa käyttäjän suunnattua navigointia. Tämä voidaan tehdä kaikille tuetuille käyttöjärjestelmille, jolloin sovellukset voidaan rakentaa kerran ja ottaa käyttöön kaikkialla.

        HTML: stä on tullut yleinen kieli.

        Vaihtoehdot HTML: lle

        Vaikka HTML on verkon äidinkieli ja tehokas yhteentoimivuuden alusta, on joitain vaihtoehtoisia tekniikoita, jotka kieltäytyvät poistumasta.

        salama

        Flash on multimediaohjelmistoalusta, jota voidaan käyttää useimmissa selaimissa, joissa on laajennus.

        1990-luvun lopulla ei ollut mitään viileämpää kuin Flash-pohjainen verkkosivusto. Ne olivat erittäin vuorovaikutteisia, animoituja ja kehuivat paremmilla grafiikoilla kuin yksinkertaiset HTML-pohjaiset sivustot. Voit jopa saada heidät soittamaan musiikkia ja videota.

        Näistä sivustoista tuli nopeasti tylsiä ja ärsyttäviä, mutta tekniikka ripustettiin tapana (ihmiset kirjoittavat mitä ovat tottuneet kirjoittamaan) ja pelkäävät, että HTML5: n ja JavaScriptin kirjoitettuja sivustoja ja sovelluksia ei tueta kaikissa selaimissa. Internet Explorer 6: ta käytettiin runsaasti vuosia parempien, standardien mukaisten selainten tulon jälkeen, joten ihmiset työnsivät jatkuvasti Flash-pohjaisia ​​sivustoja..

        Suurimmaksi osaksi tämä trendi on kuollut. Flashia on nyt käytetty enimmäkseen pöytätietokoneisiin ja mobiilipeleihin, ja sen käyttöä verkossa on enimmäkseen rajoitettu älykkään joukon keskuudessa.

        Valitettavasti pienet ei-tekniset yritykset (etenkin kirkot ja voittoa tavoittelemattomat yhteisöt) ovat jatkuvasti useita vuosia teknologisen kehityksen takana, ja monet heistä haluavat edelleen sisällyttää Flash-elementtejä (kuten ”Flash Intro”) verkkosivustoilleen. Tämä on melkein aina virhe.

        • Flashin yleisin käyttö ei-vuorovaikutteisissa verkkosivustoissa on ”Flash Intro”, joka on uskomattoman ärsyttävä käyttäjille. Kukaan ei halua odottaa ja katsella viihdyttävää ensi-esitystäsi ennen kuin löytävät sivustolta etsimäsi asiat. Älä koskaan, koskaan tee tätä.
        • Joidenkin mielestä on hyvä idea sijoittaa sisältö ja valikot Flash-sovellukseen, jotta ne voivat luoda hienoja tehosteita, kuten valaistusvalikkokohteita tai liikkuvia välilehtiä. Tämä on huono idea:
          • Ihmiset välittävät sisällöstäsi, ei erikoistehosteistasi. Tee sisällöstäsi helppo lukea ja selata helposti. Kukaan ei aio pysyä sivustolla kauemmin tai suositella sitä ystävilleen, koska he pitivät siitä, kuinka sisältösi paljastui kuten vieritys, kun he napsauttivat lentävää valikkopainiketta.
          • Sisällön sijoittaminen Flashiin HTML: n sijasta piilottaa sen hakukoneista, mikä tekee sivustostasi tehokkaasti näkymättömän Googlelle.
          • Sisällön sijoittaminen Flashiin tarkoittaa, että mikä tahansa tietty sisältönäkymäsi on tosiasiallisesti käynnissä olevan sovelluksen tietty tila, ei jaettavissa oleva URL. Tämän vuoksi käyttäjien on erittäin vaikeaa lisätä kirjanmerkkejä tai jakaa sisältöäsi.
          • Flash-sovelluksen sisältö ja selailu eivät ole näytönlukijoiden käytettävissä, joten sivustosi ei ole näkövammaisille käytettävissä.
          • Suurin osa efekteistä, joita haluat luoda Flashissä, voidaan luoda helpommin JavaScriptiä ja CSS: ää luomatta mitään näistä ongelmista.
        PDF

        PDF - Portable Document Format - on loistava käyttöympäristöjen välinen muoto painotettuihin asiakirjoihin.

        PDF: n avulla voit luoda yhden näkymän sisällöstäsi. PDF-tiedostolla on tietyt sivumitat, tietty asettelu ja asiakirjavirta, tietty fontti, tietty tekstikoko. PDF-tiedostot voivat upottaa tulostimien tietoja (kuten mustevärit).

        Kaikista asioista, jotka tekevät PDF-tiedostoista hyvän valinnan esimerkiksi nuottilevyille ja kirjoille, tehdään siitä kauhea valinta verkkosisällölle.

        Ja silti, monet ihmiset ja organisaatiot (etenkin pienet ei-tech-yritykset ja voittoa tavoittelemattomat yritykset) jatkavat PDF-tiedostojen julkaisemista verkossa. Leviävä käyttäytymismalli on painettujen esitteiden luominen, jotka sitten asetetaan saataville verkkosivustolle, kun kukaan ei koskaan vastaanota tulostettua kopiota.

        Kuka tahansa, joka haluaa nähdä esitteessäsi olevat tiedot, ei halua nähdä PDF-tiedostoa. He haluavat sisältösi, ja sinun pitäisi antaa tiedot vastaavassa muodossa - selainten tapauksessa kyseinen väline on HTML.

        Yksi erityisen räikeä PDF-tiedostojen käyttö, jossa HTML olisi parempi valinta, on täytettävät lomakkeet. Monet organisaatiot luovat PDF-lomakkeita, jotka voidaan täyttää PDF-lukijassa ja lähettää sitten sähköpostitse takaisin. Voidaan kuvitella, että joku ylityöllistetty sihteeri kopioi nämä lomakkeet mihin tahansa tietokantajärjestelmään, jota toimisto käyttää sisäisesti.

        Järkevämpi ratkaisu olisi online-HTML-muoto, joka lähettää tiedot suoraan tietokantaohjelmaan. Tämä säästäisi työvoimaa ja vähentäisi virheitä. HTTPS: n avulla se olisi entistä turvallisempaa kuin PDF-lomakkeiden lähettäminen sähköpostitse.

        HTML voittaa

        HTML: stä on tullut maailmanlaajuinen kieli, samoin kuin siihen liittyvä tekniikka, kuten e-kirjat ja mobiilisovellukset.

        Joissain tapauksissa HTML on yksi valinta useista, ja tarjoaa joukon etuja ja haittoja, kuten mikä tahansa muu teknologiavalinta. Muissa tapauksissa HTML ei ole vain selvä voittaja, mutta myös ainoa järkevä valinta.

        XHTML ja XHTML5

        XHTML

        XHTML tarkoittaa eXtensible Hypertext Markup Language. Periaatteessa se on HTML: n XML-sovellus. Kun sitä kehitettiin ensimmäisen kerran, HTML (versio 4) oli rakenteeltaan löysä. XHTML teki HTML: stä erittäin jäsennellyn. Sitä pidettiin pitkään verkon merkinnän tulevaisuutena. Mutta HTML5 on suurelta osin ohittanut sen. Silti sitä käytetään laajalti.

        Se kehitettiin keinona torjua huonoa koodia, joka löytyi monilta HTML: tä käyttäviltä verkkosivuilta, kuten puuttuvat sulkevat tunnisteet, tagien virheellinen pesäys ja vastaavat löysät koodauskäytännöt. XHTML torjuu näitä virheitä asettamalla sääntöjä, kuten kaikkien tagien on oltava kiinni ja niiden on oltava oikeassa järjestyksessä.

        Historia

        Vuonna 1998 W3C julkaisi työluonnoksen, jonka otsikko oli HTML: n muotoilu XML: ssä. Tämä uusi kieli perustui HTML 4: ään, mutta se noudatti XML: n tiukempia syntaksisääntöjä. Helmikuussa 1999 eritelmän nimi muutettiin XHTML 1.0 :ksi: eXtensible HyperText Markup Language. Viimein tammikuussa 2000 XHTML tuli viralliseksi W3C-suositukseksi.

        Seuraava XHTML-versio, XHTML 1.1, julkaistiin toukokuussa 2001, joka edelleen perustui tiukkoihin sääntöihin, mutta sallii mukautukset ja pienet muutokset. XHTML 2.0 aloitti toimintoluonnoksena, mutta se hylättiin vuonna 2009 HTML5: n ja XHTML5: n hyväksi.

        XHTML-perusperiaatteet

        Vaikka XHTML on melkein identtinen HTML: n kanssa, se esitteli uuden joukon sääntöjä, joiden piti varmistaa, että kaikki koodi on kelvollinen ja oikein. Nämä säännöt olivat:

        • Kaikkien elementtien ja määritteiden nimien on oltava pienillä kirjaimilla.
        • Kaikki tyhjät elementit on kirjoitettava käyttämällä XML: n erityistä tyhjän elementin tunnistetta.
        • Kaikkien lopputunnisteiden on oltava läsnä, eikä valinnaisia ​​päätetageja ole.
        • HTML-elementtien on sisällettävä yksi pääelementti, jota seuraa yksi runkoelementti tai yksi kehyselementti.
        • Jokaisessa päässä on oltava yksi otsikko.

        Yllä mainittujen sääntöjen lisäksi XHTML otti alun perin käyttöön kolme muodollista asiakirjatyyppimääritelmää (DTD), jotka vastasivat HTML 4.01: n kolmea erilaista versiota:

        • XHTML 1.0 tiukka on XML, joka vastaa tiukkaa HTML 4.01, ja sisältää elementit ja määritteet, joita ei ole merkitty vanhentuneiksi HTML 4.01 -määrityksessä. Marraskuusta 2015 alkaen XHTML 1.0 Strict on asiakirjatyyppi, jota käytetään World Wide Web Consortium -verkkosivun kotisivulla.
        • XHTML 1.0 siirtymäkausi on HTML 4.01 Transitional -sovelluksen XML-ekvivalentti ja sisältää esityselementit (kuten keskipiste, kirjasinlause ja lakko), jotka on jätetty tiukasta versiosta.
        • XHTML 1.0 -kehyssarja on HTML 4.01 -kehyssetin XML-vastine ja antaa mahdollisuuden määritellä kehyssetit - yleinen web-ominaisuus 1990-luvun lopulla.

        esimerkki

        HTML-version varhaiset versiot olivat löysästi rakenteellisia, ja melko yleistä oli löytää web-sivuja, joilla oli huonoja koodauskäytäntöjä. Oikea XHTML-verkkosivusto näyttää tältä:

        Ensimmäinen verkkosivuni

        Hei maailma!

        Olen hyvin yksinkertainen, mutta täysin toimiva verkkosivu, jolla on kelvollinen XHTML-koodi!

        Verkkoresurssit

        Vaikka HTML5 ohittaa XHTML: n, verkossa on edelleen runsaasti resursseja, joiden avulla saat paremman käsityksen XHTML: stä. Seuraavassa luetellut linkit auttavat sinua XHTML: ää koskevissa kysymyksissä perusmäärityksestä huijauslomakkeisiin validoijiin opetusohjelmiin..

        Viite

        • XHTML: n virallinen erittely: virallinen verkkosivusto, joka selittää päätöksen XHTML: n kehittämisestä ja tarjoaa lisäresursseja sen kehittämiseen.
        • XHTML 1.0: työluonnoksen toinen tarkistettu painos, jolla muotoillaan HTML 4 uudelleen XML 1.0: ssa
        • XHTML-perusmääritys: tarjoaa XHTML-asiakirjatyypin, joka voidaan jakaa laitteiden, kuten työpöydän, television ja matkapuhelimien, kesken..
        • XHTML: puhtaan koodin ratkaisu: tarjoaa yksityiskohtaisen XHTML-yleiskatsauksen, joka keskittyy HTML: n ja uusien standardien eroihin.
        • Miksi vaihtaa XHTML: ään: tarjoaa vakuuttavan argumentin siirtymiseen XHTML: ään työnkulun säätämiseksi ja puhtaamman koodin tuottamiseksi.

        Työkalut

        Nämä työkalut auttavat sinua tarkistamaan koodisi paikkansapitävyyden ja näyttämään siitä hyvältä.

        • HTML / XHTML-tarkistuspalvelu: W3C: n validoija tarkistaa sekä HTML- että XHTML-asiakirjojen virallisten eritelmien mukaisuuden..
        • HTML Tidy: auttaa puhdistamaan HTML-tiedostot automaattisesti ja mukauttamaan ne vakiovaatimuksiin. Sen kehitti alun perin W3C: n Dave Ragget, ja nyt se on avoimen lähdekoodin projekti SourceForgessa.

        Oppaat

        Jos haluat todella sukella XHTML-kehitykseen, näiden opetusohjelmien pitäisi saada sinut alkuun.

        • XHTML selitetty: antaa yleiskuvan XHTML: n toteutumisesta ja selittää kaikki tapahtuneet muutokset, seuraa koodinäytteitä, DTD-yleiskatsausta ja parhaita koodauskäytäntöjä.
        • XHTML-verkkosuunnittelu aloittelijoille: tutkii XHTML: n edistyneitä rakennuspalikoita, mukaan lukien kommentit, teksti ja paljon muuta.
        • XHTML-opetusohjelma: erittäin lyhyt opetusohjelma, joka kattaa XHTML: n peruskäsitteet tiiviisti.
        • Käytettävissä olevat HTML / XHTML-lomakkeet: aloittelijan opetusohjelma, joka kattaa juuri sinun tarvitsemaasi.
        • Alku HTML (XHTML): video-opas, joka sopii aloittelijoille XHTML: n perusteiden oppimiseen.
        • Ohjelmistotestausmenetelmät: johdanto ohjelmistotestauksen menetelmiin ja työkaluihin, joka kiinnostaa HTML-kehittäjiä.

        Kirjat

        Koska XHTML liittyy HTML: ään, monet kirjat keskustelevat näistä kahdesta kielestä yhdessä. Löydät kirjoja, jotka on suunnattu aloittelijoille, sekä kirjoja, jotka on tarkoitettu niille, joilla on jo jonkinlainen koodauskokemus ja jotka haluavat laajentaa tietämystään.

        • HTML, XHTML ja CSS: Visual QuickStart Guide (2006), kirjoittanut Elizabeth Castro: selittää kaikki HTML- ja XHTML-perusteet aloittelijoille sopivalla kielellä. Kirjassa on paljon visuaalisia esimerkkejä, ja se sisältää kumppanisivuston, jossa on lisämateriaalia, esimerkkejä, päivityksiä ja paljon muuta.
        • Tittelin ja Noblen HTML, XHTML ja CSS For Dummies (2011): johdantoviite HTML, XHTML ja CSS: lle, joka opettaa sinua luomaan XHTML-dokumentteja, soveltamaan näitä periaatteita suosituissa CMS: issä, kuten WordPress ja Drupal, sekä suunnittelemaan mobiililaitteille laitteet.
        • Jon Duckettin Web-ohjelmoinnin aloittaminen HTML: llä, XHTML: llä ja CSS: llä (2011): opettaa kuinka kirjoittaa verkkosivuja käyttämällä HTML-, XHTML- ja CSS-ohjelmia. Se noudattaa standardipohjaisia ​​periaatteita, mutta opettaa myös lukijoita ongelmien ratkaisemiseksi (X) HTML: n avulla.

        XHTML tänään

        Ensimmäisenä luomanaan olevaa XHTML: ää ei enää kehitetä ja ylläpidetä aktiivisesti. Tärkein syy sen pudotukseen armosta oli erittäin tiukka virheiden käsittely, joka aiheutti verkkosivujen luopumisen lopettamisesta virheen sattuessa. Tämän johdosta perustettiin Web Hypertext Application Technology Group (WHATWG), joka aloitti työskentelyn HTML5: n kanssa. He osallistuivat XHTML 2.0 -työryhmän lopulliseen purkamiseen.

        Nykyään kaikki W3C: n työ keskittyy HTML5: een ja XHTML-syntaksiin, joka tunnetaan nimellä XHTML5.1, joka määritellään HTML5: n rinnalla HTML5-luonnos.

        Vaikka HTML5 on ohittanut XHTML: n, sen taustan historian ja asiaankuuluvien koodauskäytäntöjen tunteminen luo vahvan perustan tulevaisuudelle. Yllä olevat resurssit asettavat sinut oikealle tielle pätevän koodin oppimiseen.

        HTML5

        HTML5

        HTML5 on HTML-standardin nykyinen versio. Se on merkintökieli, jota käytetään web-asiakirjoissa ja sovelluksissa. HTML5 sisältää useita merkittäviä lisäyksiä ja muutoksia kieleen. Keskustelemme niistä ja vähän muusta.

        Historia ja johdanto

        Menimme yli HTML-historian, kun se siirtyi versioista 1-4. HTML5: n historia on kuitenkin vielä mielenkiintoisempi ja tärkeämpi.

        Tie HTML 5: ään

        Verkon julkisen käyttöönoton alkuvuosina suuret selaimen tarjoajat kehittivät omat HTML-elementtinsä ja oman lähestymistavansa.

        Yhdelle selaimelle luodut HTML-asiakirjat olivat melkein käyttökelvottomia toisissa, etenkin jos HTML-sivut sisälsivät interaktiivisia elementtejä, kuten lomakeohjaimet.

        Kun HTML 4.0 ja XHTML vakiintuivat, Web Standards -liike pakotti selaimen valmistajia omaksumaan avoimia standardeja, jotta verkkosivut olisivat yhteensopivia minkä tahansa selaimen kanssa.

        Tämä työ oli suurelta osin onnistunut, mutta kaksi suuntausta ajoi HTML: n rajat uhaten koko avoimuuden ja yhteentoimivuuden periaatetta.

        Ensimmäinen oli "quirks mode" -selaimen kohdistamisen kollektiiviset huonot tavat. Kun niin monta vuotta jouduttiin säätämään malleja tietyille selaimille, monet suunnittelijat jatkoivat koodinmuodostusta tällä tavalla.

        Toinen oli kasvava halu rikas, interaktiivinen sisältö, jota ei tueta HTML-muodossa. Tämä johti Flashin laajaan käyttöön.

        Vuonna 2004 Mozilla ja Opera esittelivät W3C: lle kantapaperin, jossa kannatettiin sitä, josta myöhemmin tulee HTML5. Uusi kielen iteraatio tukee uutta vuorovaikutteista toiminnallisuutta ja multimediaa, mutta samalla taaksepäin yhteensopiva standardien kanssa yhteensopivien selainten kanssa.

        Tämä viimeinen kohta oli ratkaisevan tärkeä - uuden version oli hajoava sulavasti ja sisältävä voimassa oleva HTML 4.0 osajoukkona; muuten siitä tulisi vain uusi hämmentävä versio jo tungosta ekosysteemistä.

        WHATWG aloitti HTML5-työkalun käytön melkein heti, ja ensimmäinen julkinen luonnos julkaistiin vuonna 2008. Selaimen valmistajat alkoivat kokeellisesti toteuttaa standardin osia, jotka kehittyivät edelleen.

        Vakaa ”ehdokassuositus” julkaistiin vuonna 2012 ja täysin vakaa W3C-suositus julkaistiin vuonna 2014. Siihen mennessä kaikki suuret selaimet tukivat standardin kriittisimpiä osia..

        HTML5-standardissa on nyt kaksi rinnakkaista kehitysrataa. W3C: llä on vakaa julkaisusykli, jossa on inkrementaaliset versionumerot - sarja "valokuvia". WHATWG ylläpitää muuttuvaa "elintasoa", ja uusia ominaisuuksia lisätään jatkuvasti.

        HTML5: n uutta?

        HTML5: ssä on paljon uutta, mukaan lukien itse spesifikaation luonne. HTML 4.0 oli pohjimmiltaan luettelo käytettävissä olevista merkintätageista. HTML5 sisältää sen, mutta se on vain yksi osa standardissa määriteltyä selainpohjaisen tekniikan modulaarista ekosysteemiä.

        markup

        HTML5-merkinnän muutokset jakautuvat yleensä muutamiin luokkiin.

        Semantiikka

        Semanttinen merkintä tarkoittaa merkintää, jolla on merkitys. Esimerkiksi HTML 4.0: n ainoa tärkein sivun asetuselementti oli. A voi olla mikä tahansa: otsikko, alatunniste, sarake, sivupalkki, valikko. HTML5: ään on lisätty joukko semanttisia sivuasetteluelementtejä:

        • .

        Muita HTML5: ään lisättyjä semanttisia elementtejä ovat:

        • ja joita käytetään kuvioissa ja kaavioissa;
        • joka määrittelee korostetun tai merkityn tekstin;
        • joka määrittelee päiväajan.

        HTML5 ilmaisee myös sen ja sitä tulisi pitää parempana ja .

        Multimedia

        Uusia elementtejä lisättiin HTML5: ään median tukemiseksi:

        • .

        Elementit sallivat median natiivin toiston ilman JavaScriptiä, Flashia tai minkäänlaista upotusta - se on niin yksinkertaista kuin kuvan sisällyttäminen. Elementti toimii JavaScriptin avulla sivuohjelmien luomiseen ohjelmallisesti.

        HTML5: llä on myös selkeä tuki skaalautuvalle vektorigrafiikalle (SVG).

        vuorovaikutteisuus

        HTML5: ssä on joukko uusia lomakeelementtejä ja syöttötyyppejä, jotka auttavat tukemaan kieltä sovellusalustana. Nämä sisältävät:

        • .

        Syöttötyyppeihin kuuluvat nyt: väri, päivämäärä, päiväaika, päiväaika-paikallinen, sähköposti, kuukausi, numero, alue, haku, tel, aika, URL ja viikko.

        Uusien lomakeohjaimien ohella esiteltiin HTML5, joka tarjoaa visuaalista palautetta ja jota voidaan käyttää lomakkeiden ulkopuolella. Lisäksi useita uusia globaaleja määritteitä mahdollistaa vuorovaikutteiset ominaisuudet:

        • contenteditable
        • contextmenu
        • data- *
        • vedettäviä
        • dropzone
        • oikeinkirjoituksen tarkistus.
        Lexing- ja jäsennyssäännöt

        Saatavilla olevien elementtien luetteloon tehtävien muutosten lisäksi HTML5-merkintöihin sovelletaan paljon tiukempia ja paremmin määriteltyjä lexing- ja jäsentämissääntöjä. Se ei ole enää XML- tai SGML-versio, vaan täysin määritelty merkintäkieli sellaisenaan.

        Syntaksivirheiden tai huonosti muodostettujen merkintöjen odotetaan epäonnistuvan jatkuvasti tarjoamalla samanlaista käyttäytymistä kaikissa yhteensopivissa selaimissa.

        Selaimen ja DOM-sovellusliittymät

        HTML5 määrittelee useita JavaScript-sovellusliittymiä vuorovaikutukseen DOM: n (asiakirjaobjektimalli - sivun sisältö) ja selaimen kanssa. Nämä sisältävät:

        • Edellä mainittu kangas sivun sisäisen grafiikan renderointiin.
        • Ajastettu mediatoisto käytettäväksi ja .
        • Online / Offline-tilan tarkistukset.
        • MIME-tyypin ja protokollankäsittelijän rekisteröinti, jonka avulla selain voi valita verkkosivun oletustaviksi tapaa käsitellä tiettyä tiedostotyyppiä tai viestintäprotokollaa. Esimerkiksi Webmail-sovelluksen salliminen käsitellä mailto: -linkkejä.
        • Mikrotiedot, jotka mahdollistavat semanttisen metatiedon pesämisen määritteinä.
        • Ristidokumenttiviestintä, jonka avulla kaksi sivua kahdelta eri verkkotunnuksen lähteeltä, jotka avautuvat kahdessa eri selainkontekstissa, voivat olla yhteydessä toisiinsa.
        • Verkkotallennus, pysyvä avain-arvo-paritietovarasto, joka on samanlainen kuin evästeet, mutta helppokäyttöisempi ja suuremmalla tallennuskapasiteetilla.

        HTML5: n menestys

        HTML5: n menestys voidaan arvioida kahdesta syystä:

        • kuinka hyvin eritelmä saavuttaa tavoitteensa
        • kuinka yleinen sen hyväksyminen on.

        HTML5 on ollut molemmissa suhteissa erittäin menestyvä.

        HTML5: n tavoitteet olivat:

        • selaimen yhteentoimivuus
        • vähennetty tai poistettu laajennustarve
        • yhteensopivuus taaksepäin olemassa olevien standardien kanssa.

        Ne on suurelta osin saavutettu. Moottorien renderointi ja JavaScript-toteutukset suurimmissa selaimissa ovat kaikki lähentyneet siihen pisteeseen, että verkkosivustolla käyminen tuottaa yhdenmukaisen kokemuksen kaikilla selaimilla.

        Multimedian, selaimen tallennuksen ja muiden sovelluksiin keskittyvien ominaisuuksien tuki on poistanut Flashin tarpeen ja aiheuttanut räjähdyksen alkuperäisissä HTML5-verkkosovelluksissa..

        HTML5: ssä luodut asiakirjat toimivat hyvin vanhoissa selaimissa, vaikka edistyneemmät Web-sovellukset eivät toimi.

        Hyväksyminen on ollut nopeaa, jo ennen standardin virallistamista. Tämän kirjoittamisen jälkeen suurin osa 10 miljoonasta suosituimmasta verkkosivustosta käyttää HTML5: tä. Lisäksi suurin osa uudesta verkkosisällöstä tuotetaan HTML5-muodossa.

        Vieläkin mielenkiintoisempaa on ollut HTML5: n käyttö selaimen ulkopuolella. Alustat, kuten Electron for desktop ja Phonegap for mobile, ovat muuttaneet HTML5: n (CSS3: n ja JavaScriptin kanssa) natiiviksi sovelluskieleksi.

        Yleiset HTML5-resurssit

        • HTML5: n W3C-suositus ja WHATWG HTML Living Standard ovat kaksi virallista lähdettä, jotka määrittelevät HTML5: n.
        • W3C tarjoaa sarjan HTML5-kursseja:
          • HTML5-esittely
          • HTML5, osa 1: HTML5-koodauksen perusteet ja parhaat käytännöt
          • HTML5, osa 2: Edistyneet tekniikat HTML5-sovellusten suunnitteluun
        • Mozilla Developer Network tarjoaa kattavan HTML5-viitteen.

        HTML5 on tulevaisuus

        HTML5 on verkon nykyaika ja tulevaisuus. Jos työskentelet verkkoteknologioiden kanssa tai julkaiset verkkosisältöä, sinun on tunnettava standardi. Jos olet oppinut web-suunnittelun ennen vuotta 2010, etkä ole seurannut muutoksia, HTML5: ssä on paljon hienoja juttuja, jotka kannattaa tutustua.

        Audio- ja videolähde

        Ennen HTML5: n mukana tulemista, äänen ja videon upottaminen verkkosivuille ei ollut suoraviivaista. Eri tekniikat ja MIME-tyypit vaativat erilaisia ​​laajennuksia.

        Media oli myös joskus upotettava iframe-kehyksillä. Tämä ei ole ihanteellinen, koska se on tekniikka, jota hakkerit käyttävät myös haittakoodin upottamiseen.

        HTML5 tuo käyttöön uusia tageja, jotka helpottavat median hallintaa, pääasiassa siksi, että ne esittelevät standardeja, joita voidaan käyttää käytännössä missä tahansa sivustossa. Kuten kaikissa HTML5-tunnisteissa, vaaditaan varovaisuutta, koska tunnisteet eivät ehkä ole yhteensopivia vanhempien selainten kanssa.

        Upottaaksesi ääntä tai videota, voit käyttää uusia ja elementtejä HTML5: ssä. Tässä on esimerkki:

        Päivitä selaimesi.

        Jäljempänä olemme eritelleet jokaisen elementin sen määritteillä.

        Upota video

        HTML5 esittelee uuden elementin, joka poistaa selaimen lisäosien tarpeen.

        Elementin avaus- ja sulkemistunnisteiden välillä voit määrittää vaihtoehtoisen tekstin. Tämä näkyy vain, jos selain ei tue elementtiä.

        Elementin ominaisuudet

        Elementissä voidaan määrittää erilaisia ​​määritteitä:

        leveys korkeus

        Nämä määritteet asettavat videon mitat ruudulla. Vaikka ne ovat valinnaisia, on parasta sisällyttää ne niin, että loput sivu näkyy oikein latauksen aikana.

        Videon leveys ja korkeus on määritettävä pikselinä.

        ohjaimet

        Ohjausominaisuus kehottaa selainta näyttämään toisto / tauko-painikkeen ja äänenvoimakkuuden säätimen liukusäätimen. Jos haluat näyttää videon ilman säätimiä, jätä attribuutti pois.

        automaattinen toisto

        Automaattinen toisto pakottaa videon aloittamaan toiston työpöytälaitteilla ilman käyttäjän toimia. Jos haluat näyttää ilman automaattista toistoa, jätä attribuutti pois.

        Mobiililaitteissa automaattisen toiston määrite jätetään huomioimatta.

        Upota ääni

        Upota ääni käyttämällä elementtiä. Se on hyvin samanlainen kuin elementti.

        Elementin avaus- ja sulkemistunnisteiden välillä voit määrittää vaihtoehtoisen tekstin. Tämä näkyy vain, jos selain ei tue elementtiä.

        Elementin ominaisuudet

        Elementissä voidaan määrittää erilaisia ​​määritteitä:

        silmukka

        Silmukkaattribuutti kehottaa selainta käynnistämään ääniraidan alusta heti, kun se on lopetettu.

        ohjaimet

        Ohjausominaisuus kehottaa selainta näyttämään saman toisto- / taukopainikkeen ja äänenvoimakkuuden säätimen liukusäätimen kuin videotunnisteen kanssa. Jätä vain attribuutti, jotta ääni näkyy ilman säätimiä.

        automaattinen toisto

        Automaattisesti toistettava ominaisuus pakottaa äänen toiston alkamaan automaattisesti. Upota ääni ilman automaattista toistoa, jätä attribuutti pois.

        vaimea

        Vaimennettu ominaisuus vaimentaa äänenvoimakkuuden, kun ääni latautuu.

        preload

        Esikuormitusominaisuuden avulla voit ladata äänen ennen sivun sisältöä. Hyväksyttäviä arvoja ovat auto, metatiedot tai ei mitään.

        Elementti

        Elementti määrittelee tiedoston ja MIME-tyypin, ja sitä on käytettävä elementissä tai. Ainakin yhden elementin on oltava. Voit lisätä lisäelementtejä, jos haluat määrittää tiedoston vaihtoehtoiset versiot.

        Esimerkiksi:

        Selaimesi ei tue videotunnistetta.

        Elementin ominaisuudet

        Sillä on seuraavat ominaisuudet:

        src

        Src-määrite määrittää lähdepolun ja videotiedoston tai äänitiedoston nimen.

        tyyppi

        Tiedoston MIME-tyyppi.

        Videon hyväksyttävät arvot ovat video / mp4, video / webm ja video / ogg. Ääniä varten hyväksyttävät arvot ovat audio / mpeg, audio / wav ja audio / ogg.

        Vaikka nykyaikaiset selaimet tukevat teoreettisesti itse elementtiä, jotkut saattavat kamppailla tiettyjen MIME-tyyppien kanssa.

        Parhaan mahdollisuuden selainten välisen yhteensopivuuden varmistamiseksi video / mp4 MIME-tyyppiä suositellaan videolle ja audio / mpeg MIME-tyyppi on paras äänelle. Voit määrittää useita elementtejä, jos haluat antaa esimerkiksi videon ogg- ja mp4-version.

        Elementti

        Elementin avulla voit määrittää tekstiresurssin, joka näytetään ääni- tai videosi kanssa. Yleisin käyttö on määrittää tekstitystiedosto tai tekstitykset.

        Voit määrittää useamman kuin yhden kappaleen jokaiselle video- tai äänielementille. Voit esimerkiksi lisätä elementtejä eri kielille:

        Elementin ominaisuudet

        Elementillä on seuraavat määritteet:

        src

        Tekstitiedoston lähdepolku ja tiedostonimi.

        kiltti

        Samoin kuin type-attribuutti, kind-attribuutti määrittelee tiedoston luonteen. Voit käyttää kuvatekstejä, lukuja, kuvauksia, metatietoja tai tekstityksiä.

        srclang

        Srclang-määritteen avulla voit määrittää tekstitiedoston kielen. Käytä sopivaa kielikoodia.

        oletusarvo

        Käytä oletusominaisuutta määrittääksesi, minkä pitäisi olla oletusvalinta.

        etiketti

        Antaa tekstiraidalle nimen.

        Audio- ja videolähteet

        • Mozilla on kehittänyt tämän erinomaisen oppaan, jossa käytetään HTML5-ääntä ja -videota. Se vie sinut yksinkertaisesta edistyneeseen käyttöön.
        • Apple on julkaissut erityiset ohjeet kehittäjille. Tämä on syytä lukea, jos olet kehittämässä iOS- tai Safari-käyttöjärjestelmää.
        • Microsoftilla on omat ohjeet HTML5-ääni- ja -videoille Internet Explorerissa.

        Sovellusvälimuisti

        HTML5 ei muuttanut vain merkinnän syntaksia. Se määritteli myös joukon selainpohjaisia ​​tekniikoita, joista useita liittyi web-sovellusten offline-käyttöön.

        Sovellusvälimuisti (tai “AppCache”) on ominaisuus, jonka avulla kehittäjät voivat määrittää resurssit, jotka voidaan hakea ja tallentaa paikallisesti.

        Nämä resurssit ilmoitetaan välimuistiluettelotiedostossa, joka linkitetään verkkosivun otsikosta. Tätä voidaan käyttää offline-tilassa toimivan web-sovelluksen suunnitteluun tai yksinkertaisesti nopeuttaa käyttäjäkokemusta.

        AppCache on ominaisuus, jolla on paljon potentiaalia, etenkin yhden sivun web-sovellusten yhteydessä. Valitettavasti ominaisuudella on myös paljon ongelmia, ja se on parhaillaan vanhentumassa ja poistettu standardista.

        AppCache on silti käyttökelpoinen ja ainoa tapa saavuttaa tiettyjä vaikutuksia.

        Auttaaksemme sinua ratkaisemaan tämän sekaannuksen, olemme koonneet parhaat sovellusvälimuistossa olevat oppaat ja resurssit, jotka tutkivat aihetta monista eri näkökulmista..

        Sovellusvälimuistin oppaat

        • Aloittelijan opas sovellusvälimuistin käyttämisestä on yksi parhaimmista aiheista.
        • Sovellusvälimuistin käyttäminen on kehittäjille suunnattu tekninen opas Mozilla Developer Network -sivustolta.
        • Let’s Take This Offline on yksityiskohtainen ja kertomuksellinen kuvaus AppCachen käytöstä.
        • HTML5-sovellusvälimuistin käyttäminen mobiilisovelluksissa kattaa AppCachen yleisen käytön ja selvittää erityiskysymyksiä, kun sitä käytetään kehitettäessä HTML5-verkkosovelluksia mobiiliselaimille.
        • HTML 5 -sovellusvälimuistin käyttäminen yhden sivun sovelluksissa kuvaa AppCachen käyttöä Ember.js-sovelluksen yhteydessä.
        • Opetusohjelma: Offline-HTML5-Web-sovelluksen luominen selittää RSS-lukijan esimerkkiä selittämään, kuinka rakentaa offline-tilassa toimiva verkkosovellus. Erityisen mielenkiintoista on tapa, jolla AppCachea käytetään yhdessä useiden muiden HTML-tietovarastojen, kuten evästeiden, paikallisen tallennustilan ja WebSQL: n kanssa..
        • Yksinkertaisen ristiinselaimessa olevien offline-tilassa tehtävien luetteloiden luominen IndexedDB: n ja WebSQL: n avulla tutkitaan offline-tilassa tehtävien luettelo -sovelluksen rakentamista, joka toimii useissa selaimissa. Sovellusvälimuistia käytetään yhdessä IndexedDB: n ja WebSQL: n kanssa.
        • Offline-sovelluksen luominen HTML5-sovellusvälimuistin avulla antaa yksityiskohtaista tietoa AppCachen käytöstä, mukaan lukien vaiheittaiset ohjeet manifestin luomisesta ja yksityiskohdat .htaccess-sovelluksen käytöstä manifestitiedoston oikean palvelun tarjoamiseksi Apachessa..
        • HTML5 Offline -verkkosovellusten luominen tutkii useiden paikallisten tietojen tallennusmenetelmien, mukaan lukien AppCache, puitteita.
        • HTML5-sovellusvälimuistin lisääminen Web-sovelluksen nopeuttamiseen 5 minuutissa on lyhyt opetusohjelma, joka vie sinut nopeasti AppCachen avulla. Tämän oppaan painopiste on välimuistin käyttämisessä nopeuttaa online-verkkosivustojen kokemusta, ei offline-sovelluskokemuksen tarjoamisessa.
        • Verkkosovellusten ajaminen offline-tilassa HTML5 AppCache -sovelluksella kattaa välimuistiluettelon ja myös JavaScript-sovellusliittymän, erittelemällä välimuistiin liittyvät tapahtumat ja toiminnot.
        • Mikä on sovellusvälimuisti? tarjoaa korkeatasoisen yleiskuvan AppCachesta.
        • HTML5-offline-sovelluksen luominen sovellusvälimuistin, Web-tallennustilan ja ASP.NET-MVC: n avulla saat yksityiskohtaisen kuvan siitä, kuinka AppCache todella toimii, ja kattavan esityksen manifestitiedoston asianmukaisesta jäsentelystä. Tämän yleisen selityksen jälkeen opas osoittaa, kuinka hallita tätä prosessia ASP.NET-sovelluksessa.

        Lisäsovelluksen välimuistin oppimateriaalit

        • Parhaita käytäntöjä nopeampaan Web-sovellukseen, jossa HTML5 koskettaa vain sovellusvälimuistia yhdessä osassa, mutta se on erittäin hyödyllistä ymmärtää, kuinka App-välimuistia käytetään osana suurempaa suorituskykystrategiaa.
        • Vihjeitä sovellusvälimuistin käyttämiselle on luettelo parhaista käytännöistä, joilla käsitellään joitain AppCachen yleisiä ongelmia.
        • HTML-sovellusvälimuistin poistaminen selittää kuinka voit poistaa paikallisen sovellusvälimuistisi useista selaimista. Tämä on erityisen hyödyllistä paikallisen kehityksen ja testauksen aikana, kun projektisi tiedostot muuttuvat nopeammin kuin AppCache päivittää niitä.
        • Yleiset sudenkuopat, joita vältetään käytettäessä HTML5-sovellusvälimuistia, kattaa useita AppCachen yleisimpiä ongelmia ja selittää, kuinka ne voitetaan..
        • Sovellusvälimuisti on Douchebag on hauska, mutta aivan liian tarkka ranska sovellusvälimuistin kanssa työskentelemisen vaikeuksista. Tämä essee oli välitön klassikko käyttöliittymien kehittäjien keskuudessa, ja se on ehdottomasti luettava kaikille AppCachesta kiinnostuneille.

        Sovelluksen välimuistin viite

        • Voinko käyttää sovellusvälimuistia? antaa sinulle nopean yleiskatsauksen selaimista, jotka tukevat AppCachea.

        Työkalut sovellusvälimuistin käsittelemiseen

        • Cache Manifest Validator on online-työkalu AppCache Manifest-tiedostojen tarkistamiseen.
        • GWT AppCache -tukikirjasto on Google Web Toolkit -moduuli, joka automatisoi Appcache-manifestitiedostojen luomisen.
        • Appcache-Manifest on Node.js-työkalu, jolla luodaan Application Cache Manifest-tiedostoja komentoriviltä. Työkalu sisältää manifestitiedostojen MD5-tiivisteen, varmistaen, että päivitetyt tiedostot muuttavat manifestin automaattisesti, aiheuttaen välimuistin asianmukaisen mitätöinnin.
        • CacheMan on työpöytäsovellus, joka käsittelee Cache Manifest-sukupolvea.

        Eteenpäin siirtyminen sovellusvälimuistilla

        Pitäisikö sinun oppia käyttämään sovellusvälimuistia? Jos olet käyttöliittymän kehittäjä, joka työskentelee verkkosovellusten parissa - ehdottomasti kyllä. Mutta sinun on myös tiedettävä, mitä on tulossa ja miten offline-selaimen tallennustila kehittyy.

        AppCachen aiottu korvaaja on huoltotyöntekijät. Voit jo käyttää palvelustyöntekijöitä joissakin selaimissa, ja siellä on hienoja työkaluja niiden helppoon käyttöönottoon. Toisaalta, jotkut selaimet eivät ole edes päättäneet, ottavatko ne käyttöön ominaisuuden.

        Joten mitä sinun pitäisi tehdä omissa verkkosovelluksissa?

        Toistaiseksi käytä AppCachea, mutta varaudu huoltotyöntekijöihin.

        Pelit, grafiikat ja animaatiot

        Skaalautuva vektorigrafiikka (SVG) ja HTML5-kangasosa ovat kaksi tehokasta työkalua grafiikan, animaation ja jopa selainpohjaisten pelien luomiseen. Vaikka molempia tekniikoita voidaan käyttää samaan tarkoitukseen, ne toimivat täysin eri tavoin.

        • Kankaaselementti on bittikartta-alue, jossa voit piirtää ja manipuloida rasteroituja kuvia pikseli kerrallaan.
        • SVG on koodi, joka kuvaa resoluutiosta riippumatonta vektorigrafiikkaa.

        Sekä kangaselementit että SVG: t voidaan luoda ohjelmallisesti komentosarjoilla ja suunnitella vastaamaan käyttäjän syötteisiin. Seurauksena on, että SVG- ja piirtoalustan elementtejä voidaan käyttää staattisen grafiikan ja interaktiivisten animaatioiden luomiseen.

        SVG vs Canvas

        Ensinnäkin SVG ei kuulu HTML5-määritykseen, kun kangas on. SVG on kieli, jota käytetään kuvaamaan kaksiulotteista grafiikkaa. Se on itsenäinen verkkostandardi, joka voidaan upottaa HTML- ja XML-asiakirjoihin.

        Upotettuna HTML-dokumenttiin SVG käyttää syntaksia, joka vastaa HTML5-syntaksia, mikä johtaa joidenkin olettamaan virheellisesti, että SVG on HTML-elementti.

        Selaimet tuottavat SVG- ja HTML5-kangaselementit melko eri tavalla:

        • Canvas-elementit tehdään "lennossa". Tämä tarkoittaa, että piirtoalustan elementit piirretään reaaliajassa, kun selain käsittelee niitä.
        • SVG: tä ei vedä heti. Kun selain kohtaa SVG: n, se rakentaa ensin DOM: n SVG: lle ja sitten luo DOM: n.

        Se saattaa tuntua pieneltä erolta, mutta se ei ole. Tämä tarkoittaa, että selaimen ei tarvitse rakentaa DOM: ia, kun se kohtaa kankaan, mutta sen on tehtävä, kun SVG-tiedosto esitetään.

        Yksinkertaisten animaatioiden kohdalla ero on vähäinen. Poikkeuksellisen monimutkaiset kangasanimaatiot vaativat kuitenkin dramaattisesti vähemmän selainresursseja kuin SVG-tiedostot.

        Toisaalta, jos haluat tehdä pienen muutoksen SVG: hen, voit kulkea DOM: n läpi ja tehdä muutoksen, kun taas koko kankaalelementti on piirrettävä uudelleen muutosten tekemiseksi.

        Toinen tapa, jolla kankaalelementit ja SVG: t eroavat toisistaan, on resoluutio. Canvas-elementit ovat resoluutiosta riippuvaisia. Tämä tarkoittaa, että kun zoomaat kangasosaa, resoluutio heikkenee. SVG, toisaalta, on resoluutiosta riippumaton ja näyttää pikselitäydelliseltä kaikissa uudelleenarvioinnissa.

        Milloin SVG-tiedostoja ja kankaita käytetään

        Kaikki tämä herättää kysymyksen: milloin SVG- ja kankaalelementtejä tulisi käyttää kukin? Vaikka näiden työkalujen soveltamisessa on jonkin verran ristikkäitä, noudata yleensä näitä ohjeita:

        • Käytä SVG-kuvia pikseli-täydellisissä animaatioissa ja grafiikoissa, joiden on näyttävä teräviltä kaiken kokoisissa laitteissa.
        • Käytä SVG-tiedostoja, jos sinun on vältettävä JavaScriptin käyttöä tai jos animaatiosisällön saatavuus on kriittinen.
        • Luo HTML5-kankaalla monimutkaisia ​​animaatioita ja pelejä, jotka sisältävät paljon käyttäjän antamaa tietoa.

        Jos haluat lisätietoja SVG-tiedostojen käytöstä, katso artikkeliimme, jossa verrataan SVG- ja SWF-tiedostoja, joka sisältää luettelon SVG-resursseista. Lisätietoja HTML5-kangaselementistä lukea.

        Canvas-resurssit

        Aloitetaan perusteista:

        • Mozilla Developer Network Canvas -opetus: Tämä opetusohjelma alkaa peruskäytöllä ja kattaa piirustusten muotojen, tekstin, kuvien käytön, muunnosten ja animaatioiden luomisen, pikselin käsittelyn ja muun. Tämän oppaan loppuun mennessä olet luonut edistyneitä animaatioita, jatkuvasti panoroivan panoraaman ja värinvalitsimen sovelluksen.
        • Dev.Opera HTML5 -kangas - perusteet: tämä perusteellinen johdanto kankaalle kattaa piirtotekniikat, kuvankäsittelyn, pikselipohjaisen manipuloinnin sekä tekstin, varjot ja kaltevuudet.
        • W3Schools Canvas -opetus: Opi piirtämisen, koordinaattien, kaltevuuksien, tekstin piirtämisen ja kuvien käsittelyn perusteet. Levitä sitten oppimasi rakentamalla kankaalle kello. Lopuksi koota se kaikki ja luo muutama erilainen HTML5-peruspeli.
        • Eloquent JavaScript, luku 16: Piirrä kankaalle: Tämä teksti on tarkoitettu kouluttamaan JavaScript-ohjelmoijia, ei vain opettamaan web-kehittäjille yksinkertaisia ​​temppuja. Tämä koko vuorovaikutteinen e-kirja on kultakaivos, mutta jos keskitytään vain kankaalelementin kanssa työskentelyn oppimiseen, luku 16 antaa vankan pohjan JavaScriptin ja HTML-kangaselementtien vuorovaikutukselle..

        Kun kankaan perusteet ovat tiukasti käsillä, haluat siirtyä edistyneisiin tekniikoihin:

        • Creative JS 31 Days of Canvas -oppaat: Hallitse kankaaselementti kuukaudessa (enemmän tai vähemmän). Lopeta tämä sarja ja olet oppinut useita edistyneitä kankaan animaatiotekniikoita.
        • HTML5 Rocks Case Studie: Building Racer: katsele tätä tapaustutkimusta ja näet kuinka ammattimaiset insinöörit Googlessa työskentelevät JavaScriptin ja kankaan kanssa.

        Ei ole parempaa tapaa oppia kuin rakentaa jotain. Nämä opetusohjelmat laittavat mitä olet oppinut käyttämään ja osoittavat kuinka luoda joitain yksinkertaisia ​​HTML5-pelejä:

        • CSS-Tricks Canvas -oppiminen: Käärmepelin luominen: CSS-Tricks tunnetaan tarjoamaan teknisesti erinomaisia ​​oppaita ja artikkeleita. Seuraa tätä opetusohjelmaa ja tuottaa hauska käärmepeli samalla kun opit työskentelemään kankaalla Twitterin etuosaajalta..
        • HTML5 Rocks No Tears -oppaat HTML5-peleihin: tämä opetusohjelma opastaa sinut vaihe vaiheelta yksinkertaisen avaruushyökkääjäpelin rakentamisprosessissa..
        • Envato Tuts + Luo HTML5-kankaalle laattavaihtovaiheinen palapeli: opi käyttämään kangasta ja JavaScriptiä laatikoiden vaihtamiseen tarkoitetun palapelin rakentamiseen tässä opetusohjelmassa. Tuloksena on yksinkertainen sovellus, jolla on säädettäviä vaikeuksia ja jota voit käyttää missä tahansa kuvassa.
        • Dev.Opera Pseudo-3D-pelien luominen HTML 5-kankaalla ja Raycasting: Tämä opetusohjelma näyttää sinulle kuinka luoda pseudo-3D-pelikartta HTML5: llä ja kankaalla 90-luvun alkupuolella legendaarisen Wolfenstein 3D -pelin tyyliin. Vaikka tämä opetusohjelma ei tuota toiminnallista 3D-persoonallista ampujapeliä, opit tuottamaan navegable 3D -kartan, jossa on rekvisiitta ja vartijat.

        Ei ole parempaa tapaa kehittää aiheen hallintaa kuin työskennellä yhden tai kahden perusteellisen tekstin läpi. Tässä on kolme parasta tänään saatavilla olevaa HTML5-kangastekstiä:

        • Fultonin ja Fultonin HTML5-kangas (2013): oppia rakentamaan vuorovaikutteisia multimedia-verkkosovelluksia kankaalla ja JavaScriptillä. Tämä teksti kattaa yksinkertaiset 2D-piirustukset, algoritmien käytön matemaattisen liikkeen kehittämiseksi, videon ja kuvien käytön, kangassovellusten tekemisen reagoiviksi ja paljon muuta.
        • Ladattu JavaScript-grafiikka: Raffaele Ceccon HTML5-kankaalla, jQuery ja lisää (2011): Tämä edistyksellinen teksti auttaa sinua hallitsemaan HTML5-kangasta ja sisällyttämään edistyneitä tekniikoita, kuten törmäyksen havaitsemista, esineiden käsittelyä, sujuvaa vieritystä ja Google-tietojen visualisointityökaluja.
        • Core HTML5 -kangas: Grafiikka, animaatio ja pelin kehitys (2011), kirjoittanut David Geary: Tämä ei ole teksti aloittelijoille. Se on suunniteltu luettavaksi kokeneille kehittäjille, joilla on keskitason JavaScript-käsitys. Vaikka tämä teksti kattaa kankaalle perusteet, siinä keskitytään edistyneisiin aiheisiin, kuten pelien kehittämiseen, mukautettujen sovellusten hallintaan, fysiikan soveltamiseen HTML5-peleihin ja mobiilisovellusten kehittämiseen..

        Interaktiiviset elementit

        HTML5 on lisännyt muutama ominaisuus interaktiivisten verkkosivujen luomisen helpottamiseksi.

        Yksityiskohdat ja yhteenvetotunnisteet

        HTML5: n avulla on mahdollista luoda luetteloita, joita voidaan laajentaa ja tiivistää tunnisteiden läpi. Vaikka luettelomerkit voidaan luoda aivan kuten aiempien HTML-versioiden kanssa käyttämällä

          ja
        • tunnisteet, ne ovat staattisia, eikä niitä voi tiivistää.
          elementti

          Jotta luetteloon saataisiin lähtökohta, kehittäjien on aloitettava elementistä. Tämä elementti toimii samalla tavalla kuin

            tag. Seuraava esimerkki näyttää tavan aloittaa koodisegmentti tällä tunnisteella:

            ...

            Tietotunnisteiden lisääminen ei riitä täydentämään luetteloa. Yhteenvetotunnisteet on myös lisättävä.

            elementti

            Yhteenvetotunniste määrittelee tunnisteen, jota käytetään luettelossa, jota voidaan laajentaa ja kutistaa. Kohteet, jotka voivat tiivistyä ja laajentua, määritetään sisällön perusteella suoraan yhteenveto-tunnisteen alla.

            Yhteenvetotunnisteen sisältö voidaan määrittää millä tahansa HTML-elementillä mukaan lukien

            tai

              . Seuraava on yksinkertainen esimerkki tunnisteiden käytöstä:

              Luettelotunniste

              Yksityiskohtaiset tiedot menevät tähän...

              Ja tunnisteet on myös mahdollista sijoittaa toiseen sarjaan. Tämä luo kokoontaitettavan / laajennettavan luettelon toiseen luetteloon.

              Tässä on esimerkki toisessa luettelossa olevasta luettelosta, jossa käytetään ja -tageja:

              Tuoteluettelo

              Kohta 1

              Kohta 2

              Kohta 3

              Kohta a

              Kohta b

              Kohta 4

              Tietoja ja tiivistelmätageja voidaan käyttää luomalla efekti luetteloille, jotka dynaamisesti avautuvat ja sulkeutuvat verkkosivulle. Tätä voidaan käyttää useissa tilanteissa, mukaan lukien usein kysyttyjä kysymyksiä, jotka sisältävät vastauksia kysymyksiin, jotka voidaan avata tai sulkea.

              Yhteenvetotunniste sisältää kysymyksen, kun taas kokoontaitettava sisältö täytetään vastauksen kanssa.

              Valikko- ja Menuitem-tunnisteet

              Verkon selailun aikana käyttäjät pääsevät selaimen valikkoon hiiren oikealla painikkeella. Esitetyt valikkokohteet vaihtelevat selaimesta toiseen. Joillakin uusilla HTML5-tunnisteilla on mahdollista mukauttaa valikkoa lisäämään käyttäjien mahdollisia lisätoimintoja.

              Lisäksi toimet voidaan räätälöidä tiettyihin osioihin tai paikkoihin itse verkkosivulla. Esimerkiksi, eri toiminnot tai valikkokohteet voidaan näyttää navigointialueella verrattuna verkkosivun pääosaan.

              Tunnisteet, jotka tekevät tämän mahdolliseksi, ovat ja. Koska nämä ovat kokeellisia tunnisteita, niitä ei tueta laajalti. Firefox on ainoa merkittävä selain, joka tällä hetkellä tukee niitä.

              elementti

              Aina kun valikkokohta on lisättävä, alkusarjan on alkava tunnisteella. Tämä sarja päättyy lopputunnisteella, .

              Kehittäjien tulee olla varovainen näiden tunnisteiden käyttämisessä, koska ne ovat kontekstivalikoita ja näkyykö ne riippuen siitä, missä koodi sijoitetaan HTML-tiedostoon. Tämä pätee erityisesti, kun kehittäjät käyttävät elementtejä. Harkitse seuraavaa koodia:

              ...

              Tällöin mukautetun valikon elementit ilmestyvät, kun käyttäjä napsauttaa hiiren painiketta hiiren oikealla painikkeella ”tmpDiv” -kohdassa. Kuten useimmat HTML5-tunnisteet, myös valikkotunnisteessa on määritteitä, joita kutsutaan tunnisteeksi ja tyypiksi.

              Tarra on yksinkertaisesti valikon tunniste, kun tyyppi voidaan määrittää joko konteksti, luettelo tai työkalurivi. Vaikka useita valikkotyyppejä voidaan määritellä, tuetaan vain kontekstivalikkoa.

              elementti

              Jos haluat lisätä kohteita valikkoon, kehittäjien on määritettävä kohteiden nimet tunnisteen avulla. Tunnisteessa on joitain ominaisuuksia, jotka vaikuttavat sekä valikkokohteen ulkoasuun että käyttäytymiseen.

              Menuitem-tunnisteen määritteet sisältävät tarran, kuvakkeen ja napsautuksen.

              Tarra määrittelee tekstin, jonka käyttäjä näkee valikkokohteelle, kun valikko aktivoidaan selaimesta. Kehittäjät voivat määrittää valikkokohteessa käytettävän kuvakkeen, joka ilmestyy tekstin vasemmalle puolelle. Onclick-määrite ohjaa toimia, jotka suoritetaan, kun käyttäjä aktivoi valikkokohteen.

              Onclick-määritteen suorittamat toimet voivat suorittaa javascript-koodin. Käyttäjät voivat esimerkiksi nähdä hälytysruudun. Tässä on esimerkki siitä, kuinka määrität menuitem-tunnisteen, joka näyttää ponnahdusikkunan, jossa sanotaan “hello”:

              Valikko- ja menuitem-tunnisteita voidaan käyttää erikoisvalikoiden luomiseen. Tämän avulla käyttäjät voivat suorittaa erilaisia ​​toimia napsautetusta valikkokohteesta riippuen. Varo kuitenkin näiden tunnisteiden rajoitettua tukea.

              Alkuperäinen vedä ja pudota

              Ennen HTLM5: tä kehittäjien piti käyttää JavaScript-kirjastoja, kuten jQuery UI tai Dojo, vetää ja pudottaa -animaatioita verkkosivustoihin ja sovelluksiin..

              HTML5 lisää kuitenkin natiiviselaimen tuen vedä ja pudota -tapahtumille, JavaScript-sovellusliittymän ja erityisen merkinnän näiden vuorovaikutusten tukemiseksi. Tässä osassa tarkastellaan HTML5-sovelluksen vetämistä ja koodaamista ja koodataan tämän ominaisuuden perustoteutus.

              Rakennuspalikoita

              Vedä ja pudota -vuorovaikutuksen rakentamiseksi HTML-merkintöihin on sisällytettävä kolmen tyyppisiä elementtejä:

              • Lähdeelementti: vetävä elementti, jonka HTML5-määrite määrittää sellaisenaan draggable ="totta".
              • Kohdeelementti: elementti, josta vetävä elementti pudotetaan, jota HTML5-määrite määrittää droppable ="totta".
              • Hyötykuorma: siirrettävät tiedot, kun vetävä elementti pudotetaan.

              Vedä ja pudota API-tapahtumat

              JavaScript-sovellusliittymä sisältää kuusi tapahtumaa ja yhden objektin, joita sinun on käytettävä luomiseen vetämällä-vuorovaikutusta.

              • Vedon aloitustapahtuma välähtää, kun vetävä objekti on valittu.
              • Dragenter-tapahtuma välähtää, kun hiiren osoitin tulee pudotettavissa olevaan kohteeseen, kun vetävä objekti on valittu.
              • Vetotapahtuma välähtää aina, kun hiiri liikkuu, kun vetävä objekti on valittu ja hiiren osoitin on pudotettavan objektin päällä..
              • Vedosuojatapahtuma välähtää, kun vetävä objekti on valittu ja hiiren osoitin jättää pudotettavan objektin.
              • Dragend-tapahtuma laukeaa, kun vetävän objektin valinta poistetaan vapauttamalla hiiren painike tai poistuttamalla selainikkunasta.
              • Pudotustapahtuma välähtää, kun vetävä objekti pudotetaan pudotettavalle esineelle.
              • DataTransfer -objektia käytetään vetämän datan pitämiseen.

              Vedä ja pudota-esimerkki

              Osoitamme, kuinka voit käyttää HTML5-vedä ja pudota -ominaisuuksia verkkosivustollasi, luomalla yksinkertainen widget, jonka avulla verkkosivuston kävijä voi järjestää kolme elementtiä järjestykseen, joka vastaa heidän toiveitaan.

              Tämän esimerkin inspiraationa ollut artikkeli on HTML5 Rocks: Native HTML5: n vedä ja pudota.

              Aloitetaan HTML-koodilla

              Suosikki DnD-toteutus
              HTML51
              jQuery UI2
              Dojo3

              Olemme luoneet kolme osiota, joista jokainen sisältää vähän tekstiä, joka liittyy erilaiseen vetämis- ja pudotussovellukseen. Olemme myös menneet eteenpäin ja järjestäneet kaikki kolme oletusjärjestykseen määritettyjen asetusten 1, 2 ja 3 kanssa.

              Jokaiselle div: lle on annettu attribuutti droppable ="totta" ja vetävä ="totta" heijastaa sitä tosiasiaa, että aiomme tehdä kaikki kolme vaihdettavaa keskenään.

              Annetaan lisätä joitain perusmuotoiluja.

              #boxes {
              tekstin kohdistaminen: keskusta;
              leveys: 100%;
              max-leveys: 658px;
              marginaali: 0 auto;
              marginaali: 0 auto;
              kirjasinperhe: 'Source Sans Pro', FreeSans, Arimo,"Droid Sans",Helvetica, Arial, sans-serif;
              ylivuoto: automaattinen;
              }
              .otsikko {
              näyttö: estää;
              kirjasinkoko: 1,25 em;
              täyte: 10px;
              }
              .laatikko {
              taustaväri: # bcd5e0;
              reuna: 2px kiinteää #aaa;
              marginaali: 10 px;
              kohdistin: siirrä;
              ylivuoto: automaattinen;
              }
              .laatikko .dnd-tech {
              kirjasinkoko: 1em;
              näyttö: inline-block;
              täyte: 10 x 0;
              }
              .laatikko .sijainti {
              kirjasinkoko: 1em;
              kellua: vasen;
              täyte: 10px;
              reuna-oikea: 2px kiinteä #aaa;
              väri: #fff;
              taustaväri: # 0a5194;
              }

              Vaikka emme mene yli näiden tyylien riviltä, ​​käytännössä olemme tehneet asettamalla laatikot vierekkäin ja soveltamalla muotoilua kaikkialle. Tässä on mitä laatikomme näyttävät tällä hetkellä:

              Raahaa ja pudota

              Luodaan joitain tyylejä, joita käytetään vetävissä ja pudotettavissa olevissa elementeissä, kun niitä vedä ja pudota.

              .box.dragged {
              opasiteetti: 0,5;
              }
              .box.over {
              reunus: 2px katkoviiva # 222;
              opasiteetti: 0,5;
              }

              Päälle JavaScriptiin. Aloitetaan luomalla toimintoja, jotka käsittelevät vedettyjen ja yli luokkien lisäämistä ja poistamista käyttäjän toiminnan perusteella.

              toiminto dragStartHandler (e) {
              this.classList.add ('vedetty');
              }

              toiminto dragEnterHandler (e) {
              this.classList.add ('yli');
              }

              toiminto dragLeaveHandler (e) {
              this.classList.remove ( 'over');
              }

              toiminto dragEndHandler (e) {
              [] .forEach.call (laatikot, toiminto (laatikko) {
              box.classList.remove ('yli', 'vedä');
              });
              }
              var laatikot = document.querySelectorAll ('# laatikot .box');

              Tällä hetkellä nämä toiminnot eivät tee mitään. Sidomme jokaisen hetkessä sopivaan tapahtumaan. Katsotaan nyt, mitä kukin tekee.

              Ensimmäinen toiminto, dragStartHandler, lisää vedetyn luokan vedettyyn elementtiin.

              Seuraavat kaksi toimintoa lisäävät ja poistavat yli-luokan pudotettavissa olevista elementeistä, kun vedetty elementti kulkee niiden yli.

              Viimeinen toiminto toistuu kaikkien ruutujen läpi ja poistaa yli- ja vedetyt luokat.

              Seuraavaksi meidän on kirjoitettava toiminto, joka suorittaa pienen siivoustyön dragover-tapahtuman käsittelemiseksi.

              toiminto dragOverHandler (e) {
              if (e.preventDefault) {
              e.preventDefault ();
              }
              palauta väärä;
              }

              Kun sitomme tämän toiminnon dragoveriin, se poistaa käytöstä selaimen oletuskäyttäytymisen, joka voi joskus estää vetämällä ja pudottamalla -toiminnon aikana.

              Seuraavaksi meidän on lisättävä koodi kahteen eri funktioon, jotta dataTransfer -objektin avulla voidaan valita tiedot, joita vuorovaikutus siirtää..

              toiminto dragStartHandler (e) {
              this.classList.add ('vedetty');

              dragData = tämä;
              e.dataTransfer.setData ('teksti / html', this.firstElementChild.innerHTML);
              }

              toiminto dropHandler (e) {
              if (e.stopPpapagation) {
              e.stopPropagation ();
              }
              if (dragData! = tämä) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html');
              }
              palauta väärä;
              }

              Olemme jo nähneet dragStartHandler-toiminnon, mutta nyt olemme lisänneet kaksi riviä. Ensimmäinen määrittää vedetyn ruudun muuttujalle dragData.

              Toinen käyttää dataTransfer-objektin setData-menetelmää osoittaakseen valitun ruudun ensimmäisen alaelementin (Nimi-elementti) sisäisen HTML: n dataTransfer -objektille.

              DropHandler-toiminto lopettaa ensin selaimen oletuskäyttäytymisen. Seuraavaksi se tarkistaa varmistaakseen, että vetävä objekti ei ole myös pudotettava esine. Jos ei ole, seuraavat kaksi riviä aloittavat ja vaihtavat vetävien ja pudotettavien laatikoiden nimet.

              Joten, nyt meillä on kaikki toiminnot paikoillaan, ja meidän on sidottava ne kuuteen DOM-tapahtumaan. Voimme tehdä sen yhdellä forEach-toiminnolla.

              [] .forEach.call (laatikot, toiminto (laatikko) {
              box.addEventListener ('dragstart', dragStartHandler, false);
              box.addEventListener ('dragenter', dragEnterHandler, false);
              box.addEventListener ('dragover', dragOverHandler, false);
              box.addEventListener ('dragleave', dragLeaveHandler, false);
              box.addEventListener ('pudota', dropHandler, väärä);
              box.addEventListener ('dragend', dragEndHandler, false);
              });

              Tämä koodi ei kuuntele kaikkia kuutta vetämis- ja pudotustapahtumaa jokaisessa ruudussa ja suorita sitten toiminto, joka perustuu mahdollisiin laukaiseviin tapahtumiin. Kun olemme koonnut kaiken koodin, tuotamme tämän mukavan sarjan vetäviä ja pudotettavissa olevia laatikoita. Kokeile sitä:

              #boxes {
              tekstin kohdistaminen: keskusta;
              leveys: 100%;
              max-leveys: 658px;
              marginaali: 0 auto;
              kirjasinperhe: 'Source Sans Pro', FreeSans, Arimo, 'Droid Sans', Helvetica, Arial, sans-serif;
              ylivuoto: automaattinen;
              }
              .otsikko {
              näyttö: estää;
              kirjasinkoko: 1,25 em;
              täyte: 10px;
              }
              .laatikko {
              taustaväri: # bcd5e0;
              reuna: 2px kiinteää #aaa;
              marginaali: 10 px;
              kohdistin: siirrä;
              ylivuoto: automaattinen;
              }
              .laatikko .dnd-tech {
              kirjasinkoko: 1em;
              näyttö: inline-block;
              täyte: 10 x 0;
              }
              .laatikko .sijainti {
              kirjasinkoko: 1em;
              kellua: vasen;
              täyte: 10px;
              reuna-oikea: 2px kiinteä #aaa;
              väri: #fff;
              taustaväri: # 0a5194;
              }
              .box.dragged {
              opasiteetti: 0,5;
              }
              .box.over {
              reunus: 2px katkoviiva # 222;
              opasiteetti: 0,5;
              }

              Suosikki DnD-toteutus

              HTML51
              jQuery UI2
              Dojo3

              toiminto dragStartHandler (e) {
              this.classList.add ('vedetty');

              dragData = tämä;
              e.dataTransfer.setData ('text / html', this.firstElementChild.innerHTML);

              }

              toiminto dragEnterHandler (e) {
              this.classList.add ('yli');
              }

              toiminto dragLeaveHandler (e) {
              this.classList.remove ( ’over’);
              }

              toiminto dragOverHandler (e) {
              if (e.preventDefault) {
              e.preventDefault ();
              }
              palauta väärä;
              }

              toiminto dropHandler (e) {
              if (e.stopPpapagation) {
              e.stopPropagation ();
              }
              if (dragData! = tämä) {
              dragData.firstElementChild.innerHTML = this.firstElementChild.innerHTML;
              this.firstElementChild.innerHTML = e.dataTransfer.getData ('text / html');
              }
              palauta väärä;
              }

              toiminto dragEndHandler (e) {
              [] .forEach.call (laatikot, toiminto (laatikko) {
              box.classList.remove ('yli', 'vedä');
              });
              }

              var laatikot = document.querySelectorAll ('# laatikot .box');
              [] .forEach.call (laatikot, toiminto (laatikko) {
              box.addEventListener ('dragstart', dragStartHandler, false);
              box.addEventListener ('dragenter', dragEnterHandler, false);
              box.addEventListener ('dragover', dragOverHandler, false);
              box.addEventListener ('vedä', dragLeaveHandler, väärä);
              box.addEventListener ('pudota', dropHandler, väärä);
              box.addEventListener ('dragend', dragEndHandler, false);
              });

              Mitä odotat?

              HTML5 lisää natiiviselaimen tuen vetäville ja pudotettavissa oleville elementeille. Vedä ja pudota -toiminnon toteuttaminen sisältää kuuden eri vedä ja pudota -tapahtuman ja yhden tietoobjektin manipuloinnin JavaScriptin avulla.

              iframe

              Pohjimmiltaan iframe on HTML-elementti, joka luo pienen selainikkunan, joka on sijoitettu verkkosivulle, johon voit ladata minkä tahansa HTML-asiakirjan.

              Mihin Iframe-kehyksiä käytetään?

              Yksi yleisimmistä iframe-kehyksen käytöistä nykyaikaisessa Webissä on virtausmedian upottaminen verkkosivulle. Mediavirtaussivustot, kuten Spotify, Vimeo ja YouTube, käyttävät iframe-kehyksiä, jotta niiden sisältö voidaan upottaa muihin verkkosivustoihin.

              Siirry esimerkiksi YouTubeen, avaa mikä tahansa video, napsauta videota hiiren kakkospainikkeella ja valitse Kopioi upotuskoodi. Kun teet, koodi, joka näyttää tällaiselta, kopioidaan leikepöydälle:

              Lisää tämä bitti koodia verkkosivulle ja iframe-kehystä käytetään YouTube-videon lataamiseen, jota ylläpidetään src-määritteen viitteessä URL-osoitteessa.

              Median suoratoisto ei ole ainoa asia, jos kehykset ovat hyviä. Toinen tapa, jolla iframe-kehyksiä käytetään, on eristää sisältö muusta verkkosivusta. Tässä on kaksi esimerkkiä:

              • Sivustot, jotka sisältävät paljon koodia opetusohjelmissa, voivat käyttää iframe-kehyksiä koodin tuottamiseen ilman, että joudutaan taistelemaan heidän verkkosivustoihinsa liittyviä oletustyylejä ja komentosarjoja vastaan.
              • Sivustot, joissa näytetään kolmansien osapuolien mainoksia, lataavat nämä mainokset usein iframe-kehyksiä, jolloin mainokset voidaan muuttaa pois korvaamalla lähdeasiakirjan koodi tekemättä mitään koodia verkkosivulle, jolla mainos näytetään.

              HTML 4.01: n iframe-kehys

              Iframe-elementti otettiin käyttöön HTML 4.01: ssä, ja se sisältää neljä pääominaisuutta:

              • src: määrittelee iframe-kehykseen esitettävän HTML-asiakirjan URL-osoitteen.
              • leveys ja korkeus: ilmaisee iframe-kehyksen koon pikseleinä.
              • nimi: sallii iframe-kehyksen kohdistamisen lomakkeella, painikkeella tai syöttöelementeillä.

              HTML 4.01 sisälsi myös joukon muita määritteitä, joilla on toissijainen merkitys. Monet näistä olivat kuitenkin vanhentuneita tai poistettu suorasta HTML5-versiosta.

              Iframe-määritteet poistettu HTML5: llä

              Suurin poistettujen määritteiden ryhmä oli ne, jotka osoittivat tekijöitä, jotka ovat paremmin käsiteltävissä CSS: ssä.

              • Kohdistusattribuutti poistettiin kelluvan, näytön ja marginaalisen CSS-ominaisuuksien käytön eduksi iframe-asettelun hallitsemiseksi..
              • Kehysraja-ominaisuus poistettiin CSS-rajojen hyväksi.
              • Marginaali- ja marginaalimääritteet poistettiin CSS-pehmusteen hyväksi.
              • Vieritysominaisuus oli vanhentunut ylivuodon soveltamisen hyväksi: piilotettu; piilottaa iframe-kelauspalkit.

              Yksi lisäominaisuus, longdesc, on kärsinyt laajalle levinneestä väärinkäytöstä. Tämän seurauksena se on nyt vanhentunut.

              Iframe-attribuutit on lisännyt HTML5

              HTML5 lisäsi iframe-elementtiin kaksi uutta attribuuttia: hiekkalaatikko ja srcdoc.

              Hiekkalaatikkomääritystä käytetään iframe-sisällön ominaisuuksien rajoittamiseen.

              Esimerkiksi yksinkertaisesti lisäämällä hiekkalaatikko iframe-kehykseen estää merkityn sisällön suorittamasta skriptejä, lähettämästä lomakkeita, lataamasta sisältöä ylimmän tason selauskontekstiin ja muita asioita. Iframe-kehykseen sovellettuja rajoituksia voidaan vähentää lisäämällä arvo attribuuttiin.

              Esimerkiksi hiekkalaatikko ="sallivat-lomakkeet" sallii iframe-kehyksen lomakkeiden toimittamisen. Tämän ominaisuuden lisäarvot sisältävät, mutta eivät rajoitu näihin, sallia ponnahdusikkunat, sallia saman lähteen, sallia skriptit ja sallia top-navigointi.

              Srcdoc-määritteellä voidaan määrittää HTML, joka annetaan iframe-kehykseen. Esimerkiksi seuraava koodi tuottaa kuvan iframe-kehyksessä:

              Iframe-resurssit

              Jos haluat lisätietoja iframe-kehyksistä, yksi kattavimmista lähteistä on Mozilla Developer Network Iframe -elementin viitesivu. Täältä löydät yksityiskohtaisen kuvauksen jokaisesta iframe-määritteestä, mukaan lukien perusteellinen keskustelu kaikista mahdollisista hiekkalaatikon arvoista.

              Microdata

              Kun vierailet hosting-arvosteluissamme, saatat nähdä jotain “752 arvostelua” ja “4 out 5 stars” isäntäluokitus. Instinktiivisesti ymmärrät, että 752 käyttäjäarvostelua on yhdistetty luomaan kokonaisisäntäluokitus 4/5 tähteä.

              Hakukoneet eivät kuitenkaan ole aivan yhtä älykkäitä kuin sinä, ja sinne mikrotiedot tulevat.

              Mikrotiedot on joukko HTML-määritteitä, jotka lisättiin osana HTML5-eritelmää, jotta saadaan koneellisesti luettavia tarroja tietyntyyppiselle sisällölle. Näiden tunnisteiden avulla hakukoneet voivat paremmin ymmärtää ja indeksoida sivustosi sisältöä ja tuottaa parempia hakutuloksia.

              Mikrodatan perusteet

              Mikrotiedot koostuvat liittyvistä nimellis-arvo-pareista, jotka on ryhmitelty yhteen osaan. Katsotaanpa yleistä esimerkkiä.

              Aloitamme tuotteella, kuten verkkosivustolla. Kun tiedämme, että käsittelemme verkkosivustoa, on monia nimi-arvo-pareja, jotka voimme mahdollisesti liittää kyseiseen verkkosivustoon, kuten URL, verkkosivun nimi tai kuvaus.

              Luodaan mikrotietoelementti aloittamalla luomalla pääelementin, joka sisältää kaikki verkkosivuston mikrotiedot. Sitten listaamme mikrotiedot alaelementeissä ja merkitsemme ne asianmukaisilla mikrotietojen tunnisteilla.

              Loppujen lopuksi hakukone pääsee sivulle, tunnistaa verkkosivustotunnuksen ja liittää kaikki asianmukaiset mikrotiedot kyseiseen kohtaan.

              Jos tämä kaikki kuulostaa hiukan abstraktilta nyt, mikrotietojen todellisten merkintöjen näkeminen tekee siitä kaiken selkeämmän. Mutta ennen kuin voimme tehdä niin, meidän on otettava käyttöön mikrotiedot-määritteet.

              Mikrotietojen merkintä

              On olemassa neljä mikrotietomääritteitä, jotka ovat osa HTML5-eritelmää:

              • itemcope on ominaisuus, joka luo uuden kohteen.
              • itemtype lisätään itemcope-riville luotavan kohteen tyypin määrittelemiseksi. Useimmissa tapauksissa käytetään schema.org-alkiotyyppiä.
              • itemprop lisätään jokaiseen elementtiin, joka sisältää tyypin ominaisuuden.
              • itemref lisätään itemscope-elementtiin, ja se yhdistää elementit, jotka eivät ole suoran elementin jälkeläisiä kohteen kanssa.

              Lisäämme kaikki nämä ominaisuudet kuvitteelliseen verkkoisäntäluokitukseen, jotta näet ne kaikki toiminnassa.

              Super Linux-hosting

              Rated:
              4/5 tähteä kirjoittanut
              423 todellista käyttäjäarvostelua.

              Esitelty käyttäjän arvostelu

              Tämä on loistava isäntä! minä pidän niistä!
              5/5 tähteä!

              Yllä oleva koodi luo alkion, joka sisältää useita nimi-arvo-pareja:

              • Ensin loimme yhtiökohteen.
              • Kohteen nimeksi on asetettu Super Linux Hosting.
              • Kohteen URL-osoitteeksi on asetettu http://superlinuxhosting.com
              • Alkukohtainen arvostelu on sisäkkäinen esine, joka sisältää kaksi nimi-arvo-paria: luokitusarvolla 4/5 tähteä ja arvostelukertoimella 423.
              • Viimeisenä, aivan ensimmäiseen elementtiin lisätyn itemref-attribuutin avulla viimeinen nimi-arvo-pari on arvostelu, jonka arvo sisältää kaksi nimi-arvo-paria: kuvauksen ja arvosanan 5 out of 5 stars.

              Mikrotietojen läsnä ollessa Google ja muut hakukoneet indeksoivat tiedot ja tunnustavat Super Linux Hosting -yrityksen ja siihen liittyvän kokonaisarvioinnin ja yksittäisen arvioinnin.

              Mikrotiedot

              Jos haluat lisätietoja mikrotiedoista, sinun on mentävä kahteen kohtaan:

              • Schema.orgin käytön aloittaminen Mikrodatan käyttäminen on helppo seurata tämän aiheen johdannosta. Lisäksi haluat pitää tämän luettelon kaikista schema.org-alkiotyypeistä kätevänä.
              • HTML: Living Standard, osa 5, mikrotiedot on tekninen katsaus mikrotietoihin. Jos haluat oppia käyttämään mikrotietoja muissa sovelluksissa kuin schema.org, tämä on etsimäsi resurssit.

              Globaalit ominaisuudet

              Attribuutteja voidaan lisätä mihin tahansa HTML-elementtiin elementin oletustoimintojen tai käyttäytymisen muuttamiseksi. Ne lisätään nimeämällä attribuutti ja määrittämällä sitten attribuutin arvo elementin avaustunnisteessa, kuten tämä:

              Sisältö

              Suurinta osaa määritteistä voidaan soveltaa vain tietyntyyppisiin elementteihin. Muita määritteitä, joihin viitataan globaaleina määritteinä, voidaan kuitenkin käyttää minkä tahansa HTML-elementin kanssa. HTML5-määritys määrittelee seuraavat globaalit määritteet:

              • pääsynäppäin: määrittää pikanäppäimen elementille.
              • luokka: lisää luokan nimen, jotta elementti voidaan kohdistaa CSS: n (CSS) avulla muotoiluun tai JavaScript-ohjelmaan.
              • contenteditable: tekee elementistä muokattavissa verkkosivuston kävijän toimesta.
              • kontekstivalikko: yhdistää mukautetun kontekstivalikkovaihtoehdon elementtiin.
              • data- *: mukautettu dataattribuutti, jota voidaan käyttää sivukohtaisten tietojen säilyttämiseen käytettäväksi CSS-tyylitaulukoissa tai JavaScript-ohjelmissa.
              • dir: määrittää suuntaavuuden elementin tekstisisältöön.
              • vetävä: sallii elementin vetämisen käyttämällä alkuperäistä HTML5-tukea tuki-ja pudota -tapahtumiin.
              • pudotusvyöhyke: määrittelee toiminnan, jonka tulisi tapahtua, kun vetävä esine pudotetaan. Vaihtoehtoja ovat kopiointi, linkitys ja siirtäminen.
              • piilotettu: käytetään elementin piilottamiseen, kunnes se pitäisi näyttää. Attribuutti poistetaan JavaScriptillä tarvittaessa.
              • id: antaa elementille yksilöivän tunnisteen.
              • lang: määrittelee liittyvän elementin sisällön kielen.
              • oikeinkirjoituksen tarkistus: määrittää, onko käyttäjän syötteitä tarkistettava oikeinkirjoituksen varalta.
              • tyyli: sallii CSS-tyylien liittämisen suoraan HTML-elementtiin.
              • tabindex: määrittää sijainnin välilehtihakemistossa, jossa elementin tulisi näkyä.
              • otsikko: lisää tekstin, joka näytetään työkaluvinkinä, kun vierailija siirtää hiiren elementin päälle.
              • kääntää: käytetään estämään tiettyjen HTML-elementtien tekstisisällön selaimen kääntäminen.

              Tapahtumien käsittelijät

              Lisäksi on yli 50 tapahtumakäsittelijää, jotka voidaan lisätä HTML-määritteinä mihin tahansa HTML-elementtiin. Jokaista näistä tapahtumakäsittelijöistä voidaan käynnistää jonkin liittyvän koodin suorittamiseksi tapahtuman tapahtuessa.

              Alla oleva luettelo sisältää kaikki tapahtumakäsittelijän määritteet, joita seuraa kuvaus tapahtumasta, joka laukaisee käsittelijän.

              On syytä huomata, että monet näistä tapahtumakäsittelijöistä ovat sovellettavissa vain muutamiin HTML-elementteihin, huolimatta siitä, että HTML-määritelmä sallii niiden soveltamisen mihin tahansa HTML-elementtiin.

              • onabort: elementin lataus on keskeytetty.
              • onfocus ja onblur: elementti on vastaanottanut tai menettänyt tarkennuksen.
              • oncancel: käyttäjät ovat hylänneet valintaikkunan.
              • oncanplay ja oncanplaythrough: mediaelementti on ladannut tarpeeksi dataa toiston aloittamiseksi tai toiston suorittamiseksi puskuroimattomana.
              • onchange: a lomakeelementin, kuten syöttö- tai tekstielementin, arvo on muuttunut.
              • onclick ja ondblclick: elementtiä on napsautettu tai kaksoisnapsautettu.
              • onclose: yksi monista läheisistä tapahtumista on tapahtunut.
              • oncontextmenu: pikavalikko on avattu napsauttamalla elementtiä hiiren kakkospainikkeella.
              • onkopia, leikkaus ja pasta: kohdennettu elementti on leikattu, kopioitu tai liitetty.
              • oncuechange: mediaresurssiin liittyvä tekstiraita on muuttanut näytössä olevat viitteet.
              • ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop: vetävää elementtiä manipuloidaan HTML5: n vedä ja pudota -sovellusliittymän avulla.
              • ondurationchange: mediaelementin kesto-ominaisuus on muuttunut.
              • vapautettu: mediaelementti on tyhjä.
              • onended: mediaelementin loppu on saavutettu.
              • virhe: resurssin lataus epäonnistui.
              • oninput: syötetyn tai kiistanalaisen elementin arvo on muuttunut.
              • ei kelpaa: lähetetyn elementin validointi epäonnistui.
              • onkeydown, onkeypress ja onkeyup: näppäimistön näppäinpainalluksen tapahtuma on tapahtunut.
              • onload, onloadeddata, onloadedmetadata, onloadstart: joko koko resurssi tai määritetty resurssin osa on ladattu.
              • onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover ja onmouseup: käyttäjän ja elementin välillä on tapahtunut hiirepohjainen vuorovaikutus.
              • pyörä: hiiren pyöräpainiketta on käännetty.
              • toisto ja toisto: mediaelementti on aloittanut toiston tai on keskeytetty (joko tarkoituksella tai odottaessasi lisätietoja) ja on valmis jatkamaan toistoa.
              • onpause: median toisto on keskeytetty.
              • käynnissä: operaatio on alkanut ja on käynnissä.
              • onratechange: median toistonopeus on muuttunut.
              • onreset: lomakeelementti on nollattu.
              • onresize: asiakirjan näkymäportin koko on muuttunut.
              • onscroll: näkymäportti tai elementti on vieritetty.
              • onseeked ja onseeking: mediaelementin hakuominaisuus on käytetty tai sitä käytetään.
              • onselect: osa elementin sisällöstä on valittu.
              • onshow: pikavalikko on avattu, kun taas keskittyvällä elementillä on kontekstivalikkomääritys.
              • asennettu: median haku on viivästynyt tai pysähtynyt odottamatta.
              • lähetä: lomake-elementti on lähetetty.
              • onsuspend: mediaelementin lataus on keskeytetty.
              • ontimeupdate: mediaelementin nykyinen aikatunnus on päivitetty.
              • onggle: yksityiskohtaelementti on avattu tai suljettu.
              • onvolumechange: mediaelementin toiston voimakkuus on muuttunut.
              • odottaa: toisto on pysähtynyt odottaen lisää tietojen lataamista.

              DOM-elementit

              Kun selain näyttää verkkosivun, se ei yksinkertaisesti tee verkkosivun HTML-muotoa. Sen sijaan selain rakentaa ensin paikallisen, interaktiivisen mallin sivun HTML-sisällöstä.

              Tätä mallia, joka on rakennettu ja jota pidetään paikallisesti selaimen muistissa, kutsutaan asiakirjaobjektimalliksi (Document Object Model, DOM). DOM: n sisällä jokainen HTML-elementti esiintyy yhtenä solmuna, ja solmujen summa muodostaa DOM: n.

              Pääsy DOM: iin

              Jotta JavaScriptin kaltaiset skriptauskielen olisivat vuorovaikutuksessa DOM: n kanssa, jokaisen solmun on oltava soitettavia käyttäen standardisoituja kielestä riippumattomia määritteitä ja menetelmiä..

              Nämä ominaisuudet ja tapahtumat määritetään käyttöliittymämäärityskielellä (IDL) ja nämä IDL-määritteet ja tapahtumat altistavat DOM-solmut skripteille, jotka on kirjoitettu millä tahansa ohjelmointikielellä, vaikka JavaScript on ylivoimaisesti yleisin.

              Tuloksena on järjestelmä, joka vie HTML-elementin (esimerkiksi:

              Jotkut teksti

              ) ja luo DOM-solmun, joka sisältää kaikki nämä tiedot (esimerkiksi: p-solmu, jonka arvo on Jotkut tekstit ja IDL-määritteet className ="leipäteksti" ja otsikko ="esimerkki").

              Komentosarjojen kieliä voidaan sitten käyttää manipuloimaan DOM-solmuja viittaamalla solmun IDL-määritteisiin.

              IDL: n perusominaisuudet ja menetelmät

              HTML5-määritys määrittelee HTMLElement-käyttöliittymän ja luettelee joukon IDL-määritteitä ja menetelmiä, joita sovelletaan kaikkiin HTML-elementteihin.

              Jokainen yksittäinen DOM-solmu perii kaikki nämä IDL-määritteet ja menetelmät ja voi halutessaan laajentua HTMLElement-käyttöliittymään lisäämällä lisäominaisuuksia ja menetelmiä.

              HTMLElement-käyttöliittymä

              HTMLElement-käyttöliittymä koskee kaikkia DOM-solmuja ja voidaan jakaa kolmeen ryhmään: metatietomääritteet, käyttäjän vuorovaikutukset ja globaalit tapahtumakäsittelijät.

              Metatietomääritteet sisältävät:

              • Otsikon IDL-määrite määritetään otsikon HTML-määrite.
              • Lang IDL -määritteen asettaa lang HTML -ominaisuus, ja sitä käytetään DOM-solmussa sisäkkäisen sisällön kielen tunnistamiseen. Jos lang-attribuuttia ei tarjota, lähimmälle emo-solmulle määritetty kieli viittaa.
              • Kääntämisominaisuutta käytetään estämään verkkosivun sisällön kääntäminen asiakkaalle. Attribuutin oletusarvo on käännös = kyllä ​​asiakirjatasolla ja se on asetettava manuaalisesti kääntämään = ei kaikille solmuille, joita ei pidä kääntää.
              • Dir -attribuutti määrittää sisältämän tekstin suunnan. Määritteellä ei ole oletusarvoa.
              • tietojoukon IDL-määrite on mukautettujen dataominaisuuksien tietojen * vain DOM-esitys. Kun mukautettuja datamääritteitä lisätään HTML-elementtiin, esimerkiksi data-postId ="6057", nämä dataattribuutit yhdistetään yhdeksi tietojoukon IDL-määritteeksi ja määritetään tuloksena olevalle DOM-solmulle.

              Käyttäjien vuorovaikutusta ovat:

              • Piilotettu attribuutti on boolean, joka määrittää onko DOM-solmu näkyvä vai ei.
              • Click () -tapahtuma simuloi hiiren napsautuksen käyttäjän vuorovaikutusta.
              • TabIndex-määrite määrittää järjestyksen, jossa DOM-solmu ilmestyy välilehtihakemistoon.
              • Tarkennus () -tapahtuma simuloi käyttäjän vuorovaikutusta, jossa kohdennettu DOM-solmu tulee keskittymään.
              • Sumennus () -menetelmää käytetään kohdistetun DOM-solmun kohdistamiseen.
              • AccessKey IDL -attribuutti asetetaan accesskey HTML -elementtimääritteellä ja määrittää kohdistetulle solmulle pikanäppäimen.
              • AccessKeyLabel IDL -attribuutti on määritetty käyttöavain vain luettaessa.
              • ContentEditable IDL -attribuutti asetetaan tyydyttävän HTML-elementtimääritteen avulla, ja se määrittää, voivatko käyttäjät muokata kohdesolmua.
              • IsContentEditable IDL -attribuutti on vain boolean-arvo, joka osoittaa, onko kohdesolmu muokattavissa.
              • Oikeinkirjoituksen IDL-määrite on looginen arvo, joka määrittää, onko DOM-solmun, tyypillisesti syöttösolmun, sisältöä tarkistettava oikean oikeinkirjoituksen varalta.

              Globaalien tapahtumakäsittelijöiden luettelo on viisikymmentä merkintää pitkä. Seuraavat kymmenen tapahtumakäsittelijää ovat joitain tärkeimmistä ja yleisimmin käytetyistä globaaleista tapahtumakäsittelijöistä:

              • klikkaamalla
              • onfocus
              • onkeypress
              • lastina
              • onmouseenter
              • onmouseleave
              • onmouseover
              • onscroll
              • onselect
              • koodinpätkä onsubmit.

              Lomakkeet

              Lomakkeet ovat olleet pitkään osa HTML-määritelmää. HTML5-muodossa toiminnallisuutta laajennetaan kuitenkin huomattavasti uusilla määritteillä syöttö- ja lomakeelementeille, uusilla sisääntyypeillä ja jopa parilla upouusilla elementeillä.

              HTML-muodon perusteet

              Kun rakennat HTML-lomaketta, sinun tulisi yleensä aloittaa lomakkeella:

              Näiden tunnisteiden väliin sijoitat useita kenttiä tietojen vastaanottamista ja lähettämistä varten. Tärkeimmät lomakeelementit ovat:

              • Syöttöelementti, joka oletusasetuksena on vakiotekstikenttä. Tyyppimääritteen avulla syöttöelementit voidaan kuitenkin muotoilla hyväksymään salasanat, palauttamaan kaikki lomakekentät, näyttämään radiopainikkeet tai valintaruudut, tuottamaan painikkeet ja lähettämään lomakkeen sisältö.
              • Teksta-elementti, jota käytetään tekstinsyöttöalueiden luomiseen pitkämuotoisille vastauksille.
              • Valitse elementti, jota käytetään valinnaisen elementin kanssa luotaessa avattavia luetteloita. Valintaelementti luo luettelon ja kukin valintaelementtiin upotettu vaihtoehto edustaa toista luettelossa olevaa vaihtoehtoa.
              • Painikeelementti, jota käytetään lomakepainikkeiden luomiseen.

              HTML5-muodon parannukset

              HTML5 esitteli monia uusia tulotyyppejä, syöttö- ja lomakemääritteitä sekä kolme uutta lomakeelementtiä. Peitetään kaikki vuorotellen.

              Uudet syöttöelementtityypit:

              • Väritulotyyppi tunnistaa kentän, jonka pitäisi hyväksyä väri, ja jotkut selaimet luovat värinvalitsimen, kun kenttä on tarkennettu.
              • HTML5 esitteli kuusi uutta ajan ja päivämäärän syöttötyyppiä, joista jokainen tuottaa päivämäärämerkin tuetuissa selaimissa:
                • päivämäärä: valitse päivämäärä, joka sisältää päivän, kuukauden ja vuoden.
                • päiväaika: valitse päivämäärä ja aika yhdessä aikavyöhykkeen tietojen kanssa.
                • päiväaika-paikallinen: valitse päivämäärä ja aika, mutta jätä pois aikavyöhykkeen tiedot.
                • aika: valitse aika.
                • viikko: valitse viikko ja vuosi.
                • kuukausi: valitse kuukausi ja vuosi.
              • Sähköpostin syöttötyyppiä käytetään tunnistamaan kenttä, jonka pitäisi hyväksyä sähköpostiosoite. Tuetut selaimet suorittavat myös perustulon validoinnin varmistaaksesi, että sähköpostiosoite on kirjoitettu.
              • HTML5 esitteli kaksi uutta numeropohjaista sisääntyyppiä: numero ja alue. Numero sallii minkä tahansa numeron syöttämisen, jollei valinnaisista vähimmäis- ja enimmäisarvorajoituksista muuta johdu. Alue luo liukusäätimen, jota rajoittavat vähimmäis- ja enimmäisarvot ja joiden avulla käyttäjä voi valita arvon määritettyjen hyväksyttävien arvojen alueella.
              • Hakutulotyyppiä käytetään hakukehotteen tunnistamiseen.
              • Tel-sisääntulotyyppiä käytetään tunnistamaan kenttä, jonka tulisi hyväksyä puhelinnumero. Tuetut selaimet suorittavat perustulon validoinnin varmistaaksesi, että puhelinnumero on annettu.
              • Urlin syöttötyyppi identifioi kentän, jonka tulisi hyväksyä URL. Tuetut selaimet suorittavat perusvalidoinnin, ja tuetut mobiililaitteet saattavat näyttää .com-kirjoituspainikkeen.

              Uudet syöttöelementtimääritteet:

              • automaattinen täydennys: ottaa automaattisen täydennyksen käyttöön tai poistaa käytöstä syöttöelementtiä varten. Jos se otetaan käyttöön, automaattisen täydennyksen arvot poistetaan tallennetuista lomakkeiden merkinnöistä.
              • autofocus: määrittää syöttöelementin, joka tarkentuu automaattisesti sivun latautuessa.
              • muoto: käyttää lomakkeelle määritettyä tunnusta yhdistääkseen syöttöelementin, jota ei ole sisäkkäin lomakkeen sisällä lomakkeen kanssa.
              • muotoilu: määritetään lähetyskenttään ohittamaan lomakkeen oletuskäyttäytyminen tarjoamalla vaihtoehtoinen URL lomakkeen käsittelyyn.
              • formenctype: lisätään lähetyskenttään määrittämään koodauksen tyyppi, jota sovelletaan post-menetelmällä toimitettuihin tietoihin.
              • lomakemenetelmä: lisätään lähetyskenttään määrittämään HTTP-menetelmä, post tai get, jota tulisi käyttää lomakkeen lähettämiseen.
              • formnovalidate: käytetään lähetyskentän kanssa estääksesi selaimen tarkistamasta lomaketietoja.
              • lomakkeen tavoite: lisätty lähetyskenttään, jotta selain ilmoittaisi lomakkeen vastauksen joko nykyisessä ikkunassa tai uudessa ikkunassa.
              • korkeus ja leveys: käytetään tyypin koon määrittämiseen ="kuva" lomake lähetä-painike.
              • min ja max: käytetään yhdessä luku-, alue- tai päiväajasuuntautuneen tulotyypin kanssa minimi- ja maksimiarvon määrittämiseen, jonka valitun arvon on oltava välillä.
              • useita: käytetään tiedoston tai sähköpostin syöttötyypin kanssa käyttäjän salliessa lisätä useita arvoja.
              • malli: käytetään määrittelemään säännöllinen lauseke, jolla vahvistetaan sähköposti-, salasana-, haku-, puhelin-, teksti- tai URL-kenttään syötetyt tiedot.
              • paikkamerkki: määrittää paikkamerkkitekstin syöttöelementille, joka poistetaan, kun elementti tarkentuu.
              • vaaditaan: tunnistaa elementin, joka on täytettävä ennen lomakkeen lähettämistä.
              • askel: käytetään yhdessä määrän, alueen tai päiväajan suuntautuneen tulotyypin kanssa vaiheiden määrittämiseksi, joissa arvot voidaan valita. Esimerkiksi lisäämällä vaihe ="10" numerotuloon, joka on rajoitettu arvoihin, jotka ovat vähintään 0 - 30, mahdollistaisi 0, 10, 20 tai 30 lähettämisen.

              Uudet lomakeelementtimääritteet:

              • automaattinen täydennys: ottaa automaattisen täydennyksen käyttöön tai poistaa käytöstä koko lomakkeen. Automaattista täydennystä syöttökohtaisesti voidaan silti hallita käyttämällä samaa attribuuttia yksittäisissä syöttöelementeissä.
              • novalidate: sulkee lomakkeen lähettämisen selaimen validoinnin pois.

              Uudet lomakeelementit:

              Datalist-elementti luo avattavan luettelon ennalta määritellyistä ehdotuksista syöttöelementille. Huomaa, että tämä elementti ei rajoita syöttökenttää näihin arvoihin. Sen sijaan ne toimivat vain ehdotuksina.

              Avattavien kohteiden luettelo yhdistetään syöttöelementtiin uudella luettelomääritteellä. Esimerkiksi:

              Tuloste-elementti luo paikanvaraajan prosessin tuloksen, kuten laskelman, näyttämiseksi. Huomaa, että tulostuksessa ei tosiasiallisesti suoriteta mitään laskelmia - sinun on silti tehtävä se JavaScriptin tai palvelinpuolen ohjelman avulla - se tarjoaa vain paikan tuloksen näyttämiseen. Esimerkiksi:

              Kaava: y = mx + b

              Kaltevuus (m):

              X: n arvo:

              Y-leikkaus (b):

              Y: n arvo:

              Jos sitten kirjoitamme lineformula () JavaScriptiin laskennan käsittelemiseksi ja CSS: n tuottamiseksi, voimme tuottaa seuraavan yksinkertaisen mutta toiminnallisen JavaScript-laskurin:

              funktio lineformula () {
              var y = 0;
              var m = document.getElementById (“m”) arvo;
              var x = document.getElementById (“x”) arvo;
              var b = document.getElementById (“b”) .arvo;
              y = + m * + x + + b;
              document.getElementById (“y”) .arvo = y;
              }

              # esimerkki-lomake {
              leveys: 100%;
              max-leveys: 400 kuvapistettä;
              marginaali: 0 auto;
              reuna: 1px kiinteä #bbb;
              taustaväri: #eee;
              }
              # esimerkki-lomakkeen p tulo, # esimerkki-lomakkeen p lähtö {
              kellua: oikea;
              leveys: 100px;
              }
              # esimerkki-lomake p {
              ylivuoto: automaattinen;
              täyte: 10px;
              marginaali: 0;
              }
              # esimerkki-lomake p: ei (: viimeinen lapsi) {
              reunus-pohja: 1px kiinteä #bbb;
              }

              Kaava: y = mx + b

              Kaltevuus (m):

              X: n arvo:

              Y-leikkaus (b):

              Y: n arvo:

              Keygen-elementti lisättiin myös HTML5: een käyttäjien todentamiseksi. Elementti on suunniteltu tuottamaan julkisen ja yksityisen avainparin, jota voidaan käyttää varmistamaan, että lomakkeen lähettämisen tulokset näytetään vain oikealle käyttäjälle. Elementti on kuitenkin nyt suunniteltu poistettavaksi HTML5-määrityksestä, eikä sitä tule käyttää.

              Semanttiset elementit

              Monet HTML-elementit on suunniteltu lisäämään semanttista merkitystä verkkosivun sisällölle. Tämä tarkoittaa, että tietyt HTML-elementit merkitsevät erityistä merkitystä elementin sisällölle.

              Esimerkiksi korostustunnisteiden käyttö tapahtuu selaimessa käyttämällä kursivoitua kirjasinta, ja se tarkoittaa, että elementin sisältö tulee lukea ja ymmärtää enemmän painotuksella kuin ympäröivä sisältö.

              Vaikka kaikilla HTML-elementeillä ei ole semanttista merkitystä, on tärkeää käyttää HTML-tunnisteita niiden semanttisen merkityksen mukaan aina kun mahdollista.

              Miksi Semantics Matter

              Semantiikka on tärkeää ainakin neljästä ensisijaisesta syystä:

              • Semantiikka parantaa saavutettavuutta. Avustekniikat pystyvät paremmin välittämään verkkosivun merkityksen, kun HTML-elementtien valinta antaa vihjeitä sivun sisällön merkityksestä.
              • Semantiikka tekee sisällöstä löydettävän. Hakukoneet kykenevät paremmin ymmärtämään ja indeksoimaan verkkosivun sisällön, kun HTML-elementtejä käytetään niiden oikean semanttisen tarkoituksen mukaan.
              • Semanttiset elementit ovat apu kansainvälistymiselle. Uudet semanttiset elementit rubiini ja bdi otettiin käyttöön HTML5: ssä, jotta voitaisiin paremmin tunnistaa se tosiasia, että alle 15% maailmasta koostuu äidinkielenään puhuneista äidinkielisistä.
              • Semantiikka parantaa yhteentoimivuutta helpottamalla kehittäjien ja sovellusten ymmärtämistä ja vuorovaikutusta verkkosivun sisällön kanssa.

              Kun marssi kohti Internetiä kaikkea (IOE) jatkuu, semantiikka kasvaa yhä tärkeämmäksi.

              Oikean semantiikan käyttö HTML: ssä ja muissa web-ohjelmointimuodoissa kasvaa kriittisemmäksi, kun Internet-yhteyteen kytkettyjen laitteiden määrä ja monimuotoisuus lisääntyvät.

              Nykyään saatat ajatella, että luot verkkosivun, jota voidaan tarkastella ensisijaisesti kannettavissa tietokoneissa ja älypuhelimissa, mutta vielä kymmenen vuoden kuluttua kukaan arvata, millaisia ​​laitteita yritetään käyttää ja ymmärtää verkkosivustosi sisältöä.

              Semantiikan oikea saaminen on avain sen varmistamiseen, että tiedot ovat erittäin saatavissa ajan mittaan.

              Semantiikka HTML-muodossa Ennen HTML5: tä

              HTML-elementeillä on aina ollut semanttinen merkitys. Lomake- tai taulukkoelementtien käyttö on aina ilmaissut elementin sisällölle tietyn merkityksen ja tarkoituksen.

              Listat ovat tunnistaneet selaimelle joko tilauksen tai tilauksen luonteeltaan ol- ja ul-tunnisteiden avulla. Samoin on laaja luettelo es HTML5-elementtejä, joita voidaan käyttää tekstissä semanttisen merkityksen lisäämiseen:

              • Em ja vahvat tunnisteet merkitsevät painotusta ja voimakas painotus.
              • S-, del- ja ins-tunnisteita käytetään tunnistamaan tiedot, joita ei enää sovelleta tai jotka on korvattu päivitetyillä tiedoilla.
              • Lainaus- ja lainausmerkkejä käytetään noteeraamaan tarjouksia ja luovia teoksia.
              • Abbr- ja dfn-tunnisteita käytetään liittämään selittävät kommentit määritelmää tarvitsevaan termiin.
              • Koodia, samp-, kbd- ja var-elementtejä käytetään tietyn tyyppisten tekstien tunnistamiseen: ohjelmointikoodi, tietokoneohjelman näyte, näppäimistön syöttö ja kaavamuuttujat, vastaavasti.
              • Sup- ja sub-elementit yksilöivät sisällön, jonka tulisi näkyä joko ala- tai yläindeksitekstinä.

              Vaikka runsaalla HTML5-elementtiä edeltävällä HTML-elementillä on semanttinen merkitys, HTML5: n käsittelemässä kielessä oli yksi merkittävä puutte: rakenteellisten semanttisten elementtien puute.

              HTML-asiakirjan rakenne ennen HTML5: tä

              Ennen HTML5: tä div-elementti oli ensisijainen säilö, jota käytettiin rakenteen lisäämiseen verkkosivudokumenttiin. Oli ja on edelleen melko yleistä nähdä verkkosivuja, jotka on rakennettu divs: n avulla ja jotka tuottavat asiakirjarakenteen, joka näyttää tältä:

              Tämä lähestymistapa sivurakenteen rakentamiseen div-elementin avulla - divitis-niminen käytäntö ei käytä itse HTML-elementtejä merkitsemään mitään merkitystä sivun rakenteelle. Ennen HTML5: tä kehittäjille voidaan antaa anteeksi tällainen käytäntö.

              Uusien rakenteellisten semanttisten elementtien saatavuudessa HTML5: ssä on kuitenkin parempi tapa.

              HTML5: n rakenteelliset semanttielementit

              HTML5 esitteli seuraavat elementit käytettäväksi yllä olevassa esimerkissä esitetyn div-keiton sijasta. Nämä elementit tarjoavat asiakirjan rakenteen, samalla kun niillä tarkoitetaan samanaikaisesti erityistä merkitystä asiakirjan eri osille:

              • Pääelementti on suunniteltu pitämään verkkosivun ensisijainen sisältö. Jos verkkosivusto käyttää uudelleen samaa otsikkoa ja alatunnistetta kaikilla sivuilla, ne jätetään tyypillisesti pois pääelementistä, kun taas kaikki muu verkkosivun sisältö voidaan sijoittaa oikein pääelementtiin..
              • Otsikkoelementti sisältää johdanto-osan koko verkkosivulta tai verkkosivun osasta. Sitä on hyödyllistä pitää verkkosivuston jokaisella sivulla näkyvä otsikko ja käyttää sitä myös otsikon ja muun johdannon pitämiseen artikkelin tai sivun yläosassa..
              • Alatunniste-elementti on suunniteltu pitämään tiivistelmä tietoja sen yläelementistä. Sitä voidaan käyttää verkkosivun alatunnisteena, joka näkyy verkkosivuston jokaisella sivulla ja artikkelissa, artikkelikokoelman, kuten tekijän, aiheiden, julkaisupäivän ja käyttäjän kommenttien, pitämiseen..
              • Leikkauselementtiä käytetään temaattisesti liittyvän sisällön ryhmittelemiseen ja alkaa tyypillisesti otsikkoelementillä. Esimerkiksi blogissa sivun ensisijainen osa voi olla yksi osio, kun taas sivupalkki voi viedä toisen osion.
              • Nav-elementtiä käytetään navigointilinkkien ryhmän tunnistamiseen. Tyypillisesti navigointielementit rajoittuvat uudelleenkäytettäviin koko sivuston laajuisiin navigointielementteihin, kuten ne, jotka näkyvät verkkosivun otsikoissa, alatunnisteissa ja sivupalkeissa.
              • Artikkelielementtiä käytetään ryhmittelemään sisältö, joka on järkevää erillisenä yksikönä erillisenä verkkosivulta, kuten blogiteksti tai uutisartikkeli. Artikkelit voivat sisältää otsikon, alatunnisteen, osan ja sivuosat.
              • Sivuelementtiä käytetään tunnistamaan tietoa, joka tulisi ymmärtää erillään emoelementin sisällön ensisijaisesta virtauksesta.

              Vaikka sinun ei tarvitse käyttää kaikkia näitä elementtejä verkkosivurakenteen suunnittelussa, ne ovat käytettävissä soveltuvin osin antamaan selkeämpi kuva kunkin sivun osan semanttisesta merkityksestä.

              Jos tarkistamme div-keitto-asettelumme ja tarkistamme sen näiden uusien tunnisteiden toteuttamiseksi, saamme jotain, joka näyttää tältä:

              Tekstuaaliset semanttielementit HTML5: ssä

              Käsittelemiemme rakenteellisten elementtien lisäksi HTML5 esitteli myös joukon elementtejä, jotka viittaavat tietyn tyyppisiin merkityksiin tekstisisällön bitteille. Katsotaanpa heitä:

              • Osoiteelementtiä käytetään osoitetietojen tunnistamiseen, jotka liittyvät verkkosivun tai artikkelin kirjoittajaan tai omistajaan.
              • Kuvaa ja kaavaelementtejä käytetään verkkosivun sisältöön liittyvän visuaalisen sisällön - kuten kaavion, kaavion tai kuvan - tunnistamiseen ja kaappaamiseen, mutta sen ei tarvitse näkyä asiakirjan sisällön sisällä.
              • Merkintunnistetta käytetään tunnistamaan teksti, jolla on tarkka merkitys nykyisessä tilanteessa. Sitä voisi esimerkiksi käyttää tunnistamaan jokaisen hakutermin esiintymisen sivulla, jolla näytetään hakutulokset.
              • Aikaelementti tunnistaa vähän tekstiä edustavan tiettyä ajankohtaa. Datetime-määritteellä voidaan lisätä tietyn ajankohdan koneella luettava versio aikatauluun.
              • Bdi-elementtiä käytetään kääntämään sisältökappaleen suunta kielelle, joka noudattaa oikealta vasemmalle -kuviota.
              • Ruby-, rp- ja rt-elementtejä käytetään ääntämisapuvälineiden tai rubiinien tarjoamiseen tietyille aasialaisille kielimerkeille.

              Dynaaminen HTML

              Dynaaminen HTML

              Kun ajattelet nykyaikaista verkkosivua, et yleensä kuvittele staattista verkkosivustoa. Skriptikielten, kuten JavaScript ja PHP, tulon myötä tänään näkemämme verkkosivustot ovat vuorovaikutteisempia ja dynaamisempia kuin edeltäjänsä.

              Vaikka dynaamisen verkkosivun luomiseen on olemassa erilaisia ​​lähestymistapoja, on olemassa yksi tietty tekniikka, jonka olet todennäköisesti perehtynyt, vaikka et ole ehkä kuullut paljon: DHTML.

              Nimi “DHTML” on vähän harhaanjohtava. Toisin kuin merkintäkieli HTML, josta se nimittää, dynaaminen hypertekstin merkintäkieli on oikeastaan ​​termi, joka kuvaa useita tekniikoita ja kieliä, joita käytetään yhdessä dynaamisten verkkosivustojen luomiseen.

              Nämä ovat DHTML: n neljä keskeistä elementtiä:

              • HTML: merkintäkieli, jota käytetään staattisten sivujen ja sovellusten luomiseen.
              • CSS: kieli, jota käytetään sanomaan tyylitaulukon kautta sivun esitys.
              • JavaScript: ohjelmointikieli, jota käytetään sivun interaktiivisten elementtien kehittämiseen.
              • DOM: ohjelmointirajapinta, jonka kautta sivun koodi voidaan muuttaa.

              Jos olet kiinnostunut oppimaan lisää DHTML: stä, seuraava resurssiluettelo sisältää vertailumateriaalia, vaiheittaiset ohjeet ja työkalut, joiden avulla voit luoda dynaamisia verkkosivuja DHTML: n avulla.

              Kirjat

              Vaikka verkkosivustot ovat aina hyvä tukikohta aloittamiseen, et voi mennä pieleen sijoittamalla joitain pöytäresursseja, jotta pääset DHTML: n hyvien puolien läpi..

              • JavaScript: David Flanaganin lopullinen opas (2006): tämä on opas JavaScriptin oppimiseen sekä erinomainen viiteaineisto kaikissa DHTML-aiheisiin liittyvissä asioissa.
              • Interaktiivinen tiedon visualisointi Web: Johdatus suunnitteluun D3: lla (2013), kirjoittanut Scott Murray: Kun olet saanut käsityksen DHTML: n perusteista, käytä tätä vaihe vaiheelta -opasta oppiaksesi dynaamisen sisällön suunnittelun perusteet.
              • DOM-komentosarjat: Web-suunnittelu JavaScriptillä ja Keith and Sambellsin Document Object Model (2010): täydellinen resurssi silloin, kun haluat paremman käsityksen DOM: sta ja käytännöstä reaalimaailman sovelluksissa.
              • Web-animaatio JavaScriptin avulla: Kehitä & Suunnittelu (2015), Julian Shapiro: jos haluat hallita animaatioita DHTML: n kautta, tarkista tämä.

              Työkalut

              Näiden kolmansien osapuolien DHTML-julkaisuilla pyritään auttamaan kehittäjiä kirjoittamaan puhtaampaa koodia, debugoimaan helposti ja käyttämään valmiiksi kirjoitettuja skriptejä tehostamaan pyrkimyksiään.

              • Dynaaminen asema: Tämä sivusto on omistettu tarjoamaan kehittäjille ilmaisia ​​JavaScriptiä (ja muita DHTML).
              • DHTML-herkut: toinen verkkoresurssi, joka tarjoaa ilmaisia ​​DHTML- (ja Ajax) -komentosarjoja.
              • JavaScript Kit Scripts: toinen ilmainen resurssi JavaScript-skriptien löytämiseen auttamaan erilaisten suunnittelu- ja animaatiotehosteiden luomisessa.

              Online-oppaat ja oppaat

              Haluatko vaiheittaiset oppaat HTML: n, CSS: n, JavaScriptin ja DOM: n oppimiseen? Tai ehkä haluat jonkin verran käytännön harjoittelua? Seuraavat oppaat kattavat kaikki tukisi.

              • Verkkokehityksen etenemissuunnitelma aloittelijoille: Tämä “Opi koodaamaan” -oppaassa on täydellinen paikka aloittaa työskentely DHTML: n kanssa, koska se vie sinut HTML: n perusteista (luku 1) JavaScriptin ja jQueryn läpi (luku 5)..
              • W3Schools DHTML -ohjeet: W3Schools tarjoaa erilaisia ​​DHTML-oppaita, jaoteltuina kolmeen eri ohjelmointikieleen..
              • Mozilla Web Technologies -oppaat: Mozilla-kehittäjäverkostossa on yksi kattavaimmista (ja hyvin organisoiduista) oppaista, jotka koskevat DHTML: n eri ohjelmointikieliä..
              • QcTutorials DHTML-opetusohjelma: Etsitkö yksinkertaista ja suoraviivaista lähestymistapaa DHTML-oppimiseen? Käytä tätä opetusohjelmaa ja pidä heidän DHTML- ja HTML DOM-esimerkkejä kädessä tulevaa käyttöä varten.
              • Aloittelijan opas DHTML-opetusohjelmaan: johdatus DHTML: ään, joka sisältää useita oppaita päästäksesi alkuun.
              • Web-kehittäjä- ja CSS-oppaat: CSS: n kanssa voi oppia paljon, joten älä rajoitu pelkästään perusasioihin. Tämä resurssi sisältää erilaisia ​​CSS-oppaita verkkosivustosi tarpeiden perusteella.
              • JavaScript-oppaat: toinen JavaScript-paketin opas, vain tämä keskittyy erityisesti JavaScript-liittyviin tehtäviin.
              • CSS-viite: käytä tätä yksinkertaista resurssia pikaoppaana kirjoittaessasi CSS: ää.
              • DOM-viite: oppia lisää eri DOM-objekteista täältä.

              Mene töihin!

              Jos aiot luoda dynaamista sisältöä verkkosivustollesi, on tärkeää, että ymmärrät selkeästi, kuinka kukin elementti toimii ja kuinka ne kaikki pelaavat yhdessä DHTML: n alaisuudessa..

              Yllä olevat ohjeet ovat hyvä paikka aloittaa, mutta mikään ei estä käytännön harjoittelua, jos haluat siirtää uuden ohjelmointitekniikan oppimisen tarjoamien mahdollisuuksien rajat..

              Hyvän HTML: n luominen ja validoijien käyttäminen

              .lähdekoodi span.kw
              .lähdekoodi span.dt
              .lähdekoodi span.dv
              .sourceCode span.bn
              .sourceCode span.fl
              .sourceCode span.ch
              .sourceCode span.st
              .lähdekoodi span.co
              .sourceCode span.ot
              .sourceCode span.al
              .sourceCode span.fu
              .sourceCode span.re
              .sourceCode span.er

              Hyvän HTML: n luominen ja validoijien käyttäminen

              Olemme käsitellyt hyvän HTML-kirjoituksen kirjoittamista, mutta menemme syvällisesti tähän. Keskustelemme myös validoijista ja niiden käytöstä.

              Osa 1 - Hyvän HTML: n luominen

              Kaikkien oikean kieliopin sääntöjen tunteminen ei tee sinusta hyvää kirjoittajaa, ja jokaisen kielen toiminnan ja rakenteen tunteminen ei tee sinusta hyvää ohjelmoijaa. Tarvitaan jotain enemmän - hyvä tyyli.

              HTML: n kirjoittaminen on samalla tavalla. Saatat tuntea jokaisen merkintäelementin hyvät puolet ja koota silti huolimaton asiakirjoja, joita on vaikea lukea ja suunnitella. Mutta tämän ei tarvitse olla niin - voit oppia kirjoittamaan hyvä, hyvin muotoiltu HTML.

              Miksi vaivautua hyvällä HTML: llä?

              Koska HTML: tä ei ole tarkoitettu loppukäyttäjien ja online-yleisön näkemiseen, voit kysyä:

              • Mikä ero sillä on?
              • Miksi huolehtia merkinnöistä?

              Tähän kysymykseen vastaaminen on ensimmäinen askel kohti hyvää HTML-tyyliä: ajattelemalla sitä, kenelle kirjoitat HTML: ää.

              HTML-koodillesi on kourallinen "yleisö":

              • Nykyinen suunnittelija / kehittäjä, jonka on kirjoitettava CSS
              • Tulevat kehittäjät ja suunnittelijat, jotka ehkä joutuvat suunnittelemaan verkkosivustosi uudelleen
              • Google ja muut hakukoneet
              • Facebook ja muut sosiaalisen median sivustot, jotka lähettävät sivukuvat
              • RSS-lukijat
              • Näkölukija näkövammaisille
              • Tavalliset käyttäjät viime kädessä.

              Kaikilla näillä erilaisilla yleisöillä - joista vain osa on ihmisiä - on erilaiset tarpeet, jotka kaikki palvelee hyvä, tyylikäs HTML.

              Hyvä asiakirjarakenne

              Tärkein HTML-tyylin näkökohta on rakentaa koko asiakirja oikein.

              Yleisen rakenteen pitäisi näyttää tältä:

              html>

              Asiakirjan nimi




              Sivuston nimi

              Asiakirjan nimi

              Asiakirjan otsikko

              Huomaa, että et ehkä tarvitse kaikkia tässä määritettyjä elementtejä. Esimerkiksi: et ehkä halua laittaa elementtiäsi sinun tietoosi, et sisällytä metatiedot yksityiskohtia artikkelin yläosaan - yksinkertainen

              tai

              tunniste, samalla “tasolla” kuin artikkelin sisältö olisi hienoa.

              Lisätietoja asiakirjan asianmukaisesta jäsentämisestä on tämän artikkelin Rakenteellinen HTML-osiossa.

              Tärkeimpien osien tilaaminen

              Ja sisältöön liittyvien tulee olla varhaisessa vaiheessa. Kun SEO-konsultti yrittää selvittää, mitä tapahtuu kuinka Google tai Facebook näyttää sivusi, älä tee niitä lajittelemaan kymmenen CSS-linkin ja satunnaisen JavaScript-koodin kautta.

              Vaikka navigointipalkki on kiinni ikkunasi yläreunassa ja sivuston pääotsikko on sen alapuolella, laita pääsivustosi otsikko

              tai

              merkitse ja aseta se ensin sisälle. Laita navigointivalikko otsikon jälkeen.

              Elementin tulisi olla ensimmäinen elementti. Vaikka sinulla olisi vasen sivupalkki, siirrä se vasemmalle puolelle CSS: llä. älä laita ennen pääsisältöäsi.

              Sivun tulisi olla viimeinen sisältöelementti sivustossa. HTML-elementtejä ei pitäisi olla näkyvissä .

              Sijoita mahdollisimman suuri osa JavaScripistäsi sulkevan tunnisteen jälkeen. Laita JavaScriptiä vain, jos sen on ehdottomasti oltava siellä jostain syystä (sitä ei yleensä ole).

              Rakenteellisten merkintöjen lukeminen on helpompaa

              Joskus sinun on vain sisällytettävä paljon tunnisteita tai sinulla on useita sivupalkkeja eri tasoilla. Tai ehkä sinulla on paljon sisäkkäisiä luetteloita.

              Yksi hyödyllisimmistä asioista, joita voit tehdä, on sisennä koodi. Mieti seuraavia esimerkkejä:

              class ="masto-head">

              Asiakirjan otsikko

              class ="nav-bar">
              class ="main-nav">

              • Valikkokohta
              • Valikkokohta
              • Valikkokohta
                • Valikkokohta
                • Valikkokohta
                • Valikkokohta
              • Valikkokohta

              class ="masto-head">

              Asiakirjan otsikko

              class ="nav-bar">
              class ="main-nav">

              • Valikkokohta
              • Valikkokohta
              • Valikkokohta
                • Valikkokohta
                • Valikkokohta
                • Valikkokohta
              • Valikkokohta

              Toinen on paljon helpompi lukea, eikö niin? Tämä on erittäin hyödyllinen suunnittelijoille ja kehittäjille, jotka yrittävät ymmärtää asiakirjaasi.

              Varmista, että noudatat sisennystapoja - yksi välilyönti, kaksi välilyöntiä, välilehti. Valitsemallasi ei ole niin merkitystä, mutta tärkeä asia on pitää se johdonmukaisena.

              Mutta entä luotu HTML?

              Suurin osa Internetin HTML-koodista on nykyään yhden tai toisen sisällönhallintajärjestelmän tuottamaa. Et voi aina saada koodin sisennystä toimimaan haluamallasi tavalla - varsinkin jos HTML: n muodostava koodi on levinnyt moniin erilaisiin teema- ja laajennustiedostoihin.

              Vastaus on käyttää merkityksellisiä luokkia tai tunnuksia ja kommenttien päättyviä tunnisteita. Tämä voi olla erityisen hyödyllinen toistuvasti luodun sisällön lohkoille, kuten kommentit tai sivupalkin kohteet.

              class ="masto-head">

              Asiakirjan otsikko

              class ="nav-bar">
              class ="main-nav">

              • Valikkokohta
              • Valikkokohta
              • Valikkokohta
                • Valikkokohta
                • Valikkokohta
                • Valikkokohta
              • Valikkokohta



              class ="kommentit">
              class ="kommentti" id ="kommentti-39874693029">


              class ="sivupalkki-erä" id ="tilata-muodossa">


              class ="sivupalkki-erä" id ="arkisto">

              Pääsääntö - jos elementin avautuva ja sulkeva tunniste eivät ole samalla rivillä ja elementti vaatii luokan tai tunnuksen, on hyvä idea kommentoida sulkevaa tunnistetta.

              Merkitykselliset luokat ja tunnukset

              Ensinnäkin - tee luokka- ja tunnusmääritteesi yhdenmukaisiksi ja helposti luettaviksi:

              • käyttämällä vain pieniä kirjaimia
              • erottaa sana yhdysmerkeillä.

              Seuraavaksi varmista, että luokanimilläsi ja tunnuksillasi on selvä semanttinen merkitys eivätkä kaikki tarkoita suunnittelua ja näyttöä.

              Hyvät luokka- ja tunnusnimet:

              • nav-valikko
              • blogipostaus
              • sivupalkki-widget
              • kommentti-meta.

              Virheelliset luokka- ja tunnusnimet:

              • vihreä-box
              • vasen sivupalkki
              • fade-in-banneri.

              Joskus käyttöliittymän tai CSS: n luonne aiheuttaa sinun tarvita lisäelementtejä, ja joudut käyttämään asettelukohtaisia ​​luokan nimiä, kuten kääre.

              Tämä on kunnossa, jos et voi auttaa sitä. Varmista vain, että pidät asiat yleisinä. Ei ole mitään pahempaa kuin uudelleensuunnittelu, joka luo CSS: n, joka näyttää seuraavalta:

              .vihreä-box
              taustaväri: sininen;
              }

              Käytä sisältöelementtejä viisaasti

              Käytä artikkelin tai muun sisällön pääosassa osittaisia ​​sisältötunnisteita järjestääksesi asiakirja oikein.

              Otsikot ja jaksot

              Jaksojen otsikot ovat erittäin tärkeitä. Älä unohda heitä. Lopullinen sisältösi on paljon helpompi lukea, jos siinä on useita otsikoituja osioita ja alaosioita kuin yksi jättiläinen sisältölohko.

              • Käytä otsikkotunnisteita (

                ,

                ,

                ,

                ) otsikko- ja alaosastoihin.

              • Varmista, että otsikkohierarkianne muodostaa kohtuullisen ääriviivat. Älä laita
                jälkeen

                ilman

                ja

                välissä. Varmista, että sisältösi on järkevä ja ymmärrettävä.

              • Jos käytät jotakin on vialla merkitä otsikkootsikoita.

              Varmista myös, että asetat id-määritteen osaston otsikoihin, jotta sinä ja muut voisit luoda asiakirjassa olevia linkkejä.

              id ="-nimi osa">Jakson nimi

              ...

              href ="#-Nimi osio">Tämä linkittää kyseiseen sijaintiin.

              Älä lopuksi horisontaalista sääntöä (). Jos käytät osioita ja otsikoita oikein, sille ei ole koskaan mitään syytä.

              Linkit

              Ankkuritunnisteen ainoa vaadittava attribuutti on linkitetyn asiakirjan URL-osoite.

              Mutta otsikkotunnisteen sisällyttäminen on erittäin hyödyllistä, koska se antaa ihmisille tietää, mihin he menevät, ennen kuin he napsauttavat linkkiä. Se auttaa myös hakukoneita määrittämään, mistä linkki on kyse. Itse asiassa otsikkotunniste on linkitetyn asiakirjan otsikko.

              Toinen linkkien aihe on ankkuriteksti - todellinen teksti, jota käyttäjä napsauttaa (tai napauttaa tai valita) seurataksesi linkkiä.

              Yritä välttää napsauttamalla tätä, jos mahdollista. Joskus se on väistämätöntä, mutta mahdollisuuksien mukaan sinun tulisi yrittää tehdä ankkuriteksti merkitykselliseksi. Tästä on hyötyä lukijoillesi ja myös linkitettävällesi dokumentille (joka voi olla oma).

              Lisätietoja HTML: stä kirjoittamalla href ="">napsauttamalla tätä.

              Tarjoamme paljon href ="">tietoa HTML: stä.

              kuvat

              Kuvassa vaaditaan vain src-elementti - kuvan URL-osoite. Mutta otsikon ja alttekstin sisällyttäminen voi auttaa.

              • sokean näytön lukijat voivat lukea kuvauksen käyttäjälle, joka ei näe kuvaa
              • hakukoneet voivat indeksoida kuvan ja saada jonkinlaisen kuvan kuvan merkityksestä.
              Määritelmät, sitaatit, lyhenteet

              On olemassa useita erittäin hyödyllisiä span-tason merkintäelementtejä, joita ei koskaan käytetä.

              Ne tarjoavat hienojakoisia tietoja sivusi sanasta. Ne voivat auttaa käyttäjiä ymmärtämään paremmin sisältöäsi ja auttavat tietokoneita (hakukoneet, tekoäly) ymmärtämään paremmin kirjoittamaasi.

              • - Määritelmätagi. Tämä voi olla ensimmäinen kerta, kun käytät ja määrität teknisen termin.
              • - Käytetään lyhenteinä. Voit laittaa lyhenteen laajennetun muodon otsikkotunnisteeseen.
              • - Useimmat ihmiset käyttävät vain typografisia lainausmerkkejä lainausten määrittelemiseen, mutta merkinnät käyttävät sitä selkeämmin ja antavat viittauksen tarjouksen lähteeseen elementin kanssa.

              Lisätietoja ja välitä enemmän

              Hyvän HTML: n kirjoittaminen on asia:

              • kourallisten perusperiaatteiden oppiminen
              • huolehtiminen tarpeitasi sisällöstäsi ja sivustostasi seurataksesi niitä.

              Voimme auttaa sinua vain oppimisessa. Sinun on tehtävä päätös hoidosta.

              Suurin osa neuvoistamme voidaan tiivistää yhteen lauseeseen:

              Varmista, että HTML viestii selvästi, mitä haluat kommunikoida.

              Osa 2: HTML-vahvistimet

              Nykyaikaisten, standardipohjaisten selainten ja HTML: n myötä validointi on kiinnostunut yhä enemmän - varmistamalla, että verkkosivuston lähdekoodissa ei ole virheitä ja että se on asiaa koskevien eritelmien mukainen.

              Tämä on tietysti hyvä asia - verkko on yleensä parempi paikka, kun verkkosivustot noudattavat sääntöjä. Mutta liian suuri validoinnin painottaminen voi myös olla haitallista.

              Tässä on mitä sinun täytyy tietää.

              Mikä on HTML-validointi?

              Validointi tarkoittaa vain tarkistamista, onko verkkosivusi lähdekoodi W3C: n asettaman kielen eritelmien mukainen. Tämä tarkistus tehdään ohjelmistotyökalulla, nimeltään HTML Validator.

              Tämä on analoginen oikolukujen kanssa - varmistamalla, että kaikki sanat kirjoitetaan oikein ja että välimerkkejä ja kieliopin tavanomaisia ​​sääntöjä noudatetaan.

              Merkintäkielen spesifikaatio kuvaa (joskus yksityiskohtaisesti), kuinka kutakin HTML-elementtiä käytetään, mitkä sen potentiaaliset ominaisuudet voivat olla ja miten se liittyy muihin sivun elementteihin..

              Sanoa, että HTML-dokumentti on pätevä, tarkoittaa vain sitä, että se noudattaa kaikkia näitä sääntöjä.

              Mikä on HTML-validointi, ei?

              HTML ei oikeastaan ​​kerro sinulle, onko verkkosivustosi hyvä tai näyttääkö tavan mielestäsi, tai auttaa sinua saavuttamaan markkinointitavoitteesi. Se kertoo vain, onko merkinnät eritelmän mukaiset.

              Tämä on vähän kuin ero editoinnin ja oikolukujen välillä - validointi on kuin oikoluku.

              HTML-validointi koskee myös vain HTML: ää - ei CSS: ää, JavaScriptiä ja taustalla olevaa PHP: tä. Sillä ei ole myöskään mitään tekemistä asioiden, kuten lomakkeiden asianmukaisen toiminnan kanssa (lomakkeen validointi on aivan eri asia).

              Miksi vaivautua validointiin?

              HTML: n suorittaminen validoijan avulla voi auttaa sinua kiinnittämään virheitä, jotka voivat hiipua HTML-koodisi monista tavoista.

              Yksinkertaiset kirjoitusvirheet

              Todennäköisesti yleisin validointivirheiden lähde on yksinkertaiset typografiset virheet. Jos elementin tunnisteen nimi on kirjoitettu väärin tai jos oikean kulman hakasulkeeseen lyödään vasemman sijasta, saat vahvistusvirheen. Nämä ovat usein tärkeimpiä löytää ja korjata, ja myös helpoimpia.

              Versioiden epäsuhta

              Jokaisessa HTML-version versiossa on hiukan erilaiset säännöt ja asiat, jotka sisältyvät kieleen. Jos HTML-koodisi on kelvollinen, se tarkoittaa, että olet noudattanut kaikkia näitä sääntöjä ja sisällyttänyt vain asioita, jotka ovat virallisesti osa kieltä.

              Esimerkiksi HTML-tunniste on uusi HTML5: ssä - sitä ei ollut HTML 4.0 -määrityksessä. Tämä tarkoittaa, että jos validoit kyseistä määritelmää vastaan ​​ja sisällytit sen, se ei olisi pätevä. Sait virheen.

              Toinen esimerkki muutoksesta on tapa, jolla nollaelementit sulkeutuvat.

              Kuvatunniste ( ) on tyhjä elementti - sillä ei ole sisältöä, vain määritteitä (kuva itse on kuvatiedostoon osoittava ominaisuus, ei elementin sisältö). Aikaisemmin nollat ​​elementit piti sulkea, joten näet tämän:

              src ="http://example.com/some_image" alt ="Jotkut kuva" />

              Nyt HTML5-määritelmässä tätä ei suositeta, ja sama kuva näyttäisi tältä:

              src ="http://example.com/some_image" alt ="Jotkut kuva" >

              Validointi on tärkeää monista syistä:

              • Vuosien mittaan on ollut monia erilaisia ​​eritelmiä
              • Joskus useita määrityksiä aktiivinen samanaikaisesti
              • Kooderit ovat kehittäneet tapoja, jotka perustuvat erilaisiin toimintatapoihin.
              Virheellinen palvelinpuolen koodi

              Useimmat verkkosivustot käyttävät nykyään joitain taustalla olevia sisällönhallintajärjestelmiä tai palvelinpuolen komentosarjoja HTML-koodin luomiseen. Tämä lisää kerrosta monimutkaisuutta, joka voi aiheuttaa lisävirheitä.

              Esimerkiksi, jos tiettyä ehtoa ei täytetä tai mallitiedostoa ei ladata, suuren elementin sulkeva tunniste ei ehkä sisälly ulostuloon..

              Koko HTML-asiakirjan näkeminen voi myös olla vaikeaa työskennellessäsi palvelinpuolen dynaamisia skriptejä - yhden sivun malli on usein hajautettu useisiin eri tiedostoihin.

              Mukana huono koodi

              Yhdessä sisällönhallintajärjestelmien kanssa useimmat verkkosivustojen omistajat käyttävät useita kolmansien osapuolien laajennuksia verkkosivustojen luomiseen. Nämä eivät ole aina niin korkealaatuisia kuin niiden pitäisi olla, ja ne voivat olla kirjoitusvirheiden, huonojen merkintöjen ja huonosti kirjoitetun koodin lähde.

              Yksinkertaisesti et tiedä HTML-määritystä

              HTML-spesifikaatioissa on paljon minuutin yksityiskohtia - asioita, joita monet aloittelijat ja keskitason kehittäjät eivät ehkä tiedä tai ymmärrä.

              Tiesitkö, että et voi laatia luetteloa (