HTML

From Coder Merlin
Within these castle walls be forged Mavens of Computer Science ...
— Merlin, The Coder

Curriculum[edit]

ExercisesIcon.png
 Coder Merlin™  Computer Science Curriculum Data

Unit: Lab basics

Experience Name: HTML (W1004.50)

Next Experience: Digital Journal (W1005)

Knowledge and skills:

  • §10.111 Participate with electronic communities as a learner and contributor
  • §10.112 Actively mentor learners within and beyond the school environment
  • §10.121 Demonstrate proficiency in managing files and processes using a command line interface
  • §10.231 Demonstrate proficiency in using a source control system for single-users
  • §10.651 Create web pages using HTML and CSS

Topic areas: HTML

Classroom time (average): 30 minutes

Study time (average): 30 minutes

Successful completion requires knowledge: understand the purpose of HTML

Successful completion requires skills: creating an HTML page using proper syntax

What Is HTML?[edit]

HTML, or HyperText Markup Language, is one of the essential building blocks for web pages. It defines the general structure of a web page, as well as its content. Every single website on the internet uses HTML in one form or another.

JavaScript and CSS[edit]

It is worth noting that HTML is rarely used by itself on modern websites. It's almost always accompanied by CSS, which provides styling for a web page, as well as JavaScript, which can be used to fetch data from an API, modify HTML and CSS, and everything else that HTML and CSS doesn't do. However, you still need need at least some HTML to build a website.

PHP[edit]

Serving the exact same page to everyone isn't always an option; if that were the case, then we wouldn't have websites such as Google, YouTube, Facebook, Twitter, etc. A server-side language is often used to generate HTML on the fly, which is then sent to the browser. This allows for customization of the web page based on what the user wants; in the case of social media that is to find interesting content based on the user's preferences, while for a search engine it is to find content relevant to the search. PHP is the most commonly used server-side language, although there are also others such as JavaScript, Python, and more. However, this still requires at least some knowledge of HTML to know how to properly generate the page.

Getting Started[edit]

You can review the prerequisites to get started with building websites on the  Coder Merlin™  server. You can use HTML directly in a PHP file, or you can create an index.html file instead.

Tags[edit]

Everything in HTML is accomplished using tags, which determine when a certain piece of a website will start and end. For example, there are tags for headings, paragraphs, images, videos, audio, and more.

Opening And Closing Tags[edit]

Most tags start with an opening tag of the form <[tag name]> (e.g. <video>) and end with a closing tag of the form </[tag name]> (e.g. </video>). In other words, tags indicate the start and end of each section, while the content in between the tags is the body of the section. The concept of tags is similar to brackets in many programming language in that they indicate where a block starts and ends.

Void Elements[edit]

Some tags, such as img, br, and hr, don't have closing tags because they don't have a "body" like most other tags. You can use them with only the opening tag, although many people prefer to use the syntax <[tag name] /> (e.g. <br />).

Contents[edit]

Most HTML elements support having content in between the opening and closing tag, which lets the browser know where an element starts and ends. For example, the paragraph tag (<p>) indicates, well, a paragraph and can be used like so:

This is not in the paragraph. <p>This is in the paragraph</p>

In the case of the paragraph tag, it doesn't technically need to be closed, but it's still recommended for uniformity and ensuring that it behaves how you intend.

Attributes[edit]

Most HTML tags can also have attributes, which attach additional information to a tag. Attributes are defined in the opening tag in the form [attribute name]="[attribute value]" (e.g. the "href" attribute in <a href="https://example.com">link text</a>).

Two of the more common attributes are id and class. id is usually used to identify a single element, while a class is a more general selector that can be applied to multiple elements. In the case of both, you can define more than one id or class by separating them with a space. Here's an example of how you might use both:

<h2 id="chapter-1" class="chapter-heading">Chapter 1</h2>
<p class="chapter-text intro-text">This is a paragraph.</p>
<p class="chapter-text">This is another paragraph</p>

In this example, the id "chapter-1" is applied to the h2 tag along with the "chapter-heading" class, the "chapter-text" class is applied to both paragraphs, and "intro-text" is only applied to the first paragraph. "chapter-1" uniquely identifies the particular heading for the chapter, so it makes sense to use an id instead of a class. However, "chapter-heading", "chapter-text", and "intro-text" are likely to be reused multiple times on the same page so it makes sense to set them as a class.

