1. Ch2: Introduction to HTML5

2. How does the WWW work? Web information is stored in documents called Web pages. Web pages are files stored on computers called Web servers. Computers reading the Web pages are called Web clients.

3. How does the browser fetch the pages? A browser fetches a Web page from a server by a request. A request is a standard HTTP request containing a page address. A page address looks like this: http://www.someone.com/home.htm.

4. How does the browser display the pages? All Web pages contain instructions for display The browser displays the page by reading these instructions. The most common display instructions are called HTML tags. HTML tags look like this This is a Paragraph.

5. Who is making the Web standards? The Web standards are not made up by Firefox or Chrome or Microsoft. The rule-making body of the Web is the W3C. W3C stands for the World Wide Web Consortium. W3C puts together specifications for Web standards. The most essential Web standards are HTML, CSS and XML. The latest HTML standard is HTML 5.

6. What is an HTML File? HTML stands for Hyper Text Markup Language An HTML file is a text file containing small markup tags The markup tags tell the Web browser how to display the page An HTML file must have an htm or html file extension An HTML file can be created using a simple text editor A HTML file is also called HTML document.

7. A Simple Example This is my first homepage.

8. What is HTML Tag? HTML tags are used to mark-up HTML elements HTML tags are surrounded by the two characters The surrounding characters are called angle brackets HTML tags normally come in pairs like and The first tag in a pair is the start tag, the second tag is the end tag The text between the start and end tags is the element content HTML tags are not case sensitive, means the same as

9. A Simple Example Title of page This is my first homepage. This text is bold

10. Example Explained The first tag in your HTML document is. This tag tells your browser that this is the start of an HTML document. The last tag in your document is. This tag tells your browser that this is the end of the HTML document. tells your browser that the document is an html5 document. The text between the tag and the tag is header information. Header information is not displayed in the browser window. The text between the tags is the title of your document. The title is displayed in your browser's caption. The text between the tags is the text that will be displayed in your browser. The text between the and tags will be displayed in a bold font.

11. What is HTML element? This is an HTML element: This text is bold An HTML element starts with a start tag and end tag. Name of the HTML element follows the initial < bracket = b; The element content is everything between the tags = This text is bold. Some HTML elements have empty content. void elements are closed in the start tag. An Example is the line break tag (new line).

12. Nested HTML Elements Most HTML elements can contain other HTML elements. Title of page This is my first homepage. This text is bold

13. HTML Attributes This is my first homepage. Name of the attribute : bgcolor; Value of the attribute : red. Both double style quotes and single style quotes are allowed.

14. HTML Attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: attribute_name = "value" Notes: Attribute values should always be enclosed in quotes. Double or Single style quotes “ or ‘ can be used. Attribute names and attribute values are case-insensitive.

15. HTML Headings

16. Headings Headings are defined with the to tags. defines the largest heading. defines the smallest heading. This is a heading HTML automatically adds an extra blank line before and after a heading.

17. This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6 HTML CodeIts Output

18. HTML Paragraphs

19. Paragraphs Paragraphs are defined with the tag. This is a paragraph HTML automatically adds an extra blank line before and after a paragraph.

20. This is paragraph I. This is paragraph II. This is paragraph III. This is paragraph I. This is paragraph II. This is paragraph III. HTML CodeIts Output HTML Paragraphs

21. HTML Line Breaks

22. The tag is used when you want to end a line, but don't want to start a new paragraph. The tag forces a line break wherever you place it. This is a para graph with line breaks The br element is an void element. It has no closing tag.

23. This is a para graph with line breaks This is a para graph with line breaks HTML CodeIts Output HTML Line Breaks

24. HTML Lines

25. The element is a void element. It has no closing tag. The tag creates a horizontal line in an HTML page.

26. The hr tag defines a horizontal rule: This is a paragraph This is a paragraph This is a paragraph The hr tag defines a horizontal rule: This is a paragraph HTML CodeIts Output HTML Lines

27. HTML Comments

28. Comments in HTML An example of comment tag. The start of the comment is: <!-- The end of the comment is: -->

29. This is a regular paragraph This is a regular paragraph HTML CodeIts Output HTML Comments

30. HTML Formatting

31. This text is bold This text is italic This is subscript and superscript This text is bold This text is italic This is subscript and superscript HTML CodeIts Output HTML Formatting

32. HTML Images

33. tag is used to insert images in webpages. tag is empty (no closing tag) Syntax for inserting image  src attribute is used to specify the URL (location of the image).  alt attribute specifies an alternate text that is used if the image can’t be displayed. This is required in HTML5. HTML Images

34. An image from folder An image from internet HTML Images – src & alt attributes An image from folder An image from internet

