Digital Diary

Sorted by HEX Value Same list sorted by color name Color Name HEX Color Shades Mix Black   #000000   Shades Mix Navy   #000080   Shades Mix DarkBlue   #00008B   Shades Mix MediumBlue   #0000CD   Shades Mix Blue   #0000FF   Shades Mix

Color Names Supported by All Browsers 147 color names are defined in the HTML and CSS color specification (17 standard colors plus 130 more). The table below lists them all, along with their hexadecimal values. Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Click on a color name (or a hex value) to view the color as the background-color along with different text colors:

CSS Colors Colors in CSS can be specified by the following methods: Hexadecimal colors RGB colors RGBA colors HSL colors HSLA colors Predefined/Cross-browser color names

Color Values CSS colors are defined using a hexadecimal (hex) notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex 00). The highest value is 255 (hex FF). Hex values are written as 3 double digit numbers, starting with a # sign. Color Examples Color Color HEX Color RGB   #000000 rgb(0,0,0)   #FF0000 rgb(255,0,0)   #00FF00 rgb(0,255,0)   #0000FF rgb(0,0,255)   #FFFF00 rgb(255,255,0)

Measurement Values Unit Description % percentage in inch cm centimeter mm millimeter em 1em is equal to the current font size. 2em means 2 times the size of the current font. E.g., if an element is displayed with a font of 12 pt, then '2em' is 24 pt. The 'em' is a very useful unit in CSS, since it can adapt automatically to the font that the reader uses

Commonly Used Font Combinations The font-family property should hold several font names as a "fallback" system, to ensure maximum compatibility between browsers/operating systems. If the browser does not support the first font, it tries the next font. Start with the font you want, and end with a generic family, to let the browser pick a similar font in the generic family, if no other fonts are available: Example p{font-family:"Times New Roman", Times, serif}

Aural style sheets use a combination of speech synthesis and sound effects to make the user listen to information, instead of reading information. Aural presentation can be used: by blind people to help users learning to read to help users who have reading problems for home entertainment in the car by print-impaired communities

CSS Selectors In CSS, selectors are patterns used to select the element(s) you want to style. The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3). Selector Example Example description CSS . class .intro Selects all elements with class="intro" 1 # id #firstname Selects the element with id="firstname" 1 * * Selects all elements 2 element p Selects all <p> elements 1 element,element div,p Selects all <div> elements and all <p> elements 1 element element div p Selects all <p> elements inside <div> elements

The "CSS" column indicates in which CSS version the property is defined (CSS1, CSS2, or CSS3). Animation Properties Property Description CSS @keyframes Specifies the animation 3 animation A shorthand property for all the animation properties below, except the animation-play-state property 3 animation-name Specifies a name for the @keyframes animation 3 animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle 3 animation-timing-function Specifies the speed curve of the animation 3

Animation Properties Property Description CSS @keyframes Specifies the animation 3 animation A shorthand property for all the animation properties below, except the animation-play-state property 3 animation-name Specifies a name for the @keyframes animation 3 animation-duration Specifies how many seconds or milliseconds an animation takes to complete one cycle 3 animation-timing-function Specifies the speed curve of the animation 3

CSS Summary This tutorial has taught you how to create style sheets to control the style and layout of multiple web sites at once. You have learned how to use CSS to add backgrounds, format text, add and format borders, and specify padding and margins of elements. You have also learned how to position an element, control the visibility and size of an element, set the shape of an element, place an element behind another, and to add special effects to some selectors, like links. For more information on CSS, please take a look at our CSS examples and our CSS reference .

Grouping Selectors In style sheets there are often elements with the same style. h1 { color:green; } h2 { color:green; } p { color:green; }

All CSS Dimension Properties The number in the "CSS" column indicates in which CSS version the property is defined (CSS1 or CSS2). Property Description Values CSS height Sets the height of an element auto length % inherit 1 max-height Sets the maximum height of an element none length % inherit 2 max-width Sets the maximum width of an element none length % inherit 2

The display property specifies if/how an element is displayed, and the visibility property specifies if an element should be visible or hidden. Box 1 Box 2

Positioning The CSS positioning properties allow you to position an element. It can also place an element behind another, and specify what should happen when an element's content is too big. Elements can be positioned using the top, bottom, left, and right properties. However, these properties will not work unless the position property is set first. They also work differently depending on the positioning method. There are four different positioning methods.

