Free Web Templates Free WordPress Themes

A grand new redesign – MagMania wordpress theme

Updated: added an extra style to have a taste of the lemon, aha~ Give it a try in here!

Thanks to Beccary, or this wordpress theme will never be possible. She is as inspiring as she is pretty!

mybeccary old kavoir design

MagMania is born with simplicity in mind, deprived of all bells and whistles, showing the true meaning of conciseness and striving to be as vigorous as possible. Single column it is, with Georgia as the sole font for typography, I intend to construct a theme that stands on its own feet.

magmania screenshot

However there’s more things to be done than can ever be said. I was planning to give the theme some more refinements before releasing it to public, yeah, I mean, only weird people like me love it in the current presence, don’t they. -D Moreover, the upcoming 2 weeks is doomed with toil for me cause’ it’s when the professors strain and grade us to decide which are good students and which are not. Though I have made some solid efforts this semester to get as far away from computer games as possible, I am still not in good shape in terms of exams. Ewwwww…..just so exhanstive you know, maybe I’ll never be in good shape.. 🙁 God why you made me go to college?

Forget the bullshit. Now I have prepared the page for you to download the theme, MagMania wordpress theme! Remember this is a work in progress, any suggestion would be appreciated.

Content / SEO Tips & Tutorials Google Hacks, Cheats & Tips

Link building and content development, who is the King?

Just roaming about some forums to feed myself with daily new information when I came across something worth taking a look.

Above is an interesting discussion of whether linking rules over content or the other way around. I’d say it was indeed not something I, as an SEO novice, had expected. John Scott, and quite some other participants agreed that content, despite the fact Google cried all these years about it, isn’t the King after all. All you had to do is to gain the trust of Google, which mostly, is through link building. The best content aren’t always coming in top SERPs, but those with quality backlinks.

In their defense, John Scott emphasizes Google sees and only sees links as a means of credibility and trust. Google knows quality content only by the number and type of links a page gets, so content should come second after link building. Many’s a time when a site with ordinarily mediocre content appears on the 1st SERP from Google is achieved by quality experienced link building. It also means a savvy website owner can get quicker and higher results than newcomers who build much better content.

Anchor text of links is so important that it is even considered by search engines much more important than what the linked content is originally about when it comes to ranking.

From a beginner’s perspective, combining some basic reasoning, I think content should not come second to link building. Algorithms change, and Google strives to get better results for its audiences, rather than some publishers. Because it’s ultimately the great mass audience that’s in Google’s interest simply in that they are those who view and click on Google’s ads, which still makes a great majority of its revenues. It’s just as simple as that. Google is currently basing the weight of a site too much on backlinks , but what in 2 years? You might get well ranked through some tricky link building strategies now, but it’s the content that guarantees you of the future. Though it does work well present, so your content is indexed fully and ranked decently to get more links. They are just powering each other in a sense. Either way can get you success.

Content the King, link building the Queen.

To sum up, WebGeek182 (blog)put it quite well in the discussion:

  1. Links rule for SEO. – The site with the strongest relevant link profile wins.
  2. Content rules for conversions and sales, and it breaks ties when two sites have a similarly strong link profile. – You can have all the traffic in the world, but who will buy from a site that is poorly organized, confusing, or full of crap content? To get maximum conversions and sales, your site must be compelling and easy to use. So, once you get people to your site, make sure there is something to keep them there. Also, when two sites have similarly strong link profiles, Search Engines use what I call their “Plan B” rating – they will evaluate the content, and see which is more relevant to break the tie. This doesn’t even come into play though if one site has far more (and relevant) backlinks.
  3. Bad content will make it harder to get links, and conversely, good content *can* make it easier to get links. – Who wants to link to a crappy site? On the other hand, if a site has some awesome content, design, tools, or something else that people can’t help but link to, you’ll get more links. (But only if they can find your site in the first place.)
Content / SEO Tips & Tutorials Google Hacks, Cheats & Tips

What is wrong with ‘Supplemental result’?

