Beginner Tutorial - First Webpage

beginner's web site creating guide
Welcome to Tizag.com's introduction to HTML and web design. This short tutorial 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. Regrettably this tutorial cannot teach you the basics of using a computer, so please be sure that you meet the following requirements:

Advertise on Tizag.com

Know what notepad is and how to use it Are able to open up a file using Internet Explorer (or the browser of your choice) Know how to copy and paste text from a webpage (important!). If you are lacking the ability of the aforementioned items please contact a local geek and ask nicely for a quick lesson.

tutorial overview
In this tutorial you will be transcribing code into notepad and then viewing it with a web browser. The code is called HTML (Hyper Text Markup Language) and notepad is a commonly used text editor on Window PCs. HTML may seem confusing at first, but we will help you understand how it works in this step-by-step tutorial of how to make your first web page.

your first web page
To start off with copy the following HTML code into notepad. Be sure to copy the code exactly, otherwise your web page may not function correctly.

HTML Code:
<html> <head> </head> <body> <h2>My first webpage!</h2> </body> </html>

The above code is all that is required to create a basic web page! Now save your file in notepad by selecting Menu and then Save. Click on the Save as Type drop down box and select the option All Files.

http://www.tizag.com/beginnerT/[19/08/2012 10:01:49 AM]

Beginner Tutorial - First Webpage

When asked to name your file, type "index.html", without the quotes. Double check that you did everything correctly and then press save. Remember where it was saved to because you will need to open this file, soon!

viewing your web page - web browsers
To view your web page, you are going to have to use a web browser (of course). Web browsers are programs that interpret HTML, like what you have just copied into notepad, and transform that code into a visual representation, or a web page. Common web browsers include:
Internet Explorer FireFox Opera

Netscape Navigator - R.I.P.

viewing your page
To view your web page, you must open the "index.html" file inside of a web browser. Open up another browser window and then follow these instruction. 1. 2. 3. 4. In the new browser window, select File then Open Then click Browse to enter Windows Explorer Do you remember where you file is? Good, then navigate to its location When you find your file, index.html, double-click the file to open it inside your web browser Success! You have just viewed your very first webpage. If this did not work for you, please go through the steps again and follow the directions closely. If you still can't get this to work, please Contact Us and we will get you up and running.

first web page - review
Very good! Now let's be sure that you remember what you learned in this lesson. 1. how to copy some weird looking text (HTML) into notepad 2. how to correctly save this weird text in notepad 3. how to open your saved file and view the your webpage

Continue