What is CSS Float?

Aligning Block Elements A block element is an element that takes up the full width available, and has a line break before and after it. Examples of block elements: <h1> <p> <div>

Syntax The syntax of pseudo-classes: selector:pseudo-class {property:value;} CSS classes can also be used with pseudo-classes: selector.class:pseudo-class {property:value;} Anchor Pseudo-classes

CSS pseudo-elements are used to add special effects to some selectors. Syntax The syntax of pseudo-elements: selector:pseudo-element {property:value;} CSS classes can also be used with pseudo-elements: selector.class:pseudo-element {property:value;}

Style HTML Elements With Specific Attributes It is possible to style HTML elements that have specific attributes, not just class and id. Note: IE7 and IE8 support attribute selectors only if a !DOCTYPE is specified. Attribute selection is NOT supported in IE6 and lower. Attribute Selector The example below styles all elements with a title attribute:

Media Types Some CSS properties are only designed for a certain media. For example the "voice-family" property is designed for aural user agents. Some other properties can be used for different media types. For example, the "font-size" property can be used for both screen and print media, but perhaps with different values. A document usually needs a larger font-size on a screen than on paper, and sans-serif fonts are easier to read on the screen, while serif fonts are easier to read on paper.

Image Sprites An image sprite is a collection of images put into a single image. A web page with many images can take a long time to load and generates multiple server requests. Using image sprites will reduce the number of server requests and save bandwidth. Image Sprites - Simple Example Instead of using three separate images, we use this single image ("img_navsprites.gif"):

Example 1 - Creating a Transparent Image The CSS3 property for transparency is opacity . First we will show you how to create a transparent image with CSS. Regular image: The same image with transparency:

CSS can be used to create an image gallery. Add a description of the image here Add a description of the image here Add a description of the image here Add a description of the image here

Navigation Bars Having easy-to-use navigation is important for any web site. With CSS you can transform boring HTML menus into good-looking navigation bars. Navigation Bar = List of Links A navigation bar needs standard HTML as a base. In our examples we will build the navigation bar from a standard HTML list. A navigation bar is basically a list of links, so using the <ul> and <li> elements makes perfect sense: Example

The CSS Box Model All HTML elements can be considered as boxes. In CSS, the term "box model" is used when talking about design and layout. The CSS box model is essentially a box that wraps around HTML elements, and it consists of: margins, borders, padding, and the actual content. The box model allows us to place a border around elements and space elements in relation to other elements. The image below illustrates the box model:

CSS Border Properties The CSS border properties allow you to specify the style and color of an element's border. Border Style The border-style property specifies what kind of border to display. None of the border properties will have ANY effect unless the border-style property is set! border-style values: none: Defines no border dotted: Defines a dotted border dashed: Defines a dashed border solid: Defines a solid border

Margin The margin clears an area around an element (outside the border). The margin does not have a background color, and is completely transparent. The top, right, bottom, and left margin can be changed independently using separate properties. A shorthand margin property can also be used, to change all margins at once. Possible Values Value Description auto The browser sets the margin. The result of this is dependant of the browser length Defines a fixed margin (in pixels, pt, em, etc.) % Defines a margin in % of the containing element It is possible to use negative values, to overlap content.

Padding The padding clears an area around the content (inside the border) of an element. The padding is affected by the background color of the element. The top, right, bottom, and left padding can be changed independently using separate properties. A shorthand padding property can also be used, to change all paddings at once. Possible Values Value Description length Defines a fixed padding (in pixels, pt, em, etc.) % Defines a padding in % of the containing element

CSS background properties are used to define the background effects of an element. CSS properties used for background effects: background-color background-image background-repeat background-attachment background-position Background Color The background-color property specifies the background color of an element. The background color of a page is defined in the body selector:

text formatting This text is styled with some of the text formatting properties. The heading uses the text-align, text-transform, and color properties. The paragraph is indented, aligned, and the space between characters is specified. The underline is removed from the "Try it yourself" link. Text Color The color property is used to set the color of the text. With CSS, a color is most often specified by: a HEX value - like "#ff0000"

Difference Between Serif and Sans-serif Fonts On computer screens, sans-serif fonts are considered easier to read than serif fonts.

