Receive More Updates



Sunday, 21 October 2018

How to start in HTML and web design. By Md

Posted by MD

HyperText Markup Language (HTML) is the primary building block of creating awebsite. HTML is a very basic markup language and requires memorization of a few dozen HTML commands that structure the look and layout of a web page. Before writing any HTML code or designing your first web page, you must decide on anHTML editor or text editor, such asNotepad or WordPad.
Once you have obtained an HTML editor and are ready to begin setting up your website, think about how you want the site to look and be set up. Consider even drawing out your ideas, to help visualize the site and pages on the site. Below are some considerations to think about when designing your web page.
  1. How are you going to store all the files? Are all the files going to be in the same folder or directory? If you plan on having lots of different pictures and files, it's recommended that you store the pages, files, and pictures in separate directories.
  2. Are the HTML files going to be stored as .HTM or .HTML files? There is no advantage or disadvantage of going with .htm or .html. However, it is a good idea to stick with the same extension.
  3. Do you plan on having a template for the pages? Are all the pages going to have the same overall look and feel?
  4. How is the navigation going to be handled? Do you feel its better for the navigation menu to be on the left, bottom, or top of each page?
Tip: Realize that your web page is going to change over time as you find things that do not work. Over the lifetime of the Computer Hope website, we have changed our complete site several dozen times.

Writing basic HTML

After installing an HTML editor and setting up a folder, you are ready to begin creating your page. Begin by creating a file named index.htm or index.html as your start page. All servers on the Internet look for an index file if no file is specified. For example, when typing, the server is accessing the
Once you have created the index.htm or index.html file and it is open in your HTML editor, we recommend inserting the belowsource code into your page. If your HTML editor automatically places HTML code into your page or you have a WYSIWYG editor, you can skip this step.
<title>My first web page</title>
Your web page content goes here
The above code is a very basic example of the code that helps make up every web page. As you can see, the code starts with <html>, which is defining that everything within <html> is HTML code. Next, you have <head>, which is defining the heading of your HTML document. Third, we have the <title> section within <head>, which defines the web page title that is displayed at the top of the Internet browser window. Finally, the <body> section contains what is shown on the web page.
Below is additional code that can be placed in the <body> section of the code to help familiarize you with some of the most commonly used HTML commands.
<center><h1>Welcome to my web page</h1></center>
<p>Hello and welcome to my first website.<br><br>
<b>These are my favorite links:</b><br>
<li><a href="">Computer Hope</a></li>
<li><a href="">Google</a></li>
As you can see from looking at the above code, you will realize that the basic HTML commands are fairly simple to use. First, we start off with <center>, which is telling the browser to center the information in these tags. Next, the <h1> or heading one statement tells the browser to display the text in the largest heading style. Next, the <hr> tag tells the browser to display a line straight across the screen. The third line contains <br> that creates a line break on the page. Next, the <p> is short for "paragraph" and helps separate the text on the page. Next, the <b> tag is short for bold and will bold the text contained in the tag. Next, the <ul> starts a bullet list and each bullet is represented by the <li> tag. Finally, the "<a href" tag is a method of creating a link to another location. In this example, we are creating a bulleted list of links to Computer Hope and Google.

Viewing the website

Now that you have created a basic website, you may want to verify how the website looks. Being that you have files locally stored on your computer, you will not need to connect to the Internet to view your web page.
Open the computer browser and type the location of your web page. For example, if you have placed the index.htm or index.html file within a "website" folder, you would type in the browser c:\website\index.htm or c:\website\index.html on a Windows PC. If you have Microsoft Windows or Apple, you can also double-click the web page file to open the page in a browser.
Tip: Some HTML editors also allow you to preview the page by clicking the preview button in the HTML editor.
Viewing a web page locally allows you to experiment and make sure the page works before taking the time to upload the page to the server. Viewing a page this way is also useful if you do not have a place to store your web page.

Displaying images

