Webudvikleruddannelsen

En Introduktion til, HTML og CSS

Indhold Webudvikler uddannelsen Techcollege Aalborg Internettet, Short story. Hvad er HTML? Basic HTML? Om HTML Tags Tekster i HTML Mere om tekster i HTML STYLING FONTS HTML ØVELSE 1 MORE HTML Get in Code-Mode

Webudvikler uddannelsen Techcollege Aalborg Fra midten af 1990érne opstod der et behov for en certificeret uddannelse idet den kommercielle brug af Internettet for alvor tog fart. I skrivende stund er Webudvikler uddannelsen en kort skolebaseret Erhvervsuddannelse der varer 1 år og 9 mdr. Uddannelsen består af et grundforløb (GF2, Evt.. GF1) og et hovedforløb. Webudvikler uddannelsen beskæftiger sig med udvikling af Webbaseret kommunikation og sigter efter det, der med et fint ord hedder Frontend Udvikling. Du kommer til at arbejde en del med objekorienteret programmering i form af Javascript og NodeJS, samt databaser og dynamisk Web. Grundforløbet varer 20 uger og afsluttes af en grundforløbsprøve eller Eksamen der skal bestås for at du kan starte på hovedforløbet. GF 1 (20 uger) GF 2 (20 uger) Hovedforløb (80 uger) I ALT (Eks. GF 1): 1 år og 9 mdr. På TCAA ser grundforløbet (GF2) lige nu ca. sådan her ud (20 uger): *Du kommer altså udover diverse grundfag og billedbehandling, til at arbejde mest med koderne der ligger bag siderne: (Blokken Webproduktion). Hovedforløbet varer 1,5 år, og her arbejder vi med de seneste teknologier herunder dynamisk web og forskellige CMS-systemer. Samarbejde og Værksted er en stor del af hovedforløbet. Du kommer til at arbejde med versionsstyring i de fleste af dine større projekter. Herover: uddannelsen varer altså (eksklusiv GF 1): 1 år og 9 mdr. og er en erhvervsuddannelse. *Hvis du har opfyldt visse gymnasiale krav, er uddannelsen et rigtigt godt udgangspunkt for en overbygning som f.eks. softwareudvikler, Multimediedesigner eller Datamatiker. Vi bestræber os på at følge de til en hver tid gældende standarder og den nyeste teknologi og de tendenser der er i en branche der udvikler sig eksplosivt. Vil du have et godt grundlag for at arbejde med Web og udvikling af applikationer, og har du en sund interesse for teknik og evne til at tilegne dig viden, er Webudvikler uddannelsen måske noget for dig. Læs mere om uddannelsen her: https://techcollege.dk/alle-uddannelser/webudvikler/

Internettet, Short story. I starten af 1990 erne, var sider på Internettet ikke særligt spændende rent grafisk at se på. Muligheden for at kategorisere indhold, og dedikere områder i dokumenterne var i starten begrænset til overskrifter, lister og afsnit som de første versioner af HTML gav mulighed for. *Herover First Webpage : http://info.cern.ch/ Opdeling af siden sker med Lister og Overskrifter. Fonten er Times New Roman Links er blå med understregning. *Tabeller blev i midten af 1990érne introduceret i HTML 3, og var det første element der anvendtes til at opdele sider i områder som f.eks. sektioner, footer eller navigation. Header Navigation Section Footer Herover: Tabel som du kender den fra et tekstbehandlings program Rækker og Kolonner bruges til at opdele dokumentet i områder.

Hvad er HTML? HTML (Hyper Text Markup Language) er det sprog som sider på Internettet og Browsere som f.eks.: Chrome eller Internet Explorer/Edge bruger for at vise indholdet. HTML blev opfundet af Tim Berners Lee i starten af 1990 erne, og er en protokol (Et regelsæt) for hvordan sider skal skrives. W3.org står for disse regler. *Du kan se sidernes HTML ved at højreklikke på Websider og vælge Vis Kildetekst (Chrome/Dansk) Sidens koder hedder også sidens Markup: Billede 1: Siden https://www.w3schools.com åbnet. W3Schools.com er et rigtigt godt sted at starte med at lære HTML og meget mere. De har en fin Online Editor hvor du kan indtaste og afprøve dine koder i en browser. Billede 2: Du kan lave dine egne HTML sider! I mappen Root-Start ligger et helt tomt HTML dokument, det hedder index.html, det kan du ændre f-eks. Med Notepad som editor. Højreklik, vælg Åbn med Notesblok. Video: Introduktion til HTML: https://youtu.be/bq6zs889cb4

