Presentation is loading. Please wait.

Presentation is loading. Please wait.

Learning HTML Internet and Web Application Development SWE 444 Dr. Ahmed Youssef.

Similar presentations


Presentation on theme: "Learning HTML Internet and Web Application Development SWE 444 Dr. Ahmed Youssef."— Presentation transcript:

1 Learning HTML http://www.w3schools.com http://www.w3schools.com Internet and Web Application Development SWE 444 Dr. Ahmed Youssef

2 Introduction HTML is a language for describing web pages.  HTML stands for Hyper Text Markup Language  HTML is not a programming language, it is a markup language  A markup language is a set of markup tags  HTML uses markup tags to describe web pages Ahmed Youssef:: SWE444: Internet and Web Application Development

3 HTML Tags  HTML tags are keywords surrounded by angle brackets like  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 Ahmed Youssef:: SWE444: Internet and Web Application Development

4 Web Page

5 HTML Basic Document Open and close HTML document … Enclose document header … Contain the document’s assigned title. … Contain the body of the HTML document. … Title of document goes here Visible text goes here… Title of document goes here Visible text goes here… Ahmed Youssef:: SWE444: Internet and Web Application Development

6 Example Explained  The text between and describes the web page  The text between and is the visible page content  The text between and is displayed as a heading  The text between and is displayed as a paragraph Ahmed Youssef:: SWE444: Internet and Web Application Development

7 Heading Elements Largest Heading............ Smallest Heading Ahmed Youssef:: SWE444: Internet and Web Application Development

8 Heading Elements This is heading 1 This is heading 2 This is heading 3 This is heading 4 This is heading 5 This is heading 6

9 Paragraphs Paragraphs are defined with the tag. This is a paragraph. Ahmed Youssef:: SWE444: Internet and Web Application Development

10 HTML Links HTML links are defined with the tag. The href attribute specifies the destination of a link. Example This is a link Ahmed Youssef:: SWE444: Internet and Web Application Development

11 HTML Comments  Comments can be inserted into the HTML code to make it more readable and understandable.  Comments are ignored by the browser and are not displayed.  Comments are written like this: Ahmed Youssef:: SWE444: Internet and Web Application Development

12 HTML Lines  The tag creates a horizontal line in an HTML page. The hr tag defines a horizontal rule: This is a paragraph This is a paragraph Ahmed Youssef:: SWE444: Internet and Web Application Development

13 HTML Line Breaks  Use the tag if you want a line break (new line) without starting a new paragraph  Example Welcome in Hail Ahmed Youssef:: SWE444: Internet and Web Application Development

14 HTML Text Formatting TagDescription bold text big text italic text small text strong text subscripted text superscripted text Ahmed Youssef:: SWE444: Internet and Web Application Development

15 Exapmle This text is bold This text is strong This text is italic This is subscript and superscript

