How to create a HTML webpage?

Document Sample
How to create a HTML webpage? Powered By Docstoc
					How to create a HTML webpage?
To create your own HTML webpage you need to create a file with the HTML extension ( e.g.
'filename.html' ). So for example: create a new text file ( e.g. "untitled.txt" ) and rename it to anything
with a HTML extension ( e.g. "webpage.html" ). If the extension of files is not displayed, you might
want change this by going to Start > Control Panel and then click 'Files and Icons' and go to 'Display
Options' and uncheck 'Hide extension of known filetypes'. An alternative would be to create a text
file, then open it in notepad and go to File > Save As and then change the Filetype from 'Text Files'
to 'Any files *' and then save it as 'webpage.html' (replace 'webpage' by any desired filename, just
make sure it has the .html extension).

Knowing this, we can start writing HTML inside of this file. Open the HTML file with notepad. Now
we're ready to write HTML inside of this file. A HTML webpage usually starts and ends with the
HTML tag. In general tags are formed with the < and > symbol, where < opens the tag and > ends
the tag and between it we write the name of the tag. However: some ( or should I say: many ) HTML
tags consist of a start and end tag. The 'end tag' has a slashforward (/) in it. So in general:



<begin tagname>
</end tagname>

Now if we go back to the tag that indicates the begin and end of a HTML webpage, with the tagname
'html', we can now easily construct it:



<html>


</html>

Inbetween of these HTML tags we write our HTML code. We can split our HTML code in another 3
parts: a head-, body- and footer part:



<html>


<head>


</head>


<body>
</body>


<footer>


</footer>


</html>

Inside of the head part of the webpage we can create a title for the webpage (which will be displayed
in the browser tab name and browser topbar). We can use the 'title' tag to do this:



<title> My First HTML Webpage! </title>

We have to put this inside of the head part - inbetween of the head tags. We can also give the
webpage a background color by adding the bgColor attribute to the body tag of the webpage, all
together:



<html>


<head>
<title> My First HTML Webpage! </title>
</head>


<body bgColor="blue">


This text will be displayed on my webpage! The background color is now blue, how wonderful. For
color codes check out this webpage.


</body>


<footer>


This text will be displayed on my webpage, as well! Just on the same place as the other text, so the
foot tags are just for the style of the code and do not have any effect on the text put in between of it.
Therefore the footer tag isn't used a lot, more essential are the html, head and body tags.


</footer>


</html>




Preview: Coming soon...
Marking up text.
To markup text in HTML you can use several tags. Each markup has its own tag for it;.

b tag
The b tag makes the text that's put in between of the begin and end tag bold:



<b>This text is bold now.</b>

which outputs:

This text is bold now.

i tag
The i tag makes text that's put in between of the begin and end tag italic:



<i>This text is italic now.</i>

which outputs:

This text is italic now.

u tag
The u tag makes text that's put in between of the begin and end tag underlined:



<u>This text is underlined now.</u>
which outputs:

This text is underlined now.

del tag
The del tag makes text that's put in between of the begin and end tag crossed out (line through it):



<del>This text is put a line through now - 'deleted'.</del>

(Preview coming soon externally)
Creating blank lines and paragraphs.
To create blank lines in HTML the br tag is used:



This is line 1. <br /> This is line 2.

which outputs:

This is line 1.
This is line 2.

Note: Simply putting a blank line into the code won't work in HTML and therefore the br tag is
required to put a blank line inbetween different sentences. At squidoo the text filled into the textareas
is automaticly converted and blank lines are therefore automaticly converted to br tags.

To add extra spaces in between words the syntax &nbsp; is used ( simply hitting spaces won't work
unless the text is put between pre tags - the same goes for enters ). E.g.:

this will work:



word1 &nbsp; &nbsp; word2 <br /> word3 &nbsp; &nbsp; word4

but this will work too:



<pre>word1        word2
word3     word4</pre>
To create a new paragraph ( which means: a paragraph is seperated from the rest of the text by a
larger blank line ) use the p tag:



<p>This is a heading.</p>

which outputs



