Introduction to Web Design & HTML
You have surfed several websites, exchanged emails, performed online transactions,etc. in
the previous sessions. If you want to create websites like the ones you haveseen, you need
to learn a variety of technologies, tools and techniques.Web designing refers to the skills
that are required to create and manage websites.Web design as a whole refers to designing
a user interface, authoring (programming)or a combination of both. Designing a website
requires multiple skills. However, it isrecommended to master and become skilled in one
particular technology once you geta taste of various technologies involved.
Following topics are covered in this module:
HTML & CSS
Web Authoring Tools, Microsoft Expression Web
Overview of Client-side & Server-side scripting, JavaScript & VBScript
A number of markup languages such as HTML, DHTML, XML are used to create webbased
content. Apart from these, software products such as FrontPage, Dream Weaveretc are also
used to develop web based content. Web based applications are built using technologies
such as ASP (Active Server Pages), JSP (Java Server Pages), PHP (Hypertext Preprocessor),
ASP.net etc.
HTML or Hypertext Markup Language is a language used for created web pages that can be
viewed in a web browser.
Hyper - means active and all over the place! When you use a Web browser, youcan
move all over the place, without a specified order as to how to access pages/sites.
Text - You will be working with text files only.
o
o
o
o
o
Web Publishing
Understanding HTML
Digital Content Creation
Web Designing Fundamentals
Unit 5
79
Information Technology Level -2
80
o
o
Markup - To create a Web page, you will type in the text and then ?Mark up? the text.
Language - This is a method of creating something or communicating and in this case,
you are creating Web pages using a particular syntax.
HTML elements are the building blocks of a website. Web browsers interpret the
tagswritten in HTML and display a web page.
Hypertext refers to the text that can be linked to another text or page which a usercan
access. Hypertext is the underlying concept behind the World Wide Web.
HTML is developed and maintained by World Wide Web Consortium abbreviated asW3C.
When HTML was first released, there were a handful of tags available and usedfor basic
web page structures. As time evolved, several new tags and attributes wereintroduced.
Popular HTML versions include HTML 4.01 and HTML 5.0.
All you need is a text editor such as notepad to create a web page using HTML. HTML files
have the extension .htm or .html. You can open the web pages using web browsers such as
Mozilla Firefox, Internet Explorer, Google Chrome, etc.
Web browsers have the ability to display the source code used for a web page. You can use
this to enhance your knowledge To view the code, do the following:
1.
Open the Web Browser and right-click anywhere in the web page and select View
Page Source from the context menu similar to the one below:
2.
Notice, the source code of the web page is visible with different color codes.
The colors have no meaning in terms of function and are only used to differentiate
different sets of code.
You can save web pages for future reference using the following procedure:
1.
Select File > Save Page As…
2.
Type a file name and click Save.
When you work with a document, you create headings, sub-headings, tables, etc. to give the
document a structure. Similarly in HTML, tags or elements are used to create a web pages'
structure.
Designing Web pages using HTML
Viewing Source Code
Saving a web page
HTML Elements & Attributes - The Basics
Information Technology Level -2
81
Look at an example of an online magazine. Online magazines have articles with text
content, images, videos, links or continuation to related articles, advertisements, etc. They
appear as a single web page to visitors. Have you noticed that the headings are of varying
sizes to indicating topics and sub-topics and different from the content?
All this formatting is possible using combinations of several HTML elements.
Elements have content placed between a start tag and an end tag. Tags act as containers for
text, images and other types of content. Tags start an opening tag and end with a closing
tab, using angle brackets (<>) to define the structure.
Note: To learn to use the tags, throughout this document, you will find examples of code
displayed within dotted boxes. Copy it in a text editor, save it in your local computer and view
using web browsers.
HTML uses tags enclosed in angle brackets; most tags are used in pairs such as
<html></html>, etc. Following is a simple example of HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<p>Hello World!</p>
<!--this is an example of simple HTML code created using Notepad-->
</body>
</html>
Elements & Attributes
Writing your First HTML Code
Information Technology Level -2
82
In the above mentioned code, there are a few HTML tags used. All HTML documents start
with <html> and end with </html>. The rest of the document contains other elements
and web page content placed using elements.
Document type or DOCTYPE is an element used for indicating the version of HTML
used in a web page. This is used by the web browser to apply a set of rules for
understanding the document structure.
HTML element indicates the start and end of an HTML document. <HTML> indicates
the beginning of this HTML document and </HTML> indicates the end.
HTML is also the root of an HTML document and has two parts, Head and Body
elements.
Head element represents the header section of a document and contains
information about a web page. Head elements start with <head> and end with
</head>. This element includes all other elements that need to be executed or
understood before the content (included in the body element) is displayed to the
user.
Content placed within the <Title> and </Title> element is displayed as the title of a
web page and used by search engines to create indexes of content.
Body element represents the section that contains body content and is displayed
in the web browser. Most HTML elements are used within the body element
between <body> and </body> tags.
If you want to place hidden text in a web page, you can use the comment element (<!--
> and <--> tags). Text placed using comment element will not be displayed in a web
browser but can seen when viewing the source code. This is useful to developers or
users who would like to share their experience in writing HTML code but hide the
text from general visitors.
Attribute are used to provide additional information about an element. Attribute contains
values and some elements use multiple attributes.
o
o
o
o
?
?
HTML Attributes
Information Technology Level -2
83
Nesting
Text formatting
You can nest other elements within elements. Elements nested within another element are
referred to as a child elements and the nesting element is referred to as a parent element.
When you nest elements, you need to ensure the elements are used in proper order.
Observe the correct way of using opening and closing tags illustrated in the figure below:
You can format the text content of a web page to make it attractive by using other HTML
elements such as Headings, Bold, Italics, etc.
Heading
There are six levels of heading elements from H1 to H6. H1 has the
largest text size and H6 has the smallest heading text size.
Emphasize
To emphasize a particular text in a sentence (for example a text that
should be pronounced different), use this element. Text enclosed
within <em> and <lem> are displayed in italics.
Italics
If you want the text to be displayed in alternate voice such as a text
translated from a foreign language, technical words or present text
in typographic italics, enclose the text within <i> and </i> elements.
Html Elements & Attributes - Text Formatting
Element
Description
Information Technology Level -2
84
Strong
If you want to emphasize a text with stronger importance in a
sentence, use the strong element. Text enclosed within <strong> and
</strong> are displayed in bold.
Bold
To make the text such as keywords visually bold, enclose the text
within <b> and </b>, the bold element.
Underline
To underline the text, enclose the text within <u> and </u>, the
underline element.
Mark
To highlight the text in a sentence, enclose the text within mark
element: <mark> and </mark>
Big
If you want to display a particular text in a sentence bigger than rest
of the text in a sentence, enclose the text within the big element :
<big> and </big>.
Small
To display a particular text in a sentence as smaller than the rest of
the text in a sentence, enclose the text within the small element:
<small> and </small>.
Subscript &
Text enclosed within <sub> and </sub> are displayed as subscripts
superscripts
and Text enclosed within <sup> and </sup> are displayed as
superscripts.
Pre
Text enclosed using <pre> and </pre> tags are displayed as it is (in
the example below - using a mono-space font such as Courier)
INS & DEL
Text enclosed within <del> and </del> are displayed as struck out
while text enclosed within <ins> and </ins> is underlined.
Break
To separate single lines or use multiple line spacing, use the break
element. Breaks between lines are represented through use of <br>.
No closing tag is needed.
HR
To separate sections, use a horizontal line to indicate
distinctiveness. Horizontal line is indicated through use of <hr>
element and requires no closing tag.
<!DOCTYPE html>
<html>
<head>
Sample Code - Text Elements
Information Technology Level -2
85
<title>Learn HTML</title>
</head>
<body>
<p> HTML supports six levels of headings, H1 to H6 with H1 being the largest.</p>
<h1>Main Heading</h1>
<h2>Sub heading, Level 1</h2>
<h3>Sub heading, Level 2</h3>
<h4>Sub heading, Level 3</h4>
<h5>Sub heading, Level 5</h5>
<h6>Sub heading, Level 6</h6>
<p> You are required to <em>agree</em> with our terms and conditions.</p>
<p> <i>HTML</i> is simple to learn.</p>
<p>It is important to know the common <strong>HTML Elements and attributes.
</strong></p>
<p>This an example of text displayed in <b>bold</bold>.</p>
<p>This an example of text displayed <u>underlined</u>.</p>
<p>This is an example of highlighted <mark>text.</mark></p>
<p><big>Sun</big> is the largest of all planets with 696,000 KM as it’s radius.</p>
<p><small>Mercury</small> is the smallest planet in the Solar System ever since Pluto
lost its status and was reclassified as a dwarf planet.</p>
<p>this is an example of subscript for a formula, H<sub>2</sub>O</p>
<p>this is an example of superscript for a formula, (A+B)<sup>2</sup></p>
<pre>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello World");
}
</pre>
<p>this is the correct spelling of <del>entreprenaur</del>
<ins>entrepreneur</ins></p>
</body>
</html>
Information Technology Level -2
86
Referencing Elements
Sample Code - Referencing Elements
Element
Description
Quote
To include short text such as name of an author, publisher, etc. in
quotes, use the quote element. You can also use the cite attribute to
indicate the source. Text included within <q> and </q> is displayed
within quotations.
Blockquote
To include lengthy quotes, include text within <blockquote> and
</blockquote> elements.
Cite
To specify a tile of a work such as title of a book, movie, painting, etc.
include text within <cite> and </cite> elements.
Abbreviation To include abbreviations of acronyms, include the abbreviation
between <abbr> and </abbr> elements. Text included within this
element will be displayed when the cursor is moved over the text.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<p>HTML Tutorial
<q>Created by Author Name</q>
<blockquote cite="http://en.wikipedia.org/wiki/Google_Analytics"> Google Analytics (GA)
is a service offered by Google that generates detailed statistics about a website's traffic and
traffic sources and measures conversions and sales.</blockquote>
<p>You can learn more about web design at <cite>
http://en.wikipedia.org/wiki/Web_design</cite>
<p><abbr title=" Hypertext Markup Language">HTML</abbr> has several elements and
attributes. </p>
</p>
</body>
</html>
Information Technology Level -2
87
Tables
Images
You can create a table using the Table Element. Tables are made of rows and
columnssimilar to that of a spreadsheet. Rows are contained within table row element
<tr> and data is stored within row element <td>.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<table>
<tr><td>Name</td><td>Age</td><td>City</td></tr>
<tr><td>Anand</td><td>17</td><td>Delhi</td></tr>
<tr><td>Rohit</td><td>23</td><td>Bangalore</td></tr>
</table>
</body>
</html>
You can include images in your web page by using the <img> image element. Use the SRC
attribute to specify the location of the image and width and height attributes to specify the
dimensions of the image. Also it is a recommended practice to use the ALT attribute for
displaying text if the image is not downloaded.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<img src="HTML5-logo.png" alt="HTML 5 Logo, is not displayed due to an error.
Please reload this page or contact the website administrator" width="300"
height="300">
</body></html>
Information Technology Level -2
88
Working with Audio, Video & Flash
Element
Description
Audio
To include an audio clip, enclose the audio within the <audio> and
</audio> elements and point to the clip using SRC attribute. To
automatically play the audio, use the autoplay attribute. To display
controls, use the controls attribute.
Video
To include a video clip, enclose the audio within the <video> and
</video> elements and point to the clip using SRC attribute. Also use
width and height attributes to specify the dimenstions of a video clip.
Flash
To embed a flash animation, use the <embed> and </embed>
elements and point to the animation using SRC attribute.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<audio src="pump_im.mp3" autoplay controls>
Your browser does not support the audio element.
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<video src="sample_mpeg4.mp4" height="320" width="200" controls>
Your browser does not support the Video element.
</video>
</body>
</html>
Information Technology Level -2
89
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<embed src="sample.swf" height="200" width="320">
</body>
</html>
You can also include videos from other sources such as youtube.com, etc. To include a video
from youtube.com, do the following:
1.
Go to Youtube.com
2.
Select a video clip
3.
Right-click on the video and select Copy embed html
Write the code within <body> and </body> section (sample below).
.<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<iframe width="640" height="360"
src="http://www.youtube.com/embed/v4oN4DuR7YU?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe></body>
</html>
Now save and open this web page using a web browser.
Note: Refer to Youtube.com FAQ' for detailed instructions.
Information Technology Level -2
90
Html Elements & Attributes - Forms & Frames
Forms
Sample Code - Forms
Forms contain input elements such as text boxes, dropdown menus, check boxes, radio
buttons, etc. to collect information from visitors and sent to a web server for further
processing such as displaying search results or send to a database for storage.
Forms are created using <form> element along with action and method attributes.
Action attribute is used for specifying the URL to where the data needs to be submitted.
Method attribute is used for specifying the HTTP method, get or post.
POST attribute is used for storing or updating a database or for sending emails and GET
attribute is used for retrieving data.
Form element uses text boxes to collect text information and radio buttons, check boxes
and dropdown menus for collecting information through pre-defined options.
Textbox
Single-line text input box is typically used for collecting shorter text
such as usernames or passwords. Multiple-line text input boxes are
used for collecting lengtheir text such as narrative feedback, etc.
Radio Buttons Used for collecting single value from multiple values. You should use
type=radio attribute for using radio buttons in a web page.
Checkbox
Used for collecting multiple values. You should use type=checkbox
attribute for using checkboxes in a web page.
Dropdown
Used for collecting single or multiple values from a dropdown menu.
You should use the option attribute along with values to present
multiple options.
Submit
Submit button allows visitors to submit the value.
Reset
Reset button clears all the selections made.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
Control
Description
Information Technology Level -2
91
</head>
<body>
<p>Subscribe to your weekly Newsletter</p>
<form action="http://www.example.com/signup.asp" method="post">
Name <input type="name" name="Name" size="30">
Password <input type="password" name="Name" size="30">
<textarea rows="3" name="Comments" cols="30"></textarea>
<p>I agree to the Terms and Conditions.
<input type="radio" value="Agree" name="R1"> Yes
<input type="radio" value="Diagree" checked name="R1"> No</p>
<p>10th <input type="checkbox" name="Class_10" value="ON"> 12th
<input type="checkbox" name="Class_12" value="ON"> Bachelors Degree
<input type="checkbox" name="Bachelors_Degree" value="ON"> Masters Degree
<input type="checkbox" name="Masters_Degree" value="ON"></p>
<p>This is an example of Dropdown Menu (Single Selection)</p>
<p>School Education Board<select size="1" name="School">
<option>State Board</option>
<option>Matriculation</option>
<option>CBSE</option>
</select> </p>
<p>
<input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Reset"></p>
</form>
</body>
</html>
Frames are used to display one or more pages within a single web page; collections of
different frames are referred to as a frameset. Frames are used when you want to display
different pages as a single page in a web browser.
Frames
Information Technology Level -2
92
<html>
<frameset cols="25%,50%,25%">
<frame src="sample.htm">
<frame src="sample.htm">
<frame src="sample.htm">
<noframes>
Text to be displayed in browsers that do not support frames
</noframes>
</frameset>
</html>
iframe or inline frames is an element used for embedding another document or an URL
with a web page.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title></head>
<body>
<p>You can use iframe to include a web page.</p>
<iframe width="600" height="300" src="lesson002.htm"></iframe>
<hr>
<p>You can use iframe to view another website live.</p>
<iframe width="600" height="300" src="http://www.mozilla.org"></iframe>
<hr>
<p>You can restrict scrolling in iframe.</p>
<iframe width="600" height="300" src="http://www.wikipedia.org"
scrolling=no></iframe>
</body>
</html>
You have surfed several websites, exchanged emails, performed online transactions,etc. in
the previous sessions. If you want to create websites like the ones you haveseen, you need
to learn a variety of technologies, tools and techniques.Web designing refers to the skills
that are required to create and manage websites.Web design as a whole refers to designing
a user interface, authoring (programming)or a combination of both. Designing a website
requires multiple skills. However, it isrecommended to master and become skilled in one
particular technology once you geta taste of various technologies involved.
Following topics are covered in this module:
HTML & CSS
Web Authoring Tools, Microsoft Expression Web
Overview of Client-side & Server-side scripting, JavaScript & VBScript
A number of markup languages such as HTML, DHTML, XML are used to create webbased
content. Apart from these, software products such as FrontPage, Dream Weaveretc are also
used to develop web based content. Web based applications are built using technologies
such as ASP (Active Server Pages), JSP (Java Server Pages), PHP (Hypertext Preprocessor),
ASP.net etc.
HTML or Hypertext Markup Language is a language used for created web pages that can be
viewed in a web browser.
Hyper - means active and all over the place! When you use a Web browser, youcan
move all over the place, without a specified order as to how to access pages/sites.
Text - You will be working with text files only.
o
o
o
o
o
Web Publishing
Understanding HTML
Digital Content Creation
Web Designing Fundamentals
Unit 5
79
Information Technology Level -2
80
o
o
Markup - To create a Web page, you will type in the text and then ?Mark up? the text.
Language - This is a method of creating something or communicating and in this case,
you are creating Web pages using a particular syntax.
HTML elements are the building blocks of a website. Web browsers interpret the
tagswritten in HTML and display a web page.
Hypertext refers to the text that can be linked to another text or page which a usercan
access. Hypertext is the underlying concept behind the World Wide Web.
HTML is developed and maintained by World Wide Web Consortium abbreviated asW3C.
When HTML was first released, there were a handful of tags available and usedfor basic
web page structures. As time evolved, several new tags and attributes wereintroduced.
Popular HTML versions include HTML 4.01 and HTML 5.0.
All you need is a text editor such as notepad to create a web page using HTML. HTML files
have the extension .htm or .html. You can open the web pages using web browsers such as
Mozilla Firefox, Internet Explorer, Google Chrome, etc.
Web browsers have the ability to display the source code used for a web page. You can use
this to enhance your knowledge To view the code, do the following:
1.
Open the Web Browser and right-click anywhere in the web page and select View
Page Source from the context menu similar to the one below:
2.
Notice, the source code of the web page is visible with different color codes.
The colors have no meaning in terms of function and are only used to differentiate
different sets of code.
You can save web pages for future reference using the following procedure:
1.
Select File > Save Page As…
2.
Type a file name and click Save.
When you work with a document, you create headings, sub-headings, tables, etc. to give the
document a structure. Similarly in HTML, tags or elements are used to create a web pages'
structure.
Designing Web pages using HTML
Viewing Source Code
Saving a web page
HTML Elements & Attributes - The Basics
Information Technology Level -2
81
Look at an example of an online magazine. Online magazines have articles with text
content, images, videos, links or continuation to related articles, advertisements, etc. They
appear as a single web page to visitors. Have you noticed that the headings are of varying
sizes to indicating topics and sub-topics and different from the content?
All this formatting is possible using combinations of several HTML elements.
Elements have content placed between a start tag and an end tag. Tags act as containers for
text, images and other types of content. Tags start an opening tag and end with a closing
tab, using angle brackets (<>) to define the structure.
Note: To learn to use the tags, throughout this document, you will find examples of code
displayed within dotted boxes. Copy it in a text editor, save it in your local computer and view
using web browsers.
HTML uses tags enclosed in angle brackets; most tags are used in pairs such as
<html></html>, etc. Following is a simple example of HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<p>Hello World!</p>
<!--this is an example of simple HTML code created using Notepad-->
</body>
</html>
Elements & Attributes
Writing your First HTML Code
Information Technology Level -2
82
In the above mentioned code, there are a few HTML tags used. All HTML documents start
with <html> and end with </html>. The rest of the document contains other elements
and web page content placed using elements.
Document type or DOCTYPE is an element used for indicating the version of HTML
used in a web page. This is used by the web browser to apply a set of rules for
understanding the document structure.
HTML element indicates the start and end of an HTML document. <HTML> indicates
the beginning of this HTML document and </HTML> indicates the end.
HTML is also the root of an HTML document and has two parts, Head and Body
elements.
Head element represents the header section of a document and contains
information about a web page. Head elements start with <head> and end with
</head>. This element includes all other elements that need to be executed or
understood before the content (included in the body element) is displayed to the
user.
Content placed within the <Title> and </Title> element is displayed as the title of a
web page and used by search engines to create indexes of content.
Body element represents the section that contains body content and is displayed
in the web browser. Most HTML elements are used within the body element
between <body> and </body> tags.
If you want to place hidden text in a web page, you can use the comment element (<!--
> and <--> tags). Text placed using comment element will not be displayed in a web
browser but can seen when viewing the source code. This is useful to developers or
users who would like to share their experience in writing HTML code but hide the
text from general visitors.
Attribute are used to provide additional information about an element. Attribute contains
values and some elements use multiple attributes.
o
o
o
o
?
?
HTML Attributes
Information Technology Level -2
83
Nesting
Text formatting
You can nest other elements within elements. Elements nested within another element are
referred to as a child elements and the nesting element is referred to as a parent element.
When you nest elements, you need to ensure the elements are used in proper order.
Observe the correct way of using opening and closing tags illustrated in the figure below:
You can format the text content of a web page to make it attractive by using other HTML
elements such as Headings, Bold, Italics, etc.
Heading
There are six levels of heading elements from H1 to H6. H1 has the
largest text size and H6 has the smallest heading text size.
Emphasize
To emphasize a particular text in a sentence (for example a text that
should be pronounced different), use this element. Text enclosed
within <em> and <lem> are displayed in italics.
Italics
If you want the text to be displayed in alternate voice such as a text
translated from a foreign language, technical words or present text
in typographic italics, enclose the text within <i> and </i> elements.
Html Elements & Attributes - Text Formatting
Element
Description
Information Technology Level -2
84
Strong
If you want to emphasize a text with stronger importance in a
sentence, use the strong element. Text enclosed within <strong> and
</strong> are displayed in bold.
Bold
To make the text such as keywords visually bold, enclose the text
within <b> and </b>, the bold element.
Underline
To underline the text, enclose the text within <u> and </u>, the
underline element.
Mark
To highlight the text in a sentence, enclose the text within mark
element: <mark> and </mark>
Big
If you want to display a particular text in a sentence bigger than rest
of the text in a sentence, enclose the text within the big element :
<big> and </big>.
Small
To display a particular text in a sentence as smaller than the rest of
the text in a sentence, enclose the text within the small element:
<small> and </small>.
Subscript &
Text enclosed within <sub> and </sub> are displayed as subscripts
superscripts
and Text enclosed within <sup> and </sup> are displayed as
superscripts.
Pre
Text enclosed using <pre> and </pre> tags are displayed as it is (in
the example below - using a mono-space font such as Courier)
INS & DEL
Text enclosed within <del> and </del> are displayed as struck out
while text enclosed within <ins> and </ins> is underlined.
Break
To separate single lines or use multiple line spacing, use the break
element. Breaks between lines are represented through use of <br>.
No closing tag is needed.
HR
To separate sections, use a horizontal line to indicate
distinctiveness. Horizontal line is indicated through use of <hr>
element and requires no closing tag.
<!DOCTYPE html>
<html>
<head>
Sample Code - Text Elements
Information Technology Level -2
85
<title>Learn HTML</title>
</head>
<body>
<p> HTML supports six levels of headings, H1 to H6 with H1 being the largest.</p>
<h1>Main Heading</h1>
<h2>Sub heading, Level 1</h2>
<h3>Sub heading, Level 2</h3>
<h4>Sub heading, Level 3</h4>
<h5>Sub heading, Level 5</h5>
<h6>Sub heading, Level 6</h6>
<p> You are required to <em>agree</em> with our terms and conditions.</p>
<p> <i>HTML</i> is simple to learn.</p>
<p>It is important to know the common <strong>HTML Elements and attributes.
</strong></p>
<p>This an example of text displayed in <b>bold</bold>.</p>
<p>This an example of text displayed <u>underlined</u>.</p>
<p>This is an example of highlighted <mark>text.</mark></p>
<p><big>Sun</big> is the largest of all planets with 696,000 KM as it’s radius.</p>
<p><small>Mercury</small> is the smallest planet in the Solar System ever since Pluto
lost its status and was reclassified as a dwarf planet.</p>
<p>this is an example of subscript for a formula, H<sub>2</sub>O</p>
<p>this is an example of superscript for a formula, (A+B)<sup>2</sup></p>
<pre>
/* Hello World program */
#include<stdio.h>
main()
{
printf("Hello World");
}
</pre>
<p>this is the correct spelling of <del>entreprenaur</del>
<ins>entrepreneur</ins></p>
</body>
</html>
Information Technology Level -2
86
Referencing Elements
Sample Code - Referencing Elements
Element
Description
Quote
To include short text such as name of an author, publisher, etc. in
quotes, use the quote element. You can also use the cite attribute to
indicate the source. Text included within <q> and </q> is displayed
within quotations.
Blockquote
To include lengthy quotes, include text within <blockquote> and
</blockquote> elements.
Cite
To specify a tile of a work such as title of a book, movie, painting, etc.
include text within <cite> and </cite> elements.
Abbreviation To include abbreviations of acronyms, include the abbreviation
between <abbr> and </abbr> elements. Text included within this
element will be displayed when the cursor is moved over the text.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<p>HTML Tutorial
<q>Created by Author Name</q>
<blockquote cite="http://en.wikipedia.org/wiki/Google_Analytics"> Google Analytics (GA)
is a service offered by Google that generates detailed statistics about a website's traffic and
traffic sources and measures conversions and sales.</blockquote>
<p>You can learn more about web design at <cite>
http://en.wikipedia.org/wiki/Web_design</cite>
<p><abbr title=" Hypertext Markup Language">HTML</abbr> has several elements and
attributes. </p>
</p>
</body>
</html>
Information Technology Level -2
87
Tables
Images
You can create a table using the Table Element. Tables are made of rows and
columnssimilar to that of a spreadsheet. Rows are contained within table row element
<tr> and data is stored within row element <td>.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<table>
<tr><td>Name</td><td>Age</td><td>City</td></tr>
<tr><td>Anand</td><td>17</td><td>Delhi</td></tr>
<tr><td>Rohit</td><td>23</td><td>Bangalore</td></tr>
</table>
</body>
</html>
You can include images in your web page by using the <img> image element. Use the SRC
attribute to specify the location of the image and width and height attributes to specify the
dimensions of the image. Also it is a recommended practice to use the ALT attribute for
displaying text if the image is not downloaded.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<img src="HTML5-logo.png" alt="HTML 5 Logo, is not displayed due to an error.
Please reload this page or contact the website administrator" width="300"
height="300">
</body></html>
Information Technology Level -2
88
Working with Audio, Video & Flash
Element
Description
Audio
To include an audio clip, enclose the audio within the <audio> and
</audio> elements and point to the clip using SRC attribute. To
automatically play the audio, use the autoplay attribute. To display
controls, use the controls attribute.
Video
To include a video clip, enclose the audio within the <video> and
</video> elements and point to the clip using SRC attribute. Also use
width and height attributes to specify the dimenstions of a video clip.
Flash
To embed a flash animation, use the <embed> and </embed>
elements and point to the animation using SRC attribute.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<audio src="pump_im.mp3" autoplay controls>
Your browser does not support the audio element.
</audio>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<video src="sample_mpeg4.mp4" height="320" width="200" controls>
Your browser does not support the Video element.
</video>
</body>
</html>
Information Technology Level -2
89
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<embed src="sample.swf" height="200" width="320">
</body>
</html>
You can also include videos from other sources such as youtube.com, etc. To include a video
from youtube.com, do the following:
1.
Go to Youtube.com
2.
Select a video clip
3.
Right-click on the video and select Copy embed html
Write the code within <body> and </body> section (sample below).
.<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
</head>
<body>
<iframe width="640" height="360"
src="http://www.youtube.com/embed/v4oN4DuR7YU?feature=player_detailpage"
frameborder="0" allowfullscreen></iframe></body>
</html>
Now save and open this web page using a web browser.
Note: Refer to Youtube.com FAQ' for detailed instructions.
Information Technology Level -2
90
Html Elements & Attributes - Forms & Frames
Forms
Sample Code - Forms
Forms contain input elements such as text boxes, dropdown menus, check boxes, radio
buttons, etc. to collect information from visitors and sent to a web server for further
processing such as displaying search results or send to a database for storage.
Forms are created using <form> element along with action and method attributes.
Action attribute is used for specifying the URL to where the data needs to be submitted.
Method attribute is used for specifying the HTTP method, get or post.
POST attribute is used for storing or updating a database or for sending emails and GET
attribute is used for retrieving data.
Form element uses text boxes to collect text information and radio buttons, check boxes
and dropdown menus for collecting information through pre-defined options.
Textbox
Single-line text input box is typically used for collecting shorter text
such as usernames or passwords. Multiple-line text input boxes are
used for collecting lengtheir text such as narrative feedback, etc.
Radio Buttons Used for collecting single value from multiple values. You should use
type=radio attribute for using radio buttons in a web page.
Checkbox
Used for collecting multiple values. You should use type=checkbox
attribute for using checkboxes in a web page.
Dropdown
Used for collecting single or multiple values from a dropdown menu.
You should use the option attribute along with values to present
multiple options.
Submit
Submit button allows visitors to submit the value.
Reset
Reset button clears all the selections made.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title>
Control
Description
Information Technology Level -2
91
</head>
<body>
<p>Subscribe to your weekly Newsletter</p>
<form action="http://www.example.com/signup.asp" method="post">
Name <input type="name" name="Name" size="30">
Password <input type="password" name="Name" size="30">
<textarea rows="3" name="Comments" cols="30"></textarea>
<p>I agree to the Terms and Conditions.
<input type="radio" value="Agree" name="R1"> Yes
<input type="radio" value="Diagree" checked name="R1"> No</p>
<p>10th <input type="checkbox" name="Class_10" value="ON"> 12th
<input type="checkbox" name="Class_12" value="ON"> Bachelors Degree
<input type="checkbox" name="Bachelors_Degree" value="ON"> Masters Degree
<input type="checkbox" name="Masters_Degree" value="ON"></p>
<p>This is an example of Dropdown Menu (Single Selection)</p>
<p>School Education Board<select size="1" name="School">
<option>State Board</option>
<option>Matriculation</option>
<option>CBSE</option>
</select> </p>
<p>
<input type="submit" value="Submit" name="Submit">
<input type="reset" value="Reset" name="Reset"></p>
</form>
</body>
</html>
Frames are used to display one or more pages within a single web page; collections of
different frames are referred to as a frameset. Frames are used when you want to display
different pages as a single page in a web browser.
Frames
Information Technology Level -2
92
<html>
<frameset cols="25%,50%,25%">
<frame src="sample.htm">
<frame src="sample.htm">
<frame src="sample.htm">
<noframes>
Text to be displayed in browsers that do not support frames
</noframes>
</frameset>
</html>
iframe or inline frames is an element used for embedding another document or an URL
with a web page.
<!DOCTYPE html>
<html>
<head>
<title>Learn HTML</title></head>
<body>
<p>You can use iframe to include a web page.</p>
<iframe width="600" height="300" src="lesson002.htm"></iframe>
<hr>
<p>You can use iframe to view another website live.</p>
<iframe width="600" height="300" src="http://www.mozilla.org"></iframe>
<hr>
<p>You can restrict scrolling in iframe.</p>
<iframe width="600" height="300" src="http://www.wikipedia.org"
scrolling=no></iframe>
</body>
</html>
No comments:
Post a Comment