tips
Crimson Editor is a small, simple-text program that has features notepad does not. Such features include: spellcheck, code highlighting (you'll like this!), ability to open multiple files, and a more sophisticated undo feature. It is easy to set up and it is free! Visit CE.com (However, using notepad is also OK).

You may have heard of FrontPage, Dreamweaver, and other WYSIWYG programs (What You See Is What You Get). Though these programs will let you create pages quickly, you will soon learn there are many advantages to knowing how to code HTML. Spicing up or polishing up HTML effects can only be done manually. Ever wonder what a website's designer did to get that awesome look it has? You can view a websites source

http://www.tizag.com/beginnerT/[19/08/2012 10:01:49 AM]

Beginner Tutorial - First Webpage

(HTML) and if you know HTML you'll understand how they did it. On any browser, select the view command, scroll down and select 'view source' to see the HTML code for the site you are currently viewing.

found something wrong in this lesson?
Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

http://www.tizag.com/beginnerT/[19/08/2012 10:01:49 AM]

These tags are telling the browser that certain tags are ending. You have probably noticed a pattern of various words that are surrounded with < and >. The second HTML tag. Body is also an example of one of the required HTML tags that every web page must have. while the </html> tells the browser that your HTML file is finished. If an HTML tag is opened within another. The "/" that is placed before the tag's name informs the browser that you would like to stop using the specified tag. We ended the body tag first because it was opened most recently.</tag> You might be wondering what is the deal with the two tags at the end. which conviently is labled <html> tells the browser that your HTML code is starting. The Body tag tells the browser where the page's content begins. html tag order . closing tags . </body> and </html>. The </body> lets the browser know that your content is ending. let us examine the different segments of your "index. for example the body tag is opened inside the html tag. Advertise on Tizag. <tag> is used to begin a tag and </tag> is used to end a tag.HTML Tags your second web page Now that you have created your first webpage.com/beginnerT/tagsIntro.important! The order that opening tags appear and ending tags appear follow an important rule.Beginner Tutorial . These items are called HTML tags.php[19/08/2012 10:02:59 AM] . If you create a web page without these tags you will be in trouble! HTML Code: <html> <body> Your site's content goes here </body> </html> The first HTML tag. so how about you create your second web page? Copy this code into http://www. basic html tag information Let's learn more about these tags.com An example of an html tag is <body>. then that tag(body) must close before the outter(html) tag is closed.html" file. A basic web page is composed of 2 main tags. This rule of "closing the most recent tag before closing older tags" applies to all HTML tags. continue along These ideas might take a while to sink in. <body> tells the browser that the visible part of the webpage ( your content ) is going to start.tizag.

com/beginnerT/tagsIntro. following the same directions. that is OK. HTML Code: <html> <head> <title>My Own Webpage!</title> </head> <body> <h2>Welcome to my webpage</h2> <p>Coming soon will be my completed webpage that will wow and impress you!</p> </body> </html> After you are sure that your HTML code inside notepad is exactly the same as our provided HTML code. Ads by Google Tutorials Seo Tutorial CSS Tutorial HTML Tutorial Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson . You may be prompted that you will be saving over a file.Your input is what keeps Tizag improving with time! http://www.html".Beginner Tutorial . like you did before. go ahead and save your file.tizag. When you are done.php[19/08/2012 10:02:59 AM] . you do not need your 1st web page anymore. please continue. You should be saving this file as "index.HTML Tags notepad.

basic html tag information Let's learn more about these tags. for example the body tag is opened inside the html tag. We ended the body tag first because it was opened most recently. closing tags . while the </html> tells the browser that your HTML file is finished.html" file. These tags are telling the browser that certain tags are ending. html tag order . These items are called HTML tags. </body> and </html>.com/beginnerT/tagsIntro. Advertise on Tizag. which conviently is labled <html> tells the browser that your HTML code is starting. The </body> lets the browser know that your content is ending. let us examine the different segments of your "index. This rule of "closing the most recent tag before closing older tags" applies to all HTML tags.HTML Tags your second web page Now that you have created your first webpage. The "/" that is placed before the tag's name informs the browser that you would like to stop using the specified tag. If an HTML tag is opened within another. The second HTML tag. so how about you create your second web page? Copy this code into http://www.tizag. Body is also an example of one of the required HTML tags that every web page must have.Beginner Tutorial . <body> tells the browser that the visible part of the webpage ( your content ) is going to start.</tag> You might be wondering what is the deal with the two tags at the end. You have probably noticed a pattern of various words that are surrounded with < and >.com An example of an html tag is <body>. then that tag(body) must close before the outter(html) tag is closed.important! The order that opening tags appear and ending tags appear follow an important rule.php[19/08/2012 10:05:45 AM] . If you create a web page without these tags you will be in trouble! HTML Code: <html> <body> Your site's content goes here </body> </html> The first HTML tag. <tag> is used to begin a tag and </tag> is used to end a tag. continue along These ideas might take a while to sink in. The Body tag tells the browser where the page's content begins. A basic web page is composed of 2 main tags.

Your input is what keeps Tizag improving with time! http://www. You may be prompted that you will be saving over a file. you do not need your 1st web page anymore.HTML Tags notepad. HTML Code: <html> <head> <title>My Own Webpage!</title> </head> <body> <h2>Welcome to my webpage</h2> <p>Coming soon will be my completed webpage that will wow and impress you!</p> </body> </html> After you are sure that your HTML code inside notepad is exactly the same as our provided HTML code.com/beginnerT/tagsIntro.html". When you are done.Beginner Tutorial . please continue. like you did before. go ahead and save your file.tizag. Ads by Google Ads by Google Tutorials Tutorials Seo Tutorial Seo Tutorial CSS Tutorial CSS Tutorial HTML Tutorial HTML Tutorial Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson . You should be saving this file as "index.php[19/08/2012 10:05:45 AM] . that is OK. following the same directions.

com/beginnerT/conclusion.php[19/08/2012 10:07:08 AM] . The largest header is "h1" and the smallest header is "h6". and <p>. we titled the page "My Own Webpage!" and that text would show up as the browser's title. Headers should be used for titles. <h2>. The new tags were: <head>. It will create a "header" that is much larger than the default font size. please continue on to our HTML tutorial section. which is located in the top left of most browsers.Conclusion conclusion & review A few new tags were introduced in the last lesson. <title>. Advertise on Tizag.com The HTML Code in Question: <html> <head> <title>My Own Webpage!</title> </head> <body> <h2>Welcome to my webpage</h2> <p>Coming soon will be my completed webpage that will wow and impress you!</p> </body> </html> <head> This comes immediately following <html> and is used to tell the browser useful information.Beginner Tutorial . <title> This tag must comes between <head> & </head> and will label the web browser's title bar. In the previous example.html tutorial Now that you have attained a basic understanding for how HTML works. Here you will learn all the basic HTML tags and attributes required to make a usable web site. The "h2" means that it is the 2nd largest header. the topic of your webpage ( used on old search engines ) and more. http://www. just like the ones you see on this page. We will now give you a definition of these new tags to get you ready for starting the real HTML Tutorial. <p> This is a paragraph tag. such as: the title of your page. <h2> This is a header tag.tizag. So when you're writing a paragraph make sure you place <p> at the beginning of the paragraph and </p> at the end! continue your learning .

Tag . It is important for you to understand what these words mean.com HTML is not a programming language.Introduction html . but rather a markup language. so that you may design your own web pages like the one you are viewing right now! Advertise on Tizag.com's HTML Tutorial! Here you will learn the basics of HyperText Markup Language (HTML). We urge you not to attempt to blow through this tutorial in one sitting. Once tagged. Tags look like this: <tag> Element . brief html background HTML hasn't been around for many years. and you will probably code a fair amount of HTML with it in your early stages. We aren't going anywhere! preparation for html If you are new to HTML and haven't read through our Beginner's Tutorial. in the context of HTML. the text becomes HTML code to be interpreted by a web browser.Used to tag or "mark-up" pieces of text. We will base our teachings around these widely-accepted coding standards. HTML will be a snap for you to learn. Elements will often have multiple attributes. a group called the World Wide Web Consortium formed to set standards for coding HTML.hypertext markup language Welcome to Tizag. an element http://www. just understand that a tag a piece of code that acts as a label that a web browser interprets. Attribute .HTML Tutorial . Creating an HTML document is easy.Used to modify the value of the HTML element. Instead.tizag. and back then. The provide yet another medium you can use to market your business! They serve as a platform to let the world know about you! words to know Throughout this tutorial. To begin coding HTML. Notepad++ is another popular favorite among web developers. please take a few minutes to complete that tutorial before moving on. we will be using several terms that are unique to HTML. you need only two things: a simple-text editor. The first web pages began in November 1990. we recommend that you spend 15 minutes to an hour a day practicing HTML and then take a break to let the information settle in. As a result.A complete tag. web pages Here are some important facts about why web pages are so useful! They are a low-cost and easy way to spread information to a large audience. having an opening <tag> and a closing </tag>. there were little to no HTML standards to follow. For now. and the dedication to follow this tutorial! Notepad is the most basic of simple-text editors.com/htmlT/[19/08/2012 10:07:52 AM] . If you already know XML. such as Notepad. These innovative text editors are specialized for writing simple code and they utilize color coding to help you write concise code.

Your input is what keeps Tizag improving with time! http://www. and an attribute is a property value that customizes or modifies an HTML element.tizag.com/htmlT/[19/08/2012 10:07:52 AM] . Ads by Google Ads by Google Tutorial Tutorial CSS Tutorial CSS Tutorial XML Tutorial XML Tutorial Tutorials Tutorials Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .HTML Tutorial .Introduction is a complete tag with an opening and closing tag.

head.</html> <html> is the element that begins and ends each and every web page."Once upon a time. Remember to close your HTML documents with the corresponding </html> tag to signify the end of the HTML document. and body elements. If you opened up your index.com/htmlT/elements.<head> element The <head> is usually the first element contained inside the <html> element. HTML Element Code: <html> </html> Now save your file by selecting . but when all is said and done.the paragraph texts. Element Content . name it . If you haven't already. and a closing tag. <p> . </p> .opening paragraph tag 2.html.. html .elements When you land on a website. you should be staring at your very first blank (white) web page! html . so that the browser knows how to render it. While it is also an element container http://www. or Crimson Editor and have a new. and the navigation links are all elements of the web page.Menu and then Save.html document.closing tag A Complete HTML Element: <p>Once upon a time. Copy the following HTML code into your text editor. Notepad++.. When you're asked to name your file.HTML Tutorial ... Click on the Save as Type drop down box and select the option All Files. the page banners..com An element consists of three essential pieces: an opening tag. all the items you see in front of you -. Advertise on Tizag.Save. every HTML page should have a bare minimum of four critical elements: the HTML. The tag also lets web browsers know. the content.index. it is time to open up Notepad. title. Its sole purpose is to hold each web element nicely in position and serves the role of book cover.php[19/08/2012 10:09:32 AM] . blank document ready to go. Now open your file in a new web browser so that you have the ability to refresh the page and see any new changes.Elements html . The term element is a just a name given to any piece of a web page.. "Hey." 3. Double-check that you did everything correctly and then press . Many HTML elements are actually invisible to visitors and work quietly behind the scenes to provide web crawlers and search engines useful information about the site.</p> A single page can contain hundreds or thousands of elements. I'm an HTML web page!".<html> element. all other HTML elements are encapsulated within the <html> element. 1.tizag.

They are probably the first thing seen by web surfers as pages are loaded.. Here's a sample of the initial setup. pictures. these elements are not directly displayed by a web browser. like its page title and other meta data. and we will eventually introduce how to utilize those languages.. Just keep in mind that the best titles are brief and descriptive. Instead they function behind the scenes. A proper title makes a good first impression. and any page caught without a title is considered unprofessional. You should see "My Web Page!" in the upper-left bar of your browser window. it's only important to understand that the body element is one of the four critical web page elements.<body> element The element that encapsulates all the visual elements (paragraphs.will come next! html . but for now. So far.the stuff you can see -.com/htmlT/elements. the head element will continue to lay empty except for the title element. tables. all we've done is add a couple of necessary elements that describe the web page document to the web browser.HTML Tutorial .) of a web page is the <body> element. Name your webpage as you please. We will be looking at each of these elements in greater detail as the tutorial progresses.tizag. you will notice that we still have nothing happening on the page.</p> </body> </html> http://www. For now. and web pages you bookmark are saved using the web pages' titles. Other elements used for scripting (JavaScript) and formatting (CSS) are also contained within the <head> element. HTML Head Element Code: <html> <head> </head> </html> If you've made the code changes and refreshed the browser page. Content -.php[19/08/2012 10:09:32 AM] . HTML Body Element Code: <html> <head> <title>My Web Page!</title> </head> <body> <p>Once upon a time.<title> element The <title> element adds a title to a web page. HTML Title Element Code: <html> <head> <title>My Web Page!</title> </head> </html> Save the file and refresh the browser. and it contains all of the page's viewable content. at best. etc. html . providing more descriptive information about the HTML document. which will be introduced next. Web page titles are displayed at the top of any browser window or at the top of browser tabs.Elements that encapsulates other HTML elements.

html .elements reviewed To recap quickly: we've laid out a set of four essential elements that are used to create a strong foundation and structure for your web page. images. The <html> element encapsulates all page content and elements. text. Ads by Google Ads by Google Word Tutorial Word Tutorial PHP Tutorial PHP Tutorial Text Editor Text Editor CSS Tutorial CSS Tutorial Go Back Continue tips Elements consist of three parts: an opening tag. http://www.php[19/08/2012 10:09:32 AM] .tizag. while the <body> element houses content elements such as web forms. From here on out.Elements Go ahead and view your first complete web page. the content or attributes. and the closing tag. and web video. including two special elements: the <head> and <body> elements. There are four main elements to every web page:.com/htmlT/elements.HTML Tutorial . the examples we provide will assume that you have a firm understanding of these key elements and know to place the majority of your HTML code inside of the <body> element. . The <head> element is a smaller container for elements that work behind the scenes of web pages.

image tags render images. and the closing tag? As you will learn. such as image tags and input tags. Other tags.Tags html . In a way. etc. Each time the browser finds a tag.tags A web browser reads an HTML document from top to bottom. the tag is rendered accordingly.elements without closing tags There are a few elements that do not require formal closing tags.com/htmlT/tags. the content. this is paragraph text. The reason for this is that these tags do not really require any content to be placed within them. you are not only coding HTML. HTML Line Break Code: <br /> To tell the browser we want to place a line break (carriage return) onto the site.</p> Tags should always be written in lowercase letters if you plan on publishing the page online. The better solution is to combine the opening and closing tags into a single format and shorten the number of characters needed to render a line break.and if every line break tag needed all three components as other tags do. Everything displayed on an web page requires the use of a tag or two.com Do you recall that HTML elements are comprised of three major parts: the opening tag. images. but also signaling to the browser. This would require a tremendous amount of effort.HTML Tutorial . now treat it as such!" Advertise on Tizag. have also been modified in such a manner. "Hey look. it is not necessary to type <br>linebreak</br>.tizag. HTML Tag Code: <tag>Content</tag> <p>This text will be rendered like a paragraph. left to right. Paragraph tags render paragraph text. but they are consolidated into one tag. easy example of an HTML tag that does not require a closing tag is the line break tag. life would become redundant real quick. By adding tags to an HTML document. and lists.php[19/08/2012 10:11:18 AM] . there are infinite combinations of HTML tags/elements. One prime. they still have the 3 parts (opening/closing and content). http://www. HTML More Tag Code: <body>Body Tag <p>Paragraph Tag</p> <h2>Heading Tag</h2> <b>Bold Tag</b> <i>Italic Tag</i> </body> html . including those used for forms. but sometimes may require attributes such as source URLs for images. as this is the web standard for XHTML and Dynamic HTML.

jpg" /> -.Your input is what keeps Tizag improving with time! http://www.Image Tag <br /> -.HTML Tutorial .Input Field Display: --Line Break-- As you can see from the above./mypic. it's a good time to start thinking about what type of website you want to make. found something wrong in this lesson? Report a Bug or Comment on This Lesson . using the src attribute.com/htmlT/tags.tizag. Attributes will be discussed in more detail throughout the remainder of the tutorial.Line Break Tag <input type="text" size="12" /> -. Ads by Google Ads by Google PHP Tutorial PHP Tutorial CSS Tutorial CSS Tutorial Seo Tutorial Seo Tutorial Meta Tags Seo Meta Tags Seo Go Back Continue tips Some HTML elements have combined closing tags.. the web browser is capable of interpreting the image tag as long as we inform the browser where the image file is located. For now. Modify tags with attributes to customize your web pages! Tags depreciate as new web technologies evolve.Tags HTML Code: <img src=".php[19/08/2012 10:11:18 AM] . It is always easier to make content for a topic or to achieve a goal.

HTML Tutorial . Precision is important when writing your code.</p> <p>For instance.com HTML Text is probably the first element most HTML beginners learn to add to any web page. do your best to ensure your code is complete and accurately constructed. let's say you had a HUGE school. HTML <p> Tag Code: <html> <head> <title>My Web Page!</title> </head> <body> <p>Avoid losing floppy disks with important school. html . HTML Text Code: <html> <head> <title>My Web Page!</title> </head> <body> Hello World! </body> </html> html .. "Hello. it provides content for web surfers to enjoy as they skim through articles and articles of information.. but it also gives Search Engines and Spiders keywords and meta data. Advertise on Tizag. and this is generally achieved through a classic.</p> </body> </html> HTML Paragraph Text: Well written HTML documents can gain popularity through Search Engine Optimization and careful coding of your HTML elements.php[19/08/2012 10:11:42 AM] . For best results. It is because of text on web pages that we have a network of seemingly endless information available at our fingers.paragraph text Any text containing more than a few lines (or sometimes even more) should exist inside of a paragraph tag <p>.. World!" example. This tag is reserved specifically for blocks of text. Web spiders are a little forgiving when it comes to malformed HTML elements.com/htmlT/htmltext.text Text is the backbone of any web page. It plays an double role..headings 1:6 http://www.tizag. such as those you would expect to find inside your favorite novel.Text html .

HTML Heading Tags: headings are great for titles and subtitles Notice that each heading has a line break (a blank line) rendered before and after it. By placing text inside of an <h1> heading tag. and as a designer you need to take these line breaks into consideration when designing a layout. for example. Heading tags are numbered 1 through 6. with 1 being the largest font size at 24pt. Later on. and they change size depending on which tag you choose. the text displays bold and the size of the text increases to a 24pt font size.tizag.HTML Tutorial . This is a built-in attribute associated with the heading tag. HTML Heading Element: <body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body> Place these lines into your HTML file and you should see results similar to what you see below. if needed. and 6 being the smallest font size at 8pt. your web browser automatically places a line break in front of your beginning tag and after your ending tag. This is expected behavior.Text HTML has heading tags which can be used as headers or subheaders. CSS code can be used to remove these extra line breaks or manipulate the amount of spacing. just like it does with <p> tags. Ads by Google Ads by Google Myspace Text Myspace Text PHP Tutorial PHP Tutorial Seo Text Seo Text Text to HTML Text to HTML Go Back Continue http://www.php[19/08/2012 10:11:42 AM] .com/htmlT/htmltext. Each time you place a heading tag.

php[19/08/2012 10:12:21 AM] . HTML offers a handful of special tags that can be utilized to do just that: Advertise on Tizag. As we've mentioned.com HTML Text Formatting Tags: <p>An <p>An <p>An <p>An <p>An <p>An <p>An <p>An example example example example example example example example of of of of of of of of <b>Bold Text</b></p> <em>Emphasized Text</em></p> <strong>Strong Text</strong></p> <i>Italic Text</i></p> <sup>superscripted Text</sup></p> <sub>subscripted Text</sub></p> <del>struckthrough Text</del></p> <code>Computer Code Text</code></p> HTML Formatting Text: An An An An An An An An example example example example example example example example of of of of of of of of Bold Text Emphasized Text Strong Text Italic Text superscripted Text subscripted Text struckthrough Text Computer Code Text All of these tags add a pinch of flavor to HTML text elements.tizag. If you wish to bold an entire paragraph. You may consult how to do that in our CSS Tutorial. Earlier.HTML Tutorial . In short.formatting text elements w/ tags As you begin to place more and more text elements onto your website. their opening and closing tags are combined into a single line break element. and it is the equivalent of pressing Enter or Return on your keyboard. from paragraphs to lists and text links html . line break elements are a little different from most of the tags we have seen so far because they do not require a closing tag. we mentioned that each paragraph element begins and ends with a line break.com/htmlT/formattags. Ultimately. html .line breaks A line break is used in HTML text elements. Instead. Use the <br /> http://www. Placing <br /> within the code is the same as pressing the return key in a word processor. it's best to keep the use of these tags quick and sparse. the decision is in the hands of the web designer. and what we mean by that is that you should only use them to bold or italicize one or two words at a time. but generally. a line break ends the line you are currently on and resumes on the next line. the better solution would involve Cascading Style Sheets (CSS) and adjust the element's font-weight property.Formatting html . which creates an empty space between the start of a paragraph element and the end of a paragraph element. you may find yourself wanting to incorporate bold or italic properties ing your text elements.about formatting text elements Formatting elements such as <b> should be used sparingly.

<br /> <br /> <br /> Kevin Sanders<br /> Vice President</p> Closing Letter: Sincerely.php[19/08/2012 10:12:21 AM] .com/htmlT/formattags. Ohio We have created an address for a letterhead and used a line break <br /> tag inside of a paragraph element to add some line breaks to make this text appear more like an address.tizag. HTML Text Format: <p>Sincerely. http://www.HTML Tutorial . Use this page as a reference if you ever need to format your website's text in the future. Here's another look as we add a signature element to the same letter. Ohio<br /> </p> Address: Will Mateson Box 61 Cleveland.Formatting tag within other elements such as paragraphs (<p>). Kevin Sanders Vice President Ads by Google Ads by Google Letter Format Myspace Text CSS Tutorial Word Tutorial Format Letter Format Word Tutorial Myspace Text Go Back Continue tips Remember that there is a special tag for line breaks and horizontal rule tags. HTML Format Text: <p> Will Mateson<br /> Box 61<br /> Cleveland.

Use the <pre> tag for any special circumstances where you wish to have the text appear exactly as it is typed. but your browser ignores those tabs and line breaks. I may sound crazy.com/htmlT/htmlpre.com We showed you that you can get around this problem by using the <br /> tag. Advertise on Tizag. Sure.Pre html . But I love you! </pre> HTML Preformatted Text: Roses are Red.php[19/08/2012 10:13:32 AM] .<pre> preformatting A web browser interprets your HTML document as being one long line. Spaces.Your input is what keeps Tizag improving with time! http://www.HTML Tutorial . you may have tabs and line breaks in Notepad which align your content so it's easier for you to read. tabs. One simpler solution might be to use the <pre> tag. HTML Pre Code: <pre> Roses are Red. which stands for previously formatted text. But I love you! Ads by Google Ads by Google PHP Tutorial PHP Tutorial Word Tutorial Word Tutorial CSS Tutorial CSS Tutorial HTML Tutorial HTML Tutorial Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .tizag. and line breaks that exist in your actual code will be preserved with the <pre> tag. Violets are blue. but tabs and spacing are quite different from one another and can be absolutely annoying at times. Violets are blue. I may sound crazy.

title attribute The title attribute titles an HTML element and adds a tiny text pop-up to any HTML element.com/htmlT/htmlattributes. html . you may do so using the align attribute. unless otherwise specified. the web browser looks to these attributes as guides for the construction of web elements. fonts. As an HTML tag is processed.HTML Tutorial . offering your web viewers a tool-tip mechanism where information can be found or where a better description of an HTML element can be seen. most elements are automatically aligned left. granting increased search rankings based on the relevance of the title attribute text.attributes Web page customization begins with HTML attributes. a tool tip is displayed.php[19/08/2012 10:17:35 AM] . you've probably seen a vast assortment of color schemes. Much like the tool tips found in word processing programs.Attributes html . this attribute can add spice to any page while offering the user priceless interactivity.all of which are brought to you by HTML and CSS element attributes. By default. As the mouse hovers over the element. HTML Title Attribute: <h2 title="Hello There!">Titled Heading Tag</h2> Hover your mouse over the display heading and watch the title attribute in action! HTML Title Attribute: Titled Heading Tag The title attribute is one that has not deprecated and should be used often. html .align attribute If you wish to change the horizontal alignment of your elements. the browser will render the element using the default setting(s) (usually very boring). As a web surfer. HTML Align Attribute: <h2 align="center">Centered Heading</h2> http://www. right.com HTML attributes are responsible for customizing web elements. Advertise on Tizag. Attributes are like blue print schematics informing the browser how to render an HTML element. or center. and styles -. It allows you to align things left. Many search engines are capable of identifying this attribute inside your HTML elements.tizag. Without any attribute values specified. giving the viewer just one extra piece of information.

please feel free to move along to our CSS Tutorial. Nonetheless.tizag. used to be the primary source for the customization of web elements.php[19/08/2012 10:17:35 AM] . Since most HTML attributes are now deprecated. having an understanding of HTML attributes will prove to be a tremendous aid for anybody looking to move into professional web development using Cascading Style Sheets. but they have now lost their market share to Cascading Style Sheets (CSS). Ads by Google Ads by Google CSS Tutorial CSS Tutorial Myspace Text Myspace Text Text Fonts Text Fonts CSS Text to HTML Go Back Continue tips Use several different attributes to enhance a tag.HTML Tutorial . they should ultimately be avoided in professional-level web design.com/htmlT/htmlattributes. including align. Completely customize your site through various tag/attribute combos. Use the title attribute to give your user a more interactive experience and to help your SEO rank! http://www. If you would like to get started now with Cascading Style Sheets.Attributes HTML Align Attribute Display: Centered Heading HTML Align Attribute Code: <h2 align="left">Left-aligned heading</h2> <h2 align="center">Centered Heading</h2> <h2 align="right">Right-aligned heading</h2> HTML Align Attribute Display: Left-aligned heading Centered heading Right-aligned heading HTML attributes.

such as http://www. and face attributes can be used all at once or individually. color.the largest. Font face is synonymous with font type.the smallest.tizag. HTML Font Color Code: <font color="#990000">This text is hex color #990000</font> <br /> <font color="red">This text is red</font> HTML Font Color Attribute: This text is hex color #990000 This text is red html . Advertise on Tizag.font The <font> tag provides no real functionality by itself. The default size of a font is 3. and color of HTML text elements. they will not be able to see it. size.HTML Tutorial . The range of accepted values goes from 1 -. To reduce the risk of running into this situation. to 7 -.php[19/08/2012 10:18:04 AM] . but with the help of a few attributes. providing users with the ability to create dynamic font styles for any HTML element. As a web designer. HTML Font Size Code: <p> <font size="5">Here is a size 5 font</font> </p> HTML Font Size Attribute: Here is a size 5 font. be aware that if you specify a custom font type and users viewing the page don't have the exact same font installed.com/htmlT/font. See our CSS Tutorial for more information.com Note: The <font> and <basefont> tags are deprecated and should not be used for published work. html . you may provide a list of several fonts with the face attribute.font face Choose a different font face by specifying any font you have installed.font color Set the color of your font with color. this tag is used to change the style. Instead the chosen font will default to Times New Roman. The size. Instead.font size Set the size of your font with size. use CSS styles to manipulate your font. html .Font html .

</p> Beauty & Grace: C ustomize your font to achieve a desired look. Ads by Google Ads by Google Font Font Font Styles Font Styles Font CSS Font CSS Fonts Fonts http://www.tizag.attribute review HTML Font Attributes: Attribute= "Value" size= color= face= "Num. HTML Code: <p><font size="7" face="Georgia. Arial..Font outlined below.</font> </p> HTML Font Face Attribute: This paragraph has had its font formatted by the font tag! In the example above. Value 1-7" "name of font" Description Size of your text. with 7 being biggest Font type "rgb. Arial" color="maroon">C</font>ustomize your font to achieve a desired look.HTML Tutorial .php[19/08/2012 10:18:04 AM] .name.. Garamond">This paragraph has had its font. HTML Font Face Code: <p> <font face="Georgia.com/htmlT/font. we have changed the font face (type) of a paragraph element and specified a list of similar fonts to apply to this element in the case that some of our viewers do not have these fonts installed.or hexidecimal" Font color beautiful first letter style Customize your fonts to achieve any desired look. html font .

com/htmlT/font.php[19/08/2012 10:18:04 AM] . Nobody enjoys websites that are hard to read. found something wrong in this lesson? Report a Bug or Comment on This Lesson .tizag.Font Go Back Continue tips Don't use font tags if at all possible! Use CSS Styles instead! Fonts add character and originality to sites.HTML Tutorial .Your input is what keeps Tizag improving with time! http://www. Use consistent fonts throughout your site. so keep your fonts legible! Use formatting tags rather than the font tag for bold or italic texts. so long as they're not overused or unreadable.

The examples above link to what are known as Global URLs.html" Links to other pages within your website domain. In other words.tizag.espn. What most people don't know is that HTML links are actually HTML anchors constructed using anchor tags (<a>). Advertise on Tizag.href="http://www. html .text links (anchors) The World Wide Web got its spidery name from the plentiful connections (links) that link websites together with the click of a button. and it acts like a street address for a website as a user is directed from one site to another.com/" target="_blank">Tizag Home</a> <br /> <a href="http://www.com/" target="_blank">ESPN Home</a> <br /> <a href="http://www.com/htmlT/links.yahoo..com domain.tizag.href="#anchorname" Links to anchors embedded in the current web http://www. There are different types of URLs. since they are external web addresses that do not reside on the Tizag. HTML Text Link Code: <a href="http://www. and each has a slightly different look.Text Links html .hypertext reference (href) A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location.cnn. the element is incomplete as it is missing a vital attribute that references another web page called a Hypertext Reference (href).com/" target="_blank">Yahoo Home</a> HTML Text Links: Tizag Home ESPN Home Yahoo Home The address of a website is called a Uniform Resource Locator (a URL). Here's a look at the different types of URLs. this Hypertext Reference is where users will navigate to if they do click on this link./internal/mypage2.HTML Tutorial . Use the demonstration below as a reference. HTML Text Link Code: Global .href=".com HTML Text Link: <a>I am a text link!</a> HTML Text Link: I am a text link! While the example above appears and feels like a text link when viewed through a web browser.php[19/08/2012 10:19:35 AM] . Local .com/" Links to other domains outside your website domain. Internal .

If you want people to mail you about your site.ESPN.tizag.com/htmlT/links.com" target="_blank">ESPN. A web page that opens a new web browser window each time a user clicks a link is not the greatest way to entice users to stick around.HTML Tutorial . (target="_blank" and target="_self"). It loads each new page in the current browser window.php[19/08/2012 10:19:35 AM] . a good way to do it is place an email link with a subject line already filled out for them. html .com In some circumstances. Will each one open in a new window. The code below shows how you would link to ESPN. http://www.COM Links are a big part of the user experience for any website. Here's the example. a popular sports website.com.Text Links page. so long as you know how to handle the target attribute. HTML Email Link Code: <a href="mailto:email@tizag. HTML Link Target Code: <a href="http://www. so that the viewer can have a window that remains opened to our website. while _blank opens up a new web browser window with each click of the text link. or will each one open in the current browser window? As the web designer. it may be necessary to fill in the body of the email for the user as well. Always try to keep that in mind when working on a site's navigation.link targets The target attribute defines how each link will open when clicked. you call the shots as to how a user navigates from page to page. Link Targets: Target= Description _blank Opens new page in a new browser window _self Loads the new page in the current window _parent Loads new page into a parent frame _top Loads new page into the current browser window.email links Creating an email link is simple. The target attribute is added to allow the browser to open ESPN in a new window.com</a> Email Links: Email@tizag. cancelling all frames The two most important values are the top two.com?subject=Feedback" >Email@tizag. html . The _self value is generally the default.COM</a> _blank Target: ESPN.

which we will discuss in the next lesson.tizag.com/htmlT/links.zip">Text Document</a> Download a Text Document: Text Document html . base Use the <base> tag in the head element to set a default URL for all links on a page to go to. It's always a good idea to set a base tag just in case your links become bugged somewhere down the line.HTML Tutorial . you should set your base to your home page. Usually.com html . However.tizag.Text Links HTML Email Link Code: <a href="mailto:email@tizag.com</a> Complete Email: Email@tizag. HTML Download Link Code: <a href="http://www.com?subject=Feedback&body=Sweet site!"> Email@tizag.com/pics/htmlT/blanktext.com/" /> </head> Ads by Google Ads by Google Myspace Text Myspace Text CSS Tutorial CSS Tutorial Word Tutorial Word Tutorial Codes Codes Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .tizag. things become complicated if we want to place image links for download.Your input is what keeps Tizag improving with time! http://www.default links.php[19/08/2012 10:19:35 AM] . HTML Base Link Code: <head> <base href="http://www. The best solution for images is to use a thumbnail links.download links Placing files available for download is done in exactly the same fashion as placing text links.

and these notes to yourself are a great way to remember what was going on. your code may exist for many.Comments html . Like other HTML elements. HTML code comments are your friends! A comment is a way to control which lines of code are to be ignored by the web browser and which lines of code to incorporate into your web page. etc. html . (<!-.comments Comments are a great asset to new developers and a great way to place little notes to yourself reminding yourself what pieces of code are doing what.jpg" height="100" width="400" /> Comment to self: Placing notes and reminders to yourself is a great way to remember your thoughts and to keep track of elements embedded inside the web page. Advertise on Tizag. This includes any HTML tags.com As a sprouting young web developer.com/htmlT/htmlcomments.commenting existing code --> http://www.Opening Comment Tag -. these tags can span across multiple lines of code. Create notes for other scripting languages like JavaScript which requires them.com/pics/tizagSugar. Any HTML elements that are encapsulated inside of the comment tags will be ignored by the web browser. This makes comment tags quite useful for debugging.HTML Tutorial .<!-.tizag. Comments are also great ways to troubleshoot bugs and code errors. Comment Tags: <!-.> Closing Comment Tag As you can see.tizag. allowing you to comment out large blocks of HTML code. scripting language(s). Also. since you may not remember five or more years down the road. many years. All combinations of text placed within the comment tags will be ignored by the web browser. Write notes or reminders to yourself inside your actual HTML documents. HTML Comment Code: <!--Note to self: This is my banner image! Don't forget --> <img src="http://www. as they allow the developer to temporarily comment out pieces of an HTML document without having to immediately delete the code from the HTML document.php[19/08/2012 10:21:00 AM] . comments are also comprised of an opening and closing tag.-->). Comment out elements temporarily rather than removing them. as they give you the ability to comment out lines of code one at a time to search for the exact line causing problems. There are three main reasons why you may want your code to be commented out or ignored. especially if they've been left unfinished.

Comments As a web designer.Your input is what keeps Tizag improving with time! http://www. we can simply remove the comment tags. Below. you may comment out an element until it is 100% ready for the site. Commenting out elements or code chunks helps debug without having to delete and then retype code. 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. you may sometimes have different websites in progress at once.com/htmlT/htmlcomments.HTML Tutorial . since we are not quite ready to receive input from our users. we have commented out an input form element. and it might be easy to leave some HTML elements unfinished.php[19/08/2012 10:21:00 AM] . Ads by Google Ads by Google PHP Tutorial PHP Tutorial CSS Tutorial CSS Tutorial Word Tutorial Myspace Text Word Tutorial Myspace Text Go Back Continue tips Frequent use of comments allows you to recall your train of thought the next time you take a look at the HTML code.tizag. found something wrong in this lesson? Report a Bug or Comment on This Lesson .Input Field --> Now when we are ready to show that element.<input type="text" size="12" /> -. Nothing is more frustrating than deleting bits of code only to turn around moments later and realize that you now need to recode them. In this case. HTML Code: <!-.

including unordered lists (bullets). HTML Default Bullet List Code: <h4 align="center">Shopping List</h4> <ul> <li>Milk</li> <li>Toilet Paper</li> <li>Cereal</li> <li>Bread</li> </ul> HTML Default Disc Bullets: Shopping List Milk http://www. Advertise on Tizag. Each list type utilizes its own unique list tag. html . which we'll demonstrate below. are nothing but container elements for list items (<li>).com HTML List Item Code: <body> <ul> <li>I am a list item!> <li>I am a list item too!> <li>I am a list item also!> </ul> </body> HTML List Items: I am a list item! I am a list item too! I am a list item also! The actual list tags themselves.lists HTML lists appear in web browsers as bulleted lines of text.tizag.HTML Tutorial .unordered lists An unordered list (<ul>) signifies to a web browser that all list items contained inside the <ul> tag should be rendered with a bullet preceding the text.com/htmlT/lists.php[19/08/2012 10:21:55 AM] .Lists html . The default bullet type for most web browsers is a full disc (black circle). There are actually three different types of HTML lists. and definition lists (think: dictionaries). ordered lists (numbers). such as <ul>. They work behind the scenes to identify the beginning and ending of an HTML list element. but this can be adjusted using an HTML attribute called type.

php[19/08/2012 10:21:55 AM] .ordered lists An ordered list is defined using the <ol> tag. Get Money 3. HTML Unordered List Type Code: <ul type="square"> <ul type="disc"> <ul type="circle"> HTML Unordered List Types: type="square" type="disc" type="circle" Milk Milk Milk Toilet Paper Toilet Paper Toilet Paper Cereal Cereal Cereal Bread Bread Bread html .Lists Toilet Paper Cereal Bread To render a list with a different bullet type.com/htmlT/lists. HTML Numbered/Ordered List: <h4 align="center">Goals</h4> <ol> <li>Find a Job</li> <li>Get Money</li> <li>Move Out</li> </ol> HTML Numbered List: Goals 1. Move Out The numbering of an HTML list can be changed to letters or Roman Numerals by once again adjusting the type attribute. and list items placed inside of an ordered list are preceded with numbers instead of bullets. add a type attribute to the unordered list element. Find a Job 2. Using the same code in the example above. replace the <ul> line from the previous example with any of the lines listed below to change the bullet from disc shape to another shape. HTML Code: <ol <ol <ol <ol type="a"> type="A"> type="i"> type="I"> http://www.HTML Tutorial .tizag.

Find a Job A. HTML Numbered List Start Attribute: <h4 align="center">Goals</h4> <ol start="4" > <li>Buy Food</li> <li>Enroll in College</li> <li>Get a Degree</li> </ol> HTML Numbered List Start . Move Out c. Find a Job i.</dd> </dt> </dl> HTML Definition List Display: Fromage http://www.definition of the list item These lists displace the word term (<dt>) in such a way that it rests just above the definition element (<dd>) to offer a very unique look.opening clause that defines the start of the list <dt> . Buy Food 5.php[19/08/2012 10:21:55 AM] .4: Goals 4. Get Money III. Move Out C. HTML Definition List Code: <dl> <dt><b>Fromage</b></dt> <dd>French word for cheese.definition term lists HTML definition lists (<dl>) are list elements that have a unique array of tags and elements. Find a Job II.tizag. Enroll in College 6. Move Out The start attribute allows you to further customize an HTML ordered list by setting a new starting digit for the ordered list element. the resulting listings are similar to those you'd see in a dictionary. <dl> .Lists Ordered List Types: Lower-Case Letters Upper-Case Letters Lower-Case Numerals Upper-Case Numerals I.com/htmlT/lists.</dd> <dt><b>Voiture</b></dt> <dd>French word for car.HTML Tutorial . Get Money b.list item that defines the definition term <dd> . Move Out iii. For best. Get a Degree html . results we suggest bolding the definition terms with the bold tag <b>. Get Money B. Find a Job a. Get Money ii.

Voiture French word for car.Lists French word for cheese. which is helpful for creating some items. such as outlines. found something wrong in this lesson? Report a Bug or Comment on This Lesson .HTML Tutorial .tizag.Your input is what keeps Tizag improving with time! http://www.php[19/08/2012 10:21:55 AM] . Ads by Google Ads by Google CSS Tutorial CSS Tutorial Li Li CSS CSS Font CSS Font CSS Go Back Continue tips Use the start and type attributes to customize list elements.com/htmlT/lists. It is possible to make lists of lists.

com Use the <img /> tag to place an image on your webpage. HTML Image Code: <img src="http://www.tizag.the URL (Unified Resource Locator). <img /> tag does not require a formal ending tag. html . Let's take one more look at the code from our first HTML image example. Once saved to your local computer.tizag. If you have an active connection to the internet. you will have to download (right click the image and Save As.HTML Tutorial . Advertise on Tizag.tizag.gif" /> HTML Image: So that you can follow along with us.. html .com/pics/htmlT/sunset. control-click and Save on a Mac).com/pics/htmlT/sunset.gif" /> An image source value is essentially the URL of a picture file and tells the web browser where the image is located so that it can then display the image correctly. all we need to do to close this tag out with a slash (/) placed just inside the ending bracket (/>). http://www.images & pictures Images are a staple of any web designer. we've provided a global URL of an image we have stored on Tizag's web server. It might help to save the image file in the same folder as your web page. Like the <br /> tag. HTML Image Code: <img src="http://www.php[19/08/2012 10:25:42 AM] .source urls Image source URLs can be either local or global. If not. you should be able to use the URL in the example to render this image on your own web page.image src attribute The source attribute (src) is what makes an image tag display an image.Images html . An image source is a URL value and should point to the directory location of an image file. meaning that the picture files you wish to display on your website can be either hosted locally on your machine (local) or hosted elsewhere on some other web site domain (global).. Instead. In order to place an image onto a website.com/htmlT/images. point the image src attribute to the recently downloaded image file. one needs to know where the image file is located within the file tree of the web server -.on a PC. so it is very important that you understand how to use them properly.

. HTML Height and Width Code: <table height='200' width='400'> <tr> <td> <img src="sunset.gif Local: pics/sunset. HTML Height and Width Attributes: <img src="sunset.html file. Percentage values are relative to the parent HTML element (usually the body). A URL cannot contain drive letters such as C:\.tizag.gif" height="50" width="100" /> HTML Height and Width (Pixels): Above. Copying the file directly to your web server solves this problem. For example. which means if you have a parent element like a <body> element that is the whole screen (1024x768). since a src URL is a relational interpretation based on the location of the.. Using the URL of pictures on other sites poses a problem if the other site happens to change the physical location of the picture file.tizag. By hard-coding these values.image height and width attributes Height and width are HTML attributes that define an element's height and width properties. then we risk some severe skewing as the browser tries to shrink our image into our small box. Pictures must reside on the same web host as your . Local URLs Explained: Local Src src="sunset. as you continue to upload picture files to your system. then an image with a height and width of 100% will take up that entire body element (1024x768). you may eventually run short on hard drive space.gif" src=".php[19/08/2012 10:25:42 AM] .gif Local URLs are relative to the file path of the web page itself.html file and the location of the picture file. if the picture file is placed inside the same directory as the web page. html .html file picture file resides in the pics directory picture resides one folder "up" from the . Something like src="C:\www\web\pics\" will not work. one folder "up" from the . Each URL format has its pros and cons.Images Global: http://www. In our example below.html file picture file resides in the pics directory.com/htmlT/images.gif" Location Description picture file resides in same directory as ./sunset. These values can either be percentage-based (%) or rely on pixel sizes. since it is residing in the same directory as the HTML page. we are ensuring that the image will only display 50 pixels high by 100 pixels wide. Height and width values can also be a percentage.gif" height="100%" width="100%"> http://www. we've used hard-coded pixel values for the height and width of the sunset image to ensure that this image will always render 50 pixels high by 100 pixels wide./pics/sunset.HTML Tutorial . then the local URL for the image would simply be the name of the image. we have placed the image in a table element that is about 400 pixels wide by 200 pixels tall. Use your best judgment based upon your situation.gif" src=".com/pics/htmlT/sunset. even if the picture file itself happens to be much larger.gif" src="pics/sunset. If the dimensions of the picture are much larger. However.html file in order for you to use local URLs.

html .php[19/08/2012 10:25:42 AM] . Text-only browsers greatly depend on the alt attribute since they are not capable of displaying pictures. as other HTML elements will be moved further down the page in the event of an over-sized image. pixelated rendering of the image is because the actual image file is much smaller than 400x200 and has been stretched by the web browser because we coded it to do so.tizag. the browser needs to know the size and shape of an element.alternative attribute The alt attribute specifies alternate text to be displayed if for some reason the browser cannot find the image. and must be maintained to avoid skewing. HTML Alternative Attribute (alt): <img src="http://example. the browser will use the actual dimensions of the image file to render the image. If no height or width attribute is specified inside the <img> tag. The ratio is critical.com/htmlT/images. -. The text value contained within this attribute must reflect the substance of the image in order to receive "credit" from a search engine.gif" alt="Beautiful Sunset" /> HTML Alternative Text Attribute: The alt attribute is also an attribute that search engines may look for when displaying images. it handles them one after another in sequence. 2.com/brokenlink/sunset. that's one less step required by the browser to render an image element and will result in the page loading faster for your users.horizontally align images http://www. or if a user has image files disabled in their web browser settings. Always scale down. If this information is provided in the tag. having been rendered to fill the 400x200 table element.Larger images will always scale down nicely and continue to look sharp.HTML Tutorial . html . This can cause problems with the page layout if the picture file is too large. The reason we are seeing a low-quality. Before it can move from one element on to the next.Images </td> </tr> </table> HTML Height and Width (Percentage): This image is now pixelated. Here's a few things to remember when trying to place images on your web page: 1. Maintain the same height to width ratio. Another concept to keep in mind is that as a browser begins rendering HTML components.

But we aren't talking about that. yes it is.tizag.a priceless attribute when it comes to web design.gif files are limited to only 256 colors and any .isn't it? </p> <p>This is the third paragraph that appears.gif files can have transparent backgrounds -. stick to using them for thumbnails. though. their size/quality ratio is outstanding.com/htmlT/images. which downsizes your load times and saves on hard drive space.. The main reason for this is that .php[19/08/2012 10:25:42 AM] .. 1. HTML Image Align Code: <p>This is paragraph 1. On the down side. Image elements are aligned to the left by default. The image will appear along the right-hand side of the paragraph. If we were talking about beautiful tropical sunsets.. the image's right edge has now been aligned with the right edge of the display box.. align right left HTML Align Attribute Code: <img src="sunset.jpeg files for graphical designs.</p> Image Wrap Around: This is paragraph 1. It's best to use . isn't it? This is the third paragraph that appears below the paragraph with the image! html gifs vs.gif" align="right"> The image will appear along the. so it's rather a waste. and buttons. As you can see this is very nice for adding a little eye candy that relates to the specified paragraph.Images Images can be aligned horizontally to the right or to the left of other elements using the align attribute.gif" align="right"> HTML Image Align: Right: As you can see.jpeg files for photo galleries or artwork. I think this paragraph serves as a nice example to show how this image alignment works. clip art. you can achieve some really great designs by embedding aligned images inside of paragraph <p> elements. Avoid using .png counterparts.gif image containing more than a few colors tends to have a larger file size than their . If we take this example a step further. yes it is. and photo galleries. .jpeg or . Large picture files are a plague of web design! Jpegs have an unlimited color wheel and a high compression rate. http://www.</p> <p> <img src="sunset. this is the desired behavior for the align attribute.. Since the display box is the parent element. jpegs vs.HTML Tutorial .. backgrounds.jpg) files don't allow for transparent backgrounds. this picture would be perfect. Although . pngs Gifs are best used for banners.jpeg (or .

With a high-compression rate and transparent coloring. Defining a height and width for your images will allow your page to load gracefully found something wrong in this lesson? Report a Bug or Comment on This Lesson .HTML Tutorial . keeping file size and quality in mind. low file size. When in doubt.gif images do. try saving an image in multiple formats and decide which is better. They have a large color wheel. and allow for transparencies like .Images PNG image files are the best of both worlds.php[19/08/2012 10:25:42 AM] .Your input is what keeps Tizag improving with time! http://www. Ads by Google Photo Image Photo Images JPEG Image Image Resize Go Back Continue tips Find a good graphics editing program to edit your images with. they might just be the best format for any web graphics.tizag.com/htmlT/images.

please take a minute and review the HTML Image lesson before reading further.espn. image links require opening and closing anchor tags. No Border: html . This default behavior is intended to give web viewers the ability to quickly decipher the difference between ordinary images and image links.com/htmlT/htmlimagelinks.com" target="_blank"> <img src="ahman.com" target="_blank"> <img src="ahman. but instead of placing text between these opening and closing tags. Thumbnails are intended to give your audience quick previews of images without them having to wait for the larger. one must save a low-quality version of a picture with smaller dimensions. To create a thumbnail. Since this default is different from web browser to web browser. http://www. higher-quality image to load.with a valid source attribute value of course. many browsers add a small border around image links.espn. one should link this low-quality picture to its higher-quality counterpart.HTML Tutorial .gif" border="0" /> </a> HTML Image Link. it may be best to squelch this ambiguity and set the border attribute of the image tag to 0 or 1.tizag.com If you do not know how to use the image tag. by embedding an <img> tag inside of an anchor element <a>.php[19/08/2012 10:27:42 AM] .gif" /> </a> HTML Image Link: By default.image links Image links are constructed as you might expect. HTML Image Border Code: <a href="http://www. Like HTML text links.thumbnails Thumbnails are by far the most common type of image link seen in today's world. HTML Image Link Code: <a href="http://www. and they will allow you to display multiple pictures on one page with ease. Photo galleries make heavy use of thumbnails. the developer needs to place an image tag -.Image Links html . Then. Advertise on Tizag.

com/htmlT/htmlimagelinks.php[19/08/2012 10:27:42 AM] .Your input is what keeps Tizag improving with time! http://www.Image Links HTML Thumbnail Code: <a href="sunset.tizag.gif" /> </a> HTML Thumbnails: Ads by Google Color Image Photo Image Image GIF Image Photo Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .HTML Tutorial .gif"> <img src="thmb_sunset.

and even other table elements can be placed inside each table cell. images. Content elements like HTML lists. and their sole purpose is to house other HTML elements and arrange them in a tabular fashion -. but this has no bearing on the rendering of the element. but after working through this lesson.php[19/08/2012 10:28:30 AM] .row by row. <tr> (table rows).Tables html .HTML Tutorial .com Tables may seem difficult at first. much like you'd see when working with an application such as Excel.com/htmlT/tables.tables An HTML table is an element comprised of table rows and columns. A table element consists of three different HTML tags including the <table> tag. you'll see that they aren't so horrible. We've also added a border attribute to ensure the table cells/rows are more visible to our readers. HTML Table Code: <table border="1"> <tr> <td width="50%"> <ul> <li>List Item 1</li> <li>List Item 2</li> <li>List Item 3</li> </ul> </td> <td> <ul> <li>List Item 4</li> <li>List Item 5</li> <li>List Item 6</li> </ul> </td> </tr> http://www. It simply helps keep track of each tag/element and helps us ensure we don't miss an opening or closing tag which would prevent our table element from rendering correctly.tizag. Tables are container elements. HTML Table 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> Basic HTML Table Layout: Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 We've adjusted the formatting of the code by adding additional spaces before some of the table elements. column by column. Advertise on Tizag. and the <td> (table columns) tags. Doing so aligns the elements in a tabular fashion and provides structure.

rather than stacking them up one on top of another.gif" class="linksESPN" /> </a> </td> </tr> </table> HTML Table 2: List Item 1 List Item 2 List Item 3 Avoid losing floppy disks with important school.tizag.com/htmlT/tables. with an opening and closing tag (<tr> </tr>). and lists. and like table rows. Table rows and columns are container elements that house other HTML elements such as text links. Below. Table columns are also considered child elements of HTML tables. html . HTML Table Code: <table border="1"> <tr title="You are looking at Row 1" bgcolor="silver"> <td>Row 1 Cell 1</td> <td>Row 1 Cell 2</td> </tr> <tr title="You are looking at Row 2" bgcolor="aqua"> <td>Row 2 Cell 1</td> <td>Row 2 Cell 2</td> </tr> </table> HTML Table Code Example: Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 html .. Each table row is essentially a table element itself.com/pics/htmlT/ahman.HTML Tutorial .. http://www.com" target="_blank" rel="nofollow"> <img src="http://www..php[19/08/2012 10:28:30 AM] . an HTML table may contain an infinite number of table data cells (<td> <tr>).table rows & table columns A table can contain an infinite number of table rows..tizag.tables: spanning multiple rows and cells Use rowspan to span multiple rows merging together table rows and colspan to span across multiple columns.Tables <tr> <td> <p>Avoid losing floppy disks with important school.espn. List Item 4 List Item 5 List Item 6 HTML tables allow the web designer to align page content in a tabular fashion while spanning elements horizontally across the web page.</p> </td> <td> <a href="http://www. images. as we've seen in previous examples. we've applied a background color to the table example in order to help distinguish the different table elements.

Tables HTML Table Rowspan Attribute: <table border="1"> <tr> <td><b>Column 1</b></td> <td><b>Column 2</b></td> <td><b>Column 3</b></td> </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> HTML Colspan and Rowspan Attributes: Column 1 Row 1 Cell 1 Row 3 Cell 1 Column 2 Column 3 Row 1 Cell 2 Row 1 Cell 3 Row 2 Cell 2 Row 2 Cell 3 cell padding and spacing With the cellpadding and cellspacing attributes. you will be able to adjust the spacing between table cells. Setting the cellpadding attribute determines how much space will exist between a table cell border and the elements contained within it.255. This http://www.php[19/08/2012 10:28:30 AM] .0)"> <tr> <td><b>Column 1</b></td> <td><b>Column 2</b></td> </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 Cellspacing and Padding: Column 1 Column 2 Row 1 Cell 1 Row 1 Cell 2 Row 2 Cell 1 Row 2 Cell 2 And now we will change the cellpadding of the table and remove the cellspacing from the previous example.com/htmlT/tables.tizag. HTML Cellpadding/Cellspacing Code: <table border="1" cellspacing="10" bgcolor="rgb(0. Color has been added to the table below to emphasize these attributes.HTML Tutorial . whereas cellspacing determines how much space will exist between each table cell.

The examples above show good form for organizing the table code.Your input is what keeps Tizag improving with time! http://www.0)"> <tr> <td><b>Column 1</b></td> <td><b>Column 2</b></td> </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 Cell Pads: Column 1 Row 1 Cell 1 Row 2 Cell 1 Column 2 Row 1 Cell 2 Row 2 Cell 2 The value you specify for padding and spacing is interpreted by the browser as a pixel value.Tables should clearly demonstrate the difference between cellpadding and cellspacing. Most HTML attributes that use numeric values for their measurements represent a pixel value.tizag. found something wrong in this lesson? Report a Bug or Comment on This Lesson .php[19/08/2012 10:28:30 AM] . It may seem a bit complicated.HTML Tutorial . Ads by Google PHP Tutorial CSS Tutorial Excel Chart MS Excel Go Back Continue tips Tables can be given background colors using the bgcolor attribute.255. but if you keep everything organized in this fashion it will be much easier to manage down the road. HTML Code: <table border="1" cellpadding="10" bgcolor="rgb(0. So a value of 10 is simply 10 pixels wide.com/htmlT/tables.

255)" border="1"><tr> <td>A blue colored table background using numeric. HTML supports three different types of color values including text values (which we've pretty much covered above).com/htmlT/bgcolor. Below is a table of the 16 basic HTML color values that are available to HTML web designers. 0. Advertise on Tizag.web colors Our example uses the text value. HTML Bgcolor Code: <body bgcolor="silver"> <p>This page now has a SILVER background!</p> </body> HTML Bgcolor: This page now has a SILVER background! html . Bgcolor is one of those attributes that has become deprecated with the implementation of Cascading Style Sheets (see CSS Backgrounds). (RGB) and hexadecimal values. 255)".HTML Tutorial .the bgcolor attribute The bgcolor attribute is used to set the background color of an HTML element.</td> </tr></table> <table bgcolor="rgb(0. numeric.php[19/08/2012 10:29:51 AM] . we can bring that boring white web page to life by adding some color with the bgcolor attribute. It will serve as a visual aid for you as you are learning the mechanics of building a table. We'll go into more detail regarding these values so just sit tight.com Without much effort. RGB values "rgb(0. HTML Basic Colors: Black Yellow Red Maroon Gray Lime Green Olive Silver Aqua Blue Navy White Fuchsia Purple Teal While the table above illustrates only 16 colors. HTML Code: <table bgcolor="#ff0000" border="1"><tr> <td>A red colored table background using hexadecimal values "#FF0000". which is one of three different types of color values that can be used with the bgcolor attribute. 16 is surely not the limit to our color wheel. As we mentioned.</td> </tr></table> http://www. 0.tizag.Bgcolor html . This next example offers a sneak peak at what these values may look like. The reason we've included it in this tutorial is because it will give us an opportunity to introduce web colors and also add some life to our HTML web page as we continue to progress through this tutorial.

RGB values "rgb(0.coloring fonts. table rows. in fact. we can use numeric and hexadecimal values and calculate color shades.Bgcolor <table bgcolor="lime" border="1"><tr> <td>A lime colored table background using color names. html . instead. 0.HTML Tutorial . HTML Bgcolor Code: <table> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> <tr bgcolor="#FFFF00"><td>This Row is Yellow!</td></tr> <tr bgcolor="#AAAAAA"><td>This Row is Gray!</td></tr> </table> Alternating Table Row Colors: This This This This This This Row Row Row Row Row Row is is is is is is Yellow! Gray! Yellow! Gray! Yellow! Gray! Check out this "Scoreboard" we made with the use of font color and bgcolor! HTML Code: <table bgcolor="#000000"> <tr><td bgcolor="#009900" align="right"> <font color="#FFFF00">Green Bay</font></td> <td><font color="#FFFFFF">13</font></td></tr> <tr><td bgcolor="#0000FF" align="right"> <font color="#DDDDDD" >New England</font></td> <td><font color="#FFFFFF">27</font></td> </tr> </table> Scoreboard: http://www. Hexadecimal and numeric color values (RGB) allow HTML developers to expand the color wheel beyond 16 colors. Nonetheless.php[19/08/2012 10:29:51 AM] .com/htmlT/bgcolor. A blue colored table background using numeric. & table columns Here's a few common examples of bgcolor in action. We'll show you how to use them in our HTML Color Codes page. 255)". Way beyond 16. there's no need to memorize 256+ unique color combinations. A red colored table background using hexadecimal values "#FF0000".tizag.</td> </tr></table> Table Bgcolor Values: A lime colored table background using color names.

consider sticking with color names for setting your background color. For more information about colors. Examples: #99FFCC. #33AA44.php[19/08/2012 10:29:51 AM] . and blue. Shades of gray occur when the 3 paired amounts of each color are equal.100. Example. found something wrong in this lesson? Report a Bug or Comment on This Lesson .tizag." "#0A0A0A" Avoid bright.com/htmlT/bgcolor. check out our HTML Color Codes lesson. "#333333. "rgb(100.HTML Tutorial . There are 256 "true colors" with hexadecimal values. The colors are made out of hex-pairs for red.Your input is what keeps Tizag improving with time! http://www.Bgcolor Green Bay 13 New England 27 Ads by Google CSS Tutorial Font CSS Myspace Text Codes Go Back Continue tips If you are new to HTML.100)". green. headache-causing color schemes! Keep your coloring distinct and purposeful.

0.255)" White bgcolor="rgb(120.120. and it is a good idea to have an understanding of how they work.120)" Pink http://www. Green. By blending together different amounts of each color of light. BLUE).0.0)" Green bgcolor="rgb(0. Green.colors: numeric (rgb) values We do not recommend that you use RGB for safe web design because there are still a handful of internet browsers that do not support numeric color values. and blue light).HTML Tutorial . This concept is precisely what HTML numeric (RGB) values use. and blue light. Advertise on Tizag.255. Colors shown on a computer monitor or any digital device are constructed using various amounts of red.120)" Grey bgcolor="rgb(240.0)" Black bgcolor="rgb(255.Color Codes html . HTML Bgcolor Code Values: bgcolor="purple" html . or "gray" can be passed as a color value to the HTML bgcolor attribute. They specify the amount of each of the different colors of light to blend together (red.0)" Red bgcolor="rgb(0.com/htmlT/htmlcolorcodes. GREEN. these values may pop up from time to time.255)" Blue bgcolor="rgb(0. and Blue Values: bgcolor="rgb(255. In a numeric color value the RGB stands for Red.tizag. green.255.com HTML String Color Codes: Black Yellow Red Maroon Gray Lime Green Olive Silver Aqua Blue Navy White Fuchsia Purple Teal Any of the string values listed above such as "teal". "black". more complicated HTML coloring systems of numeric and hexadecimal values.40. However. Red. green. a computer monitor is able to display millions of different colors depending on the quality of the computer monitor.0. A numeric color value is essentially a comma-separated list of values ranging from 0 (none of that color) to 255 (fully that color) that are interpreted and then mixed together by the web browser and ultimately passed to the computer monitor for display.color codes Let's first review the 16 generic color values we mentioned previously before diving into the other. just like the name implies.php[19/08/2012 10:30:16 AM] . Blue (as in light) and the format for a RGB value is rgb(RED.

you may assume that the value #999999 is the largest hexadecimal value that is possible. the next two (44) are a green value. and are more widely compatible with web browsers.php[19/08/2012 10:30:16 AM] .com/htmlT/htmlcolorcodes. But now for the curve ball.represents the Green value.represents the Red value. It's probably easiest to understand by working through the calculation of our supposed maximum hexadecimal value #999999.68.Green Value 44 --> (4 * 16) + (4) = 68 green value <!-. comprised of three different components (the red.represents the Blue value. 00 .Red Value 00 --> (0 * 16) + (0) = 0 red value <!-. Since hexadecimal values are limited to six single digits. But why? This is an excellent question. MUCH easier with practice. These three sets of values combined form the final color shade. Hexadecimal Formula: Calculated: <!-. The hexadecimal system uses letters (A-F) to represent values greater than nine. and are currently the web standard for coloring HTML elements. The first two digits (00) represent a red value. 88 . the green.Blue Value 88 --> (8* 16) + (8) = 144 blue value By applying this formula to each value pair.hexadecimal The hexadecimal system is complex and difficult to understand at first.Color Codes html coloring system . Rest assured that the system becomes much. 44 . and the last (88) are the blue value. This is not the case. Let's separate each value and perform some calculations based on the formula we have listed above.HTML Tutorial . They are far more reliable. and as a blossoming web developer. we now have a value that resembles the rgb(0. Hexadecimal Formula: #999999 Calculated: http://www. Hexadecimal Formula: 2 digits at a time: ([first_digit]* 16) + ([second_digit]) = primary color value Let's apply this formula to an example and see how it works! HTML Color: Hexadecimal Example Code: bgcolor="#004488" We now know that this six digit value is actually three separate values working together to create a single shade.144) values we've seen before. it is critical that you understand hexadecimals to be capable of using them in your own websites. HTML Color: Hexadecimal Code: <!-.Hexadecimal Color Value --> bgcolor="#004488" A hexadecimal is a 6-digit numeric representation of a color. and the blue).tizag.

HTML Tutorial . you should be able to see that.Blue Value 05 --> (0 * 16) + (5) = 5 blue value Ads by Google Codes Binary Code Myspace Codes CSS Tutorial Go Back Continue http://www. by using letters.php[19/08/2012 10:30:16 AM] .Red Value 99 --> (9 * 16) + (9) = 153 red value <!-.153.Blue Value FF --> (9 * 16) + (9) = 153 blue value Based on the calculations above.Red Value CC --> (12 * 16) + (12) = 204 red value <!-. This does not coincide with numeric values that have a maximum value of rgb(255. Therefore.255) and it greatly limits what would be the available color spectrum. we are seeing a maximum value of rgb(153.153).Green Value 70 --> (7 * 16) + (0) = 112 green value <!-.Red Value AA --> (10 * 16) + (10) = 170 red value <!-.tizag. we are able to extend the color wheel giving HTML developers a greater selection of color options for web page designers. HTML Color: Hexadecimal Example Code: bgcolor="#AA93FF" Hexadecimal Formula: Calculated: <!-. Hexadecimal Color Values: Decimal 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 B C D E F Hexadecimal 0 1 2 3 4 5 6 7 8 9 A Taking a look at the next few calculations.com/htmlT/htmlcolorcodes.Green Value 99 --> (9 * 16) + (9) = 153 green value <!-.Color Codes <!-.Blue Value FF --> (15 * 16) + (15) = 255 blue value HTML Color: Hexadecimal Example #2: bgcolor="#CC7005" Hexadecimal Formula: Example #2 Calculated: <!-.255.Green Value 93 --> (9 * 16) + (3) = 147 green value <!-. letters are deployed to represent numbers and this is what makes it possible to extend the color wheel threshold to the max. The table below identifies how each letter (A-F) corresponds to the hexadecimal numeric equivalent.

check out our HTML Color Codes lesson.com/htmlT/htmlcolorchart.com If you would like more information about using HTML color. HTML Color Values: #000000 #000033 #000066 #000099 #0000CC #0000FF #003300 #003333 #003366 #003399 #0033CC #0033FF #006600 #006633 #006666 #006699 #0066CC #0066FF #009900 #009933 #009966 #009999 #0099CC #0099FF #00CC00 #00CC33 #00CC66 #00CC99 #00CCCC #00CCFF #00FF00 #00FF33 #00FF66 #00FF99 #00FFCC #00FFFF #330000 #330033 #330066 #330099 #3300CC #3300FF #333300 #333333 #333366 #333399 #3333CC #3333FF #336600 #336633 #336666 #336699 #3366CC #3366FF #339900 #339933 #339966 #339999 #3399CC #3399FF #33CC00 #33CC33 #33CC66 #33CC99 #33CCCC #33CCFF #33FF00 #33FF33 #33FF66 #33FF99 #33FFCC #33FFFF #660000 #660033 #660066 #660099 #6600CC #6600FF #663300 #663333 #663366 #663399 #6633CC #6633FF #666600 #666633 #666666 #666699 #6666CC #6666FF #669900 #669933 #669966 #669999 #6699CC #6699FF #66CC00 #66CC33 #66CC66 #66CC99 #66CCCC #66CCFF #66FF00 #66FF33 #66FF66 #66FF99 #66FFCC #66FFFF HTML Color Values Continued: #990000 #990033 #990066 #990099 #9900CC #9900FF #993300 #993333 #993366 #993399 #9933CC #9933FF #996600 #996633 #996666 #996699 #9966CC #9966FF #999900 #999933 #999966 #999999 #9999CC #9999FF #99CC00 #99CC33 #99CC66 #99CC99 #99CCCC #99CCFF #99FF00 #99FF33 #99FF66 #99FF99 #99FFCC #99FFFF #CC0000 #CC0033 #CC0066 #CC0099 #CC00CC #CC00FF http://www.Color Chart html .color chart Below is the hexadecimal representation for an array of HTML background colors.HTML Tutorial . The hexadecimal value that you see displayed in each box represents the value to get the background color of that cell.tizag. Advertise on Tizag.php[19/08/2012 10:30:58 AM] .

tizag.HTML Tutorial .php[19/08/2012 10:30:58 AM] .Your input is what keeps Tizag improving with time! http://www.Color Chart #CC3300 #CC3333 #CC3366 #CC3399 #CC33CC #CC33FF #CC6600 #CC6633 #CC6666 #CC6699 #CC66CC #CC66FF #CC9900 #CC9933 #CC9966 #CC9999 #CC99CC #CC99FF #CCCC00 #CCCC33 #CCCC66 #CCCC99 #CCCCCC #CCCCFF #CCFF00 #CCFF33 #CCFF66 #CCFF99 #CCFFCC #CCFFFF #FF0000 #FF0033 #FF0066 #FF0099 #FF00CC #FF00FF #FF3300 #FF3333 #FF3366 #FF3399 #FF33CC #FF33FF #FF6600 #FF6633 #FF6666 #FF6699 #FF66CC #FF66FF #FF9900 #FF9933 #FF9966 #FF9999 #FF99CC #FF99FF #FFCC00 #FFCC33 #FFCC66 #FFCC99 #FFCCCC #FFCCFF #FFFF00 #FFFF33 #FFFF66 #FFFF99 #FFFFCC #FFFFFF Ads by Google Color Chart PHP Tutorial Chart PHP CSS Tutorial Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .com/htmlT/htmlcolorchart.

The backgrounds of both the background color and image grow or shrink dynamically with the growth and shrinkage of the HTML element they are contained in.tizag. which may look awful. But we will run into problems if we add more content to the table itself and this element's height increases in size. The image begins to repeat itself to fill in the extended regions. this lesson does cover some important aspects of background elements that do apply to both the deprecated HTML background and the new CSS backgrounds as well.com/pics/htmlT/background.tizag.Background html .php[19/08/2012 10:32:07 AM] . HTML Repeating Background Image: <table height="200" width="150" background="http://www.com/pics/htmlT/background. However. we specified predetermined height and width attributes that matched the dimensions of the image we used in the background of the table element.background HTML background is the HTML attribute used to place pictures in the background of HTML elements. Everything looks great. Like the bgcolor attribute. Advertise on Tizag.background repeat In the first example.jpg" > <tr><td>This table has a background image</td></tr> </table> Repeating Background: This table has a background http://www. HTML Background Image Code: <table height="100" width="150" background="http://www. background is now deprecated and its use has been replaced by the use of CSS (see CSS Background).HTML Tutorial .com When we think of an HTML background.jpg" > <tr><td>This table has a background image</td></tr> </table> Background Image: This table has a background image html . we generally have only two options: a solid background color or a background image.tizag.com/htmlT/htmlbackground.

We can either live with it (until learning how to squelch it with CSS code) or. we've created a semi-transparent (. let's use an image that's a little bit better-suited for a background. If you do not wish to create your own transparent gradient then. This one has a small amount of transparency. that can be used to create overlay effects for our web pages. html .com/files/html/htmltransparentbackground. we mentioned that . feel free to download our transparent image from this example via this link: Transparent Backgrounds Let's now place another background image inside of a table as we did in the previous example. Transparent Background Images: <table height="163" width="480" background="http://www. Transparency can be added to any image via photo editing software.tizag.background repeat revisited Now that we are more familiar with transparent HTML backgrounds.tizag. we can create HTML elements with a semi-transparent background colors.Background image More often than not. this behavior causes more pain than pleasure. use this behavior to our advantage by thinking outside the box.com/htmlT/htmlbackground. By doing so. and if you don't currently have such software installed.gif and . tinting it blue.transparent background images In the HTML Images lesson.HTML Transparent Background Images http://www. but this time. we can take our previous example a step further and create a very nice effect called a gradient overlay.png) file to use as the background of the table.php[19/08/2012 10:32:07 AM] . we're going to take advantage of the repeating behavior of HTML background images and create a transparent gradient image file that is the same width as the target image (480 pixels). we have two options. download ours! . and as web designers.HTML Tutorial . html .png image types can be saved with transparencies and incorporated into HTML pages. To do this. but only 1 pixel tall.png" cellspacing="0" cellpadding="0"> <tr> <td> </td> </tr> </table> Transparent Background Example: As the code suggests. Doing so allows the color from this web page to radiate through the image.

and fiddle around with your backgrounds to come up with something enjoyable to look at. Although the image is only 1 pixel tall. use the smallest dimensions possible even as small as 1x1 if you can. found something wrong in this lesson? Report a Bug or Comment on This Lesson .com/htmlT/htmlbackground.com/files/html/htmltransparentgradient.png" cellspacing="0" cellpadding="0"> <tr> <td> <table height="163"width="480" background="http://www.tizag. Experiment.png"> <tr> <td></td> </tr> </table> </td> </tr> </table> Gradient Overlay Example: The gradient image we have provided is 480 pixels wide and only 1 pixel tall.tizag. Additionally.Your input is what keeps Tizag improving with time! http://www.com/files/html/htmltransparentbackground. tinker.tizag. Be creative. reducing the size of the image to 1 pixel in height drastically reduces the file size and will tremendously improve page performance.HTML Tutorial . the web browser continues to repeat this image indefinitely. Larger files load slow and inhibit the load time of your sites. We've done this for two reasons. Ads by Google Background Image Editing Photo Image Gimp Software Go Back Continue tips When creating patterns or transparent gifs.php[19/08/2012 10:32:07 AM] .Background Gradient Overlay Code: <table height="163" width="480" background="http://www. or for the entire height specified using the height attribute (163 pixels in this case).

HTML Form Element: <formg name="myWebForm" action="myServerSideScript. A complete formprocessing example using PHP can be found here: PHP Form Processing Example . and text input fields embedded inside of HTML documents with one goal in mind: to capture user input.com HTML forms are placed on a web page using the <form> tag. phone number. In the code above. identifying them as a single cohesive web form. HTML Email Form Element: <formg name="myWebForm" action="mailto:youremail@email. and/or JavaScript must be used with HTML forms to process data captured by HTML form elements.com" method="post"> <input type="checkbox" /> Checkbox 1<br /> <input type="text" /> Text Field 1<br /> <input type="submit" value="SUBMIT" /> </form> HTML Email Form: Checkbox 1 http://www. we've inserted some make-believe values to represent what a typical HTML form might look like behind the scenes. Unfortunately.web forms HTML web forms are a composition of buttons. This tag should encapsulate a series of other form elements. By doing things such as providing fields for user data such as names.php[19/08/2012 10:35:45 AM] .HTML Tutorial . A scripting language such as PHP. HTML alone is unable to process form data. web forms give users the opportunity to interact directly with a webpage.com/htmlT/forms. we can also adjust the action property slightly to have the form launch an email client instead of processing a make-believe server-side script. For the purpose of following along.Forms html . This will provide us with some form interactivity for us as we learn more about HTML forms. checkboxes.tizag. Advertise on Tizag. PERL. and email addresses.php" method="post"> <input type="checkbox" /> Checkbox 1<br /> <input type="text" /> Text Field 1<br /> <input type="submit" value="SUBMIT" /> </form> HTML Web Form: Checkbox 1 Text Field 1 SUBMIT HTML form elements rely on action and method attributes to identify where to send the form data for processing (action) and how to process the data (method).

HTML forms provide user interaction between visitors and the website while simultaneously collecting priceless user data from your users.php[19/08/2012 10:35:45 AM] . Remember to place submit buttons with the form tags to submit the document correctly. the user should see their default email client launch. it is common place to see form elements embedded in every web page. found something wrong in this lesson? Report a Bug or Comment on This Lesson .Forms Text Field 1 SUBMIT Now when the SUBMIT button is clicked.Your input is what keeps Tizag improving with time! http://www.tizag.HTML Tutorial . They are a vital tool for any webmaster. Ads by Google CSS Tutorial PHP Tutorial Tutorial CSS Go Back Continue tips Remember to set the name and value attributes for your forms so the document created will be neatly organized. and these days.com/htmlT/forms.

input element(s) HTML input elements are form elements such as text fields. button.HTML Tutorial . HTML Input Element Code: <formg name="myWebForm" action="mailto:youremail@email. the value attribute populates the field with a default value. which is the mark-up that identifies web form components. When used with a text field.php[19/08/2012 10:36:35 AM] .com" method="post"> Check Me: <input type="checkbox" /><br /> Name: <input type="text" /><br /> Yes: <input type="radio" /> No: <input type="radio" /><br /> <input type="submit" value="SUBMIT" /> <input type="reset" value="RESET" /> </form> HTML Input Elements: Check Me: Name: Yes: SUBMIT No: RESET html . and buttons. providing the web developer with a means to manipulate each element individually. Advertise on Tizag.tizag. the value attribute defines the text inside of the button. submit. reset.com The type attribute determines what kind of input element to render to the screen.com" method="post"> Check Me: <input type="checkbox" /><br /> Name: <input type="text" value="David" /><br /> Yes: <input type="radio" /> No: <input type="radio" /><br /> <input type="submit" value="Send" /> <input type="reset" value="Clear" /> </form> HTML Input Elements: Check Me: http://www. Options here include: text. radio. checkboxes. HTML Input Element Code: <formg name="myWebForm" action="mailto:youremail@email. checkbox. and hidden form elements. The name comes from the <input> tag.Input html . The <input> tag relies upon a few attributes to classify and name each form item. password.web forms: value attribute The value attribute plays a different role depending on the type of the input field. For example. Each has its own unique functionality and customizable presentation. when used with an HTML button.com/htmlT/htmlinput.

Input Name: David Yes: Send No: Clear html .HTML Tutorial . Perhaps the best approach is to use both attributes in your code.web forms: name and id attributes Setting the name and id attributes inside of form elements is a good habit.com/htmlT/htmlinput. HTML Input Element Code: <formg name="myWebForm" action="mailto:youremail@email.Your input is what keeps Tizag improving with time! http://www.tizag. The element name and/or id will later serve as the link between your HTML form and any server-side script that you may deploy later on to process that data.com" method="post"> Check Me: <input name="" id="" type="checkbox" /><br /> Name: <input name="userName" id="userName" type="text" /><br /> Yes: <input name="radioItem" id="radioItem" type="radio" /> No: <input name="radioItem" id="radioItem" type="radio" /><br /> <input name="submitForm" id="submitForm" type="submit" value="SUBMIT" /> <input name="resetForm" id="resetForm" type="reset" value="RESET" /> </form> HTML Input Elements: Check Me: Name: Yes: SUBMIT No: RESET Ads by Google CSS Tutorial Reset Code PHP Tutorial CSS Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson . since varying scripting languages demand one identifying attribute over the other.php[19/08/2012 10:36:35 AM] .

HTML Text Field Code: <form name="myWebForm" action="mailto:youremail@email. If you do plan on processing the data.Text Fields html .text fields Text fields offer a small rectangular box that's always ready to receive information from viewers. PERL.php[19/08/2012 10:37:09 AM] .com A text field is placed on a web page using the <input> tag. First and last names may generally vary from 8-24 characters in length. allowing for text entries to be typed inside each input field.com" method="post"> First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" /><br /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" /><br /> <input type="submit" value="SUBMIT" /> </form> HTML Text Field Size: http://www. Advertise on Tizag. HTML Text Field Size: <form name="myWebForm" action="mailto:youremail@email. while a typical email address may range from 12-36 digits. A descriptive title is also a great visual aid for providing a tool-tip display for your web elements. html . with the type attribute set with a value of "text". one needs to pass an integer value to the size attribute. JavaScript).text fields: size attribute To modify the visual presentation of a text field.com/htmlT/htmltextfields.com" method="post"> First: <input title="Please Enter Your First Name" id="first" name="first" type="text" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" /> <input type="submit" value="SUBMIT" /> </form> HTML Text Fields: First: Last: SUBMIT Text fields are designed to capture single words or phrases from the user. As the web designer. That information may then be processed through some kind of client/server side script (PHP. be sure to include the name and id attributes. Users will notice that when they click these fields.HTML Tutorial . the cursor will change from the typical arrow to a pipe character ( | ). The value represents how many characters a text field can display within the text field window. it is your job to analyze and predict the average length of characters that will be entered into each field by your users.tizag.

Text Fields First: Last: SUBMIT If the user happens to enter more digits than the size attribute value. HTML Text Field Maxlength: <form name="myWebForm" action="mailto:youremail@email.php[19/08/2012 10:37:09 AM] . they will be forced to scroll to the beginning and end of the input element. these characters will not be discarded. it just means that the user will not be able to see all of their input at once.text fields: maxlength attribute Maxlength is an optional attribute that accepts an integer value. html . It allows the developer to restrict the number of characters a user can type in a specific text field. Instead.tizag. which tends to discourage user interaction.HTML Tutorial .com" method="post"> First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="3" value="David" /><br /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="3" value="Smith" /><br /> <input type="submit" value="SUBMIT" /> </form> HTML Text Field Maxlength: First: Dav Last: Smi SUBMIT We've also called upon the value attribute to place some text inside the text fields for you! Ads by Google Text Myspace Text Text Fonts PHP Tutorial Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .Your input is what keeps Tizag improving with time! http://www.com/htmlT/htmltextfields.

com Password fields are placed on a website using the <input> tag and specify a value of "password" for the type attribute.password fields HTML password fields are designed to capture user input.HTML Tutorial .com" method="post"> Password: <input type="password" title="Please Enter Your Password" size="8" /><br /> <input type="submit" value="SUBMIT" /> </form> HTML Password Fields: Password: SUBMIT html . From data is processed in plain text and can be http://www. but disguise each character with an asterisk (*) instead of displaying the entered digits.Password html .php[19/08/2012 10:37:31 AM] .tizag. Advertise on Tizag. HTML Password Input Field Code: <form name="myWebForm" action="mailto:youremail@email. They offer a user on-screen privacy while he or she is entering a password. HTML Password Field Code: <form name="myWebForm" action="mailto:youremail@email.com" method="post"> First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="12" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="24" /><br /> Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br /> <input type="submit" value="SUBMIT" /> </form> HTML Password Input Fields: First: Password: SUBMIT Last: Password fields offer a very thin layer of security by visually concealing passwords. they offer no security whatsoever against maintaining the integrity of the password data.password fields: attributes Password form fields may be customized using the same attribute as outlined in the HTML Text Fields lesson.com/htmlT/htmlpassword.

Ads by Google Password Web Password A Password Name Password Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .php[19/08/2012 10:37:31 AM] .Your input is what keeps Tizag improving with time! http://www.Password readily sniffed by a hacker. unless HTTPS is used to encrypt the data.HTML Tutorial .tizag.com/htmlT/htmlpassword.

com/htmlT/htmlreset.com Set the type attribute of the <input> tag to "reset" to incorporate a reset button into a web form.php[19/08/2012 10:37:53 AM] . Advertise on Tizag. It wipes values from all fields by "resetting" the form to its default appearance.tizag. HTML Code: <form action="myphp.Reset html .reset buttons A reset button allows users to basically clear their web form.HTML Tutorial .php" method="post"> <input type="text" size="12" maxlength="12" /> <input type="text" size="24" maxlength="24" /> <input type="reset" value="Reset" /> </form> Reset Forms: Reset Fill out some information in the field boxes and press reset to experience a reset form! Ads by Google Reset Code Set and Reset CSS Tutorial Text Go Back Continue http://www. HTML Reset Button Code: <input type="reset" value="Reset" /> <input type="reset" value="Start Over" /> Two HTML Reset Buttons: Reset Start Over Placing a reset button inside of a form tag automatically associates the reset button with each form element and delivers a useful feature for your viewers.

Advertise on Tizag.php[19/08/2012 10:38:15 AM] . This can be changed to any value you wish.submit buttons Submit buttons send form data to a back-end process or application. If you've been following along. The back-end process then verifies and precesses the data.Submit html .com/htmlT/htmlsubmit.com Set the type attribute of the <input> tag to "submit" in order to place a submit button on a web page. HTML Code: <form method="post" action="mailto:youremail@youremail.tizag.HTML Tutorial .form submission .action Submission buttons send form data to whatever action has been designated by the action attribute of the encapsulating <form> element. we've also been using the deprecated mailto action to send form data to our default email client.com" > First:<input type="text" name="First" size="12" maxlength="12" /> Last:<input type="text" name="Last" size="24" maxlength="24" /> <input type="submit" value="Send Email" /> </form> Form Action: First: Last: Send Email http://www. html . eventually passing the information into some database application. we also changed what was written on our button using the value attribute. This will allow us to get a sense of how form values are transferred to an action. We learned about the action attribute in our HTML Forms lesson. HTML Submit Buttons: <input type="submit" value="Submit" /> <br /> <input type="submit" value="Send" /> <br /> <input type="submit" value="Submit Form" /><br /> Three HTML Submit Buttons: Submit Send Submit Form Notice that in the above example.

you can change the email address to a personal address and then send the results using the form.com/htmlT/htmlsubmit. and as your mail program opens.Your input is what keeps Tizag improving with time! http://www. Ads by Google Post Code Reset Code CSS Tutorial Word Tutorial Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .php[19/08/2012 10:38:15 AM] .Submit Fill out the above form.tizag.HTML Tutorial .

com" method="post"> <p>Please select every sport that you play. A scripting language such as PHP will easily handle this form element.com" method="post"> <p>Please select every sport that you play.com Deploy checkbox elements in a situation when the user must check all boxes that apply (or none). Soccer: Football: Baseball: Basketball: Checkboxes are used for instances where a user may wish to select multiple options.) HTML Checkbox Code: <form name="myWebForm" action="mailto:youremail@email.checkbox forms Setting the type attribute of an <input> tag to checkbox places a checkbox element onto the web page. returning all elements the user has checked (check out our PHP Form Example .</p> Soccer: <input type="checkbox" checked="yes" name="sports" value="soccer" /> <br /> Football: <input type="checkbox" name="sports" value="football" /> <br /> Baseball: <input type="checkbox" name="sports" value="baseball" /> <br /> Basketball: <input type="checkbox" checked="yes" name="sports" value="basketball" /> </form> http://www.</p> Soccer: <input type="checkbox" name="sports" value="soccer" /><br /> Football: <input type="checkbox" name="sports" value="football" /><br /> Baseball: <input type="checkbox" name="sports" value="baseball" /><br /> Basketball: <input type="checkbox" name="sports" value="basketball" /> </form> HTML Checkbox Form: Please select every sport that you play.com/htmlT/htmlcheckboxes.HTML Tutorial . such as in the instance of a "check all that apply" question.tizag.Checkboxes html . HTML Checkbox Selected Code: <form name="myWebForm" action="mailto:youremail@email. html checkboxes selected A checkbox element can be placed onto a web page in a pre-checked fashion by setting the checked attribute with a "yes" value. this element will now default to a checked status each time the HTML page is loaded. By doing so. Advertise on Tizag.php[19/08/2012 10:38:37 AM] .

