HTML5. Juha Söderqvist

Size: px

Start display at page:

Download "HTML5. Juha Söderqvist"

Alison Dean
6 years ago
Views:

1 HTML5 Juha Söderqvist

2 HTML5 INTRO HTML5 Initial release: 28 October 2014 Type of format:markup language Filename extension:.html 2

3 HTML5 + DOM4 The Document Object Model (DOM) is a cross-platform and language-independent application programming interface that treats an HTML, XHTML, or XML document as a tree structure wherein each node is an object representing a part of the document. The objects can be manipulated programmatically and any visible changes occurring as a result may then be reflected in the display of the document. First publishedoctober 1, 1998 Latest version DOM4 - November 19,

4 HTML5 + DOM4 + Web browser Web browsers To render a document such as an HTML page, most web browsers use an internal model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with topmost node named as "Document object". When an HTML page is rendered in browsers, the browser downloads the HTML into local memory and automatically parses it to display the page on screen. The DOM is also the way JavaScript transmits the state of the browser in HTML pages. 4

5 HTML5 + DOM4 + RENDERING A web browser engine (sometimes called layout engine or rendering engine) is a program that renders marked up content (such as HTML, XML, image files, etc.) and formatting information (such as CSS, XSL, etc.).. 5

6 HTML5 DECLARATION Definition and Usage The <!DOCTYPE> declaration must be the very first thing in your HTML document, before the <html> tag. The <!DOCTYPE> declaration is not an HTML tag; it is an instruction to the web browser about what version of HTML the page is written in. <!DOCTYPE html> <html>.. 6

7 HTML5 vs HTML 4.01 HTML5 <!DOCTYPE html> HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " HTML 4.01 Frameset This DTD is equal to HTML 4.01 Transitional, but allows the use of frameset content. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" " 7

8 HTML5 TAGS AND ELEMENTS <> = brackets <h1> = tag <h1> = opening tag </h1> = closing tag <h1> Intro </h1> = element <br> = tag (only one: opening tag) <br> = empty element Note: <br /> = is for XHTML 8

9 HTML5 TAGS AND ELEMENTS < = less than > = greater than < = left-angle bracket > = right-angle bracket p = character To create a paragraph, surround the words with an opening tag <p> and closing tag </p> <p> hello </p> 9

10 HTML5 WEBPAGE BASICS HTML pages are text documents HTML uses tags, which are inside angled brackets. Information is between inside the opening and closing tags Tags can also be empty like <br> Tags are often refereed to as elements Opening tags can carry attributes Attributes require a name and a value 10

11 HTML5 WEBPAGE ex#1 <!DOCTYPE html> <html> <head> <title> cool homepage </title> </head> <body> <p> welcome to a cool webpage </p> </body> </html> 11

12 HTML5 STRUCTURE <!DOCTYPE html> *Declaration of html5 <html> *start html (opening tag for html) <head> *start head (opening tag) <title> cool homepage </title> *title element (name of webpage) </head> *head ends here (closing tag) <body> *start body (opening tag) <p> welcome to a cool webpage </p> *p element </body> *body ends (closing tag) </html> *html ends here (closing tag) 12

13 HTML5 STRUCTURE <!DOCTYPE html> Declaration its HTML5 <html> Opening <html> tag indicates the start of HTML code <head> <title> cool homepage </title> </head> Always before <body> tag comes <head>. Head contains info about the page. <Title> element is inside <head> element <body> <p> welcome to a cool webpage </p> </body> Everything inside <body> element is shown in the main browser window </body> indicates end of what appears in the main browser window </html> The closing </html> indicates the end of HTML code 13

14 HTML5 - HEADINGS Headings 1-6: <h1> Main heading </h1> <h2> Level2 heading </h2> <h3> Level3 heading </h3> Main heading Level2 heading Level3 heading 14

15 HTML5 - PARAGRAPHS Headings Paragraphs = each paragraph on a new line <h1> Main heading </h1> <h2> Level2 heading </h2> <p> bla bla bla bla </p> <p> la la lalaa </p> <h3> Level3 heading </h3> Main heading Level2 heading bla bla bla bla la la lalaa Level3 heading 15

