Post: Html tut 1
02-07-2012, 04:04 AM #1
China Cat
Do a barrel roll!
(adsbygoogle = window.adsbygoogle || []).push({}); Need: No Prior Knowledge Of HTML, Notepad (Recommended), Want To Learn The Language Of HTML.

This Is Made For Beginners That Want To Learn HTML, And For People Who have Some Knowledge Of HTML And Want To Expand Their Own Knowledge Of HTML, And/or Wants To Use This As A Referral .


Note To Users: If You See Any Mistakes In This, Don’t Flame Me I Am Doing This With My Knowledge Of HTML , Please Inform Me By VM/PM If You Want To Correct It.


Now To Get On With The Program.

Starting Your Webpage

There Are Some Ways To Start This E.G Using A DOCTYPE To Declare What Type Of HTML Or XHTML You Are Using. The DOCTYPE Lets Browsers Know What To Expect And Tells Validators How To Judge Your Code In Order To Check Its Syntax. Then, Signal The Beginning Of The Actual Code With The Opening HTML Tag. But Do Not Worry About That Too Much, As It Is Not Compulsory TO have In Your Webpage.

1. Open Notepad.
2. Type <html> To begin The Actual HTML Portion Of Your Document
3. Leave A Few Space’s For Creating The Rest of Your Webpage(Using The Rest Of My Tutorial’s)
4. Type </html
The Code Will Look Like This:

    <html>

</html>


Creating The Foundation

Most Web Pages Are Divided Into Two Sections: The Head And The Body. The Head Section Is Where You Define The Title Of Your Page, Including Information About Your Page For Search Engine Like Google, Set The Location Of Your Page, Add Style Sheets, And Write Scripts. Except For The Title, The Content Of Head Section Is Not Readily Visible To The Visitor.

To Create The head Section:
1. Directly After Opening html Tag, Type <head>.
2. Leave A Few Spaces For The Contents Of The Head Section.
3. Type </head>
To Create The Body:
1. After The Final </head> tag, Type <body>
2. Leave A Few Spaces For The Content’s Of Your Web Page (Which You’ll Create With The Help Of The Rest Of My TuT’s With HTML).
3. Type </body>
It Should Now Look Like This:

    <Html>
<Head>
</Head>
<Body>
</Body>
</Html>


Creating A Title

Each (X)HTML Page Must Have A Title element. A Title Should be Short And Descriptive. The Title Is Used By Search Index’s Like Yahoo And Google As Well As In Your Visitors Browsers History Lists And Bookmarks.
To Create A Title:
1. Place Your Cursor Between The Opening And Closing head Tags
2. Type <title>
3. Enter The Title Of Your webpage.
4. Type </title>

    <Head>
<title> MakeItRain- Is Duh ***y</title>
</head>
<Body

</Body>


Creating Section Headers

(X)HTML Provides For Up To Six Levels Of headers In Your Web Pages For Separating Your Page Into Manageable Chunks.

To Organize Your Web Page With Headers:
1. In The Body Section Of Your (X)HTML Document, Type <hn>, Where N Is A Number From 1 To 6, Depending On He Level Of The Header That You Want To Create.
2. Type The Contents Of The Header.
3. Type </hn> Where The N Is The Same Number Used In Step 1.

    <head>
<title> MakeItRain- Is Duh ***y</title>
</Head>
<body>
<h1>MakeItRain</h1>
<h2>Is From New Zealand</h2>
<h3>HTML is Duuh ***y</h3>


Not mine. Thought I would share.
(adsbygoogle = window.adsbygoogle || []).push({});
02-07-2012, 12:22 PM #2
Originally posted by Moo
Need: No Prior Knowledge Of HTML, Notepad (Recommended), Want To Learn The Language Of HTML.

This Is Made For Beginners That Want To Learn HTML, And For People Who have Some Knowledge Of HTML And Want To Expand Their Own Knowledge Of HTML, And/or Wants To Use This As A Referral .


Note To Users: If You See Any Mistakes In This, Don’t Flame Me I Am Doing This With My Knowledge Of HTML , Please Inform Me By VM/PM If You Want To Correct It.


Now To Get On With The Program.

