CS 100 (Learn)CS 100 (Web)Module 07


HTML :: First Example

You are most likely viewing this content as a web page within a web browser. Web pages are written in a language known as HTML. Web browsers can read and interpret HTML and then display (or render) the content according to the "rules" (or specification) of HTML.

We are going to consider a quick example of HTML before we explore it in more depth.

HTML stands for HyperText Markup Language, and we will unpack that acronym in a moment.

To illustrate HTML, we are going to first display the HTML, and then we will show how it might appear in a web browser.

HTML

Plain text

web browser

Plain text

 

Plain text appears (not surprisingly) as plain text.

Let's see how to add emphasis to text.

HTML

You can <em>add emphasis</em> to your text

web browser

You can add emphasis to your text

 

In the HTML, we have placed a start tag (<em>) and an end tag (</em>) around the text we wanted to emphasize.

Note that in the web browser the text appears emphasized and you do not see the tags.

Each tag begins with a less than symbol (<) and ends with a greater than symbol (>), which helps it stand out from the other plain text. The end tag has an extra forward slash. Tags are discussed in more detail in another section.

The em in this tag is for emphasis. A similar tag for important text is <strong>.

HTML

You can use <strong>strong text</strong> to indicate that some text is important.

web browser

You can use strong text to indicate that some text is important.

 

For a more complicated example, we can see how to make a bullet list (an unordered list) list in HTML, which is made up of list items.

HTML
<ul>
  <li>First bullet item</li>
  <li>Second bullet item</li>
</ul>
web browser
 

These are all examples of markup, which is the M in HTML. It comes from the tradition of how editors and publishers would mark up text.

The HT in HTML is for HyperText, which are "links" within a web page. The Hyper comes from the Greek for "beyond". The idea is that when you click on a link, it takes you "beyond" this context (for example, to another page).

To add a hyperlink in HTML, we use the anchor tag, which is simply <a>.

This tag is a bit more complicated because we need to specify the destination for the link within the anchor start tag (<a href="destination">). This syntax is discussed in more detail in another section.

HTML

You can visit the <a href="https://en.wikipedia.org/wiki/HTML">Wikipedia HTML</a> page for more information.

web browser

You can visit the Wikipedia HTML page for more information.

 

With these examples, we have seen the basics of HTML (HyperText Markup Language).

In other words, it is a language for specifying how to add links (or HyperText) and markup to a document.