DNTemple | Discuss Domains, Webhosting and Webdesign

In The Following Weeks You Will Be Taken On A Complete Step By Step Tutorial Teaching You How To Master The Ins And Outs Of HTML While Working On A Single Project. Look For Future Post On Xhtml, PHP, MYsql, CSS And Much, Much More !!!

Week 1 - Course Setup
Day 1 - HTML Basics
Day 2 - Project Overview
Day 3 - General Work Tips and Source File Instructions

Part II - Getting Started
Day 4 - Constructing the Basic Site
Day 5 - Using Tables for Layouts

Week 2 - Working with Graphics
Day 1 - Drawing Graphic Elements
Day 2 - Building the Web Site’s Logos
Day 3 - Adding Graphics and Images to Pages

Part II - Customizing Tables Using Styles
Day 4 - Working with Pictures
Day 5 - Organizing the Site

Week 3 - Visually Enhancing Your Site
Day 1 - Constructing Frames and Links
Day 2 - Adding More Navigation Options to the Site
Day 3 - Using Styles for Text and Positioning
Day 4 - Attaching Navigation Styles and Elements

Week 4 - Using Advanced Features in Your Site
Day 1 - Adding More Pages and Objects to Your Site
Day 2 - Using JavaScript
Day 3 - Adding a Form to Your Site
Part II - Showing Your Site to the World
Day 4 - Constructing an Accessible Site
Day 5 - Evaluating and Testing Your Site

hmm nice for the noobies!
you dont explain where to sign up or anything..?
or in this topic?

hmmm, well it seems like a nice plan, and I can't wait until you pull it off.

Day 1 - HTML Basics
Please be reminded this is a course for newbie's that are wanting to learn the basics to Html / web design.
You could start the course right now and finish with a very attractive and usable Web site using (X)HTML, Cascading Style Sheets, and JavaScript, but you should understand what these terms mean and how your browser actually interprets what you write.

How HTML got complicated
HTML, as it was originally written, was never intended to allow formatting. HTML was intended to define the content of a document. When HTML 3.2 was approved, attributes and formatting tags suddenly became usable. No longer were you forced to use plain default text in a default black color. However, developing sites using fonts and color information for every single piece of text that appeared on a page is a long and tedious process.

The repetitious description of attributes changed with HTML 4.0. All the formatting information required for a document could be moved out of the HTML document and into a separate style sheet. The document content stays in the HTML page; the styling information moves to a Cascading Style Sheet (CSS) file. Wouldn’t it be much simpler to write the information about a text’s color once and then assign the information, as a style, to your page’s content? Sure it would.

XHTML—The next generation
The differences between HTML 4.01 and XHTML are actually very slight. I mentioned that you could use either uppercase or lowercase tags in HTML 4.01; XHTML requires lowercase tags only. The differences are small, but they result in a much more consistent code.

XML (Extensible Markup Language) is a markup language used to define the structure of a document. XML doesn’t do anything—it is designed solely as a means to describe the data contained in a document. HTML is designed to display data. Put them together, and you get XHTML.

The goal of XHTML is to create properly constructed documents. Consider the range of devices that currently use browsers. Everything from telephones to PDAs to televisions can now use browser technology and read Web pages. XHTML is intended to work with any device or system; it works in all browsers, and it is backward browser compatible (that is, the language works in current browser versions but also in previous browser versions as well).

The XHTML specification requires lowercase text for tags, among other things. Other requirements for XHTML are covered in the tutorial as you build your site.

You can test Web pages against the specification. A page that complies with the specs may display the image shown here to indicate compliance.


Separating Content from Appearance
Each HTML tag is defined using a similar tag format, like this:

<b>Complete Course</b>
The HTML tag itself is made up of two parts—the <b> and </b> elements. The tag instructs the browser to display the text written between the start tag <b> and the end tag </b> as bold. HTML tags are not case sensitive; you can use either uppercase or lowercase tags—for now. And this is where your experience with HTML gets interesting.

HTML 4.0 allowed for the creation of separate style sheets that contain style information for different elements on your page. CSS define how a browser displays HTML elements. You generally create and store styles in an external file using the css extension. The "style sheet" portion of the name is straightforward. "Cascading" refers to a sequence of style definitions that flow into one another. Both Netscape Navigator and Internet Explorer have supported the use of CSS since the version 4 release of their browsers.

In many ways, styles parallel HTML tags. Just as you can use standard HTML tags, such as paragraph, list, and table, you also can use standard CSS for color and size for example. The CSS language rule (or syntax) is made up of three parts: a selector, a property, and a value (together referred to as the declaration) and is written in this form:

