Få fart på karrieren med HTML

Get opp til hastighet med HTML - Basix
en
Del
16
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av

Vi vil snart være å publisere våre første HTML5 tutorials her på Activetuts +, men før vi starter, her er en rask og enkel veiledning for å få fart på grunnleggende HTML -. Selv om du aldri har gjort noe før.

Forskjellen mellom HTML og HTML

Opprett en ny fil, hvor som helst på datamaskinen, og kaller det /side.html
. I Windows, er den enkleste måten å gjøre det ved å høyreklikke på et tomt område i en mappe, klikker du New > Tekstfil
, så sørg for at du slette ".txt" på slutten av en fil. Windows vil trolig fortelle deg at det er farlig å endre filtype som dette; bare klikk OK. Alternativt kan du åpne et tekstredigeringsprogram (som Notisblokk eller TextEdit), klikk Fil > Nye
, og skriv inn /side.html
som filnavn

Når du har opprettet filen, åpne den i et tekstredigeringsprogram.; det er nok av fancy redaktører som tilbyr alle slags HTML-vennlige funksjoner, men for denne opplæringen, vil de nevnte Notepad eller TextEdit gjøre det bra. (Hvis du dobbeltklikker på filen, det vil trolig åpne i nettleseren din, slik at du enten må åpne tekstredigeringsprogram først og bruke Fil > Åpne
å velge filen, eller ( i Windows) høyreklikke på filen og velge Åpne med > Notepad
) Kontroller at du bruker en enkel tekst editor snarere enn en tekstbehandler

Tast inn dette i filen. <. br> Er dette HTML

Lagre den, og åpne den i nettleseren din - eller bare klikk her for å åpne mine. Det vil se omtrent slik ut:

Så det du går! Du har opprettet en nettside - en html-side - og det viser helt fint, uten noen feilmeldinger. Det er det, slutten av opplæringen, takk for lesing

Bare tuller, selvfølgelig

Nettlesere er ikke synsk

Her er et eksperiment:.. Ta en bildefil, kopiere den (slik at du ikke skader det opprinnelige bildet), og endre navn på kopien til something.html
. Deretter kan du prøve å åpne denne med nettleseren din. Klikk her for å åpne skjermbildet ovenfor, etter at det er blitt omdøpt fra PNG til html, i nettleseren din.

Yikes. Det er mye av gobbledegook. Men hvis du åpner den opprinnelige .png fil i nettleseren din, vil det belaste helt fint. Nettleseren din kan selvsagt takle disse filene, så hva skyldes det?

Når du åpner en .html
fil med nettleseren din, det sier "Hei, jeg vet hvordan de skal forholde seg til .html filer! " - Det forutsetter at innholdet av filen er skrevet med Hypertext Markup Language product: (HTML for kort, som du har gjettet), og prøver å bruke alt det vet om dette kodespråk for å vise siden. Bildefiler er ikke skrevet ved hjelp av HTML, så når den prøver å vise noe som gjør noe fornuftig å bruke sine HTML regler, mislykkes det stort

Det er andre filtyper som nettlesere assosierer automatisk med HTML -. Som HTM - og nettlesere kan også få beskjed om å anta at andre typer filer vil inneholde HTML -. som de ender på php eller ASPX

Så, ikke hver fil som er skrevet i HTML vil ende i HTML. Men betyr dette at Er dette HTML? er perfekt HTML i seg selv? Vel ... ikke akkurat.

Make People feil

Mens det faktiske innholdet i en bildefil er vanligvis generert av et program som Paint eller Photoshop basert på en brukers input, innholdet i en .html filen kan skrives direkte inn i filen av brukeren. Og brukere, å være menneske, gjøre feil

Nettlesere, generelt, feile på siden av tilgivelse.; snarere enn pettily nekter å vise en side dersom brukeren har gjort enda en enkel feil - som enkelte overivrig engelsklærere - det skal prøve å gjette hva brukeren mente og vise siden til det beste av sine evner
Er dette HTML ?, vil du bli sjokkert over å høre, er ikke ideelt HTML, ved at den ikke inneholder all informasjon en nettleser ønsker å se -., men det vil bli vist uansett