35. height=“height_value” attribute is used to set the height of the image. width=“width_value” attribute is used to set the width of the image. An image from internet HTML Images – height & width attributes

36. HTML Links

37. Visit Google Visit Google Visit Google HTML Code Its Output HTML Link and href attributes If you set the target attribute to "_blank", the link will open in a new browser window Open Google home page in the same window Open Google home page in a new window

38. HTML Link and href attributes Using links to send e-mails: Links can be used to link to email accounts not only web pages HTML code Output Click here to email John Click here to email John

39. HTML Link and href attributes Using images as links: Pressing the image will lead to the web page

40. HTML Link and href attributes Linking to files: HTML5 video tutorial Kuwait national anthem link in a media folder on the webserver

41. Internal Linking Links can be used to jump to different locations on the same page. Internal linking example Go to the top of the page

42. HTML Lists

43. An ordered list: 1.Jehad 2.Helal 3.Kassem Note: Inside a list item you can put text, line breaks, images, links, other lists, etc. HTML Lists An unordered list: Apple Orange Dates

44. HTML ordered Lists An Ordered List: Coffee Tea Milk An Ordered List: 1.Coffee 2.Tea 3.Milk

45. More HTML ordered Lists Numbered list: Apples Oranges Letters list: Apples Oranges Lowercase letters list: Apples Oranges Roman numbers list: Apples Oranges Lowercase Roman numbers list: Apples Oranges Numbered list: 1.Apples 2.Oranges Uppercase Letters list: A.Apples B.Oranges Lowercase letters list: a.Apples b.Oranges Uppercase Roman numbers list: I.Apples II.Oranges Lowercase Roman numbers list: i.Apples ii.Oranges

46. HTML Unordered Lists An Unordered List: Coffee Tea Milk An Unordered List: Coffee Tea Milk

47. More HTML Unordered Lists Disc bullets list: Apples Oranges Circle bullets list: Apples Oranges Square bullets list: Apples Oranges Disc bullets list: Apples Oranges Circle bullets list: o Apples o Oranges Square bullets list: ■Apples ■Oranges

48. Nested Lists Numbered list: Apples: Green apples Red apples Oranges Numbered list: 1.Apples: Green apples Red apples 2. Oranges

49. HTML Tables

50. element defines an HTML table. A table can be split into three distinct sections: Head ( element) Table titles Column headers Body ( element) Primary table data Foot ( element) Calculation results Footnotes Above body section in the code, but displays at the bottom in the page Element describes the table’s content The text inside the tag is rendered above the table in most browsers HTML Tables

51. HTML Table Example Table caption Table head Table body Table foot

52. HTML Tables – table & caption elements Price of Fruit Fruit Price Total $3.75 Apple $0.25 Orange $0.50 Banana $1.00 Pineapple $2.00 Table Caption

53. HTML Tables – thead & tfoot elements Price of Fruit Fruit Price Total $3.75 Apple $0.25 Orange $0.50 Banana $1.00 Pineapple $2.00 Table Caption

54. You can merge data cells with the rowspan and colspan attributes The values of these attributes specify the number of rows or columns occupied by the cell Can be placed inside any data cell or table header cell HTML Tables -

55. HTML tables - Rowspan Name Paul Deitel Telephone 555-4321 555-1234 NamePaul Deitel Telephone 555-4321 555-1234

56. HTML tables - colspan Name Telephone Paul Deitel 555-4321 555-1234 NameTelephone Paul Deitel555-4321555-1234

57. HTML Tables – cellpadding attribute First Row Second Row Use cellpadding attribute to set the white space between the cell content and its borders.

58. HTML Tables – cellspacing attribute First Row Second Row Use cellspacing attribute to increase the distance between the cells.

59. HTML Tables – align attribute Item 2010 Clothes $241.10 Food $30.00

60. Special characters in HTML Some characters can not be directly shown in an HTML document. Either because these characters are reserved for the HTML code or because they are not on the keyboard. if x Results in a syntax error HTML provides Character entity references for represnting these special characters. if x < 10 then increment x by 1 Doesn’t result in a syntax error

61. Special characters in HTML SymbolDescriptionCharacter entity reference HTML5 character entities &ampersand& ‘apostrophe&apos; >greater-than> <less-than< “quote" Other common character entities non-breaking space ©copyright© ¼fraction 1/4¼ ½fraction 1/2½ ¾fraction 3/4¾ ™trademark™

62. HTML Forms

63. HTML provides the ability for collecting information or data from users using web forms. Forms have many different uses like: Sending e-mail creating user accounts providing feedback issuing search queries forms are used to pass and/or retrieve data to/from a server. HTML Forms

