Web Tutorials HTML, PHP, MYSQL, CSS, JS.

aaaaa · May 2, 2007

-First Website Guide:

1.Intro:

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.

2.Preparation:

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:

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.

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!

3.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

4.Viewing 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.In the new browser window, select File then Open
2.Then click Browse to enter Windows Explorer
3.Do you remember where you file is? Good, then navigate to its location
4.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.

5.First WebPage - 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

-First HTML Tags:

1.Your Second WebPage - Review:

Now that you have created your first webpage, let us examine the different segments of your "index.html" file. You have probably noticed a pattern of various words that are surrounded with < and >. These items are called HTML tags.

An example of an html tag is <body>. The Body tag tells the browser where the page's content begins. Body is also an example of one of the required HTML tags that every web page must have.

2.Basic HTML Tag Info:

Let's learn more about these tags. A basic web page is composed of 2 main tags. If you create a web page without these tags you will be in trouble!

HTML Code:

Code:

<html>
<body>
Your site's content goes here
</body>
</html>

The first HTML tag, which conviently is labled <html> tells the browser that your HTML code is starting. The second HTML tag, <body> tells the browser that the visible part of the webpage ( your content ) is going to start.

3.Closing Tags - </tag>:

You might be wondering what is the deal with the two tags at the end, </body> and </html>. These tags are telling the browser that certain tags are ending. The </body> lets the browser know that your content is ending, while the </html> tells the browser that your HTML file is finished.

The "/" that is placed before the tag's name informs the browser that you would like to stop using the specified tag. <tag> is used to begin a tag and </tag> is used to end a tag.

4.HTML Tag Order - Important!:

The order that opening tags appear and ending tags appear follow an important rule. If an HTML tag is opened within another, for example the body tag is opened inside the html tag, then that tag(body) must close before the outter(html) tag is closed.

We ended the body tag first because it was opened most recently. This rule of "closing the most recent tag before closing older tags" applies to all HTML tags.

5.Continue Along:

These ideas might take a while to sink in, so how about you create your second web page? Copy this code into notepad, like you did before, following the same directions.

HTML Code:

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, go ahead and save your file. You should be saving this file as "index.html". You may be prompted that you will be saving over a file, that is OK, you do not need your 1st web page anymore. When you are done, please continue.

-Conclusion & Review:

A few new tags were introduced in the last lesson. We will now give you a definition of these new tags to get you ready for starting the real HTML. The new tags were: <head>, <title>, <h2>, and <p>.

The HTML Code in Question:

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>

Tags:

<head>
This comes immediately following <html> and is used to tell the browser useful information, such as: the title of your page, the topic of your webpage ( used on old search engines ) and more.

<title>
This tag must comes between <head> & </head> and will label the web browser's title bar, which is located in the top left of most browsers. In the previous example, we titled the page "My Own Webpage!" and that text would show up as the browser's title.

<h2>
This is a header tag. It will create a "header" that is much larger than the default font size. The "h2" means that it is the 2nd largest header. The largest header is "h1" and the smallest header is "h6". Headers should be used for titles, just like the ones you see on this page.

<p>
This is a paragraph tag. So when you're writing a paragraph make sure you place <p> at the beginning of the paragraph and </p> at the end!

TIZAG.com RESOURCE
POST YOUR PROJECTS HERE

aaaaa · May 2, 2007

-Hyper Text Markup Language - HTML:

HTML is not a programming language, but rather a markup language. If you already know XML, then HTML will be a snap for you to learn. We urge you not to attempt to blow through this tutorial in one sitting. 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. We aren't going anywhere!

1.Preparation for HTML:

Creating an HTML document is easy. To begin coding HTML you need only two things: a simple-text editor and the dedication to follow our tutorial! Notepad is the most basic of simple-text editors and you will probably code a fair amount of HTML with it.

If you are new to HTML and haven't read through the Beginner's Tut., please take a few minutes to complete that tutorial before moving on.

2.Brief HTML Background:

HTML has not been around for many years. November 1990 marks the day of the first web page and back then there were little to no HTML standards to be followed. A group called the World Wide Web Consortium was then formed and have since set the standards that are widely accepted and we will base our teachings around them.

2.Web Pages:

Web pages have many uses. Here are some important facts about why web pages are so useful.

A cheap and easy way to spread information to a large audience.
Another medium to market your business.
Let the world know about you with a personal website!

3.Words to Know:

Tag - Used to specify ("mark-up") regions of HTML documents for the web browser to interpret. Tags look like this: <tag>
Element - A complete tag, having an opening <tag> and a closing </tag>.
Attribute - Used to modify the value of the HTML element. Elements will often have multiple attributes.
For now just know that a tag is a command the web browser interprets, an element is a complete tag, and an attribute customizes or modifies HTML elements.

-HTML - Elements:

An element consists of three basic parts: an opening tag, the element's content, and finally, a closing tag.

<p> - opening paragraph tag
Element Content - paragraph words
</p> - closing tag
Every (web)page requires four critical elements: the html, head, title, and body elements.

1.The <html> Element...</html>:

<html> begins and ends each and every web page. Its sole purpose is to encapsulate all the HTML code and describe the HTML document to the web browser. Remember to close your HTML documents with the corresponding </html> tag at the bottom of the document.

If you haven't already, open up Notepad or Crimson Editor and have a new, blank document ready to go. Copy the following HTML code into your text editor.

HTML Code:

Code:

<html> 
</html>

Now save your file by Selecting Menu and then Save. Click on the "Save as Type" drop down box and select the option "All Files". When asked to name your file, name it "index.html", without the quotes. Double check that you did everything correctly and then press save. Now open your file in a new web browser so that you have the ability to refresh your page and see your changes.

If you opened up your index.html document, you should be starring at your very first blank (white) web page!

2.The <head> Element:

The <head> element is "next" as they say. As long as it falls somewhere between your <html> tag and your web page content (<body>), you're golden. The head functions "behind the scenes." Tags placed within the head element are not directly displayed by web browsers. We will be placing the <title> element here and we'll talk about the other possible elements in later lessons.

Other elements used for scripting (Javascript) and formatting (CSS) will eventually be introduced and you will have to place them within your head element. For now, your head element will continue to lay empty except for the title element that will be introduced next.

Here's a sample of the initial set up.

HTML Code:

Code:

<html> 
<head>
</head>
</html>

As of yet, we still have nothing happening on the web page. All we have so far is a couple of necessary elements that describe our document to the web browser. Content (stuff you can see) will come later.

3.The <title> Element:

Place the <title> tag within the <head> element to title your page. The words you write between the opening and closing <title></title> tags will be displayed at the top of a viewer's browser. Here's the html code:

HTML Code:

Code:

<html> 
<head>
[COLOR="Red"]<title>My WebPage!</title>[/COLOR]
</head>
</html>

Save the file and open it in your browser. You should see "My WebPage!" in the upper-left, as the window's title.

Name your webpage as you please, just keep in mind, the best titles are brief and descriptive.

4.The <body> Element:

The <body> element is where all content is placed. (Paragraphs, pictures, tables, etc). As the menu on the left suggests, we will be looking at each of these elements in greater detail as the tutorial progresses. For now, it is only important to understand that the body element will encapsulate all of your webpage's viewable content.

HTML Code:

Code:

<html> 
<head>
<title>My WebPage!</title>
</head>
<body>
Hello World! All my content goes here!
</body>
</html>

aaaaa · May 2, 2007

-HTML - Tags:

A web browser reads an HTML document top to bottom, left to right. Each time the browser finds a tag, it is displayed accordingly (paragraphs look like paragraphs, tables look like tables, etc). Tags have 3 major parts: opening tag(s), content(s), and closing tag(s). Recall that a completed tag is termed an element. By adding tags to an HTML document, you signal to the browser "Hey look, I'm a paragraph tag, now treat me as such."

As you will learn, there are probably hundreds of HTML Tags. Tables, images, lists, forms, and everything else being displayed on an web page requires the use of a tag or two.

HTML Code:

Code:

<openingtag>Content</closingtag>
<p>A Paragraph Tag</p>

Tags should be lower-case letters if you plan on publishing your work. This is the standard for XHTML and Dynamic HTML. Here's quick look at some HTML tags.

HTML Tags:

Code:

<body>Body Tag (acts as a content shell)
<p>Paragraph Tag</p>
<h2>Heading Tag</h2>
<b>Bold Tag</b>
<i>Italic Tag</i>
</body>

1.Tags Without Closing Tags:

There are a few tags that do not follow the mold above. In a way, they still have the 3 parts (opening/closing and content). These tags however do not require a formal </closingtag> but rather a modified version. The reason being that these tags do not really require any content. Rather some of them just need a source URL and this is enough information for the web browser to display the tag properly (image tags). Let's take a look at a line break tag.

HTML Code:

Code:

<br />

To tell the browser we want to place a line break (carriage return) onto the site, it is not necessary to type <br>linebreak</br>. If every line break tag needed all three components as other do, life would become redundant real quick. Instead the better solution was to combine the opening and closing tags into a single format. Other tags have also been modified such as the image tag and input tag.

HTML Code:

Code:

<img src="../mypic.jpg" /> -- Image Tag
<br /> -- Line Break Tag
<input type="text" size="12" /> -- Input Field

-HTML - Attributes:

Attributes are used to amplify tags. What we mean by amplify is that when a web browser interprets a tag, it will also search for set attributes and then display the element (tags+attributes) in its entirety. At some point you may want to give your body element a background color or perhaps change the width of a table. All of these things and more can be achieved using Attributes.

