BWD: #1 HTML

Online courses in web design, including some training in general design and technology, as well as programming languages often used in web design. None of these free courses have credit value, nor d

BWD: #1 HTML

Online courses in web design, including some training in general design and technology, as well as programming languages often used in web design.

None of these free courses have credit value, nor do they involve assessment or grades. Some courses have additional software requirements, but most of these software programs are free and available through links on course websites.


1.1 Introduction
  • What is HTML?
  • HTML Tags
  • !DOCTYPE Declarations
1.2 HTML Basics
  • Documents
  • Headings
  • Paragraphs
  • Links
  • Images
  • Comments
1.3 Elements
  • Nested Elements
  • Empty Elements
  • More Elements
1.4 Attributes
  • Href Attribute
  • Alt Attribute
  • Attributes list
1.5 Blocks
  • Block-level Elements
  • Inline Elements
1.6 The Class Attribute
  • Class
1.7 HTML Head
  • Tittle Element
  • Style Element
  • Link Element
  • Meta Element
1.8 HTML Forms
  • Form Elements & Types
  • Form Attributes
  • Send Email

#1 HTML

With HTML you can create your own Web site.

Basic HTML Example

<!DOCTYPE html>  
<html>  
<head>  
  <title>Page Title</title>
</head>

<body>  
  <h1>This is a Heading</h1>
  <p>This is a paragraph.</p>
</body>  
</html>  

1.1 Introduction

What is HTML?

HTML is a markup language for describing web documents (web pages). Web pages can be created and modified by using professional HTML editors.

  • HTML stands for Hyper Text Markup Language
  • A markup language is a set of markup tags
  • HTML documents are described by HTML tags
  • Each HTML tag describes different document content

HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets:

<tagname>content goes here...</tagname>  
  • HTML tags normally come in pairs like <p> and </p>
  • The first tag in a pair is the start tag, the second tag is the end tag
  • The end tag is written like the start tag, but with a forward slash inserted before the tag name

!DOCTYPE Declaration

The <!DOCTYPE> declaration represents the document type, and helps the browser to display a web page correctly. It must only appear once, at the top of the page (before any HTML tags).

There are different document types. To display a web page correctly, the browser must know both type and version. The doctype declaration is not case sensitive. All cases are acceptable: <!DOCTYPE html>


1.2 HTML Basics

Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.
The HTML document itself begins with <html> and ends with </html>.
The visible part of the HTML document is between <body> and </body>.

<!DOCTYPE html>  
<html>  
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>  
</html>  

Headings

HTML headings are defined with the <h1> to <h6> tags. <h1> defines the most important heading. <h6> defines the least important heading:

<h1>This is heading 1</h1>  
<h2>This is heading 2</h2>  
<h3>This is heading 3</h3>  

Paragraphs

HTML paragraphs are defined with the <p> tag:

<p>This is a paragraph.</p>  
<p>This is another paragraph.</p>  

HTML links are defined with the <a> tag:

<a href="http://www.w3schools.com">This is a link</a>  

Images

HTML images are defined with the <img> tag.
The source file (src), alternative text (alt), and size (width and height) are provided as attributes:

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">  

Comments

Comment tags are used to insert comments in the HTML source code. With comments you can place notifications and reminders in your HTML. You can add comments to your HTML source by using the following syntax:

<!-- This is a comment -->

<p>This is a paragraph.</p>

<!-- Remember to add more information here -->  

1.3 Elements

Nested Elements

HTML elements can be nested (elements can contain elements). All HTML documents consist of nested HTML elements.

<!DOCTYPE html>  
<html>  
<body>

  <h1>My First Heading</h1>
  <p>My first paragraph.</p>

</body>  
</html>  

The <html> element defines the whole document. It has a start tag <html> and an end tag </html>. The element content is another HTML element (the <body> element).

The <body> element defines the document body. It has a start tag <body> and an end tag </body>. The element content is two other HTML elements (<h1> and <p>).

The <h1> element defines a heading. It has a start tag <h1> and an end tag </h1>. The element content is: My First Heading.


Empt Elements

HTML elements with no content are called empty elements.

<br> is an empty element without a closing tag (the <br> tag defines a line break). Empty elements can be "closed" in the opening tag like this: <br/>.

HTML5 does not require empty elements to be closed. But if you want stricter validation, or if you need to make your document readable by XML parsers, you must close all HTML elements properly.


Use Lowercase Tags

HTML tags are not case sensitive: <P> means the same as <p>. The HTML5 standard does not require lowercase tags, but W3C recommends lowercase in HTML, and demands lowercase for stricter document types like XHTML.


View More Elements

1.4 Attributes

Attributes provide additional information about HTML elements.

  • All HTML elements can have attributes
  • Attributes provide additional information about an element
  • Attributes are always specified in the start tag
  • Attributes usually come in name/value pairs like: name="value"
The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

<a href="http://www.w3schools.com">This is a link</a>  

Size Attributes

HTML images are defined with the <img> tag. The filename of the source (src), and the size of the image (width and height) are all provided as attributes:

<img src="w3schools.jpg" width="104" height="142">  

The image size is specified in pixels: width="104" means 104 screen pixels wide.


The alt Attribute

The alt attribute specifies an alternative text to be used, when an image cannot be displayed. The value of the attribute can be read by screen readers. This way, someone "listening" to the webpage, e.g. a blind person, can "hear" the element.

<img src="w3schools.jpg" alt="W3Schools.com" width="104" height="142">  

HTML Attributes

