technical documentation page

Introduction to HTML

HTML (HyperText Markup Language) is the most basic building block of the Web. It defines the meaning and structure of web content. Other technologies besides HTML are generally used to describe a web page's appearance/presentation (CSS) or functionality/behavior (JavaScript).

"Hypertext" refers to links that connect web pages to one another, either within a single website or between websites. Links are a fundamental aspect of the Web. By uploading content to the Internet and linking it to pages created by other people, you become an active participant in the World Wide Web.

Multimedia and embedding

image

In the beginning, the Web was just text, and it was really quite boring. Fortunately, it wasn't too long before the ability to embed images (and other more interesting types of content) inside web pages was added. There are other types of multimedia to consider, but it is logical to start with the humble <img> element, used to embed a simple image in a webpage. In this article we'll look at how to use it in depth, including the basics, annotating it with captions using <figure>, and detailing how it relates to CSS background images.

In order to put a simple image on a webpage, we use the <img> element. This is an empty element (meaning that it has no text content or closing tag) that requires a minimum of one attribute to be useful — src (sometimes spoken as its full title, source). The src attribute contains a path pointing to the image you want to embed in the page, which can be a relative or absolute URL, in the same way as href attribute values in a elements.

<img src="dinosaur.jpg">

Video and audio content

Web developers have wanted to use video and audio on the Web for a long time, ever since the early 2000s when we started to have bandwidth fast enough to support any kind of video (video files are much larger than text or even images.) In the early days, native web technologies such as HTML didn't have the ability to embed video and audio on the Web, so proprietary (or plugin-based) technologies like Flash (and later, Silverlight) became popular for handling such content. This kind of technology worked ok, but it had a number of problems, including not working well with HTML/CSS features, security issues, and accessibility issues.

A native solution would solve much of this if implemented correctly. Fortunately, a few years later the HTML5 specification had such features added, with the <video> and <audio> elements, and some shiny new JavaScript APIs for controlling them. We'll not be looking at JavaScript here — just the basic foundations that can be achieved with HTML.

We won't be teaching you how to produce audio and video files — that requires a completely different skillset. We have provided you with sample audio and video files and example code for your own experimentation, in case you are unable to get hold of your own.

The <video> element allows you to embed a video very easily. A really simple example looks like this:

<video src="rabbit320.webm" controls>
                        <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.webm">link to the video</a> instead.</p> 
                      </video>

HTML tables

A very common task in HTML is structuring tabular data, and it has a number of elements and attributes for just this purpose. Coupled with a little CSS for styling, HTML makes it easy to display tables of information on the web such as your school lesson plan, the timetable at your local swimming pool, or statistics about your favorite dinosaurs or football team. This module takes you through all you need to know about structuring tabular data using HTML.

We've talked table theory enough, so, let's dive into a practical example and build up a simple table.

First of all, make a local copy of blank-template.html and minimal-table.css in a new directory on your local machine.
The content of every table is enclosed by these two tags : <table></table>. Add these inside the body of your HTML.
The smallest container inside a table is a table cell, which is created by a <td></td> element ('td' stands for 'table data'). Add the following inside your table tags:

<td>Hi, I'm your first cell.</td>

If we want a row of four cells, we need to copy these tags three times. Update the contents of your table to look like so:

<td>Hi, I'm your first cell.</td>

                <td>I'm your second cell.</td>

                <td>I'm your third cell.</td>

                <td>I'm your fourth cell.</td>

As you will see, the cells are not placed underneath each other, rather they are automatically aligned with each other on the same row. Each <td> element creates a single cell and together they make up the first row. Every cell we add makes the row grow longer.

To stop this row from growing and start placing subsequent cells on a second row, we need to use the <tr> element ('tr' stands for 'table row'). Let's investigate this now.

Place the four cells you've already created inside <tr> tags, like so:

<tr>
 <td>Hi, I'm your first cell.</td>

                        <td>I'm your second cell.</td>

                        <td>I'm your third cell.</td>

                        <td>I'm your fourth cell.</td>
 </tr>