64. 1.User visits a web page that contains a form. How does a web form work? Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> Name: Web page containing form

65. 2.User fills and submits the form. The form contains the address of the web server. When the user clicks the submit button the form will automatically be transmitted to the server. How does a web form work? Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> Name: Filled form submitted to web server

66. 3.Web server processes the data on the form using a form processor script, and returns the response back to the user. How does a web form work? Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> Name: Response page Script file

67. Forms contain visual components, that users interact with such as Buttons, text fields, checkboxes, radio-buttons, drop-down menus and more. Forms may also contain nonvisual components, called hidden inputs. Hidden inputs are used to store any data that needs to be sent to the server, but is not entered by the user. Hidden inputs can help the server to sort out the different forms submitted to the web server. HTML Forms Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> Name:

68. A form begins with the element Attribute method specifies how the form’s data is sent to the web server. (either “post” or “get”). The action attribute of the form element specifies the URL of a script on the Web server to which the form data will be sent. HTML Forms Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> Name: input elements

69. The element is the most important element on a form. The element is used to create the different input fields on the form (buttons, textareas, checkboxes...) An input element can vary depending on the type=“” attribute. Users specify their data values using these input fields. The values in these input elements are provided to the script that processes the form. HTML Forms – input element Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> Name:

70. HTML Forms – Text Fields Text Field First Name:

71. HTML Forms – Text Fields First Name: Setting attribute type= “text” defines a single-line input field. The element provides users with information about the input element’s purpose. The size attribute specifies the number of characters visible in the input element. Optional attribute maxlength limits the number of characters input into a text box.

72. HTML Forms – Password Field Password: type= “password” defines a password input field. The actual characters entered by the user are not shown. Here black circles are shown instead. Allows users to enter sensitive information, such as credit card numbers and passwords. The actual value input is sent to the web server, not the circles that mask the input.

73. HTML Forms – Radio Buttons Select your department: ISC AAD

74. HTML Forms – Radio Buttons The radio input allows the user to make a selection Set type=“radio” to define a radio button. Radio buttons are usually defined in groups. All radio buttons in a group have the same name attribute but different value attributes. (ex. name=“cfw_dept”). The value attribute specify the value of the radio button selected. It is the value that gets submitted to the Web server. only one radio button in a group can be selected at any time ISC

75. HTML Forms – Checkboxes Select all coursed you have completed: ISC240 ISC340

76. HTML Forms – Checkboxes ISC240 A checkbox is similar in function and use to a radio buttons, except that it allows multiple checkboxes in a group to be selected. Set type=“checkbox” to define a checkbox. All checkboxes in a group must have the same name attribute. The value attribute specify the value of the checkbox selected.

77. HTML Forms – Buttons Username: The submit input is used to submit the data entered in the form to the web server for processing. In most web browsers having type=“submit” will create a button that submits the form data when clicked. The reset input allows a user to reset all form elements to their default values. To create a reset button set type=“reset”.

78. HTML Forms – hidden inputs Input hidden is used to store any data that needs to be sent to the server, but is not entered by the user. Set type =“hidden” to create a hidden input. Hidden inputs are not displayed on the form.

79. HTML Forms – Drop-down list select your country: Kuwait Bahrain UAE KSA

80. HTML Forms – Drop-down list The select input provides a drop-down list of items. The name attribute identifies the drop-down list. The option element adds items to the drop-down list. The value attribute specifies the value that is transmitted to the web server. Kuwait Bahrain

81. HTML Forms – Textarea Write your feedback.

82. HTML Forms – Textarea The textarea element inserts a multiline text box, called a text area, into a form The number of rows in the text area is specified with the rows attribute. The number of columns (i.e., characters per line) is specified with the cols attribute. The text placed between the tags is the default text displayed when the page is visited. Write your feedback.

83. Include a label element for each form element to help users determine the purpose of each form element. Place hidden input elements at the beginning of a form, immediately after the opening tag. This placement allows document authors to locate hidden input elements quickly. When your form has several checkboxes with the same name, you must make sure that they have different values, or the scripts running on the web server will not be able to distinguish them. Not setting the name attributes of the radio buttons in a form to the same name is a logic error because it lets the user select all of them at the same time. Notes to remember Feedback Form Please fill out this form to help us improve our site. <input type = "hidden" name = "recipient" value = "deitel@deitel.com" /> <input type = "hidden" name = "subject" value = "Feedback Form" /> <input type = "hidden" name = "redirect" value = "main.html" /> Name:

84. Form Exercise

85. meta Elements Information about the web page should be included in the html document so that search engines can add the page to their database for search results. HTML element is used to write this information for search engines. ISC340 course