Reminder: First of all, you don't need anything fancy to make a web page. Any text editor including NotePad (under accessories on your computer) will work. To see some HTML just right click on this page and view source. You will see the html portion. If you copy this, paste it into a NotePad file. Save. Change the file extension from .txt to .html (or .htm) Double click to open it and it will run as a web page in your default browser. The thing is, it won't look the same. That's because you don't see the CSS and PHP code. You do not want a WYSIWYG (what you see is what you get) editor or an online editor (too slow). It sounds nice, but you have no design control and it is impossible to edit. You will just be entering text. You want a code editor that supports as many scripting languages as possible.
1. Find a host, select a domain name and register for a hosting account. Note: Yahoo/GeoCities is being discontinued later this year. I would not bother with a free site if you really want to learn web design. Consider your domain name carefully because it will be your primary account name, even though you can add unlimited domains later for $10 per year each. You can research names quickly @ Now You Know's Domain Name Checker, but it is easiest for you to register where you host.
2. Aquire the basic materials to start: You will need at least one book for reference. I would suggest HTML, XHTML & CSS (Visual QuickStart Guide Series)
by Elizabeth Castro. Download Roden Web Editor free download or spend the $39 and download RapidPHP and install it.
Download Filezilla and install it.
For a very tiny investment you will be set for a long time and be able to develop professional quality websites.
The first step to building any web site is to make a new folder called "your web site". In the folder make a new folder called "images" to store any grahics files. Make a file called "me.html" and another called "styleme.css". Always follow this convention.
In the me.html copy and paste the following code:
<head>
<!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">
<title>Your first web page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link href="styleme.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="title"> <center> <img src="images/yourimage.jpg" width="400" height="100" alt="" />
</center></div>
<div id="main">
<center>
<h1>John Rowland </h1>
</center>
<h2>Greetings</h2>
<p> I am recently retired after 33 years of teaching math and computer science.I am certified in grades 7-12 and I have taught all grade levels from 7th grade math through A.P. Computer Science. I have taught programming for over 25 years in Basic,Logo, Pascal, Visual Basic, C++, HTML and Java including applets and GUI applications. I have my B.A. and masters degrees from SUNY Brockport and 84 gradute hours in math and computer science. I also have experience in web design including XHTML, CSS, JavaScript,PHP and mySQL databases. I intend to launch a small web design company within the next year. I am also interested in being a computer trainer. I miss my former students and I always enjoyed my computer programming classes. </p>
</div>
<div id="bottom">
<center>
</center>
<li><a href="mailto:yourname@yahoo.com">Contact Us</a></li>
<li><a href="index.html">Home Page</a></li>
<p>Bottom for copyright etc.</p>
</div>
<p> </p>
</body>
</html>
In the styleme.html copy and paste the following code:
html, body {
background-color: #99CCFF;
margin: 0px;
padding: 0px;
border: 0px;
width: 90%;
}
#title {
top:2%;
width:100%;
left: 50px;
padding:2%;
border: 2px solid Blue;
background-color: #99CCCC;
font: 1em "Times New Roman", Times, serif;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#main {
left: 10%;
position: relative;
width:80%;
padding:2%;
border: 2px solid Blue;
background-color: #99CCCC;
font: 1em "Times New Roman", Times, serif;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
#main p, #main ul, #main li {
font: 1em Arial, Helvetica, sans-serif;
}
#main h1 {
font: bold 2em Balthazar, "Blackadder ITC", "Comic Sans MS", "Arial Rounded MT Bold", Arial, sans-serif;
color:#3366CC;
}
#main h2 {
font: bold 1.25em Balthazar, "Blackadder ITC", "Comic Sans MS", "Arial Rounded MT Bold", Arial, sans-serif;
color: #859CFE;
}
#main a {
color: #3300FF;
}
#main a.hover {
color: red;
}
#bottom {
left: 10%;
position: relative;
width:80%;
padding:2%;
border: 2px solid Blue;
background-color: #99CCCC;
font: 1em "Times New Roman", Times, serif;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 10px;
}
Save each file in the folder. Find any photo or graphic and resize it using any photo editor to 400 x 100 px. as a .jpg into the images folder. I have never found a free graphics editor that I liked. You can try Paint.net as a free download. Double click on the me.html file and it will execute in your current browser window (Internet Explorer or Mozilla Firefox). Open the 2 files using Roden Web Editor or Rapid PHP and see it excute in the browser window.
If you are using RapidPHP there are auto-complete features to help you with CSS choices. Feel free to try random properties on the test template that I gave you. I included many extra properties for that purpose. Save your changes under different names.
One of the best ways to learn for me is by example. That is why I will make all of my code readily available and provide links to more. Jennifer Kyrnin of About.com just posted a link in her newsletter that I think is the best I've ever seen for beginners and intermediate learners. She offers 100 links to common property examples in an extremely well organized presentation. Here is the link to HTML Examples: Examples of How HTML Works By Jennifer Kyrnin, About.com. I strongly suggest that you sign up for her newletter from the link on that page.
Further information is available at About.com where you can take the free course and from your reference book HTML, XHTML & CSS (Visual QuickStart Guide Series) by Elizabeth Castro. This lesson alone could keep you busy for months or until you decide to move up to PHP.
Here is a fully commented CSS Stylesheet XHTML page. It is a 2 Column Elastic, Left Sidebar, Full Width Header and Footer. The Style is contained on the top of the HTML page to save space. You should take it out and link it, similar to the simpler example above. Don't worry about the properties that you don't understand yet.
Pay close attention to how the Div, Class and Style relates to the CSS properties.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2 Column Elastic, Left Sidebar, Full Width Header</title>
<style type="text/css" media="all">
<!--
/* This rule resets a core set of elements so that they will appear consistent across browsers. Without this rule, content styled with an h1 tag, for example, would appear in different places in Firefox and Internet Explorer because each browser has a different top margin default value. By resetting these values to 0, the elements will initially be rendered in an identical fashion and their properties can be easily defined by the designer in any subsequent rule. */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6 {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-size: 100%;
}
/* The body is the outermost layout component and contains the visible page content. Setting properties for the body element will help to create consistent styling of the page content and more manageable CSS. Besides using the body element to set global properties, it is common to use the body element to set the background color of the page and create a centered container for the page content to display. */
body {
background-color: #666;
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
line-height: 14px;
margin: 0 0 0 0; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 0 0 0 0; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: center; /* Centers the page content container in IE 5 browsers. */
}
/* Commonly used to style page titles. */
h1 {
color: #000;
font-size: 14px;
font-weight: bold;
line-height: 14px;
}
/* Commonly used to style section titles. */
h2 {
color: #000;
font-size: 12px;
font-weight: bold;
line-height: 14px;
}
/* Sets the style for unvisited links. */
a, a:link {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for visited links. */
a:visited {
color: #000;
font-weight: bold;
text-decoration: none;
}
/* Sets the style for links on mouseover. */
a:hover {
color: #000;
text-decoration: underline;
}
/* Sets the style for a link that has focus. */
a:focus {
color: #000;
}
/* Sets the style for a link that is being activated/clicked. */
a:active {
color: #000;
}
#topDiv {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left;
}
/* This is a container for the page content. It is common to use the container to constrain the width of the page content and allow for browser chrome to avoid the need for horizontal scrolling. For fixed layouts you may specify a container width and use auto for the left and right margin to center the container on the page. IE 5 browser require the use of text-align: center defined by the body element to center the container. For liquid layouts you may simply set the left and right margins to center the container on the page. */
#outerWrapper {
background-color: #fff;
margin: 0 auto 0 auto; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
text-align: left; /* Redefines the text alignment defined by the body element. */
width: 70em;
}
#outerWrapper #header {
background-color: #ddd;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
font-size: 18px;
font-weight: bold;
line-height: 15px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #topNavigation {
background-color: #ebebeb;
border-bottom: solid 1px #666; /* Sets the bottom border properties for an element using shorthand notation */
height: 25px;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
#outerWrapper #contentWrapper #leftColumn1 {
background-color: #ebebeb;
border-right: solid 1px #666; /* Sets the right border properties for an element using shorthand notation */
float: left;
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
width: 14em;
}
/* Contains the main page content. When using a mutliple column layout the margins will be set to account for the floated columns' width, margins, and padding. */
#outerWrapper #contentWrapper #content {
margin: 0 0 0 16em; /* Sets the margin properties for an element using shorthand notation (top, right, bottom, left) */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
/* Using floated elements and a clear float class is a common method to accomplish multiple column tableless layouts. If floated elements are used without being cleared the elements following will wrap around the floated element. This class should be applied to an element after the last floated element and before the close of the container with floated elements. */
#outerWrapper #contentWrapper .clearFloat {
clear: left;
display: block;
}
#outerWrapper #footer {
background-color: #ddd;
border-top: solid 1px #666; /* Sets the top border properties for an element using shorthand notation */
padding: 10px 10px 10px 10px; /* Sets the padding properties for an element using shorthand notation (top, right, bottom, left) */
}
-->
</style>
<style type="text/css" media="print">
<!--
/* It is common to set printer friendly styles such as a white background with black text. */
body {
background-color: #fff;
background-image: none;
border-color: #000; /* Sets the border color properties for an element using shorthand notation */
color: #000;
}
-->
</style>
<!--[if IE 5]>
<style type="text/css">
/* IE 5 does not use the standard box model, so the column widths are overidden to render the page correctly. */
#outerWrapper #contentWrapper #leftColumn1 {
width: 16em;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
/* The proprietary zoom property gives IE the hasLayout property which addresses several bugs. */
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
</head>
<body>
<div id="topDiv">Full Width Header</div>
<div id="outerWrapper">
<div id="header">Header</div>
<div id="topNavigation">Top Navigation</div>
<div id="contentWrapper">
<div id="leftColumn1"><h2>H2 leftColumn1 Title </h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. <a href="#">More...</a></p>
<hr size="1" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div>
<div id="content"><h1>H1 Main Content</h1>
<hr size="1" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. Donec et ipsum et sapien vehicula nonummy. Suspendisse potenti. Fusce varius urna id quam. Sed neque mi, varius eget, tincidunt nec, suscipit id, libero. In eget purus. Vestibulum ut nisl. Donec eu mi sed turpis feugiat feugiat. Integer turpis arcu, pellentesque eget, cursus et, fermentum ut, sapien. Fusce metus mi, eleifend sollicitudin, molestie id, varius et, nibh. Donec nec libero. <a href="#">More...</a></p>
<h2>H2 level heading</h2>
<hr size="1" />
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Praesent aliquam, justo convallis luctus rutrum, erat nulla fermentum diam, at nonummy quam ante ac quam. Maecenas urna purus, fermentum id, molestie in, commodo porttitor, felis. Nam blandit quam ut lacus. Quisque ornare risus quis ligula. Phasellus tristique purus a augue condimentum adipiscing. Aenean sagittis. Etiam leo pede, rhoncus venenatis, tristique in, vulputate at, odio. <a href="#">More...</a></p></div>
<br class="clearFloat" />
</div>
<div id="footer">Footer</div>
</div>
</body>
</html> |
It's all Greek (Latin) to me. What's with the foreign language? That is a tradition that dates back to the first printing presses. It gives meaningless content so that the design can be viewed. It is a proven fact that if you put in the native language, people will spend time reading it instead of concentrating on the design.
More Practice: At this point you can try downloading some of the free templates that I referenced on the HTML topic page and start playing. When you are ready you can start uploading pages to your new website using Filezilla. The Host, UserName and Password are readily available when you sign in to your HostMonster account on the CPanel. Your initial page is always called "index.html". When you put in your URL in the address bar of your browser "yourdomain.com", that is the page that will show by default.
Go on to Lesson 2 (Available Now!) |
