HTML works pretty logical for us humans. It's a kind of text which browsers read from top to bottom and from left to right. First thing you will notice is that every command starts with "<>" and ends with "</>". It's called TAGS. The complete list of tags is shown here.
But you can learn about the tags "on the fly" and use design view when opening a Dreamweaver. You can also use split view and watch what's heppening in the upper screen (what tags appear) when working in the lower. Very important is that every HTML document starts with:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>your-page-title</title>
</head>
<body>
.
.
.
and ends with:
</body>
</html>
Every opened tag must be closed at some time. Opening tag is for example: <title> and closing tag is: </title>. You should close tags by exactly the same order they've been opened. And yes, you can use multiple tags one after another.
In my first post I suggested the page structure with banner, left sidebar for navigation thru the web site and main central "window" for everything else (text and pictures).
We need a table. In Dreamweaver (FrontPage or Expression Web is pretty similar) go to: Insert/Table. Choose 2 Rows, 2 Columns, Table width: 800 pixel, Border: 1 pix, and than click OK.
Selact first row, right mouse, go to option "Table" and than click "Merge". Then pull the middle line of the second row to the left, lets say to 200 pixel. Now we have our main structure. And the source code in the upper window (if you use split view) should look like this:
<!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>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="200"> </td>
<td width="594"> </td>
</tr>
</table>
</body>
</html>
You see, a lot of code was added automaticly. You can place your mice pointer to any of those table cells and insert whatever you want to. In our left sidebar we will put some menu items. Just write it like you would do it inside a MS Word table. For example:
Home
About us
Page no. 1
Page no. 2
Useful links
Note: if using Ctrl+Enter after each word (menu item) there won't be an extra empty row between rows.
Connecting pages of a web site with each other:
It's called linking. In our sidebar we certanly need links to other (future pages of our web site). Select the first word "Home" and then go to Insert/Hyperlink. In the URL field type the name of your first page, which is always "index.html" or "index.htm". URL is in this case: "http://www.your-web-site/index.html". Do it with other "menu items" the same way, but don't leave any space between words in web page names. For example, name the next page as: About_us and link to it like: " http://www.your-web-site/About_us.html". Or yust for testing purposes link it with browse to any other local file on your PC, like .doc, .pdf or other .htm file.
Playing around with your web editor you will pretty soon find out how to change cell color, font size, insert image..etc. You want to read more about it: here.
.
But you can learn about the tags "on the fly" and use design view when opening a Dreamweaver. You can also use split view and watch what's heppening in the upper screen (what tags appear) when working in the lower. Very important is that every HTML document starts with:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>your-page-title</title>
</head>
<body>
.
.
.
and ends with:
</body>
</html>
Every opened tag must be closed at some time. Opening tag is for example: <title> and closing tag is: </title>. You should close tags by exactly the same order they've been opened. And yes, you can use multiple tags one after another.
In my first post I suggested the page structure with banner, left sidebar for navigation thru the web site and main central "window" for everything else (text and pictures).
We need a table. In Dreamweaver (FrontPage or Expression Web is pretty similar) go to: Insert/Table. Choose 2 Rows, 2 Columns, Table width: 800 pixel, Border: 1 pix, and than click OK.
Selact first row, right mouse, go to option "Table" and than click "Merge". Then pull the middle line of the second row to the left, lets say to 200 pixel. Now we have our main structure. And the source code in the upper window (if you use split view) should look like this:
<!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>
</head>
<body>
<table width="800" border="1" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2"> </td>
</tr>
<tr>
<td width="200"> </td>
<td width="594"> </td>
</tr>
</table>
</body>
</html>
You see, a lot of code was added automaticly. You can place your mice pointer to any of those table cells and insert whatever you want to. In our left sidebar we will put some menu items. Just write it like you would do it inside a MS Word table. For example:
Home
About us
Page no. 1
Page no. 2
Useful links
Note: if using Ctrl+Enter after each word (menu item) there won't be an extra empty row between rows.
Connecting pages of a web site with each other:
It's called linking. In our sidebar we certanly need links to other (future pages of our web site). Select the first word "Home" and then go to Insert/Hyperlink. In the URL field type the name of your first page, which is always "index.html" or "index.htm". URL is in this case: "http://www.your-web-site/index.html". Do it with other "menu items" the same way, but don't leave any space between words in web page names. For example, name the next page as: About_us and link to it like: " http://www.your-web-site/About_us.html". Or yust for testing purposes link it with browse to any other local file on your PC, like .doc, .pdf or other .htm file.
Playing around with your web editor you will pretty soon find out how to change cell color, font size, insert image..etc. You want to read more about it: here.
.
It will be a wonderful information