Module3 HTML Source Coding 1
Module3 HTML Source Coding 1
2
Example Source code #1 (save it as htmlexample1.html)
Explanation:
• The DOCTYPE declaration defines the document and HTML
version.
• The text between <html> and </html> describes an HTML
document
• This <head></head> tag represents the document's header
which can keep other HTML tags like <title>, <link> etc.
• The text between <title> and </title> provides a title for the
document
• The text between <body> and </body> describes the visible
page content
• The text between <h1> and </h1> describes a heading
• The text between <p> and </p> describes a paragraph
3
What is HTML Element
Note: Some HTML elements have no content (like the <br> element). These elements are called
empty elements. Empty elements do not have an end tag!
4
Web Browsers
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and display them correctly.
A browser does not display the HTML tags, but uses them to determine how to display the document
5
6
NOTE: Never Skip the End Tag
Some HTML elements will display correctly, even if you
forget the end tag:
Example:
<html>
<body>
<p>This is a paragraph
<p>This is a paragraph
</body>
</html>
7
However, never rely on this! Unexpected results and errors may occur if you
forget the end tag!
NOTE: HTML is Not Case Sensitive
HTML tags are not case sensitive: <P> means the same as <p>.
The HTML standard does not require lowercase tags, but
W3C recommends lowercase in HTML, and demands lowercase for stricter
document types like XHTML.
HTML Headings
HTML headings are titles or subtitles that you want to display on a webpage.
•Heading 1
•Heading 2
•Heading 3
•Heading 4
•Heading 5
•Heading 6
8
HTML headings are defined with the <h1> to <h6> tags.
<h1> defines the most important heading. <h6> defines the least important heading.
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
9
Example Source code #2 (save it as htmlexample2.html)
(complete the code by providing h4 to h6)
Note: Use HTML headings for headings only. Don't use headings to make
text BIG or bold.
11
HTML Paragraphs
Paragraphs allow you to add text to a document in such a way that it will automatically adjust the
end of line to suite the window size of the browser in which it is being displayed. Each line of text will
stretch the entire length of the window.
12
Example Source code #3 (save it as htmlexample3.html)
13
HTML Line Breaks
The HTML <br> element defines a line break.
Use <br> if you want a line break (a new line) without starting a new paragraph:
14
The <br> tag is an empty tag, which means that it has no end tag.
HTML <pre> Element
• The HTML <pre> element defines preformatted text.
• The text inside a <pre> element is displayed in a fixed-width font
(usually Courier), and it preserves both spaces and line breaks:
Example Source code #5 (save it as htmlexample5.html)
<h2>HTML <small>Small</small>Formatting</h2>
20
HTML Images
Images are very important to beautify as well as to illustrate many complex concepts
in simple way on your web page.
Insert Image
You can insert any image in your web page by using <img> tag.
The <img> tag is an empty tag, which means that it can contain only list of
attributes and it has no closing tag.
The src attribute specifies the folder location or web address of the image:
21
You can set image width and height based on your requirement using width and height attributes.
You can specify width and height of the image in terms of either pixels or percentage of its actual
size.
HTML Tables
The HTML tables allow web authors to arrange data like text, images, links, other tables, etc. into
rows and columns of cells.
The HTML tables 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.
Table Heading
Table heading can be defined using <th> tag. This tag will be put to replace <td> tag, which is
used to represent actual data cell. Normally you will put your top row as table heading.
22
Example Source code #10e (save it as htmlexample10e.html)
23
HTML Lists
HTML offers web authors two ways for specifying lists of information. All lists must contain one or more list elements. Lists may contain:
<ul> - An unordered list. This will list items using plain bullets.
<ol> - An ordered list. This will use different schemes of numbers to list your items.
24
Example Source code #12 (save it as htmlexample12.html)
26
Ordered HTML List - The Type Attribute
The type attribute of the <ol> tag, defines
the type of the list item marker:
Example Source code #14 (save it as htmlexample14.html)
Type Description
type="1" The list items will be
numbered with numbers
(default)
type="A" The list items will be
numbered with
uppercase letters
type="a" The list items will be
numbered with lowercase
letters
type="I" The list items will be
numbered with
uppercase roman
numbers
type="i" The list items will be
numbered with lowercase
roman numbers 27
HTML Forms
HTML Forms are required when you want to collect some data from the site visitor. For example during user registration you
would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as ASP Script or PHP script etc.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
Attributes
Following is the list of attributes for
<input> tag for creating text field.
Attribute Description
type Indicates the type of input control and for
text input control it will be set to text.
name Used to give a name to the control which
is sent to the server to be recognized and
get the value.
value This can be used to provide an initial
value inside the control.
size Allows to specify the width of the text-
input control in terms of characters.
maxlength Allows to specify the maximum number of
characters a user can enter into the text
box.
29
Password input controls
Example Source code #16 (save it as htmlexample16.html)
Attributes
Following is the list of attributes for
<input> tag for creating password
field.
Attribute Description
type Indicates the type of input control and for password
input control it will be set to password.
name Used to give a name to the control which is sent to the
server to be recognized and get the value.
value This can be used to provide an initial value inside the
control.
size Allows to specify the width of the text-input control in
terms of characters.
maxlength Allows to specify the maximum number of characters
a user can enter into the text box.
30
Multiple-Line Text Input Controls
Example Source code #17 (save it as htmlexample17.html)
31
Attributes
Following is the list of attributes for <textarea> tag.
Attribute Description
name Used to give a name to the control which is sent to the server to be recognized and get the value.
rows Indicates the number of rows of text area box.
cols Indicates the number of columns of text area box
Checkbox Control
Example Source code #18 (save it as
htmlexample18.html)
32
Attributes
Following is the list of attributes for <checkbox> tag.
Attribute Description
type Indicates the type of input control and for checkbox input control it will be set to checkbox.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value The value that will be used if the checkbox is selected.
checked Set to checked if you want to select it by default.
33
Attributes
Following is the list of attributes for radio button.
Attribute Description
type Indicates the type of input control and for checkbox input control it will be set to radio.
name Used to give a name to the control which is sent to the server to be recognized and get the value.
value The value that will be used if the radio box is selected.
checked Set to checked if you want to select it by default.
34
Attributes
Following is the list of important attributes of <select> tag:
Attribute Description
name Used to give a name to the control which is sent to the server to be recognized and get the value.
size This can be used to present a scrolling list box.
multiple If set to "multiple" then allows a user to select multiple items from the menu.
35
File Upload Box
Example Source code #21 (save it as htmlexample21.html)
Attributes
Following is the list of important attributes of file upload box:
Attribute Description
36
name Used to give a name to the control which is sent to the server to be recognized and get the value.
accept Specifies the types of files that the server accepts.
Button Controls
There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input> tag by setting its type
attribute to button. The type attribute can take the following values:
Type Description
submit This creates a button that automatically submits a form.
reset This creates a button that automatically resets form controls to their initial values.
button This creates a button that is used to trigger a client-side script when the user clicks that button.
image This creates a clickable button but we can use an image as background of the button.
37
Hidden Form Controls
Example Source code #23 (save it as
htmlexample23.html)
38
QUESTIONS??
39