Dette middel, da, at filer som inneholder HTML ikke alltid ender i .html, og filer som slutter på .html ikke alltid inneholde perfekt HTML. Å forvirre saken ytterligere, noen ganger vil du ikke engang lagre en fil i det hele tatt, men heller skrive HTML rett inn i en stor tekstboks, innholdet som en datamaskin vil senere setter inn i midten av en større HTML-fil, som jeg 'm gjør nå?

Hva gjør en "riktig" HTML-side

All right, så en eneste linje med engelsk teller ikke som by-the-book HTML, det er ingen overraskelse. Hva bør vi legge til vår enkel fil, da?

Tags

Tags er det viktigste elementet i HTML. Litt som hvordan blogginnlegg tags identifisere emner av artikler, eller hashtags identifisere hvilke morsom meme en Tweet er å bli med på, HTML-koder identifisere noe om hva det er de er tagging. Dette er vage, jeg vet det, men du vil se hvorfor

For eksempel, i vår nåværende side.
Er dette HTML
... hva er "Er dette HTML?"?. Det er tekst, sikkert. Spesielt kan vi si at det er en paragraf
av tekst. Og for å vise dette, kan vi merke avsnittet ved å pakke den i tags (p for punkt - og nei, før du spør, det er ingen "setning" tag):
 Er dette HTML 
Hver brikke starter med et åpnings chevron < og avsluttes med en avsluttende chevron >, med navnet på merkelappen mellom pilene. Legg merke til at den andre tag har en skråstrek /direkte før kodenavn; Dette indikerer at det er en lukke
tag, og derfor markerer slutten av avsnittet startet av åpning
 tag. Hele avsnittet (inkludert tags), Er dette HTML <? /P > kan kalles en p-blokk

Ingenting av dette gjør siden skjermen annerledes, skjønt.; leseren ble vise innholdet i den opprinnelige filen som om de var i et avsnitt uansett. Noen koder som vil endre utseendet på teksten er b - for fet - og jeg for kursiv. Prøv dette:
 Is dette HTML 
Vi har fått koder i tags nå:? kursiv-kodet tekst og fet-kodet tekst er både inne i avsnitt block; dette kalles en hierarkisk
struktur. Det er som et tre, med p være stammen, og b og jeg blir grener. Jeg håper du kan se at dette ikke ville være fornuftig:
 Is dette HTML <? /p > .
... selv, ville nettleseren din faktisk vise det, fordi det er så skånsom

Uansett, lagre og åpne den i nettleseren din:
 Is dette HTML ? 
Klikk her for å se mine. Du vil se at den viser med fet og kursiv skrift, som dette:?

er dette
HTML

Eventuelle erfarne HTML utviklere leser dette over skulderen din vil bli rasende skrape seg selv og kalte meg en idiot for å bruke disse eksakte tags - vil du se hvorfor snart - men bare ignorere dem for øyeblikket

Ok, nå sammenligne. disse tre snutter:
 Is dette HTML ? Dette er absolutt et avsnitt. Is dette HTML ? Dette er absolutt et avsnitt. Is dette HTML ? Dette er absolutt et avsnitt. 
Hvordan tror du de vil hver skjerm

? Svaret er innlysende at det første viser de to avsnittene på separate linjer, den ene etter den andre; den andre vil vise de to avsnittene på en linje; og den tredje vil vise dem på separate linjer med et stort gap mellom dem.

Dette er ikke sant.

Alle de tre tilfellene vil vise på samme måte, som så. Anmeldelser
Hvorfor? Fordi HTML ikke bryr seg om linjeskift (nye linjer). Den har en regel som sier, som standard, "ledd blokker starte på nye linjer". Selv dette vil vise på samme måte:
 Is dette ? HTML Dette er absolutt et avsnitt 
Mens vi er i gang, så vil dette.
 Is dette HTML ? Dette er absolutt et avsnitt. 
HTML bryr seg om områder, men bare en av gangen. Dersom det er to eller flere på rad, de får kondensert ned til én.