Checkboxes HTML Pre-Selected Checkboxes: Please select every sport that you play.HTML Tutorial .tizag.php[19/08/2012 10:38:37 AM] . Soccer: Football: Baseball: Basketball: Ads by Google PHP Tutorial CSS Tutorial Tutorial PHP Codes Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .Your input is what keeps Tizag improving with time! http://www.com/htmlT/htmlcheckboxes.

com Place a radio element on to your web page by setting the type attribute of the <input> tag to "radio". They basically allow the user to "bubble" in their choice and limit each question to only one selection per radio group.radio forms Radio form elements resemble the "Scan-Tron" sheets you may have used when you were in school to take a test. This is how we link each element together and assure that the user is able to select only one answer. : Italian : Greek : Chinese By naming each field similarly with a type of cuisine.HTML Tutorial . we have created a relation.</h4> <input type="radio" name="food" /> : Italian<br /> <input type="radio" name="food" /> : Greek<br /> <input type="radio" name="food" /> : Chinese<br /> <h4>Please select your gender. Let's now take a look at how we can group together different sets of radio elements and simulate capturing two pieces of user data: gender and favorite food.com/htmlT/htmlradio.Radio html . Advertise on Tizag." of radio elements.com" method="post"> <h4>Please select your favorite food category.php[19/08/2012 10:39:01 AM] . http://www.tizag.</h4> <input type="radio" name="gender" /> : Male<br /> <input type="radio" name="gender" /> : Female<br /> Lt44/form> HTML Multiple Radio Fields: Please select your favorite food category. HTML Radio Input Code: <form name="myWebForm" action="mailto:youremail@email.</h4> <input type="radio" name="food" /> : Italian<br /> <input type="radio" name="food" /> : Greek<br /> <input type="radio" name="food" /> : Chinese<br /> </form> HTML Radio Fields: Please select your favorite food category. or a "grouping. HTML Multiple Radios: <form name="myWebForm" action="mailto:youremail@email.com" method="post"> <h4>Please select your favorite food category.

