HTML is a markup language used to structure and present content on the web. It uses tags to mark elements like headings, paragraphs, lists, links, images and more. Forms allow collecting user input with different controls like text fields, checkboxes, radio buttons and more. Tables arrange data into rows and columns. Links connect pages together and frames divide pages into sections.

1. HTML

2. Introduction
• Stands for Hypertext Markup Language
• Most widely used language to write Web Pages
• Hypertext refers to the way in which Web pages (HTML documents)
are linked together
• Is a Markup Language which means you use HTML to simply "mark-
up" a text document with tags that tell a Web browser how to
structure it to display
• Is being widely used to format web pages with the help of different
tags available in HTML language

3. Basic HTML document

5. Basic Tags
• Heading Tags
• Paragraph Tags
• Line Break Tag
• Centering Tag
• Horizontal Lines
• Preserving Format
• Non breaking space

6. Heading Tags

7. Paragraph Tag

8. Line Break Tag

9. Centering Tag

10. Horizontal Lines

11. Preserve Formatting

12. Non Breaking Space

13. HTML Elements

14. HTML Tags Vs Elements
• <p> is starting tag
• </p> is closing tag
• <p>This is paragraph</p> is paragraph element
• There are some HTML elements which don't need to be closed, such
as <img.../>, <hr /> and <br /> elements
• These are known as void elements

15. Nested HTML Elements

16. HTML Attributes
• Used to define the characteristics of an HTML element
• Is placed inside the element's opening tag
• All attributes are made up of two parts: a name and a value:
• The name is the property you want to set
• The value is what you want the value of the property to be set and always put
within quotations
• Example: Three possible values of align attribute: left, center and right.
• Attribute names and attribute values are case-insensitive
• However, the World Wide Web Consortium (W3C) recommends
lowercase attributes/attribute values

18. Core Attributes
• The four core attributes that can be used on the majority of HTML
elements are:
• Id
• Title
• Class
• Style

19. The id Attribute
• Used to uniquely identify any element within an HTML page
• Two primary reasons to use an id attribute on an element:
• If an element carries an id attribute as a unique identifier, it is possible to
identify just that element and its content
• If we have two elements of the same name within a Web page, we can use
the id attribute to distinguish between elements that have the same name

20. The title Attribute
• Gives a suggested title for the element
• Syntax for the title attribute is similar as id attribute

21. The class attribute
• Used to associate an element with a style sheet
• Specifies the class of element
• Will learn more about the use of the class attribute when we will
learn Cascading Style Sheet (CSS)

22. The style attribute
• Allows us to specify Cascading Style Sheet (CSS) rules within the
element

23. Internationalization Attributes
• There are three internationalization attributes, which are available for
most all XHTML elements
• dir
• lang
• xml:lang

24. The dir Attribute
• Allows you to indicate to the browser about the direction in which the
text should flow
• Can take one of two values, as we can see in the table that follows:

26. The lang Attribute
• Allows us to indicate the main language used in a document
• Was kept in HTML only for backwards compatibility with earlier
versions of HTML
• Has been replaced by the xml:lang attribute in new XHTML
documents
• Values of the lang attribute are ISO-639 standard two-character
language codes

28. The xml:lang
• Is the XHTML replacement for the lang attribute
• The value of the xml:lang attribute should be an ISO-639 country
code

29. Generic Attributes

31. HTML Formatting
• Bold Text
• Italic Text
• Underlined Text
• Strike Text
• Monospaced Font
• Superscript Text
• Subscript Text
• Inserted Text
• Deleted Text
• Larger Text
• Smaller Text

32. Bold Text

33. Italic Text

34. Underlined Text

35. Strike Text

36. Monospaced Font

37. Superscript Text

38. Subscript Text

39. Inserted and Deleted Text

40. Larger Text

41. Smaller Text

42. Grouping Content
• The <div> and <span> elements allow us to group together several
elements to create sections or subsections of a page
• For example, we might want to put all of the footnotes on a page
within a <div> element to indicate that all of the elements within that
<div> element relate to the footnotes
• We might then attach a style to this <div> element so that they
appear using a special set of style rules

45. Phrase Tags
• Emphasized Text
• Marked Text
• Strong Text
• Text Abbreviation
• Acronym Element
• Text Direction
• Special Terms
• Quoting Text
• Short Quotations
• Text Citations
• Computer Code
• Address Text

46. Emphasized Text

47. Marked Text

48. Strong Text

49. Text Abbreviation

50. Acronym Element
Title is missing from acronym

51. Text Direction

52. Special Terms

53. Quoting Text

54. Short Quotations

55. Text Citations

56. Computer Code

57. Address Text

58. Meta Tags
• Specify additional important information about a document
• Can be used to include name/value pairs describing properties of the
HTML document, such as author, expiry date, a list of keywords,
document author etc.
• <meta> tag is used to provide such additional information
• Is an empty element and so does not have a closing tag
• Carries information within its attributes

59. • Can include one or more meta tags in your document based on what
information we want to keep in your document
• Do not impact physical appearance of the document

61. Comments
• Are placed in between <!-- ... --> tags
• Any content placed with-in <!-- ... --> tags will be treated as comment
and will be completely ignored by the browser

63. Multiline Comment

64. Images
• Insert Image
• Set Image Location
• Set Image Width/Height
• Set Image Border
• Set Image Alignment

65. Insert Image
• Can insert any image in web page by using <img> tag
• Syntax:

