Introduktion till webbutveckling HT12: föreläsning 3

Introduktion till webbutveckling F3

Idag • Återkoppling labb Vanliga valideringsfel • Dokumentstruktur i HTML
(4 vs. 5) • Hyperlänkar och sökvägar • Två vanliga typer av element • Tabeller • Formulär

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta
http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> </head> <body> <h1>En bild</h1> <img src="minbild.jpg"> </body> </html>

http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> </head> <body> <h1>En bild</h1> <img src="minbild.jpg" alt=""> </body> </html>

Skärmläsare och bilder http://www.youtube.com/watch?v=IK97XMibEws

http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Test</title> </head> <body> <h1>En bild</h1> <p> <img src="minbild.jpg" alt=""> </p> </body> </html>

(Tillåten) struktur för HTML-dokument

Block- eller inlineelement • Element kan inte nästlas hur
som helst. • Viktig aspekt: elementtyp block eller inline. • Tumregel: blockelement kan innehålla inlineelement, men inte tvärt om. • Vissa element (som <body>) får endast innehålla block-element HTML 4

https://developer.mozilla.org/en-US/docs/HTML/Block-level_elements

HTML5 ﬂow ≈ block inline ≈ phrasing https://developer.mozilla.org/en-US/docs/HTML/Content_categories

Headings + Sections = Outline

<h1>Forest)elephants</h1> <p>In)this)section,)we)discuss)the)lesser) known)forest)elephants. ...this)section)continues... <h2>Habitat</h2> <p>Forest)elephants)do)not)live)in)trees)but) among)them. ...this)subsection)continues... <h2>Diet</h2> <h1>Mongolian)gerbils</h1>

1. Forest elephants 1.1 Habitat 1.2 Diet 2. Mongolian gerbils

<section> ))<h1>Forest)elephants</h1> ) ))<section> ))))<h1>Introduction</h1> ))))<p>In)this)section,)we)discuss)forest)elephants. ))</section> ))<section> ))))<h1>Habitat</h1> ))))<p>Forest)elephants)do)not)live)in)trees)but)among)them.)
))</section> ))<aside> ))))<p>advertising)block ))</aside> </section> <footer> ))<p>(c))The)Example)company </footer>

1. Forest elephants 1.1 Introduction 1.2 Habitat 1.3 Section (aside)

<section> ))<h1>Section)and)outlines)of)a)document</h1> ))<h2>HTML,)HTML5,)Sections,)Outlines</h2> </section> 1. Section and outlines of a
document 1.1 HTML, HTML5, Sections, Outlines

<section> ))<hgroup> ))))<h1>Section)and)outlines)of)a)document</h1> ))))<h2>HTML,)HTML5,)Sections,)Outlines</h2> ))</hgroup> </section> 1. Section and outlines
of a document

Läs mer: https://developer.mozilla.org/en-US/docs/ Sections_and_Outlines_of_an_HTML5_document

Hyperlänkar

• Hyperlänkar bygger på att man skapar ankare. • Ett
ankare ”sitter fast” på en viss plats i dokumentet. • En länk består av två ankare och en riktning. • Riktningen anger start (källa) och destination. • Start och destination i samma dokument. • Start och destination i olika dokument. “anchor”

Lorem ipsum

• Absoluta länkar • Relativa länkar • Länk till speciﬁk
plats i dokument

Relativa länkar store/buy.html

Relativa länkar ../index.html ../

Relativa länkar ../../index.html ../../

links.html

<table>

Viktiga element • <table> • <tr> • <td> • <th>
skapar själva tabellen rad cell rubrikcell

Nyttiga element • <thead> • <tbody> • <tfoot> • <caption>
tabellhuvud (typiskt rubriker) tabellinnehåll tfoot rubrikcell

Presentation • Det ﬁnns många attribut för att styra presentationen
av tabeller • bgcolor,)align,)valign,)width,)rules... • I huvudsak ska dessa egenskaper styras med stilmallar (CSS)

table.html Exempel

<form>

Sammanfattning <form> • Formulär innehåller en mängd namngivna formulärelement •
input,)textarea,)select,)... • Värdena för dessa anges oftast av användaren • Namn- och värdepar skickas med GET eller POST

<form> Name: <input type="text" name="name"> Email: <input type="text" name="email"> Comments:
<textarea name="comments"></textarea> <input type="submit" value="submit"> </form>

<form action="..."> Name: <input type="text" name="name"> Email: <input type="text" name="email">
Comments: <textarea name="comments"></textarea> <input type="submit" value="submit"> </form>

Tänk på tillgängligheten • <label> kopplar ihop beskrivningar med formulärelement
Samma som id Samma som for

form.html Exempel

Gör mer med formulär och HTML5: http://diveintohtml5.info/forms.html

Introduktion till webbutveckling HT12: föreläsning 3

Introduktion till webbutveckling HT12: föreläsning 3

More Decks by Fredrik Ohlin

Other Decks in Technology

Featured

Transcript