Many a new website such as this one, who has just made its way into Google’s database and got indexed a dozen of pages, might have quite a number of pages ‘indexed’ as ‘Supplemental result’. Use “” as the phrase in Google search, then jump to SERPs buried behind. Do you got any of these?

What is supplemental result?

If the answer is yes, don’t panic. Let’s first take a look at what it is. Supplemental result is how Google expands its crawling of the web, imbibing more pages to present more results to end users than its primary ‘main index’. So you get the idea, that ‘supplemental results’ comes from ‘supplemental index’, which places lower restraints on what to be indexed.

google supplemental result

With a popular search phrase, Google simply serves results from its main index, because there’re plenty of related results in it. Nevertheless when it’s a very specific unusual topic, Google has to turn to the ‘supplemental index’ so as to get enough stuff to show off its gigantic coverage. 🙂 For example, URLs with more than 2 dynamic parameters are very probably indexed in the ‘supplemental index’, given a very low PageRank; Content-barren pages might also end up indexed in the supplemental index, unless it dwells in some very famous website.

Is it evil? I want to get rid of them!

In addition, Google assures you that the index in which a site appears doesn’t affect your PageRank. While supplemental result looks no harm (in fact not only small and fresh websites have them, many big ones got many too), that too many supplemental results for your website is absolutely unfavorable. A keywords query answered from ‘main index’ will never have the chance to see those lousy pages in ‘supplemental result’. Although it is sometimes inevitable, you can also choose to do something about it. In order to make Google index most of your pages in its ‘main index’, bear in mind some principles:

  1. Never use dynamic URL for your content. Also prevent different URLs referring to the same page.
  2. Use unique title/description/h1/h2/h3/… on every page.
  3. Renew your content pages from time to time: make some corrections, see if there’s a typo, add a small paragraph, and so forth. For newly indexed pages, Google comes very picky on its frequency of update. Unless you got quality backlinks to them, update them once in a while.
  4. Get quality backlinks. Yes, quality ones. Don’t even bother with low-quality ones. PageRank is what ultimately determines which index includes the page. Work on it and you’ll be fine.
  5. Erase out similar pages. Google hates this, so if you have any pages with mostly the same or even identical content, delete and leave only unique ones. If it is necessary to keep identical content across pages, ask Matt Cutts if he can help you, or you can simply employ <meta name=”robots” content=”noindex,follow” /> with your duplicate content. Or, you didn’t try to copy stuff from others and put on your own? Then hell to you, you are damned without a doubt.
    Making a 301 redirect from to and /index.html to ./ definitely helps.
    With wordpress as your CMS, you may want to check out uberdose’s All in One SEO Pack that automatically marks category and archive pages as ‘noindex’ so Google won’t have duplicate content of yours in index to be mad at you.
  6. One convincing page is better than one hundred small lousy pages. Take time to build unique quality content rather than stuff teeny pages to SEs.

Additional talks and tools you might find useful

  1. Supplemental Result in Google – Hell or Help
  2. View All Your Google Supplemental Index Results
  3. Infrastructure status, January 2007
  4. What’s a “supplemental result?” – Google Webmaster Central
  5. Copyscape – duplicate content search engine, see if you have multi-version pages in index. Plagiarism is afraid of Copyscape.

HTML5 adopted by W3C

News for the web development community: The new W3C HTML Working Group has voted to adopt the HTML5 draft specification comprising the Web Apps 1.0 and Web Forms 2.0 specifications developed and copyrighted as far by major browser companies Mozilla Foundation, Apple Inc., and Opera Software ASA under the umbrella of WHAT-WG, or Web Hypertext Application Technology Working Group, which includes Google, the Mozilla Foundation, Opera Software, Apple Inc. as its key contributing groups.

Some official infomation:

To summarise, the W3C will:

  • Adopt the WHAT-WG “HTML 5” (Web Applications 1.0 and Web Forms 2.0) as the current working draft, which will now be subject to review and development by the W3C HTML Working Group
  • Release a version of HTML which will be called “HTML 5”

