Let me tell you, you do not need a CS or EE degree to understand it. If you can read instructions and replace the flapper in your toilet, you can assemble a webpage. It's easier than that.
I suppose you have an text editor, so try this now. (Need help?) Here is an example from w3schools.com.
HTML Example:
<!DOCTYPE html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
<html>
<title>HTML Tutorial</title>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
If you open the file in your browser window, it will look like this.
W3schools.com provides a very helpful interactive tool for you to try . You can replace the phrase and click the "See Result" button. See what happened?
You see where everything goes, right? First, the element "<!DOCTYPE html>" always has to be the first line of the file and it tells the browser what language the file is written in.
Just like how a period is used to end a sentence, in HTML, we use tags to indicate the beginning and end of a section and these tags are enclosed with angled brackets. There are a few exceptions but usually they come in pairs, with "<tag_name>" to mark the beginning and "</tag_name>" to mark the end.
In this example, there are
<html> The Whole Program </html>
<title> Title on Tab </title>
<body> Body content </body>
<h1> Heading </h1>
<p> Paragraph </p>
You can imagine this is like a Russian doll with layers nesting layers. The <html> and </html> pair enclose everything on a page in HTML. Then there is usually a "head" part and a "body" part. In our example, the "head" part isn't specified explicitly.
With in "head", there are many things you can specify, such as the style or some special characters used herein. These don't show up in the content you'll see on the page in the browser. The "title" we see here is to specify the name shown on the tab of this page. The "body" part is where the contents go. We'll examine that in next posting.
NOTES:
Text Editor (NotePad or TextEdit will do. If you don't want to use the text editor that comes with your computer or you want something that works across multiple platforms, Sublime Text is a popular choice. You can download an evaluation copy for free and purchase a license later. No, I don't get paid if you do. More about it.)
Resources!
Jargons!
No comments:
Post a Comment