html .com" method="post"> <h4>Please select your favorite food category. just as you might expect to see when taking a multiple-choice test in school.Your input is what keeps Tizag improving with time! http://www. Ads by Google Radio Radio Web Radio Radio Radio on Line Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson . : Male : Female Words/values applied to the value attribute is the value or 'answer' passed to any server-side script language we may have in place to record the results. Remember to use radio elements only when you'd like the viewer to select only a single value. radios provide a very efficient way to capture very specific data from visitors.Radio : Italian : Greek : Chinese Please select your gender.tizag.</h4> <input type="radio" name="food" checked="yes" /> : Italian<br /> <input type="radio" name="food" /> : Greek<br /> <input type="radio" name="food" /> : Chinese<br /> </form> Default Italian: : Italian : Greek : Chinese Using either/or logic.radio: the checked attribute By using the checked attribute. we adjust the form to load with a value already checked as the default setting.com/htmlT/htmlradio. HTML Code: <form name="myWebForm" action="mailto:youremail@email.HTML Tutorial .php[19/08/2012 10:39:01 AM] .

CO</option> <option value="CN" >Connecticut -. They allow the user to select one or more values from a pre-determined series of options. HTML Selection Field Code: <select size="3" name="selectionField" multiple="yes" > <option value="CA" >California -.com/htmlT/htmlselect. html . only allow the user to choose a single value.CN</option> </select> HTML Selection Element: California -. similar to how list items <li> are added to ordered list elements (<ol>).CN Connecticut -. HTML Drop Down List: <select name="selectionField"> <option value="CA" >California -.php[19/08/2012 10:39:31 AM] .select fields HTML select fields provide essentially the same functionality as HTML Checkbox Fields . select fields.com Incorporating a select field into a web page is done using the <select> tag.CA California CA By default.CN With the above settings. the user is now able to select multiple values by pressing and holding the Control (ctrl) key and clicking each value.HTML Tutorial .CA </option> <option value="CO" >Colorado -. Doing so renders a read-only selection field on the page that can inform your users of their selections without allowing them to alter the selection.CA Colorado -. This behavior and appearance may be changed by adjusting the multiple and size attributes as demonstrated below.CO Connecticut -. Advertise on Tizag. HTML Read-Only Selection Field: http://www. you should set at least one of the values to be selected.tizag.disabling selection fields Disabling a selection field is achieved by setting the disabled attribute to "yes".CA </option> <option value="CO" >Colorado -.CA California -. popularly called drop down lists.CO</option> <option value="CN" >Connecticut -.-. List values are then added to the field using the <option> tag.CN</option> </select> HTML Drop Down List: California -.Select html .CO Colorado -. But before doing that.

