Web 3

HTML Snabb repetition + länkar/tabeller/formulär

Hur fungerar det? Internet Klient Klient Server

Svar? • Svaret är i form av HTML, som strukturerar
upp den information som skickas från servern till oss • HTML-dokumentet kan sedan inkludera bl.a. text, bilder, formgivning av sidan, interaktiva element osv.

Vad är en webbsida? • En webbsida är det som
webbläsaren visar oss efter att ha renderat ett HTML-dokument

Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet
Utformning Struktur Innehåll

HTML • Hypertext Markup Language • Märkspråk • Används för
att ge dokument en struktur – vad är vad? • HTML byggs upp utav element som märker upp vilken typ av innehåll som finns på sidan

HTML som märkspråk

Element? • Det finns olika element som representerar olika innehåll,
t.ex. rubriker, paragrafer, listor m.m. • Grundprincipen är att det finns en start- och ett sluttagg. Det innehåll som finns mellan dessa taggar tilldelas elementets formatiering. • Kan även ha attribut

Exempel på element Element • <h1> - Största rubriken (Heading
1) • <h2> - Näst största rubriken (Heading 2) • <p> - En paragraf (Paragraph) • <em> - Kursiv text (Emphasized) • <ul> - Oordnad lista (Unordered list) • <li> - Objekt i lista (List item) Exempel • <h1>Rubrik av typen 1</h1> • <h2>Rubrik av typen 2</h2> • <p>Detta är en paragraf</p> • <em>Detta blir kursivt</em> • <ul> <li>Punkt 1 i listan</li> <li>Punkt 2 i listan</li> </ul>

Ett HTML-dokuments struktur <!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <title>Min
sida</title> </head> <body>  </body> </html> Element som ingår i ett HTML-dokument: - <html>, rotelementet - <head>, dokumenthuvud (info om dokumentet) - <title>, dokumentets titel - <body>, dokumentets innehåll

Exempel på HTML-struktur Text-editor Webbläsare

HTML-dokumentet i helhet

