Let me design

2 | P a g e
Let Me Design
HTML Basics Guide
First Edition
Anurag Deb

3 | P a g e
To My parents
Smt. Mukta & Shri Animesh Deb
For their Blessings
&
Also to my loving friends & Angel

4 | P a g e
Introduction
This guide was designed to teach beginner web designers and programmers how
to use HTML. This guide is aimed to give newbies a little experience in writing
HTML code, saving their files correctly, and viewing the completed works in a web
browser. HTML may seem confusing or boring at first, but we will help you
understand how it works and by the end of the book you would be told about
how to make your first web home page for your website.

5 | P a g e
Brief HTML Background
Hypertext Markup Language (HTML) is the predominant markup language for web pages.
HTML elements are the basic building-blocks of web pages.
The first publicly available description of HTML was a document called "HTML Tags", first
mentioned on the Internet by Berners-Lee in late 1991.
Web Pages
Web pages have many uses. Here are some important facts about why web pages are so useful.
A cheap and easy way to spread information to a large audience.
Another medium to market your business.
Let the world know about you with a personal website!
Words to Know
Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to
interpret. Tags look like this: <tag>
Element - A complete tag, having an opening <tag> and a closing </tag>.
Attribute - Used to modify the value of the HTML element. Elements will often have
multiple attributes.
HTML (Hyper Text Markup Language)
Filename extension .html, .htm
Internet media type text/html
Type code TEXT
Uniform Type Identifier public.html
Developed by World Wide Web Consortium &
WHATWG
Type of format Markup language
Extended from SGML
Extended to XHTML
Standard(s) ISO/IEC 15445
W3C HTML 4.01
W3C HTML5 (draft)

6 | P a g e
For now just know that a tag is a command the web browser interprets, an element is a
complete tag, and an attribute customizes or modifies HTML elements.
HTML Elements
HTML elements exist on many levels. Everything you see in front of you, the paragraph texts,
the Anurag’s banner, and the navigation links on the left are all elements of this web page. An
element in HTML is a loose term that describes each individual piece of your web page.
An element consists of three basic parts: an opening tag, the element's content, and finally, a
closing tag.
1. <p> - opening paragraph tag
2. Element Content - paragraph words
3. </p> - closing tag
Every (web)page requires four critical elements: the html, head, title, and body elements.
The <html> Element...</html>
<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the
HTML code and describe the HTML document to the web browser. Remember to close your
HTML documents with the corresponding </html> tag at the bottom of the document.
If you haven't already, open up Notepad and have a new, blank document ready to go. Copy the
following HTML code into your text editor.
HTML Code:
<html>
</html>
Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down
box and select the option "All Files". When asked to name your file, name it "index.html",
without the quotes. Double check that you did everything correctly and then press save. Now
open your file in a new web browser so that you have the ability to refresh your page and see
your changes.
If you opened up your index.html document, you should be starring at your very first blank
(white) web page!

7 | P a g e
The <head> Element
The <head> element is "next" as they say. As long as it falls somewhere between your <html>
tag and your web page content (<body>), you're golden. The head functions "behind the
scenes." Tags placed within the head element are not directly displayed by web browsers. We
will be placing the <title> element here and we'll talk about the other possible elements in later
lessons.
Other elements used for scripting (Javascript) and formatting (CSS) will eventually be
introduced and you will have to place them within your head element. For now, your head
element will continue to lay empty except for the title element that will be introduced next.
Here's a sample of the initial set up.
HTML Code:
<html>
<head>
</head>
</html>
As of yet, we still have nothing happening on the web page. All we have so far is a couple of
necessary elements that describe our document to the web browser.
The <title> Element
Place the <title> tag within the <head> element to title your page. The words you write
between the opening and closing <title></title> tags will be displayed at the top of a viewer's
browser. Here's the html code:
HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
</html>
Save the file with .html or .htm file extension with type of file as all files selected and then open
it in your browser. You should see "My WebPage!" in the upper-left, as the window's title.

8 | P a g e
.
The <body> Element
The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the
menu on the left suggests, we will be looking at each of these elements in greater detail as the
tutorial progresses. For now, it is only important to understand that the body element will
encapsulate all of your webpage's viewable content.
HTML Code:
<html>
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>

9 | P a g e
HTML doctype
The HTML !doctype tag is used for specifying which version of HTML the document is using. This
is referred to as the document type declaration (DTD).
The HTML document type declaration starts off with <!doctype html public, followed information
on the HTML specification that the document conforms to.
HTML 4.01 has 3 possible doctypes: HTML 4 Strict, HTML 4 Transitional, and HTML 4 Frameset.
Every HTML document you create should have one of these three DTDs. The DTD you use will
depend on how strict you want your HTML to be and whether you are using frames or not.
HTML 4 Strict
This document type includes all HTML elements except those that have been deprecated, and
those that appear in frameset documents.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML 4 Transitional
This document type includes all HTML elements including those that have been deprecated.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
HTML 4 Frameset
This document type includes all HTML elements in the transitional DTD as well as those in
framed document.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">
HTML Comments Tag
The HTML 'comments' tag is used for creating comments within your HTML code.
Comments aren't displayed in the browser - they are simply there for the programmer's
benefit. Comments can assist you, the HTML programmer, because you can write notes to
yourself that explain what the code does. This is especially useful when you have a lot of code.
HTML comments are often used in conjunction with JavaScript. Programmers surround their
JavaScript code with HTML comments. The HTML comments tell browsers that don't support

