How to Make an Easy Web Layout
Web pages are written in hypertext markup language, or HTML. A page can be written from scratch using HTML and a basic text editor, such as Notepad. Although there are programs for creating web pages, knowing how to write in HTML will free you from software barriers to your creativity.
Other People Are Reading
Things You'll Need
- paper
- pencil
- computer
- basic text editor
- web design software (optional)
- reference book or website on HTML code
Instructions
-
Planning
-
1
Sketch an idea of what you want your page to look like. It doesn't need to be great art, but it does need to show where you would like to have text, pictures (a word description of the picture will work fine), link buttons and other features to be located. If you plan to have more than one page, use more than one piece of paper.
-
2
Write out a basic template using script from either a web HTML tutorial or copied from a book on web design. The script will have two basic parts: the heading, which contains the key words search engines will use during a search as well as style instructions such as color, and the body, which contains all the parts of the web page that people will see when they access it.
Here is a sample script:
<DOCTYPE html PUBLIC "-W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/strict.dtd">
<html>
<head>
<title>Flowers and Faux Art Boxes</title><style type="text/css">
<!--
body { background-color: #008b8b; font-family: Arial, Helvetica, sans-serif;
color: #faebd7 }
a:link { color: 2F2F4F}
a:visited { color: #8B4726}
a:hover { color: #deb887 }
a:active { color: #dc143c }
-->
</style>
</head>
<body>
<a name="top"><h1>Flowers and Faux Art Boxes</h1></a><img src="http://www.artwares.com/hh2.JPG" alt="Title: align="left"Border="5" Width="120" height="120" />
<br>
</br>
<a href="hh2.JPG"><blockquote>Commit random acts of kindness and senseless beauty.</blockquote></a><br>
</br>
<a name="contents"><h3>Contents</h3></a>
<ul>
<li><a href="interests.html"><h3><b>Interests</b></h3></a>
<li><a href="hobbies.html"><h3><b>Hobbies</b></h3></a>
<li><a href="resume.html"><h3><b>Professional Resume</b></h3></a>
<li><a href="computers.html"><h3><b>Computer & Electronic resources</b></h3></a></li>
<li><a href="teaching.html"><h3><b>Teaching Resources and Lesson Plans</b></h3></a></li>
</ul><p>All parts of webpage by <a href="mailto:artwares@namelessdomain.org">Emily (my email)</a>except where otherwise stated. Last update: December 22, 2006</p>
</body>
</html>Notice the style instructions in the heading. This is a cascading style sheet. When this type of heading is used, it causes all the other pages in the website to have a similar appearance and behavior.
-
-
3
Save your completed script as "pagename.html . If you copy the script above into your own text editor, and then save it as name.html, it will open in your web browser. You will note that there is a frame without a picture on the page, and links that do not go anywhere. That is because you need to have a picture named the same name as the picture listed in the script in the same folder as the text/HTML document, or a correct description of the needed link.
-
4
Use sample scripts such as the one above to try out entering your own information. Plug your data into the spaces between the <script here>your words here<script here> coding to make the template into a page of your own. Place a correctly named picture into the same folder to allow it to display in the frame. Use the template to create pages that match the links. Be sure to link back to "home."
-
5
Create a table for pages that have pictures or other items that need to appear in a particular order or place. The table code is: <table> <tr>(stands for table row; you need one for each row in the grid you develop)<td>(table data; you need one for each piece of information or picture you wish to place in the table), follow that with the end code </td> When you have completed a row, use the code </tr>, and finally when the table is complete, </table> .
-
6
Invest in a good HTML manual if you plan to do a lot of web development. Although there are a number of tutorials online, a book is always at hand even if your Internet connection decides to go down. On the other hand, do investigate the tutorials. They will frequently have new information that was not available when the book was published.
-
1
Tips & Warnings
Your web pages and web documents can be seen by your web browser on your computer. This does NOT mean they are on the Iinternet. They must be published on a web server before they are available to the public.
References
Resources
- Photo Credit With 4 extra blank buttons image by metalaxiz from Fotolia.com
