EDAF90 - Webprogrammering HTML och CSS

Storlek: px

Starta visningen från sidan:

Download "EDAF90 - Webprogrammering HTML och CSS"

Charlotta Hermansson
för 4 år sedan
Visningar:

1 EDAF90 - Webprogrammering HTML och CSS Per Andersson Lund University Januari 28, 2019 Innehåll: Teminologi, HTML, CSS, DOM Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

2 Terminologi server-client (backend-frontend) static web page dynamic web page Content Management Systems (CMS), for example WordPress, Drupal, and Joomla singel page web application Web Application Frameworks responsive design universal design Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

3 Standardisering Internet Engineering Task Force (IETF) - RFC and rough consensus and running code World Wide Web Consortium (W3C) European Computer Manufacturers Association (ECMA) and ECMAScript Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

4 Teckenkodning Det finns många teckenkodningar Unicode and utf8, inte bara tecken utan även sortering (collation) ISO /latin 1 UTF8 håller på att erövra världen och är standard i bl.a. Java och JavaScript. Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

5 Unicode Blocks (Simplified) Code Name Code Name U+0000 Basic Latin U+1400 Unified Canadian Aboriginal Syllabi U+0080 Latin-1 Supplement U+1680 Ogham, Runic U+0100 Latin Extended-A U+1780 Khmer U+0180 Latin Extended-B U+1800 Mongolian U+0250 IPA Extensions U+1E00 Latin Extended Additional U+02B0 Spacing Modifier Letters U+1F00 Extended Greek U+0300 Combining Diacritical Marks U+2000 Symbols U+0370 Greek U+2800 Braille Patterns U+0400 Cyrillic U+2E80 CJK Radicals Supplement U+0530 Armenian U+2F80 KangXi Radicals U+0590 Hebrew U+3000 CJK Symbols and Punctuation U+0600 Arabic U+3040 Hiragana, Katakana U+0700 Syriac U+3100 Bopomofo U+0780 Thaana U+3130 Hangul Compatibility Jamo Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

6 Unicode Blocks (Simplified) (II) Code Name Code Name U+0900 Devanagari, Bengali U+3190 Kanbun U+0A00 Gurmukhi, Gujarati U+31A0 Bopomofo Extended U+0B00 Oriya, Tamil U+3200 Enclosed CJK Letters and Months U+0C00 Telugu, Kannada U+3300 CJK Compatibility U+0D00 Malayalam, Sinhala U+3400 CJK Unified Ideographs Extension A U+0E00 Thai, Lao U+4E00 CJK Unified Ideographs U+0F00 Tibetan U+A000 Yi Syllables U+1000 Myanmar U+A490 Yi Radicals U+10A0 Georgian U+AC00 Hangul Syllables U+1100 Hangul Jamo U+D800 Surrogates U+1200 Ethiopic U+E000 Private Use U+13A0 Cherokee U+F900 Others Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

7 The Unicode Encoding Schemes För Unicode används tre olika kodningsscheman: UTF-8, UTF-16, and UTF-32. UTF-16 war tidigare standard. Den använder 16 bitar per tecken 2 bytes FÊTE CA UTF-8 har variabel längd per tecken. Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

8 UTF-8 Range Encoding U-0000 U-007F 0xxxxxxx U-0080 U-07FF 110xxxxx 10xxxxxx U-0800 U-FFFF 1110xxxx 10xxxxxx 10xxxxxx U U-10FFFF 11110xxx 10xxxxxx 10xxxxxx 10xxxxxx Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

9 Locales and Word Order Beroende på språk skrivs datum, siffror och tid olika: Siffror: 3.14 or 3,14? Tid: 01/02/03 3 februari 2001? January 2, 2003? 1 February 2003? Bokstavsordning (Collating): är Andersson före eller efter Åkesson? Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

10 HTML <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>hello World</title> <link rel="stylesheet" href="css/styles.css"> <script src="my-awsome-code.js"></script> <base href=" </head> <body> <h1>hello World</h1> <p id="my-blue-box">my awsome page. </body> </html> Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