tyling Links Links can be styled with any CSS property (e.g. color, font-family, background, etc.). Special for links are that they can be styled differently depending on what state they are in. The four links states are: a:link - a normal, unvisited link a:visited - a link the user has visited a:hover - a link when the user mouses over it a:active - a link the moment it is clicked

The CSS list properties allow you to: Set different list item markers for ordered lists Set different list item markers for unordered lists Set an image as the list item marker List In HTML, there are two types of lists: unordered lists - the list items are marked with bullets ordered lists - the list items are marked with numbers or letters With CSS, lists can be styled further, and images can be used as the list item marker.

he look of an HTML table can be greatly improved with CSS: Company Contact Country Alfreds Futterkiste Maria Anders Germany Berglunds snabbköp Christina Berglund Sweden Centro comercial Moctezuma Francisco Chang Mexico Ernst Handel Roland Mendel Austria Island Trading Helen Bennett UK Königlich Essen Philip Cramer Germany Laughing Bacchus Winecellars Yoshi Tannamuri Canada Magazzini Alimentari Riuniti Giovanni Rovelli Italy North/South Simon Crowther UK Paris spécialités Marie Bertrand France The Big Cheese Liz Nixon USA Vaffeljernet Palle Ibsen Denmark Table Borders

While various sources of regulatory guidance address contractual information security requirements for financial institutions, the characteristic feature of these requirements is that they are flexible and risk-based. That is to say, the guidance avoids prescribing specific language that must appear in every contract or a contractual requirement that certain technologies be used, such as a particular encryption standard. Often the guidance does not even use the word "must" at all, instead reminding financial institutions that they "should" consider various recommended types of contractual protections (of course, those of us used to dealing with bank regulators know that "should" does not necessarily mean optional). The overall thrust is that while some sort of written contract is required to hold the vendor responsible for the security of customer information, regulators are primarily concerned with informed risk assessments, i.e., maki

Three Ways to Insert CSS There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline style External Style Sheet

The id and class Selectors In addition to setting a style for a HTML element, CSS allows you to specify your own selectors called "id" and "class". The id Selector The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". The style rule below will be applied to the element with id="para1":

CSS Syntax A CSS rule has two main parts: a selector, and one or more declarations: The selector is normally the HTML element you want to style. Each declaration consists of a property and a value. The property is the style attribute you want to change. Each property has a value.