Now that you have created a basic website, you can improve the look and feel of the website by adding images. There are two methods of displaying images on your web page. The first method is linking to another website to display the images by using the below code.
<img src="" alt="logo">
Using the above HTML tag, you can display images located on other websites, which is also called a hotlink. However, we advise against using this type of link, as it can cause your web page to load slower and could cause missing images to occur if the other site removes the images. The alternate and recommended method would be to use the below code.
<img src="mypic.gif" alt="My picture">
Or if you have an "images" folder:
<img src="images/mypic.gif" alt="My images picture">
If the mypic.gif file exists on the computer, the picture is shown on your website. Adding pictures is an excellent way to spruce up the website. However, do not get carried away by adding several images (especially animated images), as it can look tacky and increase the amount of time it takes to load the web page. Remember, the average time someone looks at a website is 10 seconds, so you want your web pages to load as quickly as possible.
Finally, never place large sized images on your homepage. Large images will slow down the loading of the web page dramatically and may cause a visitor to leave. If you would like a large picture on your website, it is recommended that you create a smaller version of that image, called a thumbnail. If the user is interested in viewing the full-size image, they can click on the thumbnail to view the larger image.

Understanding directories

When creating other directories (folders) on the computer that contain images or HTML files, it is important that you understand the directory structure. Many times, users mistakenly create a bad link that allows the page to work offline but not on the Internet or from another computer.
When accessing files in other directories that are ahead of the current directory, first specify the directory and then the file name. For example, if you are trying to access or display the image file mypic.gif in the image folder, create the link as shown below.
Notice in the above line that the directory is first specified and then the file.
Next, if you wanted to access the image file mypic.gif that is back one directory, you would want to use the example below.
In this example, notice the two dots (..) these tell the browser that you want to go back one directory. If you wanted to go back one directory and then into another directory, you would first do ../ and then the directory as shown in the example below.
This rule can be applied to as many directories back as possible. For example, if you wanted to go back three directories and then go into the images directory, then you would use the example below.
A common mistake with PC (Windows) users is that the HTML editor may specify the file to be located in the computer hard drive such as c:\mywebpage\image\mypic.gif. A local path works fine on the computer hard drive (locally); however, when posted on the Internet, no one but the person with the file locally will be able to display the file.
Finally, remember when specifying the directory that you are using a forward slash (/) and not a backslash.

Case sensitive

It is important to remember that many of theInternet servers are utilizing Linux or a *nix variant. With Linux and Unix, file names arecase sensitive. If you link to the file "Mypage.htm," and the file on the server is "mypage.htm," the server will not cannot find the file because of the capital "M." We always recommend creating all web pages, images, and files in all lowercase.

Posting the website

Posting the website files to the Internet is one of the most complicated steps of setting up a website for most people. For the web page to be viewable by other users, the user must post his or her website on a server where it can be viewed by individuals on the Internet.
Because of the wide diversity of methods of posting a website, we will explain one of the most commonly used methods of posting your website.
Internet Service Providers and web hostingcompanies provide FTP (File Transfer Protocol) access that allows the users to copyfiles from your computer to the server. PCusers have two possibilities; one is to use the FTP program included with Windows, and the other recommended solution is to downloadan FTP program. Using one of these tools should enable the user to send his or her files, providing the server allows FTP access.
Once connected to the server locate the folder or directory that contains your web page. Usually, this folder is public_html. If you are using Windows FTP, type cd public_html or type dir to see what the folder is named. Or open the folder through CuteFTP or the FTP client program you're opening. Once in this folder, you can send your HTML files to the server to access them over the Internet. Windows FTP users to send your files, for example, type send index.htm.
We understand this can be a complicated process. However, your web host should have steps for posting your website and sometimes may even use a web-based client to transfer files to their server. If following the above recommendations you are unable to post your website, we recommend that you review through your Internet Service Provider or web hosting company documentation.

Subscribe for free