HTML Tutorial .CO Connecticut -.php[19/08/2012 10:39:31 AM] .CN Ads by Google CSS Tutorial Myspace Text Font CSS Tutorials Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .Select <select size="3" name="selectionField" multiple="yes" disabled="yes"> <option value="CA" >California -.CN Connecticut -.Your input is what keeps Tizag improving with time! http://www.CO Colorado -.CO</option> <option value="CN" >Connecticut -.CA California -.CA Colorado -.CA </option> <option selected value="CO" >Colorado -.com/htmlT/htmlselect.CN</option> </select> HTML Read-Only Selections: California -.tizag.

tizag. the data is processed in plain text and is readily accessible by any novice hacker.com" method="post"> First: <input title="Please Enter Your First Name" id="first" name="first" type="text" size="12" maxlength="12" /> Last: <input title="Please Enter Your Last Name" id="last" name="last" type="text" size="18" maxlength="24" /><br /> Password: <input type="password" title="Please Enter Your Password" size="8" maxlength="8" /><br /><br /> <input type="hidden" name="orderNumber" id="orderNumber" value="0024" /><br /> <input type="submit" value="SUBMIT" /> <input type="reset" value="RESET" /> </form> HTML Hidden Fields: First: Password: Last: SUBMIT RESET It is important to note that HTML hidden fields do not offer any data security. This field can be customized using any of the attributes discussed in the HTML Input and HTML Text Fields lessons.Your input is what keeps Tizag improving with time! http://www. from one form to another or to store information that has already been entered in by the user. Like all HTML form elements. HTML Hidden Input Field: <form name="myWebForm" action="mailto:youremail@email.com/htmlT/htmlhidden.Hidden Fields html .HTML Tutorial .php[19/08/2012 10:39:59 AM] .com Place a hidden input field into your web forms using the <input> tag and set the type attribute to "hidden". Ads by Google PHP Tutorial CSS Tutorial Tutorial Hidden Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .hidden field Hidden fields allow a coder to pass values to form elements in a subtle manner. Advertise on Tizag. An experienced web developer will utilize these fields to pass temporary. or session-based data.

