Aboslutely!
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.
- 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.
- Open your favorite text editor, type these in just as they appear:<html>
<head>
<title>The Donkey Reloaded</title>
</head>
<body>
<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>
</body>
</html>
Nonononono, stop copying and pasting! Do it yourself and type them onto the screen with your bare hands! - 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:
- 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:
<p>…</p>
<h4>…</h4>
wherein ellipsis are the placeholders of text content in between them. - 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.
- 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!
OMG, this was the post I did almost 5 years ago?