Comment on page
What is HTML?
HTML is the language used to generate web pages. It is quickly becoming the front-end of mobile apps and most of what we see on a daily basis.
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.
Think of an HTML file like a person. It has private thoughts, kept inside the
head(one would hope) and a
bodythat people can see (and even interact with). This, along with many other elements is called the Document Object Model (DOM).
My attempt at modeling the DOM
bodyare the two major elements inside your basic
htmlfile. 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
- Between the
</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:
<title>My First HTML Page!</title>
Save that file with the
.htmlextension (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:
Hello World! in HTML (illustration by author)
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:
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 <img src="..\images\sample.jpg"> -->
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.
<p>The button below does nothing. Can you make it do something interesting?</p>
<button style="padding:10px"> Click me! </button>
In this example you can see that the
<button>tag has a
styleassociated 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?