Post by marshall on Dec 24, 2014 9:01:56 GMT
Getting Started
HyperText Markup Language (HTML) is the primary building block of creating a website. HTML is a very basic markup language and requires memorization of a few dozen HTML commands that structure the look and layout of each of the web pages. Before writing any HTML code or designing your first web page, you must decide on an HTML editor or text editor such as Notepad, WordPad, and even Microsoft Word. What ever editor you decide on using can change if it isn't working for you.
Once you have obtained an HTML editor and are ready to begin setting up your website, think about how you want the page to setup or look, maybe even draw out your ideas. Below, are some early considerations to think about when designing your web page.
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 its recommended that you store the pages, files, and pictures in separate directories.
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.
Do you plan on having a template for the page? Are all the pages going to have the overall same look and feel?
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 will change over time as you find things that don't work. Over the life time of Computer Hope we've 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, this will be your start page. All servers on the Internet look for an index file if no file is specified. For example, when typing fpe.freeforums.net/thread/new/5, the server is really accessing fpe.freeforums.net/thread/new/5
Once you are in the blank index.htm or index.html file, we recommend inserting the below source code into your page. Some HTML editors may automatically place this code in your page for you. If this is the case, or you have a WYSIWYG HTML editor that allows you to design the page and not create the HTML, you can skip to the next section if you're familiar with what this HTML means.
The above code is a very basic example of the code that helps make up every web page. As you can see, the section starts of 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 titles this page being shown. Finally, the <body> section is what 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 familiarized you with some of the most commonly used HTML commands.
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>; this is telling the browser to center the information within these tags. Next, the <h1> or heading one statement, which tell the browser to display the text in the largest heading. Next, the <hr> tag tells the browser to display a line straight across the screen. The third line contains <br> that creates a break on the page. Next, the <p> is short for "paragraph" and helps separate the text in the page. Next, the <b> tag is short for bold and will bold the text contained with the tag. In the next section 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 created a bulleted link to Computer Hope and Google.
See our HTML and Web design help page for a listing of HTML commands and related content.
HyperText Markup Language (HTML) is the primary building block of creating a website. HTML is a very basic markup language and requires memorization of a few dozen HTML commands that structure the look and layout of each of the web pages. Before writing any HTML code or designing your first web page, you must decide on an HTML editor or text editor such as Notepad, WordPad, and even Microsoft Word. What ever editor you decide on using can change if it isn't working for you.
Once you have obtained an HTML editor and are ready to begin setting up your website, think about how you want the page to setup or look, maybe even draw out your ideas. Below, are some early considerations to think about when designing your web page.
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 its recommended that you store the pages, files, and pictures in separate directories.
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.
Do you plan on having a template for the page? Are all the pages going to have the overall same look and feel?
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 will change over time as you find things that don't work. Over the life time of Computer Hope we've 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, this will be your start page. All servers on the Internet look for an index file if no file is specified. For example, when typing fpe.freeforums.net/thread/new/5, the server is really accessing fpe.freeforums.net/thread/new/5
Once you are in the blank index.htm or index.html file, we recommend inserting the below source code into your page. Some HTML editors may automatically place this code in your page for you. If this is the case, or you have a WYSIWYG HTML editor that allows you to design the page and not create the HTML, you can skip to the next section if you're familiar with what this HTML means.
<html>
<head>
<title>My first web page</title>
</head>
<body>
Your web page content goes here
</body>
</html>
<head>
<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. As you can see, the section starts of 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 titles this page being shown. Finally, the <body> section is what 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 familiarized you with some of the most commonly used HTML commands.
<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.computerhope.com">Computer Hope</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</p>
<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.computerhope.com">Computer Hope</a></li>
<li><a href="http://www.google.com">Google</a></li>
</ul>
</p>
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>; this is telling the browser to center the information within these tags. Next, the <h1> or heading one statement, which tell the browser to display the text in the largest heading. Next, the <hr> tag tells the browser to display a line straight across the screen. The third line contains <br> that creates a break on the page. Next, the <p> is short for "paragraph" and helps separate the text in the page. Next, the <b> tag is short for bold and will bold the text contained with the tag. In the next section 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 created a bulleted link to Computer Hope and Google.
See our HTML and Web design help page for a listing of HTML commands and related content.