+- Sinisterly (https://sinister.ly)
+-- Forum: Design (https://sinister.ly/Forum-Design)
+--- Forum: Web Design (https://sinister.ly/Forum-Web-Design)
+--- Thread: Basic XHTML Tutorial and Explanation (/Thread-Basic-XHTML-Tutorial-and-Explanation)
Basic XHTML Tutorial and Explanation - Woody - 02-15-2012
Introduction
In this tutorial I will be explaining how to code a basic html website.
No, I'm not doing a tutorial like other people's tutorials, where they just give you the code and tell you to type that.
I will actually be explaining what everything means.
So, let's get started.
No, I'm not doing a tutorial like other people's tutorials, where they just give you the code and tell you to type that.
I will actually be explaining what everything means.
So, let's get started.
The Doctype
The first thing we will need to do to start the code is put the XHTML doctype.
The doctype is what makes the document a valid html document.
Since we're using XHTML in this tutorial, we will be using the XHTML doctype, which can be found below.
Now, let me explain what each part of the doctype means.
The !DOCTYPE just makes the html document valid, as stated above.
The html part of the doctype is the Top Element.
This tells the browser what element to expect as the top-level element. For HTML and XHTML documents this element would be <html>.
The public part of the doctype is the availability.
The most common DOCTYPES you will use will be publicly available - "PUBLIC".
But you can also specify a local DTD with the "SYSTEM" key word.
"-//W3C//DTD XHTML 1.0 Transitional//EN"
This part of the doctype is called the Formal Public Identifier.
This entire string is what identifies the doctype.
Now, I will explain what each part of this string means.
W3C is the organization.
This is the group that owns and maintains the DOCTYPE being used.
DTD is the type. This defines the type of DOCTYPE used.
XHTML 1.0 Transitional is the human-readable label.
This is the label that tells you what DTD is being used.
It is written so that humans, rather than computers, can understand it.
EN is the language.
This is the language that the DTD is written in.
It is not the language of the content of the page.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd is optional. This just shows where the DTD for the doctype can be found.
The doctype is what makes the document a valid html document.
Since we're using XHTML in this tutorial, we will be using the XHTML doctype, which can be found below.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">The !DOCTYPE just makes the html document valid, as stated above.
The html part of the doctype is the Top Element.
This tells the browser what element to expect as the top-level element. For HTML and XHTML documents this element would be <html>.
The public part of the doctype is the availability.
The most common DOCTYPES you will use will be publicly available - "PUBLIC".
But you can also specify a local DTD with the "SYSTEM" key word.
"-//W3C//DTD XHTML 1.0 Transitional//EN"
This part of the doctype is called the Formal Public Identifier.
This entire string is what identifies the doctype.
Now, I will explain what each part of this string means.
W3C is the organization.
This is the group that owns and maintains the DOCTYPE being used.
DTD is the type. This defines the type of DOCTYPE used.
XHTML 1.0 Transitional is the human-readable label.
This is the label that tells you what DTD is being used.
It is written so that humans, rather than computers, can understand it.
EN is the language.
This is the language that the DTD is written in.
It is not the language of the content of the page.
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd is optional. This just shows where the DTD for the doctype can be found.
Explanation of The Main Tags
Below the doctype type this:
These are the main parts of the html document.
These are called "tags".
Everytime you begin a tag, you must put the text inside of <>, and everytime you close a tag, you must put the text inside of <>, and put a slash in front.
The <html> tag starts the html code.
Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The body element defines the document's body, and contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Below the doctype type this:
Code:
<html>
<head>
</head>
<body>
</body>
</html>These are called "tags".
Everytime you begin a tag, you must put the text inside of <>, and everytime you close a tag, you must put the text inside of <>, and put a slash in front.
The <html> tag starts the html code.
Elements inside <head> can include scripts, instruct the browser where to find style sheets, provide meta information, and more.
The body element defines the document's body, and contains all the contents of an HTML document, such as text, hyperlinks, images, tables, lists, etc.
Title Tag
Let's add some code to this document.
Under the <head> tag, but below the </head> ending tag, type:
The <title> tag makes the title that shows on your internet tabs the text inside of the title tags.
Let's add some code to this document.
Under the <head> tag, but below the </head> ending tag, type:
Code:
<title>My Website</title>Main Body Tags
Now, let's learn some tags to put in the body.
<p> is a tag that makes your text into a paragraph.
There is 6 header tags.
These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
These go from largest to smallest.
So, let's say you want to make a text header, and a paragraph.
If you wanted your text header to say Welcome To Woody's Website, and you wanted the paragraph to say Cowboys are awesome.
You would type:
Now, if you wanted to put a line across the page under your header and paragraph, you would type:
This is a self closing tag!
A self closing tag is used when nothing goes between the tag!
Another example of a self closing tag is the <br /> tag, which I will explain next.
Now, the <br /> tag is known as the break tag. The break tag is used to go to the next line while typing text, because it won't work if you just press enter.
So let's say you wanted to type Woody's a cowboy in your cowboys are awesome paragraph, except on the next line.
You would type:
Well, that's it for this tutorial.
Thanks for reading!
Now, let's learn some tags to put in the body.
<p> is a tag that makes your text into a paragraph.
There is 6 header tags.
These are <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
These go from largest to smallest.
So, let's say you want to make a text header, and a paragraph.
If you wanted your text header to say Welcome To Woody's Website, and you wanted the paragraph to say Cowboys are awesome.
You would type:
Code:
<h1>Welcome To Woody's Website</h1>
<p>Cowboys are awesome.</p>Code:
<hr />A self closing tag is used when nothing goes between the tag!
Another example of a self closing tag is the <br /> tag, which I will explain next.
Now, the <br /> tag is known as the break tag. The break tag is used to go to the next line while typing text, because it won't work if you just press enter.
So let's say you wanted to type Woody's a cowboy in your cowboys are awesome paragraph, except on the next line.
You would type:
Code:
<h1>Welcome To Woody's Website</h1>
<p>Cowboys are awesome.<br />Woody's a cowboy.</p>Well, that's it for this tutorial.
Thanks for reading!