selector {property: value}

The selector is usually the HTML tag that you want to define, the property is the attribute that you want to target, and the value is how you want the property defined. Separate the property and value with a colon, and surround the pair with curly braces like this:

body {color:ffff33}

This style means that the body of the page, which you see as the page’s background, is colored the lovely yellow shown in the illustration.



When the value features multiple words, use quotes around the value.

p {font-family: "Arial, Helvetica, sans-serif"}

As you learn throughout the course, you can specify more than one property for a style.

Working with a Style Sheet
Style sheets can save lots of work. Since the time of the HTML 4.0 specs, these tags could be removed and defined as styles in another document. Suppose that your site were 50 pages instead of 2. Now suppose that you decided to change all the h3 (heading level 3) text in your site from dark blue to dark green. What a lot of work! Now suppose that you moved all the style information to its own document and then referenced the style sheet from your pages. You change the color value in the CSS document, and instantly all h3 tags change their text from blue to green when viewed in a browser.

Style sheets are used in several ways. You can specify a style inside a single HTML element, inside the <head> element of a Web page, or in an external CSS file. You can even refer to multiple style sheets from the same HTML document. The styles are applied in a specific order, which is how the “Cascading” part of the term came to be.

The most common way to use a CSS is through external style sheet files. The styles for elements in your page are defined using the CSS syntax, and the file is referenced at the start of the page’s HTML. You can also create an internal style sheet, which is contained within the <head> tag of your page. Finally, you can also create an in-line style, which is added to an individual HTML element.

The application of a style follows in order from default to in-line. In other words, the browser style is used unless an external style sheet exists, which is used unless an internal style sheet exists, which is used unless an in-line style exists. This sequence of rules applies except for one case—a reader may use a personal style sheet to adjust for visual or physical impairments. In that case, the user’s personal style sheet overrides any styles attached to the page.

The CSS1 spec was approved in December 1996; CSS2 in 1998. CSS3 has been a working draft since mid-2001. You can test Web site pages against the CSS specification. A page that is in compliance with the specs can display the image shown here.


Adding Action and Interaction

So far, creating content and creating appearance has been touched on. The last item to consider is creating interactivity. Millions of Web pages are enhanced through the use of JavaScript. JavaScript was developed by Netscape and is the most popular scripting language on the Internet. Netscape Navigator and Internet Explorer browsers version 3.0 and newer use JavaScript.

JavaScript is a scripting language, not a full-blown computer program. The difference primarily lies in how the code is processed. True languages require compiling or processing before they run. JavaScript is an interpreted language, which means that it is processed as the browser and/or user interacts with the page. JavaScript is not the same thing as Java. Java is a programming language developed by Sun Microsystems.

You can use JavaScript in a Web page in literally hundreds of ways. Anything you can imagine a page doing or a user doing to interact with a page can use JavaScript. You don’t have to be a computer programmer to use JavaScript, because it uses quite simple language rules. Nor do you have to write complex scripts to get effects in your pages. Small scripts, called “snippets” can be added to HTML pages. JavaScript reacts to events, such as when a user clicks a link or page element, when a user completes a form and submits it, or when a page loads or unloads in a browser.

The action that triggers the JavaScript is called an event handler. JavaScript has more rules than HTML and CSS. JavaScript components are case sensitive. For example, variablea is not the same thing as VariableA. Like HTML and CSS, you close symbols with brackets. JavaScript doesn’t care about blank spaces added to a line, but breaking up a line of JavaScript must be done in a particular way. You work with JavaScript and its rules in week 4 / day 2

Using JavaScript in Your Web Pages
Like other HTML elements, JavaScripts are identified by tags. You use <script></script> tags to enclose JavaScript. Scripts execute when the page loads into a browser. Sometimes, that is what you want to happen; other times, you want the user to interact with the page in some way to make the script run. You know from the Confidence Builder project that a page requires <head></head> tags. If you want to control when a JavaScript runs, the script is added inside the <head></head> tags, and its triggering event is included in the body portion of the page.

You can add multiple scripts to the same page, in both locations. You can also use an external file in a similar way to using an external style sheet. An external JavaScript file is saved with a .js file extension and attached to a page using a src (source) attribute.

Now, armed with this new background information, it’s time to carry on with the course. In the next days course, you learn about the courses’s project and how to work with the project files.

Watch for Day 2 to be released within the next day or 2, it takes me a few days to pull all this together for you but i promise to be as prompt as i can.