Jump to content

HTML Basic Formatting

- - - - -

This topic has been archived. This means that you cannot reply to this topic.
14 replies to this topic

#1
clookid

clookid

    Programmer

  • Members
  • PipPipPipPip
  • 125 posts
HTML Basic Formatting

Welcome to the HTML Basic Formatting tutorial of Webmaster's Tutorials! You will learn a lot of important tags in this tutorial, two of which have different ways of doing them but please do not pick at me for choosing a way that you do not like.

After reading this tutorial you will know:
  • how to bold text.
  • how to do italics text.
  • how to underline text.
  • how to give text emphisis.
  • how to do a line break.
  • how to use paragraphs.
  • how to do a horizontal line.

As I do in all of my tutorials, I am going to start off with an example and explain it bit by bit. This example is actually going to have a use!

Here is the example:

Example 1-1:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

    <head>

      <title>HTML Example</title>

  </head>

  <body>

    <b>This text is bold.</b>

    <i>This text is italics.</i>

    <u>This text is underlined.</u>

    <em>This text has emphisis.</em>

    <br>

    I have just used a line break.

    <p>This is a paragraph.</p>

    This is a horizontal line.

    <hr>

  </body>

</html> 

The above will output:
This text is bold. This text is italics. This text is underlined. Cannot give text emphisis with BBcode.
I have used a line break.

This is a paragraph.

This is a horizontal line.
Cannot do horizontal lines with BBcode.

Line 1:
This is just the first opening line of an HTML document (you already know this from the last tutorial).

Line 2:
This is just the first opening line of an HTML document (you already know this from the last tutorial).

Line 3:
This is the opening of the head tag.

Line 4:
This is the title of the document. In this case it is "HTML Example".

Line 5:
This is the closing head tag.

Line 6:
This is the opening of the body tag.

Line 7:
This is finally a tag that you do not know! It outputs bold text.

Line 8:
This outputs italical text.

Line 9:
This underlines text.

Line 10:
This gives text emphasis.

Line 11:
This is a line break. A line break moves text to the next line.

Line 12:
This is just outputting text after the line break.

Line 13:
This is a paragraph.

Line 14:
This is just outputting text before the horizontal line.

Line 15:
This is a horizontal line.

Line 16:
This is closing the body tag.

Line 17:
This is finally bring the script to a conclusion (closing the document).

You have finally come to the end of this tutorial. I hope you enjoyed it! Keep practicing, you will not get all of this information in one gobble. You may need to read this tutorial over and over again until you understand/remember all of the tags that you have been taught.

You must have authors permission to use this tutorial!

#2
AfTriX

AfTriX

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 586 posts
Thanks for explaining easy stuffs. Useful for the beginners.

#3
xtraze

xtraze

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 910 posts
But I advice all to use <br> and <hr> tags as
<br />
<hr />
As when you are passing HTML and going to DHTML,XHTML you must obey some rules, but get used to them from now as sometimes it can be a trouble.
When it's XHTML, you can include attributee or some things. like
<hr width="90%" />
Where the line will only cover 90%. But when working with XHTML you should Obey these rules.

codes must be in simple letters.
single tags must be like <tag />

Thanks for the topic dude, Learn from the Basics. Nice.

#4
AfTriX

AfTriX

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 586 posts
Thats a great idea dude! While we preparing ourself a language being prepared for another one as well. And I also encountered some trouble when I tried VB Script and then the JavaScript due to the problems like Case Sensitive and so on..

#5
clookid

clookid

    Programmer

  • Members
  • PipPipPipPip
  • 125 posts
xtraze, that was exactly what I asked people not to do in my tutorial! :P

Quote

two of which have different ways of doing them but please do not pick at me for choosing a way that you do not like.


#6
xtraze

xtraze

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 910 posts
Sorry about that and I never saw that Quote till now. Sorry, and send me a PM if you want that post + this post to be deleted, only if you really hate it and mad at me.

But I am not picking at you, just adding up something.

#7
clookid

clookid

    Programmer

  • Members
  • PipPipPipPip
  • 125 posts
I am not mad other wise I would have put the little ":P" :P

#8
xtraze

xtraze

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 910 posts
But I thought you are MAD as I saw your Avatar,. lol
Just Joking, let's get back to the topic.

#9
John

John

    Writes binary right handed and hex left handed

  • Moderators
  • 6,321 posts
I didnt think I would learn anything from reading a HTML tutorial but I never knew there was such thing as text emphasis. Nice one!

#10
clookid

clookid

    Programmer

  • Members
  • PipPipPipPip
  • 125 posts
Thank you. The other day I thought the same about hyperlinks but I learnt that you can make 'em keyboard and click based by using the follow code:
<html>
<head>
<title>Page 1</title>
</head>

<body>
<p><a href="http://localhost/page2.html" accesskey="o">
       Hit key o</a> to open page 2.
</p>
</body>
</html>

It's worth a try! I hope you can make a use for it!

#11
xtraze

xtraze

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 910 posts
Only if it worked, and I'm sure the above mentioned code won't.
Not being mean or something, but check the start of the paragraph,
It should be <p> and not >p> lol.
Correct it and then it can work well. I'll give it a try.

#12
AfTriX

AfTriX

    Programming God

  • Members
  • PipPipPipPipPipPipPip
  • 586 posts
Fine, nice example for beginners. Keep up the work..