Basic HTML? Standard HTML ser sådan her ud: <!DOCTYPE html> <html> </html> <head> <title>sidens Titel</title> </head> <body> </body> Øvelse 1: Med Notepad, prøv at indtaste standard HTML i det tomme HTML Dokument. Gem filen og åbn den med Browseren. Se hvad der sker! Forklaring: Som du kan se, viser browseren ikke noget indhold. Standard Markup indeholder en række Tags der fortæller browsere hvad og hvordan dette skal vises. Selve indholdet skal stå i <body>. <!DOCTYPE html> Fortæller Browseren at der er tale om HTML! <html> <head> <title> <body> Her starter HTML delen! Head tagget indeholder f.eks. sidens titel! Sidens Titel, dette tag står i head Tagget! Selve indholdet skal så i body Tagget! Du har altså et tomt HTML dokument med en titel (Det der vises på fanebladet). Prøv at skrive eet eller andet i body tagget, f.eks.. <body>her kommer indholdet så!</body> Gem siden prøv at se den i en Browser igen.

Om HTML Tags HTML består af tags! Udover de fem Standard Tags består HTML af et væld af koder der fortæller Browsere hvad indholdet er, og hvordan det skal vises. Som du måske også har bemærket er de fleste Tags startet og afsluttet. Du afslutter tags med Slash: / <title> Starter title tagget! </title> Afslutter title tagget! Prøv nu at indtaste flg. Tekst i body tagget inkl. 2 overskrifter og med afsnit: HTML Hyper Text Markup Language Sider på Nettet består af koder og indhold, koderne betyder at indholdet tolkes på forskellig måde. HTML er den standard langt de fleste ting du ser på Internettet er opbygget af. HTML blev opfundet af Tim Berners Lee i starten af 1990 erne. W3.org sætter standarden for de regler der gælder på Nettet, En standard eller en regel kalder man også en protokol. Du kan lære meget mere på w3schools.com! *Gem filen i Notepad, prøv at vise den igen i en browser. Billede 3: Sådan ser teksten ud i en Browser! Al tekst står i een lang smøre, uden overskrifter og afsnit, forklaring: Browseren ved ikke hvad der er afsnit og tolker ikke linjeskift i koden??

Tekster i HTML Tekst i HTML. Du skal fortælle Browseren hvordan den skal læse dit indhold! I teksten fra før var der 2 overskrifter (Overskrift1 og Overskrift2) samt 3 afsnit. Overskrifter (Headings) og Afsnit (Paragraphs) er det der hedder Block Elementer i HTML. Block elementer optager hele body-bredden. Block Elementer laver linjeskift! Basic Tekst Tags: <h1>heading One</h1> Den største og vigtigste Heading <h2>heading Two</h2> Lidt mindre overskrift <p>heading One</p> Paragraph eller Afsnit! Hvert afsnit laver et linjeskift. Prøv at rette din kode med Notepad, sæt 2 overskrifter og 3 afsnit ind i din Markup: Se om du kan få siden til at vises som ovenstående billede. *Husk at du skal afslutte de fleste tags i HTML. Hvis ikke du afslutter et tag fortsætter det! Prøv at eksperimenter lidt med dine tags. Sæt evt. flere afsnit ind, prøv at ændre dine overskrifter: HTML giver mulighed for 6 forskellige overskrifter, H6 er den mindste! I mappen Root start ligger der et tomt HTML dokument og en mappe med billeder du kan prøve at sætte ind i dit HTML dokument. Billede i HTML: <img src="img/cake.png" alt="yummy" /> Link i HTML: <a href="mypage.html"/>mypage</a>

Mere om tekster i HTML *Tekst hedder Fonts når det drejer sig om HTML. Der er 2 overordnede tags der drejer sig om fonts i HTML MarkUp: <p> Paragraph eller Brødtekst (Indholdsteksten) <h1> Headings (h1 h6) Heading 1 er den største (Overskrift 1) *Tags som f.eks. h2, p mm. Har nogle standard indstillinger i Browseren hvis ikke du styler dem. <p> eller Paragraph har f.eks. følgende egenskaber: Font-Family: Times New Roman; Font-size: medium / 12pt / 16px / 1em / 1rem / 100%; *Herover (CSS) Standard størrelsen på en Paragraph eller brødtekst: <p> er enten: Medium 12pt: (Points) 16px: (Pixel) 1em: (Emphasis) 12rem: (Root Emphasis) 100%: (100% af standard) Ovenstående properties giver alle det samme resultat, men har forskellige egenskaber. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>my Website</title> </head> <body> <p> Denne tekst står som standard: Times New Roman størrelse 1em! </p> </body> *Med andre ord: Hvis ikke du bestemmer hvordan din tekst skal se ud vil den som standard i de fleste browsere stå med: Times New Roman / 1em. *NB: <meta charset="utf-8" /> (Unicode Transformation Format 8-bit) er uden at gå i detaljer, en del af Unicode-Tegnsættet. *Du skal evt. afhængigt af indhold, sprog, styresystem, installerede sprog og browserindstillinger anvende den hvis browseren ikke viser specialtegn som æ, ø og å korrekt.

STYLING FONTS INLINE STYLING Browserne bestemte hvordan de første sider på Internettet så ud, farver og teksttyper som vi kender det i dag kom starten af 1990érne. I takt med udbredelsen af Internettet opstod et behov for grafisk at påvirke brugernes oplevelse. Style blev introduceret som begreb. Style påførtes det Tag der skulle styles. Eks.: <h1 style= color: red; >Inline Style</h1> *Overskrift 1 har fået en Style deklaration (Declaration): Property (color) der har en Value (red)! <h1 style= font-family: Consolas; >Consolas</h1> *Style Property color ændret til font-family og Value: Consolas. Nu har jeg en anden font. Deklaration på hele siden. Eks.: <body style= font-family: Consolas; >Consolas på alt i body</body> Som du kan se kan du vælge at lægge din Style i body-tagget, og hermed ramme al din tekst i body tagget. Du kan lægge andre styles på forskellige Tags i din MarkUp, eller style h1, h2 eller p på hver deres måde. HUSK! Browsere læser koden oppefra og ned, derfor kan du overskrive tidligere deklarationer! Eks.: <body style= font-family: Consolas; > <h1>consolas fonten på alt i body<h1> <h2 style= font-family: Times New Roman ; >Undtagen her!</h2> </body> Inline styling er den stærkeste måde at style dit HTML dokument på, da den læses direkte på de enkelte tags, men den er samtidigt omfattende og svær at vedligeholde idet der skal rettes rigtig mange steder hvis f.eks. fonten eller designet skal ændres. Style Declarations direkte i din MarkUp kalder man Inline Styling! *Anatomy of styles: Declaration Seclector Property Value