67. Set Image Location

68. Set Image Width/Height

69. Set Image Border

70. Set Image Alignment

71. Tables
• Allow web authors to arrange data like text, images, links, other
tables, etc. into rows and columns
• Are created using the <table> tag in which the <tr> tag is used to
create table rows and <td> tag is used to create data cells

73. Table Heading

74. Cell Padding and Cell Spacing

76. Colspan and Rowspan Attributes

78. Tables Backgrounds
• Can set table background using one of the following two ways:
• bgcolor attribute - Can set background color for whole table or just for one
cell
• background attribute - Can set background image for whole table or just for
one cell.
• Can also set border color also using bordercolor attribute

81. Table Height and Width

82. Table Caption

83. Table Header, Body, and Footer
• The three elements for separating the head, body, and foot of a table
are:
• <thead> - to create a separate table header.
• <tbody> - to indicate the main body of the table.
• <tfoot> - to create a separate table footer.

86. Nested Tables
• Can use one table inside another table.
• Not only tables can use almost all the tags inside table data tag <td>

89. HTML LIST
• Three ways for specifying lists of information
• All lists must contain one or more list elements
• Lists may contain:
• <ul>
• Unordered list
• List items using plain bullets
• <ol>
• Ordered list
• Use different schemes of numbers to list items
• <dl>
• Definition list
• Arranges items in the same way as they are arranged in a dictionary

90. Unordered Lists

91. The type Attribute

93. Ordered Lists

94. The type Attribute

96. The start Attribute

98. Definition Lists
• Supported by both HTML and XHTML
• Entries are listed like in a dictionary or encyclopedia
• Ideal way to present a glossary, list of terms, or other name/value list
• Definition List makes use of following three tags
• <dl> - Defines the start of the list
• <dt> - A term
• <dd> - Term definition
• </dl> - Defines the end of the list

100. TEXT LINKS
• Syntax:

101. The target Attribute

103. Use of Base Path

104. Linking to a Page Section

105. Setting Link Colors

106. Download Links

107. Image Links

108. FRAMES
• Are used to divide browser window into multiple sections where each
section can load a separate HTML document
• A collection of frames in the browser window is known as a frameset
• The window is divided into frames in a similar way the tables are
organized: into rows and columns

109. Disadvantages of Frames
• There are few drawbacks with using frames, so it's never
recommended to use frames in your webpages:
• Some smaller devices cannot cope with frames often because their screen is
not big enough to be divided up
• Sometimes your page will be displayed differently on different computers due
to different screen resolution
• The browser's back button might not work as the user hopes
• There are still few browsers that do not support frame technology

110. Creating Frames
• To use frames on a page we use <frameset> tag instead of <body> tag
• The <frameset> tag defines, how to divide the window into frames
• The rows attribute of <frameset> tag defines horizontal frames and
cols attribute defines vertical frames
• Each frame is indicated by <frame> tag and it defines which HTML
document shall open into the frame

112. Output

114. Output

115. IFRAMES
• Can define an inline frame with HTML tag <iframe>
• The <iframe> tag is not somehow related to <frameset> tag, instead,
it can appear anywhere in your document
• The <iframe> tag defines a rectangular region within the document in
which the browser can display a separate document, including
scrollbars and borders.
• The src attribute is used to specify the URL of the document that
occupies the inline frame

117. FORMS
• Are required, when we want to collect some data from the visitor
• For example, during user registration we would like to collect information
such as name, email address, credit card, etc.
• Will take input from the site visitor and then will post it to a back-end
application such as CGI, ASP Script or PHP script etc
• There are various form elements available like text fields, textarea
fields, drop-down menus, radio buttons, checkboxes, etc

118. Form Attributes

119. Form Controls
• There are different types of form controls that you can use to collect
data using HTML form:
• Text Input Controls
• Checkboxes Controls
• Radio Box Controls
• Select Box Controls
• File Select boxes
• Hidden Controls
• Submit and Reset Button

120. Text Input Controls
• There are three types of text input used on forms:
• Single-line text input controls
• Used for items that require only one line of user input, such as search boxes or names
• Created using HTML <input> tag
• Password input controls
• Also a single-line text input but it masks the character as soon as a user enters it
• Are also created using HTML <input> tag
• Multi-line text input controls
• Used when the user is required to give details that may be longer than a single sentence
• Are created using HTML <textarea> tag

121. Single-line text input controls

123. Password Input controls

125. Multiple-Line Text Input Controls

127. Checkbox Control
• Are used when more than one option is required to be selected
• Are also created using HTML <input> tag but type attribute is set to
checkbox

130. Radio Button Control
• Are used when out of many options, just one option is required to be
selected
• Are also created using HTML <input> tag but type attribute is set to
radio

133. Select Box Control
• A select box, also called drop down box which provides option to list
down various options in the form of drop down list
• User can select one or more options

134. • Following is the list of important attributes of <select> tag:

135. • Following is the list of important attributes of <option> tag:

137. File Upload Box
• If we want to allow a user to upload a file to our web site, we will
need to use a file upload box, also known as a file select box
• Also created using the <input> element but type attribute is set to file

139. Button Controls
• Various ways in HTML to create clickable buttons
• Create a clickable button using <input> tag by setting its type
attribute to button
• The type attribute can take the following values:

140. Hidden Form Controls
• Are used to hide data inside the page which later on can be pushed to
the server
• Hides inside the code and does not appear on the actual page