Welcome To Steve's Html Tutorial        

Unit 1: Manipulating Text

Getting Started.
First Of All You Have To Get A Blank Text Editor. If You Are Able To View This Page You Most Likely Have NotePad, Or WordPad On Your Computer. So, Open Up Your WordPad, Or NotePad. Before You Begin Save The File. This Is Not A text Document. So When You Save It Use Extension html,Rather Than ".txt" For Example: You Want To Name The File 'index' So Save It As index.html.

Phase One: Page Layout
The Very First Thing You Need To Learn Is Tags. The Very First Thing You Will Enter On Your Page Is <html> This Represents The Beginning Of Your Webpage. Then At The Bottom You Must Enter </html> For Every Tags You open You Must Close It.
Here Is A Quick Example Of What I Am Talking About.

EG:

<HTML>
<TITLE> Type The Name Of Your Webpage Here </TITLE>
<HEAD> This Is Where Your Style Sheet Or Main Page layout Will Go.These tags Are not Really Needed For A Basic User. </HEAD>
<BODY> Here Is Where You Type All Of Your Content , This Is Where You Will Put Everything That Will Appear On Your Webpage. </BODY>
</HTML>

Copy and paste The Example And View It As A Webpage, Look What Happens.


**Side Note- To View As A Web Page- Copy And Paste The Above Example Into A Blank Notepad Or Word Pad. Save The File As index.html. Open up internet explorer(You Don't have To Be Online) Click File/Open/Browse Click The Name Of Your index.html File. Click open.**

Phase Two: Manipulating Text Size, Style And Position
Now, You Have Your Main Page Layout. But You Want Some Color And Some Different Styles.
Like Changing Font Color, Size, Bold, Underlined, Italics.

Different Font Styles
Here Are Some Basic Text Designs To Follow.

This "<B>Bold</B>" Gives You This "Bold"
This "<I>Italics</I>" Gives You This "Italics"
This "<U>Underlined</U>" Gives You This "Underlined"
This "<TT>Type Writer</TT>" Gives You This "Type Writer"

These Tags Can Also Be Combined. For Example:

<B><I>Bold And Italic</I></B>
<B><U>Bold And Underline</U></B>
<I><U>Italics And Underline</U></I>
<B><I><U>Italics Bold And Underline</U></I></B>
<B><I><U><TT>Italics Bold, Type Writer And Underline</TT></U></I></B>

Changing The Size Of Text

<H1>Text</H1>

<H2>Text</H2>

<H3>Text</H3>

<H4>Text</H4>

<H5>Text</H5>
<H6>Text</H6>

These Tags <h1>To<h6>Only Have A Narrow Range From 1-6. With The <h6> Tag Being The Smallest. As Shown In The Above Example. There are twelve (12) font size commands available to you, When You Use The <Font size> Command.The Sizes With This Code Range From -6 to +6. +6 Is The Biggest It's Huge. -6 Is The Smallest.Let's Take A Look, Shall We?

<Font size=+4>Text</Font>
<Font size=+3>Text</Font>
<Font size=+2>Text</Font>
<Font size=+1>Text</Font>
<Font size=-1>Text</Font>
<Font size=-2>Text</Font>

Changing Color Of Text
Now, Some Color. Changing The Color Of The Text Can Be Done By Using The Same Font Tag From Above, By Replacing The Word "Size" With the word "Color". Simply Use The Following Code To Specify The Color Of Your Text.

<font color=red>This Is Red Text </font>
<font color=Gold>This Is Gold Text</font>
<font color=Blue>This Is Blue Text</font>


**Side Note-For A Basic Color, You Can Just Type The Name Of The Color. But For Different Shades, You Must Use The Code That Represents That Color. Click Here For The Html Color Code Chart**
Which Brings Me To My Next Lesson.

Creating A Link
How To Create A Link, To Another Webpage Or A Link For Your Email.

The Link Code Is:
<a href=mailto:stephenandrews@canada.com>Email Me</a>
When Typing The Above Code, It Will Appear On Your Webpage As Follows: Email Me

To Add A Link To Another Webpage It Is Basically The Same Thing. Like This:
<a href=http://www.drivingmenuts.blogspot.com>Steve's Think Tank</a>
When Typing This Code It Will Appear On You Webpage As Follows:Steve's Think Tank

Text Alignment On The Page
So Far, You know How To Change Text Size Color And Type.
Now, Let's Take A Look Aligning Or The Position Of Text. Text Is Automatically Aligned To The Left Unless You Specify Otherwise. Here Are Some Useful Tags On How To Align Text On Your page, There Is A Couple Of Differnet techniques Let's Take A Look:

<center>This text Is Aligned To The Center</center>

OR

<div align=center>This text Is Aligned To The Center</div>

<div align=right>This text Is Aligned To The Right</div>

HR Tags
Here Are A Few Tags For You If You Want To Make A New Line Or Paragraph Or Even Put A Line Across The page To Divide It. The <br> Tag Is Used To End Text On A Line. So If You Type A line Of Text Then Put <br> At The End,Anything After Will Start On A New Line. To Skip Two Lines Type <P>This Will Actually Skip A Line Then Start Your New Line Of Text.(Like Double Spacing) The <HR> Tag Inserts A Page Break Or A Line Across The Entire page. You Can Mess Around With The Hr Tags A Bit, Take A Look:


The Above Line Is A Normal <HR> Tag.


Above Is A Specified Width Of The HR Tag <HR width=50%>


Above Is A Normal HR Tag With Color <HR color=red>


Above Is A HR Tag With Specified Width And Color <HR width=50% color=red>

Here Is A Good Example Of Everything You Should Have Learned In This Unit.

<html>
<title>You Title Here</title>
<head>Any Hidden Content Goes Here (You Are A basic user You Don't Need This Yet)</head>
<body>
<h1><center>Heading, at the Top Of The Page</center></h1>
Hello Everyone This Is My First Webpage.<br>
I can type In <b>Bold</b> <i>Italics</i> And <u>Underline</u>
<hr>
I Can Type using color Too <font color=red>This Is Red</font><p>
<b> This Is So Much Fun</b>
<a href=mailto:me@me.com>Email Me</a>
<a Href=http://drivingmenuts.blogspot.com>Go To This Cool Website</a>
</body>
</html>

The Above Code Should Look Something Like This:
----------------------------------------------------------------------------------------------------

Heading, at the Top Of The Page


Hello Everyone This Is My First Webpage.

I can type In Bold Italics And Underline


I Can Type using color Too This Is Red


This Is So Much Fun
Email Me
Go To This Cool Website


----------------------------------------------------------------------------------------------------

Okay, So That Pretty Much Covers The Basics Of Manipulating Text. Next Unit I Will Teach You How To Manipulate Images.




To Extend Your Gratitude For Me Teaching You.
Please Copy And Paste The Following Code Anywhere Between <BODY> And </BODY> On Your Webpage. Thanks.
 
 
blog*spot
get rid of this ad | advertise here