Nesting[edit]

HTML tags can also be nested. This is useful if you'd like to have an image within a paragraph, for example. Nesting is also common with div tags because it makes organizing and styling the page easier. Here's an example of an image tag nested in a paragraph tag nested in a div:

<div>
  <p>
    <img src="https://images.unsplash.com/photo-1609177393985-804cd5f98670?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" />
  </p>
</div>

Continuing with the programming analogy, nesting works similar to nesting loops or conditionals in a programming language. You need to remember to close the correct number of blocks in the correct order (the "newest" blocks have to be closed before the "oldest" ones).

Anatomy of an HTML Page[edit]

Here's a simple HTML page that sets the title to "Hello, World!" and prints the same text in a header:

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello, World!</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
  </body>
</html>

Doctype[edit]

The first line of an HTML5 document is <!DOCTYPE html>, which lets the browser know it's viewing an HTML document. Although an HTML page will render properly without it, that sort of behavior is not guaranteed and could break compatibility with some browsers.

HTML tag[edit]

The HTML tag indicates the start and end of the HTML document.

Head tag[edit]

Not to be confused with the header tag or a heading tag (more on that later on), the head tag is where you put information like the stylesheets to load, the web page's title, and other meta information for search engines and browsers (such as the web page's description and favicon).

Title[edit]

In order to set the title of your web page in the browser, you can put the title in the title tag in the heading.

Body tag[edit]

The body tag indicates the start and end of the web page's body, or the content that will actually be displayed. Most of the HTML you write will go here.

Common Tags[edit]

Here are a some of the more common tags, and what they do.

Headings[edit]

A common tag in HTML is the heading tag. These take the form of h1 through h6 and can be used for the web page's name, chapter headings, or anything else where a header is necessary. h1 is the largest, followed by h2, and so on until h6:

<h1>Largest</h1>
<h2>Smaller</h2>
<h3>Even Smaller</h3>
<h4>Small</h4>
<h5>Really Small</h5>
<h6>Smallest</h6>

Paragraphs[edit]

Another common tag in HTML is the paragraph tag, which indicates a paragraph. Paragraphs are displayed on their own line even when the tag isn't:

Here is some text before the paragraph. <p>This text is on a new line</p>

It's also worth noting that for the most part, HTML ignores two or more spaces. So, the following HTML:

<p>This    is    text    that is     really     spaced    out</p>

Will result in:

This is text that is really spaced out.

In order to manually add more spaces, you can use the HTML entity code &nbsp; in place of the space.

Line Breaks[edit]

HTML also disregards newlines in the document. In order to manually add one, you can use the <br /> tag. The br tag will insert a new line wherever you place it, such as in a paragraph.

Links[edit]

The internet would be very different without the use of links, which come up very often in web pages. From navigation menus to linking to outside resources, links are used pretty much everywhere. Links are created with the anchor tag, which in HTML is shortened to a. In order to indicate the URL you would like the link to point to, you can set the href attribute. The text you put in between the opening and closing tag is the text the link will appear with:

<a href="https://example.com">Example</a>

Images[edit]

Images are one of the few tags that don't have a closing tag. Similar to links, you set the image URL through an attribute, which in this case is src. You can also set the width and height attribute to change the size of the image in the browser, although this will result in distortions if the aspect ratio is not preserved. The alt tag is also often set on images, which assists with accessibility and search engine optimization.

<img src="https://images.unsplash.com/photo-1609177393985-804cd5f98670?ixlib=rb-1.2.1&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max" alt="iPhone on a desk with a computer in the background" />

Div[edit]

Div tags (<div>) are used to define generic sections in an HTML document. They are mainly used to group elements together for styling with CSS or other actions with JavaScript.

<div>
This text will not be treated as a paragraph.
</div>

References[edit]


Experience Metadata

Experience ID W1004.50
Next experience ID
Unit Lab basics
Knowledge and skills §10.111
§10.112
§10.121
§10.231
§10.651
Topic areas HTML
Classroom time 30 minutes
Study time 30 minutes
Acquired knowledge understand the purpose of HTML
Acquired skill creating an HTML page using proper syntax
Additional categories