(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.
This Is the Fundamentals of ”how to Design Your Webpage”:
-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.|
To Clarify your action in this First step: you need to Download the template open it with Zip program and save it:
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.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.
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.See the image above as an example of image code in the img-tag.
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
See the example image above to show you where to add your Text Area within in the P-tag.
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 .
See the image example above on where to add your YouTube video in the Div-tag.
|*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).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:
Feel free to Share or post your questions and comments below.
|Your Online Web Design Tutor.|
|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.|