Hypertext Markup Language (HTML) is worth learning, no matter what your future in technology might be. It allows us to provide interactivity with the end-user with dynamic, responsive content. Programming with a graphical user interface (GUI) is a little beyond the scope of our course but is an easy way to begin front-end design.
There are several methods to generate good programs with a GUI and back-end. C++ and Java developers would recognize the Model-View-Controller (MVC) paradigm. We will take a more relaxed approach, starting with the basics - getting content onto a web page.
HTML is not a programming language. It is, quite specifically, a markup language. It is not responsive or dynamic, does not run or interpret code. HTML provides content and how the content looks. It is downloaded from a server (computer) as a plain-text file and interpreted on-the-fly by the browser (Chrome, Firefox, IE, Safari, Opera, etc).
Hypertext is content that can link to other files, folders, or locations through navigation (clicks). Hypertext documents are connected through passive "links".
HTML utilizes opening and closing tags around content in order to organize and decide what that content should look like. An opening, or beginning tag uses arrow brackets
< > and a closing, or ending tag with contain a slash
</ >. For example, paragraphs of text are surrounding with the
Example: You can emphasize text with the
<em> tag like this:
<em>This text will look italic,</em> while this does not.
Will produce: This text will look italic, while this does not.
There is quite the history to HTML and it has come a long way (version 5.2 as of this writing). If you wish to see all the possible tags along with way more information, I highly recommend the W3Schools Reference. There is also a great cheat sheet provided by Hostinger Tutorials.
Think of an HTML file like a person. It has private thoughts, kept inside the
head (one would hope) and a
body that people can see (and even interact with). This, along with many other elements is called the Document Object Model (DOM).
body are the two major elements inside your basic
html file. These also happen to be the first tags you'll need to write:
That would be a very boring web page - there's no content! Let's break it down.
The opening and closing
</html> tags tell the interpreter (browser) that this is in HTML format and to interpret everything between those tags as such.
</head> tags define an area for hidden content that the end-user does not typically see. Hidden information could be meta-data (like search tags), loading external files in the background, and giving your page a
</body> tags is where the real magic happens! This is where you will define the content and structure of your page. 99% of your page content will be between these tags.
Perhaps the simplest possible HTML file, but worth exploring. Create a new blank text document in your favourite text editor (notepad on Windows, etc). In your document, copy and paste the following:
<html><head><title>My First HTML Page!</title></head><body>Hello World!</body></html>
Save that file with the
.html extension (call it something snazzy like helloworld.html). Now open that file in your favourite web browser (typically by double-clicking the file wherever you have it saved). It should look something like this:
You may have noticed a new
<title> tag inside the head tags. This is one of the only tags inside the head that is visible to the user. Did you notice what it did?
HTML is backwards-compatible so that we don't break the Internet. When you first learn HTML it is a toss-up between learning the simpler, deprecated tags (like
<b> for bold) or the shiny, new HTML5 standards (
<strong>). The general rule of thumb is: if it can be done using a style (CSS), then do it with a style. That becomes overly complicated for new learners. Here is a non-exhaustive list of some useful tags to learn, in no particular order:
Creates a paragraph block separating content and allowing for styling paragraphs of text.
Invisible tag that defines a section of content. The soul purpose of
One of the few standalone tags (hence the slash to close itself), this tag adds a new line or line break.
Different predefined heading styles that enlarge and bold the font.
A more complicated or involved tag that allows you to change the actual font, font size, and overall look of the text.
The anchor tag is used to link from one page to another. It can have a
Insert a picture (image) file into your document using the
A block tag used to create a table (much like the table showing you this information). You create rows with
Insert a clickable button on your page. This tag is different than the button you can create with the
To insert a comment in your HTML document that is not interpreted, use the
<!-- opening tag and close with
Example (the photo will not be loaded):
<!-- This next line is commented out
It's important to note that comments are not shown on the page but are visible in the source file if the user asks to view the source.
In short, CSS stands for Cascading Style Sheets. It is an incredibly detailed (and complicated) subset of HTML that almost has its own markup language / syntax. It allows us to separate style from content, each in its own file.
<!DOCTYPE html><html><head><title>Single Button</title></head><body><p>The button below does nothing. Can you make it do something interesting?</p><button style="padding:10px"> Click me! </button></body></html>
In this example you can see that the
<button> tag has a
style associated with it to add padding (space) around the label "Click me!".
So that was a lot to read and it's just skimming the surface of HTML. Let's get to the real reason we're here - how do we get an HTML page to feel interactive?