September 04, 2012

Basic Tags and Formatting

Basic Tags and Formatting | Guideinfoyou the template website | logo design

So you're probably thinking what are tags and formatting? "Okay, I knew that stuff and can you teach me something I don't know?  
Okay, be patient. I think this lesson will give you your fill.

HTML is a language that is coded with tags. They are called tags because they tag parts of a webpage for formatting in a browser. HTML tags are very easy to spot in web page source. They are the things shown that start with a < and end with a >. Most HTML tags have an opening tag (<tag>) to start formatting text and a closing tag (</tag>) to end the formatting.


There are some HTML tags that are absolutely necessary in an HTML page. Those tags are as follows:

<HTML>' and </HTML>': Usually put at the top (<HTML>) and bottom (</HTML>) of an HTML page. This tag tells the browser that this page is an HTML page.

<HEAD> and </HEAD>: This is where information about the entire page is placed.

<TITLE> and </TITLE>: This tag needs to be put between the <HEAD> and </HEAD>. This tag gives a name for your page. The name won't be shown in the the text of the page, but rather in the top of the browser window.

<BODY> and </BODY>: This tag defines the body portion of the page. Later we will learn how to use the <BODY> tag to add background colors, text colors, and margins.

Now that we know the required tags, I'm going to put my text that I gathered in the last tutorial in the proper web page format. Check the format tag and follow me. I will you give a basic step.


<HTML>
<HEAD>
<TITLE>Guideinfoyou page</TITLE>
</HEAD>

<BODY> Welcome in Guideinfoyou

Hi, My name is Virgil. I built this web page because I love coding in HTML! I could do it all day long!

I am a lover of programming languages, and love to design and produce web content.

Thanks for visiting my page!

Yours Truly,
Virgil R. Toling Jr.

 </BODY> </HTML>

But wait 1 second! I typed that, and opened it with my browser, and it doesn’t come out like that! What?Does it come out like this in the below?

=====================================================================
Welcome to Guideinfoyou Hi, My name is Virgil. I built this web page because I love coding in HTML! I could do it all day long! I am a lover of programming languages, and love to design and produce web content. Thanks for visiting my page! Yours Truly, Virgil R. Toling Jr.
====================================================================
This is the page doesn’t have <p> and <br> // it will be continue texting and no formatting spaces and paragraph.

Yes? Oh my god! We forgot the formatting tags! Now we are going to put the formatting tags.


Formatting tag:
The <P> tag can add paragraph spacing to your page.
The <BR> tag adds a single line break to your page.
These tags do not need a <P> and </P>, or <BR> and </BR>, unlike the other tags.

So now our page is coded like this: Let start again and put the pages <P> paragraph and <BR> breaking page.

<HTML>
<HEAD>
<TITLE> Guideinfoyou page</TITLE>
</HEAD>

<BODY>

Welcome in Guideinfoyou <P>   // here the page paragraph

Hi, My name is Virgil. I built this web page because I love coding in HTML! I could do it all day long!<p>

 I am a lover of programming languages, and love to design and produce web content.<p>

 Thanks for visiting my page!<P>   // here the page paragraph

 Yours Truly,<BR>  // for single break to our page.
 Virgil R. Toling Jr.

 </BODY>
 </HTML>

Great! We have format! Now I'll bet you want that first line to be large, right? This can be accomplished by what's called a "header".
The header is made by putting in <Hx> "header text goes here" </Hx>, where the "x" is a number from 1-6, the bigger the number the bigger the header. So in our page it looks like

<H2>Welcome to Guideinfoyou </H2>.
Note that i removed the <P> tag, since header are already paragraph spaced!

Go ahead and make your page, save it with a ".html" extension at the end (HTML pages all need either .htm or .html extensions) open it with your browser and check my next tutorial again.

No comments:

Post a Comment

Share Us

| Guideinfoyou (Guideline and Learning tactics) © 2008- 2014 w/blogger. All Rights Reserved | Designed by Virgil R. Toling Jr |