Jump to content
xisto Community
frazz86

Html Basics Enjoy

Recommended Posts

Hi i'm Showing you the starting points of HTML!!

 

It's Probably the easiest to get the hang of so good luck

 

Here is basic of all basic:

 

This Code is ALWAYS in Html website Other wise it will not work

<html><body></body></html>
They are the basic tags .

Now we will Learn how to do heading's and Paragraphs!

<html><body><h1>A Heading</h1><p>A paragraph.</p></body></html>
h1 is a Heading :) and p is a paragraph

Here are some more headings

<html><body><h1>A heading</h1><h2>A smaller heading</h2><h3>A even smaller heading</h3><h4>A even smaller heading </h4><h5>A even smaller heading</h5><h6>The smallest heading</h6></body></html>
Each Header as you go down get smaller and smaller and smaller. always remember to starting tag and ending tag :D

If you wanted to show a link in html you would do this:

<html><body><a href="http://Xisto.com/index.php">This is a link</a></body></html>
Well i found links very hard to learn when i was doing html due to there annoying set up but they are important.

Now we heres how to show images that are in same directory as html page is. And other directories..

<html><body><img src="imagename.jpg/png/gif" width="104" height="142" /><img src="index/files/image.jpg/png/gif" width="104" height="142" /> <!--this would mean file is in index/files/ --></body></html>
The width and height represents the size of the picture and the jpg,png and gif part is endings to some pictures :D

To write comments in html its different to PHP but comments are important to help you remember what you have written!

<html><body><!-- This is a comment --></body></html>
That will let you put notes to your self which are very handy when making websites

Now i will show you how to split paragraphs up like this:

Example of what codes going to do.

Hello

People

Of

The

World

<html><body><p>Hello<br />People<br />Of<br /> The <br /> World</p></body></html>
The <br /> Represents a break in the line which if you didn't do it like that you would have to do this:

<html><body><p>Hello</p><p>People</p><p>Of</p><p>The</p><p>World</p></body></html>
Now for some types of text eg Big,bold and italic

<html><body><p><b>This text is bold</b></p><p><big>This text is big</big></p><p><i>This text is italic</i></p><p><code>This is computer output</code></p><p>This is<sub> subscript</sub> and <sup>superscript</sup></p></body></html>
Subscript is under normall line of text and super script is above normall line of text.

Now for some colors :D

<html><body><body style="background-color:yellow"><h2 style="background-color:red">This is a heading</h2><p style="background-color:green">This is a paragraph.</p></body></html>
This makes the background color Yellow heading 2 (h2) Background color red and paragraph background color green

You can also use hex codes to define colors

Here are some basic hex codes

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

Black #000000

Red #FF0000

Green #00FF00

Blue #0000FF

Yellow #FFFF00

bright blue/turquoise #00FFFF

Purple #FF00FF

Grey #C0C0C0

White #FFFFFF

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

Now for Font Color and size in text and in hex

<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p></body></html>
<html><body><h1 style="font-family:verdana">A heading</h1><p style="font-family:arial;color:#FF0000;font-size:20px;">A paragraph.</p></body></html>
They are both red and both 20px size

Heres a cool one Alignments

<html><body><h1 style="text-align:center">This is a heading</h1><p>The heading above is aligned to the center of this page.</p><h2 style="text-align:left">This is a Heading aligned to the left</h2><h3 style="text-align:right">This is a Heading aligned to the right</h3></body></html>
Thats how to text align

now ill show you how to display a link with a name not with its address

<html><body><a href="http://Xisto.com/index.php">Xisto!</a></body></html>
That would display Xisto and it would be a link :P

 

I hope this helps :)

Share this post


Link to post
Share on other sites

OK, one more basic html tutorial, why not.However, you could have made an effort.The first tag you show is not defined.Ok, you said that <p> stands for "paragraph".But what does the "body" tag stand for? I saw that it is most of times omitted, so what is it for?

Share this post


Link to post
Share on other sites
<body <!-- parameters here --> > </body>

signifies that the code between them is the actual document body. everything that is outside this code block will either be deleted, ignored or randomly translated by browsers. IE on the other hand will force those codes that are outside this block to be displayed as if they are indeed appeared inside the body tags.

I will comment to the author about the basic structure.
<html><body></body></html>

this really is not the basic building block. The actual code blocks that should appear was

<html> * this is optional and should signify what document type you are using, mine usually is xhtml<head></head><body></body></html>  * sine this is the closing tag/block, this should complement the opening tag above.

The other basic building blocks that should always appear are <title></title>, <meta></meta> and <doctype></doctype> but since an html page can be rendered without them, I did not inserted them on the basic building blocks that should appear.

There are HTML, DHTML, XHTML, HTML4 and others that are all HTML files, it is wrong to assume that the opening tag should always be <html></html>
Edited by vhortex (see edit history)

Share this post


Link to post
Share on other sites

I think it should be noted that there are shorthands.. Like <p></p> can be shorthand to <p /> which means, the following text is a paragraph and the ending tag will be inserted when rendering on the next line feed/ carriage return. Since this is highly DTD (or doctype) dependent, I am not recommending them.

Shorthands only work on HTML version 4 and up with the use of DTD, to point out how it was confusing when starting from scratch.. It took me 3 weeks to finish my first webpage which is basically just a poem with fonts applied. XHTML does not exist or supported way back then but doctype was.. :D

Sometimes, basics are not really the basics when it comes to the world wide web however building blocks are always present and they never change their usage, they just expand but it looks like that almost none gets deprecated.

What I found out was, since before I learn about HTML, the person who tried to teach me about it was telling me that it is important to have a head and a body and you can forget the rest. I don't understand him until people commented about DOCTYPES.

My first HTML was this single line

<center><b>Hello World</center>

:) of course it is an error but I only know one browser then and that was IE. To my horror when I installed netscape, most of my webpages are just blank pages..
Edited by vhortex (see edit history)

Share this post


Link to post
Share on other sites

<body <!-- parameters here --> >   </body>
signifies that the code between them is the actual document body. everything that is outside this code block will either be deleted, ignored or randomly translated by browsers.

OK, it's exactly like the Unix Shell "exit" instruction inside a shell-script, or the "exec" in a C language program : everything below this line is ignored.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×
×
  • Create New...

Important Information

Terms of Use | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.