Hvorfor? Vel, det er egentlig en del av et større tema som forklarer utvikleren venns kløe:

innhold, ikke Presentasjon

Når et innlegg på noen Tuts + nettstedet er merket "Basix", sier vår WordPress programvaren automatisk en liten tale boble med en "b" inne over toppen av bildet på toppen av innlegget. Tilsvarende er min Twitter-klient konfigurert slik at eventuelle Tweets som har blitt hashtagged "#bieberfever" vises i gigantiske fet rød tekst slik at jeg ikke går glipp av dem.

Men verken Basix heller #bieberfever antyde noe om presentasjon
av ting de er knyttet til; Basix sier "denne opplæringen er skrevet for nybegynnere", og #bieberfever sier "denne tweeten handler om Justin Bieber". De hver antyde noe om innhold
. Sine presentasjoner endres på grunn av ytre regler som bestemmer hvordan visse typer innhold skal vises.

HTML følger de samme idealer, og det er derfor B og jeg koder blir sett ned på. De bare eksisterer fordi da HTML ble oppfunnet (ca 18 år siden), hadde skaperne ikke besluttet på dette "eget innhold fra presentasjon" tenkemåte, så nettlesere har (igjen, på grunn av deres lenience) fortsatte å vise fet og kursiv koder noensinne siden.

Likevel, dette betyr ikke at du ikke kan bruke kursiv eller fet tekst i HTML-filer! Nei, du må bare bruke forskjellige koder, som identifiserer noe om innholdet i stedet for presentasjonen. Se, når du legger kursiv til en del av teksten, du prøver å understreke
innholdet - så i stedet for å bruke en jeg tag, bør du bruke en em tag. Og når du gjør noe av teksten fet, du prøver å styrke den på siden - så du bør bruke en sterk tag

Din HTML bør derfor se slik ut:
 Is <.; em > dette HTML ? . Dette er absolutt et avsnitt 
Som standard vil nettleseren vise at på akkurat samme måte som det gjorde da du brukte gamle B og jeg koder. Du kan godt spørre hvorfor vi ville bry endre det, da -. Svaret ligger i uttrykket "som standard"

Egne nettsider - selv enkelte avsnitt - kan fortelle leseren til å vise dem og sterke tags annerledes : anta at du bestemmer deg for at en stiplet understreking er en bedre måte å styrke teksten og små caps er en bedre måte å vise vekt. Du kan konfigurere dem til å gjøre en og sterk for å gjøre den andre på din side, og utseendet på all teksten vil endre seg, uten at du må endre tekstlig innhold i det hele tatt. Men det ville ikke gi noen mening å ha b-for-fet tag skjerm en stiplet understreking, ville det?

Det er et par andre tagger som b og jeg som ikke lenger er i bruk (sies å bli "foreldet"); du kan finne ut mer om en bestemt kode på W3Schools.

Jeg skal forklare litt mer om å endre utseendet på nettsidene senere. Jeg kan ikke forklare alt, så det er et stort emne, med en Tuts + stedet til seg selv.

Nødvendig Tags

Ok, så vi har en grunnleggende HTML-side som viser riktig, og inneholder ingen foreldet tags. Flott! Men det er noen koder som hver HTML-side krever, offisielt. La oss legge dem én etter én
. ≪ html > Is dette HTML ? . Dette er absolutt et avsnitt < /html >
html tag sier "hei, nettleser, er dette et HTML-dokument! " Til hvilket leseren antagelig ville svare: "Ja, takk, jeg hadde gjettet det!" Hvis det var en spydig menneske i stedet for et dataprogram. Alt av dokumentet bør gå inn i html-koden; å gå tilbake til treet metafor, bør html alltid være stammen
. < html > < body > Is dette HTML ? . Dette er absolutt et avsnitt < /body > < /html >
Kroppen inneholder det faktiske innholdet av siden. "I motsetning til hva?" I motsetning til ...
< html > < head > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt < /body > < /html >
... hodet tag, som inneholder informasjon om
siden, som ...
< html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt < /body > < /html >
... tittelen. Hvis du ser på tittellinjen i nettleseren din med din gamle HTML-siden lastes, vil det bare si noe sånt som "/side.html" (eller kanskje "Untitled", eller navnet på nettleseren). Hvis du bruker koden ovenfor, skjønt, det vil si "Dette er en HTML-side". Merk at "Dette er en HTML-side" vises ikke noe i selve innholdet på siden, men:. Dette illustrerer forskjellen mellom hodet og kroppen