The group editors will be:

What does this mean for webmasters?

  • The approved path for HTML development has shifted from XHTML 2.0 to HTML 5, indicating that HTML 5 may well not be as XML as XHTML 2.0.
  • The development process of HTML 5 is still in its early stages, and we are unlikely to see HTML 5 published before 2010.

Additional resources for HTML5

  1. WHAT-WG resources: FAQs, blogs, forums and more on HTML5.
  2. HTML5 elements and attributes remapped: including global attributes, event handling attributes and those defined in Web Applications 1.0 as well as Web Forms 2.0.
  3. HTML5, XHTML2, and the Future of the Web talks about HTML5 and XHTML2 as different means to create the future of the Web.
  4. Improve your forms using HTML5 displays the new functionalities to enhance your forms with HTML5.
  5. X/HTML 5 Versus XHTML 2: the competition and differentiation explained.
  6. (X)HTML5 Conformance Checking Service: HTML5 validator.
Free Web Templates

Free Web Template: My Dear Lounge

I’m glad to introduce you to yet another template by me, My Dear Lounge! It’s templated with PHP, so should be easier to customize than the previous pure HTML template Nickl, which I have now translated from Chinese to English and put online along with the most current MDL. Check them out here and here! Some of the screenshots and related information are available below.

My Dear Lounge

  1. Name: My Dear Lounge
  2. Author: Yang Yang
  3. License: CC 3.0
  4. Preview:
  5. Requirement: PHP required
  6. Download:

My Dear Lounge, the free web template!

Overview of the raw design that is previously intended for one of my Chinese website,, now suspended as a result of time shortage. 🙁

My Dear Lounge head

Head navigation and logo. The logo is an original PNG backgrounded, so you can adapt it as you want in any graphic editor that swims with PNG. See more logo design inspirations.

My Dear Lounge foot

The footer.


  1. Name: Nickl
  2. Author: Yang Yang
  3. License: CC 3.0
  4. Preview:
  5. Requirement: Any web hosting will suffice
  6. Download:

Nickl, the free web template in HTML!

Nickl is released in GPL the last time you saw it, should you had any chance of stumbling upon this post. After a few revisions and the thorough translation, I now release it under a CC 3.0.

People I learned from

I’m still a rookie designer, so I learn and imitate a lot from other veteran designers at present. They are so great that I don’t know when I could become as proficient as they are now! My thanks goes to the following designers and developers when I’m making these 2 templates:

  1. Cameron Moll: He’s just too talented to imitate, I think, his design is always so pleasant to look at. Borrowed one or two colors from his portfolio, hopefully he won’t mind. 🙂 The greatest I believe he is.
  2. Is it Matt? Or some other developer? Anyway, you can see how my footer nav and links in the paragraphs resemble those of the main nav of In fact those are quite popular right now, but they started it, did they.
  3. Dan Cederholm: Frequent SimpleBits a lot, and Dan has given me a lot to ponder about.
Rich Internet Application

Beginning Silverlight, and XAML Resources – QuickStarts, Videos, Walkthroughs

To be honest, I don’t know much about XAML, actually very little. However, after I came across Silverlight, the Microsoft way of Adobe Flash, it really doesn’t matter whether you know much or not. Because we can build very decent bells and whistles for our websites in almost no time with it!

What is Silverlight then?

According to Microsoft,

Silverlight is a cross-browser, cross-platform plug-in for delivering the next generation of media experiences and rich interactive applications (RIAs) for the Web.

While it can do as much, Silverlight differs from Flash in its deployment wherein it is built upon existing technologies like HTML, XML and JavaScript, delivering text-centric solutions compared with Flash’s binary packaging, though you do have to install a small plug-in to perform Silverlight applications, which you can download here. It’s nimble, so easy to spread! Development can be done in a mere text editor, Windows Notepad for instance. It’s very easy, very intuitive and very enjoyable. If you are already well versed in XHTML+CSS+JavaScript development, this should be a piece of cake for you. Go grab it while it’s fresh and delicious!

