Webbutveckling 1 Kapitel 4 2021 10 20 1

Webbutveckling 1 - Kapitel 4 2021 -10 -20 1

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) HTML & CSS • HTML – Hyper. Text Markup Language • Styr dokumentets struktur och innehåll. • CSS – Cascading Style Sheets • Styr dokumentets layout och design. 2021 -10 -20 2

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) HTML-terminologi • Element • Ett HTML-element består i regel av en start- och slut-tagg och själva innehållet. • Taggar styr vad som skall hända och vilket värde det skall ha. 2021 -10 -20 3

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) 2021 -10 -20 4

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) CSS-terminologi • CSS fungerar snarlikt, fast där heter det selektorer. 2021 -10 -20 5

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) Block och inline element • Block-element sträcker sig fullt ut på bredden. Definieras med <div> taggen. • Block-element kan innehålla flera block- och inline-element som innehåll. • Exempel • Inline-element sträcker sig bara så långt som krävs. Definieras med <span> taggen. • Inline-element kan inte innehålla block-element. • Exempel 2021 -10 -20 6

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) Kommentarer i HTML • Kommentering för HTML ser ut som följande,  • Man skall alltid skriva kommentarer till sin kod, oavsett kodspråk och nivå. • Detta görs för att enklare felsöka, utveckla och underhålla koden. • Kommentering kan också användas för att temporärt dölja element. 2021 -10 -20 7

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) Kommentarer i CSS • Kommentering för CSS ser ut som följande, /* Texten */ 2021 -10 -20 8

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) HTML taggar 2021 -10 -20 • <html> • <p> • <head> • <a> • <body> • <img> • <meta> • <div> • <title> • <style> • <h 1> • 9

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) HTML attribut • De allra flesta taggar har ett eller flera attribut. • <meta> • <meta http-equiv="refresh" content="30"> • <meta http-equiv="content-type" content="text/html; charset=UTF-8”> • Komplett lista över HTML-attribut. 2021 -10 -20 10

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) CSS selektorer & egenskaper • I CSS är selektorer mönster som används för att välja de element du vill ’styla’. • Elementselektor • Stylar hela elementet. • Idselektor • Stylar bara angiven ID. 2021 -10 -20 11

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) Elementselektor 2021 -10 -20 12

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) Idselektor 2021 -10 -20 13

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) CSS egenskaper • Egenskaper i CSS är densamme som attribut i HTML. • Några exempel kan vara, • Color, opacity, background, border, height, width, margin, padding, text-align, font & font-family. • Exempel på background. • Komplett lista över aktuella CSS egenskaper. 2021 -10 -20 14

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) Uppgifter • Skapa webbsidan som finns på sidan 67. • Spara och kör den. Glöm inte att validera! Fick den några fel? • Gör quiz till kapitel 4. • Läs kapitel 4. 2021 -10 -20 15

Webbutveckling 1 – Kapitel 4 –Grundläggande HTML & CSS (v 1. 0) 2021 -10 -20 16

Andreas Hagström IT-lärare andreas. hagstom@edu. sandviken. se CVL Sandviken - Teknik 2021 -10 -20 17