This is a paragraph.



Note: the p begin tag can also be used alone ( without an end tag nor text ) to create a larger blank
line.
Creating links.
To create a link in HTML simply use the following tag:



<a href="url" target="target">link text</a>

Where 'url' is the url the link points to and 'link text' is the text to be displayed for the link. The target
attribute is optional: if you like to have the link opened in a new window for example, you could use
target="_blank". You can also leave the target attribute out of it and it will just open the link in the
current tab. So for example:



< a href="http://www.squidoo.com">Click here to go to Squidoo.com!</a>

outputs:

Click here to go to Squidoo.com!
Creating lists.
To create a list in HTML we can use the following tags:




       ul - creates an unordered list.
       ol - creates an ordered list.



       li - adds a list item to the unordered or ordered list.



So for example we could create an unordered list with 3 items in it:



<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Which outputs:




       Item 1



       Item 2



       Item 3



But we could also make it an ordered list:



<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>

which outputs:
   1. Item 1



   2. Item 2



   3. Item 3


Creating forms.
Forms can be created in HTML using the form tag:



<form method="method" action="action" name="name">
</form>

where method = the way to submit the form data ( this can be POST or GET (recommends POST for
forms) ) and action = the page to submit the form to (this page will be loaded after form submission)
and name = optional name for the form ( this way the form fields can be accessed easily dynamicly
using Javascript ).

However a form would be pretty useless without any input fields and fortunately these can be
created with the input tag:



<input type="type" name="name" value="value">