10 | P a g e
JavaScript (or with JavaScript disabled) to ignore the code in between. This prevents the code
from being displayed to your users.
HTML Code
<h4>How to comment out your code</h4>

<p>This article demonstrates the HTML code to hide your comments.</p>
HTML Meta Tags
Meta tags are used to supply information for search engines that will not be seen by the web
surfer unless they were to view your web site's HTML. In the past, meta tags were a primary
way for your site to be recognized by web spiders, but the internet community abused the
meta tags to artificially increase their ranking in the search engine databases. Nevertheless, you
should still include meta for those search bots that do recognize them, allow your site to be
included in their search engine.
Keywords Meta Tag
Keywords or phrases are placed in this meta tag's content attribute. You should specify the
most popular search terms you believe someone would use to reach your web site. A few years
back, you could spam this meta tag with any and every keyword possible to gain ranking on
search engines. Repeated words, or words that do not pertain to the content of the site will not
benefit you or those using a search engine. Here's an example of proper usage for a site.
HTML Code:
<head>
<meta name="keywords" content="keyword, key keywords, etc" />
</head>
name defines what type of meta tag being used. Note that the keywords are separated by
commas.
An example of the keywords meta tag would be as follows.
HTML Code:
<head>
<meta name="keywords" content="HTML, XHTML, CSS, anurag" />
</head>

11 | P a g e
Description Meta Tag
As you might have guessed, this tag will show a brief description of the web page to a search
engine. Your description should be a sentence or two about your web site. Keywords that
appeared in the keyword meta tag should appear here as well.
HTML Code:
<head>
<meta name="description" content="Infoanu contains webmaster tutorials." />
</head>
Description and Keywords tags are very similar, and they should be. As mentioned above if they
do not match, you may be ignored or blocked by some search engines. Be careful.
Revised Meta Tag
The revised meta tag records when the last update was done to the site.
HTML Code:
<head>
<meta name="revised" content="Happy New Year: 1/1/2003" />
</head>
Refresh Page and Redirect
Later down the road, you may need to redirect traffic to another domain. A common reason
might be that you have just purchased a better domain name and would like to retain your old
visitors, yet still use your new domain. With the refresh meta tag you will be able to redirect
visitors to the web site of your choice.
HTML Code:
<head>
<meta http-equiv="refresh" content="10; url=http://www.infoanu.com" />
</head>
Above shows refreshing Infoanu's home page every 10 seconds. A quick refresh may be
necessary for news, stocks, or any other time-sensitive information. The most common use for

12 | P a g e
this type of meta tag, however, is redirection. To redirect a viewer automatically, just change
the URL to the new site as shown below. This code will send your visitors to espn.com after
being at your site for five seconds.
HTML Code:
<head>
<meta http-equiv="refresh" content="5; url=http://www.espn.com" />
</head>
HTML Scripts
There are two very popular scripts that are commonly used in HTML to make web pages come
alive. HTML javascript and HTML vbscript are very useful scripting languages to know, if you
have the time.With HTML scripts you can create dynamic web pages, make image rollovers for
really cool menu effects, or even validate your HTML form's data before you let the user
submit. However, javascript and vbscript are very complicated compared to HTML. It may be
simpler just to download someone elses scripting code and use it on your web page (if they
have given you permission to do so, of course!). HTML Javascript Code
If you want to insert javascript code into your HTML you are going to use the script tag. If you
would like to know more about javascript, check out our Javascript Tutorial. Below is the
correct code to insert embedded javascript code onto your site.
HTML Code:
<script type="text/javascript">

</script>
For javascript you set the type attribute equal to "text/javascript", which is similar to the
process of specifying CSS. We also include a comment around the javascript code. This will
prevent browsers that do not support javascript or have had javascript disabled from displaying
the javascript code in the web browser.
HTML Vbscript How To
To insert vbscript code onto your website you must once again make use of the script tag.
Below is the correct code to insert vbscript code onto your site.

13 | P a g e
HTML Code:
<script type="text/vbscript">

</script>
For vbscript you set the type attribute equal to "text/vbscript", which is similar to specifying
CSS. We also include a comment around the vbscript code. This will prevent browsers that do
not support vbscript or have had vbscript disabled from displaying the vbscript code in the web
browser.
HTML Tags
A web browser reads an HTML document top to bottom, left to right. Each time the browser
finds a tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables,
etc). Tags have 3 major parts: opening tag(s), content(s), and closing tag(s). Recall that a
completed tag is termed an element.
HTML Tags:
<body>Body Tag (acts as a content shell)
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>
Tags Without Closing Tags
There are a few tags that do not follow the mold above. In a way, they still have the 3 parts
(opening/closing and content). These tags however do not require a formal </closingtag> but
rather a modified version. The reason being that these tags do not really require any content.
Rather some of them just need a source URL and this is enough information for the web
browser to display the tag properly (image tags). Let's take a look at a line break tag.
HTML Code:
<br />
To tell the browser we want to place a line break (carriage return) onto the site, it is not
necessary to type <br>linebreak</br>. If every line break tag needed all three components as

14 | P a g e
other do, life would become redundant real quick. Instead the better solution was to combine
the opening and closing tags into a single format. Other tags have also been modified such as
the image tag and input tag.
Paragraph Tag <p>
Publishing any kind of written works requires the use of a paragraph. The paragraph tag is very
basic and a great introductory tag for beginner's because of its simplicity.
The <p> tag defines a paragraph. Using this tag places a blank line above and below the text of
the paragraph. These automated blank lines are examples of how a tag "marks" a paragraph
and the web browser automatically understands how to display the paragraph text because of
the paragraph tag.
HTML Code:
<p>Avoid losing floppy disks with important school...</p>
<p>For instance, let's say you had a HUGE school...</p>
Two HTML Paragraphs:

