Boot Up With Chrome
I started to learn HTML and CSS on W3Schools. I guess that’s where most of the web developers get started. But after I went through the tutorial, the only thing I could remember was a bunch of tags and attributes, and I needed to refer back to the reference parts of the website again and again.
But don’t forget the web, itself, is a great place to learn these basics. So millions of webpages means millions of places to learn, discover and more. Throughout this book, we are going to use Chrome, a web browser developed by Google, as one of the tools to unravel the mystery of the web.
Before we get started, here is some general ideas about what are HTML and CSS.
Basics of HTML
HTML is the acronym for Hyper Text Markup Language. As its name suggests, it’s a document format that contains richer information than plain text and is marked up by tags. Here is a classic hello-world example of HTML document.
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
<p>Hello World!</p>
</body>
</html>
Debut of Chrome
Copy and paste the source code above in your favorite text editor and save it as a .html file. Now open it with your Chrome. You will see ‘Hello World!’ as content with the title ‘Hello HTML’ on the tab. It just works! Wait, there is one more thing we can do with Chrome.
In case you are as lazy as I am, I’ve prepared the file for you. Check it out here: Hello HTML.
Inspect!
Right click on the blank of your page and choose Inspect Elements. Yes! Inspect! That’s how you unravel the mysteries of millions of webpages out there. Play within the left part of the Elements tab.
Don’t forget to try toggling the folding so that you can appreciate how elegant the codes are organized. And as you hover on the codes, Chrome will highlight the element that you focus on. This feature is helpful when you make discoveries on your own.
Doctype
As you see, the very first thing of an HTML document is the declaration the doctype. This doctype tells the browser which version of HTML the page is written in.
<!DOCTYPE html> says ‘Look! My doctype is html.’.
There are many versions of HTML standards throughout the history, such as HTML 4.01 and XHTML 1.0. Though there are 3 different versions of HTML 4.01, in the latest HTML standard, HTML 5, there is only one doctype. I assume we are going to build websites for the future. So I won’t quibble on the subtle differences. The doctype declaration we are using now is the one for HTML 5, which I think is neat and clean. I bet you don’t want to look at the doctype declaration of other versions.
Normal Tags
As you might have noticed, the html tags are paired and nested like the parentheses in a maths formula. I won’t tell you what are the rules they obey. But a bad example could explain everything.
<!DOCTYPE html>
<html>
<head>
<title>Hello HTML</title>
</head>
<body>
</html>
<p>Hello World!
</body>
It’s bad in two ways. First, the scopes of tags <html> and <body> overlapped. The second issue is that the <p> tag is not closed appropriately. Note that to end an tag, simply repeat the tag and add a slash. However, the doctype declaration is one of the exceptions which don’t conform to the rules for normal tags.
By the way, html document is case-sensitive, but html tags are not.
means the same as
. But lower case tags are recommended by the World Wide Web Consortium (W3C).
Template Uno
Well, after you declare your doctype at the very beginning. You are on your way to write your html document. Here is our first template.
<!DOCTYPE html>
<html>
<head>
<title>Title goes here</title>
<!-- My head is simple -->
</head>
<body>
<!-- And nothing is in my body -->
</body>
</html>
The <html> tag identifies the start and the end of the document. In the scope of , the codes are divided into two parts, the
For <head> section, <title> is required, though hardly can you imagine such a humble document could have a title. Also, in the <head> section, there might be other tags linking other files or carrying metadata. We will come back to them when necessary. For now, just a title is good enough.
On the other hand, your content goes into the <body> section. The tags which I am going to mention soon all go into this section.
Another new tag appeared above is the comment tags <!-- ... -->, which disobeys the general rules for normal tags as <!DOCTYPE html> does. You can place anything between <!-- and -->, a poem, a novel or your ASCII art. However, nothing will be rendered in the page. But that doesn’t mean it’s useless.
I’ve seen bloggers hide their secrets between the comment tags. Do you know how to view their secrets? Yes! Inspect! I can imagine the crooked smile on your face now.
More Tags
Though I can list all of those tags, I won’t do so because I cannot remember all of them. A better way to learn html tags is to challenge yourself. Open any webpage and start inspecting. But before you run into those catawampus tags in a random page, I am going to hold your hands for a while.
First, more explanations on the hello-world example. There is one tag I haven’t mentioned yet, the <p> tag. Basically, it tells the browser that the stuff in its scope is a paragraph. Now the analogy between tags and parentheses doesn’t fit into the context here, since different tags have different meanings, or say, different semantics. Also tags give you a way to communicate with your browser the structure of your content.
There are whole bunch of tags that are similar to <p>. Here is one simple page you can try to inspect first: Tag List. It’s supposed to be self-explanatory. But if you have any questions, please leave your comments and help me to improve it. Still there are three things to be emphasized.
Empty Tags
Three tags, <hr>, <br> and <input> are not closed. It’s legal to do so because they are empty tags. Empty tags are special in the sense that they contain nothing and have no end tags.
Attribute
Look at the following lines excerpted from the example above.
<a href="https://blog.zilin.one">Anchor is a link.</a>
<input type="text" placeholder="a text input,">
<input type="radio">
<input type="submit" value="and a submit button delivers the form">
<iframe src="http://libragold.appspot.com/helloworld"></iframe>
<img src="https://graph.facebook.com/zilinj/picture">
Stuff like href="...", type="..." or src="..." are called attributes of tags. They supplement meaning or content that tags cannot carry alone. It’s easy to guess their meanings most of the time. Bookmark W3Schools HTML5 Tag Reference for future reference.
Global Attribute
However, the most common attributes you will see are class="..." and id="...". They are global attributes. Unlike the attributes above, global attributes can be used on any elements. The global attribute class="..." specifies one or more classnames for an element, while id="..." specifies a unique id for an element. We will see how to use them to select elements for other purposes. We will come back to this part next time.
Reserved Symbol
You might have been thinking how to put less than or greater than symbols within your text without confusing the browser with those markups. This kind of symbols are called reserved symbols. To invoke them, you need to enter their ‘nick names’. Here is a list of them.
| Character | Nick Name |
|---|---|
| “ | " |
| ‘ | ' |
| & | & |
| < | < |
| > | > |
Road To CSS
In the latest HTML 5 standard, more tags are introduced, meanwhile some of the tags are deprecated. One of the guidelines is to add semantic tags, such as <header>, <nav> and <footer>, against presentational tags, like <font>, <strike> and <u>. In other words, it’s to separate style from the document which, in principle, should only convey content but not presentation. In Editor’s Draft of HTML, you will see this trend especially in the pages for newly-added and changed tags.
Web designers used to snip styles in html documents. It is convenient at first when you draft your webpage. However, after a week you would be lost in thousands of style related lines of codes without mentioning, let alone trapped in the trouble that when you need to change the style of all the headings or paragraphs, you need to change hundreds of places in your codes!
Moreover, once your webpage delivers a clear semantic structure, the web crawlers or search engine spiders can automatically understand the structure without any prior knowledge of what it might find on your page.
These two problems prompted the idea of establishing a separate file that controls the layout of the webpage. That’s the theme of our next lesson.
I think it’s a good place to stop. See you next week. Now, open your favorite websites and explore your Chrome! Focus on tags and attributes, and tell me what you find.