16 HTML5 BOLD & ITALICS ITALIA Headings = <h2> <h2> Paragraphs = <p> ITALIA </p> Italics = <i> ITALIA </i> Bold = <b> ITALIA </b> Bold & Italics = <b><i> ITALIA</i> </b> 16

17 HTML5 LINE BREAKS Line break = <br> <!DOCTYPE html> <html> <body> <p>this is normal text - <b>and this is bold text</b>.</p> <p> Hello <br> My name is <b> John </b> <p> </body> </html> This is normal text - and this is bold text. Hello My name is John 17

18 HTML5 LINE BREAKS Line break = <br> <br> tag = is an empty element <p> welcome to my page <p> <p> My name is John </p> <p> Goodbye! </p> <br> <br> <p> (C)2017 John </p> Welcome to my page My name is John Goodbye! (C)2017 John 18

19 HTML5 HORIZONTAL RULE Horizontal rule = <hr> <hr> tag = is an empty element <p> welcome to my page <p> <p> My name is John </p> <p> Goodbye! </p> <br> <hr> <p> (C)2017 John </p> Welcome to my page My name is John Goodbye! (C)2017 John 19

20 HTML5 COMMENTS Comments tag   <p> welcome to my page <p> <--code ends here-->  Welcome to my page hallo 20

21 HTML5 STRONG, EMPHASIS Strong = <strong> same as <b> Emphasis = <emphasis> same as <i>  <p> welcome to my page <p> <p> My name is <strong>john</strong> </p> <p> <emphasis>goodbye!</emphasis> </p> <hr> <hr> <p> (C)2017 John </p> <--code ends here--> Welcome to my page My name is John Goodbye! (C)2017 John 21

22 HTML5 STRONG, EMPHASIS Strong = <strong> same as <b> Emphasis = <emphasis> same as <i>  <p> welcome to my page <p> <p> My name is <strong>john</strong> </p> <p> <emphasis>goodbye!</emphasis> </p> <b> a </b> <i> b </i> <b> c </b> Welcome to my page <p> (C)2017 <b> John </b> </p> My name is John Goodbye! <--code ends here--> abc 2017 John 22

23 HTML5 - QUOTATIONS Quotation 2 elements for marking up quotations: <blockquote> <q> <p> Hello I am very <q> cool </q> </p> Hello I am very cool 23

24 HTML5 - ABBREVIATIONS Abbreviation = <abbr> <p>the <abbr title="world Health Organization">WHO</abbr> was founded in 1948.</p> 24

25 HTML5 - CITATIONS Citations = <cite> <img src="img_the_scream.jpg" width="220" height="277" alt="the Scream"> <p><cite>the Scream</cite> by Edward Munch. Painted in 1893.</p> 25

26 HTML5 - ADDRESS <address> Written by <a href="mailto:webmaster@example.com">jon Doe</a>.<br> Visit us at:<br> Example.com<br> Box 564, Disneyland<br> USA </address> 26

27 HTML5 CHANGES Delete = <del> Inserted = <ins> <p>my favorite color is <del>blue</del> <ins>red</ins>!</p> My favorite color is blue red! 27

28 HTML5 CODING TAGS <code>defines a piece of computer code <samp> Defines sample output from a computer program <kbd> Defines keyboard input <var> Defines a variable 28

29 HTML5 CODING TAGS <code>a piece of computer code</code><br> <samp>sample output from a computer program</samp><br> <kbd>keyboard input</kbd><br> <var>variable</var> 29

30 HTML5 LISTS Three different types: 1. Ordered lists are lists where is item in the list is numbered 2. Unordered lists are lists that begin with a bullet point 3. Definition lists are made up of a set of terms along with definitions for each of those terms 30

31 HTML5 ORDERED LISTS Ordered lists are lists where is item in the list is numbered <ol> the ordered list is created with the <ol> element <li> each item in the list is placed between <li> tags <ol> <li> wake up </li> <li> make breakfast </li> </ol> 1. wake up 2. make breakfast 31

32 HTML5 TWO ORDERED LISTS Ordered lists are lists where is item in the list is numbered <ol> the ordered list is created with the <ol> element <li> each item in the list is placed between <li> tags Attribute : start value=number Specifies the start value of an ordered list <ol> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> <ol start="50"> <li>coffee</li> <li>tea</li> <li>milk</li> </ol> 32

