menu

Thursday, August 26, 2010

HTML fast learn tut [Crash Corse]

I just thought to write a simple tute to *newbies* who wanna know to code in HTML(Hyper Text Markup Language) (probably the easiest language on the earth Big Grin)

First lets start like this 


HTML rules:

1) NOT CASE SENSITIVE - you can write <html> as <HtMl> or <htML> or any other way but its good writting in one case unless you are mad @@@

2) CLOSE ALL THE OPENED TAGS - html is no any strict language nut keep a hbit of writting the close pair (<html></html>) together soo that you wouldn't post 1000 threads saying that your web site dont look like you wanted.

3) PLEASE FOLLOW THE 1st and the 2nd closely Big Grin

So lets be fast:

Every HTML page has a structure

Code:
<html>
<head>
<title>TITKE OF YOUR SITE</title>
</head>
</html>
so thats all self explanary, only the <head> tag will be used later (of course you must include it in every page) 

then the <body> tag:

Code:
<html> <!-- Comments are added like this -->
<head>
<title>TITKE OF YOUR SITE</title>
<body>
Here YOU ARE GOIUNG TO PUT ALL THE STUFF OF THE PAGE
</body>
</head>
</html>


So first the main heading (not used by many) the <h1> , according to the importance of the heading you can change it as 

<h2><h3> wtever im nt goign to xplain what are the differences see it your self:



Code:
<html> <!-- Comments are added like this -->
<head>
<title>TITKE OF YOUR SITE</title>
<body>
<h1>This is the main heading></h1>
Here YOU ARE GOIUNG TO PUT ALL THE STUFF OF THE PAGE
<h2>This tutorial is soo dumb</h2>
<h3>3rd heading</h3>
</body>
</head>
</html>


Next We wont some paragrapghs so put <p> there many attribute to <p> search them yourself!!:



Code:
<html>
<head>
<title>TITKE OF YOUR SITE</title>
<body>
<h1>This is the main heading</h1>
<p>Here YOU ARE GOIUNG TO PUT ALL THE STUFF OF THE PAGE</p>

<h2>This tutorial is soo dumb</h2>

<p align="center"> This is the second paragraph aligned center</p)
<h3>3rd heading</h3>
<p> remember always to end the paragraph with </p>
</body>
</head>
</html>



You may now see that though you press the enter 100 times inside the <p> tag the lines are not going down (breaked) because html isnot a space sensitive language wither, that is 1000 spaces would be concidered as one space n html (pretty luna isnt it?). So it is not going down 
untill you tell it to break the line with <br /> line break (note tat theres no closing tag for it:



Code:
<html>
<head>
<title>TITKE OF YOUR SITE</title>
<body>
<h1>This is the main heading</h1>
<p>Here YOU ARE GOIUNG TO PUT ALL THE STUFF OF THE PAGE</p>

<p> remember always to end the paragraph with. <br /> Ohh yeh this is a new line :DD <br /><br /> You skipped two lines

</p>
</body>
</head>
</html>


ok now we'll see sme text efferts :


Code:
<html>
<head>
<title>TITKE OF YOUR SITE</title>
<body>
<h1>This is the main heading</h1>
<p>There you have some text effects</p>
<b>BOLD</b><br />
<i>Italian</i><br />
<u>Underlined</u><br />
<s>Crossed text</s><br />
</body>
</head>
</html>
there are many other google it!

now text formatting:
@@using lists; bullets, numbering



Code:
<html>
<head>
<title>TITKE OF YOUR SITE</title>
<body>
<h1>This is the main heading</h1>
<p>There you have some text effects</p>

<ul type=circle> <!-- use circle, square  for the type property and see the change  -->
<li>Two</li>
<li>Two</li>
<li>Two</li>
</ul>

Numbered LIst <br />
<ol type="A"> <!-- use a, i, 1, etc for the type property and see the change  -->
<li>Two</li>
<li>Two</li>
<li>Two</li>
</ol>

</body>
</head>

</html>


wanna be s bit colourful?

will edit the body tag NOTE that i have put the colours in both english and in hex format (use word to get the hex code)



Code:
<html>
<head>
<title>TITKE OF YOUR SITE</title>
<body bgcolor=black text=#ffffff >
<h1>This is the main heading</h1>
<p>There you have some text effects</p>
<b>BOLD</b><br />
<i>Italian</i><br />
<u>Underlined</u><br />
<s>Crossed text</s><br />
</body>
</head>
And i you want to change the font insde the text just use <font> tag:



Code:
<html>
<head>
<title>TITKE OF YOUR SITE</title>
<body bgcolor=black text=#ffffff >
<h1>This is the main heading</h1>
<p>There you have some text effects</p>

<font color=blue><b>This is changed</b></font><br />
<i>Italian</i><br />

<u>Underlined</u><br />

<font size="30"><s>This is big</s></font><br />
</body>
</head>


You know the basics soo im here after not going to give every part of the code (add these to the body part anyway)
want to make a table? use the <table> tag try changing these value and learn youself:

Code:
<table align="center" cellpadding="10" cellspacing="5" border="3">
<th>Table heading</th>
<tr>        <!-- table rows -->
    <td>CELLONE</td>
    <td>CELL TWO</td>

</tr>

</table>


Here an xtreamly useful thing hyperlink (or the anchor tag)



Code:
<a href="my_second_page.html">Have a Look Here!!!</a>


Put an image



Code:
<img src="I_am_dumb.jpg" alt="while the picture is loading and someone hover this will show" />

This is nice :

Code:
<marquee>Hello im going </marquee>

Soo the end of this, this is xtreamly a bit of HTML (but likely you can make a page out of this Big Grin)
and REM. HTML is worthless wothout @ least CSS. So go ahead and read the next CSS tutorial.

Happy Web Designing Big Grin

No comments:

Post a Comment