At HTML blir litt vanskelig å lese nå , så kanskje du foretrekker å bruke Tab-tasten for å rykke linjene:
< html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt < /body > < /html >
innrykk linjer som dette bidrar også illustrerer at trestruktur. Hvis du ved et uhell kopiert og limt inn en kode på feil nivå, ville det være veldig tydelig, som dette:
< html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? < /body > Dette er absolutt et avsnitt. < /html >.
Det andre ledd er tydelig malplassert

Doctype

Jeg har nevnt en noen ganger at nettlesere er veldig tilgivende når du prøver å vise brutt (eller ikke-standard) HTML. Dette er en velsignelse og en forbannelse

Det betyr at slurvet HTML vil fortsatt bli vist, noe som er flott for alle som noen gang gjør en feil vil si hele menneskeheten -. Men forskjellige nettlesere vil vise ikke-standard HTML i forskjellige måter.

Det betyr at folk som gjør nettlesere kan komme opp med alle slags nye koder og funksjoner som ikke er en del av standard HTML, men som gjør skjermen i sin nettleser, som er flott for kjøring kraften av hva som kan gjøres med HTML fremover, utover de offisielle standarder - men ikke alle nettlesere støtter det samme settet. (For eksempel, mange år siden, Netscape Navigator lot deg lage blinkende tekst ved hjelp av < blink > tag, mens Internet Explorer lot deg lage tekst som rullet over skjermen ved hjelp av < marquee > kode; verken tag ble støttet etter den andre nettleseren, og begge effektene var veldig irriterende.)

Det betyr at nettleserutviklere brøt reglene (eller flate ut ignorert) noen områder av de offisielle HTML-standarder, slik at det var en forskjell mellom hvordan en side bør
display, og hvordan det faktisk
så ut.

I et nøtteskall, betyr det at selv i dag, forskjellige nettlesere vise de samme sidene annerledes.

For å forsøke å komme rundt dette vi har Doctyper
. For eksempel, hold dette på toppen av siden din (selv før html tag):
<! DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 Transitional //EN" >
.. .og nettleseren vil vise siden i "quirks mode", som betyr "å bruke ikke-standard praksis fra slutten av 90-tallet". Bytt den ut med denne!
≪! DOCTYPE HTML PUBLIC "- //W3C //DTD HTML 4.01 //EN" "http://www.w3.org/TR/html4/strict.dtd" > ... og det vil vise den i "standardmodus", som betyr "å bruke de offisielle HTML-standarder". Unntatt, noen eldre nettlesere som fremdeles er i bruk, som Internet Explorers 6 og 7, fortsatt ikke fullt ut følge alle standarder. Og ulike nettlesere fortsatt hver har sine egne tilleggsfunksjoner

Doctyper er et rot -. Det er mange og massevis av dem - men heldigvis vi ikke egentlig trenger å bekymre deg om dem, her på Activetuts +, fordi vi ' re fokus utelukkende på HTML5. Og HTML5 har bare en doctype:
<! DOCTYPE html >
Ahhh!. Ok, sikker, eldre nettlesere vet egentlig ikke hva jeg skal gjøre med det, men de ikke kan håndtere HTML5 uansett, så det spiller ingen rolle for oss. Vi må bare håpe at dagens nettlesere holde seg til HTML5 standarder og ikke komme inn i det gamle rotet igjen

Så nå skal du redigere HTML-siden til å legge til en DOCTYPE.
≪ ! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? < /body > Dette er absolutt et avsnitt. < /html >
Det er en merkelig tag, fordi det faktisk ikke legge noe (det er ingen < /DOCTYPE html >!), det har en plass i den, og det er til dels store bokstaver. Det er fordi det ikke er en tag i det hele tatt, det bare ser litt ut som en grunn av pilene. Ikke bry deg om det.

