You are viewing our Forum Archives. To view or take place in current topics click here.
Web site creation part 1 of 3 learning HTML
Posted:
Web site creation part 1 of 3 learning HTMLPosted:
Status: Offline
Joined: Mar 24, 201113Year Member
Posts: 8
Reputation Power: 0
I have made this tutorial to show users here how to make a simple web site, how to use proper coding conventions, and explain the most commonly used tags. So with that in mind let's start.
Ok, let get the basics down first.
1. Know what a "tag" is.
- tag is the element that affect either the format or layout or information on a page. ALL standard tags are made up of a Opening and Closing tag.
2. Whats an Opening tag?
-an opening tag is the start of section of code. For example: <p> is an opening tag. It also starts a paragraph section. All text written AFTER the opening tag and PRIOR to the closing tag will render on the page.
3. Well then whats a closing tag then?
-a closing tag is end a section of coding. For example: </p> is the closing tag of a paragraph section.
4.Whats nesting?
-nesting is placing multiple tag within each other. For Example: <p> <em> love </em> </p> This shows an em tag nested in a p tag. NOTICE THAT THE INNER MOST TAG IS CLOSED FIRST.
5. Does capilzation count with tags?
-YES IT DOES!!!! You cant have a <p></P> either use <P></P> or <p></p> <-- This is consider the CORRECT way to code!
Other Things you should know prior to building a site:
1. HAVE A PURPOSE. This is THE most important part. If you don't a purpose you will not finish a site or even know where to start.
2. Make sure you specify a Document Type Definition (get to that later)
3. Be patient. You will make mistakes. You will have to correct them.
4. All ways try to improve yourself!
Step 1: Declare your DTD( Document Type Definition). The DTD is part of the SGML coding language and not HTML. The DTDs job is to tell the browser what type of instructions to use to read the elements you have typed in to render your page. Most Web creation software will automatically insert this for you. (NOTEPAD and WORDPAD or any other text software will not*)
Heres an example DTD:
Step 2: Type in the Open and closing html tags.
Example:
Step 3: Add the head section. In the head section we are also adding a meta tag and the title.
Example:
* at this point I want to talk about nesting. and commenting. As you can look at the above piece of coding notice how everything is spaced out. Each level of elements is on it's own line and is spaced in a way to where you can very quickly see if a tag has it's open and closing tags. Also you will notice some commenting that I put in. Comment begin with <!-- and end with --> and anything in between those WILL NOT be rendered by the browser. Use comment to explain parts of your coding, give yourself notes, or even label sections of coding.
Step 4: We add the body tags. These come after the closing head tag. Now from this point on everything we add will affect the page and how it will look. and how it operates.
Step 5: Fill in your content within the body tag.
Step 6: save as index.html or index.htm file.
Now for all of you that saw step 5 and went WTF?!?! It's alright. here a link to HTML page thats created using all that text. The page when rendered in a browser gives both written and Visual instructions on how that section is made. If you have any questions please comment or send me a PM.[b]
--I am Bullitt AP on se7ensins also
Ok, let get the basics down first.
1. Know what a "tag" is.
- tag is the element that affect either the format or layout or information on a page. ALL standard tags are made up of a Opening and Closing tag.
2. Whats an Opening tag?
-an opening tag is the start of section of code. For example: <p> is an opening tag. It also starts a paragraph section. All text written AFTER the opening tag and PRIOR to the closing tag will render on the page.
3. Well then whats a closing tag then?
-a closing tag is end a section of coding. For example: </p> is the closing tag of a paragraph section.
4.Whats nesting?
-nesting is placing multiple tag within each other. For Example: <p> <em> love </em> </p> This shows an em tag nested in a p tag. NOTICE THAT THE INNER MOST TAG IS CLOSED FIRST.
5. Does capilzation count with tags?
-YES IT DOES!!!! You cant have a <p></P> either use <P></P> or <p></p> <-- This is consider the CORRECT way to code!
Other Things you should know prior to building a site:
1. HAVE A PURPOSE. This is THE most important part. If you don't a purpose you will not finish a site or even know where to start.
2. Make sure you specify a Document Type Definition (get to that later)
3. Be patient. You will make mistakes. You will have to correct them.
4. All ways try to improve yourself!
Step 1: Declare your DTD( Document Type Definition). The DTD is part of the SGML coding language and not HTML. The DTDs job is to tell the browser what type of instructions to use to read the elements you have typed in to render your page. Most Web creation software will automatically insert this for you. (NOTEPAD and WORDPAD or any other text software will not*)
Heres an example DTD:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> Step 2: Type in the Open and closing html tags.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> </html> Step 3: Add the head section. In the head section we are also adding a meta tag and the title.
Example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- this is a meta tag -->
<title>HTML basic TUTORIAL sheet</title> <!-- this is the Title it is the name of your site, and what shows up on the tab in your browser -->
</head>
</html> * at this point I want to talk about nesting. and commenting. As you can look at the above piece of coding notice how everything is spaced out. Each level of elements is on it's own line and is spaced in a way to where you can very quickly see if a tag has it's open and closing tags. Also you will notice some commenting that I put in. Comment begin with <!-- and end with --> and anything in between those WILL NOT be rendered by the browser. Use comment to explain parts of your coding, give yourself notes, or even label sections of coding.
Step 4: We add the body tags. These come after the closing head tag. Now from this point on everything we add will affect the page and how it will look. and how it operates.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML basic TUTORIAL sheet</title>
</head>
<body>
</body> Step 5: Fill in your content within the body tag.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML basic TUTORIAL sheet</title>
</head>
<body>
<p><a href="http://pages.suddenlink.net/justingreen">CLICK HERE TO RETURN MY HOMEPAGE</a></p>
<!-- header section -->
<h1>This is an <h1> tag. The h stands for Heading and the 1 stands for the largest of the 6 heading styles.
</h1>
<h2> This is the <h2> tag. The h stands for Heading and the 2 stands for the second-largest of the 6 heading styles
</h2>
<h3> This is the <h3> tag. The h stands for Heading and the 3 stands for the third-largest of the 6 heading styles
</h3>
<h4> This is the <h4> tag. The h stands for Heading and the 4 stands for the third-smallest of the 6 heading styles
</h4>
<h5> This is the <h5> tag. The h stands for Heading and the 5 stands for the second-smallest of the 6 heading styles
</h5>
<h6> This is the <h6> tag. The h stands for Heading and the 6 stands for the smallest of the 6 heading styles
</h6>
<!-- list section -->
<ol>
<li> this is a <li> tag. This is is used in <ol> tags which stands for order list or in <ul> tags which stands for unordered lists. This is currently in a order list.
</li>
<li> this is a <li> tag. This is is used in <ol> tags which stands for order list or in <ul> tags which stands for unordered lists. This is currently in a order list.
</li>
<li> this is a <li> tag. This is is used in <ol> tags which stands for order list or in <ul> tags which stands for unordered lists. This is currently in a order list.
</li>
</ol>
<ul>
<li> this is a <li> tag. This is is used in <ol> tags which stands for order list or in <ul> tags which stands for unordered lists. This is currently in a unordered list.
</li>
<li> this is a <li> tag. This is is used in <ol> tags which stands for order list or in <ul> tags which stands for unordered lists. This is currently in a unordered list.
</li>
<li> this is a <li> tag. This is is used in <ol> tags which stands for order list or in <ul> tags which stands for unordered lists. This is currently in a unordered list.
</li>
</ul>
<!-- table section -->
<table border="1">
<tr>
<td> This is a table. Tables are created by first using the <table> then nesting a table row, <tr> , in side the opening and closing table tags, next you nest a table data tag, <td> within the table row tag. The table data tag is the part where your information will be stored.
</td>
</tr>
<tr>
<td> This is a table. Tables are created by first using the <table> then nesting a table row, <tr> , in side the opening and closing table tags, next you nest a table data tag, <td> within the table row tag. The table data tag is the part where your information will be stored. I have <em>TWO</em> table data sections here.
</td>
<td> This is a table. Tables are created by first using the <table> then nesting a table row, <tr> , in side the opening and closing table tags, next you nest a table data tag, <td> within the table row tag. The table data tag is the part where your information will be stored. I have <em>TWO</em> table data sections here.
</td>
</tr>
<tr>
<td> This is a table. Tables are created by first using the <table> then nesting a table row, <tr> , in side the opening and closing table tags, next you nest a table data tag, <td> within the table row tag. The table data tag is the part where your information will be stored. I have <em>THREE</em> table data sections here.
</td>
<td> This is a table. Tables are created by first using the <table> then nesting a table row, <tr> , in side the opening and closing table tags, next you nest a table data tag, <td> within the table row tag. The table data tag is the part where your information will be stored. I have <em>THREE</em> table data sections here.
</td>
<td> This is a table. Tables are created by first using the <table> then nesting a table row, <tr> , in side the opening and closing table tags, next you nest a table data tag, <td> within the table row tag. The table data tag is the part where your information will be stored. I have <em>THREE</em> table data sections here.
</td>
</tr>
</table>
<table border="7">
<tr>
<td>You can nest table inside of tables to create structure to pages. Although this is frowned upon I will show an example just as a tutorial.
</td>
</tr>
<tr>
<td>
<table border="2" bgcolor="#FF66CC" align="center">
<tr>
<td> See a table within a table!</td>
<td> See a table within a table!</td>
<td> See a table within a table!</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- paragraph sections -->
<p> This is the <p> tag. It is used to put blocks of non-preformatted text on the page. With in the <p> tags you can also add the <b> <b> tag</b> to bold text but it's considered better coding practice to use the <strong> <strong> tag</strong>. To make <i>italics use the <i> tag</i> or the <em><em> tag (this is considered better to use )</em> to add importance to text. </p>
<p> The <blockquote> tags works kinda like the <p> tag but it shows preformatted text on the page and <strong>PRESERVES</strong> the fomatting.</p>
<p> The next page I will create will be a basic hello world page. We also be getting into stylesheets with that page also.</p>
</body>
</html> Step 6: save as index.html or index.htm file.
Now for all of you that saw step 5 and went WTF?!?! It's alright. here a link to HTML page thats created using all that text. The page when rendered in a browser gives both written and Visual instructions on how that section is made. If you have any questions please comment or send me a PM.[b]
--I am Bullitt AP on se7ensins also
You are viewing our Forum Archives. To view or take place in current topics click here.