What is XAML? And in Silverlight?

I hate definitions, so I’ll just cut through to the essence that I have understood. XAML is just XML that Microsoft has developed to describe objects. Silverlight relies on XAML to store and represent visual objects to be displayed and animated on HTML pages. So technically they are no more than text files, nothing to be afraid of. I promise that you will learn very fast to represent things such as canvas, shapes, images, text, media, animations and controls in XAML so as to further silverlight them in your browser.

How exactly to start developing in Silverlight?

  1. Install the Silverlight runtimes for Windows Internet Explorer.
  2. Download the Silverlight 1.0 Beta SDK.
  3. Unzip the package.
  4. Unzip to a new directory.
  5. In the quickstart directory, you should have quickstart.html, double cilck to open it.
  6. Navigate through “Go to the Silverlight 1.0 Beta QuickStart (offline version)” to the quickstart tutorial.
  7. There you go. Just follow the instructions and you are on your way.

Start the feast!

Quick Facts:

  1. Microsoft is expected to come up with the final release of Silverlight 1.0 this summer.
  2. Silverlight for Linux is likely to be released at the end of 2007.
  3. Silverlight is based upon the great WPF.
  4. According to PC World, Microsoft is expected to announce at MIX 07 that part of its Silverlight technology source code will be released to developers. Adobe had previously announced that it would open source its Flex software development kit (SDK) by the end of this year.

Links and Resources


  1. Microsoft Silverlight:
  2., the community:
  3. Blogs:
  4. Forums:
  5. MSDN Developer Center:


  1. Browser runtimes or plug-in: both downloadable Windows and MAC OS X versions. Or you can visit this page to automatically install it.
  2. Silverlight 1.0 Beta SDK, Silverlight 1.1 Alpha SDK: quickstarts, documentations, code samples and more.


  1. MSDN Silverlight:
  2. Whitepapers: provides a good overview of Silverlight.
  3. Quickstarts: designed to help you become rapidly productive in performing common developer tasks.


  1. Silverlight Tools Alpha for Visual Studio codename “Orcas” Beta 1: an add-on to the Beta 1 release of Visual Studio codename “Orcas” to provide tooling for Microsoft Silverlight 1.1 Alpha. It provides a Silverlight project system for developing Silverlight applications using C# or Visual Basic.
  2. SWF2XAML: an Adobe/Macromedia Flash to XAML conversion tool.
  3. Adobe Illustrator XAML Export: a freely available plug-in that enables Adobe® Illustrator® to export WPF and WPF/E compatible XAML.


  1. Windows Live Silverlight Streaming: 4GB of free hosting offered to Silverlight developers and content publishers.
  2. Silverlight Streaming SDK:


  1. Using Silverlight Brushes for Color, Gradient and Video
  2. Using the Silverlight Downloader Object
  3. Basic Keyboard Input with Silverlight
  4. Adding Ink Support to a Silverlight-based Application
  5. 2D Geometries in Silverlight
  6. Building Video Overlays with Silverlight
  7. Creating a Video Scrubbing Control with Silverlight
  8. Using Silverlight for Full Screen Experiences
  9. Silverlight Event Handling with JavaScript
  10. Animating and Clipping Video with Silverlight
  11. Creating Vector Art for Silverlight with Expression Blend
  12. Animating Vector Art for Silverlight with Expression Blend Part I
  13. Animating Vector Art for Silverlight with Expression Blend Part II
  14. Animating Raster Art for Silverlight with Expression Blend
  15. Using Expression Blend to Control Silverlight Media Playback
  16. Delivering Parameterized Silverlight Content with ASP.NET
  17. Delivering Parameterized Silverlight Content with PHP
  18. Delivering Parameterized Silverlight Content with Java
  19. Using AJAX to Dynamically Update Silverlight Content
  20. Creating a Video Playlist with Silverlight and ASP.NET
  21. Overlaying HTML and Silverlight Content
  22. Real-Time Data Update with Silverlight and Web Services


  1. How Did We Come Up With Silverlight
  2. Community gallery:

