Hvad er HTML og CSS? EN INTRODUKTION TIL HTML OG CSS

Transkript

1 Hvad er HTML og CSS? EN INTRODUKTION TIL HTML OG CSS Webudvikler Uddannelsen Tech College Aalborg. 2018

2 INDHOLD INTERNETTET, THE SHORT STORY... Fejl! Bogmærke er ikke defineret. DE FØRSTE NETVÆRK... Fejl! Bogmærke er ikke defineret. BEGREBER... 4 BROWSERE... 5 DE FØRSTE SIDER I HTML... 6 ELEMENTERNE I HTML... 7 SEMANTIK / GRAMMATIK... 8 DOM - EXPLORER... 9 Mere om DOM-Explorer BASIC HTML SIMPELT HTML EKSEMPEL FONTS in HTML WAYS OF STYLING ANATOMY OF STYLES HTML REFERENCE HTML ØVELSE LINKS

3 INTERNETTET, THE SHORT STORY Internettet som idé tog for alvor fart omkring 1960 Det der dengang hed Sovjetunionen og den Vestlige Alliance: NATO, havde i tiden lige efter 2. Verdenskrig, længe spillet med de politiske, og ikke mindst militære muskler over for hinanden. Det kom fuldstændigt bag på Vesten, at Sovjetunionen op igennem 1950 erne, ubemærket havde udviklet og opsendt verdens første satellit i kredsløb om Jorden. Opsendelsen af Sputnik1 blev startskuddet på udviklingen af en helt ny form for kommunikation på, hvor man ikke var så sårbar over for evt. angreb. *Sputnik1 (1957) var det første menneskeskabte objekt i kredsløb om jorden. Hidtil havde stort set al kommunikation mellem USA og Europa, foregået gennem enkelte kabler på tværs af Atlanterhavet. Evnen til at udvikle og opsende en satellit synliggjorde sårbarheden - Tanken om Packets og Netværk var født. Ideen var at kommunikation, aldrig måtte baseres på et enkelt knudepunkt, kabel, maskine eller Node - Som en maskine på netværket i øvrigt hedder. Et netværk skulle kunne udnytte flere Nodes, til formidling af information via opbrydning af data i pakker (Packets). Packets er små Bidder eller fraktioner af data. Har oftest Labels eller information om Modtager/Afsenders IP! IP er en Unik identifikation af en enhed på netværket. 2

4 DE FØRSTE NETVÆRK Netværk var forskning på højt plan De første netværk var lukkede lokale netværk (LAN), der efterhånden udbyggedes til flere universiteter på tværs af byer og statsgrænser, først og fremmest i USA. *Studerende ved UCLA ARPANET Lokalt netværk kaldes: LAN: (Local Area Network) Globalt netværk kaldes: WAN: (Wide Area Network) Arpanet blev oprindeligt udviklet som det første store pakkekoblingsnetværk (eng. Packet Switching), og det viste sig faktisk at fungere i praksis. Netværksideen var i starten forbeholdt militæret. *Herover: Arpanet maj Arpanet bredte sig i 1970 erne hurtigt til flere og flere universiteter og institutioner. Mere om ARPANET: 3

5 BEGREBER Teknologi og specielt IT er fyldt med begreber I forbindelse med den kommercielle udvikling af Internettet, opstod et behov for et sæt ensrettede regler, her er de allermest udbredte og anvendte begreber: LAN Local Area Network lokalt netværk, ofte inden for samme matrikel eller lokale. WAN Wide Area Network Geografisk netværk, Internettet er et Globalt Netværk. Internet Protokol (IP) Internet Protokollen: Unik identifikation af enheder på netværk. Hver maskine eller Node på netværket har en Unik IP. HTTP Hyper Text Transfer Protocol blev introduceret i 1960 erne, som protokol eller regelsæt for kommunikation på netværk. FTP File Transfer Protocol blev introduceret i midten af 1960 erne, som protokol eller regelsæt for kommunikation på netværk. HTML / HTM (HyperText Markup Language), opfundet og beskrevet af Tim Berners Lee i starten af 1990 erne som den fælles standard, sider på Internettet bør anvende i deres indhold. Altså sproget de enkelte sider skrives i. Sidernes indhold eller den HTML der ligger bag siderne kaldes sidens Markup. DOM Document Object Module: Den måde, eller strukturen i koden bag siderne. CSS Cascading Style Sheet/s: Metode til styling af HTML. Style kan være Inline, som Inline Stylesheet eller som et Extern Stylesheet. BLOCK / INLINE ELEMENTS Den grundlæggende måde elementer vises på: Block Elementer fylder det hele, og laver linjeskift. Inline Elementer fylder kun indholdet. HTML Timeline: 4