Many HTML tags have a unique set of their own attributes. These will be discussed as each tag is introduced throughout the tutorial. Right now we want to focus on a set of generic attributes that can be used with just about every HTML Tag in existence.

Attributes are placed within the opening tag and they follow a precise syntax (format).

1.HTML - Class or ID Attribute:

The class and id attributes are nearly identical. They play no direct role in formatting your elements but rather serve behind the scenes for scripting and Cascading Style Sheets (CSS). The role of classification and identifying elements will become more apparent as your learn CSS.

The idea is that you can classify or id certain a tag and later format the tag using Cascading Style Sheets. It becomes necessary when you have two or more of the same element on a page (like a <p> tag) but want them to be different in appearance.

HTML Code:

Code:

<p id="italicsparagraph">Paragraph type 1 Italics</p>
<p id="boldparagraph">Paragraph type 2 Bold</p>

Classification Attributes:

Code:

Paragraph type 1 Italics
Paragraph type 2 Bold

2.HTML - Name Attribute:

Name is much different than id and class. By allotting a name to an element, that name becomes a scripting variable for scripting languages such as Javascript, ASP, and PHP. The name attribute is seen most often with forms and other user-input elements.

HTML Code:

Code:

<input type="text" [COLOR="Red"]name="TextField"[/COLOR] />

This attribute has no effect on the display of the text field, but behind the scenes it plays a huge identification role.

3.HTML - Title Attribute:

This is a neat little perhaps, forgotten attribute. This attribute titles an element and adds a tiny text pop-up to any HTML element. Much like the text pop-ups of word processing programs, these attributes should not be forgotten. You may title an element anything you would like, the effects of this attribute are not seen until you hover your mouse over the element for a few seconds.

HTML Code:

Code:

<h2 [COLOR="Red"]title="Hello There!"[/COLOR]>Titled Heading Tag</h2>

Title Attribute:

Code:

[B][SIZE="6"]Titled Heading Tag[/SIZE][/B]

Hover your mouse over the display heading to see the magic of the title attribute! This provides your web site with some user interaction which is priceless. Do not overlook the title attribute.

4.HTML - Align Attribute:

If you wish to change the horizontal location of your elements you may do so using the align attribute. You may align things left, right, or center. By default most elements are automatically aligned left unless otherwise specified.

HTML Code:

Code:

<h2 [COLOR="Red"]align="center"[/COLOR]>Centered Heading</h2>

Display:

Code:

[SIZE="6"]Centered Heading[/SIZE]

HTML Code:

Code:

<h2 [COLOR="red"]align="left"[/COLOR]>Left aligned heading</h2>
<h2 [COLOR="red"]align="center"[/COLOR]>Centered Heading</h2>
<h2 [COLOR="red"]align="right"[/COLOR]>Right aligned heading</h2>

Display:

Code:

[LEFT][SIZE="6"]Left aligned heading[/SIZE][/LEFT]
[CENTER][SIZE="6"]Centered heading[/SIZE][/CENTER]
[RIGHT][SIZE="6"]Right aligned heading[/SIZE][/RIGHT]

5.Attribute Defaults:

Many tags are assigned default attributes. This means that unless a tag attribute is specified by you the creator, it will have some distinct attributes. For example, a paragraph tag will always align its text to the left unless it has an align attribute in it specifying otherwise. Also elements placed within a table are vertically centered and to the left unless otherwise specified. As you code and learn about each of the different HTML elements, you will become aware of many of these defaults.

6.Generic Attributes:

Attributes exist to modify HTML tags allowing for complete customization of a website. Here's a table of some other attributes that are readily usable with many of HTML's tags.

Attribute

Options [/

CENTER] Function

align

right, left, center

Horizontally aligns tags .

valign

top, middle, bottom

Vertically aligns tags.

bgcolor

numeric, hexidecimal, RGB values

Places a background color.

background

URL

URL Image.

id

User Defined

With CSS.

class

User Defined

With CSS.

width

Numeric Value

-

height

Numeric Value

-

title

User Defined

"Pop-up" title for your elements.

username1 · May 3, 2007

sage

I smell fresh copypasta...

http://www.google.com/search?hl=en&...+document+top+to+bottom,+left+to+right"&meta=
http://www.tizag.com/htmlT/tags.php

protip: these forums are not a content mirror.

http://www.w3schools.com for all your web development resources.

Now GTFO.

Web Tutorials HTML, PHP, MYSQL, CSS, JS.

aaaaa

Newbie Spellweaver

aaaaa

Newbie Spellweaver

aaaaa

Newbie Spellweaver

username1

Divine Celestial

RaGEZONE Sponsor

About RaGEZONE

Forum Statistics

RaGEZONE Partners