In-depth readings:

  1. A Guided Tour of Windows Presentation Foundation:
  2. Silverlight resources on ZDNet:
  3. Silverlight at


  1. XAML Overview:
  3. Inside XAML:
  4. XAMLdev:
  5. XAML Resources:


  1. Windows Presentation Foundation:
  2. [email protected]:
  3. WPF at Wikipedia:
  4. WPF Community:
  5. WPF Resources:
Free Web Templates

A home made HTML web page template – simple, clean and free

Updated: Nickl, in addition to another template My Dear Lounge have been added to Kavoir Mag template section now. Check them out here and here. More hand-made easy-to-use templates are on their way! 🙂

I named it Nickl! It’s just comprised of 4 pages, 6 images and 1 stylesheet that I have fabricated for my resume. Really simple and plain design. I now release it in public domain and you are granted the rights to use it in whatever way your enjoy.

Nickl, the free web template!

Download it here. Be happy! 🙂

Internet Tools Web Applications & Online Software

Blogger, WordPress and Movable Type Compared

Updated: Comparison table updated by the announcement of MT4.

Okay, before it all begins, I’d like to do a small playful research that would give us some preliminary knowledge. According to Google, up to the time this comparison post is being compiled, we have,

  • “powered by Blogger” – 30,800,000 results!
  • “powered by WordPress” – 71,800,000 results!
  • “powered by Movable Type” – 1,220,000 results!

So, WordPress is undoubtedly the most popular among the three. Done, let’s proceed.

Blogger is my virgin choice for a blog platform, later abandoned though, for its annoying way of scrambling HTML markup. But don’t – it’s just my personal obsession to keep everything in control. Anyway. Used it for quite a while before switching to WordPress that I have, as you can see, installed for Kavoir Magazine, and Movable Type for one of my Chinese blogs. They are all awesome. Here I’m going to compare the 3 platforms as far as I know them. Hope this would be of some use to those who just started in blogging and confused by an excessive bunch of options.


Sign up:
Free Hosting:

Blogger rocks at its simplicity. It’s awfully easy to use, good for novice bloggers, and has a few advanced functionalities that WordPress and Movable Type holds proud of stripped away. Another reason for its popularity is that it supposedly gets quicker to be indexed by Google because Google owns it.

The control panel is clean and straightforward, templates are freshly baked and can be rearranged in a drag’n’drop manner. If you prefer hosting the blog archives with BlogSpot rather than storing them to your own FTP server or web space, you don’t have to worry about the code at all. Either no need to install anything before starting to blog, you just concentrate on the writing. Multiple authors are also supported.

A narrow top banner with search is arbitrary for advanced templates capabilities, though.

Cost: None
Launch Time: 5 – 10 minutes
Technical Presumption: None


Free Hosting:

Mostly used as a lightweight CMS(Content Management System), WordPress is the favorite dish of millions of tech geeks. Its open source nature has made the app a huge community world wide. Hundreds of thousands of people passionately contribute to the platform, building a major library of themes and plugins that greatly enhance and publicize the software. Almost all web hosting companies now strive to provide WordPress in one click installs because a considerable part of customers now rely on WordPress for online blogging.

In terms of features, WordPress is more sophisticated than Blogger, therefore expectedly a little harder to maintain, requiring some knowledge of web developing. But it’s still easy to install, taking no more than 3 steps in the browser. Moreover, multiple blogs are available through a derivation, WordPress MU (Multi-User), which you can download here.

Choosing WordPress is simply choosing a community, not just a platform like Blogger.

Cost: None
Launch Time: 10-15 minutes
Technical Presumption: Some

Movable Type


Movable Type, on the other hand, as a typical commercially powered and supported blogging platform backed by Six Apart, catering to enterprise needs, emerged itself quite early. Serious businesses, enterprises, and professionals tend to impress their audience with the maturity and stability of Movable Type. A single user license for non-commercial use can be acquired free, though.