15 | P a g e
HTML - Paragraph Justification
Paragraphs can be formatted in HTML much the same as you would expect to find in a word
processing program. Here the align attribute is used to "justify" our paragraph.
HTML Code:
<p align="justify">For instance, let's say you had a HUGE school or work...</p>
<p align="center">For instance, let's say you had a HUGE school or work...</p>
<p align="right">For instance, let's say you had a HUGE school or work...</p>

16 | P a g e
HTML - Headings 1:6
A heading in HTML is just what you might expect, a title or subtitle. By placing text inside of
<h1> (heading) tags, the text displays bold and the size of the text depends on the number of
heading (1-6). Headings are numbered 1-6, with 1 being the largest heading and 6 being the
smallest.
HTML Code:
<body>
<h1>Headings……(h1)</h1>
<h2>are……(h2)</h2>
<h3>great……(h3)</h3>
<h4>for……(h4)</h4>
<h5>titles<……(h5)/h5>
<h6>and subtitles……(h6)</h6>
</body>
Line Breaks
Line breaks are different then most of the tags we have seen so far. A line break ends the line
you are currently on and resumes on the next line. Placing <br /> within the code is the same as
pressing the return key in a word processor. Use the <br /> tag within the <p> (paragraph) tag.

17 | P a g e
HTML Code:
<p>
Anurag<br />
Pratap<br />
Deb Roy's LET ME DESIGN<br />
</p>
HTML Horizontal Rule
Use the <hr /> tag to display lines across the screen. Note: the horizontal rule tag has no ending
tag like the line break tag.
HTML Code:
<hr />
Use
<hr /><hr />
Them
<hr />
Sparingly
<hr />

18 | P a g e
HTML Lists
There are 3 different types of lists. A <ol> tag starts an ordered list, <ul> for unordered lists, and
<dl> for definition lists. Use the type and start attributes to fine tune your lists accordingly.
<ul> - unordered list; bullets
<ol> - ordered list; numbers
<dl> - definition list; dictionary
HTML Ordered Lists
Use the <ol> tag to begin an ordered list. Place the <li> (list item) tag between your opening
<ol> and closing </ol> tags to create list items. Ordered simply means numbered, as the list
below demonstrates.
HTML Code:
<h4 align="center">Goals</h4>
<ol>
<li>Find a Job</li>
<li>Get Money</li>
<li>Move Out</li>
</ol>
Numbered list:

19 | P a g e
Start your ordered list on any number besides 1 using the start attribute.
HTML Code:
<h4 align="center">Goals</h4>
<ol start="4" >
<li>Buy Food</li>
<li>Enroll in College</li>
<li>Get a Degree</li></ol>
HTML Ordered Lists Continued
There are 4 other types of ordered lists. Instead of generic numbers you can replace them with
Roman numberals or letters, both capital and lower-case. Use the type attribute to change the
numbering.
HTML Code:
<ol type="a">
<ol type="A">
<ol type="i">
<ol type="I">
Ordered List Types:
Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals
a. Find a Job
b. Get Money
c. Move Out
A. Find a Job
B. Get Money
C. Move Out
i. Find a Job
ii. Get Money
iii. Move Out
I. Find a Job
II. Get Money
III. Move Out

20 | P a g e
HTML Unordered Lists
Create a bulleted list with the <ul> tag. The bullet itself comes in three flavors: squares, discs,
and circles. The default bullet displayed by most web browsers is the traditional full disc.
HTML Code:
<h4 align="center">Shopping List</h4>
<ul> <li>Milk</li>
<li>Toilet Paper</li>
<li>Cereal</li>
<li>Bread</li></ul>
HTML Code:
<ul type="square">
<ul type="disc">
<ul type="circle">
Unordered List Types:
type="square" type="disc" type="circle"
 Milk
 Toilet Paper
 Cereal
 Bread
Milk
Toilet Paper
Cereal
Bread
o Milk
o Toilet Paper
o Cereal
o Bread

21 | P a g e
HTML Definition Term Lists
Make definition lists as seen in dictionaries using the <dl> tag. These lists displace the term
word just above the definition itself for a unique look. It's wise to bold the terms to displace
them further.
<dl> - defines the start of the list
<dt> - definition term
<dd> - defining definition
HTML Code:
<dl>
<dt><b>Fromage</b></dt>
<dd>French word for cheese.</dd>
<dt><b>Voiture</b></dt>
<dd>French word for car.</dd>
</dt>
HTML - Formatting Elements w/ Tags
As you begin to place more and more elements onto your web site, it will become necessary to
make minor changes to the formatting of those elements. Several tags exist to further amplify
text elements. These formatting tags can make text bold, italic, sub/superscripted, and more.
Formatting Tags
HTML - Bold
Creating bold text can be accomplished through the use of the <b> bold tag.
HTML Code:
<b>This text is entirely BOLD!</b>

