HTML Basics

Posted on   |   In

#HTML

#Introduction

####markup

markup: a language with specific syntax that instructs a Web browser how to display a page

###Element
Some tags are self-closing and do not contain any content.

###Tags

###Attributes

Attributes usually consist of 2 parts:

  • An attribute name
  • An attribute value

A few attributes can only have one value. They are Boolean attributes and may be shortened by only specifying the attribute name or leaving the attribute value empty. Thus, the following 3 examples have the same meaning:

1
2
3
4
5
<input required="required">
<input required="">
<input required>

###Named character references
Four common named character references:

  • > denotes the greater-than sign (>)
  • < denotes the less-than sign (<)
  • & denotes the ampersand (&)
  • " denotes double quote (")

###Comments and doctype
Comments:

1
<!-- This is comment text -->

Doctype:

Besides tags, text content, and entities, an HTML document must contain a doctype declaration as the first line. The doctype declaration is not an HTML tag, but rather tells the browser which version of HTML the page is written in.

In HTML5, there is only one declaration and is written like this:

1
<!DOCTYPE html>

There were three different doctype declarations in HTML 4.01: strict, transitional, and frameset.

The strict DTD contained all HTML elements and attributes, but NOT presentational or deprecated elements (like font). Framesets were not allowed.

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

The transitional DTD contained all HTML elements and attributes, INCLUDING presentational and deprecated elements (like font). Framesets were not allowed.

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

The frameset DTD allowed frameset content and otherwise was the same as HTML 4.01 Transitional.

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

Forms in HTML

#Introduction to the DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents.

###DOM and JavaScript

API (web or XML page) = DOM + JS (scripting language)

###Core Interfaces in the DOM
The following is a brief list of common APIs in web and XML page scripting using the DOM:

1
2
3
4
5
6
7
8
9
10
11
12
13
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute
element.getAttribute
element.addEventListener
window.content
window.onload
window.dump
window.scrollTo

#Events and the DOM