1. What is HTML?
Web pages are files that are viewed using a browser. They are written in a language called HTML. HTML is made up of a set of elements, or tags, that are used as instructions to tell the browser what should appear on a web page, and how it should be structured.
An HTML element looks something like this:
Anyone can view a webpage's HTML by viewing the source of that webpage. If you right click on this page, for example, and select "View Page Source", you can see the HTML that the browser is reading in order to display the page that you see.
Although HTML is a single language maintained by a single organization, there are many different browsers available, created and maintained by many different organizations. Firefox, Internet Explorer, Opera, Safari & Google Chrome are all commonly used browsers. Each browser may render HTML code a little differently, so it is always best to view your HTML files in multiple browsers to check their appearance in each one.
CSS is commonly used alongside HTML to improve the visual aspects of a webpage.
HTML stands for HyperText Markup Language.
2. How to Create An HTML File
HTML files must be identified as HTML files by the file extension with which they are named. There are two file extensions available for HTML files. The most commonly used and recommended extension is ".html", however ".htm" is also an option created back in the early days when some file systems limited file extensions to three letters.
I would not recommend the use of word processors (ie. Microsoft Word, StarOffice Writer, or Abiword) to save or create HTML files. Text editors such as Notepad or Wordpad on Windows machines, and Kwrite or Kate on Linux machines, are a better option. When saving the file, make sure that you type in the file name and the extension (example: index.html) and that if there is a "Save as Type" dropdown option on the Save menu, that the type is set to "All Files".
(See Example)
Websites have a default landing page called "index.html" or "index.htm'" that is used when no other specific page is requested. This page should always be your website's home page. If you type "http://www.yourwebsitename.com/" into your browser's address bar, for example, you will be sent "http://www.yourwebsitename.com/index.html" by default.
HTML files can be saved on your own computer and viewed from your browser, however unless they are hosted on a web server they will not be available to anyone else. If your HTML file is uploaded to a web server you can access it from the URL (example: http://www.yourwebsitename.com/index.html). If your HTML file is on your own computer you can open it by double-clicking the file or by going to "File > Open File" in your browser window.
3. HTML Document Structure
Each complete HTML element has an opening tag (example: <html>) and a closing tag (example: </html>).
Text is placed between these two tags, which the browser reads and follows based on the tag's instructions.
The exceptions to this rule are called "empty elements", and do not have a closing tag. The line break tag <br>, for example, does not have a closing tag, but can be closed in the same tag by adding a slash to the end of the tag <br />.
One of the most basic examples of a functional webpage is:
<head>
<title>My Very First Webpage</title>
</head>
<body>
How do you make milk shake?
Give it a good scare!
</body>
</html>
HTML Element
Several complete elements are used to create a basic webpage, however the most important set of tags are <html> and </html> because these tags tell the browser that everything between them is HTML that should be read and interpreted. All other elements go inside of the <html> and </html> tags.
Head Element
The head tags <head> and </head> are important because everything inside of these tags explain things about the document. For example, the <title> and </title> tags enclose the text that will show up at the very top of your browser window to identify your webpage. We will learn more about the head tags on the next page.
Body Element
The body tags <body> and </body> are essential, as everything between these two tags will show up in your browser as the content of your webpage.
Nesting
It is very important to open and close HTML elements in a specific order, especially when the tags are nested, or placed inside one another. In our example, the body tags are inside of the HTML tags. Since the body tag was the last one opened, it must be the first one closed.
Incorrectly nested tags look like this: <html> <body> </html> </body>
Correctly nested tags look like this: <html> <body> </body> </html>
Whitespace
Whitespace is ignored by the browser, so you can have as many or few empty lines and indentations as you want in your HTML file, and the content will still look the same in your browser.
4. HTML Head Elements
We introduced the head tags <head> and </head> as the tags that enclose elements containing information about the HTML file. The fact that most of the elements in the head tags will function behind-the-scenes does not make them any less important. Most head elements are not seen by the average user, but can be seen by viewing the page source and may also be useful sources of information for search engine spiders that come crawling around the web.
The Title Element
The title element is the only head element that does not function behind-the-scenes. Any text written between <title> and </title> will be displayed at the top of your browser for all to see. This element is an important method of identifying the page and stating its purpose.
<title>My Page Name & Purpose</title>
</head>
Meta Tags
Meta tags are most often used to describe a webpage to browsers and search engines, although they have other uses. The two most commonly used meta tags are "description" and "keywords", although many more are available. Meta tags look like this:
<meta name="description" content="Description Of Your Webpage Goes Here" />
<meta name="keywords" content="comma, separated, keywords, go, here" />
<meta name="copyright" content="Copyright (C) 2014 binitpatel.co.in" />
</head>
Link Tags
Link tags define relationships between the HTML file and an external resource. They are most commonly used to link to external cascading style sheets and favicons. Link tags are used in the following matter:
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" type="text/css" href="/Style.css" />
</head>
Script & Style Tags
Script tags are commonly used to add javascript or internal CSS to an webpage. They are inserted between the head tags in the following manner:
<script type="text/javascript">
document.write("What did the porcupine say to the cactus?")
document.write("He Said: Are you my mother?")
</script>
</head>
Style tags, used for internal CSS, are inserted in the same manner:
<style type="text/css">
p { border: 1px dotted #000000; }
</style>
</head>
5. HTML Doctypes & Validation
The HTML doctype declaration is not a tag; it is more like an instruction to the web browser about what version of HTML the page is written in. Some browsers require a doctype declaration in order to render the webpage correctly.
The doctype declaration is placed at the very beginning of an HTML document, even before the opening <html> tag.
<html>
<head>
<title></title>
</head>
<body>
</body>
</html>
There are several different doctype declarations that can be used, depending on the version of the rules that your webpage follows. Each declaration refers to a Document Type Definition, or DTD.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
I can already hear you asking "But which doctype should I use?!". Good questions. I usually use 5 Transitional because it is the most lenient, however you can research each type to find the one most suited to your requirements on the official doctype website.
Once you have chosen your doctype you can validate your webpage to have all of the HTML errors pointed out to you, usually followed by a self-inflicted smack to the forehead, which can be accompanied by a roll of the eyes and a muttered "How could I have missed that?", all of which are, of course, optional.
6. HTML Comments
Comments are useful in HTML for two main reasons:
1. Writing Notes/Reminders to Yourself Inside of HTML Files
2. Temporarily Hiding Elements/Tags While Testing An HTML File
HTML comments will be ignored by the browser, although they can be viewed in the source code.
Each comment begins with <!-- and ends with -->. Complete HTML elements can be contained within these tags.
<head>
<title>My Very First Webpage</title>
</head>
<body>
<!-- How do you know when there is an elephant under your bed? -->
<!-- When your nose touches the ceiling! -->
<!-- <p>(This will not show up on your webpage.)</p> -->
</body>
</html> >