So this week we talked about HTML. The HyperText Markup Language is the language that web pages are written in. Every time your browser shows you a web page, it is really fetching an HTML document, and then using the layout information inside to present it to you on the screen. Here’s what a simple HTML document looks like:
Followed by a paragraph of information.
Now the first thing you might notice about this is all the angle brackets. Something enclosed in
> is a tag. Tags give the basic structure of an HTML document. All tags must have a closing tag, denoted with a
/, although sometimes a tag is its own closing tag.
<meta /> is one example of a self closing tag.
<p> . . . </p> is an example of an opening and a closing tag.
Each tag means something for the structure that comes inside it.
<html> indicates that everything inside the tag is an HTML document.
<head> indicates header information that is not displayed, such as the title, the language, the character encoding, any scripts on the page, etc.
<body> indicates what actually gets displayed.
<h1> makes its contents into a heading.
<p> makes its contents into a paragraph.
There are a few other important bits:
<meta />tag above.
<!-- This is a comment ‐‐>.
<p><h1></p></h1>makes no sense at all.
You can try this out yourself really easily! Open up a text editor (Notepad, Notepad++ on Windows; TextEdit on macOS; and if you’re on Linux, you probably have at least three, and one is your favorite, and if I recommend another one you will tear me apart with wolves), write a document like the one above (you could even just copy-paste it), save the file as
example.html, and open that file in your web browser. All major web browsers have an open-file option, usually in the File menu.
Then, you can edit the document, reload the page, and see your changes.
That’s all for now, but next week we will go more in-depth on HTML. A great HTML and other standards reference is link:http://w3.org[W3], the World Wide Web Consortium. They can give you more information on the various tags, as well as some helpful tutorials.