SlideShare ist ein Scribd-Unternehmen logo
1 von 18
Html
En kort introduksjon
 Html = hypertext markup language
(markeringsspråk)
Fordeler ved å kunne litt html
 Fikse på avanserte ting
 Lettere å lære seg redigereren
 Lettere å bytte redigerer (eks fra Dreamweaver til
Frontpage)
 Ikke avhengig av redigerer
 Dynamiske websider
 Forstå hvordan andre sider er laget (kildekode)
Markeringsspråk
 Skriver vanlig tekst
 Markerer med tagger
 Teksten får spesielle egenskaper
 Eks:
Gratulerer, du fikk karakteren fem
html:
Gratulerer, du fikk karakteren <strong>
fem</strong>
Kode og tag
 En kode består av tagg
 Taggene står innenfor vinkelparanteser: <>
Hva består HTML av?
Gratulerer, du fikk en <strong>femmer</strong>
Tekst som
skal gjøres
noe med
TAGGER
Sier hva som skal
gjøres
Hva består HTML av?
<strong>femmer</strong>
Start-tagg
Markerer starten på det
som skal gjøres noe med
Slutt-tagg
Markerer slutten på det som skal
gjøres noe med.
Starter alltid med </
< >
Taggene står alltid innenfor
vinkelparanteser
To typer htmltagger
 Type 1:
Markerer et område med tekst, gir det en spesiell
mening.
Eks:
Gratulerer, du fikk karakteren fem
html:
Gratulerer, du fikk karakteren <strong>
fem</strong>
 Type 2:
Markerer bare et punkt i teksten. Starter og slutter
samtidig.
Her er første linje <br/>
Her er andre linje
Atributter
 Html-tagger kan ha attributter.
 Forteller noe om hvordan taggen skal oppføre seg.
 Eks:
<img src="images/smear_your_smiles_100pxl.jpg"
alt="Smear your Smiles back on" width="100"
height="100" class="leftimage" />
I dette eks har bildet 5 atrributter
Attributter
Andre eksempler
<img src=”img/bilde.jpg” alt=”Beskrivelse” />
<strong style=”color:red;”>Rød og bold</strong>
<a href=”http://ulv.no” alt=”Beskrivelse” target=”_blank”>Link til
ulv.no</a>
Html-koder
 En html-kode inneholder tre <beholder-tagger>:
(+<TITLE>)
 HTML, HEAD, BODY
 <HTML>
omslutter all teksten i dokumentet.
 <HEAD>
inneholder en del tilleggsdata.
 <BODY>
inneholder dataene til selve websiden.
I denne beholderen plasseres teksten, og taggene
som angår bilder, tabeller, linker og lignende.
 Eks:
<HTML>
<HEAD>
<TITLE>
</TITLE>
</HEAD>
<BODY>
</BODY>
</HTML>
 NB: Fargene er kun ment for å vise hvor taggene
starter/slutter
Kort og tett forklart….
 <html> - sier ifra at dette er et HTML-dokument som
nettleseren skal lese.
 <head> - hodet til dokumentet inneholder...
 <title> - tittelen til dokumentet som kommer i
nettleserens tittellinje</title>
 </head> - hodet avsluttes etter at tittelen er
avsluttet
 <body> - kroppen til dokumentet, selve innholdet på
siden kommer etter denne
 </body> - kroppen avsluttes når alt innholdet er med
 </html> - sier ifra at HTML-dokumentet er ferdig
Avslutning av tagger
 Legg merke til at taggene har avlutninger som angis
med skråstrek.
 Kommandoen <HEAD> avsluttes med </HEAD>
- mellomrom
- tabulatorer mellom taggene
- avsnitt
- blanke linjer
 ikke ha noen innvirkning på websiden
 bare gjøre koden mer oversiktelig

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (10)

Presentasjon1 html
Presentasjon1 html Presentasjon1 html
Presentasjon1 html
 
Html
HtmlHtml
Html
 
Skrive notater
Skrive notaterSkrive notater
Skrive notater
 
Ordlister og korrektur
Ordlister og korrekturOrdlister og korrektur
Ordlister og korrektur
 
html
htmlhtml
html
 
Html语言基础
Html语言基础Html语言基础
Html语言基础
 
Webteknologi Hoesten 2008
Webteknologi Hoesten 2008Webteknologi Hoesten 2008
Webteknologi Hoesten 2008
 