where type = the type of input field, which can be for example:




      text - a text input field (most common type



      submit - submit button to submit the form with



      radio - clickable circle, in one form only 1 radio input field can be selected
       checkbox - clickable square, in one form multiple checkboxes can be checked



       hidden - a hidden input field that cannot be seen by the user (nor altered) but IS submitted by
        the form



Note: there are more html input types which are not mentioned ( as they're less common or more
'complicated' ) such as files, images and reset.

further the name and value of the input field are optional; the name however is pretty essential for
the submission as input fields are submitted by their name and corresponding value. The value that
can be set for the input field is just a beginvalue (that can be changed by the user that fills in the
input field).

To make an input field uneditable the READONLY attribute can be added to the input tag. To
actually disable an input field (=uneditable AND not sent through form submission) use the DISABLE
attribute. For example:



<input type="text" name="field1" value="test" READONLY>
<input type="text" name="field2" value="test" DISABLED>

When creating a form: put all input fields for the form in between of the form tags. So an example of
a valid form could be:

test.html


<form method="POST" action="test.html">
<input type="text" name="test">
<input type="submit" name="submit_button" value="Submit Form!">
</form>

However, usually the action of a form is to a PHP file (sometimes CGI or asp is used, but PHP is the
most common way to handle form submission data). If you're interested to learn more about PHP,
please check out the PHP basics tutorial.
Creating headings.
HTML has 6 headings tags ( even though you could create them manually as well by styling with
CSS ): H1 through H6. Where H1 is the largest heading and H6 the smallest. For example:



<h1>This is a large heading!</h1>


<h6>This is a very small heading</h6>

Unfortunately Squidoo does not allow these tags to be used within text modules and therefore I
cannot give a preview right here but I'd say: just try it out for yourself ;).
Creating images.
To 'create' an image in HTML we can use the img tag:



<img src="img path or url" border="px size">

where 'img path or url' is the path from the current directory to the img ( for example:
images/my_image.jpg ) or the url to the img ( for example: somewebsite.com/images/my_image.jpg
). The border is not necessary to be set but is optional. An example of usage:



<img src="http://img98.imageshack.us/img98/3513/wlogo.png">

which outputs:




It's also possible to set a width and height attribute for the image. If only the width attribute is set, the
height is automaticly generated ( keeping the same width:height relation as the original image ):



<img src="http://img98.imageshack.us/img98/3513/wlogo.png" width="50">

which outputs:
We could also combine the a href tag and the img tag to create a link for the image:



<a href="http://www.squidoo.com/lensmasters/webcodez"><img
src="http://img98.imageshack.us/img98/3513/wlogo.png" border="0"></a>

which outputs:




Note: We set the border=0 attribute for the image because when linking an image it automaticly gets
a border which isn't desired in this case.
Creating iframes.
It's possible to display (multiple) webpages inside of your webpage (in a so-called 'iframe'). We can
use the iframe tag to do this. However I do not recommend using (i)frames if not necessary because
it is inefficient and may not be supported HTML anymore in future (in fact, (i)frames are getting
outdated, just like tables).



<iframe src="url" width="px width" height="px height"></iframe>

Where url is the url of the webpage to display within the iframe and px width/px height is the size of
the iframe in pixels (optional).
Creating tables.
Before using tables in HTML, please consider the use of divs instead. HTML tables are slow and
outdated and getting more and more replaced by HTML divs. Especially when it comes to creating
the layout of your webpage, I do not recommend using tables anymore. When using divs it may
however require some more knowledge as for CSS styling, but it's worth it.

Anyway, tables in HTML can still be useful for displaying data easily within a table. To initially create
a table use:
<table border="px border" width="px width" height="px height">


</table>

Where the border, width and height are optional and in pixels when supplied. A table consists of
rows and cells within these rows. To create a row within the table we can use the tr tag and to create
a cell within such row we can use the td tag, for example:



<table border="1">
<tr>
<td>Row1 Cell1</td>
<td>Row1 Cell2</td>
<td>Row1 Cell3</td>
</tr>
<tr>
<td>Row2 Cell1</td>
<td>Row2 Cell2</td>
<td>Row2 Cell3</td>
</tr>
</table>

Unfortunatelly tables cannot be used within Squidoo Text Modules and therefore I cannot supply you
with a preview right here but you may want to check out the preview here (Coming Soon...).
Creating divs.
Divs are sort of "boxes" that can hold different contents of your website. To create a div the div tag is
used:



<div id="optional id">
</div>

Inbetween of the begin div tag and end div tag you put the content for the div ( text e.g. ). Without
any CSS styling all divs would be displayed below eachother. However without any styling divs
would be pretty useless and therefore some CSS knowledge is pretty much a must in order to
(efficiently) work with divs,

Some examples of styles that can be set for a div are: width, height, border, background(-color) and
float (=position of divs relative to eachother, e.g. left from the previous divs or just below them). The
usage is:



<div style="...">
</div>

Where ... should be replaced by the CSS styles, for example:



<div style="width: 500px; height: 250px; border: 1px solid black;">
Some text for the div to display,
</div>


Creating meta tags.
Meta tags can be used to supply search engines with information for the listing of your webpage. In
general, a meta tag is formed like this:



<meta name="name" content="content" lang="lang">

where name is the name of the meta tag ( e.g. keywords ), content is the 'value' of the meta tag (
e.g. keyword1,keyword2,keyword3 ) and lang is the language in which the content of the meta tag is
written ( e.g. en ). So, we could for example have a meta tag supplying the search engine with
keywords for our webpage like this:



<meta name="keywords" content="keyword1, keyword2, keyword3" lang="en">

More types of commonly used meta tags are (by name):




        description - for supplying the search engines with a description of your webpage, e.g.:




         <meta name="description" content="This is a description for my webpage." lang="en">
      author - for supplying the search engines with the author of the webpage, e.g.:




       <meta name="author" content="Webcodez" lang="en">




      robots - If you wish your website not to be crawled by search engines, then the robots meta
       tag can be used which can have multiple values, most importantly: none ( website won't be
       index and links on webpages won't be followed by crawler ), index or noindex (crawler will or
       will not index the webpage), follow or nofollow (crawler will or will not follow the links on the
       webpage):




       <meta name="robots" content="(no)index, (no)archive, (no)follow">



Note: Do make sure you put any meta tags in the head-part of your webpage ( between the head
tags: <head> and </head> ).

				
DOCUMENT INFO
Shared By:
Categories:
Stats:
views:12
posted:7/27/2011
language:English
pages:13
Description: How to create a HTML webpage?