Basics of XHTML
What is HTML
What does HTML even stand for anyhow? HTML stands for Hyper Text Markup Language. HTML is not a web programming language like PHP or ASP, it is a markup language. HTML uses elements to create web pages.
- HTML Tags are keywords surrounded in angled brackets like: <tag>
- HTML tags almost always come in pairs, for example: <opening tag> and <closingtag>
- The first tag is called the start tag and the second tag is called the ending tag. Though, alternative forms of these titles exist, they can commonly be referred to as starting and closing tags, beginning and ending tags, or opening and closing tags.
What use is HTML?
HTML is the language that web browsers, such as Mozilla Firefox, Google Chrome, Apple's Safari, and Microsoft's Internet Explorer, read and interpret to display a web page. Every time you visit a web page, a web server is sending your web browser HTML code. Your web browser then turns the raw HTML into paragraphs, headings, images, and other nifty things that we can do on web sites!
How Do We Code HTML?
Writing HTML is easy and can be done using the standard default text editor such as notepad, textedit, or even wordpad. In theory, one can use Microsoft Word to write your html, just be sure to save your initial document as a .txt file since .doc, .rtf, etc have additional formatting that is not needed for HTML.
If you are using Textedit or Notepad, you need to be sure that you can modify file extensions from .txt to either .html or .htm, they are two of the same.
Note: The file extension .htm is loitering around from the days when you could only have a three-character file extension; there is no difference between .htm and .html.
Generally, you'll have something like the following:
<start tag>Text</closing tag>
This is the very basic syntax of HTML. There are, however, more sophisticated ways of integrating HTML, CSS, and Server-Side Programming Languages that we will discuss in later article series.
Declaring the DOCTYPE is not absolutely necessary but it's a W3C standard as really should be used. This is how each HTML document should begin since this states which version of HTML we are using, how the page is encoded, and other important meta data. Below is an outline of XHTML 1.0 Transitional blank HTML document. We also want to declare the DOCTYPE for our Internet Explorer users since IE can produce buddy and unpredictable results if no DOCTYPE is declared.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Untitled Document</title> <!--where metadata, scripts, and other code goes--> </head> <body> <!--where all HTML goes--> </body> </html>
Since the W3C calls this as a standard, it is important that all HTML documents have a similar setup. We need not concern ourselves with the different types of HTML or the functionality of metadata yet.
Common HTML Elements
Here are some very common HTML elements that we will use when creating a web page.
This element will define a paragraph within a web page.
<p>This is a Paragraph</p> <p>This is another Paragraph</p>
<h1>This is a giant heading</h1> <h2>This is a big heading</h2> <h3>This is a medium heading</h3> <h4>This is a small heading</h4> <h5>This is a smaller heading</h5> <h6>This is the smallest heading</h6>
Try creating a blank HTML document and testing these headings yourself and see how they are different!
Links, or anchors, are an essential part of a web experience. Links can take us to other pages within the website and to other websites that have the information we want. Creating links, or anchors, is a very easy and is critical to any website.
<a href="link address">click here</a> <!--This is a link--> <a href="http://www.atomicpages.net">AtomicPages Hosting!</a>
Using the same code as above, this will allow us to link to other pages, whether within or outside of our web page. When creating links, the url of the website must include http://www.websiteaddress.com. This specifies the protocol to use when opening a link and specifies the world wide web for the website address. Try creating a blank HTML document and creating various links to web pages.
An Image is a digital graphic file such as a .gif, .jpg, .png, .bmp, etc. For web purposes, we only need to be concerned with .jpg, .png, and .gif since they are compressed. Images create a pleasing (or displeasing) experience for users on a web site. Sometimes images can be used to create navigation menus, background patterns, or even contain information for visitors to see. To put an image on a web page, we can use the following HTML:
<img src="image url" /> <!--This is an Image--> <img src="images/picture.jpg" />
Note: the links used above are called relative links and will be covered in later articles.
There is something different about this element, however. This is known as an empty element and is used with only certain tags such as image tags, link tags (<link />), and meta tags. These elements do not have a closing tag, they are self-closing tags.
Applying this information image tags we can embed an image such as... into our web page with ease!
These are the absolute basics of HTML that will help you on your way to creating a web page of your own one day!