Creating Your Own Web Page is Easy - A Tutorial (Part 1)
Yes, it is easy to create a web page though you are not an IT professional or a person who is involved in IT things. A basic web page is made up of simple HTML tags or codes and HTML is easy to learn. After going through this tutorial, you will learn how to create your own web pages for your website. This includes the following topics divided into three (3) parts: Part 1: Outline of a web page Creating a web page template Placing invisible comments to your code Creating a single or double spaces Creating an ordered list and unordered list Inserting an image Part 2: Creating tables Using CSS boxes as webpage layout Part 3: Linking other pages and other websites Using CSS in styling your web pages Let's discuss here the Part 1: Outline of a web page Creating a web page template Placing invisible comments to your code Creating a single or double spaces Inserting an image Outline of a basic web page If you are new to html, I am now telling you that a web page is simply created with html tags. Html tags are shown as <tagname> and </tagname>. Look at the outline of a web page below: <html> <head> <title> Here you will place the title of the page.
The texts here are displayed at the topmost left of a browser or web page. </title> <style type="text/css"> This is the place for Cascading Style Sheets or known as CSS. CSS defines the styles you will use in your web page such as font color and size of the text, background image, boxes, etc. These are effected in the body but most of the style definitions affects only those areas where you use them. </style> </head> <body> Here you will implement the layout using style definitions you have made in the "style" section.
Without putting anything here the page will be blank except for the title that will appear at the topmost left of the page. You will also place here the content of your website. It may be mixed of texts, images, audios and videos. </body> </html> The above must be saved as a html page with extension of html or htm. If you want to see how the above will look like on as a web page, copy the above from <html> to </html> and paste to your Notepad or equivalent. Then click File - Save as - type mywebpage.html or mywebpage.htm in File Name - Select All files as file type - Click Save. Then go to windows explorer or file manager and open the file with your browser. See? It is as simple as that.
Now, don't close your Notepad and your browser. We will use that in our practice. As an important note, your homepage or the starting page of your website must be named as index.html or index.htm. This will be first page when your website is called without specifying a particular page. Like this site, if you type www.freetipsandwits.com or freetipsandwits.com at browser address, it will open the index file.
If you like to see it, try clicking the link to my site. You may wonder why the index file is "index.php". Well, this site is php-based but do not bother yourself with this php thing. Familiarize yourself first with html and later you may learn php, asp, jsp, cgi & more. In html, you must save your index file as "index.html" or "index.htm". Pages other than homepage must be saved with descriptive keywords using hyphen as separator. This is for search engine optimization.
Creating a basic web page template First, I would like you to make a simple web page template. We will use this for practicing the html codes that we are going to learn later. So, in above mywebpage.html, delete all codes you typed earlier and type the following: <html> <head> <title>My Web Page</title> <style type="text/css"> </style> </head> <body> </body> </html> Leave some spaces between style and body tags. Now, click Save icon or click File - Save. If you accidentally close this file, you can open it by searching the file, right-click it, click Edit or Open with Notepad or its equivalent. To see what it looks like on the web, just refresh the browser use when you opened the html outline a while ago. Placing an invisible comments to your codes I would like you to know how to place your comments on your html codes. Web developers normally put comments in some of the codes for future reference particularly for editing.
Military Art Articles
Military Art Books