HTML Tutorial 02-25-2012, 10:37 AM
#1
1. What is HTML?
2. What can HTML be used for?
3. How should I Start?
4. What are HTML Tags?
5. What else should I know?
----------------------------------------------------------------------------------------------------------------------------
1. WHAT IS HTML?
Before you start making Websites you should know the history and background of HTML and what it stands for and what it does.
If you want to learn HTML and Code with it you need a few things.
1. A computer with a OS on it such as Windows or linux
2. Web browser software.
3. Web coding applet such as notepad or dreamweaver or frontpage something like that.
Ok now if you have the stuff listed above now to move on and and know what HTML Stands for. HTML Stands for Hyptertext Markup Language (HTML). One person who started HTML was Tim Berners-Lee
----------------------------------------------------------------------------------------------------------------------------
2. WHAT CAN HTML BE USED FOR?
HTML is used to make webpages. HTML is one of the easy Lang to learn and code in, without HTML We might not have Webpages.
----------------------------------------------------------------------------------------------------------------------------
3. WHERE SHOULD I START?
Ok if you did what I said on the first step and got a computer and something to code in such as notepad you can do what I say.
Open up notepad or your favorite text editor.
First thing were going to learn is the Skeletal structure of and HTML Document. Type what I type in your webpage editor.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
contents of document
</BODY>
</HTML>
Ok now you just created your first HTML Document/Web page now to save it,
1. Open up the Save as box
2. Select File, Save as and be sure to select Text Documents as teh file type.
3. Name the File site.html
4. Choose the folder on your computer to save the html document to. ( Write down were you saved it to )
5. Click save or Ok
6. Now open up your Browser such as Internet Explorer
7. in your browser click the file, Open and click browse. and go to the folder you saved the file in and hit open (note these options may change if using a different OS)
8. Now your site should show up in the browser you should see printed on the screen contents of document
Now I'm going to go into detail on what you did to create that page.
First you need to learn what a opening and closing tags are.
An opening Tag is an HTML that that indicates the start of and HTML Command; the text affected by the command appears after the opening tag. opening tags always begin with < and End with >, as in <HTML>
A closing Tag is an HTML Tag that indicates the end of and html command; the text affected by this command appears before the closing tag. Closing tags always begin with </ and End with >, and in </HTML>
Ok now that you learned those terms I'm going to show you what each one of those sections you typed in that Document meant and what it did.
<HTML>
That tag defines That it is a HTML document and beginning of the document .
<HEAD>
That tag always appears near the beginning of the HTML code for a page , it is used to identify the title of a page .
</HEAD>
That tag tells that its the closing of the head section of the page.
<BODY>
That tells the web browser that that is the start of the body of the page. anything between this and </body> is posted on the page.
Example:
See how that works?
</BODY>
tells the browser it is the closing of the body
</HTML>
That tells the browser it is the end of the HTML document.
----------------------------------------------------------------------------------------------------------------------------
4. WHAT ARE HTML TAGS?
ok as you saw above you used HTML Tags. Well Now Ill tell you what HTML Tags are.
HTML tags are a must in HTML they mark up text-based documents. They instruct Web browsers how to display content. Tags indicate where a given element begins, you must Place the appropriate tag before it. This consist of a certain abbreviation sandwiched by the less-Than (<) and Greater-Thank (>) symbols. For example as show before <HTML>. Not all Tags need a opening and closing though.
----------------------------------------------------------------------------------------------------------------------------
5. WHAT ELSE SHOULD I KNOW?
Ok now that you know the skeletal structure of a HTML document I'm going to show you a few Tags for HTML.
TEXT TAGS: INLINE STYLES
These tags are used to change the style of your text for each section ill put a = to show what each one looks like
<B>...</B> = Bold text
<FONT>...</FONT> = Font
<I>...</I> = italic text
<SMALL>...</SMALL> = Small text
<BIG>...</BIG> = Big text
<S>...</S> = striked text
<U>..</U> = underlined text
<CENTER>..</CENTER> = Centered text
STRUCTURAL TAGS
<!DOCTYPE>
<BASE /> = All other URLs in the document are resolved against this location
<BODY>...</BODY> = Defines its the Body of the document.
<HEAD>...</HEAD> = Defines its the Head of the document.
<HTML>...</HTML> = Defines its a HTML Document.
<LINK /> = Defines a relationship between the current document and another document.
<META> = Should be placed in the <HEAD> Tag it provides additional information about the document.
<TITLE>...</TITLE> = Defines its the Title of the Document.
SCRIPT TAGS
<script> = places a script within the document.
<NOSCRIPT>
MULTIMEDIA TAGS
used to play multimedia documents on a webpage.
<APPLET>
<BGSOUND> = is used to play a background sound.
<EMBED> = Embeds an object into the Web Page.
<OBJECT> = A generick element used for placeing an object on a page.
<PARAM>
FRAME TAGS
Used to create HTML Frames on a webPage
<FRAME> = Defines a single frame within a <frameset>
<FRAMESET> = Defines a collection of frames or other framesets
<NOFRAMES>
LINKING WITH A DOCUMENT
Ok these tags can go in the body section of your page. These are Tags for linking to websites and other documents. <A> is a anchor meaning it will link to another document or web resource. it can also serve to label a fragment within a document. For example to link to ubers.org you could try <A HREF="http://www.ubers.org">Jinx</A>
the section between > < is the comment or text part that will show up on a page. for example >ubers< with ubers put in it will print out ubers and if you click that it will work as a link.
<A NAME="fragmentname">TEXT</A>
<A HREF="fragmentname">TEXT</A>
BULLETED LIST/UNORDERED TAGS
This is used if you would like to make a bulleted list. YOu know the thing with the dots then your sentance or what ever to the right of the dots. Each one enters on a new line.
<UL>
<LI>Your text
<LI>Your text
<LI>Your text
</UL>
When that is made it should print out like this
Your Text
Your Text
Your Text
NUMBERED LIST/ORDERED TAGS
Ok A numbered list is basicly what it sounds like, A numbered list from 1- to what your LI stop at for each one is a number starting at one to what ever. Each one enters on a new line.
<OL>
<LI>Your Text
<LI>Your Text
<LI>Your Text
</OL>
When that is made it should print out like this but instead of the dots it would be in numbers in order
Your Text
Your Text
Your Text
TABLES
Tables are meant to display data in a tabular format. Tables use to be used for The page layout purposes before HTML 4 came out. Now this is being Discourage by the W3C
<TABLE>...</TABLE> = Creates a table
<TBODY>...</TBODY> = Defines the Table body
<TD>...</TD> = Defines a cell's contents
<TFOOT>...</TFOOT> = Defines the Table footer
<TH>...</TH> = Defines the cell contents of the table header.
<TR>...</TR> - Defines a row of table cells
EX: Here is an example of a Table setup
<TABLE BORDER="1">
<TR><TD>Name:<TD>James</TD></TR>
<TR><TD>Age:<TD>14</TD></TR>
</TABLE>
FRAMES
Frames create panels in the web browser window that are used to display content from different source documents; Frames also allow you to build a web page composed of several Web Pages.
<FRAME /> = Defines a frame
<FRAMESET>...</FRAMESET> = Defines the layout of frames within a window
<IFRAME>...</IFRAME> = creates a inline frame
<NOFRAME>...</NOFRAME> = Alternative content when frames are not supported
EX: of Inline Frames
COMMENT TAG
Does just what the Tag says This tag Does not print the comment out on the webpage, but you can view it when looking at the source code.
<!-- your comment -->
Thats all for this tutorial, hope you liked it
2. What can HTML be used for?
3. How should I Start?
4. What are HTML Tags?
5. What else should I know?
----------------------------------------------------------------------------------------------------------------------------
1. WHAT IS HTML?
Before you start making Websites you should know the history and background of HTML and what it stands for and what it does.
If you want to learn HTML and Code with it you need a few things.
1. A computer with a OS on it such as Windows or linux
2. Web browser software.
3. Web coding applet such as notepad or dreamweaver or frontpage something like that.
Ok now if you have the stuff listed above now to move on and and know what HTML Stands for. HTML Stands for Hyptertext Markup Language (HTML). One person who started HTML was Tim Berners-Lee
----------------------------------------------------------------------------------------------------------------------------
2. WHAT CAN HTML BE USED FOR?
HTML is used to make webpages. HTML is one of the easy Lang to learn and code in, without HTML We might not have Webpages.
----------------------------------------------------------------------------------------------------------------------------
3. WHERE SHOULD I START?
Ok if you did what I said on the first step and got a computer and something to code in such as notepad you can do what I say.
Open up notepad or your favorite text editor.
First thing were going to learn is the Skeletal structure of and HTML Document. Type what I type in your webpage editor.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
contents of document
</BODY>
</HTML>
Ok now you just created your first HTML Document/Web page now to save it,
1. Open up the Save as box
2. Select File, Save as and be sure to select Text Documents as teh file type.
3. Name the File site.html
4. Choose the folder on your computer to save the html document to. ( Write down were you saved it to )
5. Click save or Ok
6. Now open up your Browser such as Internet Explorer
7. in your browser click the file, Open and click browse. and go to the folder you saved the file in and hit open (note these options may change if using a different OS)
8. Now your site should show up in the browser you should see printed on the screen contents of document
Now I'm going to go into detail on what you did to create that page.
First you need to learn what a opening and closing tags are.
An opening Tag is an HTML that that indicates the start of and HTML Command; the text affected by the command appears after the opening tag. opening tags always begin with < and End with >, as in <HTML>
A closing Tag is an HTML Tag that indicates the end of and html command; the text affected by this command appears before the closing tag. Closing tags always begin with </ and End with >, and in </HTML>
Ok now that you learned those terms I'm going to show you what each one of those sections you typed in that Document meant and what it did.
<HTML>
That tag defines That it is a HTML document and beginning of the document .
<HEAD>
That tag always appears near the beginning of the HTML code for a page , it is used to identify the title of a page .
</HEAD>
That tag tells that its the closing of the head section of the page.
<BODY>
That tells the web browser that that is the start of the body of the page. anything between this and </body> is posted on the page.
Example:
Code:
<BODY>
Hello world! I am a webpage!
</BODY>See how that works?
</BODY>
tells the browser it is the closing of the body
</HTML>
That tells the browser it is the end of the HTML document.
----------------------------------------------------------------------------------------------------------------------------
4. WHAT ARE HTML TAGS?
ok as you saw above you used HTML Tags. Well Now Ill tell you what HTML Tags are.
HTML tags are a must in HTML they mark up text-based documents. They instruct Web browsers how to display content. Tags indicate where a given element begins, you must Place the appropriate tag before it. This consist of a certain abbreviation sandwiched by the less-Than (<) and Greater-Thank (>) symbols. For example as show before <HTML>. Not all Tags need a opening and closing though.
----------------------------------------------------------------------------------------------------------------------------
5. WHAT ELSE SHOULD I KNOW?
Ok now that you know the skeletal structure of a HTML document I'm going to show you a few Tags for HTML.
TEXT TAGS: INLINE STYLES
These tags are used to change the style of your text for each section ill put a = to show what each one looks like
<B>...</B> = Bold text
<FONT>...</FONT> = Font
<I>...</I> = italic text
<SMALL>...</SMALL> = Small text
<BIG>...</BIG> = Big text
<S>...</S> = striked text
<U>..</U> = underlined text
<CENTER>..</CENTER> = Centered text
STRUCTURAL TAGS
<!DOCTYPE>
<BASE /> = All other URLs in the document are resolved against this location
<BODY>...</BODY> = Defines its the Body of the document.
<HEAD>...</HEAD> = Defines its the Head of the document.
<HTML>...</HTML> = Defines its a HTML Document.
<LINK /> = Defines a relationship between the current document and another document.
<META> = Should be placed in the <HEAD> Tag it provides additional information about the document.
<TITLE>...</TITLE> = Defines its the Title of the Document.
SCRIPT TAGS
<script> = places a script within the document.
<NOSCRIPT>
MULTIMEDIA TAGS
used to play multimedia documents on a webpage.
<APPLET>
<BGSOUND> = is used to play a background sound.
<EMBED> = Embeds an object into the Web Page.
<OBJECT> = A generick element used for placeing an object on a page.
<PARAM>
FRAME TAGS
Used to create HTML Frames on a webPage
<FRAME> = Defines a single frame within a <frameset>
<FRAMESET> = Defines a collection of frames or other framesets
<NOFRAMES>
LINKING WITH A DOCUMENT
Ok these tags can go in the body section of your page. These are Tags for linking to websites and other documents. <A> is a anchor meaning it will link to another document or web resource. it can also serve to label a fragment within a document. For example to link to ubers.org you could try <A HREF="http://www.ubers.org">Jinx</A>
the section between > < is the comment or text part that will show up on a page. for example >ubers< with ubers put in it will print out ubers and if you click that it will work as a link.
<A NAME="fragmentname">TEXT</A>
<A HREF="fragmentname">TEXT</A>
BULLETED LIST/UNORDERED TAGS
This is used if you would like to make a bulleted list. YOu know the thing with the dots then your sentance or what ever to the right of the dots. Each one enters on a new line.
<UL>
<LI>Your text
<LI>Your text
<LI>Your text
</UL>
When that is made it should print out like this
Your Text
Your Text
Your Text
NUMBERED LIST/ORDERED TAGS
Ok A numbered list is basicly what it sounds like, A numbered list from 1- to what your LI stop at for each one is a number starting at one to what ever. Each one enters on a new line.
<OL>
<LI>Your Text
<LI>Your Text
<LI>Your Text
</OL>
When that is made it should print out like this but instead of the dots it would be in numbers in order
Your Text
Your Text
Your Text
TABLES
Tables are meant to display data in a tabular format. Tables use to be used for The page layout purposes before HTML 4 came out. Now this is being Discourage by the W3C
<TABLE>...</TABLE> = Creates a table
<TBODY>...</TBODY> = Defines the Table body
<TD>...</TD> = Defines a cell's contents
<TFOOT>...</TFOOT> = Defines the Table footer
<TH>...</TH> = Defines the cell contents of the table header.
<TR>...</TR> - Defines a row of table cells
EX: Here is an example of a Table setup
<TABLE BORDER="1">
<TR><TD>Name:<TD>James</TD></TR>
<TR><TD>Age:<TD>14</TD></TR>
</TABLE>
FRAMES
Frames create panels in the web browser window that are used to display content from different source documents; Frames also allow you to build a web page composed of several Web Pages.
<FRAME /> = Defines a frame
<FRAMESET>...</FRAMESET> = Defines the layout of frames within a window
<IFRAME>...</IFRAME> = creates a inline frame
<NOFRAME>...</NOFRAME> = Alternative content when frames are not supported
EX: of Inline Frames
Code:
<IFRAME HEIGHT=120 widht=250 SCROLLING=yes SRC=http://www.mixfevers.com name=test></IFRAME>COMMENT TAG
Does just what the Tag says This tag Does not print the comment out on the webpage, but you can view it when looking at the source code.
<!-- your comment -->
Thats all for this tutorial, hope you liked it
![[+]](https://sinister.li/images/modern/collapse_collapsed.png)
![[Image: cooltext980231940.gif]](http://s13.postimg.org/fpc42h0lj/cooltext980231940.gif)