16 Preserving Whitespace class Foo { static void main(string[] args) { return; } vs

17 HTML Images In HTML, images are defined with the tag. To display an image on a page, you need to use the src attribute. Ahmed Youssef:: SWE444: Internet and Web Application Development17

18 Images  WIDTH="..." The width in pixels of an image.  HEIGHT="..." The height in pixels of the image.  BORDER="..." Creates a border around image. Ahmed Youssef:: SWE444: Internet and Web Application Development

19 19 <img src="../images/bird.jpg" alt="Magpie picture" width="200px"/> (Relative) URL of the binary image file Alternative text to be displayed if the image can't be displayed width and/or height attributes used to scale the rendered size of the image

20 HTML Lists Ordered list: 1.The first list item 2.The second list item 3.The third list item Unordered list: List item 20 Definition Lists list of items, with a description of each item. Coffee - black hot drink Milk - white cold drink

21 HTML List Tags TagDescription Defines an ordered list Defines an unordered list Defines a list item Defines a definition list Defines an item in a definition list Defines a description of an item in a definition list HTML List Tags

22 Lists Unordered Lists First Item Another item Ordered Lists First Item Second Item Definition Lists job a piece of work spade a tool for digging

23 Numbered List Numbered list: Apples Bananas Lemons Oranges Ahmed Youssef:: SWE444: Internet and Web Application Development

24 Letters list: Apples Bananas Lemons Oranges Lowercase letters list: Apples Bananas Lemons Oranges Ahmed Youssef:: SWE444: Internet and Web Application Development

25 Roman numbers list: Apples Bananas Lemons Oranges Lowercase Roman numbers list: Apples Bananas Lemons Oranges Ahmed Youssef:: SWE444: Internet and Web Application Development

26 Different types of unordered lists Disc list: Apples Bananas Lemons Oranges

27 Circle bullets list: Apples Bananas Lemons Oranges Square bullets list: Apples Bananas Lemons Oranges

28 HTML Tables  Tables are defined with the tag.  A table is divided into rows (with the tag), data cells (with the tag). td stands for "table data," and holds the content of a data cell. tag can contain text, links, images, lists, forms, other tables, etc.

29 Example row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

30 HTML Table Headers Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

31 Vertical Headers First Name: Bill Gates Telephone: 555 77 854 Telephone: 555 77 855

32 Tables Fruit Juice Drinks Apple Orange Breakfast 0 1 Lunch 1 2

33 HTML Styles - Background Color Ahmed Youssef:: SWE444: Internet and Web Application Development33 HTML List Tags This is a heading This is a paragraph.

34 HTML Style Font, Color and Size A heading A paragraph. Ahmed Youssef:: SWE444: Internet and Web Application Development34

35 HTML Style - Text Alignment This is a heading The heading above is aligned to the center Ahmed Youssef:: SWE444: Internet and Web Application Development35

36 HTML Forms  HTML forms are used to pass data to a server.  A form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more.  A form can also contain select lists, textarea, fieldset, legend, and label elements.

37 HTML Form Tags DescriptionTag Defines an HTML form for user input Defines an input control Defines a multi-line text input control Defines a label for an input element Defines a border around elements in a form Defines a select list (drop-down list) Defines an option in a select list Defines a push button

38 HTML Forms  The tag is used to create an HTML form:. input elements.

39 HTML Forms - The Input Element The input element is used to select user information. An input element can be of type – text field, – checkbox, – password, – radio button, – submit button, – and more. type = text|password|checkbox|radio|submit| reset|button

40 Text Field First name: Last name:

41 Password Field Password:

42 Radio Buttons defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices: Male Female

43 Submit Button A submit button is used to send form data to a server. Username:

44 Checkboxes User can select ONE or MORE options I have a bike I have a car

45 Drop-Down List Volvo Saab Fiat Audi

46 Text-area To create a multi-line text input control. User can write an unlimited number of characters. The cat was playing in the garden.

47 Create a button Ahmed Youssef:: SWE444: Internet and Web Application Development47

48 Last Lecture  List  Table  Styles  Forms Ahmed Youssef:: SWE444: Internet and Web Application Development48

49 HTML Forms - The Input Element  used to select user information. type = text | password | checkbox | radio | submit | reset | button

50 Text-area To create a multi-line text input control. User can write an unlimited number of characters. The cat was playing in the garden.

51 Fieldset  Used to logically group together elements in a form.  To draws a box around the related form elements.

52 Fieldset - Example Name: Email: Date of birth:

53 Legend Defines a caption for the fieldset element Information: Name: Email: Date of birth:

54 Drop-Down List Volvo Saab Fiat Audi

55 Create a button Ahmed Youssef:: SWE444: Internet and Web Application Development55

56 Create a button I Agree!

57 HTML Frames With frames, you can display more than one HTML document in the same browser window.

58 The HTML frameset Element  The frameset element holds one or more frame elements.  The frameset element states HOW MANY columns or rows HOW MUCH percentage/pixels of space will occupy each of them.

59 Vertical Frameset

60 frame_a.htm Frame A

61 frame_b.htm Frame B

62 frame_c.htm Frame C

63 Horizontal Frameset

64 Nested Framesets

65 tryhtml_contents.htm Frame a Frame b Frame c

66 Navigation Frame

67 Frameset with noresize

68 XHTML

69 What Is XHTML?  Stands for eXtensible HyperText Markup Language  XHTML is a combination of HTML and XML  XHTML is almost identical to HTML 4.01  XHTML is a stricter and cleaner version of HTML  XHTML is a W3C Recommendation  All browsers support XHTML

70 Bad HTML This is bad HTML Bad HTML This is a paragraph Why?

71 Differences Between XHTML and HTML  XHTML elements must be properly nested  XHTML elements must always be closed  XHTML elements must be in lowercase  XHTML documents must have one root element

72 XHTML elements must be properly nested Coffee Tea Black tea Green tea Milk

73 XHTML Elements Must Always Be Closed This is a paragraph This is another paragraph

74 Attribute Names Must Be In Lower Case – This is wrong: – This is correct: Attribute Values Must Be Quoted – This is wrong: – This is correct:

75 Mandatory XHTML Elements  All XHTML documents must have: a DOCTYPE declaration. The html, head, title, and body

76 Mandatory XHTML Elements......

77 77 HTML Document Type Declarations  XHTML 1.0 Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  XHTML 1.0 Frameset:  HTML 4.01 Transitional:

78 The 3 Document Type Definitions  XHTML 1.0 Strict Use this when you want really clean markup, free of presentational clutter. Use this together with Cascading Style Sheets.  XHTML 1.0 Transitional Use this when you need to take advantage of HTML's presentational features and when you want to support browsers that don't understand Cascading Style Sheets.  XHTML 1.0 Frameset Use this when you want to use HTML Frames to partition the browser window into two or more frames. SWE 444: Internet & Web Application Development3.78 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

79 A Minimum XHTML Document Template <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">...... SWE 444: Internet & Web Application Development 79

80 An XHTML Example simple document a simple paragraph 80


Download ppt "Learning HTML Internet and Web Application Development SWE 444 Dr. Ahmed Youssef."

Similar presentations


Ads by Google