[Immortal GamerZ]HTML Tutorial! Part 2(Advanced)

**bsod-staff14** · 07-17-2009

Hello everyone! I hope my last tutorial helped you learn the very basic's of HTML. .

Here's a few more tip's and code's to get your design and coding off the ground.

Code:

 
The <img> Tag:
This tag is used for images. Used by almost all popular websites and used for effective convincing designs!
Advanced version: <img src="../image.gif" /> 2nd:<img src="http://www.immortalgamerz.com/image.gif" /> 3rd:<img src="image.gif" alt="[Hitler]" />

Images and Text: <h2><img src="image.jpg" alt="Alt Text!" />Example text for the image :P.</h2>

Image's aligning: <img src="image.gif" alt="Alt Text!" align="left" />//Align could also be center or right.\\

Images and links: <a href="index.html"><img src="home.gif" alt="Up" />Home</a> 
<a href="replacing.html"><img src="next.gif" alt="Next" />Next</a>
<a href="ready.html"><img src="back.gif" alt="Back" />Back</a>
<a href="index.html"><img src="uparrow.gif" alt="Up" />Up</a>

What im about to teach you next replaces your body tag.
Image Backgrounds:
<body background="image.gif">
<body background="backgrounds/image1.gif">

<body style="background-image: url(backgrounds/image1.gif);
background-repeat: no-repeat; background-attachment: fixed">

<body style="background-image: url(backgrounds/image1.gif);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center right">

<body style="background: black url(backgrounds/image1.gif)
no-repeat fixed center right">

Thats it for image's today lets move onto tables!

Code:

Table layout for basic's! I am going to use a sample one from a WoW website I made in php/html/css :). I think it will be satisfactory for all you beginner's.
<table border="1">
<caption>Staff Members</caption>
 <tr>
  <th>Name</th>
  <th>Age</th>
  <th>Position</th>
  <th>Role</th>
 </tr>
 <tr>
  <td>Matt</td>
  <td>15</td>
  <td>Owner and Creator</td>
  <td>Web Designer, C++ Coder, LUA Coder, SQL Coder</td>
 </tr>
 <tr>
  <td>Name2</td>
  <td>21</td>
  <td>Position</td>
  <td>Role</td>
 </tr>
 <tr>
  <td>Name3</td>
  <td>21</td>
  <td>Position</td>
  <td>Role</td>
 </tr>
 </table>

Sizing Tables and Border's:
<table border="1" width="100%">
<table border="10" width="100%">
<table cellpadding="10" border="1">
<table cellpadding="10" border="4" cellspacing="8">

Align Table Content:
<table border="1" align="left" width="70%">
<tr align="center" valign="top">

<tr align="center" valign="top">
  <td>14</td>
  <td>16</td>
  <td align=left>No Data</td>
  <td>15</td>
</tr>

<caption align="bottom" style="text-align: right">This is a caption</caption>

Thats all with table's today!

Now lets move onto forms!!!YAY!:

Code:

Basic form Layout:
<form action="login-inc.php" method="post">
content, form controls, and other HTML elements
</form>

Email Form Layout:
<form action="mailto:[email protected]" method="post">

</form>

Other form controls:
Button:
<button type="submit"><b><i>Submit button</i></b></button>
<button type="custom"><img src="image.gif"></button>

Text Area:
<p>Please comment on our Website!.<br />
<textarea name="question4" rows="10" cols="60">Enter your suggestions or compliments here
</textarea>
</p>

Once again thats all the time I have for today I will come back and post more :P. I hope this helps some of you beginner's if not oh well now I can say I tried :P.

**Hellgawd** · 07-17-2009

Why do you use tables. Divs /w CSS = win

**bsod-staff14** · 07-17-2009

Because im going up in part's :P. I will release Part 3 tomorrow just my hands hurt from typing :/.

**Garosie** · 07-18-2009

Omg this is soo nice

I allready knew a bit of this, but i've even made my own HTML now :P

**bsod-staff14** · 07-18-2009

Thanks bud

glad to know I was of some use to someone

.

Shout-Out

User Tag List

Thread: [Immortal GamerZ]HTML Tutorial! Part 2(Advanced)

Thread Tools

Search Thread

[Immortal GamerZ]HTML Tutorial! Part 2(Advanced)

Similar Threads

[Share] Great HTML Tutorial(s)

PSD into CSS + HTML tutorial

[Immortal GamerZ]Php Guide! Part 1(Variables+more!)

[Immortal GamerZ]HTML Tutorial! Part 1

[Tutorial] Full grunge sig [Advanced]

OwnedCore Forums

casino

CoreCoins

My OwnedCore

About Us

Casino