Html
HtmlHtml
Html
 
hva er css?
hva er css?hva er css?
hva er css?
 
Html presentasjon
Html presentasjonHtml presentasjon
Html presentasjon
 

Ähnlich wie Html basic intro

Ähnlich wie Html basic intro (7)

Webteknologi
WebteknologiWebteknologi
Webteknologi
 
Webteknologi
WebteknologiWebteknologi
Webteknologi
 
HTML for nettredaktører
HTML for nettredaktørerHTML for nettredaktører
HTML for nettredaktører
 
Pj1100 slideserie1 intro_html
Pj1100 slideserie1 intro_htmlPj1100 slideserie1 intro_html
Pj1100 slideserie1 intro_html
 
Html kurs igm
Html kurs igmHtml kurs igm
Html kurs igm
 
Khib interaksjonsdesign 6 html og css
Khib interaksjonsdesign 6  html og cssKhib interaksjonsdesign 6  html og css
Khib interaksjonsdesign 6 html og css
 
Css
CssCss
Css
 

Mehr von akh78

Bubu presentasjon aida_anja
Bubu presentasjon aida_anjaBubu presentasjon aida_anja
Bubu presentasjon aida_anjaakh78
 
Web viktig til_presentasjon
Web viktig til_presentasjonWeb viktig til_presentasjon
Web viktig til_presentasjonakh78
 
Internett historie
Internett historieInternett historie
Internett historieakh78
 
Hollywoodmodellen 1
Hollywoodmodellen 1Hollywoodmodellen 1
Hollywoodmodellen 1akh78
 
Test
TestTest
Testakh78
 
Test
TestTest
Testakh78
 
Internett historie
Internett historieInternett historie
Internett historieakh78
 
Lysbildefakta anja
Lysbildefakta anjaLysbildefakta anja
Lysbildefakta anjaakh78
 
Skrive for skjerm
Skrive for skjermSkrive for skjerm
Skrive for skjermakh78
 
Web viktig til_oppgave
Web viktig til_oppgaveWeb viktig til_oppgave
Web viktig til_oppgaveakh78
 
Web viktig til_oppgave
Web viktig til_oppgaveWeb viktig til_oppgave
Web viktig til_oppgaveakh78
 
Web viktig til_oppgave
Web viktig til_oppgaveWeb viktig til_oppgave
Web viktig til_oppgaveakh78
 
Css – cascading style sheets ny
Css – cascading style sheets nyCss – cascading style sheets ny
Css – cascading style sheets nyakh78
 
Webdesign prosessen komprimert
Webdesign prosessen komprimertWebdesign prosessen komprimert
Webdesign prosessen komprimertakh78
 
Webdesign intro
Webdesign introWebdesign intro
Webdesign introakh78
 
Internett historie
Internett historieInternett historie
Internett historieakh78
 
Kort om dreamweaver
Kort om dreamweaverKort om dreamweaver
Kort om dreamweaverakh78
 
Skrive for skjerm
Skrive for skjermSkrive for skjerm
Skrive for skjermakh78
 
Husker du
Husker duHusker du
Husker duakh78
 

Mehr von akh78 (19)

Bubu presentasjon aida_anja
Bubu presentasjon aida_anjaBubu presentasjon aida_anja
Bubu presentasjon aida_anja
 
Web viktig til_presentasjon
Web viktig til_presentasjonWeb viktig til_presentasjon
Web viktig til_presentasjon
 
Internett historie
Internett historieInternett historie
Internett historie
 
Hollywoodmodellen 1
Hollywoodmodellen 1Hollywoodmodellen 1
Hollywoodmodellen 1
 
Test
TestTest
Test
 
Test
TestTest
Test
 
Internett historie
Internett historieInternett historie
Internett historie
 
Lysbildefakta anja
Lysbildefakta anjaLysbildefakta anja
Lysbildefakta anja
 
Skrive for skjerm
Skrive for skjermSkrive for skjerm
Skrive for skjerm
 
Web viktig til_oppgave
Web viktig til_oppgaveWeb viktig til_oppgave
Web viktig til_oppgave
 
Web viktig til_oppgave
Web viktig til_oppgaveWeb viktig til_oppgave
Web viktig til_oppgave
 
Web viktig til_oppgave
Web viktig til_oppgaveWeb viktig til_oppgave
Web viktig til_oppgave
 