33 HTML5 UNORDERED LISTS Unordered lists are lists where is item in the list has a bullet point <ul> the unordered list is created with the <ul> element <li> each item in the list is placed between <li> tags <ul> <li> wake up </li> <li> make breakfast </li> </ul> wake up make breakfast 33

34 HTML5 DEFINITION LISTS Definition lists are lists where is item in the list has a term and definition <dl> the defintion list is created with <dl> element <dt> is the term and <dd> is the defintion items in the list <dl> <dt>sushi<dt> <dd>sliced raw fish<dd> Sushi Sliced raw fish Meatball a ball of minced or chopped meat <dt>meatball<dt> <dd>a ball of minced or chopped meat<dd> </dl> 34

35 HTML5 NESTED LISTS List inside list <h4>a list inside a list:</h4> <ul> <li>coffee</li> <li>tea <ul> <li>black tea</li> <li>green tea</li> </ul> </li> <li>milk</li> </ul> 35

36 HTML5 MARKED TEXT The <mark> tag defines marked text. Use the <mark> tag if you want to highlight parts of your text. <p>do not forget to buy <mark>milk</mark> today.</p> 36

37 HTML5 GLOBAL ATTRIBUTES <element style="style_definitions"> 37

38 HTML5 GLOBAL ATTRIBUTES <p style="color:green">this is a paragraph.</p> This is a paragraph. <p style="color:blue">this is a paragraph.</p> This is a paragraph. <h1 style="font-size:300%;">this is a heading</h1> <p style="font-size:160%;">this is a paragraph.</p> This is a heading This is a paragraph. 38

39 HTML5 ATTRIBUTE HIDDEN <p hidden>this paragraph should be hidden.</p> <p>this is a visible paragraph.</p> This is a visible paragraph. The hidden attribute is a boolean attribute. When present, it specifies that an element is not yet, or is no longer, relevant. Browsers should not display elements that have the hidden attribute specified. The hidden attribute can also be used to keep a user from seeing an element until some other condition has been met (like selecting a checkbox, etc.). Then, a JavaScript could remove the hidden attribute, and make the element visible. 39

40 HTML5 LINKS Links from one website to another Links from one page to another on the same website Links from one part to another part on the same page Links that open new browser window Links that start your default program Links are created using the <a> element. <a + the attribute href <a href= >Google</a> Absolute links: <a href= >Google</a> Relative links: <a href= about.html < About me</a> 40

41 HTML5 RELATIVE URLS Relative URLs can be used when linking to pages within your own website. Same folder: <a href= about.html >About</a> Child folder: <a href= music/index.html >Music</a> Grandchild folder: <a href= music/pop/pop.html >Pop</a> Parent folder: <a href=../index.html >Home</a> Grandparent folder: <a href=../../index.html >Home</a> You can always use absolute urls Ex Parent folder: <a href= website.com/index.html >Home</a> 41

42 HTML5 LINKS DETAILS Opening links in a new browser window <a> tag with attribute _blank <a href= google.com target= _blank >Google (new)</a> Opening links toa specific part of the same page <h1 id= top >Introduction</h1>. <a href= #top >Top</a> Opening links toa specific part of another page <a href= books.com#intro >introduction to books</a> 42

43 HTML5 IMAGES The <img> tag defines an image in an HTML page. The <img> tag has two required attributes: src and alt. Note: Images are not technically inserted into an HTML page, images are linked to HTML pages. The <img> tag creates a holding space for the referenced image. example <img src="smiley.gif" alt="smiley face" width="42" height="42"> 43

44 HTML5 FIGURE CAPTION <figure> <img src="img_pulpit.jpg" alt="the Pulpit Rock" width="304" height="228"> <figcaption>fig.1 - A view of the pulpit rock in Norway.</figcaption> </figure> 44

45 HTML5 IMAGE LOGO DESIGN Three rules for images: 1. Format When design a logo you maybe create it in vector format. When you want to use the logo on a webpage choose to export the vector to pixel based format such as jpeg, gif or png. Test what format look as sharp as possible. 2. Size Note the file size of the logo also matters, so using different formats create different sizes. Use compression as much as possible, review the look and feel of the webpage after testing different versions of your pixel based logo. 3. Measure images in pixels. Example 800x600 for a photo. Avoid using cm, inches etc.. 45