22 | P a g e
HTML - Italic(s)
The italics tags should be used to highlight a key word or phrase. These tags are not intended to
to stylize or shape your face. Rather, use them to emphasize text or words.
HTML Code:
Italic <i>tag</i>!
<em>Emphasized</em> Text!
Create a <blockquote>blockquote</blockquote>!
Format your <address>addresses</address>!
HTML - Code <code>
The code tag allows you to specify some of your text as computer code. This simply changes the
font face, size, and letter spacing to give the text the feel of being computer code.
You may have noticed that nearly all of our examples thus far use the computer code tag when
displaying each HTML Code example.
HTML Code:
This text has been formatted to be computer <code>code</code>!
HTML - <pre> Preformatting
A web browser interprets your html document as being one long line. Sure, you may have tabs
and line breaks in notepad aligning your content so it is easier to read for you the web master
your browser ignores those tabs and line breaks.
We showed you one way to get around this by using the ltbr /> tag. Tabs and spacing are quite
different, and absolutely annoying at times. One simple solution might be to use the <pre> tag,
standing for previously formatted text.
Use the <pre> tag for any special circumstances where you wish to have the text appear exactly
as it is typed. Spaces, tabs, and line breaks that exist in your actual code will be preserved with
the pre tag.

23 | P a g e
HTML Code:
<pre>
Roses are Red,
Violets are blue,
I may sound crazy,
But I love you!
</pre>
HTML - <sup> Superscript
Superscripted text can be placed onto your website using the <sup> tag. You may id these tags
for use with Cascading Style Sheets.
HTML Code:
<p>This text is <sup>superscripted!</sup></p>
HTML - Subscript
Use the subscript tags to place subscripted text onto your websites.
HTML Code:
<p>This text is <sub>subscripted!</sub></p>
HTML - Strikethrough
To place text onto your site that appears to be crossed out, we use the <del> tag.
HTML Code:
<p>This text is <del>scratched</del> out!</p>
HTML - Check Off Tasks
Here's an example of a web developer checking off tasks as they are performed.

24 | P a g e
HTML Code:
<ol>
<li>Clean my room</li>
<li><del>Cook Dinner</del></li>
<li><del>Wash Dishes</del></li>
</ol>
Bold, Italic and More
HTML Code:
<p>An example of <b>Bold Text</b></p>
<p>An example of <em>Emphasized Text</em></p>
<p>An example of <strong>Strong Text</strong></p>
<p>An example of <i>Italic Text</i></p>
<p>An example of <sup>superscripted Text</sup></p>
<p>An example of <sub>subscripted Text</sub></p>
<p>An example of <del>struckthrough Text</del></p>
<p>An example of <code>Computer Code Text</code></p>

25 | P a g e
HTML - Font and Basefont
The <font> tag is used to add style, size, and color to the text on your site. Use the size, color,
and face attributes to customize your fonts. Use a <basefont> tag to set all of your text to the
same size, face, and color.
Font Size
Set the size of your font with size. The range of accepted values is from 1(smallest) to
7(largest).The default size of a font is 3.
HTML Code:
<p>
<font size="5">Here is a size 5 font</font>
</p>
Font Color
Set the color of your font with color.
HTML Code:
<font color="#990000">This text is hexcolor #990000</font>
<br />
<font color="red">This text is red</font>
Font Face
Choose a different font face using any font you have installed. Default is Times New Roman.
HTML Code:
<p>
<font face="Bookman Old Style, Book Antiqua, Garamond">This paragraph
has had its font...</font>
</p>

26 | P a g e
HTML <dl> Tag
The <dl> tag defines a definition list. The <dl> tag is used in conjunction with <dt> (defines the
item in the list) and <dd> (describes the item in the list).
HTML Code:
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl>
HTML <abbr> Tag
The <abbr> tag describes an abbreviated phrase.
By marking up abbreviations you can give useful information to browsers, spellcheckers, screen
readers, translation systems and search-engines.
An abbreviation is marked up as follows:
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.

27 | P a g e
HTML - Links and Anchors
The web got its spidery name from the plentiful connections between web sites. These
connections are made using anchor tags to create links. Text, Images, and Forms may be used
to create these links.
HTML - Hypertext Reference (href)
The href attribute defines reference that the link refers to. Basically this is where the user will
be taken if they wish to click this link.
Hypertext references can be Internal, Local, or Global.
Internal - Links to anchors on the current page
Local - Links to other pages within your domain
Global - Links to other domains outside of your site
HTML Code:
Internal - href="#anchorname"
Local - href="../pics/picturefile.jpg"
Global - href="http://www.anuragdeb3.0fees.net/picturefile.jpg "
HTML - Text Links
Use the <a></a> tags to define the start and ending of an anchor. Decide what type of href
attribute you need and place this attribute into the opening tag. The text you place between
the opening and closing tags will be shown as the link on a page. Use the demonstration below
as a reference.
HTML Code:
<a href="http://www.google.com/" >Google Home</a>
<a href="http://www.anuragdeb3.0fees.net/" >My Blog Home</a>
<a href="http://www.yahoo.com/" >Yahoo Home</a>
HTML - Link Targets
The target attribute defines whether to open the page in a separate window, or to open the link
in the current browser window.

28 | P a g e
HTML Code:
target=" _blank" Opens new page in a new browser window
_self" Loads the new page in current window
_parent" Loads new page into a frame that is superior to where the link
lies
_top" Loads new page into the current browser window, cancelling
all frames
HTML - Email Links
Creating an email link is simple. If you want somebody to mail you about your site a good way
to do it is place an email link with a subject already in place for them.
HTML Code:
<a href="mailto:email@anuragdeb3.0fees.net?subject=Feedback" Email&body=This email is
from your website">Email me </a>