Css – cascading style sheets ny
Css – cascading style sheets nyCss – cascading style sheets ny
Css – cascading style sheets ny
 
Webdesign prosessen komprimert
Webdesign prosessen komprimertWebdesign prosessen komprimert
Webdesign prosessen komprimert
 
Webdesign intro
Webdesign introWebdesign intro
Webdesign intro
 
Internett historie
Internett historieInternett historie
Internett historie
 
Kort om dreamweaver
Kort om dreamweaverKort om dreamweaver
Kort om dreamweaver
 
Skrive for skjerm
Skrive for skjermSkrive for skjerm
Skrive for skjerm
 
Husker du
Husker duHusker du
Husker du
 

Html basic intro

  • 2.  Html = hypertext markup language (markeringsspråk)
  • 3. Fordeler ved å kunne litt html  Fikse på avanserte ting  Lettere å lære seg redigereren  Lettere å bytte redigerer (eks fra Dreamweaver til Frontpage)  Ikke avhengig av redigerer  Dynamiske websider  Forstå hvordan andre sider er laget (kildekode)
  • 4. Markeringsspråk  Skriver vanlig tekst  Markerer med tagger  Teksten får spesielle egenskaper
  • 5.  Eks: Gratulerer, du fikk karakteren fem html: Gratulerer, du fikk karakteren <strong> fem</strong>
  • 6. Kode og tag  En kode består av tagg  Taggene står innenfor vinkelparanteser: <>
  • 7. Hva består HTML av? Gratulerer, du fikk en <strong>femmer</strong> Tekst som skal gjøres noe med TAGGER Sier hva som skal gjøres
  • 8. Hva består HTML av? <strong>femmer</strong> Start-tagg Markerer starten på det som skal gjøres noe med Slutt-tagg Markerer slutten på det som skal gjøres noe med. Starter alltid med </ < > Taggene står alltid innenfor vinkelparanteser
  • 9. To typer htmltagger  Type 1: Markerer et område med tekst, gir det en spesiell mening. Eks: Gratulerer, du fikk karakteren fem html: Gratulerer, du fikk karakteren <strong> fem</strong>
  • 10.  Type 2: Markerer bare et punkt i teksten. Starter og slutter samtidig. Her er første linje <br/> Her er andre linje
  • 11. Atributter  Html-tagger kan ha attributter.  Forteller noe om hvordan taggen skal oppføre seg.  Eks: <img src="images/smear_your_smiles_100pxl.jpg" alt="Smear your Smiles back on" width="100" height="100" class="leftimage" /> I dette eks har bildet 5 atrributter
  • 12. Attributter Andre eksempler <img src=”img/bilde.jpg” alt=”Beskrivelse” /> <strong style=”color:red;”>Rød og bold</strong> <a href=”http://ulv.no” alt=”Beskrivelse” target=”_blank”>Link til ulv.no</a>
  • 13. Html-koder  En html-kode inneholder tre <beholder-tagger>: (+<TITLE>)  HTML, HEAD, BODY
  • 14.  <HTML> omslutter all teksten i dokumentet.  <HEAD> inneholder en del tilleggsdata.  <BODY> inneholder dataene til selve websiden. I denne beholderen plasseres teksten, og taggene som angår bilder, tabeller, linker og lignende.
  • 15.  Eks: <HTML> <HEAD> <TITLE> </TITLE> </HEAD> <BODY> </BODY> </HTML>  NB: Fargene er kun ment for å vise hvor taggene starter/slutter
  • 16. Kort og tett forklart….  <html> - sier ifra at dette er et HTML-dokument som nettleseren skal lese.  <head> - hodet til dokumentet inneholder...  <title> - tittelen til dokumentet som kommer i nettleserens tittellinje</title>  </head> - hodet avsluttes etter at tittelen er avsluttet  <body> - kroppen til dokumentet, selve innholdet på siden kommer etter denne  </body> - kroppen avsluttes når alt innholdet er med  </html> - sier ifra at HTML-dokumentet er ferdig
  • 17. Avslutning av tagger  Legg merke til at taggene har avlutninger som angis med skråstrek.  Kommandoen <HEAD> avsluttes med </HEAD>
  • 18. - mellomrom - tabulatorer mellom taggene - avsnitt - blanke linjer  ikke ha noen innvirkning på websiden  bare gjøre koden mer oversiktelig