6 BROWSERE Browseren er det program der normalvis bruges til at vise sider på Nettet De fleste nyere browsere kan umiddelbart godt vise tekst og billeder, også uden at indholdet er kodet korrekt, eller er HTML for den sags skyld. En fælles Standard for hvordan sider på Nettet bør skrives og tolkes blev først beskrevet af den britiske forsker Tim Berners Lee. Berners Lee er i dag leder ved w3.org, der udstikker rammer og regler omkring WWW mm. - HTML 1.0 så dagens lys i Den seneste version hedder HTML5. 1) HTML koden ligger f.eks. på en server på Internettet. 2) Browseren læser HTML koden (MarkUp og CSS) 3) Browseren fortolker og viser indholdet hos bruger Moderne Browsere har udvikler værktøjer, genvejstasten er oftest: F12. HTML vises som udgangspunkt i brugerens browser (Clientside). *I dag er der 4 store spillere på markedet når vi taler om Browsere: Google Chrome Internet Explorer/Edge Firefox Safari (Mac) *Hertil kommer forskellige mobilplatforme. Du kan se aktuelle statistikker her: 5

7 DE FØRSTE SIDER I HTML I starten var Internettet ikke særligt spændende rent grafisk at se på? De første sider var mere eller mindre kun overskrifter, afsnit, lister, og links, som den første version af HTML gav mulighed for (HTML 1.0: 1991). *Herover: First Webpage ever : Fonten : (Tekst) var sort Times New Roman, Links: Blå med understregning. HTML1: Grundlæggende få Tags, der inddeler tekst og artikler i rækker eller afsnit: *Linjeskift (Linebreak) sker ved at Headings, Paragraphs mm, er det der hedder Block-elementer, de optager hele bredden. De blå Links er derimod Inline-Elementer, og laver ikke linjeskift. 6

8 ELEMENTERNE I HTML HTML er opbygget af elementer. MarkUp, eller HTML er opbygget af en række fastlagte koder, eller tags. HTML består som udgangspunkt af 2 typer elementer, enten Block-Elementer eller Inline-Elementer. Dvs. at browserne tolker eller elementerne som værende enten det ene eller det andet. Og viser dem på den ene eller den anden måde. *Man siger at Elementet Displays, enten som Block-Element eller Inline-Element. Block / Inline-Elementer: Headings eller Overskrifter samt Paragraphs (afsnit), er Block-Elementer, der groft sagt fylder hele bredden, og derfor laver en ny linje for hvert nyt element: <h1>heading 1 er et BLOCK-ELEMENT, og laver derfor et linjeskift! </h1> <p>paragraphs er også et BLOCK-ELEMENT, og laver derfor også linjeskift! </p> Links: <a> (Anchor) er derimod Inline Elementer, fylder kun indholdet, og laver derfor ikke linjeskift: <a href= home.html >HOME</a> <a href= contact.html >CONTACT</a> *Se din Markup på en hvilken som helst side, med de indbyggede udviklerværktøjer i Browserne (DOM-Explorer). Vi ser på DOM lige om lidt. Uden at gå i detaljer, så var der altså ikke de helt store muligheder i starten af 1990erne, for at inddele HTML-sider på det helt nye World Wide Web i områder, (se eksempel på First Webpage på side 6). Man var begrænset af de få HTML tags der fandtes. Nemlig overskrifter, afsnit, lister, Links: anchors : (<a>) mm. Opdelingen af indholdet skete simpelthen med linjeskift (Block-elementer) eller ved at opstille dele af siderne i listeform. 7