29 | P a g e
HTML Character Entities
An entity is a fancy term for a symbol. Several symbols such as copyright, trademark, or foreign
cash symbols exist outside of the ones you see on your keyboard.
HTML Code:
<p>
<br />
Greater than - > <br />
Body tag - <body>
</p>
<p>Everything that goes up, must come     down!</p>
© Copyright Reserved Anurag
Entities Meaning
< o Less than
> o Greater Than
&copy o Copyright Symbol
&nbsp o Space
HTML – Images
Images are a staple of any web designer, so it is very important that you understand how to use
them properly. Use the <img /> tag to place an image on your web page.
HTML Code:
<img src=" logo.png " />
HTML - Image src
Above we have defined the src attribute. Src stands for source, the source of the image or more
appropriately, where the picture file is located.
URL Types:
Local Src Location Description
src=" logo.png " picture file resides in same directory as .html file
src="../ logo.png " picture file resides in previous directory as .html file
src="../pics/ logo.png " picture file resides in the pic directory in a previous directory as
.html file

30 | P a g e
HTML - Alternative Attribute
The alt attribute specifies alternate text to be displayed if for some reason the browser cannot
find the image, or if a user has image files disabled.
HTML Code:
<img src=" logo.png” alt=”image1”/>
HTML - Image Height and Width
To define the height and width of the image, rather than letting the browser compute the size,
use the height and width attributes.
HTML Code:
<img src=" logo.png " height="50" width="100">
Vertically and Horizontally Align Images
Use the align and valign attributes to place images within your body, tables, or sections.
1. align (Horizontal)
o right
o left
o center
2. valign (Vertical)
o top
o bottom
o center

31 | P a g e
Images as Links
Images are very useful for links and can be created with the HTML below.
HTML Code:
<a href="http://anuragdeb3.0fees.net/">
<img src="logo.png">
</a>
HTML Forms
Forms are a vital tool for the webmaster to receive information from the web surfer, such as:
their name, email address, credit card, etc.
Text Fields
Before we teach you how to make a complete form, let's start out with the basics of forms.
Input fields are going to be the meat of your form's sandwich. The <input> has a few attributes
that you should be aware of.
type - Determines what kind of input field it will be. Possible choices are text, submit,
and password.
name - Assigns a name to the given field so that you may reference it later.
size - Sets the horizontal width of the field. The unit of measurement is in blank spaces.
maxlength - Dictates the maximum number of characters that can be entered.
method - We will only be using the post functionality of method, which sends the data
without displaying any of the information to the visitor.
action - Specifies the URL to send the data to. We will be sending our information to a
fake email address.

32 | P a g e
HTML Code:
<form method="post" action="mailto:youremail@email.com">
Name: <input type="text" size="10" maxlength="40" name="name"> <br />
Password: <input type="password" size="10"
maxlength="10" name="password"><br />
<input type="submit" value="Send">
</form>
HTML Radio Buttons
Radio buttons are a popular form of interaction. You may have seen them on quizzes,
questionnaires, and other web sites that give the user a multiple choice question. Below are a
couple attributes you should know that relate to the radio button.
value - specifies what will be sent if the user chooses this radio button. Only one value
will be sent for a given group of radio buttons (see name for more information).
name - defines which set of radio buttons that it is a part of. Below we have 2 groups:
shade and size.
HTML Code:
What kind of shirt are you wearing? <br />
Shade:
<input type="radio" name="shade" value="dark">Dark
<input type="radio" name="shade" value="light">Light <br />
Size:
<input type="radio" name="size" value="small">Small
<input type="radio" name="size" value="medium">Medium
<input type="radio" name="size" value="large">Large <br />
<input type="submit" value="Email Myself"></form>

33 | P a g e
HTML Check Boxes
Check boxes allow for multiple items to be selected for a certain group of choices. The check
box's name and value attributes behave the same as a radio button.
HTML Code:
Select your favorite cartoon characters.
<input type="checkbox" name="toon" value="Goofy">Goofy
<input type="checkbox" name="toon" value="Donald">Donald
<input type="checkbox" name="toon" value="Bugs">Bugs Bunny
<input type="checkbox" name="toon" value="Scoob">Scooby Doo
<input type="submit" value="Email Myself">
</form>
HTML Drop Down Lists
Drop down menues are created with the <select> and <option> tags. <select> is the list itself
and each <option> is an available choice for the user.
HTML Code:
College Degree?
<select name="degree">
<option>Choose One</option>
<option>Some High School</option>
<option>High School Degree</option>
<option>Some College</option>
<option>Bachelor's Degree</option>
<option>Doctorate</option>
<input type="submit" value="Email Yourself">
</select>
</form>

34 | P a g e
HTML Text Areas
Text areas serve as an input field for viewers to place their own comments onto. Forums and
the like use text areas to post what you type onto their site using scripts. For this form, the text
area is used as a way to write comments to somebody.
Rows and columns need to be specified as attributes to the <textarea> tag. Rows are roughly
12pixels high, the same as in word programs and the value of the columns reflects how many
characters wide the text area will be. i.e. The example below shows a text area 5 rows tall and
20 characters wide. Another attribute to be aware of is the wrap. Wrap has 3 values.
wrap=
o "off"
o "virtual"
o "physical"
Virtual means that the viewer will see the words wrapping as they type their comments, but
when the page is submitted to you, the web host, the document sent will not have wrapping
words.
Physical means that the text will appear both to you, the web host, and the viewer including
any page breaks and additional spaces that may be inputed. The words come as they are.
Off of course, turns off word wrapping within the text area. One ongoing line.
HTML Code:
<textarea rows="5" cols="20" wrap="physical" name="comments">
Enter Comments Here
</textarea>
<input type="submit" value="Email Yourself">
</form>

