In today’s post I want to demystify the term HTML. HTML stands for HyperText Markup Language, and it is the way that you write web pages. A markup language, according to Wikipedia, is a way to “annotate the text” to provide some additional information.
Every webpage has HTML, which includes a set of “tags” to describe different parts of the page. A tag can be something like <a>, <img>, <html>, <p> and many more.
Here is a simple HTML page:
<HTML>
<HEAD>
<TITLE>My Page</TITLE>
</HEAD>
<BODY>
<H1>Welcome to my page!</H1>
</BODY>
</HTML>
There are a few things you can notice here. Tags start like this <NAME>: and end like this </NAME>. Tags can go underneath other tags. The outermost tag is the <HTML> tag, which says this is a html page. There is a <TITLE> tag, which says the title of this page is “My html page”. There is a tag <H1> which says that there is a big header on the page that says “Welcome to my page!”
The indenting shows how tags are related to each other. A tag that is more indented is said to be a “child” of the tag before it. The structure of a HTML page is said to create a “tree.”
If I want to expand my current example to include an image to a file named “dog.jpg”, I would write
<img src="dog.jpg" />
This image tag has a source attribute which tells us the filename is “dog.jpg.” Different attributes tell us whether the content should be a list, a header, a paragraph, or some different section of text. These tags can be annotated with other attributes that determine how they are styled (CSS) or what to do when certain events happen (JavaScript), but these are topics for a later date.
The main point is that webpages are just made up of html which is a series of tags that add additional information to plain text. If you want to write html, just open a text editor, copy and paste that first example and save it as a file called “index.html”– and you can open that up in a web browser.
To copy and paste the HTML codes from the HTML chart below into the HTML of your web page, place your mouse pointer over the beginning of the HTML code you would like to copy. Next, click and hold your left mouse button and drag your mouse over all the HTML code you would like to copy (Example of highlighted text). Your HTML code should now be highlighted. Go to “Edit” – “Copy” on your web browser’s toolbar and then place your cursor within your HTML code where you would like to place the code. Right click on your mouse and go to “Paste.” Your HTML code should now be displaying within your HTML document.