Starting Your Webpage

There Are Some Ways To Start This E.G Using A DOCTYPE To Declare What Type Of HTML Or XHTML You Are Using. The DOCTYPE Lets Browsers Know What To Expect And Tells Validators How To Judge Your Code In Order To Check Its Syntax. Then, Signal The Beginning Of The Actual Code With The Opening HTML Tag. But Do Not Worry About That Too Much, As It Is Not Compulsory TO have In Your Webpage.

1. Open Notepad.
2. Type <html> To begin The Actual HTML Portion Of Your Document
3. Leave A Few Space’s For Creating The Rest of Your Webpage(Using The Rest Of My Tutorial’s)
4. Type </html
The Code Will Look Like This:

    <html>

</html>


Creating The Foundation

Most Web Pages Are Divided Into Two Sections: The Head And The Body. The Head Section Is Where You Define The Title Of Your Page, Including Information About Your Page For Search Engine Like Google, Set The Location Of Your Page, Add Style Sheets, And Write Scripts. Except For The Title, The Content Of Head Section Is Not Readily Visible To The Visitor.

To Create The head Section:
1. Directly After Opening html Tag, Type <head>.
2. Leave A Few Spaces For The Contents Of The Head Section.
3. Type </head>
To Create The Body:
1. After The Final </head> tag, Type <body>
2. Leave A Few Spaces For The Content’s Of Your Web Page (Which You’ll Create With The Help Of The Rest Of My TuT’s With HTML).
3. Type </body>
It Should Now Look Like This:

    <Html>
<Head>
</Head>
<Body>
</Body>
</Html>


Creating A Title

Each (X)HTML Page Must Have A Title element. A Title Should be Short And Descriptive. The Title Is Used By Search Index’s Like Yahoo And Google As Well As In Your Visitors Browsers History Lists And Bookmarks.
To Create A Title:
1. Place Your Cursor Between The Opening And Closing head Tags
2. Type <title>
3. Enter The Title Of Your webpage.
4. Type </title>

    <Head>
<title> MakeItRain- Is Duh ***y</title>
</head>
<Body

</Body>


Creating Section Headers

(X)HTML Provides For Up To Six Levels Of headers In Your Web Pages For Separating Your Page Into Manageable Chunks.

To Organize Your Web Page With Headers:
1. In The Body Section Of Your (X)HTML Document, Type <hn>, Where N Is A Number From 1 To 6, Depending On He Level Of The Header That You Want To Create.
2. Type The Contents Of The Header.
3. Type </hn> Where The N Is The Same Number Used In Step 1.

    <head>
<title> MakeItRain- Is Duh ***y</title>
</Head>
<body>
<h1>MakeItRain</h1>
<h2>Is From New Zealand</h2>
<h3>HTML is Duuh ***y</h3>


Not mine. Thought I would share.



The comment code is <!--comment--> and if you are adding bullets or numbers you would do something like this
    <!--This makes a bullet list.-->
<ul>
<li>info</li>
<li>more info</li>
</ul>


    <!--this makes a numbered list-->
<ol>
<li>info</li>
<li>more info</li>
</ol>


The <hr> is a horizontal rule and it puts a line to help divide text.
You can edit all of this information but I don't have time to do that this morning. When I get home I will do my best to come post again in this thread to show adding color and right, center, or left align information.

EDIT: I will show examples of this when I get home as well with more in depth codes.
02-08-2012, 12:48 AM #3
A little code for HTML with the output.
    <html>
<head>
<title>iPhone 4S</title>
</head>
</html>

<body>
<h1>iPhone 4S</h1>
<p>A new update in the iPhone series which has many more phones to come including a well anticipated iPhone 5. The previous iPhones have done really well on the market to all ages and companys and I think that this one will apeal to more people and other corporations looking for easy ways to communicate and gather information while on the go.</p>
<hr width="75%">
<!--Bulleted list of some features on the iPhone 4S-->
<ul>
<li>Capacities of either 16, 32, or 64 GB.</li>
<li>Prices range from $200 - $400.</li>
<li>The height is 4.5inches, width, 2.31inches, depth 0.37 inches, and weights 4.9 ounces.</li>
<li>It has a built in assissted GPS, digital compass, and Wi-Fi.</li>
<li>It also contains an eight mexapixel camera with autofocus and a LED Flash.</li>
<li>Standby time can last up to 200 hours and full battery</li>
<li>There are much more things to check out. You can visit the site at <a href="https://www.apple.com/iphone/specs.html">Apple.com</a>
</ul>
<img src="apple.gif" height="300" width="200">
</body>

<head>
<!--Apply style sheet to the document-->
<style type="text/css">
h1 {color : #800080; text-align: center; font-family: Snap ITC; font-size: 16 px}
p {text-align: left; font-family: Forte; font-size: 16 px}
ul {font-family: Times New Roman}
</head>


To view the output just copy the code into notepad and save it with the .htm extension. The image wont work for you since you don't have it. The hyperlink will work and take you to another site that I got the information from. Real simple but a great way to start.
02-08-2012, 01:28 AM #4
Originally posted by Docko412 View Post
very nice post... way to teach these html nubz. i already am pretty beast with html

but anyways good tut.


Did you like the two post I added? Were they good sample codes, and do you see anything wrong with them?
02-08-2012, 01:38 AM #5
Originally posted by Docko412 View Post
i don't see anything wrong with either of them... and to be honest could you make me a cool looking html file of a review of the samsung galaxy tab 10.1 inch don't really know about it and it would be good practice.


Yeah, I'll do my best. You just want basic information? I'm going to try to make it easy to read and simple. That's what everyone likes when it comes to information.
02-08-2012, 01:42 AM #6
Originally posted by baseballgod69 View Post
Yeah, I'll do my best. You just want basic information? I'm going to try to make it easy to read and simple. That's what everyone likes when it comes to information.


yeah pm it to me. and it would be good to have a decent amount of specs like screen size aspect ratio OS etc. etc.
also just as a preference to me could you do it black bg with white text?
02-08-2012, 01:45 AM #7
Originally posted by Docko412 View Post
yeah pm it to me. and it would be good to have a decent amount of specs like screen size aspect ratio OS etc. etc.
also just as a preference to me could you do it black bg with white text?


Yeah. I'll pm it to you. Do you want the code or the output? I'm not to sure how to show you the output. I am unaware of how to show you my screen capture haha
02-20-2012, 03:21 AM #8
|C++|
< ^ > < ^ >
Originally posted by Moo
Need: No Prior Knowledge Of HTML, Notepad (Recommended), Want To Learn The Language Of HTML.

This Is Made For Beginners That Want To Learn HTML, And For People Who have Some Knowledge Of HTML And Want To Expand Their Own Knowledge Of HTML, And/or Wants To Use This As A Referral .


Note To Users: If You See Any Mistakes In This, Don’t Flame Me I Am Doing This With My Knowledge Of HTML , Please Inform Me By VM/PM If You Want To Correct It.


Now To Get On With The Program.

Starting Your Webpage

There Are Some Ways To Start This E.G Using A DOCTYPE To Declare What Type Of HTML Or XHTML You Are Using. The DOCTYPE Lets Browsers Know What To Expect And Tells Validators How To Judge Your Code In Order To Check Its Syntax. Then, Signal The Beginning Of The Actual Code With The Opening HTML Tag. But Do Not Worry About That Too Much, As It Is Not Compulsory TO have In Your Webpage.

1. Open Notepad.
2. Type <html> To begin The Actual HTML Portion Of Your Document
3. Leave A Few Space’s For Creating The Rest of Your Webpage(Using The Rest Of My Tutorial’s)
4. Type </html
The Code Will Look Like This:

    <html>

</html>


Creating The Foundation

Most Web Pages Are Divided Into Two Sections: The Head And The Body. The Head Section Is Where You Define The Title Of Your Page, Including Information About Your Page For Search Engine Like Google, Set The Location Of Your Page, Add Style Sheets, And Write Scripts. Except For The Title, The Content Of Head Section Is Not Readily Visible To The Visitor.

To Create The head Section:
1. Directly After Opening html Tag, Type <head>.
2. Leave A Few Spaces For The Contents Of The Head Section.
3. Type </head>
To Create The Body:
1. After The Final </head> tag, Type <body>
2. Leave A Few Spaces For The Content’s Of Your Web Page (Which You’ll Create With The Help Of The Rest Of My TuT’s With HTML).
3. Type </body>
It Should Now Look Like This:

    <Html>
<Head>
</Head>
<Body>
</Body>
</Html>


Creating A Title

Each (X)HTML Page Must Have A Title element. A Title Should be Short And Descriptive. The Title Is Used By Search Index’s Like Yahoo And Google As Well As In Your Visitors Browsers History Lists And Bookmarks.
To Create A Title:
1. Place Your Cursor Between The Opening And Closing head Tags
2. Type <title>
3. Enter The Title Of Your webpage.
4. Type </title>

    <Head>
<title> MakeItRain- Is Duh ***y</title>
</head>
<Body

</Body>


Creating Section Headers

(X)HTML Provides For Up To Six Levels Of headers In Your Web Pages For Separating Your Page Into Manageable Chunks.

To Organize Your Web Page With Headers:
1. In The Body Section Of Your (X)HTML Document, Type <hn>, Where N Is A Number From 1 To 6, Depending On He Level Of The Header That You Want To Create.
2. Type The Contents Of The Header.
3. Type </hn> Where The N Is The Same Number Used In Step 1.

    <head>
<title> MakeItRain- Is Duh ***y</title>
</Head>
<body>
<h1>MakeItRain</h1>
<h2>Is From New Zealand</h2>
<h3>HTML is Duuh ***y</h3>


Not mine. Thought I would share.


how teh hell do you run it!
02-20-2012, 04:49 AM #9
Originally posted by SLiiTH3R View Post
how teh hell do you run it!


Yeah all you do is save it as ********.html and then double click it to run it in that browser or you can right click and choose which browser to run it in.

---------- Post added at 11:49 PM ---------- Previous post was at 11:48 PM ----------

Originally posted by Docko412 View Post
you can't be serious?
you just double click on it and it'll open in your browser.
save as whatever.html


haha don't be so harsh on the guy.

The following 2 users say thank you to Conveyy for this useful post:

Docko412, UGz-
03-18-2012, 02:19 AM #10
<Jimbo>
</Jimbo>
You have two "head" sections and end the actual "html" content before you have even opened the "body"... Also "<img>" tags require an "alt" attribute, as well as being closed "/>".

Originally posted by baseballgod69 View Post
A little code for HTML with the output.
    <html>
<head>
<title>iPhone 4S</title>
</head>
</html>

<body>
<h1>iPhone 4S</h1>
<p>A new update in the iPhone series which has many more phones to come including a well anticipated iPhone 5. The previous iPhones have done really well on the market to all ages and companys and I think that this one will apeal to more people and other corporations looking for easy ways to communicate and gather information while on the go.</p>
<hr width="75%">
<!--Bulleted list of some features on the iPhone 4S-->
<ul>
<li>Capacities of either 16, 32, or 64 GB.</li>
<li>Prices range from $200 - $400.</li>
<li>The height is 4.5inches, width, 2.31inches, depth 0.37 inches, and weights 4.9 ounces.</li>
<li>It has a built in assissted GPS, digital compass, and Wi-Fi.</li>
<li>It also contains an eight mexapixel camera with autofocus and a LED Flash.</li>
<li>Standby time can last up to 200 hours and full battery</li>
<li>There are much more things to check out. You can visit the site at <a href="https://www.apple.com/iphone/specs.html">Apple.com</a>
</ul>
<img src="apple.gif" height="300" width="200">
</body>

<head>
<!--Apply style sheet to the document-->
<style type="text/css">
h1 {color : #800080; text-align: center; font-family: Snap ITC; font-size: 16 px}
p {text-align: left; font-family: Forte; font-size: 16 px}
ul {font-family: Times New Roman}
</head>


To view the output just copy the code into notepad and save it with the .htm extension. The image wont work for you since you don't have it. The hyperlink will work and take you to another site that I got the information from. Real simple but a great way to start.

Copyright © 2026, NextGenUpdate.
All Rights Reserved.

Gray NextGenUpdate Logo