Empfohlen
Weitere ähnliche Inhalte
Empfohlen
Empfohlen (20)
Introduksjon til html
- 2. HTML mal <!DOCTYPE HTML> <html> <head> … </head> <body> … </body> </html> Den første linja deklarerer dokumenttype. Elementer (tag’er): html, head, body <> åpner elementet </> lukker elementet Elementer brukes til å inndele html dokumentet i mindre deler. Hver tag (del) har sin spesielle oppgave. 2
- 3. Doctype • HTML 5 ▫ <!DOCTYPPE html> • XHTML ▫ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> 3
- 4. <!DOCTYPE html> <html> <head> … </head> <body> … </body> </html> html forteller nettleseren at her begynner dokumentet. head Inneholder tittel, kan inneholde linker til stilskjema, scripts body inneholdet i html-dokumentet (det du ser i nettlesern når du åpner siden) 4
- 5. Attributter <tag id=""> Eks. <p id="winstonChurchill"> for å merke et avsnitt vi har skrevet om Winston Churchill id er her en attributt til <p> Vi bruker = for å tilordne en attributt en bestemt verdi Verdien må stå i anførselstegn. Brukes for å referere til html elementer fra scripts og css 5
- 6. Tekst <p>Her begynner du å skrive…</p> <br>  <br>. For å skrive et avsnitt bruker vi <p>-tagen For å få linjeskift bruker vi <br>. Kan brukes inne i <p></p> En "html-hack" For å få en tom linje kan vi bruke  <br>. En "html-hack" anbefales ikke da mellomrom kan løses mer elegant med css 6
- 7. Tekstformatering <b></b> <i></i> <sub></sub> Fet skrifttype Kursiv Subskript Denne type av formatering anbefales ikke da tekstformatering løses mer elegant med css (Cascading Stylesheets) 7
- 8. Særnorske tegn • Æ = Æ • Ø = Ø • Å = Å • æ = æ • ø = ø • å = å 8
- 9. Linker <a href="http://code.org">Hvorfor vi bør lære programmering</a> Linken vil komme i blå skrift og understreket 9
- 10. Bilder <img src="url" alt="beskrivelse" height="antall pixler" width="antall pixler"> Eks. <img src=“ford1967.gif” alt=“En 1967 ford” height="150" width="300"> Antar at bildet ligger i samme mappe som html dokumentet url = webadressen til bildet alt= beskrivelse av bildet Height og width er viktig å spesifisere fordi de forteller nettleseren hvor mye plass på siden bildet trenger før bildet blir lasta ned . 10
- 11. Bilder Nb! • Når du skal endre størrelse på et bilde, gjør dette i et bildebehandlingsprogram, ikke i html. • Husk alltid å angi høyde og bredde på et bilde. 11
- 12. Tabeller Eks. <table> <tr> <th>Header 1</th> <th>Header 2</th> </tr> <tr> <td>row 1, col 1</td> <td>row 1, col 2</td> </tr> <tr> <td>row 2, col 1</td> <td>row 2, col 2</td> </tr> </table> <table> markerer at tabellen begynner For å starte en ny rad: <tr>…</tr> For å legge inn en oppføring på raden må vi bruke: <td>…</td> Vi avslutter tabellen med </table> Vi kan også definere en ramme rundt tabellen ved å bruke <table border="1"> hvor 1 kan byttes ut med en annen størrelse 12
- 13. Uordna lister Eks. <ul> <li>JavaScript</li> <li>Serverside script</li> <ul> <li>asp</li> <li>php</li> <li>cgi</li> </ul> </ul> Her har vi en liste med to nivåer (nested list) <ul> står for unordered list <li> står for list item 13
- 14. <div> elementet Eks. <div style= "font-size:120%";> <p>…</p> <table>…<table> </div> <div> er en container (tenk på det som en boks) vi kan putte andre html elementer inn som <p> <table> <h1> osv. På den måte kan vi bruke samme stilformatering på mange elementer ved hjelp av style- attributten (css). 14
- 15. Forms Eks. <form> Navn: <input type="text" name="navn"> </form> Forms brukes til å hente inn informasjon som en bruker av siden skriver inn. <input> er bare en av de mulige tagene som kan brukes i forms. <input> i seg selv kommer i mange forskjellige utgaver (types). Eksempelet her viser typen tekst-felt, men vi kan også ha checkboxer, radio buttons osv. 15