1. Ku-Yaw Chang canseco@mail.dyu.edu.tw Assistant Professor, Department of Computer Science and Information Engineering Da-Yeh University

2.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 2

3.  HTML is a markup language for describing web documents (web pages).  HTML stands for Hyper Text Markup Language  A markup language is a set of markup tags  HTML documents are described by HTML tags  Each HTML tag describes different document content  Usually the way to display it  ex. font color, font size 2014/09/22DHTML 3

4. 2014/09/22DHTML 4

5. My First Heading My first paragraph. 2014/09/22DHTML 5

6.  The DOCTYPE declaration defines the document type  The text between  and describes the web document  and describes the visible page content  and describes a heading  and describes paragraph  Using the description, a web browser can display a document with a heading and a paragraph. 2014/09/22DHTML 6

7.  Keywords (tag names) surrounded by angle brackets: content  normally come in pairs like and  The first tag is the start tag (opening tag)  The second tag is the end tag (closing tag)  The end tag is written like the start tag  With a slash before the tag name 2014/09/22DHTML 7

8.  Helps the browser to display a web page correctly  HTML5  HTML 4.01  XHTML 1.0 2014/09/22DHTML 8

9.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 9

10.  Write HTML Using Notepad or TextEdit  A professional HTML editor like:  Adobe Dreamweaver  Microsoft Expression Web  CoffeeCup HTML Editor  A text editor like Notepad (PC) or TextEdit (Mac) is recommended for learning purpose.  We believe using a simple text editor is a good way to learn HTML. 2014/09/22DHTML 10

11.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 11

12. My First Heading My first paragraph. 2014/09/22DHTML 12

13.  HTML headings are defined with the to tags:  This is a heading  :  This is a heading  HTML paragraphs are defined with the tag:  This is a paragraph.  This is another paragraph. 2014/09/22DHTML 13

14.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 14

15.  Written with a start tag, with an end tag, with the content in between:  Everything from the start tag to the end tag: 2014/09/22DHTML 15 content My first paragraph.

16.  HTML elements can be nested (elements can contain elements)  All HTML documents consist of nested HTML elements. 2014/09/22DHTML 16 My First Heading My first paragraph. My First Heading My first paragraph. How many HTML elements in this example?

17.  HTML elements with no content  is an empty element without a closing tag (the tag defines a line break).  Empty element can be "closed" in the opening tag .  HTML5 does not require empty elements to be closed.  Please close all HTML elements  Stricter validation  Readable by XML parsers 2014/09/22DHTML 17

18.  Use Lowercase Tags  HTML tags are not case sensitive  means the same as.  W3C recommends lowercase in HTML4, and demands lowercase for stricter document types like XHTML. 2014/09/22DHTML 18

19.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 19

20.  Defined with the to tags.  defines the most important heading.  defines the least important heading.  Use HTML headings for headings only.  Don't use headings to make text BIG or bold.  Search engines use your headings to index the structure and content of your web pages.  Users skim your pages by its headings.  Use headings to show the document structure. 2014/09/22DHTML 20

21.  Has nothing to do with HTML headings.  Only contains metadata  Be placed between the tag and the tag: 2014/09/22DHTML 21 My First HTML.. My First HTML.. metadata: data about data SEO: search engine optimization metadata: data about data SEO: search engine optimization

22.  Element  Defines the HTML document's title  Will not be displayed in the document  Might be displayed in one of the browser tabs.  Element  Defines the character set used in the HTML document.  “UTF-8” is strongly suggested 2014/09/22DHTML 22

23.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 23

24.  Paragraphs are defined with the tag.  Don't Forget the End Tag  Most browsers will display HTML correctly even if you forget the end tag: 2014/09/22DHTML 24 This is a paragraph. This is another paragraph. This is a paragraph. This is another paragraph.

25.  Use the tag if you want a line break (a new line) without starting a new paragraph.  element  an empty HTML element  no end tag 2014/09/22DHTML 25 This is a para graph with line breaks

26.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 26

27.  Formatting Tags  HTML uses tags like and for formatting output, like bold or italic text. 2014/09/22DHTML 27

28.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 28

29.  Insert comments in HTML   Not displayed by the browser  Help document your HTML  Be great for debugging HTML 2014/09/22DHTML 29

30.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 30

31. HTML elements can have attributes  Provide additional information about an element  Always specified in the start tag  Come in name/value pairs  like: name="value"  Always Quote Attribute Values 2014/09/22DHTML 31

32.  Be declared in the tag.  Important for accessibility applications (screen readers) and search engines 2014/09/22DHTML 32 The first two letter specifies the language (en). If there is a dialect, use two more letters (US). The first two letter specifies the language (en). If there is a dialect, use two more letters (US).

33.  HTML paragraphs are defined with the tag.  A title attribute  About W3Schools 2014/09/22DHTML 33

34. 2014/09/22DHTML 34  href Attribute  size Attributes  alt Attribute

35.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 35

36.  Introduction  Editors  Basic Examples  Elements  Headings  Paragraphs  Text Formatting  Comments  Attributes  Links  Images  Tables  Lists 2014/09/22DHTML 36

37.  Store data locally within the user's browser  Local storage vs. cookies (before HTML 5)  more secure  storage limit is far larger (at least 5MB)  information is never transferred to the server  Local storage is per domain.  All pages, from one domain, can store and access the same data 2014/09/22DHTML 37

38.  window.localStorage  stores data with no expiration date  not be deleted when the browser is closed  Be available the next day, week, or year  window.sessionStorage  stores data for one session  data is lost when the tab is closed 2014/09/22DHTML 38

39. // Store localStorage.setItem("lastname", "Smith"); // Retrieve document.getElementById("result").innerHTML = localStorage.getItem("lastname"); 2014/09/22DHTML 39

40. if (localStorage.clickcount) { localStorage.clickcount = Number(localStorage.clickcount) + 1; } else { localStorage.clickcount = 1; } document.getElementById("result").innerHTML = "You have clicked the button " + localStorage.clickcount + " time(s)."; Note : Name/value pairs are always stored as strings. Remember to convert them to another format when needed! 2014/09/22DHTML 40

41. 2014/09/22DHTML 41