Basic HTML Web Design Idea

0
96

Basic HTML Web Design Idea PART 1

Contents:

  • 5 Things remember while designing on your web Page
  • Basic HTML Writing Rules
  • Process of Viewing the Website

To create a website HyperText Markup Language , abbreviated as HTML is the preliminary building block. HTML is also known as basic markup language and it is necessary to memorize a few dozen HTML commands. These commands make up the look and layout of each of the web pages. Before starting to write HTML code, or making the design of any web page for the first time, you have to decide on an HTML editor or text editor such as Notepad, WordPad, and even you can use Microsoft Word.  You can change the editor if it does not work well for you.

5 Things remember while designing on your web Page 

After obtaining an HTML editor while you start to set up your website, think about how you want your web page to look or set up; you may even draw out your ideas.  While designing your web page, you can keep in mind the following tips:

  1. How do you want to store all the files? Do you want to keep all the files in the same folder or directory? If you want to store a wide variety of pictures and files it’s suggested that you store the pages, files, and pictures in different directories.
  2. Although there is no special advantage or disadvantage of going with the same extension, such as – .HTM or .HTML, it is good to stick with the same extension.
  3. Planning on having a template for the page.
  4. Keeping overall look and feel of all the pages almost same
  5. Deciding on where the navigation menu bar will be placed – left, bottom or top of each page

Tip: Your web page may change over time if you find things that do not work.

Basic HTML Writing Rules

After completing installation of an HTML editor and setting up a folder you are prepared to begin creating your web page. Start on by generating a file named index.htm or index.html. This page will be the start page. All servers on the Internet search for an index file if there is no file to specify.

For example, when someone type http://www.hituner.com the server is actually accessing http://www.hituner.com/index.htm (for static html website) or http://www.hituner.com/index.php (for dynamic php website)

Once you are in the unwritten index.htm or index.html file, we recommend you to insert the following source code into your page. This is a fundamental example of code that is helpful to create every web page.

<html>
<head>
<title>My first web page</title>
</head>
<body>
Your web page content goes here
</body>
</html>

The section <html>, defines everything within <html> and it is HTML code.

Next portion <head>, defines heading of your HTML document.

Next portion is <title> within <head> titles this page being shown.

Finally, the portion <body> is the portion that contains what is shown on the web page.

Some HTML editors can mechanically place this code in your page for you. If you have a WYSIWYG HTML editor which permits you to design the web page and not create the HTML, you can easily skip to the next section if you are familiar with what the meaning of this HTML.

There is an additional code below for the convenience of your better understanding –

<center><h1>Welcome to www.hituner.com </h1></center>
<hr>
<br>
<p>Hello Guys! Welcome to my first site.<br><br>
<b>These are my preferred links:</b><br>
<ul>
<li><a href=http://www.hituner.com>hituner</a></li>
<li><a href=”http://www.google.com”>Google</a></li>
</ul>
</p>

Truly is saying, the basic HTML commands are not so difficult to use.

Notice that –

  • We start off with <center> which is given command the browser to center the information within these tags.
  • Next, the <h1> i.e. heading one statement is telling the browser to show the text in the largest heading.
  • Next, tag <hr> tells the browser to show a line straight across the screen.
  • The third line containing <br> creates a break on the page.
  • Then the tag<p> is short for “paragraph” and helps to separate the text in the page.
  • After that, the tag <b> which is the short form of bold, bolds the text contained by the tag.
  • In the next part, the <ul> starts a bullet list and each bullet is represented by the tag <li> tag.
  • Finally, the tag “a href” is a system of creating a link to another location.
  • In the example above, a bulleted link is created to hituner.com and www.Google.com

 

Process of Viewing the Website

Viewing a web page locally, you can do experiments to confirm that the page works before uploading the page to the server. Following the above steps after creating a basic website you may want to verify how your site looks. Being locally stored all the files on your computer, you do not need an Internet connection to view your web page.

To view your web page, please follow the following steps:

  • Open your browser
  • Type the address of your web page. For example, if you place the html file or index.htm within the webpage folder, you have to type c:\webpage\index.html c:\webpage\index.htm respectively ( if you are using an IBM computer)
  • You can also double-click the web page file so it opens in a browser automatically (if you are using Microsoft Windows or Apple)
  • You can also open your web page by clicking the preview button within the HTML editor since some HTML editor allows this.

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here