INTERNAL STYLESHEETS Efterhånden som siderne voksede i omfang blev det overordnede tag <style> introduceret. Style-tagget placeres i <head> tagget og rammer via Selectors de forskellige tags på siden. Denne måde at style på kaldes Internal Stylesheet og er en noget nemmere måde at style et helt dokument på. <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>my Website</title> <style> body { font-family: Consolas; </style> </head> <body> <p> Denne tekst står nu med fonten Consolas! </p> </body> EKSEMPEL 2 *Du kan lægge alle Style Declarations vedr. din side i <style> tagget. <style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; </style> *I eksemplet herover er der 3 Style Declarations der: Sætter den overordnede font til Consolas, og laver h2 og h3 lidt mindre end normalt. (Browserstandard for h2 = 1.5em). Internal StyleSheets er noget nemmere at vedligeholde en side på. Men du skal stadig ind på hver enkelt HTML dokument i dit Website og ændre dine deklarationer.

EXTERNAL STYLESHEETS Som du måske kan forestille dig er det smart at ændre f.eks. indstillinger for tags i Head Tagget, og endnu smartere hvis du kunne ændre f.eks. farver for fonte for alle dine sider et enkelt sted. Det kan du med et External Stylesheet. Et External Stylesheet er et dokument med Extension:.css som du refererer til via en sti i <Head>. <link href="content/styles/main.css" rel="stylesheet" /> (Stien til CSS filen) (Relationen= Stylesheet) Det ser sådan her ud i din MarkUp: <head> <meta charset="utf-8" /> <title>my Website</title> <link href="content/styles/main.css" rel="stylesheet" /> </head> I stedet for <style> tagget er der et link med en href (Hyper Reference) til en CSS fil (main.css). *Herover: Eksempel på Extern Stylesheet (main.css) i mappen: content/styles/ SAME BUSINESS? Du bruger samme metode som i dit Internal StyleSheet når du laver CSS i et Extern Stylesheet som du gjorde i Internal StyleSheet. Du skal bare ikke have <style> Tagget med: <style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; </style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; *Internal Stylesheet *External Stylesheet Du kan referere til flere StyleSheets, Husk at Browseren læser oppefra og ned, og derfor overskriver de sidste styles hvis der er samme deklarationer i dem! http://www.wdtonline.com/wdtmagazine/memberworks/wiserways/csshtml.htm

HTML ØVELSE 1 Prøv at lave en mappe f.eks. på dit skrivebord, kald den evt. html-01. Lav nu en text fil i mappen: *Min tekst fil hedder index (Startsiden på de fleste websider) og den har extension:.txt fordi den er lavet med Notepad. Du skal slå din extension/efternavne til hvis ikke du kan se dem! Indtast teksten herunder. HyperText Markup Language (HTML). HTML er et opmærkningssprog, der primært har til formål at strukturere indholdet på en hjemmeside og få tekst og billeder til at virke som links til andre html-sider. Markup betyder at "opmærke". I hjemmesidesammenhæng vil det sige at html definerer indhold på websider, f.eks. kan en tekst markeres som overskrift eller brødtekst, arrangeres i en punktopstilling eller tabel og et hyperlink kan indsættes som klikbar tekst. Dermed kan webbrowsere som f.eks. Firefox, MS Internet Explorer, Safari, Opera eller Google Chrome, skelne de forskellige teksttyper fra hinanden og vise indholdet formateret efter hvilken type det er markeret som. Typisk vil f.eks. overskrifter vises med forstørret fed skrift og hyperlinks med blå skrift. Html indeholder mulighed for med CSS at bestemme mere detaljeret over udseendet af f.eks. overskrifter, tabeller, hyperlink og indlejring af billeder. Html-filer bruges på internettet, især på World Wide Web. Html filer har Extension:.Html eller.htm. Luk filen. Omdøb Extension til HTM Eller HTML: *Herover: Ikonet er skiftet, min fil er nu et HTML dokument og åbnes med Google Chrome. Prøv at få teksten til at stå som eksempel med afsnit og overskrift! NB. Fonten hedder Consolas!

MORE HTML LINKS o o o o o http://www.w3schools.com/ http://codepen.io/pen/ https://www.w3.org/ http://jigsaw.w3.org/css-validator/validator.html.en https://channel9.msdn.com/ CHANNEL 9 Bob Tabor fra Microsoft har lavet en række videoer omkring HTML5 og CSS3 på: Du skal se de første 2 videoer inden næste gang: Series Introduction - 01 Creating Your First HTML5 Web Page 02 HUSK: *Browsere læser koderne oppefra og ned! Markup består af Tags Tags er normalvis afsluttede Du kan kombinere Tags: <b><i>bold and <u>italic</u></i></b>

Get in Code-Mode Du kan fortælle Browseren at den f.eks. skal bruge en anden font end Browserens standard i dit head tag. Det ser sådan her ud: <!DOCTYPE html> <html> <head> <title>text Styling</title> </head> <body> </body> <style> </style> body{ font-family: arial; color: blue; </html> *I style-tagget fortæller jeg at al tekst i body-tagget skal anvende fonten: Arial med blå farve. Du kan læse om HTML. CSS, Javasript og meget mere på: https://www.w3schools.com/ https://codepen.io/pen/