35 | P a g e
HTML Tables
Tables may seem difficult at first, but after working through this lesson you'll see how they
aren't too bad. The <table> tag is used to begin a table. Within a table element are the <tr>
(table rows) and <td> (table columns) tags. Tables are a handy way to create a site's layout, but
it does take some getting used to. Here's how to make a table.
HTML Code:
<table border="1">
<tr>
<td>Row 1 Cell 1</td><td>Row 1 Cell 2</td>
</tr>
<tr>
<td>Row 2 Cell 1</td>
</tr>
</table>
Spanning Multiple Rows and Cells
Use rowspan to span multiple rows and colspan to span multiple columns.
HTML Code:
<table border="1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
Cell Padding and Spacing
With the cellpadding and cellspacing attributes you will be able to adjust the white space on
your tables. Spacing defines the width of the border, while padding represents the distance
between cell borders and the content within. Color has been added to the table to emphasize
these attributes.

36 | P a g e
HTML Code:
<table border="1" cellspacing="10" bgcolor="rgb(0,255,0)">
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
<tr>
</tr>
<tr>
</tr>
</table>
HTML Color - bgcolor
The bgcolor attribute is used to control the background of an HTML elmement, specifically page
and table backgrounds. Bgcolor can be placed within several of the HTML tags.
Syntax
<TAGNAME bgcolor="value">
Quick and dirty, here is how to change the background of your web page. Just use the bgcolor
attribute in the <body> tag and you are golden.

37 | P a g e
HTML Code:
<html>
<body bgcolor="Silver">
<p>We set the background...</p>
</body>
</html>
Adding Color to Your Tables
This example shows how to add a background color for an entire table using generic values of
color.
HTML Code:
<table bgcolor="#CCCCCC" border="1">
<tr>
<td>India Vs Pakistan Match Who Will Win .</td>
</tr>
<tr bgcolor="#666666">
<td>India</td>
</tr>
<tr bgcolor="#999999">
<td>Pakistan</td>
</tr>
</table>

38 | P a g e
Background Color and Font Color
Check out this "Scoreboard" we made with the use of font color and bgcolor!
HTML Code:
<table bgcolor="#CCCCCC">
<tr>
<td bgcolor="#666666">
<font color="#FFFFFF" align="right">India</font>
</td>
<td><font color="#000000">14</font>
</td>
</tr>
<tr>
<td bgcolor="#99CCCC">
<font color="#000000" align="right">Pakistan</font>
</td>
<td><font color="#000000">14</font>
</td>
</tr>
</table>

39 | P a g e
Marquee
You can create a scrolling marquee (i.e. scrolling text or scrolling images) by using the
<marquee> tag. You can make the text/images scroll from right to left, left to right, top to
bottom, or bottom to top - it's your choice!
TIP: You can make it easy on yourself by using the marquee generator.
Slide-in text:
This text slides in from the right, then stays where it is. You will need to refresh this page to see
the effect again.
Continuous scrolling text:
Text bouncing back and forth:
Text Scrolling Upwards:
<marquee behavior="slide" direction="left">Your slide-in text goes here</marquee>
<p style="font-size:10px;"><a href="http://www.infoanu.com/html/codes/">HTML
code</a></p>
<marquee behavior="scroll" direction="left">
Your scrolling text goes here
</marquee>
code</a></p>
<marquee behavior="alternate">
Your bouncing text goes here</marquee>
<p style="font-size:10px;">
<a href="http://www.infoanu.com/html/codes/">HTML code</a>
</p>
<marquee behavior="scroll" direction="up">Your upward scrolling text goes
here</marquee>
<p style="font-size:10px;"><a href="http://www.quackit.com/html/codes/">HTML
code</a></p>

40 | P a g e
Change the Scrolling Speed:
Scrolling Images:
Simply replace the src="... part with the location of your own image.
Images & Text (Both Scrolling):
Simply add your text under the image tag (but still within the marquee tag).
HTML Frames
Frames allow for multiple ".html" documents to be displayed inside of one browser window at a
time. This means that one page has no content on it, but rather tells the browser which web
pages you would like to open.
<marquee behavior="scroll" direction="left" scrollamount="1">Slow scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="10">Medium scroll
speed</marquee>
<marquee behavior="scroll" direction="left" scrollamount="20">Fast scroll
speed</marquee>
code</a></p>
<marquee behavior="scroll" direction="left"><img src="/pix/smile.gif" width="100" height="100"
alt="smile" /></marquee>
<p style="font-size:10px;"><a href="http://www.infoanu.com/html/codes/">HTML code</a></p>
<marquee behavior="scroll" direction="left">
<img src="/pix/smile.gif" width="100" height="100" alt="smile" />
<p>Sample text under a <a
href="http://www.infoanu.com/html/codes/html_marquee_code.cfm">Marquee image</a>.</p>
<p style="font-size:10px;"><a href="http://www.infoanu.com/html/codes/">HTML code</a></p>
</marquee>

