Let Me Design (For HTML Beginners)

Let Me Design
HTML Basics Guide First Edition
Anurag Deb
2|P a ge
To My parents Smt. Mukta & Shri Animesh Deb For their Blessings & Also to my loving friends & Angel
3|P a ge
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.
4|P a ge
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. HTML (Hyper Text Markup Language) Filename extension Internet media type Type code Uniform Type Identifier Developed by Type of format Extended from Extended to Standard(s) .html, .htm text/html TEXT public.html World Wide Web Consortium & WHATWG Markup language SGML XHTML ISO/IEC 15445 W3C HTML 4.01 W3C HTML5 (draft)
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.
5|P a ge
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 Anurags 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!
6|P a ge
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.
7|P a ge
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>
8|P a ge
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
9|P a ge
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>
10 | 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
11 | 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.
12 | 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
13 | 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:
14 | 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>
15 | 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.
16 | 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 />
17 | 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:
18 | 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 a. Find a Job b. Get Money c. Move Out Upper-Case Letters A. Find a Job B. Get Money C. Move Out Lower-Case Numerals i. ii. Find a Job Get Money Move Out Upper-Case Numerals I. II. Find a Job Get Money Move Out
iii.
III.
19 | 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" Milk Toilet Paper Cereal Bread
type="circle"
o o o o
Milk Toilet Paper Cereal Bread
Milk Toilet Paper Cereal Bread
20 | 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>
21 | 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.
22 | 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.
23 | 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>
24 | 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>
25 | 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.
26 | 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.
27 | 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>
28 | 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 < > &copy &nbsp
Meaning o Less than o Greater Than o Copyright Symbol 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 src=" logo.png " src="../ logo.png " src="../pics/ logo.png " Location Description picture file resides in same directory as .html file picture file resides in previous directory as .html file picture file resides in the pic directory in a previous directory as .html file
29 | 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
30 | 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.
31 | 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:
<form method="post" action="mailto:youremail@email.com"> 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>
32 | 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:
<form method="post" action="mailto:youremail@email.com"> 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:
<form method="post" action="mailto:youremail@email.com"> 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>
33 | 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 o o
"off" "virtual" "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:
<form method="post" action="mailto:youremail@email.com"> <textarea rows="5" cols="20" wrap="physical" name="comments"> Enter Comments Here </textarea> <input type="submit" value="Email Yourself"> </form>
34 | 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> <td>Row 2 Cell 2</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.
35 | 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> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </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.
36 | 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>
37 | 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>
38 | 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. <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>
Continuous scrolling text:

<marquee behavior="scroll" direction="left"> Your scrolling text goes here </marquee> <p style="font-size:10px;"><a href="http://www.infoanu.com/html/codes/">HTML code</a></p>
Text bouncing back and forth:

<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>
Text Scrolling Upwards:

<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>
39 | P a g e
Change the Scrolling Speed:

<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> <p style="font-size:10px;"><a href="http://www.infoanu.com/html/codes/">HTML code</a></p>
Scrolling Images:
Simply replace the src="... part with the location of your own image.
<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> Images & Text (Both Scrolling):
Simply add your text under the image tag (but still within the marquee tag).
<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>
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.
40 | 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>
41 | 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>
42 | 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" />
43 | 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.
44 | 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> <!-document.write("Hello World!") //--> </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>
45 | 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.
46 | 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>
47 | P a g e
Why shouldnt 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.
Thats 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.
48 | 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 align
Value left right center justify
Description 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 class dir id Value classname rtl ltr id Description Specifies a classname for an element Specifies the text direction for the content in an element Specifies a unique id for an element
49 | P a g e
lang style title xml:lang
language_code style_definition text language_code
Specifies a language code for the content in an element Specifies an inline style for an element Specifies extra information about an element 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>
50 | 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
51 | 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?
52 | 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>
53 | 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>
54 | P a g e
</tr> </table> </body> </html>
55 | P a g e
Best Of Luck
56 | P a g e

Let Me Design (For HTML Beginners)

Caricato da

Informazioni sul documento

Copyright

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Let Me Design (For HTML Beginners)

Caricato da

Copyright:

Let Me Design

HTML Basics Guide First Edition

Brief HTML Background

The <html> Element...</html>

The <head> Element

The <title> Element

The <body> Element

HTML Comments Tag

HTML Meta Tags

Keywords Meta Tag

Description Meta Tag

Revised Meta Tag

Refresh Page and Redirect

HTML Vbscript How To

Tags Without Closing Tags

Paragraph Tag <p>

Two HTML Paragraphs:

HTML - Paragraph Justification

HTML - Headings 1:6

HTML Horizontal Rule

HTML Ordered Lists

HTML Ordered Lists Continued

Ordered List Types:

HTML Unordered Lists

Unordered List Types:

type="disc" Milk Toilet Paper Cereal Bread

Milk Toilet Paper Cereal Bread

Milk Toilet Paper Cereal Bread

HTML Definition Term Lists

HTML - Formatting Elements w/ Tags

HTML - Code <code>

HTML - <pre> Preformatting

HTML - <sup> Superscript

HTML - Check Off Tasks

Bold, Italic and More

HTML - Font and Basefont

HTML <dl> Tag

HTML <abbr> Tag

HTML - Links and Anchors

HTML - Hypertext Reference (href)

HTML - Text Links

HTML - Link Targets

HTML - Email Links

HTML Character Entities

Entities &lt; &gt; &copy &nbsp

Meaning o Less than o Greater Than o Copyright Symbol o Space

HTML - Image src

HTML - Alternative Attribute

HTML - Image Height and Width

Vertically and Horizontally Align Images

HTML Radio Buttons

HTML Check Boxes

HTML Drop Down Lists

HTML Text Areas

"off" "virtual" "physical"

Spanning Multiple Rows and Cells

Cell Padding and Spacing

HTML Color - bgcolor

Adding Color to Your Tables

Background Color and Font Color

Continuous scrolling text:

Text bouncing back and forth:

Text Scrolling Upwards:

Change the Scrolling Speed:

Frames - A Generic Frame Page

Frame Name and Frame Target

HTML -

Entities < > &copy &nbsp