A Quick Guide To Learning HTML

Views 1 Like Comments Comment
Like if this guide is helpful
HTML is the standard programming language used for designing websites. HTML is very basic and so can only provide basic features. i have brought together a list of Features which you may find useful designing a website:

Text Formatting:

Bold - <b> YOURTEXTHERE </b>
This will turn your text Bold to maybe help emphasise a certain topic.

Italic - <i> YOURTEXTHERE </i>
This will turn your text Italic(Slanting) to help highlight a sentence.

Underline - <u> YOURTEXTHERE </u>
This will underline any test you write within the 2 Captions. Usually used amongst headings and important headers.

-------

For example, If you wish your text to be bold and underlined you would use the code:
<b><u> YOURTEXTHERE </u></b>


Tables:

When designing a website using HTML, I find the  most standard way is  through Tables. Within a table there are Rows and Columns to which you specify giving you some sort of "Structure" to work with  when entering text and Images.


For example I will show you a standard 500px Width Table with 1 Column and 1 Row:

<table width="500">
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>

The first section of the code specifics the width which is either in PX (Pixels) or %.
The next section <tr> outline the number of Columns within the table, In our case 1.

If we wish to make our table a little bit out of the ordinary ( Background Color, Border, Text Colour ) We can either use dreamweavers automated way of doing this or learn the nitty gritty way and Insert a code like this (Dont worry I will go over this):

<table width="500">
  <tr>
    <td bordercolor="#000000" bgcolor="#0099FF"><div align="center" class="style1">This is an Example</div></td>
  </tr>
</table>

Basically we have still kept the width 500px, But then we have started to format the overall Table using Hexadecimal Colours and CSS ( Cascading Style Sheets)

<td bordercolor="#000000" sets the colour of the border to Black.
bgcolor="#0099FF" sets the colour of the background ( bg is an abbreviation) to a nice Blue.
<Div align="center" then aligns what ever we type to the centre
class = "style1" is the CSS used to colour our fonts for example ( Check out my CSS Guide to understand class tags )

Because we have aligned our text using a <Div align... we need to end this feature using </div> Pretty Simple!
 
So you can have a look at some of the features within this guide all in 1 i have put together some HTML source code for you to take a look at ( Just copy and paste this into Dreamweaver or another HTML Editor, you can get a free HTML editor called notepad++, just search for it:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {color: #FFFFFF}
body,td,th {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    color: #FFFFFF;
}
body {
    background-color: #0099FF;
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
-->
</style>
</head>

<body>
<table width="70%" border="1" align="center" cellpadding="5" bordercolor="#000000">
  <tr>
    <td colspan="2"><h1 align="center">An Example Of A Header</h1></td>
  </tr>
  <tr>
    <td>Left Content Box...</td>
    <td>Right Content Box</td>
  </tr>
</table>
</body>
</html>

You are free to use this how ever way you please :)

Hope this guide was useful to you

Ben.



Have something to share, create your own guide... Write a guide
Explore more guides