41 | P a g e
Frames - A Generic Frame Page
Frames are most typically used to have a menu in one frame, and content in another frame.
When someone clicks a link on the menu that web page is then opened on the content page.
Here is a classic example of a basic "index" frameset with a menu on the left and content on the
right.
HTML Code:
<html>
<head>
</head>
<frameset cols="30%,*"><frame src="menu.html"><frame src="content.html"></frameset>
</html>
Frame Set:
Here's the example: Frame Index
frameset - The parent tag that defines the characteristics of this frames page. Individual
frames are defined inside it.
frameset cols="#%, *"- Cols(columns) defines the width that each frame will have. In
the above example we chose the menu (the 1st column) to be 30% of the total page and
used a "*", which means the content (the 2nd column) will use the remaining width for
itself.
frame src="" -The location of the web page to load into the frame.
A good rule of thumb is to call the page which contains this frame information "index.html"
because that is typically a site's main page.
HTML Code:
<html>
<head>
</head>
<frameset border="1" frameborder="1" framespacing="0" rows="20%,*">
<frame src="header.html">
<frameset border="1" frameborder="1" framespacing="0" cols="30%,*">
<frame src="menu.html">
<frame src="contebt.html">
</frameset><noframes></noframes>
</html>

42 | P a g e
Frame Name and Frame Target
How nice would it be to make each menu link load into the content page? We do this by
naming each frame and setting the correct base target inside menu.html.
HTML Code:
<frameset rows="20%,*">
<frame name="title" src="title.html">
<frameset cols="30%,*">
<frame name="menu" src="menu.html">
<name="content" src="content.html">
</frameset>
HTML Code:
<html>
<head>
<base target="content">
</head>.
…
</html>

43 | P a g e
HTML - 
A comment is a way for you as the web page developer to control what lines of code are to be
ignored by the web browser.
There are three main reasons you may want your code to be ignored.
Writing notes or reminders to yourself inside your actual HTML documents.
Scripting languages such as Javascript require some commenting.
Temporarily commenting out elements especially if the element has been left
unfinished.
Use the last example place text inside your code and documents that the web browser will
ignore. This is a great way to place little notes to yourself or to remind yourself what pieces of
code are doing what.
HTML Code:
<img src="logo.png" height="100" width="200" />

44 | P a g e
As you can see comment syntax may be a little complicated, there is an opening and a closing
much like tags.

As a web developer often times you may have many works in progress, or elements that aren't
quite finished. In this case you may comment out an element until it is 100% ready for the site.
Below we have commented out an input form element since we are not quite ready to receive
input from our users.
HTML Code:

Now when we are ready to display that element, we can simply remove the comment tags and
our browser will readily display the element.
HTML Code:
<input type="text" size="12" />
Input Field:
Comment out elements and bits of code that you may want to recall and use at a later date.
Nothing is more frustrating than deleting bits of code only to turn around and recode them.

45 | P a g e
HTML - 
Scripting languages such as Javascript and VBScript must be commented out as well. You will
learn that once they are placed within the <script> tags, only then does the browser correctly
execute the scripts.
HTML Code:
<script>

</script>
HTML – Layout (With the use of tables)
HTML layout is very basic. Not many options exist with the body tag alone. Tables on the other
hand are the bread and butter of HTML layouts. Any element may be placed inside of a table
including tables themselves.
HTML Code:
<table cellspacing="1" cellpadding="0" border="0"
bgcolor="black" id="shell" height="250" width="400">
<tr height="50">
<td colspan="2" bgcolor="white">
<table title="Banner" id="banner" border="0">
<tr>
<td>Place a banner here</td>
</tr>
</table>
</td>
</tr>
<tr height="200">
<td bgcolor="white">
<table id="navigation" title="Navigation" border="0">
<tr>
<td>Links!</td>
</tr>
<tr>
<td>Links!</td>
</tr>

46 | P a g e
<tr>
<td>Links!</td>
</tr>
</table>
</td>
<td bgcolor="white">
<table title="Content" id="content" border="0">
<tr>
<td>Content goes here</td>
</tr>
</table>
</td>
</tr>
</table>
This approach is basic yet organized. Often times websites become too complex for the viewer
to follow. The code becomes complex rather fast, you will need to be sure to properly assign
height and width values to your tables as well. The more specific you are about heights and
widths, the less debugging you will have to perform.

47 | P a g e
HTML Code:
<table id="shell" title="Shell" height="250" width="400"
border="0" bgcolor="black" cellspacing="1" cellpadding="0">
<tr height="50"><td bgcolor="white">
<table title="banner" id="banner">
<tr><td>Banner goes here</td></tr>
</table>
</td></tr>
<tr height="25"><td bgcolor="white">
<table title="Navigation" id="navigation">
<tr><td>Links!</td>
<td>Links!</td>
<td>Links!</td></tr>
</table>
</td></tr>
<tr><td bgcolor="white">
<table title="Content" id="content">
<tr><td>Content goes here</td></tr>
</table>
</td></tr></table>

48 | P a g e
Why shouldn’t we Use Table for layouts
Readability of the code
I think it's the other way around. Most people understand HTML, few understand CSS.
 Tables are slower.
 A layout overhaul is easier without tables.
Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new
version of a web site only needs a new CSS file are not very likely.
That’s why we Use Div Tag
HTML - Div Element(s)
The <div> tag is nothing more than a container for other tags. Much like the body tag, Div
elements are block elements and work behind the scenes grouping other tags together. Use
only the following attributes with your div element, anything else should be reserved for CSS.
id
width
height
title
style
For the purpose of this example, we have included the style attribute in order to color our div
tag in order to bring a stronger visualization for our viewers.
HTML Code:
<body>
<div style="background: green">
<h5 >SEARCH LINKS</h5>
<a target="_blank" href="http://www.google.com">Google</a>
</div>
</body>
HTML - Div Layouts
When HTML first began, web creators only had two choices. A table layout, or frames. The div
element provides a 3rd alternative, since a div can contain any/every other type of html
element within its beginning and ending tag.