tizag.Upload html .upload forms Upload fields provide the interface that allows users to select a local file and upload it to the web server. HTML MAX_FILE_SIZE Code: <form name="myWebForm" action="mailto:youremail@email. An upload field renders as two parts -.HTML Tutorial . HTML Upload Field Code: <form name="myWebForm" action="mailto:youremail@email.com" method="post"> <input type="file" name="uploadField" /> </form> HTML Upload Field: no file selected html . HTML alone cannot ensure safe and secure file transferring.com Setting the type attribute of the <input> to "file" places the upload element on a web page. Advertise on Tizag. This allows them to quickly browse to the local file and automatically fills in the file path inside of the text field. Placing a restraint on an HTML upload field is accomplished by using a hidden input field with the name attribute set to MAX_FILE_SIZE. but it can offer a first line of defense. Using a MAX_FILE_SIZE hidden field can limit the size of files that are transferred.com/htmlT/htmlupload.max file size field File transferring across the internet is a complicated process and should include many layers of security. Ads by Google Upload Files File Upload Photo Upload FTP Upload http://www.com" method="post"> <input type="hidden" name="MAX_FILE_SIZE" value="500" /> <input type="file" name="uploadField" /> </form> HTML MAX_FILE_SIZE: no file selected The value attribute specifies the maximum allowable kilobytes (KB) for any file selected by the user.php[19/08/2012 10:40:23 AM] .an empty text field and a Browse button that opens up a local window explorer on the user's computer.

These constraints only impact how the textarea is rendered visually.php[19/08/2012 10:41:58 AM] . the attributes cols (columns) and rows control the rendered size of the textarea. Any text placed between the opening and closing textarea tags will be rendered inside the textarea element as the "default" text. Please limit your response to 500 characters.</textarea><br /> <textarea name="myTextArea" cols="45" rows="5">Please limit your response to 500 characters. Limits must be set with JavaScript and/or a server-side scripting language such as PHP." would be an ideal description.</textarea><br /> HTML Textarea Form Element: Please limit your response to 100 characters. "Please limit your response to 100 characters. If you've ever posted on a forum or left feedback on your favorite blog. the fields will just continue to grow as you type and you will be able to scroll up and down as you please.com/htmlT/htmltextarea. Something like.</textarea><br /> <textarea name="myTextArea" cols="40" rows="2">Please limit your response to 200 characters.tizag. This makes for a great way to give users an example or description of how to go about filling out the text area field.HTML Tutorial . you probably do so using an HTML textarea. Please limit your response to 200 characters. Advertise on Tizag. As you may have noticed. html .com Embed textareas in HTML documents using the <textarea> tag.textareas An HTML textarea is an oversized Text Field capable of capturing "blurb" type information from a user.textarea wrap http://www. In fact. if you fill up the fields above with text. and in no way do they limit the maximum number of characters a user can place inside the textarea.Textareas html . HTML Textarea Code: <textarea name="myTextArea"cols="20" rows="10">Please limit your response to 100 characters.

</textarea> HTML Text Area Word Wrap: As you can see many times word wrapping is often the desired look for your text areas.tizag.php[19/08/2012 10:41:58 AM] .com/htmlT/htmltextarea.Textareas The wrap attribute refers to how the user input reacts when it reaches the end of each row in the text field. Since it makes everything nice and easy to read. "Off" sets a textarea to ignore all wrapping and places the text into one ongoing line. html . "Hard" wraps the words inside the text box and places line breaks at the end of each line so that when the form is submitted the text will transfer as it appears in the field. HTML Text Area Word Wrap Code: <textarea cols="20" rows="5" wrap="hard"> As you can see many times word wrapping is often the desired look for your textareas.text areas: readonly Setting a "yes" or "no" value for the readonly attribute determines whether or not a viewer has permission to manipulate the text inside the text field. Since it makes everything nice and easy to read. Since it makes everything nice and easy to read. Wrapping can be defined using one of three values: soft hard off "Soft" forces the words to wrap once inside the textarea but once the form is submitted. and line breaks and spacing are not maintained. including line breaks and spacing. HTML Readonly Attribute: <textarea cols="20" rows="5" wrap="hard" readonly="yes"> http://www. </textarea> HTML Text Area No Word Wrap: As you can see many times word wrapping is often the desired look for your text areas.HTML Tutorial . Here's a textarea with no word wrapping at all! HTML Text Area No Word Wrap: <textarea cols="20" rows="5" wrap="off"> As you can see many times word wrapping is often the desired look for your textareas. Since it makes everything nice and easy to read and preserves line breaks. the words will no longer appear as such.

Disabling the textarea offers no security whatsoever. copying. Since it makes everything nice and easy to read.com/htmlT/htmltextarea.Your input is what keeps Tizag improving with time! http://www. Ctrl-Click on a Mac) the text to local clipboard and paste it anywhere he/she pleases. Since it makes everything nice and easy to read. html . Since it makes everything nice and easy to read. HTML Code: <textarea cols="20" rows="5" wrap="hard" disabled="yes"> As you can see many times word wrapping is often the desired look for your text areas.<br /> Keep in mind that just because users are unable to copy from the screen directly doesn't prevent them from taking a screen capture or extracting the data from the source code. This read-only behavior allows a web surfer to see and highlight the text inside the element.php[19/08/2012 10:41:58 AM] . the user may also Copy (Ctrl + C on a PC. </textarea> HTML Read Only Text Areas: As you can see many times word wrapping is often the desired look for your text areas.HTML Tutorial .tizag. When highlighted. or modifying the field in any way. </textarea> Disabled Textareas: As you can see many times word wrapping is often the desired look for your text areas.text areas: disabled Disabling the textarea altogether prevents the surfer from highlighting. Ads by Google Myspace Text CSS Tutorial Email to Text Text to HTML Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .Textareas As you can see many times word wrapping is often the desired look for your text areas. Since it makes everything nice and easy to read. To accomplish this. but he or she cannot alter it in any way. set the disabled property to "yes".

the <body> tag serves as the element containing all the content for the website. These attributes work much like those of a word processing program. which you can later modify through additional tags inside of the body.com html .php[19/08/2012 10:42:26 AM] .body As we mentioned. allowing you set pixel value margins for the left.base text The text attribute sets the text color of all text contained within the body tags.Sets a left hand margin for your body element.0.body margins Unique Attributes leftmargin . and everything else must be placed within the body element to ensure each element is displayed on your site. forms. Basically. HTML Code: <body topmargin="50"> <body leftmargin="50"> Margin Example-1: Top Margin Margin Example-2: Left Margin html . you use these tags to set a base color scheme.HTML Tutorial . Setting these attributes means that all the content you place within your body tags will honor the preset margin.Sets a margin along the top of your body element. top. unless otherwise noted.0)" > html . Think of it as a means to set the color of your text. or bottom of your website.tizag. Tables.com/htmlT/htmlbody. This method has deprecated. topmargin . lists. HTML Code: <body text="red" > or <body text="rgb(255. http://www.Body html . Advertise on Tizag. right.base links Along the same lines. A unique set of margin attributes are available to the body tag. we may also specify base colors for visited or unvisited links. paragraphs.

255)" vlink="rgb(0.php[19/08/2012 10:42:26 AM] .255.Body and we recommend that you use Cascading Style Sheets (CSS) instead. HTML Code: <body link="white" vlink="black" > or <body link="rgb(255.0)" > Setting a baselink is a great way to ensure your viewers will not receive the annoying error message that occurs with broken links.HTML Tutorial . Ads by Google Body Wrap Body Type Spa Body Wrap Body Wrap Spa Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .Your input is what keeps Tizag improving with time! http://www.0.com/htmlT/htmlbody.tizag.

we're happy to announce that this is a problem of the past. hidden .Determines if the media player is visible. Advertise on Tizag.HTML Tutorial .Music Codes html .mid" /> <p>Above is an embedded media player. HTML Embed Tag Code: <embed src="beethoven. change the attributes associated with display. width . 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 (The values are "true" or "false").The height of the media player.com html . To make your embedded player display properly. If this value is set to "true". the media player will not be displayed. html .music codes Inserting music onto a web page is relatively easy these days. To stop the music press stop/pause.php[19/08/2012 10:43:33 AM] .embed Music is inserted onto a web page with the use of the embed tag. and you will now have a much easier time than webmasters of the past. In the past. be sure to set the following attributes. multiple tags had to be used because browsers did not have a uniform standard for embedded media files. However. the above example will appear slightly different.related to display To customize the appearance of the embedded media player.mid" width="360" height="165" /> Embedded Music: http://www. There are other ways to link to music.</p> Depending on what kind of media software you or your visitor has installed.The width of the media player. Below is an minimalist example of the embed tag using the src attribute to define the media file's location. height . HTML Code: <embed src="beethoven.com/htmlT/music-code. but embed is now considered the standard for inserting media.tizag.embed attributes .

com/htmlT/music-code.mid" autostart="false" loop="false" volume="60" /> Customize Your Code: Ads by Google Music Player Play Music Audio Music Sound Music Go Back Continue tips Be careful when placing music on your website. If done poorly. as it can cause the media player to look rather distorted. found something wrong in this lesson? Report a Bug or Comment on This Lesson . you do not want to mess with the width and height of the media player.Allows media player to start automaticcaly (values are "true" and "false") loop .related to functionality To customize the functionality of the embedded media player.Music Codes Usually. be sure to set the following attributes. autostart . users will be annoyed by the music and will leave.Sets the volume of the media file (values range from "0" to "100") HTML Code: <embed src="beethoven.embed attributes . Only set the hidden attribute if you are certain your visitors will not want to stop the music.Your input is what keeps Tizag improving with time! http://www. be sure to set the loop attribute to "true".tizag. html .php[19/08/2012 10:43:33 AM] .HTML Tutorial . If you want your music to play over and over again.Sets whether or not the media file will repeat (values are "true" and "false") volume .

wmv .swf"> motiontween1easy.Apple's Quick Time Movie format . including Play. and volume.Microsoft's Window's Media Video file types . Notice that its controls.mpeg" autostart="false" /> Mpeg Movie: You may start and stop your movie files by either pressing the buttons at the bottom of the object or by singleclicking on the object itself. html . .mov) file types are also supported by the <embed> tag. HTML Code: <a href="http://www. are already included.php[19/08/2012 10:45:19 AM] . Macromedia's .video media types Flash (. variable compression.com HTML Code: <embed src="http://www. The src attribute defines what video file to embed into the page. Stop. are embedded into an HTML document using the <embed> tag.tizag.video codes Video files.mov . variable compression. . including YouTube videos.mpeg . variable compression.good quality.the accepted standard for web movie files created by the Moving Pictures Expert Group .com/htmlT/htmlvideocodes. The movie can be restarted by double-clicking your mouse. Advertise on Tizag. Here is a look at the <embed> tag with a global URL. . The list above outlines some of the most common "internet-ready" video files. Pause.mpeg formats may be the best options for use with the web because the high compression rate of these file types reduces file size and expedites the download/buffering periods for your page visitors.very high compression. much like the concept of "thumbnailing" images. great for the web!.good quality. The <embed> tag does not require a closing tag.tizag. You may also simply place the URL of your media files into the href attribute of an anchor tag.good quality.swf) and MOV (.com/pics/flash/motiontween1easy.swf .tizag.swf</a> http://www.Macromedia's Flash file types .com/files/html/htmlexample.Video Codes html .swf and .HTML Tutorial . .

HTML Tutorial - Video Codes

Flash Media:
motiontween1easy.swf

html - youtube videos
YouTube videos can be included in HTML documents, and Google offers the code to do so right on the same page as the video itself! The code offered by YouTube includes a small handful of parameters that help customize the embedded video object, and if you dive deep enough into the code, you will be able to identify the <embed> element and see the src attribute pointing to the URL of the media file.

YouTube Video Code:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1"> </param><param name="allowFullScreen" value="true"> </param><param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> </embed> </object>

Embed YouTube Video:

html - embed attributes
To customize the functionality of the embedded media player, be sure to set any of the following attributes. autostart - Controls the media's ability to start without prompting (values are "true" or "false") hidden - Controls whether or not the play/stop/pause embedded object is hidden or not (values are "true" or "false"; hide your embeded media if you just want background noise) loop - Controls the ability of the media to continuously play (values are "true" and "false") playcount - Sets a playcount which means the media will repeat itself x number of times, instead of continuously as with the loop attribute above (a playcount of "2" will repeat the video twice)