CSS Example body { background-color:#d0e4fe; } h1 { color:orange; text-align:center; } p { font-family:"Times New Roman"; font-size:20px; }

What You Should Already Know Before you continue you should have a basic understanding of the following: HTML / XHTML If you want to study these subjects first, find the tutorials on our Home page . What is CSS? CSS stands for C ascading S tyle S heets

Ordered Alphabetically DTD : indicates in which HTML 4.01 / XHTML 1.0 DTD the tag is allowed. S=Strict, T=Transitional, and F=Frameset Tag Description DTD <!--...--> Defines a comment STF <!DOCTYPE>   Defines the document type STF <a> Defines an anchor STF <abbr> Defines an abbreviation STF <acronym> Defines an acronym STF

Standard Event Attributes HTML 4 added the ability to let events trigger actions in a browser, like starting a JavaScript when a user clicks on an element. To learn more about programming events, please visit our JavaScript tutorial and our DHTML tutorial . Below is the standard event attributes that can be inserted into HTML / XHTML elements to define event actions. <body> and <frameset> Events The two attributes below can only be used in <body> or <frameset>: Attribute Value Description onload script Script to be run when a document load

The attributes listed below are standard, and are supported by all HTML and XHTML tags, with a few exceptions. Core Attributes Not valid in base, head, html, meta, param, script, style, and title elements. Attribute Value Description class classname Specifies a classname for an element id id Specifies a unique id for an element style style_definition Specifies an inline style for an element title text  Specifies extra information about an element

Get darker/lighter shades of any color. Select color:   #FF0000 Selected color: Darker/lighter shades: Hex values:   #000000   #1A0000   #330000   #4C0000   #660000   #800000   #990000   #B20000   #CC0000   #E60000   #FF0000 #FF1919 #FF3333 #FF4D4D #FF6666 #FF8080 #FF9999 #FFB2B2 #FFCCCC #FFE6E6 #FFFFFF

ISO Character Sets It is the International Standards Organization (ISO) that defines the standard character-sets for different alphabets/languages. The different character-sets being used around the world are listed below: Character set Description Covers ISO-8859-1 Latin alphabet part 1 North America, Western Europe, Latin America, the Caribbean, Canada, Africa ISO-8859-2 Latin alphabet part 2 Eastern Europe ISO-8859-3 Latin alphabet part 3 SE Europe, Esperanto, miscellaneous others ISO-8859-4 Latin alphabet part 4 Scandinavia/Baltics (and others not in ISO-8859-1) ISO-8859-5 Latin/Cyrillic part 5 The languages that are using a Cyrillic alphabet such as Bulgarian, Belarusian, Russian and Macedonian

ASCII Printable Characters ASCII Character HTML Entity Code Description   &#32; space ! &#33; exclamation mark " &#34; quotation mark # &#35; number sign $ &#36; dollar sign % &#37; percent sign & &#38; ampersand ' &#39; apostrophe

Reserved Characters in HTML Some characters are reserved in HTML and XHTML. For example, you cannot use the greater than or less than signs within your text because the browser could mistake them for markup. HTML and XHTML processors must support the five special characters listed in the table below: Character Entity Number Entity Name Description " &#34; &quot; quotation mark ' &#39; &apos; (does not work in IE) apostrophe  & &#38; &amp; ampersand < &#60; &lt; less-than

HTML Symbol Entities This entity reference includes mathematical symbols, Greek characters, various arrows, technical symbols and shapes. Note: Entity names are case sensitive. Math Symbols Supported by HTML Character Entity Number Entity Name Description ∀ &#8704; &forall; for all ∂ &#8706; &part; part ∃ &#8707; &exist; exists ∅ &#8709; &empty; empty ∇ &#8711; &nabla; nabla ∈ &#8712; &isin; isin ∉ &#8713; &notin; notin ∋ &#8715; &ni; ni ∏ &#8719; &prod; prod

URL Encoding Reference ASCII Character URL-encoding space %20 ! %21 " %22 # %23 $ %24 % %25 & %26 ' %27

ISO Language Codes The HTML lang attribute can be used to declare the language of a Web page or a portion of a Web page. This is meant to assist search engines and browsers. According to the W3C recommendation you should declare the primary language for each Web page with the lang attribute inside the <html> tag, like this: <html lang="en"> ... </html> In XHTML, the language is declared inside the <html> tag as follows: <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

When a browser requests a service from a web server, an error might occur. This is a list of HTTP status messages that might be returned: 1xx: Information Message: Description: 100 Continue Only a part of the request has been received by the server, but as long as it has not been rejected, the client should continue with the request 101 Switching Protocols The server switches protocol

Document Your Skills Knowledge is power, especially in the current job market. Documentation of your skills enables you to advance your career, or help you to start a new one. Get a Certificate Getting a certificate proves your commitment to upgrade your skills, gives you the credibility needed for more responsibilities, larger projects, and a higher salary.

You can test your HTML skills with W3Schools' Quiz. The Test The test contains 20 questions and there is no time limit. The test is not official, it's just a nice way to see how much you know, or don't know, about HTML

<!DOCTYPE> Is Mandatory An XHTML document consists of three main parts: the DOCTYPE declaration the <head> section the <body> section The basic document structure is: <!DOCTYPE ...> <html>

More XHTML Syntax Rules Attribute names must be in lower case Attribute values must be quoted Attribute minimization is forbidden The XHTML DTD defines mandatory elements Attribute Names Must Be In Lower Case

XHTML is a stricter and cleaner version of HTML. What Is XHTML? XHTML stands for EXtensible HyperText Markup Language XHTML is almost identical to HTML 4.01 XHTML is a stricter and cleaner version of HTML XHTML is HTML defined as an XML application XHTML is a W3C Recommendation of January 2000 . XHTML is supported by all major browsers.

HTML 4.01 Multimedia Tags Tag Description <applet> Deprecated. Defines an embedded applet <embed> Deprecated in HTML4 but not in HTML5. Defines an embedded object <object> Defines an embedded object <param> Defines a parameter for an object

The easiest way to display videos (others or your own) in HTML is to use YouTube. Playing a YouTube Video in HTML If you want to display a video in a web page, you can upload the video to YouTube and insert HTML code to display the video in your web page. Example - YouTube iFrame <iframe width="420" height="345"

Videos can be played in HTML by many different methods. Playing Videos in HTML Example <video width="320" height="240" controls="controls">   <source src="movie.mp4" type="video/mp4" />   <source src="movie.ogg" type="video/ogg" />   <source src="movie.webm" type="video/webm" /> <object data="movie.mp4" width="320" height="240">   <embed src="movie.swf" width="320" height="240" /> </object> </video>

The purpose of the <object> element is to support HTML helpers (Plug-Ins) HTML Helpers (Plug-Ins)      A helper application is a program that can be launched by the browser to "help". Helper applications are also called Plug-Ins. Helper applications can be used to play audio and video (and much more). Helper applications are launched using the <object> tag. One advantage of using a helper application to play video and audio, is that you can let some (or all) of the player settings be controlled by the user. Most helper applications allow manual (or programmed) control over the volume settings and play functions like rewind, pause, stop and play. The Best Way to Play Videos in HTML?

Using the Yahoo Media Player is a different approach. You simply let Yahoo do the job of playing your songs. Example <a href="song.mp3">Play Song</a> <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> Using the Yahoo player is free. To use it you insert this piece of JavaScript at the bottom of your web page: <script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Example <audio controls="controls" height="50px width="100px">   <source src="song.mp3" type="audio/mpeg" />   <source src="song.ogg" type="audio/ogg" /> <embed height="50px width="100px" src="song.mp3" /> </audio>

Using the <audio> Element The <audio> element is an HTML 5 element, unknown to HTML 4, but it works in new browsers. Example <audio controls="controls">   <source src="song.mp3" type="audio/mpeg" />   <source src="song.ogg" type="audio/ogg" /> Your browser does not support this audio </audio>

Example <audio controls="controls" height="50px" width="100px">   <source src="song.mp3" type="audio/mpeg" />   <source src="song.ogg" type="audio/ogg" /> <embed height="50px" width="100px" src="song.mp3" /> </audio> sing The <embed> Element

The easiest way to add Audio to your web pages? The Yahoo Media Player (described at the bottom of this page) is definitely a favorite. It plays mp3 and a variety of other formats. You can add it to your page (or blog) with a single line of code, and easily turn your HTML page into a professional playlist. Example

Sounds can be played in HTML by many different methods. Problems and Solutions Displaying audio in HTML is not easy! You must add a lot of tricks to make sure you audio files will play in all browsers (Internet Explorer, Chrome, Firefox, Safari, Opera) and on all hardware (PC, Mac , iPad, iPhone). In this chapter W3Schools summarizes the problems and the solutions.

Sound Formats Format File Description MIDI .mid .midi The MIDI (Musical Instrument Digital Interface) is a format for electronic music devices like synthesizers and PC sound cards. MIDI files do not contain sound, but digital musical instructions (notes) that can be played by electronics (like your PC's sound card). Click here to play The Beatles . Since MIDI format only contains instructions (notes), MIDI files are extremely small. The example above is only 23K in size but it plays for nearly 5 minutes. MIDI is supported by many software systems over a large range of platforms. MIDI is supported by all the most popular Internet browsers.

Video Formats          The MP4 format is the new and upcoming format for internet video. It is supported by YouTube, Flash players and HTML5. Format File Description AVI .avi The AVI (Audio Video Interleave) format was developed by Microsoft. The AVI format is supported by all computers running Windows, and by all the most popular web browsers. It is a very common format on the Internet, but not always possible to play on non-Windows computers. WMV .wmv The Windows Media format is developed by Microsoft. Windows Media is a common format on the Internet, but Windows Media movies cannot be played on non-Windows computer without an extra (free) component installed. Some later Windows Media movies cannot play at all on non-Windows computers because no player is available

Multimedia comes in many different formats. It can be almost anything you can hear or see like text, pictures, music, sound, videos, records, films, animations, and more. On the Internet you can often find multimedia elements embedded in web pages, and modern web browsers have support for a number of multimedia formats. In this tutorial you will learn about different multimedia formats and how to use them in your web pages.

HTML Summary This tutorial has taught you how to use HTML to create your own web site. HTML is the universal markup language for the Web. HTML lets you format text, add graphics, create links, input forms, frames and tables, etc., and save it all in a text file that any browser can read and display. The key to HTML is the tags, which indicates what content is coming up. Now You Know HTML, What's Next? XHTML

To make your web site visible to the world, you'll have to store it on a web server. Hosting your own Web site Hosting your web site on your own server is always an option. Here are some points to consider: Hardware Expenses

URL encoding converts characters into a format that can be transmitted over the Internet. URL - Uniform Resource Locator Web browsers request pages from web servers by using a URL. The URL is the address of a web page, like: http://quettaresults.blogspot.com/ URL Encoding

The table below lists some common schemes: Scheme Short for.... Which pages will the scheme be used for... http HyperText Transfer Protocol Common web pages starts with http://. Not encrypted https Secure HyperText Transfer Protocol Secure web pages. All information exchanged are encrypted ftp File Transfer Protocol For downloading or uploading files to a website. Useful for domain maintenance file   A file on your computer

A URL is another word for a web address. A URL can be composed of words, such as "w3schools.com", or an Internet Protocol (IP) address: 192.68.20.50. Most people enter the name of the website when surfing, because names are easier to remember than numbers. URL - Uniform Resource Locator

Note: Entity names are case sensitive! Result Description Entity Name Entity Number   non-breaking space &nbsp; &#160; < less than &lt; &#60; > greater than &gt; &#62; & ampersand &amp; &#38; ¢ cent &cent; &#162; £ pound &pound; &#163;

HTML Entities Some characters are reserved in HTML. It is not possible to use the less than (<) or greater than (>) signs in your text, because the browser will mix them with tags. To actually display reserved characters, we must use character entities in the HTML source code. A character entity looks like this: & entity_name ; OR &# entity_number ; To display a less than sign we must write: &lt; or &#60; Tip:

The HTML script Element The <script> tag is used to define a client-side script, such as a JavaScript. The script element either contains scripting statements or it points to an external script file through the src attribute. The required type attribute specifies the MIME type of the script. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. The script below writes Hello World! to the HTML output: Example

The HTML meta Element Metadata is information about data. The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The <meta> tag always goes inside the head element. The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

The HTML head Element The head element is a container for all the head elements. Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more. The following tags can be added to the head section: <title>, <base>, <link>, <meta>, <script>, and <style>. The HTML title Element The <title> tag defines the title of the document. The title element is required in all HTML/XHTML documents.

Start Creating a stunning, Flash website. It's easy and free! Wix.com offers you a simple, powerful, drag & drop editing platform to create stunning Flash websites, layouts, and more. With added e-commerce features such as search engine visibility and professional tools, Wix is the ultimate solution for creating a spectacular site.

In HTML 4.0, all formatting can be removed from the HTML document, and stored in a style sheet. How to Use Styles When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet: External style sheet Internal style sheet Inline styles

The doctype declaration is not an HTML tag; it is an instruction to the web browser about what version of the markup language the page is written in. The doctype declaration refers to a Document Type Definition (DTD). The DTD specifies the rules for the markup language, so that the browsers render the content correctly. The doctype declaration should be the very first thing in an HTML document, before the <html> tag. Tip: Always add a doctype to your pages. This helps the browsers to render the page correctly! HTML 4.01 Strict This DTD contains all HTML elements and attributes, but does NOT INCLUDE presentational or deprecated elements (like font and center). Framesets are not allowed: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> HTML 4.01 Transitional This DTD contains all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets are not allowed

A doctype declaration refers to the rules for the markup language, so that the browsers render the content correctly. Example An HTML document with a doctype of HTML 4.01 Transitional: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Title of the document</title> </head> <body> The content of the document...... </body> </html>

Wix.com offers you a simple, powerful, drag & drop editing platform to create stunning Flash Facebook pages. No coding. No downloading. Totally free. Simply choose one of our templates or start from scratch. Upload your own content and use from our huge library. Click publish when you're ready to see your design live on your Facebook page. eStores let visitors shop from your page Stunning graphics enhance your brand Image galleries promote your products Contact forms & maps make connecting easy

HTML Layout Tags Tag Description <table> Defines a table <div> Defines a section in a document

Tip: The biggest advantage of using CSS is that, if you place the CSS code in an external style sheet, your site becomes MUCH EASIER to maintain. You can change the layout of all your pages by editing one file. To learn more about CSS, study our CSS tutorial . Tip: Because advanced layouts take time to create, a quicker option is to use a template. Search Google for free website templates (these are pre-built website layouts you can use and customize).

The div element is a block level element used for grouping HTML elements. The following example uses five div elements to create a multiple column layout, creating the same result as in the previous example: Example <html> <body> <div id="container" style="width:500px"> <div id="header" style="background-color:#FFA500;"> <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div> <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;"> <b>Menu</b><br /> HTML<br /> CSS<br /> JavaScript</div> <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;"> Content goes here</div> <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> Copyright © 2011 </div> </div>

Web page layout is very important to make your website look good. Design your webpage layout very carefully. Website Layouts Most websites have put their content in multiple columns (formatted like a magazine or newspaper). Multiple columns is created by using <table> or <div> tags. Some CSS are normally also added to position elements, or to create backgrounds or colorful look for the pages. HTML Layouts - Using Tables The simplest way of creating layouts is by using the HTML <table> tag. The following example uses a table with 3 rows and 2 columns - the first and last row spans both columns using the colspan attribute:<html> <body> <table width="500" border="0"> <tr> <td colspan="2" style="background-color:#FFA500;"> <h1>Main Title of Web Page</h1> </td> </tr> <tr valign="top"> <td style="background-color:#FFD700;width:100px;

<html> <body> <h1>My First Heading</h1> <p>My first paragraph.</p> </body> </html>

HTML Basic Document <html> <head> <title>Title of document goes here</title> </head> <body> Visible text goes here... </body> </html>

Sorted by Hex Value Same list sorted by color name Color Name HEX Color Shades Mix Black   #000000   Shades Mix Navy   #000080   Shades Mix DarkBlue   #00008B   Shades Mix

Color Names Supported by All Browsers 147 color names are defined in the HTML and CSS color specification (17 standard colors plus 130 more). The table below lists them all, along with their hexadecimal values. Tip: The 17 standard colors are: aqua, black, blue, fuchsia, gray, grey, green, lime, maroon, navy, olive, purple, red, silver, teal, white, and yellow. Click on a color name (or a hex value) to view the color as the background-color along with different text colors: Sorted by Color Name

Color Values HTML colors are defined using a hexadecimal notation (HEX) for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (in HEX: 00). The highest value is 255 (in HEX: FF). HEX values are specified as 3 pairs of two-digit numbers, starting with a # sign. Color Values

HTML Frames With frames, you can display more than one HTML document in the same browser window. Each HTML document is called a frame, and each frame is independent of the others. The disadvantages of using frames are: Frames are not expected to be supported in future versions of HTML Frames are difficult to use. (Printing the entire page is difficult). The web developer must keep track of more HTML documents

An ordered list: The first list item The second list item The third list item An unordered list:

HTML Tables<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>

Look! Styles and colors This text is in Verdana and red This text is in Times and blue This text is 30 pixels high

The <font> tag is deprecated in HTML 4, and removed from HTML5. The World Wide Web Consortium (W3C) has removed the <font> tag from its recommendations. In HTML 4, style sheets (CSS) should be used to define the layout and display properties for many HTML elements. The example below shows how the HTML could look by using the <font> tag: Example

This text is bold This text is big This text is italic This is computer output This is subscript and superscript

HTML documents are divided into paragraphs. HTML Paragraphs Paragraphs are defined with the <p> tag. Example <p>This is a paragraph</p> <p>This is another paragraph</p>

HTML Headings Headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading. Example <h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>

HTML Attributes HTML elements can have attributes Attributes provide additional information about an element Attributes are always specified in the start tag Attributes come in name/value pairs like: name="value"

HTML documents are defined by HTML elements. HTML Elements An HTML element is everything from the start tag to the end tag: Start tag * Element content End tag * <p> This is a paragraph </p> <a href="default.htm" > This is a link </a> <br />     * The start tag is often called the opening tag . The end tag is often called the closing tag .

<img src="w3schools.jpg" width="104" height="142" />

<a href="http://www.quettaonline.com">This is a link</a>

<p>This is a paragraph.</p> <p>This is another paragraph.</p>

<h1>This is a heading</h1> <h2>This is a heading</h2> <h3>This is a heading</h3>