HTML Basics

HTML Basics

HyperText Markup Language (HTML) is the standard markup language for creating web pages and web applications. With Cascading Style Sheets (CSS), and JavaScript

What is an HTML page?

  • HTML files are written in plain text (.txt) but use the extension .html (or .htm)
  • The file needs to begin with a Doctype statement which identifies the version of markup language used.
  • The rest of the file is wrapped in a root-level element, which contains information about the file and the contents of the web page itself.

What are HTML elements?

  • HTML elements are the building blocks of html. They consist of content .

Attributes and values

  • Attributes (attribute name=”value”) provide additional information about an element.
  • Standard attributes – core (class, id, style, title), language, and keyboard (accesskey, tabindex)
  • Required and optional attributes – e.g. for the tag: alt & src are required, height & width are optional.
  • Event attributes – these are to trigger actions (initiate scripts to run) e.g. ‘onclick’, ‘mouseover’

Styling content

  • Styles (and hence stylesheets) are used to modify the visual presentation of HTML elements. The current
    version of cascading stylesheet specifications is CSS2, but CSS3 is in development.
  • Styles will be applied first using any inline styles (at the element level), then internal styles (page level), then
    as specified in any external stylesheet/s (link, @import), and lastly using the browser’s default interpretation.
  • If it cannot find a style defined it will cascade to the next source, hence the term cascading stylesheet (CSS).
  • The format for styles is: a selector & declaration/s {property: value;}, e.g. li {font-size: 12px; font-color: red;}
  • Styles can often be ‘inherited’ by the ‘child’ element of a ‘parent’ element – this is something you will find out
    more about when you begin to use styles, as it can affect why styles sometimes don’t work as expected.

Web page structure and layout
When you begin marking up your page you first need to consider the structure of the document and semantics
(meaning) of the information, and then later consider its visual presentation. There are a number of tools for
creating/editing HTML files, from simple programs like Notepad (or Textedit for MAC), MS Word, web-based editors (as found in MyUni or the in-house TMS), up to WYSIWYG editors like Adobe Dreamweaver.
Page/document structure

  • HTML pages contain both unseen(metadata, info about the file or for the file) and visible
    (the actual page content) data.
  • Pages will generally have similar semantic features – header (& hgroup), footer, nav (primary navigation),
    content (div, article, section), and aside.Content elements/types
  • The main block level elements include: headings, paragraph, blockquote, lists, tables, forms, address & hr.
  • For detailed information on controlling the layout of these elements look up ‘CSS visual formatting model’.
    Making connections – hypertext links
  • Anchor tags are used to link to other information or resources internally via ‘name’ or ‘id’
    attributes and externally to a specified URL. Use the ‘title’ attribute to provide more information about the link.
  • A link can also initiate an email by using the ‘mailto:’ format, e.g. href=””

Modifying text and appearance
Once the overall structure of your document is in place you can then look at how you can enhance it – semantically
and visually. Stylesheets and inline styles can be used to modify the appearance of individual or groups of elements.
Semantic html tags for text

  • The most common inline elements include: b, strong, i, em, small, sup, sub, pre, q, cite, abbr, br.
    Special entities and symbols
  • For reserved and special characters you need to use the ‘escape’ character (&) and end with a semicolon (;).
    e.g. non-breaking space ( ) © (© or ©) small e, acute accent (é or é)
    sum ∑ (∑ or ∑) greater or equal ≥ (≥ or ≥)
    Changing text with styles
  • CSS properties for modifying elements include such things as: font, color, border, background, textdecoration,
    list-style, text-align, padding.
  • font-size – x-large, pt, px, em, % font-family – name, “new name”, generic
  • You can use the tag to apply block-type styles while having it still display inline.
  • By using CSS selectors you can change multiple instances over a document, e.g. tag, class, id, name, div/id.
  • A key advantage of using stylesheets, apart from making changes to styling easier, is the ability to maintain consistency of appearance across a whole web site.

Understanding the box model

  • The box model describes the following properties for an enclosing ‘box’ on which styles can then be applied:
    box (content, e.g. text – various properties apply), padding, border, margin. When setting styles for these
    elements they are applied in the order – top, right, bottom, left.
  • The layout behaviour of block elements can be modified using CSS properties such as: float, clear, display,
    position and z-index.