HOME RECRUIT ABOUT
             By Divan Erasmus - Please feel free to connect with me on Google+ or Facebook & Twitter .

Lesson #2:"How to start designing your Actual Webpage"

(these are the fundemental methods that Web Designers use to make web pages.)

In This Second Web-Tutorial lesson we will learn how to make our actual Webpage, this is the Second Lesson out of a total of THREE fundamental Lessons , this is for anybody that wants to make a Webpage even if you are only just a beginner to Webpage Design.

Start this lesson by Watch the Second Web-Tutorial video below on HTML & Web page designing and continue to the static list that follow for the important steps &information with links.


Join my Web-Tutorials group
Like

This Is the Fundamentals of ”how to Design Your Webpage”:

Step 1

1) Install your HTML Editor program as mentioned in Lesson #1 in Step 3


-HTML means Hypertext Markup language, we will continue in this lesson on making your webpage with HTML but if you want to find out more about HTML then click on this link What is HTML
-To make this Lesson easier for you or anybody that has never made a webpage you need to download a Template, and use it to complete all the following instructions below.

-Now You will need to:

1) download the Webpage Template (Template Download link),
2) Unzip and open the Webpage template in your HTML Editor software (in "Notepad++") ,
3) Now Save your Webpage as index.html in a new folder you name web folder .

This is how you Download and save the Template file as .HTML with your HTML Editor Software - "Notepad++" program.

4.1. Open your HTML Editor Software - "Notepad++" program.
4.2. Click on File tab on top left the HTML Editor Software, then Click on Open and click File .
4.3. Select The Template file you downloaded from my website and Open it.
4.4. After opening the template in your HTML program Click on File tab again on top left, then Click on Save as and save your Webpage as index.html in a folder you name as Web Folder.

In other words after making the web folder save your actual Webpage template as index.html (index–dot-html like this index.html as your webpage name, your webpage template is now saved as index.html), make sure that this Webpage template index.html is saved in your Web Folder file that you named and made(make it anywhere you wish , I recommend to create your file on your desktop).

To Clarify your action in this First step: you need to Download the template open it with Zip program and save it:

Step 2

2) You have already downloaded the template above and saved it as index.html , now we need to edit this Template saved as index.html with your HTML Editor Software (notepad++ program).

You Need to understand that You will only be working between tags, your major tags are Head-tag & body-tag in any HTML Webpage.

Also Understand that in between your Body Tag is where all that you see on the webpage itself will be inserted like: Images, Text or even Videos could be added in between your Body tags

However for this step your Head tags are where you will add your Webpage name, in-between the TITLE tags

For This Second step please add your name that will be seen on the Browser tab and type it in-between the title-tags inside the Head tag

Your page default name is already named as“My WEB PAGE” you can keep it as it is or choose “your own name” for your page as it will Show on the Browser tab above the Webpage,so it is completely up to you what name you choose.

Step2 of Lesson2 See the image above to show you where to add your webpage name in the Title tag inside the Header tag also watch the Video.

Step 3

3) You will insert an image into your Webpage in the “Your Image Area“ of your HTML Webpage template, you would only need to understand that your image code will go within the img-tags (luckely already done for you ).

But what you need to do is make an image with your photo editing software as mentioned in Lesson #1 in Step 6 or get any image that belongs to you, when you have your image ready, name it image1.jpg and save it in your webpage folder as shown in STEP 1 called Web Folder. Now make a new folder within your Web Folder and name the folder images, now save your image1.jpg in this folder within your images folder.

To make that image show on your page when we add your page on the internet you will have a folder known as images and if you want your webpage to go to that folder and select your picture you will add the path like this: src=/images/image1.jpg.(already done for you in template)

This is how you save your "image1" in the "images" folder.

1) Make your new image folder inside your existing Web Folder and name this new folder images,
2) Open your Image in your Photo-Image Editing Software and save the image as image1.jpg in your images folder or just rename it image1.jpg,
3) Remeber when you open an image with your photo-image editing program you click on file then click on Open and select your image,
4) When you save your image you click on file then Save as and you name it image1.jpg and save it in your new "images" folder located within your Web Folder.

For This Third step please choose your image and name it image1 now make a new folder in your Web Folder and name the Image folder images.

Step3 of Lesson2 See the image above as an example of image code in the img-tag.

Step 4

4) Now you will add text to your Webpage shown in the "text area" in the HTML of your template located within the p-tag viewed in your HTML editor program -Notepad++.

As mentioned you need a word program Lesson #1 in Step 7 and start typing whatever you want to say on your webpage and make sure to spell check your sentences, when you have finished typing your words then add it to your web page template in the marked space named as "text area” in between the P-tags.

For This fourth step please add the your text in the Text Area in between the two P- tag areas already shown in your webpage template

Step4 of Lesson2

See the example image above to show you where to add your Text Area within in the P-tag.

Step 5

5) Lets add a YouTube Video to your Webpage shown in the HTML editor program (Notepad++) and add the YouTube imbedded code in the Html code where it says “insert Video Area" within the div-tag.

You will need to go to YouTube.com Click here for YouTube website and choose a video you would like to add on your webpage and imbed it in your HTML template, select the option on the YouTube video website to copy and embed the video and paste that embed code from the YouTube Website to your HTML template and insert it in the "insert Video Area” in between the DIV-tags.

For This Fifth step please add your embedded YouTube video code from YouTube.com website and paste it in between the two DIV- tags area where it says "insert Video Area" already shown in your webpage template .

Step5 of Lesson2

See the image example above on where to add your YouTube video in the Div-tag.

Step 6 Final Step

6) We will learn how to Add a hyper link from your Webpage to your Facebook website, in other words when someone wants to go to your Facebook page they will click this easy link that will instantly take them from your Webpage to your Facebook page.

You will need to go to your Facebook page and do another round of copy & paste with your Facebook URL at the top of the Internet browser of your own facebook page found at Facebook.com. click here to go to Facebook and to get your FB URL.
*You need to Copy it and Paste your FB-URL in your HTML editor program (Notepad++) in your Webpage code, in this area:
href="paste Facebook link here",
*It will look something like this:
href="http://www.facebook.com/ErasmusDivan" in between the a-tags.

For This sixth and final step please add your Facebook URL code from facebook.com website and paste it in between the two a- tag area where it says href="paste Facebook link here" already shown in your Webpage template (index.html).

Step6 of Lesson2 See the example image above to add your Facebook URL in the a-tag.

Ensure You Complete all the above steps and watch the informative Tutorial Video Above:

Congratulations you have completed the Second Lesson of designing your Webpage.


1) However go through the steps again and do all that is required as per the above steps before moving on to the Third and final lesson to show you how to add this completed webpage on to the internet in the final Lesson Number3

Feel free to Share or post your questions and comments below.

Go To the Final Lesson #3: "Finally we can plant your Webpage on to the Internet and watch it grow"


Divan and his dad
Your Online Web Design Tutor.


Join Divan's Web-Tutorials
and get a free Ebook now:



Everyday people are learning new things...why dont you start today!

follow me on twitter,FB & Google+:
Follow me on twitter
add me on Google +
Featured Program

What Lesson are you doing today?
Lesson #1 of 3
What do you need to make your Web-page?.
Lesson #2 of 3
How to make your actual Web-page? .
Lesson #3 of 3
We can transfer your Web-page on to the Web.






2003-2013 by Divan Erasmus. All rights reserved.

Terms of Use | Privacy Policy | Earnings Disclaimer | DMCA | Affiliate & Material Connection Statement