Below is an alphabetical list of some attributes often used in HTML:

  • alt Specifies an alternate text when the original element fails to display.
  • class Specifies one or more classnames for an element (refers to a class in a style sheet).
  • id Specifies a unique id for an element.
  • height Specifies the height of the element.
  • hidden Specifies that an element is not yet, or is no longer, relevant.
  • href Specifies the URL of the page the link goes to.
  • placeholder Specifies a short hint that describes the expected value of the element.
  • src Specifies the URL of the media file.
  • style Specifies an inline CSS style for an element.
  • target Specifies the target for where to open the linked document or where to submit the form.
  • title Specifies extra information about an element.
  • type Specifies extra information about an element.
  • value _Specifies the value of the element.+
  • width Specifies the width of the element.

A complete list of all attributes for each HTML element, is listed here.


1.5 Blocks

Block-level Elements

A block-level element always starts on a new line and takes up the full width available (stretches out to the left and right as far as it can).

The <div> element is a block-level element.

Examples of block-level elements:

<div>  
<h1> - <h6>  
<p>  
<form>  

Inline Elements

An inline element does not start on a new line and only takes up as much width as necessary.

This is an inline <span> element inside a paragraph.

Examples of inline elements:

<span>  
<a>  
<img>  

1.6 The class Attribute

The HTML class attribute makes it possible to define equal styles for elements with the same class name.

<!DOCTYPE html>

<html>  
<head>  
  <style>
    div.cities {
      background-color: black;
      color: white;
      margin: 20px 0 20px 0;
      padding: 20px;
    } 
  </style>
</head>

<body>  
  <div class="cities">
    <h2>London</h2>
    <p>London is the capital of England. It is the most populous city in the
    United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
  </div>

  <div class="cities">
    <h2>Paris</h2>
    <p>Paris is the capital and most populous city of France.</p>
  </div>

  <div class="cities">
    <h2>Tokyo</h2>
    <p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area,
    and the most populous metropolitan area in the world.</p>
  </div>
</body>

</html>  

1.7 HTML Head

The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, links, scripts, and other meta information. The following tags describe metadata: <title>, <style>, <link> and <meta>.


Title Element

The <title> element defines the title of the document, and is required in all HTML/XHTML documents.

  • Defines a title in the browser tab
  • Provides a title for the page when it is added to favorites
  • Displays a title for the page in search engine results
<!DOCTYPE html>  
<html>

<head>  
  <title>Page Title</title>
</head>

<body>  
  ...
</body>

</html>  

Style Element

The <style> element is used to define style information for a single HTML page:

<style>  
  body {background-color: powderblue;}
  h1 {color: red;}
  p {color: blue;}
</style>  

Link Element

The <link> element is used to link to external style sheets:

<link rel="stylesheet" href="mystyle.css">  

Meta Element

The <meta> element is used to specify which character set is used, page description, keywords, author, and other metadata. Metadata is used by browsers (how to display content), by search engines (keywords), and other web services.

<meta charset="UTF-8">  
<meta name="description" content="Free Web tutorials">  
<meta name="keywords" content="HTML,CSS,XML,JavaScript">  
<meta name="author" content="Hege Refsnes">  

1.8 HTML Forms

The HTML <form> element defines a form that is used to collect user input. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.


Form Elements & Types

The <input> element is the most important form element, it can be displayed in several ways, depending on the type attribute.

  • <input type="text"> Defines a one-line text input field
  • <input type="radio"> Defines a radio button (for selecting one of many choices)
  • <input type="submit"> Defines a submit button (for submitting the form)
<form action="action_page.php">  
  First name:<br>
  <input type="text" name="firstname"><br>
  Last name:<br>
  <input type="text" name="lastname">
  <hr>

  <input type="radio" name="gender" value="male" checked> Male<br>
  <input type="radio" name="gender" value="female"> Female<br>
  <input type="radio" name="gender" value="other"> Other
  <hr>

  <input type="submit" value="Submit">
</form>  

Form Attributes
Action

The action attribute defines the action to be performed when the form is submitted. Normally, the form data is sent to a web page on the server when the user clicks on the submit button.

In the example above, the form data is sent to a page on the server called "action_page.php". This page contains a server-side script that handles the form data. If the action attribute is omitted, the action is set to the current page.

<form action="action_page.php">  
Method

The method attribute specifies the HTTP method (GET or POST) to be used when submitting the form data. The default method when submitting form data is GET. However, when GET is used, the submitted form data will be visible in the page address field.

http://www.site.com/action_page.php?firstname=Mickey&lastname=Mouse  

GET must NOT be used when sending sensitive information! GET is best suited for short, non-sensitive, amounts of data, because it has size limitations too.

Always use POST if the form data contains sensitive or personal information. The POST method does not display the submitted form data in the page address field. POST has no size limitations, and can be used to send large amounts of data.

<form action="action_page.php" method="post">  
Name

Each input field must have a name attribute to be submitted. If the name attribute is omitted, the data of that input field will not be sent at all. This example will only submit the "Last name" input field:

<form action="action_page.php">  
  First name:<br>
  <input type="text" value="Mickey"><br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">

  <input type="submit" value="Submit">
</form>  

Send Mail

Here's how to send e-mail from a form:

<!DOCTYPE html>  
<html>  
<body>

  <h2>Send e-mail to hi@guillecura.co:</h2>

  <form action="mailto:hi@guillecura.co" method="post" enctype="text/plain">
  Name:<br>
  <input type="text" name="name"><br>
  E-mail:<br>
  <input type="text" name="mail"><br>
  Comment:<br>
  <input type="text" name="comment" size="50"><br><br>
  <input type="submit" value="Send">
  <input type="reset" value="Reset">
</form>

</body>  
</html>  

w3schools. (1999-2016). HTML5 Tutorial. From w3schools website: w3schools.com/html