Egenskaper

Ok, vi har brukt dette språket til markering noen tekst, men hva pokker gjør at tekst så "Hyper", H av HTML?

Hypertext er definert som tekst, som vises på en slags elektronisk enhet, med hyperkoblinger til andre deler av teksten. (Begrepet ble skapt på 60-tallet, noe som forklarer hvorfor det høres så banal.) Og vet du hva hyperkoblinger er:. Tekstbiter som lenker til andre sider når du klikker på dem, slik

Vi skaper hyperkoblinger ved hjelp av en kode - for anker
, fordi du bruker det til å forankre en URL til en tekst. Nei, jeg vet ikke hvorfor de ikke bruker h eller l

Men dette alene er ikke nok.!
≪! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a > dette < /a > er en hyperkobling. < /body > < /html >
Jeg mener, hvordan kunne det? Det er ingen URL der

Vi må bruke en tilskriver
av en kode, slik:.!
≪! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href > dette < /a > er en hyperkobling. < /body > < /html >
Vi har lagt en href (hyper referanse) attributt til en kode, som vil tillate det å holde en URL (selv om vi ikke har spesifisert URL ennå). Legg merke til at det er fortsatt en en kode, ikke en a href tag, og at den avsluttende koden er fortsatt < /a >, ikke < /a href >; Dette er grunnen til at kodenavnene er alltid et enkelt ord, uten mellomrom

Hvis du vil angi href verdi til en bestemt URL, bruker vi et likhetstegn, og legge inn nettadressen i anførselstegn.
<! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < /body > < /html >
Prøv det ut. Ved å klikke på linken vil ta deg til de Activetuts + hjemmeside.

Attributter lage HTML mye kraftigere. Sette en p tag rundt noen tekst bare sier, "dette er et avsnitt" - det legger en opplysning til teksten - men med attributter kan vi si så mye mer; her har vi sa, "ordet" dette "er et anker, og Selge den refererer til http://active.tutsplus.com/".

selvlukkende Tags

Dette er veldig vanlig, så la oss legge til et bilde.

Bortsett ... hmm, hvordan akkurat vi markere en del av teksten for å gjøre det et bilde? Du kan gjette på noe sånt som dette:
< image href = "http://website.com/some_image.png" > bilde av en katt < /bilde >
... som er en god gjetning ., men ikke riktig

I dette tilfellet er det ingen mening å ha bildets tag - som er img, forresten - tag eventuell tekst. Vi skriver det (uten attributter, for nå) som så:
< img />
Den skråstrek på slutten indikerer at taggen avsluttes selv
. Det er litt av en merkelig konsept, og er der hele ideen om tags tagging tekst faller ned litt. Hvis du foretrekker, kan du ringe HTML-koder elementer
stedet

Uansett, la oss sette dette inn i vår side:.!
≪! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < img /> < /body > < /html >
Som en tag, img vil ikke vise noe uten attributter. La oss legge til noen

Vi trenger en bildefil som skal brukes.; denne filen må være tilgjengelig for alle som leser siden din, så mens du kan bruke filbanen for et bilde på datamaskinen, vil du være den eneste som kunne se den.

Jeg skal bruke min Twitter avatar, siden det er på nettet, og håper det endrer ikke før du leser denne opplæringen. Det er: http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png, så, ikke akkurat kort

Snarere enn å bruke href for attributtet som peker til denne nettadressen, må vi bruke src. (forkortelse for "source") - tross alt, det er faktisk ikke en hyperkobling. Så:!
≪! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < img src = "http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png" /> < /body > < /html >
Hvis du legger denne siden, vil du se min avatar på bunnen - uten at jeg har endret det eller Twitter har gått ned, og i så fall vil du se en " . broken image "symbol

I tilfelle bildet ikke brytes, kan vi legge til en alternativ stykke tekst som skal vises i stedet, ved hjelp av alt-attributtet!
<! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < img src = "http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png" alt = "MichaelJW sin Twitter Avatar" /> < /body > < /html >
(. Husk, HTML ikke bryr seg om faner, nye linjer og mellomrom, så det spiller ingen rolle at jeg har dyttet den nye attributt på en egen linje)

