Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views : Ad Clicks :Ad Views :
    The Tech Art

    The Tech Art – Download App for PC, Gaming News, Mobiles, Reviews, How to Guides, Technology News, Downloads, Tips & Tricks

    Home / How To Stuffs / Creating Your Own Web Page – A Tutorial Part 1

    Creating Your Own Web Page – A Tutorial Part 1


    Creating Your Own Web Page is

    Easy – A Tutorial Part 1

     

    Creating your own web page is easy? Yes, it is easy to create a web page even 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. It is the core language for the web and it is simplest code langue 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 space
    Creating an ordered list and unordered list
    Inserting an image

    Part 2:
    Creating tables
    Using CSS boxes as web page 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 space
    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 end with a </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, in the browser window tab.

    web-page-title-browser

    </title>
    <style type=”text/css”>

    Style is the place for Cascading Style Sheets, more commonly 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 affected in the body but most of the style definitions affects only those areas where you use them.

    css-code-example

    </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, on the tab. You will also place here the content of your website. It may be mixed of texts, images, audios and videos. You would also add any JavaScript here, but after every thing else, we’ll go into JavaScript later on. For now we are just building a simple page, which does not need it.

    </body>
    </html>

    The above must be saved as a html page with extension of html. 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. Note++ is a good starting IDE ( Integrated Development Environment) to use and so is Microsoft Visual Studio Code . Both are free to use and download.

    Then click File – Save as – type mywebpage.html in File Name – Select All files as file type – Click Save. Next you will go to windows explorer or file manager and open the file with your browser. You can right click and use the ‘Open With’ option if needed. What do you think? It is as simple as that. Now, don’t close your Notepad and your browser. We will use that in our next steps.

    As an important point to note, is that your homepage or the starting page of your website must be named as index.html. This will be first page when your website is called without specifying a particular page. Like this site, if you type www.thetechart.com or thetechart.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”. 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 you use when you opened the html page the first time.

     

    Placing an invisible comment 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. It will be easy for you to find what you’re looking for when you are updating or editing your html codes. This will help also other webmasters if you let them edit your codes. These comments are displayed only in raw html codes or in your html editor but not on the web page or browser page. This is because they are ignored by the browser. To do this you need to type the below:

    <!– type your comment here –>

    For example:

    <!– website building tutorial starts here –>
    Building your website is easy. Just learn basic html codes and you’re done. Don’t be afraid of html codes, they are easy to learn. When you start learning html, you will ask for more and more….and so and so forth…. until you become an expert web developer.
    <!– website building tutorial ends here –>

    Type the above in your mywebpage.html between body tags. You will learn faster if you retype or remake the above. But if you are in a hurry, you may copy and paste it. Now, save it by clicking the Save icon or File – Save from the menu.

    Now, refresh your browser for the above html file. See? Yes, you can’t see your comments between <!– and –>. So, for your reference and easier editing of your codes in the future, don’t forget to place your comments.

     

    Making a line to break or creating a

    blank line space

     

    If you want to break a line or create a blank line space, use this break tag <br /> . See how it is used below:

    This will break affiliate<br />marketing from word “affiliate”.
    This one will break this web<br />site from letter “web”.
    This one will result in a double line space search engine<br /><br /> optimization from the word “engine”.

    When you type this within the body tags, <body></body> , of your mywebpage.html, save it and refresh your browser. You can now see the effect, the sentence is broken, and second row started with “marketing” the word before the break tag. The word was also divided into two with the next row started with “site”, broken from word “website”. The two consecutive break tags created a double space between “engine” and “optimization”.

    computer screens running program

    Making an ‘ordered’ list and ‘unordered’ list

    This is useful when you are enumerating or listing something. See the illustration below:

    Ordered list

    <ol>This is Ordered List
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ol>

    Now type the above in your mywebpage.html within the body tags, save it and refresh your browser and see the results. See? It’s sequentially numbered. Now, here is the unordered list:

    Unordered list

    <ul>This is Unordered List
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    </ul>

    Now type the above in your mywebpage.html within the body tags, save it and refresh your browser and see the results. Now, it’s not numbered this time. It’s in a bullet format.

     

    Inserting an image

     

    You may place an image to your web page by inserting these codes where you like the images to appear in your web page:

    <img src=”http://your-domain-name.com/image-directory/image-file.jpg” alt=”image description” height=”???” width=”???” border=”???” />

    Looking at the above html codes:

    “img” is the image html tag,

    “src” is the source or the path of the image file with extension of gif, jpg and png,

    “alt” is the alternative text description in case the browser could not display an image, also screen readers will be able to see this.

    “height” and width are the dimension of the image,

    “border” is the outline of the image.

     

    Now Do these:

    Replace the above domain name, image directory and the file name with yours.

    Replace the values of “alt” with your own description. This is required for SEO or search engine optimization;

    Replace the values of “height” and “width” with your preferred dimensions of your image in pixel (px ) without distorting it. The size of the image will adjust based on the dimensions you specified. Fixing the height and width of the image will make it load faster;

    Replace the value of the “border” with the border thickness you preferred. 0 is no border, so maybe use 5 so that you can see it more clearly.

    To try the above, get an image from your file and copy it to the directory where your mywebpage.html is located. Now, type the above codes in your mywebpage.html but replace the src=”http://your-domain-name.com/image-directory/image-file.jpg” with src=”image-filename”. Then, save it and refresh your browser to see what it looks like in the web browser.

    Well done, you have taken your first big step in the world of web development. Read our article on web development to get some ideas about what it is, follow this link for it – what is web development? Part 2 in this tutorial will be added soon.


    • Facebook
    • Twitter
    • Google+
    • Linkedin
    • Pinterest

    Leave a Comment

    Your email address will not be published. Required fields are marked *

    This site uses Akismet to reduce spam. Learn how your comment data is processed.

    This div height required for enabling the sticky sidebar
    %d bloggers like this: