Introduction to HTML

Useful Pointers

We will cover the following:

Basic Components of a Web Page

<!DOCTYPE html>
<html>

  <head>
    <title>HTML Programming Example</title>
  </head>
  
  <body>
    <h1>Create My First Website</h1>
    <p>Here are the basic components of an HTML document!</p>
  </body>
  
</html>

Formatting

Headings

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

Bold Characters

<strong>Bold Characters:</strong> Regular Character.

Italic Characters

This HTML course is <em>GREAT</em>!

Line Break

Here is a <br>line break.

Thematic Break

We will cover HTML, and
  <hr>
CSS and Javascript.

Unordered (un-numbered) List

    <ul>
      <li>Unordered Item 1</li>
      <li>Unordered Item 2</li>
      <li>Unordered Item 3</li>
    </ul>

Ordered (numbered) List

    <ol>
      <li>Ordered Item 1</li>
      <li>Ordered Item 2</li>
      <li>Ordered Item 3</li>
    </ol>

Attributes

<abbr title="Hypertext Markup Language">HTML</abbr>

You can add more than one attribute to a given element.

<a href="https://www.github.com/pytrain" title="Great introduction to web programming!">HTML Tutorial</a>

List of attributes:
title:* Used to display a “tooltip” for your elements.
href: Specifies the location of the web page that we’re linking to
class: Used with Cascading Style Sheets (CSS) to apply the styles from a given class.
style: Used with CSS to apply styles directly to the element (i.e. inline styles).

Here is an example of link:  <a href="https://www.github.com/pytrain" target="_blank"> HTML Tutorial </a>.  You can try out!

Absolute URLS

This refers to a URL where the full path is provided

<a href="https://www.github.com/pytrain/web_prog"> Absolute URLS.</a>

Relative URLS

This refers to a URL where the path, relative to the current location, is provided.

<a href="web_prog/">Relative URLS.</a>

Root Relative URLS

This refers to a URL where the path, relative to the domain’s root, is provided.

<a href="/pytrain/web_prog/">Root Relative URLS.</a>

Use to nominate whether to open the URL in a new window or the current window.

Target Type Description
_blank Opens the URL in a new browser window.
_self Loads the URL in the current browser window.
_parent Loads the URL into the parent frame (still within the current browser window). This is only applicable when using frames.
_top Loads the URL in the current browser window, but cancelling out any frames. Therefore, if frames were being used, they aren’t any longer. 
Here is an example of link:  <a href="https://www.github.com/pytrain" target="_blank"> HTML Tutorial </a>.  You can try out!

<h4 id="jump_link">Sample Jump Link</h4>

<a href="#jump_link">Jump to Sample Jump Link</a>

<a href="mailto:Jules_Kouatchou@example.com">Email Jules Kouatchou</a>

<a href="mailto:Jules_Kouatchou@example.com?subject=Question&body=Hey there">Email Jules Kouatchou</a>

Images

Attributes Description
src Required attribute. This is the path (absolute or relative) to the image.
width Optional attribute that specifies the width to display the image.
height Optional attribute that specifies the height to display the image.
alt Alternate text that specifies text to be used in case the browser/user agent can’t render the image.

Comments

You write comments like this:

<!-- Write your comment here -->

Tables

The basic table elements are:

<table>
    <tr>
        <th>Table Header 01</th>
        <th>Table Header 02</th>
        <th>Table Header 03</th>
    </tr>
    <tr>
        <td>Cell 11</td>
        <td>Cell 12</td>
        <td>Cell 13</td>
    </tr>
    <tr>
        <td>Cell 21</td>
        <td>Cell 22</td>
        <td>Cell 23</td>
    </tr>
</table>

Meta Tags

You can add metadata to your web pages by placing <meta> tags between the <head> </head> tags.

Attribute Description
name Metadata name. The name specifies what aspect of metadata is being set.
content Specifies the property’s value.
charset Specifies a character encoding declaration.
http-equiv Used for http response message headers. For example http-equiv can be used to refresh the page or to set a cookie. Values include content-type, expires, refresh and set-cookie. 
<!-- Keyword: -->
<meta name="keywords" content="HTML, meta tags, metadata">

<!-- Description: -->
<meta name="description" content="Contains info about meta tags">

<!-- Author: -->
<meta name="author" content="Jules Kouatchou">

<!-- Refresh the page every 15 seconds: -->
<meta http-equiv="refresh" content="15">

Forms

A form is defined using the <form> </form> tags

<form>
...
(form elements go here)
...
</form>

The <input> Tag

Text

<form>
    First name: <input type="text" name="firstname">
    Last name: <input type="text" name="lastname">
</form>

Radio Buttons

<form>
    <input type="radio" name="course" value="html"> HTML
    <input type="radio" name="course" value="python"> Python
</form>

Checkboxes

I am familiar with: HTML CSS Javascript PHP 
### Submit
- The submit button allows the user to actually submit the form.

```html
<form action="/html/tags/html_form_tag_action.cfm">
  I am familiar with:
    <input type="checkbox" name="technology" value="HTML"> HTML
    <input type="checkbox" name="technology" value="CSS"> CSS
    <input type="checkbox" name="technology" value="Javascript"> Javascript
    <input type="checkbox" name="technology" value="PHP"> PHP
    <input type="submit">
</form>

Select List

<form>
    <select>
        <option value="hampton">Hampton</option>
        <option value="lanham">Lanham</option>
        <option value="greenbelt">Greenbelt</option>
        <option value="richmond">Richmond</option>
    </select>
</form>

Textarea

<form>
    <textarea maxlength="100" rows="5" cols="30">Enter comments here.</textarea>
</form>

Form Action

<form action="/html/tags/html_form_tag_action.cfm" method="get">
    First name: <input type="text" name="first_name" value="" maxlength="100">
    Last name: <input type="text" name="last_name" value="" maxlength="100">
    <input type="submit" value="Submit">
</form>