9 SEMANTIK / GRAMMATIK HTML er et sprog Og akkurat som i andre sprog, er der grammatik og regler der skal tages hensyn til - Korrekte eller mest hensigtsmæssige måder at skrive koderne på, om man vil. Overskrifter kommer i forskellige udgaver, og der er regler for hvornår og hvordan man anvender f.eks.: overskrifter. *Overskrifter hedder Headings, og en Heading er normalt en overskrift til en artikel eller en section. Der findes 6 udgaver h1 ~h6. h1 er den vigtigste. Artikel eks.: Semantik Grammatikken i HTML Dette eksempel på en artikel har to afsnit og to overskrifter af forskellig vigtighed, det kunne være en overskrift 2 og en overskrift 3. Artikler indeholder for det meste også et eller flere afsnit. Her kommer endnu et afsnit. Afsnit hedder Paragraphs på engelsk, hvert afsnit laver ligesom overskrifter (Headings), linjeskifte for hvert nyt element. Pas på med ikke at lave alt for lange afsnit. HTML5 Seneste version HTML hedder HTML5. HTML5 indeholder en række tags dedikeret til specielle typer af indhold. Eks.: <section> <article> <figure> mm. Det er ekstremt vigtigt at gøre sig overvejelser over, hvilke tags man anvender til hvilket indhold, ligesom HTML5 tags altid skrives med små bogstaver (Lowercase). God struktur i dit indhold og hensigtsmæssig anvendelse af HTML5 tags gør at dine sider vises korrekt, og at søgemaskiner kan indeksere 1) ud fra indholdet. I dag tilgås Internettet på mange forskellige platforme og devices, derfor er det nu, mere end nogensinde vigtigt, at HTML skrives korrekt og efter standarderne. 1) Søgemaskiner som f.eks. Google, bruger HTML til indeksering af søgeresultater. Så jo bedre du strukturerer dit indhold, jo bedre placering i søgeresultater. 8

10 DOM - EXPLORER Dokumentets opbygning hedder: DOM. *Tags er kode der indeholder f.eks.: Tekst, objekter eller billeder. Eks.: <h3>heading Three</H3>. (Overskrift 3). Tags ligger normalt mellem < start tag > og afsluttes med /: </ slut tag >. DOM står for Document Object Module og er den Hierarkiske model siderne er opbygget på. Nyere Browsere har forskellige udviklerværktøjer, det vigtigste af disse værktøjer er nok den indbyggede DOM-Explorer, der bruges til fejlfinding og test. *Du finder DOM-Explorer ved at højreklikke eller taste F12 på siden i en browser og vælge: Undersøg / Inspect afhængigt af browser: Eksempel: *Udover sidens DOM kan du også se kildekoden i sin helhed: (Vis Kildetekst / Google Chrome, dansk version) DOM Explorer kan også bruges til at teste programmering som JavaScript mm. 9

11 MERE OM DOM-EXPLORER. Herunder DOM-Explorer på en simpel side, normalt ligger den docket til højre for selve siden, du kan vælge at vise den på andre måder: *Herover: <section> - tagget valgt. Det markeres på siden, med de marginer og paddings som elementet har i afsnittet til venstre. Udover Markup kan du teste et hav af andre ting i DOM-Exploreren. Herover: En Unordered List (<ul>) valgt, og i fanebladet Styles kan man se at en liste bliver som udgangspunkt vist (display) som et Block-Element. 10

12 BASIC HTML Standard Markup for en HTML / HTM side uden indhold ser sådan her ud: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>basic HTML Markup</title> </head> <body> </body> </html> *De fleste tags er afsluttede. Startes med: < > og afsluttes med en slash : </ > F.eks.: <body> Her er selve indholdet på siden, det ligger i body-tagget. </body> Altså, enhver HTML side bør altså indeholde følgende Tags: <!DOCTYPE html> <html> <head> <title> <body> ( Fortæller Browseren at dokumentet er HTML) (Her starter HTML delen) (Indeholder f.eks.: Styles, Scripts eller Meta tags* ) (Titlen på siden, ligger inden i Head tagget) (Selve indholdet på siden, det du ser i browseren) *Meta-tagget: <meta charset="utf-8" /> anvendes afhængigt af om Browseren kan læse de specialtegn du bruger. Prøv f.eks. at se om din browser understøtter Æ, Ø og Å? *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 Italic</i></b>) 11

