3. HTML Introduction
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages
using markup
HTML elements are building blocks of HTML
pages
HTML elements are represented by tags
7. HTML Basics
All HTML documents must start with a
document type declaration: <!DOCTYPE
html>.
The HTML document itself begins
with <html> and ends with </html>.
The visible part of the HTML document is
between <body> and </body>.
9. Continued…
What are HTML Tags?
The hidden keywords within a webpage that
define how our web browser must format &
display the content.
Most tags have two parts an opening and
closing part, e.g; <html> is opening tag and
</html> is closing tag.
10. Headings
Headings are defined with <h1> to <h6> tags.
<h1> defines the most important heading while
<h6> is defined the least important heading
<h1> should be used for main heading, followed
by <h2>, then the less important <h3> & so on…
11. Importance
Search engines use the headings to index the
structure & content of your web pages.
Users skim your pages by its headings, so it’s
important to use headings to show the document
structure.
12. Paragraphs
The HTML <p> defines a paragraph.
Never forget the end tag, else it might produce
unexpected results or errors.
14. Inputs
There are many types of inputs from which text is
default.
<input type=“value” />
The value defines which type of data do you want
to insert.
There are many types of data you can insert some
of them are from HTML5 but as we’re on to HTML
so we will only discuss them.
15. Input type=“?” Description
Text Default, defines a single-line text field.
Checkbox Defines a checkbox
Password Defines a password field.
File Defines a file-select field & a “Browse…”
button
Image Defines an image as the submit button
Button Defines a clickable button
Submit Defines a submit button
Hidden Defines a hidden input field
Radio Defines a radio button
Reset Defines a reset button
16. Labels
The <label> tag defines a label for an <input>
element.
The <label> element provides a usability
improvement for mouse users, because if the user
clicks on the text within the <label> element, it
toggles the control.
The for attribute of the <label> tag should be
equal to the id attribute of the related element to
bind them together.
17. Images
The <img> tag defines an image in an HTML page.
The <img> tag has two required attributes; src &
alt.
src: defines the url (or path) of the image
alt: specifies an alternate text for an image
Where some common attributes are height, width,
border etc.
18. Table
The <table> tag defines an HTML table.
An HTML table consists of the <table>
element and one or more <tr>, <th> & <td>
elements.
More complex HTML table may also include
<caption>, <tbody>, <col>, <colgroup>,
<thead> & <tfoot>
19. Tags Description
<tr> Defines a table row
<th> Defines a table header
<td> Defines a table cell
<tbody> Used to group the body content in an
HTML table
<thead> Used to group header content in an HTML
table
<tfoot> Used to group footer content in an HTML
table
<caption> Defines a table caption
<col> Specifies column properties for each
column within a <colgroup> element
<colgroup> Specifies a group of one or more
columns in a table for formatting
21. Lists
There are two types of lists.
Ordered Lists
Unordered Lists.
Definition Lists
22. Ordered Lists
If you are required to put your items in a
numbered list instead of bulleted, then HTML
ordered list will be used. This list is created by using
<ol> tag.
24. Unordered Lists
A collection of related items that have no special
order or sequence. This list is created by using
HTML <ul> tag. Each item in the list is marked with
a bullet.
26. Definition Lists
HTML and XHTML supports a list style which is called
definition lists where entries are listed like in a
dictionary or encyclopedia. The definition list is the
ideal way to present a glossary, list of terms, or
other name/value list.
Definition list makes use of the following three tags:
<dl> - Defines the start of the list
<dt> - A term
<dd> - Term definition
</dl> - Defines the end of the list
28. HTML Elements
An HTML element is defined by a starting tag. If the
element contains any content it ends with a
closing tag. Example:
Start Tag Content End Tag
<p> Paragraph
content
</p>
<h1> Heading content </h1>
<div> Division content </div>
<br />
30. HTML Attributes
Attributes are the specific properties of every HTML
element.
They provide additional information
They are always specified in start tag of an
element.
Attributes consist of two parts: name & value
Name is the property you want to set.
Value is what you want the value of the property
to be set and always put within quotations.
31. Continued…
For example; <img /> tag have two main
attributes src & alt
<a></a> is a link tag whose main attribute is
href whose value is equal to any external link
or its link itself.
While attributes like height, width, align etc
are common for all HTML elements.
32. Core Attributes
The four core attributes that can be used on
majority of HTML elements(not all) are:
Id
Class
Title
Style
33. Id Attribute
The id attribute of an HTML tag can be used to
uniquely identify any element within an HTML
page. There are two primary reasons that you
might want 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 you have two elements of the same name within
a Web page (or style sheet), you can use the id
attribute to distinguish between elements that
have the same name.
35. Class Attribute
The class attribute is used to associate an element
with a style sheet, and specifies the class of
element.
The value of the attribute may also be a space
separated list of class names.
36. Title Attribute
The title attribute gives a suggested title for the
element. They syntax for the title attribute is similar
as explained for id attribute.
37. Style Attribute
The style attribute allows you to specify Cascading
Style Sheet (CSS) rules within the element.
38. Generic Attributes
Attributes Options Function
Align Left, right, center Horizontally align
tags
Valign Top, middle, bottom Vertically align tags
Bgcolor Numeric, decimal,
RGB values
Places a
background color
behind an element
Background URL Places a
background image
behind an element
Width Numeric value Specifies the width
Height Numeric value Specifies the height