http://www.tizag.com/htmlT/htmlvideocodes.php[19/08/2012 10:45:19 AM]

HTML Tutorial - Video Codes

volumn - Sets a numeric value for the loudness of your media (values are "0" through "100")
Ads by Google

Video Codec

Avi Video

Video to MPEG Video Youtube

Go Back

Continue

found something wrong in this lesson?
Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

http://www.tizag.com/htmlT/htmlvideocodes.php[19/08/2012 10:45:19 AM]

HTML Tutorial - Meta

html - meta tags and meta data
Meta tags are used to supply information for search engines that will not be seen by the web surfer. These invisible units provide a flag for search engines to investigate and will then present that data to any potential users that stumble across your site through a search engine.

Advertise on Tizag.com

In the past, meta tags were the primary means for your site to be recognized by web spiders, but webmasters abused meta tags to improve their rankings in search engines. As a result, search engines have since modified their approach to keep results accurate. They now rely less on meta tags. Nevertheless, you should still include meta for those search bots that still do recognize them.

html - meta tag description
Search engines are the compasses of the web and help users navigate from site to site. Chances are, if you've used a search engine, you've probably seen the description meta tag in action. Meta elements must be placed inside of the <head> element in order for them to be recognizable by web crawlers and bots. The <meta> tag generally requires the name and content attributes to be working together to present your web page in a good light.

HTML Code:
<head> <meta name="description" content="Tizag contains webmaster tutorials." /> </head>

The description meta element allows the developer to summarize the content that can be found on the page and is often the first chance you'll have to attract visitors. These brief narratives and hooks are often the only opportunity you'll have to generate a lasting first impression.

html - keyword meta tags
Keywords and/or phrases may be placed inside the keyword meta element. You should specify the most popular search terms you believe someone would use to reach your website. A few years back, you could spam this meta tag with any and every keyword possible to gain ranking on search engines. Now, however, repeated words, or words that do not pertain to the content of the site, will not benefit your search engine rankings.

HTML Code:
<head> <meta name="keywords" content="keyword, key keywords, etc" /> </head>

Separate each phrase/word with a comma to create large lists. An example of the keywords meta tag for Tizag.com would go something like this:

http://www.tizag.com/htmlT/meta.php[19/08/2012 10:47:10 AM]

tutorials.refresh and redirect meta Later down the road. The most common use for this type of meta tag.tizag.espn. XHTML. stocks.HTML Tutorial . however.Meta HTML Code: <head> <meta name="keywords" content="HTML. This code will send your visitors to espn. A quick refresh may be necessary for news. A common reason might be that you have just purchased a better domain name and would like to retain your old visitors. you will be able to redirect visitors to the website of your choice or simply refresh your own page to update dynamic content automatically. The first argument specifies the number of seconds between refreshes or redirection and the 2nd argument is a URL of where the browser will relocate.com" /> </head> html .com after landing at your site for five seconds. just change the URL to the new site. yet still use your new domain. is redirection. html . tizag" /> </head> Keep in mind that driving traffic and having your site listed high in the search engine rankings is not as easy as placing keywords inside your meta element.tizag.). they are by no means a one-stop shop for your SEO needs.com" /> </head> The above code refreshes Tizag's home page every 10 seconds. HTML Redirect Meta Tag: <head> <meta http-equiv="refresh" content="10.php[19/08/2012 10:47:10 AM] . or any other time-sensitive information. you may need to redirect traffic to another domain. For the refresh meta tag. With the refresh meta tag.revised meta The revised meta tag records when the last update was done to the site. like shown below. url=http://www. While meta tags do play a small role in this process. the content attribute accepts two arguments separated by a semicolon (.com/htmlT/meta. HTML Page Refresh Meta Tag: <head> <meta http-equiv="refresh" content="5. CSS. url=http://www. To redirect a viewer automatically. HTML Code: <head> <meta name="revised" content="Happy New Year: 1/1/2003" /> </head> Don't forget to get a little meta with your pages! Ads by Google Meta Meta Tags Meta Tags Seo Seo Tutorial http://www. The phrase "Search Engine Optimization (SEO)" was coined to describe the rigorous process involved in achieving rankings in search engines.

Meta Go Back Continue tips It's important not to repeat words in the description or keywords meta tags Meta is not the only way to have your site seen by search engines. and then use a redirect meta tag to make life easier for your viewers that already may have your site bookmarked. Do not rely on meta tags alone to get your website listed on search engines.com/htmlT/meta. found something wrong in this lesson? Report a Bug or Comment on This Lesson .com) ever changes.HTML Tutorial .tizag. "Our site has moved" message as the existing domain.php[19/08/2012 10:47:10 AM] . remember to place a simple.Your input is what keeps Tizag improving with time! http://www. If your domain (.

we achieved similar results. This means that we can go ahead and pass a series of values at once.php[19/08/2012 10:47:36 AM] . but the code used to do so was cumbersome and inefficient. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. http://www. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. consectetur adipisicing elit. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. In fact. </p> HTML Styling: Here we've changed the font color of this paragraph to blue. sunt in culpa qui officia deserunt mollit anim id est laborum. sunt in culpa qui officia deserunt mollit anim id est laborum."> Here we've changed the font color of this paragraph to blue. Excepteur sint occaecat cupidatat non proident. HTML Font Styling: <p id="contentParagraph" style="font-family: Georgia . sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. changing several properties in one go. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident. the values passed to the style attribute are actually CSS code.tizag.Style html .style attribute Understanding the HTML style attribute will provide you with a preview into the Cascading Style Sheet (CSS) world. Simply separate each CSS attribute with a semicolon (. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. a number of HTML attributes and tags became obsolete.com/htmlT/htmlstyle. In the HTML Font lesson. </p> HTML Font Styling: Lorem ipsum dolor sit amet. HTML Style: Inline CSS: <p id="contentParagraph" style="color: #0900C4. Manipulation of the fonts and color of HTML elements is now accomplished through CSS styling.com When the style attribute was introduced into the HTML language along with CSS. CSS styling brings a whole new dimension to a website and offers endless customization of HTML elements and web page design. font-size: 12pt.styling As we mentioned.).HTML Tutorial . color: #0900C4. instead of stacking bulky formatting tags one inside the other. Ut enim ad minim veniam. Ut enim ad minim veniam. Advertise on Tizag."> Lorem ipsum dolor sit amet. the code we'll be using with style is indeed CSS code known as Internal CSS. consectetur adipisicing elit. html .

you're well on your way to mastering web design.php[19/08/2012 10:47:36 AM] .tizag.HTML Tutorial . Ads by Google CSS Tutorial Font CSS CSS Layouts CSS Fonts Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .com/htmlT/htmlstyle. With this new understanding of HTML and CSS.Your input is what keeps Tizag improving with time! http://www.Style Inline CSS with the HTML style attribute offers a great way to improve the visual display of web elements and pages.

the developer can take advantage of CSS styles and apply a font to all paragraphs at once by applying a font style to the <div> tag instead of coding the same style for each paragraph element.div element(s) The <div> tag is nothing more than a container unit that encapsulates other page elements and divides the HTML document into sections.</p> </div> HTML Div Element in Action: Subtitle This paragraph would be your content paragraph. Here's another content article right here.. Therefore the paragraph and heading elements should now be rendered blue in a Helvetica font. we can alter the appearance of each underlying element collectively by applying a style attribute to the <div> tag. we've applied a border to the <div> element just to help visualize the grouping of elements together... font: Helvetica 12pt.div inside of div Placing <div> elements inside of other <div> elements allows these elements to be further subdivided.</p> <p>Here's another content article right here. HTML Div Subdivision: <div id="myDiv" name="myDiv" title="Example Div Element" style="font-family: http://www.</p> <p>Here's another content article right here.Div html . For instance. html .tizag.com/htmlT/htmldiv.border: 1px solid black.</p> </div> With these text elements now grouped together under a <div> element. HTML Div Element Code: <div id="myDiv" name="myDiv" title="Example Div Element"> <h5>Subtitle</h5> <p>This paragraph would be your content paragraph."> <h5>Subtitle</h5> <p>This paragraph would be your content paragraph.HTML Tutorial . Advertise on Tizag. HTML Div Element Code: <div id="myDiv" name="myDiv" title="Example Div Element" style="color: #0900C4.. In addition.. Web developers use <div> elements to group together HTML elements and apply CSS styles to many elements at once..php[19/08/2012 10:48:37 AM] . by wrapping a set of paragraph elements into a <div> element.com Group together text elements within a <div> tag to slice up HTML documents. Elements housed within a <div> tag acquire any styles or properties applied to the master div element.

php[19/08/2012 10:48:37 AM] .HTML Tutorial . HTML documents that are properly divided and subdivided are easy to maintain and modify..</p> </div> <br /> <div id="subDiv2" name="subDiv2" title="Subdivision Div Element" style="color: #FF00FF.com/htmlT/htmldiv..Div Helvetica. Ads by Google CSS Tutorial CSS Font CSS Seo Tutorial Go Back Continue tips Use CSS Positioning with divs and code like a pro! found something wrong in this lesson? Report a Bug or Comment on This Lesson . border: 1px dotted black. Section 2 This paragraph would be your content paragraph.</p> <p>Here's another content article right here.. Here's another content article right here.. This concept is the foundation of which most web pages are now built.Your input is what keeps Tizag improving with time! http://www.</p> <p>Here's another content article right here..tizag..</p> </div> </div> Divs Inside of Divs: Section 1 This paragraph would be your content paragraph."> <div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000. font-size: 12pt. border: 1px solid black. Here's another content article right here.."> <h5>Section 2</h5> <p>This paragraph would be your content paragraph.."> <h5>Section 1</h5> <p>This paragraph would be your content paragraph.border: 1px dashed black.

Not many options exist with the body tag alone. Any element may be placed inside of a table.com/htmlT/htmllayout. A light bulb should be going off inside of your head as you explore how this system will allow for the creation of limitless layouts.standard layout A fairly standard layout consists of a banner near the top.php[19/08/2012 10:49:04 AM] . navigation. are the bread and butter of HTML layouts. the black one. These are the backbone to any great website.page layouts and templates HTML layout is very basic.Layouts html .com HTML Code: <table id="shell" bgcolor="black" border="1" height="200" width="300"> <tr> <td> <table id="inner" bgcolor="white" height="100" width="100"> <tr> <td>Tables inside tables!</td> </tr> </table> </td> </tr> </table> Tables inside tables: Tables inside tables! The white table (identified as inner) exists inside of the (shell) table. html . and your content or display box. including tables themselves! Advertise on Tizag. Tables. on the other hand. 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"> http://www.HTML Tutorial .tizag.

com/htmlT/htmllayout. The more specific you are about heights and widths. 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> Basic Layout 2: http://www. The code becomes complex rather fast.Layouts <table id="navigation" title="Navigation" border="0"> <tr><td>Links!</td></tr> <tr><td>Links!</td></tr> <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> Basic Layout: Place a banner here Links! Links! Links! Content goes here This approach is basic.php[19/08/2012 10:49:04 AM] . the less room there will be for error and debugging.tizag. so you will need to be sure to properly assign height and width values to your tables as well.HTML Tutorial . yet organized.

Your input is what keeps Tizag improving with time! http://www. yet organized. found something wrong in this lesson? Report a Bug or Comment on This Lesson . Use cellspacing to add usable borders to your content. Keep an organized spacing system so it becomes easy to spot where one table ends and the other beings.HTML Tutorial .php[19/08/2012 10:49:04 AM] .com/htmlT/htmllayout. Keep things neat.Layouts Banner goes here Links! Links! Links! Content goes here The code is quite a lot to look at. Be creative. SO break it up and organize it in your own way to make things easier for you. Ads by Google Layout HTML Layout Layouts HTML Layouts Go Back Continue tips Your code can become quite complicated rather fast.tizag.

html"> <frame src="content.html documents to be displayed inside of one browser window at a time.*"> <frame src="title. When someone clicks a link on the menu.com frames . and content in another frame. frameset cols="#%. which means the content (the 2nd column) will use the remaining width for itself (70%).*"> <frame src="menu.*"> <frame src="menu.html"> <frameset cols="30%. HTML Code: <html> <body> <frameset cols="30%.The width that each frame will have. With the addition of CSS and PHP.html".The parent tag that defines the characteristics of this frames page. This means that one page has no content on it. A good rule of thumb is to call the page which contains this frame information "index.tizag. read on. we chose the menu (the 1st column) to be 30% of the total page and used a "*".frames Frames allow for multiple . frames have become outdated.html"> <frame src="content.com/htmlT/frames. but if you wish to use them. In the above example. adding a banner or title frame Add a row to the top for a title and graphics with the code as follows: HTML Code: <html> <body> <frameset rows="20%. *" .HTML Tutorial .Frames html . Advertise on Tizag.php[19/08/2012 10:49:30 AM] . as that is typically a site's main page.The URL of the web page to load into the frame.a generic frame page Frames are most typically used to have a menu in one frame. frame src="" . Individual frames are defined inside it. but rather tells the browser which web pages you would like to open. that link is then opened in the content page.html"> </frameset> </body> </html> Frame Set: Here's the example: Frame Index frameset .html"> </frameset> </frameset> http://www. Here is a classic example of a basic "index" frameset with a menu on the left and content on the right.

html"> <frame src="content.html"> <frameset border="0" frameborder="0" framespacing="0" cols="30%.html"> <name="content" src="content. used by Internet Explorer.php[19/08/2012 10:49:30 AM] . border="#".Determines whether there will be a border. with the same value. to be safe.html"> <frameset cols="30%. HTML Code: <html> <body> <frameset rows="20%.HTML Tutorial . Note: Framespacing and border are the same attribute. so use both.html"> </frameset> </frameset> </body> </html> Frame Borders: Here's a visual:Visual 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. Here's an example of the same frameset without the borders. but some browsers only recognize one or the other.Modifies the border width.html"> </frameset> </frameset> </body> </html> HTML Code: <html> <head> <base target="content"> </head> <body> http://www.*"> <frame name="title" src="title.*"> <frame name="menu" src="menu.*"> <frame src="title.*"> <frame src="menu. HTML Code: <html> <body> <frameset border="0" frameborder="0" framespacing="0" rows="20%. These attributes appear within the frameset tag.com/htmlT/frames.Frames </body> </html> frameborder and framespacing You've probably noticed those ugly gray lines that appear between the frames. It is possible to remove these and manipulate the spacing between frames with frameborder and framespacing.html". frameborder="#" . framespacing="#" -Modifies the border width.tizag.

We also set the scrolling for our title banner to no.html" scrolling="yes" noresize> </frameset> </frameset> </body> </html> Noresize and Scrolling: Here's the Visual: Visual noresize . Instead of updating the menu on each page.html" scrolling="auto" noresize> <frame src="content.html file and be done with it! http://www.Determines whether the frames can be resized by the visitor or not.HTML Tutorial . However.tizag. and then we set the base target inside "menu. they are usually viewed as unacceptable by most web designers. HTML Code: <html> <body> <frameset border="2" frameborder="1" framespacing="2" rows="20%.html" to point to that frame.php[19/08/2012 10:49:30 AM] . Ads by Google Window Frames Window Frame CSS Menu Visual Frame Go Back Continue tips Frames can be simple and well-organized.*"> <frame src="menu.com/htmlT/frames.*"> <frame src="title. Using a simple menu and content frame design can reduce updates to massive sites. Always set the scrolling and resize options to optimize load time.Content Goes Here --> </body> </html> Frame Target: Here's the Visual: Visual We first named the content frame "content" on our frame page. Our frame page is now a perfectly functional menu and content layout! noresize and scrolling It's possible to further customize the <frame> tag using the noresize and scrolling attributes. because it does not make sense to have a scrollbar appear in the title frame.Frames <!-.Determines whether scrolling is allowed in the frame or not (values "true" and "false") We set the scrolling for our content frame to "yes" to ensure our visitors will be able to scroll if the content goes off the screen. you could simply update the menu.html" noresize scrolling="no"> <frameset border="4" frameborder="1" framespacing="4" cols="30%. (values "true" and "false") scrolling .

&frac14. HTML Code: <p>Everything that goes up. must come &nbsp.HTML Tutorial . or foreign cash symbols. to make . View a more complete list at: Entities Table additional spaces and <>.© . &yen. use the non-breaking space character entity.tizag. To get around this. Advertise on Tizag. &deg. must come down! http://www. &frac12. &pound.&nbsp. Each begins with a ampersand . such as copyright. so you need to display these characters using a different method.com There are three parts to every entity. &plusmn. &frac34. &reg. down!</p> Spaces: Everything that goes up. your web browser will only render a single space.. exist on your standard keyboard. &nbsp.&nbsp.&nbsp.php[19/08/2012 10:49:56 AM] .com/htmlT/entities.Copyright symbol. Expect complications if you forget to include all three parts of an entity.Entities html character entities An "entity" is a fancy term for a symbol. Several symbols.& Then the entities name . &curren. trademark. More Entities: ¢ £ ¤ ¥ ® ° ± ¼ ½ ¾ Cent English Pound Currency Yen Registered Trademark Degree(s) Plus or Minus ¼ Fraction ½ Fraction ¾ Fraction ¢ £ ¤ ¥ ® ° ± ¼ ½ ¾ &cent. Regardless of how many spaces you place between words.copy And finally a semicolon .&nbsp. Copyright: Combine &copy.