Attribut hos HTML-element • Element kan ha attribut • Attribut
ger mer information till HTML-elementet som t.ex. - adress till en bild (<img src=”adressen”>) - adress till en länk (<a href=”adressen”>länk</a>) - identifierar ett specifikt element (<p id=”start”>text</p>) - ge mervärde till ett element (<img src=”#” title=”Bild”>) <element attribut=”värde”> T.ex. <h1 id=”Start”>

TABELLER I HTML

Tabeller • Används när man vill strukturera upp information •
Tänk ”excel”

Tabeller - uppbyggnad • En tabell är, precis som i
excel, uppbygg av rader och kolumner • Kan bestå av: - Tabellhuvud/tabellkropp/tabellfot - Rubrik - Rader - Kolumner

Taggar för tabeller • <table> Skapar en tabell • <caption>
Beskrivning/rubrik för tabell • <tr> tabellrad (table row) • <th> Rubrik-kolumn (table header) • <td> Data-kolumn (table data) • Obs, alla taggarna har start- och slutttagg.

Tabell – huvud/kropp/fot • I en tabell (med fördel större
omfattande tabeller) kan man strukturera upp innehållet genom taggarna - <thead> - <tbody> - <tfoot> • T.ex. <table> <thead>…</thead> <tfoot>…</tfoot> <tbody>…</tbody> </table>

FORMULÄR I HTML

Översikt - olika element i ett formulär Knapp Text-fält (stort)
Text-fält Checkboxar Radioknappar Drop-down meny

När används formulär?

Varför används formulär? • Ett sätt att skicka data från
klienten (webbläsaren) till en server - Spara data - Validera data - Analysera data

Att skapa ett formulär i HTML • Taggen <form> omsluter
ett formulär. <form> har olika attribut: • ”action” - Var formuläret ska skickas • ”method” - På vilket sätt den data som användaren angett ska skickas. Antingen GET eller POST

GET/POST • GET innebär att man skickar med den information
som användaren angett genom URL (adressen till sidan) • POST innebär att man skickar informationen ”bakom kulisserna” • Standard är att man skicka mer GET (om inget annat anges)

Att skicka data med formulär • Data struktureras upp med:
- Namn, hur man identifierar det man skickat - Värde, den information man skickar • T.ex. firstName=Anton lastName=Tibblin course=DA301T

Inhämtning av data • Detta kan göras av taggen <input>
som kan representera olika delar av ett formulär • Notera att <input> är en öppen tagg och saknar sluttagg • Attribut: - Name Namnger input-elementet - Value Ev. värde på en knapp/i ett textfält - Type Vilken typ elementet ska vara t.ex. knapp/textfält/radioknapp/checkbox osv.

Exempel av input-taggen <input type=”text” name=”firstName” value=”Förnamn här”> <input type=”password”
name=”password” value=”Lösen”> <input type=”button” value=”Min knapp”> <input type=”submit” value=”Skicka”> <input type=”radio” name=”choice”> <input type=”checkbox” name=”choice2”>

Andra attribut för <input>-taggen • För checkboxar & radioknappar –
om boxen ska vara inkryssad som standard: checked=”checked” <input type="checkbox" checked="checked"> <input type="radio" checked="checked">

Gömda fält • Man kan även skicka vidare information från
förmulär genom gömda fält. • Det innebär att fältet ligger ”osynligt” i bakgrunden. • Även osynlig fält kan ha namn och värde • T.ex. <input type=”hidden” name=”namn” value=”anton”> • Detta kommer alltså inte att synas på HTML-sidan

Textarea – För längre texter • Har till skillnad från
<input> en start- och en sluttag. • Attribut: - name (samma funktion som för <input>) - rows, antalet rader (höjd på text-rutan) - cols, antalet kolumner (bredd på text-rutan) • <textarea cols=”10” rows=”3” name=”textfield”></textarea> • <textarea cols=”10” rows=”3” name=”textfield”>Hej</textarea>

Select – Drop down-meny • Menyn definieras genom taggen <select></select>
• Varje alternativ i drop down-menyn skapas genom taggen <option></option> • För att kunna veta namn och värde på det som skickas gör man: <select name=”namn”> <option value=”anton”>Anton</option> <option value=”kalle”>Kalle</option> <option value=”Johan”>Johan</option> </select>

Etiketter för formulärselement • Beskriver imatningsfälten • Ökar användbarheten <label>Namn</label>
<input type=”text” name=”namn”> Ännu bättre: <label for=”namn”>Namn</label> <input type=”text” name=”namn” id=”namn”>

DEMO Formulär

Web 3

Web 3

Anton Tibblin

More Decks by Anton Tibblin

Other Decks in Education

Featured

Transcript

HTML Snabb repetition + länkar/tabeller/formulär

Hur fungerar det? Internet Klient Klient Server

Svar? • Svaret är i form av HTML, som strukturerar

Vad är en webbsida? • En webbsida är det som

Vad består en webbplats av? JavaScript CSS HTML Innehåll Interaktivitet

HTML • Hypertext Markup Language • Märkspråk • Används för

HTML som märkspråk

Element? • Det finns olika element som representerar olika innehåll,

Exempel på element Element • <h1> - Största rubriken (Heading

Ett HTML-dokuments struktur <!DOCTYPE HTML> <html> <head> <meta charset=utf-8"> <title>Min

Exempel på HTML-struktur Text-editor Webbläsare

HTML-dokumentet i helhet

Attribut hos HTML-element • Element kan ha attribut • Attribut

TABELLER I HTML

Tabeller • Används när man vill strukturera upp information •

Tabeller - uppbyggnad • En tabell är, precis som i

Taggar för tabeller • <table> Skapar en tabell • <caption>

Tabell – huvud/kropp/fot • I en tabell (med fördel större

FORMULÄR I HTML

Översikt - olika element i ett formulär Knapp Text-fält (stort)

När används formulär?

Varför används formulär? • Ett sätt att skicka data från

Att skapa ett formulär i HTML • Taggen <form> omsluter

GET/POST • GET innebär att man skickar med den information

Att skicka data med formulär • Data struktureras upp med:

Inhämtning av data • Detta kan göras av taggen <input>

Exempel av input-taggen <input type=”text” name=”firstName” value=”Förnamn här”> <input type=”password”

Andra attribut för <input>-taggen • För checkboxar & radioknappar –

Gömda fält • Man kan även skicka vidare information från

Textarea – För längre texter • Har till skillnad från

Select – Drop down-meny • Menyn definieras genom taggen <select></select>

Etiketter för formulärselement • Beskriver imatningsfälten • Ökar användbarheten <label>Namn</label>

DEMO Formulär