banner

Html Tutorial

Html is a pretty simple language to learn, in this tutorial you will learn the basics of web design. For more information go to w3c.org

Basics of Html

All html documents should begin with this tag, <html> and all tags should end with a forward slash / so the end of the document should have an ending </html> in between the html tags is the start head tag, then the title tags then the closing head tag. Next is the body tags, these are placed after the closing head tag but before the closing html tag. There is the most basic html page that you can make..

Basic Code Example

<html>
<head>
<title><title>
</head>
<body>
</body>
</html>

These tags are for creating basic webpages


    Tag References



    Heading sizes

  • <h1> - heading size 1
  • <h2> - heading size 2
  • <h3> - heading size 3
  • <h4> - heading size 4

    • Alignment

  • <left>
  • <center>
  • <right>

    • Formatting text

  • <b> - bold text
  • <u> - underline text
  • <i> - italicise text
  • <em> - empahsize text
  • <color>

    • Identification(optional)

  • name - identifies the name of the element
  • id - sets the id for the element

    • Moving text

  • <marquee> - moves text from left to right and vice versa -> <marquee behavior="scroll" direction="left" scrollamount="10">
  • behavior - the way you want the marquee to look - options are (scroll, slide, alternate)
  • direction - which way you want it to move - options are (left, right)
  • scrollamount - how fast you want it to go - options are (1-100)

    • Paragraph

  • <p> - paragraph

    • Tables

  • <table> - table -> <table align="center" border="0">
  • border - border thickness of table options are 0-4
  • <tr> - table row
  • <td> - table cell

    • Forms

  • <form> - Form declaration -> <form action="web to post data to" method="post">, or "get"
  • <input> - input tage for form data -> <input type="text" name="text" id="textbx" />
  • text - textbox -> <input type="text" name="textbox" />
  • textarea - textarea declaration -> <input type="textarea" />
  • submit - submit button -> <input type="submit" name="submit" />
  • reset - reset button -> <input type="reset" name="reset" />
  • button - generic button declaration

    • Anchor Tag

  • <a> - anchor
  • href - html reference to an external link -> <a href="weblink.com" />

    • Images

  • <img src> -> <img src="name of image or url here" />
  • alt - text that descripes the pic, for visual interpreter software

    • [Home] [page2-CSS] [page3-JavaScript-Part1] [page4-JavaScript-Part2] [page5-PHP]

All tags must have closing tags except for image tags and certain form tags like submit and reset buttons. All fields can use formatting tags, alignment tags etc..


<html>
<head>
<title>TutorialCode-Created By:Gh0$7</title>
</head>
<body>
<h1>Tutorial Code Converted to a Web Page</h1>
<marquee behavior="scroll" direction="right" scrollamount="10"> WebDevelopmentSolutions! <img src="http://www.webdevelopmentsolutions.org/SomePicHere.jpg alt="SomePicHere" />
</marquee>
<table border="0" align="center" cols="3" rows="4">
<tr>
<td>
<h2><em><Form in table example></em></h2>
<form action="mySubmit.php" method="post">
Username:<input type="text" name="uname" id="uname" /><br />
Password:<input type="password" name="passwd" id="passwd" /><br /><br />
<input type="submit" name="submit" value="submit" />
<input type="reset" name="reset" value="reset" />
</form> </td>
</tr>
</table>
<a href="http://www.webdevelopmentsolutions.org/contact.php">WebDev</a>
</body>
</html>

Tutorial Code Converted to a Web Page

WebDevelopmentSolutions! SomePicHere

Form in table example

Username:
Password:
WebDev