46 HTML5 IMAGE LOCATIONS Index.html in the of website: itspoket.com Points to the image on the webserver (relative childfolder) <img src="img/copy_of_wallstreet2.jpg" height="600" width="800"> If you would like to point to this image from another webpage use an absolute url link. Note that can also be used in the code of the website: itspoket.com (but usually its better to use relative) <img src=" alt="wallstreet" height="600" width="800"> 46

47 HTML5 IMAGE LOCATIONS <a href=" </a><img src="img/1.png"> When you click on the MJAU64 LOGO in goes to mjau64.com Note: Images are important from a visual design perspective and they create great user experience. If a website is using images such as logos etc..design guideline make it possible to click on the logo and for the most part that links to the homepage of that logo. 47

48 HTML5 IMAGE LOGO RESIZED img[attributes Style] { width: 147px; height: 61px; } 48

49 HTML5 IMAGE LOGO DESIGN 49

50 HTML5 IMAGE LOGO DESIGN These logos are the same size in pixels on the web as the actual image file (not resized). Tip: Downsizing a large image with the height and width attributes forces a user to download the large image (even if it looks small on the page). To avoid this, rescale the image with a program before using it on a page. 50

51 HTML5 IMAGE LOGO DESIGN JUHAX (PNG) 3,843 bytes ITspoket (JPG) 19,352 bytes MJAU64 (PNG) 19,934 bytes Biosalma (PNG) 27,465 bytes 51

52 HTML5 IMAGE SIZE <img src="img/2.jpg"> ITspoket (JPG) 19,352 bytes WALLSTREET (JPG) 14,632 bytes <img src="img/copy_of_wallstreet2.jpg" height="600" width="800"> 52

53 HTML5 - ITspoket 53

54 Itspoket HTML code <html>  <head> <title> ITSPOKET.com </TITLE> </head> <body> <img src="img/2.jpg"> <h3> Welcome visitor. stay for a while, stay 4ever! </h3> <br> <br> <br> <center> <img src="img/copy_of_wallstreet2.jpg" height="600" width="800"> </center> </body> </html> 54

55 Itspoket HTML code <html>  <head> <title> ITSPOKET.com </TITLE> Missing DOCTYPE!!!!! Browser goes into quirks mode which is a technique used by some web browsers for the sake of maintaining backward compatibility with web pages instead of HTML5. Including the DOCTYPE in a document ensures that the browser makes a best-effort attempt at following the relevant specifications. 55

56 HTML 5 - LAZY DOG v DECLARATION OF HTML5 <!DOCTYPE html> 1. HTML 2. HEAD 3. TITLE 4. BODY 5. HEADER <h1> 6. PARAGRAPH <p> 7. LINE BREAK <br> 8. HORIZONTAL RULE <hr> 9. BOLD <b> 9.1 STRONG <strong> 10. ITALISC <i> 11. COMMENTS  12. QUOTATIONS <q> 13. ABBREVIATION <abbr> 14. CITATIONS <cite> 15. ADDRESS <address> 16. DELETE <del> 17. INSERTED <ins> 18. CODE <code> 19. SAMPLE <samp> 20. KEYBOARD INPUT <kbd> 21. VARIABLE <var> 22. ORDERED LIST <ol> 23. UNORDERED LIST <ul> 24. LIST ITEM <li> 25. DEFINITION LIST <dl> 26. DEFINITION TERM <dt> 27. DEFINITION <dd> 28. MARKED TEXT <mark> 29. STYLE ex <p style="color:green"> 30. HIDDEN <p hidden> cant see me </p> 31. LINK <a href="google.com> GOOGLE </a> 32. IMAGE <img> 32.1 IMAGE SOURCE <img src="img/2.jpg"> 32.2 IMAGE SIZE <img src="wallstreet.jpg" height="600" width="800"> 33. FIGURE CAPTION <figure> <figcaption> 56

INTRODUCTION TO WEB USING HTML What is HTML?

Geoinformation and Sectoral Statistics Section (GiSS) INTRODUCTION TO WEB USING HTML What is HTML? HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language