Introduction
There’re many tools out there you can use to create a webpage, such as iWeb or Dreamweaver. Even you love to use these kind of WYSIWYG webpage editors, you would still take advantage if you understand what’s actually behind those fancy webpages. By the way, I believe those I Love Code readers will prefer coding website by hand, isn’t it?
Understand HTML
HTML, an acronym for HyperText Markup Language. It’s just a plain text document with special markup tags to define different elements, internet browsers will use these tags to render the webpage content (text, images, links, etc.) dynamically. For example, <title> is used to indicate the webpage title.
You may not know, there’re many versions of HTML, like HTML 4.0, XHTML 1.0, HTML 5.0. The version of HTML mentioned along this article is XHTML 1.0, it’s the latest (HTML 5.0 is still a working draft) and the standard of most modern browsers.
Create You First Webpage by Hand
Let’s get start, to create a HTML document, simply open a new file in any Text Editor (like Smultron, CotEditor, TextMate for Mac, NotePad and EditPlus for Windows). First, we should add Doctype at the beginning of the HTML document.
There are three Doctype you can use, I suggest to use the Transitional one:
For more information about Doctype, please read this.
Start with tags
After defining the Doctype, we should add our first and last tags of a HTML document: the <html> and </html> tag. HTML elements usually come with a start tag and a end tag, the content (such as text) should placed between the tags. We can add some basic tags inside the <html>, like this:
<html> is a container of the whole webpage, and it’s separated in two sections, <head> and <body>. <head> is like a recipe, instruct the browser where to find style sheets, provide meta information. <body> is where to place your ingredients, contains everything that will be displayed.
So <title> should be put inside the <head> as it’s like the name of a dish, the proper <title> should look like this:
Now, you can save your document with .html or .htm extension, open it in an internet browser, you will see a blank page with “I Love Code” in your browser’s title bar. Change “I Love Code” to whatever you need, besides appear in the title bar, the Title will be displayed in search-engine results, so, make sure your Title can tell what your webpage is.
Common tags
There are several tags you can place inside <head>, like meta, link and script. I may explain more about them in another post later, we better move on to the <body> now.
Headings and paragraphs
Headings and paragraphs are the most common elements in an article, in HTML, you can use <h1> for heading (there are six levels of heading, from h1 to h6) and <p> for paragraph. Here an example:
Remember these code should place inside the body tags, now save and open the HTML file in the browser, you should get a webpage like this:
Emphasis
To do some text formatting, you can use <strong> for bold and <em> for italic:
Links
Links are important in a webpage, it can be used for navigation between your own domain or point to another website. <a> tags should be used for link, there is little different from the tags mentioned above, text (you can use image too) between the <a> tags is the Caption/Link Text, the URL where you want the link to point should place as href attribute in the start tag <a>, like this:
You can use relative link if you are referring to a webpage located in the same server of your current html document, like these examples:
Images
To add images to webpage, we should use the <img>. Define the image location (where it placed on the server/internet) is similar to define a URL in <a> tags, but we should use the src attribute this time:
You will find there’s no end tag like </img>, because <img> is a self-closing tag, remember to close it at the end with a slash: /> . So what’s that alt attribute? It’s used to define a short description, and it will appear when the image is disabled by the browser (text-only browser or when the image is not loaded). You must include this attribute in every image, as it’s required for a valid XHTML document.
Also there are height and width attribute for <img> tag, used to help browser constructing the layout before the image is already loaded, or you can use it to force the browser to display an image in the width and height you specified (recommend to use CSS in this case).
For the image formats, only png, jpeg and gif are supported in almost all browsers. Please consider about the loading time when you using images in your webpage, better keep the image size (file size) as little as possible.
All Together
To make a simple webpage, we should put all these together, here a sample code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Sample Webpage</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
</head>
<body>
<h1>I Love Code</h1>
<p>
<strong>Lorem ipsum dolor sit amet</strong>
Consectetur adipiscing elit. <em>Maecenas at</em> lorem. Fusce feugiat <a href="http://google.com">Google</a>ultricies mauris. Sed erat. Quisque egestas, magna commodo accumsan ullamcorper
</p>
<img src="http://images.apple.com/iphone/features/images/main_overview20081217.jpg" alt="Sample Image"/>
<p>Cras gravida congue erat. Sed convallis. Duis eget urna. Suspendisse quis velit. Donec in purus. Mauris quam nisi, suscipit vitae, commodo eget, pharetra ut, arcu.</p>
</body>
</html>
You may find I added a xmlns and xml:lang attribute in the <html> tag, It’s required for valid XHTML document too, you can ignore xmlns, and just changing the xml:lang attribute if your webpage’s content is not in english, for the full list of language code, you can refer to this article.
A <meta> tag is added to tell the browser about the charset (Text Encoding) of the XHTML document I am using, it is better defining it to prevent wrong encoding rendering. And UTF-8 is recommended.
Final Test
When you finished a webpage, it’s a good behavior to check and see if your code is successfully performed a formal validation under standard XHTML, you can do it by using The W3C Markup Validation Service.
Hope you have an idea about how to create a webpage now.
Related posts:
- HTML Document Object Model This tutorial will be based on Document Object Model (DOM),...
11 Responses
Yum yum, thank you na!
This helps me out a lot. Thanks.
Great tutorial, thanks!
Nice tutorial, Na.
Nice work Na!
Thanks,
I have searched for something like this all the time! Good work!
Great tutorial! However, with xHTML 1.0 it is more common to do all image placing using CSS as opposed to the tag. Still this is an HTML article, not a CSS one, so I guess the tag is still something people should know how to do.
Thank you! This is exactly what I needed!
I suggest that you take a look at Panic’s Coda application. It is Mac only but is by far the best application for CSS/HTML/PHP hand coding.
I know this is an old article, but just a couple of quick comments:
@Collin, that’s not exactly a true statement. You should always place images consistent with the purpose they serve in your content. If the images are design elements, then yes, they should typically be placed using CSS. However, if the images are a part of the content itself (ie, an illustration, diagram, or photo that accompanies an article), it should be included using an “img” element. Rule of thumb: if redesigning your website would change the image, it belongs in CSS; otherwise, it probably doesn’t.
@ambitdesigns, I must personally disagree, Coda puts too many tools in one, which is the antithesis of “the Mac way” of doing things (ie, a separate, discrete application that does each task, and does it well). Personally, I’m a fan of TextMate as a terrific text editor.
@Matt i disagree. TextMate is good, but Coda is pretty decent as well. Too many tools in one? LOL.