Movable Type has inherent support for multiple blogs, mutiple authors, plugins, templates, widgets and tags. Trackbacks, which has now been one of the technological standards of every blog platform, is incepted by Movable Type, too. One of the major differences Movable Type has with WordPress is, that WordPress relies on PHP to serve blog entries while Movable Type outputs static web pages every time the author posts a new entry or build the site manually. Moreover, modules in Movable Type templates, as a means of content function, well facilitate customization.

Paid licenses is the reason why Movable Type appears not so popular as the other 2 in the research above, which really doesn’t mean much. IT IS, a very admirable blogging platform.

Cost: None with Single User Personal License
Launch Time: 30 minutes or more
Technical Presumption: Some+

A Simple Sum-up

Functionality Blogger WordPress Movable Type
Comments Yes Yes Yes
Trackbacks Yes (Backlinks) Yes Yes
Categories No Yes Yes
Tags Yes (Labels) Yes Yes
Pings Yes Yes Yes
Feed RSS / Atom RSS / Atom RSS / Atom
Widgets Yes Yes Yes
Search Yes Yes Yes
Plug-in/Add-on No Yes Yes
tdemes/Templates Yes (Exclusive) Yes Yes
Edit templates online Yes Yes Yes
Number of blogs Unlimited 1 Varies with licenses
Non-blog pages No Yes Yes (Version 4)
Visitor registration/login Yes Yes Yes
User levels Yes Yes Yes
IP/User/URL banning No Yes Yes
Multiple autdors Yes Yes Yes
Image uploading Yes Yes Yes
File uploading No Yes Yes
Save witdout posting Yes Yes Yes
Private post No Yes Yes

Other Excellent Blog Engines / Platforms

  1. Textpattern : Another PHP blog engine that’s easy to install, featuring lots of saucy plugins and templates.
  2. TypePad : Paid professional blog service.
  3. Drupal : An open source content management system (CMS) that can be used as personal blog system.
  4. ExpressionEngine : Another CMS able to power personal blogging.
  5. VOX : An integrated publishing console intended for hypermedia communication, where you can fully explore the possibility of text posts, photos, videos, audio and more in one. It’s free.
  6. LiveJournal : A community of independent bloggers.
  7. Flickr : Well, most of us might not agree that this is a blog system. Why not? It’s picture logging, isn’t it?

More Opinions

  1. Movable Type vs. WordPress, My Opinion, a professional and comprensive analysis of the 2 platforms by BusinessLogs.
  2. Comparison of WordPress and TypePad by Emily Robbins who has used both extensively for over a year.
  3. Choosing a Blog Platform from Darren Rowse’s which gives no review but urges bloggers to define their own goals choosing a blogging system. You may also enjoy his Blogging for Beginners.
  4. Blog software comparison chart at Online Journal Review presents a comprensive comparison of technical capabilities among 8 different platforms.
  5. Are you using the right blogging tool? by Susannah Gardner. Missing quite some famous blog softwares.
  6. Blogging Cheatsheets, PDFs that map out the interfaces of major popular blogging platforms Blogger, TypePad, WordPress and Movable Type. Assembled and created by Andy Wibbels.
My Personal Reviews Web Applications & Online Software

Check broken links on your site with this free tool

Xenu‘s the program(for windows) I’m talking about. I’ve tried a bunch of link checkers including those pretentiously online ones. This is the one that’s really working to solve your problem. And free!

Download it from here, or you might also want to check its page for FAQs and other instructions.

Install and run it. “File” -> “Check URL…”, then configure the starting point of your website, usually this could be your website URL, and click OK. You are now on it.


Done! You are asked if you want a report or not. Of course. And Xenu opens it in the form of a web page. It then prompts you for an orphan check on your FTP site, simply ignore it by clicking Cancel. Ok, you should be in front of the report page now.