Now you've made one row, have a go at making one or two more — each row needs to be wrapped in an additional element, with each cell contained in a .

This should result in a table that looks something like the following:

Hi, I'm your first cell.

I'm your second cell.

I'm your third cell.

I'm your fourth cell.

Web forms

Web forms are one of the main points of interaction between a user and a web site or application. Forms allow users to enter data, which is generally sent to a web server for processing and storage (see Sending form data later in the module), or used on the client-side to immediately update the interface in some way (for example, add another item to a list, or show or hide a UI feature).

A web form's HTML is made up of one or more form controls (sometimes called widgets), plus some additional elements to help structure the overall form — they are often referred to as HTML forms. The controls can be single or multi-line text fields, dropdown boxes, buttons, checkboxes, or radio buttons, and are mostly created using the <input> element, although there are some other elements to learn about too.

Form controls can also be programmed to enforce specific formats or values to be entered (form validation), and paired with text labels that describe their purpose to both sighted and blind users.

The `<form>` element

All forms start with a <form> element, like this:

<form action="/my-handling-form-page" method="post">

</form>

This element formally defines a form. It's a container element like a <section> or <footer> element, but specifically for containing forms; it also supports some specific attributes to configure the way the form behaves. All of its attributes are optional, but it's standard practice to always set at least the action and method attributes:

The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.

For now, add the above<form> element into your HTML <body>.

The `<label>,<input>,` `and <textarea>` elements

Our contact form is not complex: the data entry portion contains three text fields, each with a corresponding<label>:

The input field for the name is a single-line text field.
The input field for the e-mail is an input of type email: a single-line text field that accepts only e-mail addresses.
The input field for the message is a <textarea>; a multiline text field.

In terms of HTML code we need something like the following to implement these form widgets:


                        <form action="/my-handling-form-page" method="post">

                        <ul>

                        <li>

                        <label for="name"> Name:</label>

                        <input type="text" id="name" name="user_name">

                        </li>

                        <li>

                        <label for="mail">E-mail: </label>

                        <input type="email" id="mail" name="user_email">

                        </li>

                        <li>

                        <label for="msg">Message: </label>

                        <textarea id="msg" name="user_message"> </textarea>

                        </li>

                        </ul>

                        </form>

The `<button>` element

The markup for our form is almost complete; we just need to add a button to allow the user to send, or "submit", their data once they have filled out the form. This is done by using the <button> element; add the following just above the closing <ul> tag:


                            <li class="button">

                            <button type="submit">Send your message   </button>

                            </li>

Inline vs block-level elements

HTML (Hypertext Markup Language) elements historically were categorized as either "block-level" elements or "inline" elements. Inline elements are those which only occupy the space bounded by the tags defining the element, instead of breaking the flow of the content. In this article, we'll examine HTML inline elements and how they differ from block-level elements.

This is most easily demonstrated with a simple example. First, some simple CSS that we'll be using:

.highlight { 

                            background-color:#ee3;

                          }

Inline

Let's look at the following example which demonstrates an inline element:

 <div>The following span is an <span class="highlight">inline element</span>;

                            its background has been colored to display both the beginning and end of 

                            the inline element's influence.</div>

In this example, the <div> block-level element contains some text. Within that text is a <span> element, which is an inline element. Because the <span> element is inline, the paragraph correctly renders as a single, unbroken text flow, like this:

The following span is an inline element; its background has been colored to display both the beginning and end of the inline element's influence.

Block-level

Now let's change that <span> into a block-level element, such as <p>:

 <div>The following p is a <p class="highlight">block-level element</p>;

                            its background has been colored to display both the beginning and end of 

                            the block-level element's influence.</div>

The following p is a

block-level element;

its background has been colored to display both the beginning and end of the block-level element's influence.

image

Video and audio content

The <form> element

The <label>,<input>, and <textarea> elements

The <button> element

Inline

Block-level

references

The `<form>` element

The `<label>,<input>,` `and <textarea>` elements

The `<button>` element

FCC challenges #4 technical documentation page