49 | P a g e
HTML Code:
<div id="menu" align="left" >
<a href="">HOME</a> |
<a href="">CONTACT</a> |
<a href="">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>This paragraph would be your content
paragraph with all of your readable material.</p>
</div>
HTML Div Layout:
Attribute Value Description
align left
right
center
justify
Deprecated. Use styles instead.
Specifies the alignment of the content inside a div
element
Standard Attributes
The <div> tag supports the following standard attributes:
Attribute Value Description
class classname Specifies a classname for an element
dir rtl
ltr
Specifies the text direction for the content in an
element
id id Specifies a unique id for an element

50 | P a g e
lang language_code Specifies a language code for the content in an
element
style style_definition Specifies an inline style for an element
title text Specifies extra information about an element
xml:lang language_code Specifies a language code for the content in an
element, in XHTML documents
HTML <object> Tag
The <object> tag is used to include objects such as images, audio, videos, Java applets, ActiveX,
PDF, and Flash.
The object element was intended to replace the img and applet elements. However, because of
bugs and a lack of browser support this has not happened.
The object support in browsers, depend on the object type. Unfortunately, the major browsers
use different codes to load the same object type.
Luckily, the object element provides a solution. If the object element is not displayed, the code
between the <object> and </object> tags will be executed. This way we can have several nested
object elements (one for each browser).
HTML Code:
<html>
<body>
<object width="400" height="400" data="helloworld.swf">
</object> </body></html>

51 | P a g e
HTML Music Codes
Inserting music onto a web page is relatively easy. In the past multiple tags had to be used
because browsers did not have a uniform standard for defining embedded media files.
However, I am glad to announce that this is a problem of the past and you will have a much
easier time then webmasters of the past.
HTML Embed
Music is inserted onto a web page with the use of the embed tag. There are other ways to link
to music, but embed is now considered the standard for inserting media. Below is an minimalist
example of the embed tag using the src attribute to define the media file's location.
HTML Code:
<embed src="O-Re-Piya.mp3" />
<p>Above is an embedded media player. To stop the music press stop/pause.</p>
Embed Attributes - Related to Display
To customize the appearance of the embedded media player be sure to set the following
attributes.
width - the width of the media player.
height - the height of the media player
hidden - if this value is true then the media player will not be displayed. We recommend
using this attribute only if you know that your visitors will not want the option to stop
the music that is playing on your web page. (Values are true/false)
Embed Attributes - Related to Functionality
To customize the functionality of the embedded media player be sure to set the following
attributes.
autostart - choose if the media file will start automatically
loop - sets the media file to repeat or not
volume - set the volume of the media file. The range is 0-100.
HTML - Video Codes
Videos can be embedded into your html documents (web pages) two different ways. One
method is to use the <embed /> tag to display your media file. The embed tag does not require
a closing tag. In fact, it works much like the image tag. A src attribute must be defined by the

52 | P a g e
correct URL (local or global) in order for the video file to be displayed correctly. Here is a look at
the embed tag with a global URL, feel free to use this URL while you practice.
HTML Code:
<embed src="deepti.wmv" autostart="false" />
How to make your Web Page
Now try to make this webpage. Can You?

53 | P a g e
The Line “Stop crime against poor community” is just an image and you can create it though MS
paint using some cool fonts and then save it in .jpg format (joint picture group)
Ok I know you can do it but to help you here is some code
<html>

54 | P a g e
<head>
<title>Be Human</title>
</head>
<body background="3.jpg">
<p><img src="header.png" width="680" height="99" /></p>
<table width="681" height="336" border="1" cellpadding="1" cellspacing="1"
bgcolor="#CCCCCC">
<tr>
<td width="89"><p>Home</p>
<p>About US</p>
<p>Donations</p>
<p>Contact Us</p>
</td>
<td width="579"><p>In 1992 when Clinton was running for president, he made a point of
leaving the campaign trail to go back to Arkansas for an execution, sending a strong message to
the American people that he was in full support of the death penalty. The victim was a mentally
retarded man named Ricky Ray Rector, who told the guards taking him from his cell to the
execution chamber that he was going to leave his dessert on the side of his bunk.
"I’m going to eat it after my execution," he said.</p>
<p>Every day, every hour, every minute.A political system that carries out criminal behavior
here at home can certainly carry out war crimes abroad.I am from Texas, a state that has
executed 180 out of the 560 killed in the US since the death penalty was reinstated in 1976,
more people that any other state in the country. There are 460 in Texas and over 3600 in the
US awaiting execution. I work with the Texas Coalition to Abolish the Death Penalty which
organizes against the death penalty and supports the men and women on death row in their
struggle to be treated with dignity and respect instead of racism, brutality, degradation and
physical and mental violence. If you remember nothing else that I say today, I want you to
remember that the death penalty in this country is a war crime. The death penalty is
racist.</p></td>
</tr>
<tr>
<td colspan="2" align="center">Designed By Shivani Tyagi </td>

55 | P a g e
</tr>
</table>
</body>
</html>

Let me design

More Related Content

What's hot (12)

Similar to Let me design (20)

More from Anurag Deb (8)

Recently uploaded (20)

Let me design