Prøv å endre src URL til en som ikke vil fungere (som, http: //blahblahblah /), og du vil se den alternative teksten (klikk her for et eksempel). Vel, kanskje du, avhengig av nettleseren; HTML 5 standarder foreslår å gjøre dette, men ikke insistere på det. Chrome gjør ikke det, mye til min overraskelse

Uansett, det er en god vane å komme inn på, fordi det også gir blinde -. Som leser siden din via tekst-til-tale-programvare - for å høre innholdet i bildene.

Nøstet Tags

Vi har sett at kodene kan nestes, som i vårt tilfelle noen kursiv streket tekst i et avsnitt, eller avsnitt i en kropp, men jeg ønsker å gjøre det klart at du kan gjøre ting mer komplisert hvis du ønsker

For eksempel kan du merke opp noen understreket tekst med et anker.!
<! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < img src = "http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png" alt = "MichaelJW sin Twitter Avatar" /> < /body > < /html >
... så lenge du ikke gjør noe dumt som:
 Og < a href = "http: //active.tutsplus. com /"> dette < /a > er en hyperkobling 
Du kan også tagge et bilde med et anker, som om det var en del av teksten:.!
<! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < a href = "http://twitter.com/MichaelJW/" > < img src = "http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png" alt = "MichaelJW sin Twitter Avatar" /> < /a > < /body > < /html >
Se resultatene her

Det er massevis av andre koder jeg kunne dekke, som h1, h2, h3 (etc.) for overskrifter.; pre for å sette inn store blokker av kildekoden eller ASCII art (inne som uvanlig, gjør HTML ta hensyn til ekstra mellomrom og nye linjer); bord for å sette inn tabulert informasjon; innspill for å legge til knapper og tekstbokser; iframe, som lar deg sette inn en hel ekstra nettside inne
gjeldende websiden; og mer - men dette er nok om innholdet, fordi vi trenger å snakke om et annet aspekt av HTML

Presentasjon. CSS

HTML - språket - er ikke opptatt av presentasjon, det er sant. Men HTML sider
må være i stand til å endre sin presentasjon, eller alt ville være Times New Roman med lilla koblinger, som i eksemplene vi har sett så langt!

For dette formålet vi har et annet språk, som vi legge inne HTML-sider, som handler om presentasjon. Cascading Style Sheets (CSS)

Et enkelt eksempel

Husk tidligere nevnte jeg at vi kunne lage sterke tags skjerm med en stiplet understreking, og em tags utstilt i små caps? Vi kan gjøre det ved hjelp av CSS språket. Det ser ut som dette, på egen hånd:
sterk {border-bottom: 1px stiplet;} em {font-variant: small-caps;}
Ser ikke på alle som HTML, gjør det vel? Du kan sikkert lest det godt nok, skjønt. Vi har navnet på en tag, etterfulgt av et par klammeparenteser ("bukseseler"), inne som er alle egenskapene til den teksten som vi ønsker å sette. Hver eiendom har deretter en verdi, med et kolon skiller eiendommen fra sin verdi, og et semikolon på slutten av hver eiendom lige paret. Sammen, dette kalles en style sheet
. . Enkelt nok

Vi bruker et stilark til siden slik:!
≪! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < style type = "text /css" > sterk {border-bottom: 1px stiplet; } Em {font-variant: small-caps; } ≪ /style > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < a href = "http://twitter.com/MichaelJW/" > < img src = "http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png" alt = "MichaelJW sin Twitter Avatar" /> < /a > < /body > < /html >
Test side. Du vil se at ordet "dette" nå bruker små bokstaver (i begge tilfeller, fordi de er begge understreket), og "HTML" har en stiplet understreking.

Men fortsatt har em tag en kursiv effekt, og sterk er fortsatt viser ordene i fet skrift. Hva gir

Dette er hva "Cascading" i "Cascading Style Sheets" refererer til:? Leseren har sine egne, standard CSS-stiler (som "em" betyr "kursiv"), og disse cascade
ned, slik at CSS-stiler som du bruker er rett og slett lagt på toppen, snarere enn å erstatte de eksisterende. Det er som om nettleseren har et stilark som ser slik ut:
sterk {font-weight: bold;} em {font-style: italic;}
(Ja, jeg vet, det er bakvendt å ikke bruke den samme egenskapen å sette kursiv og fet stiler)

Dette blir da kaskader ned, slik at det er som om den generelle stilen ark - inkludert variantene - ser slik ut:.
sterk {font-weight: dristig; border-bottom: 1px stiplet;} em {font-style: italic; font-variant: small-caps;}
Vær oppmerksom på at dine egenskaper er lagt etter
nettleserens egne. Siden nettleseren beregner disse egenskapene en om gangen, i rekkefølge, kan vi utjevne nettleserens stiler ved å endre vår sett stiler som så:
sterk {border-bottom: 1px stiplet; font-weight: normal;} em {font-variant: small-caps; font-style: normal;}
Så, den generelle stilen arket vil se slik ut:
sterk {font-weight: bold; border-bottom: 1px stiplet; font-weight: normal;} em {font-style: italic; font-variant: small-caps; font-style: normal;}
Når nettleseren kommer over teksten som er blitt tagget sterk, det vil si, ok, først, jeg trenger å gjøre denne dristige. Så, jeg trenger å gi den en 1 pixel tykk, prikkete grensen, på bunnen av teksten. Så, jeg trenger å gjøre skriften vekten normal. Vent, det gjorde jeg ikke gjøre denne dristige en andre siden? Oh well, never mind

. Resultat: normal vektet tekst, med en stiplet kant over bunnen. La oss innlemme denne nye sett med stiler til vår side!
≪! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < style type = "text /css" > sterk {border-bottom: 1px stiplet; font-weight: normal; } Em {font-variant: small-caps; font-style: normal; } ≪ /style > < /head > < body > Is dette HTML ? . Dette er absolutt et avsnitt Og < a href = "http://active.tutsplus.com/" > dette < /a > er en hyperkobling. < a href = "http://twitter.com/MichaelJW/" > < img src = "http://a3.twimg.com/profile_images/1403171562/VectorMJWSquareTransparent.png" alt = "MichaelJW sin Twitter Avatar" /> < /a > < /body > < /html >
Last inn siden. Perfekt!

Andre kilder til CSS

Stikker stilarket i en stil tag i hodet av en side kalles embedding
det, men det finnes andre måter vi kan påvirke den generelle stilen på siden.

For eksempel kan vi sette stilark inn i sin egen CSS-fil (kalt en eksternt stilark
), og fortelle siden for å bruke den. For å gjøre det, bruker vi et sted en selvlukkende link tag i hodet, hvis rel-attributtet er stylesheet og hvis href tag er nettadressen til en CSS-fil.

Du bør være i stand til å finne ut hvordan for å skrive det fra beskrivelsen; prøv det med stilark vi bruker på Activetuts +: http://active.tutsplus.com/wp-content/themes/tuts/style.css. Hvis du trenger hjelp, utvide koden boksen nedenfor
. ≪! DOCTYPE html > < html > < head > < title > Dette er en HTML-side < /title > < link rel = "stylesheet" href = "http://active.tutsplus.com/wp-content/themes/tuts/style.css" /> < style type = "text /css" > sterk {border-bottom: 1px stiplet; font-weight: normal; } Em {font-variant: small-caps; font-style: normal; } ≪ /style > < /head > < body > Is dette < /a > < head > < style type = "text /css" > font-weight: normal; font-style: normal; < /head > < body > < /a > < head > < style type = "text /css" > font-weight: normal; font-style: normal; < /head > < body > < /a > < head > < style type = "text /css" > font-weight: normal; font-style: normal; < script > < /script > < /head > < body > < /a > < head > < style type = "text /css" > font-weight: normal; font-style: normal; < script > < /script > < /head > < body > < /a >

Previous:Forstå Date (): Lage en kalender i AS3

Next Page:Eksklusiv Freebie: Tr.ace (), en utmerket AS3 Debugging Utility