<br /> Greater than .< Greater than . </p> Less than Greater than: Less than . we use less than and greater than characters to create tags. Some older browsers do not support name values.&gt.> Body tag .tizag. HTML Code: <p> Less than .body&gt. so to use them on your website you will need entities. Ads by Google CSS Tutorial Word Tutorial XML Tutorial CSS Go Back Continue tips Names or Numbers? After looking at our entities table you probably noticed that there is a number value and a name value for each entity. Remember to use the entity code for < and > within your text.&lt.HTML Tutorial .<body> Take a few minutes to view and play with the symbols listed in the Entities Table . but it is not likely that someone will run into this problem today.Entities In HTML.&lt. Otherwise you might find strange errors occurring all over the place that you can't pinpoint. found something wrong in this lesson? Report a Bug or Comment on This Lesson .Your input is what keeps Tizag improving with time! http://www.php[19/08/2012 10:49:56 AM] .com/htmlT/entities. <br /> Body tag .

you set the type attribute equal to "text/javascript". make image rollovers for really cool menu effects.HTML Tutorial . html . HTML Code: <script type="text/vbscript"> <!--script ***The VBScript code should go in this spot*** --> </script> For VBScript.com/htmlT/script.commenting scripts --> http://www. This will prevent browsers that do not support JavaScript or have had JavaScript disabled from displaying the JavaScript code in the web browser. We can also include a comment around the JavaScript code. you must once again make use of the <script> tag. you are going to use the <script> tag. you can create dynamic web pages. which is similar to the process of specifying CSS.scripts There are two very popular scripting languages that are commonly used in HTML to make web pages come alive. JavaScript and VBScript are very useful scripting languages to know. 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 javascript code If you want to insert JavaScript code into your HTML. check out our JavaScript Tutorial. However. It may be simpler just to download someone else's scripting code and modify it for use on your web page (if they have given you permission to do so. If you would like to know more about JavaScript. which is similar to specifying CSS. if you have the time.Scripts html . Below is the correct code to insert VBScript code onto your site.tizag. Advertise on Tizag. or even validate the data on your HTML forms before users submit their information. you set the type attribute equal to "text/vbscript".php[19/08/2012 10:50:38 AM] . html vbscript how to To insert VBScript code onto your website. of course!).<!-. HTML Code: <script type="text/javascript"> <!--script ***Some JavaScript code should go here*** --> </script> For JavaScript.com With HTML scripts. JavaScript and VBScript are very complicated compared to HTML. Below is the correct code to insert embedded JavaScript code onto your site.

write("Hello World!") //--> </script> With this example. we are jumping far ahead. HTML Code: <script> <!-document.php[19/08/2012 10:50:38 AM] . You will learn that it is only once they are placed within the <script> tags that the browser executes the scripts without causing errors.tizag. Just be sure you understand when to use comments and where to look for them. Ads by Google The Script Script Type Script Java Script Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson .Scripts Scripting languages such as JavaScript and VBScript must be commented out as well.HTML Tutorial .com/htmlT/script. They are a very useful tool for any large HTML project.Your input is what keeps Tizag improving with time! http://www.

Bold html . Ads by Google Font Myspace Fonts Fonts CSS Tutorial Go Back Continue http://www. Advertise on Tizag. The idea here is to use the bold tag in quick formatting situations.</p> Dictionary: Cardio: Latin word meaning of the heart.bold Creating bold text can be accomplished through the use of the <b> bold tag.tizag. HTML Code: <p><b>Don't</b> touch that!</p> More Bold: Don't touch that! You may also use it to separate words from their meaning in a dictionary fashion.com HTML Code: <b>This text is entirely BOLD!</b> Bold: This text is entirely BOLD! Place the bold tag inside other elements to highlight important words and give feeling to your text.com/htmlT/htmlbold. It is not a good idea to bold entire paragraphs or other elements simply because you want the text to be larger or fatter.php[19/08/2012 10:51:05 AM] . HTML Code: <p><b>Cardio:</b> Latin word meaning of the heart.HTML Tutorial . Use Cascading Style Sheets for font styles and sizes.

.php[19/08/2012 10:52:12 AM] . HTML Code: <p>Avoid losing floppy disks with important school.HTML Tutorial . let's say you had a HUGE school or work project to complete.</p> Two HTML Paragraphs: Avoid losing floppy disks with important school/work projects on them. let's say you had a HUGE school or work. 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.. Advertise on Tizag. essays. Off hand..5" floppy disk. HTML Code: <p align="justify">For instance. html .com/htmlT/htmlparagraphs. Here the align attribute is used to "justify" our paragraph.. Place your documents. let's say you had a HUGE school or work project to complete. or videos onto your web server and access them from anywhere in the world. http://www. It's also a quick way to write reminders or notes to yourself. there is an alternative. there is an alternative.</p> <p>For instance. or videos onto your web server and access them from anywhere in the world. Place your documents. The paragraph tag is very basic and a great introductory tag for beginner's because of its simplicity. For instance. photos. (the ones you have gained so far) it is easy.. let's say you had a HUGE school. However. Off hand. Use the web to keep your content so you can access it from anywhere in the world.. essays. However.5" floppy disk. the easiest way to transfer the documents from your house could be a 3.com The <p> tag defines a paragraph. Using this tag places a blank line above and below the text of the paragraph. the easiest way to transfer the documents from your house could be a 3. With simple html skills.paragraph justification Paragraphs can be formatted in HTML much the same as you would expect to find in a word processing program.</p> Justified Text Alignment: For instance. photos.Paragraphs paragraph tag <p> Publishing any kind of written work requires the use of a paragraph.tizag.

5" floppy disk.5" floppy disk.</p> Right Text Alignment: For instance. However.. let's say you had a HUGE school or work project to complete.Paragraphs html .Your input is what keeps Tizag improving with time! http://www. Each line of the paragraph has now been centered inside the display window. or videos onto your web server and access them from anywhere in the world. Place your documents.tizag. there is an alternative.HTML Tutorial . Ads by Google Word Tutorial CSS Tutorial Reset Code Myspace Text Go Back Continue found something wrong in this lesson? Report a Bug or Comment on This Lesson . the easiest way to transfer the documents from your house could be a 3. Place your documents. Off hand.. However. essays. or videos onto your web server and access them from anywhere in the world.php[19/08/2012 10:52:12 AM] .. the easiest way to transfer the documents from your house could be a 3. let's say you had a HUGE school or work project to complete. Every line of the paragraph above is now aligned to the right hand side of the display box. let's say you had a HUGE school or work. html .paragraph centering HTML Code: <p align="center">For instance.com/htmlT/htmlparagraphs. photos. photos. essays. there is an alternative.. Off hand.paragraph align right HTML Code: <p align="right">For instance. let's say you had a HUGE school or work.</p> Centered Text Alignment: For instance.

com/htmlT/htmlheadings. Advertise on Tizag. Each time you place a heading tag.Headings html . Copy(Highlight. let's say you had a HUGE school or work project to complete... Or make your own essay paragraphs. your web browser automatically places a line break in front of your beginning tag and after your ending tag exactly the same as with <p> tags.php[19/08/2012 10:52:56 AM] . with 1 being the largest heading and 6 being the smallest.HTML Tutorial . By placing text inside of <h1> (heading) tags.com HTML Code: <body> <h1>Headings</h1> <h2>are</h2> <h3>great</h3> <h4>for</h4> <h5>titles</h5> <h6>and subtitles</h6> </body> Place these lines into your HTML file and you should get what is displayed below... then Ctrl C) or code the following in the body of your page or a new page.</p> http://www. Off .headings 1:6 A heading in HTML is just what you might expect. Headings are numbered 1-6. This is a built in attribute so to speak associated with the heading tag. essay walkthrough Let's tie together headings and paragraphs to form an essay.tizag. a title or subtitle. Headings 1-6: headings are great for titles and subtitles Notice that each heading has a line break before and after each heading display. the text displays bold and the size of the text depends on the number of heading (1-6). HTML Code: <h1 align="center">Essay Example</h1> <p>Avoid losing floppy disks with important school/work projects.</p> <p>For instance.

(the ones you have gained so far by now) it is easy. class. etc. the easiest way to transfer the documents from View the page in a new window. Off hand. With simple html skills.HTML Tutorial . Use the web to keep your content so you can access it from anywhere in the world.php[19/08/2012 10:52:56 AM] . let's say you had a HUGE school or work project to complete. id.tizag. Ads by Google CSS Tutorial Seo Tutorial PHP Tutorial Tutorial Go Back Continue tips Headings have no unique attributes tied to them. For instance.Headings HTML Essay: Essay Example Avoid losing floppy disks with important school/work projects on them. found something wrong in this lesson? Report a Bug or Comment on This Lesson .Your input is what keeps Tizag improving with time! http://www.com/htmlT/htmlheadings. It's also a quick way to write reminders or notes to yourself. just the general align.

lists. Ohio We have created a possible address for a letter head.HTML Tutorial .tizag.Line Breaks line breaks Line breaks are different than most of the tags we have seen so far. HTML Code: <p>Sincerely. Advertise on Tizag.com HTML Code: <p> Will Mateson<br /> Box 61<br /> Cleveland. Kevin Sanders Vice President Ads by Google CSS Tutorial Word Tutorial Text Myspace Text Go Back Continue tips The line break tag can be placed within other HTML elements such as paragraphs.php[19/08/2012 10:53:38 AM] . A line break ends the line you are currently on and resumes on the next line. Ohio<br /> </p> Address: Will Mateson Box 61 Cleveland. Use the <br /> tag within the <p> (paragraph) tag. Placing <br /> within the code is the same as pressing the return key in a word processor. and headings.com/htmlT/htmlbr.<br /> <br /> <br /> Kevin Sanders<br /> <i>Vice President</i></p> Closing Letter: Sincerely. tables. http://www. The line break tag will also come in handy toward the end of our letter.

Your input is what keeps Tizag improving with time! http://www.php[19/08/2012 10:53:38 AM] .tizag. save larger page layout issues for tables and the align attribute.HTML Tutorial . found something wrong in this lesson? Report a Bug or Comment on This Lesson . Remember that the line break tag does not require a closing tag.com/htmlT/htmlbr.Line Breaks Use the line break tag to solve minor formatting issues.

"The Fellowship of the Ring" JRR Tolkien. Note: the horizontal rule tag has no ending tag like the line break tag. HTML Code: <hr /> <p>1.<br /> 2.php[19/08/2012 10:54:09 AM] . A table of contents or perhaps a bibliography. 2. Ads by Google Word Tutorial PHP Tutorial CSS Tutorial PHP Codes http://www.</p> Bibliography: 1.HTML Tutorial . its results can be outstanding. JRR Tolkien. the horizontal rule tag can come in handy when publishing work. all this tag does is draw a line across your content. JRR Tolkien.com HTML Code:: <hr /> Use <hr /><hr /> Them <hr /> Sparingly <hr /> Display:: Use Them Sparingly Aside from our exaggerated example. and used properly. "The Hobbit". As you can see.tizag.Horizontal Rule html horizontal rule Use the <hr /> tag to display lines across the screen. Advertise on Tizag. "The Hobbit". "The Fellowship of the Ring" JRR Tolkien.com/htmlT/htmlhr.

This is great when receiving emails from a website to an email account that handles more mail than just from that one link on your site.Populates the subject of the email with the information that you provide. We recommend the HTML Form Email that usually reduces the amount of potential spam. This is probably confusing and may take a little while to get used to. rather than specifying a web URL. Instead you use a standard HTML anchor tag <a> and set the href property equal to the email adddress. HTML Code: <a href= "mailto: a@b. you should know that when you place your email on your website. it is very easy for computer experts to run programs to harvest these types of emails for spamming.Email create html email Making an HTML email link on your page is quick and simple.tizag. If you are going to put your email link on a public website.com" >Email Example</a> Email Link: Email Example additional html email code By adding a couple extra goodies onto the email address in href you can have both the SUBJECT and the BODY of the email automatically populated for your visitors. HTML Code: <a href= "mailto:abc@mail. By defining a uniform subject that people will automatically have when clicking the link you will be able to tell right away whether or not an email came from the website or from another source (as long as your visitors don't mess with the subject that you give them). html email tag There actually is not a separate HTML tag for creating an HTML email link.php[19/08/2012 10:54:32 AM] . Subject .HTML Tutorial .com/htmlT/email.com?subject=Web Page Email&body=This email is from your website" > 2nd Email Example</a> Complete Email: 2nd Email Example http://www. Body .Populates the body of the email with the information that you provide.com Another option to allow people to send you emails without exposing yourself to massive amounts of spam is to create an HTML form that gathers data from the user and emails it to your email account. be sure that you have anti-spam software! Advertise on Tizag. However.

italic(s) The italics tags should be used to highlight a key word or phrase. the output is the same regardless of what tag we used to emphasize our definitions. Nothing fancy here.Italic html . They are short and sweet. Advertise on Tizag. The two commonly used tags to place italics onto a website are <em> and <i>. use them to emphasize text or words.com/htmlT/htmlitalic.com HTML Code: Italic <i>tag</i>! <em>Emphasized</em> Text! Create a <blockquote>blockquote</blockquote>! Format your <address>addresses</address>! HTML Italics: Italic tag! Emphasized Text! Create a blockquote! Format your addresses! Each of the above tags is generally interpreted by the browser in a similar way. http://www. HTML Code: <b>HTML</b> <i>Hyper Text Markup Language</i> or <b>HTML</b> <em>Hyper Text Markup Language</em> HTML Dictionary: HTML Hyper Text Markup Language or HTML Hyper Text Markup Language As you can see. Rather.php[19/08/2012 10:54:55 AM] .HTML Tutorial .tizag. html bold and italics Both the <b> and the <i> tags can be placed within other elements to format your texts. just be sure you open and close the tags in the same order. These tags are not intended to to stylize or shape your font face. They can also be used together to bold and italicize words or phrases.

found something wrong in this lesson? Report a Bug or Comment on This Lesson .tizag.Your input is what keeps Tizag improving with time! http://www.Italic HTML Code: <p>Phillip M. Ads by Google PHP Tutorial CSS Tutorial Word Tutorial Font Go Back Continue tips The best advice is just to keep things simply and avoid going overboard with these tags. we will discuss HTML Links in a later lesson.</p> Format Links: Include several external links throughout your texts as references to your viewers.php[19/08/2012 10:54:55 AM] .com/htmlT/htmlitalic. Rogerson <b><i>MD</i></b></p> Display: Phillip M.HTML Tutorial . As you can see. HTML Code: <p>Include several external links throughout your texts as references to your viewers. we will discuss <a href="" target="_blank" title="Tizag Links"> <b><i>HTML Links</i></b> </a> in a later lesson. Rogerson MD This is brilliant when placing text links directly inside your paragraphs as a reference to the user. the code becomes quite complex as you begin to place more and more tags on the board. Be assured that once you learn Cascading Style Sheets the code will become simpler.

HTML Tutorial - Code

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.

Advertise on Tizag.com

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>!

Computer Code:
This text has been formatted to be computer code ! Use this tag to separate any computer code you wish to display on your website. It is not always necessary, but the tag exists if you so desire.

html - code links
Another use may be to separate links on your page and give them a unique look. This tag provides a very quick way to accomplish this.

HTML Code:
<p>Feel free to search <code>Google</code> for anything you wish to find on the internet.</p>

Code Links:
Feel free to search Google for anything you wish to find on the internet.
Ads by Google

Reset Code

Codes

CSS Tutorial

All Codes

Go Back

Continue

tips
It is not a good idea to use this tag to format large pieces of text. Often times you will lose track of the tags and debugging can be tedious.

http://www.tizag.com/htmlT/htmlcode.php[19/08/2012 10:55:19 AM]

HTML Tutorial - Superscript

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.

Advertise on Tizag.com

HTML Code:
<p>This text is <sup>superscripted!</sup></p>

Superscript:
This text is superscripted!

html - exponents
We may use the superscripting technique to express exponential expressions.

HTML Code:
2<sup>3</sup> = 8 14<sup>x</sup>

Exponents:
23 = 8 14 x

html - footnotes
You may have come across several texts where a referencing, superscripting directs your attention to the bottom of the page. These footnotes can also be created with the superscript tag.

HTML Code:
<p>"It was a lover's tryst<sup>1</sup>." <hr /> 1. Secret meeting between lovers

Footnotes:
"It was a lover's tryst 1 ." 1. Secret meeting between lovers
Ads by Google

Script Type

Word Tutorial

Script

PHP Tutorial

http://www.tizag.com/htmlT/htmlsuperscript.php[19/08/2012 10:55:59 AM]

HTML Tutorial - Subscript

html - subscript
Use the subscript tags to place subscripted text onto your websites.

Advertise on Tizag.com

HTML Code:
<p>This text is <sub>subscripted!</sub></p>

Subscripted:
This text is subscripted!

html - chemical compounds
This tag allows for the creation of chemical compounds.

HTML Code:
<p>H<sub>2</sub>0 - Water <p>O<sub>2</sub> - Oxygen <p>CO<sub>2</sub> - Carbon Dioxide

Chemical Compounds:
H 2 O - Water O2 - Oxygen CO2 - Carbon Dioxide
Ads by Google

Script Fonts

Script

CSS Tutorial

Tutorials

Go Back

Continue

found something wrong in this lesson?
Report a Bug or Comment on This Lesson - Your input is what keeps Tizag improving with time!

http://www.tizag.com/htmlT/htmlsubscript.php[19/08/2012 10:56:29 AM]

we use the <del> tag. Clean my room 2.com HTML Code: <p>This text is <del>scratched</del> out!</p> Strikethrough: This text is scratched out! html .Strikethrough html .php[19/08/2012 10:56:52 AM] .HTML Tutorial . Cook Dinner 3.check off tasks Here's an example of a web developer checking off tasks as they are performed. Tutorial Finished found something wrong in this lesson? http://www.tizag. Wash Dishes Ads by Google Myspace Text CSS Tutorial Codes Myspace Fonts Go Back tips Place the del tags inside your links or anchor tags for a unique look. HTML Code: <ol> <li>Clean my room</li> <li><del>Cook Dinner</del></li> <li><del>Wash Dishes</del></li> </ol> To Do List: 1.strikethrough To place text onto your site that appears to be crossed out.com/htmlT/htmlstrikethrough. Advertise on Tizag.

Sign up to vote on this title
UsefulNot useful