HTML is the standard markup language for creating Web pages. HTML stands for Hyper Text Markup Language which describes the structure of Web pages using markup.HTML elements are the primary building block of creating a website and the elements are represented by tags such is heading, paragraph, table, and so on. Keep in mind that browsers do not display the HTML tags, but use them to render the content of the page. – Start in HTML ( Web design ) step by step
Before writing any HTML code or designing your first web page, you must decide on an Text editor, such as SublimeText, Atom, Bracket, Coda or many other.
Once you have obtained an text 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 in the site. Below are some considerations to think about when designing your web page.
- Storing 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.
- Index suffix formate: You can save your index file same as index.html or index.htm. However, it is a good idea to save with index.html.
- Navigation? 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 life time of the Codingle website, we have changed our complete site several times.
After installing an Text editor and creating up a folder, create a file named index.html as your start page. All servers on the Internet look for an index file if no file is specified.
Once you have created the index.html file and it is open in your Text editor, add recommended code.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>My First web page</title> </head> <body> Your web page content goes here</body> </html>
The above code is a very basic example of the code that helps make up every web page.
- <html>: Which is defining that everything within <html> is HTML code>
- <head>: Which is defining the heading of your HTML document.
- <meta charset=”UTF-8″>: Defines the formate of the files.
- <title>: Which defines the web page title that is displayed at the top of the browser.
- <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.
<center> <h1>Welcome to my web page</h1> </center> <hr> <br> <p>Hello and welcome to my first website.<br><br> <b>These are my favorite links:</b><br> <ul> <li> <a href="http://www.codingle.com">Codingle</a> </li> <li> <a href="http://www.google.com">Google</a> </li> </ul> </p>
- <center>: which is telling the browser to center the information within these tags.
- <h1> or heading one statement tells the browser to display the text in the largest heading style.
- <hr> tag tells the browser to display a line straight across the screen.
- <br> that creates a line break on the page.
- <p> is short for “paragraph” and helps separate the text on the page.
- <b> tag is short for bold and will bold the text contained within the tag.
- <ul> starts a bullet list and each bullet is represented by the <li> tag.
- “<a href” tag is a method of creating a link to another location.
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. Double-click the index.html on your computer so it opens in a browser automatically.
Tip: Some Text editors also allow you to preview the page by clicking the preview button within the Text editor.
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="http://www.codingle.com/logo.gif" alt="Logo">
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 picture">
Keep in mind using lots of images or animations 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.
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.
<img src="images/mypic.gif" alt="My picture">
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.
<img src="../mypic.gif" alt="My picture">
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.
<img src="../other/mypic.gif" alt="My picture">
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.
<img src="../../../image/mypic.gif" alt="My picture">
Finally, remember when specifying the directory that you are using a forward slash (/) and not a backslash.