Other decent web-based link checkers include:

  1. W3C Link Checker: only the specified page is checked, no hopping interpagely.
  2. Link Checker: the famous Microsoft bCentral toolkit, one page at a time.
  3. Link Valet: a link checker since long long ago, in a galaxy far far away … It gives you the answer after all the checking is done, so be patient while your browser’s loading like forever.
  4. The hawknest Basic Link Check: one page at a time, and neatly presents only the faulty links.
  5. 2bone Link Checker: very fast link checker, you can choose to receive results in a single page or dozens of pages.
  6. Link Checker : a modification of W3C Link Checker.

Aside from these online link checkers, you can also find a FireFox addon, LinkChecker to do the job for you. It checks all links on the page you are visiting and distinguish them with different colors to tell which ones are broken.


Create your first web page – Learn XHTML and Make Web pages


If you are a total rookie in manipulating web pages, never having the chance to know how web pages work and wanting to learn about it or even trying to spin some out. Listen to this. Everything here you are told, in this naive article, is pure gold. And everything else, other than those on this site, is pure rubbish! Don’t listen to them, they are stupid.

OOOOkay, a good starter. Now let’s get down to work, assuming that you know how to navigate around the web using a computer and what are web pages.

  1. All web pages on this planet are text files, which you can create or read by any normal text editors like Windows Notepad or Notepad++. However, unlike the memo you put down as a plain text file on your computer desktop this morning, a web page needs more standardized text called HTML to tell what’s what.
  2. Open your favorite text editor, type these in just as they appear:<html>
    <title>The Donkey Reloaded</title>
    <h1>The Donkey Reloaded</h1>
    <p>I have a donkey.</p>
    <h2>Donkey lazes</h2>
    <p>He is very lazy.</p>
    <h2>Donkey doodles</h2>
    <p>He once drawed a circle while he was working.</p>
    <h2>Donkey heehaws</h2>
    <p>And he seemed quite satisfied with his masterpiece.</p>

    Nonononono, stop copying and pasting! Do it yourself and type them onto the screen with your bare hands!
  3. Cool! Save this text file, name it whatever you please, but make sure it has the extension of .html. Now open it in your favorite browser. See, you made it! Your first web page!

So WTH does these weird-looking tags doing in there, like <html> and <p>? Follow me to investigate in them one by one below.

  • <html> : indicates that this is a HTML file, or static web page, and things followed or embraced in it are HTMLized(HTML tagged) content.
  • <head> : makes room for the head section of a HTML file.
  • <body> : makes room for the body section of a HTML file.

Up to here, we know that every web page consists of 2 essential parts, the head part and the body part, which, are indicated respectively by the <head> tag and the <body> tag.

  • <title> : indicates the title of this page that is usually displayed on the caption of the browser window.
  • <h1> : means Header 1, or the 1st header or headline that governs the overall story of the page.
  • <h2> : means Header 2, or the 2nd header that governs part of the overall story of the page.
  • <p> : indicates a paragraph, the main text flow should go in here. Web pages live with content, die with bullshit. And content goes in <p>. So it is pretty much the essence of every web page.
    Browsers render 2 paragraphs wider apart than they do with 2 lines within one paragraph. Using <p> makes your pages pretty.

In fact, there are as much as 4 more headers, namely h3, h4, h5, h6 at your control. Well-structured web pages cannot go without them. Use them wisely, so you are a good web page creator.

More things you may have noticed:

  1. None of the tags have the privilege to go without a corresponding closing tag. E.g. Every <p> has to end with a </p>. That’s right! Every tag in a web page closes in this manner, that is:
    wherein ellipsis are the placeholders of text content in between them.
  2. Certain tags can only be placed in certain tags. E.g. <title> tag can only be positioned within the <head> section, and either an error occurs or things don’t go as expected if you put it in the <body> section. It’s the same with <hx> and <p>, they are never supposed to appear in the <head> section.
  3. Tags pile up like they box(seal, or completely envelope) each other. Small boxes are boxed by medium boxes, medium boxes by big boxes, and big boxes by a single gigantic box that is <html>. There’s no such thing as:
    <h1>a header<p>a paragraph</h1> goes.</p>

This is it! You are on your way to becoming a great web designer! Cheers!