In the previous part of our guide, we talked about absolutely critical first steps needed to create your first webpage. Now we will discuss adding a little meat to our webpage. These steps may not add much visually, but they are important in creating an effective webpage. Let’s begin.
Doctype’s
The first thing you’ll want to consider is the kind of standard your webpage will adhere to. Believe it or not, there are governing bodies that help shape the code that we utilize on our websites and manage what standard code that is used. One such governing body is W3C. It can be helpful to declare what standard we are following as some web browsers use such information to determine how to render a webpage.
While there are a number of different standards available, there are only two that are most likely to be used by those learning HTML. That is the Transitional Doctype and the Strict Doctype. The Transitional Doctype is more flexible than the Strict Doctype in that it allows more kinds of code including some that are no longer in use today (also known as deprecated). It is also considered more human friendly. Strict, on the other hand, asks you to do some markup in a Cascading Style Sheet (CSS) and doesn’t allow deprecated tags. Since this kind of code is one of the few examples where it is better just to copy and paste the blocks into your HTML file, here’s the code for each:
Strict
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>
Transitional
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
Since we are learning basic HTML, it’s probably best to stick with the Transitional declaration.
To insert this into the code, just copy and paste this into the top of the HTML code (even above the <html>). If we are using the Transitional code like I recommend, just copy and paste the code under “Transitional” from above into your HTML document. After you do that, congratulations, you’ve declared what kind of code you are using!
Adding a Title
If you are following this guide from the beginning, you’ll know I asked you to insert a “head” tag, but leave it empty. Now, we’ll actually add some information. First, what is the title of your webpage? It’s recommended that it would be close to the domain you plan on getting (domain being something like www.example.com). The title can just cut off the “www” and the “.com” part. In older browsers, titles can be displayed across the top of the browser. With the advent of tabbed browsing and a few design changes in a number of modern browsers, the title will only display in a small square wherever the tab is. Title’s can also be useful for many things including its appearance in Bookmarks and search engines. If you want to go in-depth of what all a title can do, you can check this posting out. We’ll just keep this simple though and say that a nice and short title is a good idea.
In your HTML document we got you to start, let’s show you how to add in a title (with my “transitional” doctype I already threw in for good measure):
Notice the inclusion of the title tags. Start an opening title tag, then add the title you want to use, then end that line with a closing title tag. I don’t recommend the title I added. It’s highly advisable you use the name of your website instead and maybe include a word or three describing your website. Just keep it under 70 characters (characters are each letter, space, number, etc. you can type in) and you should be fine.
Keywords
The next thing we want to add in is keywords. Keywords are generic words used to describe your website. So, for instance, if your website is about flowers, some example keywords might be “flowers”, “gardening” and “plants”. If your website is about cars, then some keywords might be “cars”, “trucks” and “automotive”. The keywords are then used to tell search engines what the site is about generally speaking. Useful in helping to generate traffic to your website. So, when someone types in a word into a search engine such as “bugs” and bugs is one of your keywords, then there is a greater chance that user will find your website than if you didn’t have that as a keyword at all.
So, let’s insert some keywords into our website:
I’ve only added an additional line of code here. Some HTML tags need just the open angle bracket, a word, and a closing angle bracket to open and a repeat with the slash in the closing tag. In this case, we don’t need a closing tag as it’s just metadata (data about data). Also, you can add a space after the “meta” and add in more attributes in some cases. Don’t worry, I’ll let you know when you need to worry about that. So, after “meta”, I added in “name=”. This lets search engines that we are inserting a kind of metadata. Since it is keywords, we added in “keywords” (yes, with quotes). After that, we put in “content=” to denote what kind of keywords we want to insert. After that, we put in a quotation mark and added the keyword “technology” as this website is about technology. Then, we added in a comma to say that there is another keyword we want to use (no, we don’t add in a space). Then, we added in more keywords in a similar manner and then ended the line with keywords with a quotation mark. We then closed off the tag with an angle bracket to say that that is the end of the tag.
If we save our HTML document and open it up in a web browser, you should notice that your title appears, but nothing much else has changed. While you may not see much difference, search engines looking at your website will see a major difference from before. There is a lot of other things you can add into your head tags, but this will probably be sufficient for now as we are only just starting to learn HTML.
In the next part of our tutorial, we’ll get into more flashy stuff. The kind of stuff that you can easily see as you add it in!
Part 1 (The Essential First Steps) | HTML Guide List | Part 3 (Headers and Basic Text Formatting)
I am sure this piece of writing has touched all the internet people, its really really nice post on building up new website.