13 SIMPELT HTML EKSEMPEL <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>simpelt HTML dokument</title> </head> <body> <h1>heading One</h1> <h3>heading Three</h3> <p> Paragraph er det engelske ord for afsnit, afsnit bruges til at opdele en tekst i "bidder", der er nemmere at læse end hvis teksten står i een lang smøre.</p> </body> </html> <p>hvert ny afsnit laver et linjeskifte. Du kan i øvrigt <i>kombinere</i> tags. Husk at afslutte i rækkefølge <b><i>fed/kursiv</i></b>!</p> *Afslut dine Tags i den rigtige rækkefølge: <b> <i> </i> <b> Containertags vs. Seperatortags: De fleste Tags afsluttes, og Tags kan indeholde f.eks. tekst. Disse tags kaldes for Containertags fordi de container eller omslutter et område eller en tekststreng. <h4>jeg er Contained i et H4 tag!</h4>. Enkelte Tags der ikke er afsluttede som sådan: Et sådan tag er <br />. Br eller Linebreak er et tvunget linjeskift. (Det bliver faktisk tolket som et Inline Element, men laver altså et linjeskift). Disse tags kaldes ofte for Seperatortags. Et andet eksempel på et Seperatortag er: <hr /> (Horizontal Rule). *Man, (w3.org) har besluttet, at alle tags skal være afsluttede i de nye standarder, så derfor starter, og afslutter man i samme tag: <hr /> *Hold koderne rene og hav struktur på din Markup. 12

14 FONTS IN HTML Tekst hedder Fonts når det drejer sig om HTML. Der er som udgangspunkt 2 overordnede tags der drejer sig om fonts i HTML: <p> Paragraph eller Brødtekst (Indholdsteksten eller afsnit) <h?> Headings (h1 h6) Heading 1 er den største (Overskrift 1) *Tags har standard indstillinger i Browseren, hvis ikke du styler dem. <p> eller Paragraph har f.eks. følgende standard egenskaber: font-family: Times New Roman; color: black; font-size: medium / 12pt / 16px / 1em / 1rem / 100%; *Herover (CSS) Standard-størrelsen på Paragraph eller brødtekst er altså enten: Medium 12pt: (Points) 16px: (Pixel) 1em: (Emphasis) 12rem: (Root Emphasis) 100% (100% af standard) Ovenstående Values giver alle samme resultat, <meta charset="utf-8" /> (Unicode Transformation Format 8-bit): uden at gå i detaljer, en del af Unicode-Tegnsættet. Du skal evt. afhængigt af indhold, sprog, styresystem, browserindstillinger og installerede sprog anvende den hvis browseren ikke viser specialtegn som æ, ø og å korrekt. Den dag i dag er der en række standard indstillinger i browserne som f.eks. Tekst type (font-family), Margener (margin) mm. Som du bør være opmærksomme på. 13

15 3 WAYS OF STYLING INLINE STYLING Farver og teksttyper som vi kender det i dag, kom i 1990érne. I takt med den kommercielle udbredelse af Internettet opstod et behov, for grafisk at påvirke brugernes oplevelse. Style-attributten blev introduceret som begreb i starten af 1990 erne. (Attribut: Tilføjet egenskab). Style-attributten påføres det Tag der skulle styles, direkte. Eks.: <h1 style= color: red; >Inline Style</h1> * Style declaration (Deklaration): Property (color) der har en Value (red)! <h1 style= font-family: Consolas; color: red; >Inline Style</h1> *Herover: Flere deklarationer på samme element: font-family + color. *Hver ny CSS-Style afsluttes med semikolon: ( ; ) *Deklaration på hele siden (body). Eks.: <body style= font-family: Consolas; > (fonten Consolas på alt i body) Som du kan se, kan du f.eks. vælge at lægge din Style i body-tagget. *HUSK! Browsere læser koden oppefra og ned, dvs. efterfølgende inlinestyles overskriver tidligere deklarationer! Eks.: <body style= font-family: Consolas; color: red; > <h2>consolas fonten på alt i body <h2> <h2 style= font-family: Times New Roman ; >Undtagen her!</h2> </body> *Inline-Style er stærk, da den læses direkte på de enkelte tags og sidst. 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 på mange og lange sider. 14

