Lesson 2:  Creating a Basic Page

Open your text editor and type the following code.  I will explain what it means but this will allow you to see visually what it is to code and get a feel for typing it.

<html>
<head>
<!-- my first basic webpage -->


<title>My first basic webpage!</title>
</head>


<body>
<h1> This is my first basic webpage by (type your first name)</h1>


<p> Hi World! This is my first webpage that I want to share with you. </p>

</body>
</html>

 

The next step is to save this file.  Organization is a key element to successful web design.  Save this file to your computer where you can easily locate it at any time.  When savings html files, do not use spaces and end your file with the .html extension.  For example:  MyFirstWebpage.html

Open your internet browser.  You can either use your browser's menu to open your file or you can simply drag the file into the open browser window.  If you typed the code correctly as shown above, you should now see something like the image below.

Example 1

If your browser doesn't show your file as seen above, you have errors in your code.  Accuracy is another key element to successful web design.  If you have errors, start again.  Now is the time to learn that everything is precise in HTML.  If you mistype, it isn't going to work properly.  It may seem redundant but continue until your browser shows your first page correctly.

At this point, you can cheat so to speak by copying and pasting code.  If you follow this practice, what have you learned?  It may seem silly of me to continue to press this point but you should hear it often so you recognize the importance of it.  Learn good habits now so you don't repeat mistakes again and again.  You want to code a website.  I will show you how to do it.

Homework Assignment No. 2, Part 1:

After you have saved your file and all is correct, email me your file.  In your email, tell me how many times you typed the file until you learned it.  HTML code does not change.  If you memorized the code shown above, you have learned much of the code that designs a webpage.  The next lesson I will tell you what the code means and how it is used.  I learned how to code HTML by viewing the source of webpages, copying and pasting the code into my text editor, and inserting my own content to replace the coder's content.  Easy to do but if this is the practice you want to learn, think of it this way, you're taking someone's work and where's the pride in that.  HTML is basic, meaning its not difficult.  You too can learn how it works and how to do it to create your own pages if you put the effort into it.

 

Every good web design starts with a layout.  On a piece of paper, sketch out the design of your website.  Below is an example of what I mean to guide you through this process.  Believe it or not, planning before you code makes it easier.  Keep that design with you as you work on your pages for the website.  You can easily make changes to your sketch, but it isn't always easy to change your pages.  Give a great deal of thought how you want your page to present on the web.  Think layout, not style.  Remember, HTML is how the page works and CSS defines style.  You have to learn how to make your page work before you design the style.

Example 2: Layout Sketch

I am no artist LOL!  Actually what you see above is a modified version of how the concept for the latest design for sheyzztoybox.net started.  It changed from beginning to end in some ways but the overall way the site works has stayed true to this sketch.  I sketched the layout and pretty much stayed true to it.  This is the first step to planning your first website.  Think what you want to present on your website, plan it out on paper, and draw your sketch.  As you progress, you will make changes but the overall layout should stay the same.  Love your layout before you begin to code. 

Tip:  Check out other websites and get ideas for your layout.

Homework Assignment No. 2, Part 2:

You knew this was coming :)  Draw your layout sketch.  If you have a scanner and have the knowledge how to scan a jpg file, email me your sketch.  If you don't have a scanner or don't know how to scan a jpg file, send me an email wherein you describe your layout from your sketch.  I am excited to see your idea. 

 

You have completed Lesson 2. I look forward to hearing from you soon.