11 HTML - element Semantiska taggar <h1>, <h2>, <p>, <abbr>, <code>, <samp>, <kbd>, <var>, <footer>, <header>, <details>, <nav>... Structur <table>, <ul>, <ol>, <div>, <span>... Funktionalitet <form>, <input>, <select>, <button>, <a>... För att lära dig mer om HTML-taggar se Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

12 HTML - innehåll Data till element: innuti, t.ex. <h1>min Rubrik</h1> visas på skärmen text, och ofta andra element kan innehålla flera element attribut, t.ex. <a href=" länk</a> visas inte på skärmen alltid text alltid ett värde id unikt för varje element används för att identifiera element tag + innehåll element Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

13 Layout Rendering av webbsidor HTML-element har speciella attribut som beskriver hur de renderas vissa information är dynamiska och skapas av webbläsaren, t.ex. size de flesta attribut ärvs från föräldern attribut kan inte tas bort, bara skuggas tilldela attributen genom: style attributet i HTML-elementen Cascading Style Sheets (CSS) exempel på vad css kan åstadkomma Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

14 CSS Cascading Style Sheets samla layout information på ett ställe möjliggör responsiv design - anpassa efter skärmen en uppsättning regler varje regel består av: urval deklaration (attribut = värde) deklarationen appliceras på alla HTML-element som matchar urvalet syntax: urval : { property1: value1; property2: value2;} Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

15 CSS - urval CSS-urval: alla instanser ett element, t.ex. <div> alla element som har en klass, t.ex. <div class="my-style"> ett element med ett givet id, t.ex. <div id="my-tag"> pseudo-klass, t.ex. focus, hover, visited,... pseudo-element, t.ex. nth-child(2), only-child,... attributvärden, t.ex. [title~="flower"],... Urvalen kan kombineras. Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

16 CSS - exempel Example: // element div { color: blue; border: 1px; } // id, <p id="my-blue-box"> #my-blue-box { background-color: lightblue; } // klass, <div class="center">.center { text-align: center; color: red; } // element och klass, <p class="center"> p.center { text-align: center; color: green; } // inuti div p { text-align: center; color: green; } // alla p vars förälder är div div > p { text-align: center; color: green; } // direkt efter div + p { text-align: center; color: green; } // händelser a:hover { background-color: lightblue; } Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

17 Box Modellen Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

18 Layout CSS Properties for layout display - block, inline, none, flex,... visibility - visible, hidden,... position - static, absolute, fixed, relative,... overflow - visible, hidden, scroll, auto,... z-index - auto,number Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

19 Ramverk Det tar mycket tid att skapa en bra layout. Det finns färdiga paket att bygga vidare på: bootstrap material design Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

20 Webkit Mozilla Över tiden har samma attribut dykt upp med olika namn. av kompatibilitetsskäl bör flera attributnamn användas: box-shadow -webkit-box-shadow -moz-box-shadow Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

21 DOM Document Object Model en webb-sida är ett träd varje HTML-element blir en nod i trädet HTML-attributen är attribut i noderna <html> är roten i trädet Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

22 DOM forts. Document Object Model JavaScript-interfacet Document varje nod i trädet implementera JavaScript-interfacet Element DOMen nås via den globala variables document API för navigera trädet sök efter element, t.ex document.getelementbyid("intro") modifiera DOMen: Element.innerHTML läsa/skriva attribut, myinputelement.value="nisse Hult" Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

23 Händelse webbläsaren skapar event, t.ex. blur, submit, resize, keydown call-back-metoder <p id="demo" onclick= document.getelementbyid("demo").style.color = "red" > addeventlistener(type, handler[, options]) myeventhandler(event), event implementerar interfacet Event this and event.target pekar på källan, DOM elementet händelsen propagerar genom DOMen, tre faser: 1 capturing 2 target 3 bubbling event.stoppropagation() Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

24 event phases Per Andersson EDAF90 - Webprogrammering HTML och CSS Januari 28, / 1

Relevanta dokument

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript

EDA095 HTML. Per Andersson. April 26, Lund University Innehåll: HTML, CSS, DOM, JavaScript EDA095 HTML Per Andersson Lund University http://cs.lth.se/pierre_nugues/ April 26, 2017 Innehåll: HTML, CSS, DOM, JavaScript Per Andersson EDA095 HTML April 26, 2017 1 / 23 Webben Webben byggs upp av