16 INTERNAL STYLESHEETS Efterhånden blev det overordnede tag <style> introduceret. *Style-tagget placeres i <head> tagget og rammer via Selectors de forskellige tags. Denne måde at style på kaldes Internal Stylesheet og er en nemmere måde at style et helt dokument på, da man redigerer style overordnet i sidens head tag. *Selector er det der vælges, i nedenstående eksempel er body selector: <!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> 15

17 EXTERNAL STYLESHEETS Det er altså smart at ændre f.eks. indstillinger for sidens forskellige tags overordnet 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" /> Stylesheet) (Stien til CSS filen) (Relationen= 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> *Herover: Eksempel på Extern Stylesheet (main.css) i mappen: content/styles/ SAME BUSINESS? Internal Stylesheet: <style> body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; </style> External Stylesheet: body { font-family: Consolas; h2 { font-size: 1.4em; h3 { font-size: 1.2em; *Du kan referere til flere StyleSheets, Husk at Browseren læser oppefra og ned. 16

18 ANATOMY OF STYLES Internal og Extern Styles er opbygget af forskellige elementer. Vi kalder de enkelte styles Declarations: Declaration Seclector Property Value Eksempel på 2 Declarations i et Extern Stylesheet: body { font-family: verdana; line-height: 1em; h1 { color: red; *body Får Properties: font-family + line-height Med values: verdana + 1em. h1 Får Property: color Med value: red. CHOOSE THIS { DO THIS : HOW MUCH ; Du kan skrive din CSS i single line (Svær at redigere i. Fylder mindre): h1 {font-family: Consolas; color: red; font-size: 2em; Du kan kombinere ( Combinate ) selectors: p, h1, h2, h3 { color: red; *Du kan ramme specielle elementer ( Pseudo Classes ): nav li a { font-size: 1.5em; *Rammer a. HVIS a ligger i en li der ligger i en nav. Og ikke andre. 17

19 HTML REFERENCE <!DOCTYPE html> <html> <head> <title> <meta charset="utf-8" /> Charset 1) Instruktion til Browseren HTML Part Start Head Part Start Title Tagget </head> <body> </body> </html> Head Part End Body Part Start Body Part End HTML Part End 1) Meta-tagget: <meta charset="utf-8" /> anvendes afhængigt af hvilken type tekst det oprindelige dokument blev lavet i, om Browseren kan læse de specialtegn du bruger. Prøv f.eks. at se om din browser understøtter Æ, Ø og Å? LINK <a> Anchor, eller Link. Eks: <a href="page2.html" target="_blank">click Me!</a> Hyper Reference: Page2.html Ny faneblad Teksten på link. <a> Er tagget. target Er Målet for link. _blank Er Nyt faneblad BILLEDE <img> Image, eller billede. Eks: <img src="cat.jpg" alt="cute-cat" /> Src: Cat.jpg Alt =Teksten til billedet. <img> Er tagget. src Er Kilden for billede. alt Er Alternate Text 18

20 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 eller kopier teksten herunder i tekstfilen. HTML HyperText Markup Language 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: 19

21 LINKS o o o o o o W3SCHOOLS Prøv at se forbi w3schools og følg evt. de tutorials der ligger her. W3schools bliver brugt af Webudviklere næsten dagligt, og er et godt sted at afprøve forskellige ting omkring HTML. De har en On-line Editor du kan teste forskellige løsninger i. CHANNEL 9 Bob Tabor fra Microsoft har lavet en række videoer omkring HTML5 og CSS3, Bob er god til at forklare tingene og tager udgangspunkt i Notepad. Der er en lang række videoer der går igennem rigtigt mange ting omkring HTML5 og CSS3. 20