1 minute read

HTML

  • A way of marking up text to indicate that some text is different than other text
  • We “tag” portions of the text to communicate meaning

World-Wide-Web Consortium

  • Formed by Tim Berners-Lee of MIT
  • Founded to develop standards around HTML, CSS, XML, etc
  • Insure that the web was based on open standards rather than propriety vendor products - a bit like cat herding

HTML Document

Structure of an HTML Document

<!DOCTYPE html>

meta-data… //Metadata about the page. Page content… //DIsplayable content of the page.

Special file names

  • When a URL points to a directory in your web server, it looks for a file with a special name:
    • index.html, index.htm, index.php, etc.
  • While there is a convention, the “default file” is configurable - so nothing is “sure”
  • Usually index.htm or index.html is a safe bet
  • This only works when viewing through a web server - when viewing from disk, you must view the file.

HTML Tag Basics

  • Tags “mark up” the HTML document.
  • Tags are read and interpreted by the browser - but not shown.
  • A self closing tag does not need a corresponding end tag.
  • One of the key things about HTML is making a set of pages and making “hypertext” links amongst those pages.
  • Links are what make the “web” a “web” - it is a web of interlinked documents.
  • The interlinked nature of the web leads to the “knowledge” the search engines like Google appear to have “intelligence”.
  • <a href=”http://www.google.com/page1.html”>
    • “a” is a short for “anchor” and “href” is short for “hypertext reference”

Cascading Style Sheets

CSS Syntax

  • CSS syntax is very different than HTML
  • CSS is a set of “rules” which in include a “selector” and one or more “properties” and “values” as well as punctuation
    • Selector - Which part of the document does this rule apply to
    • Property - Which aspect of CSS are we changing
    • Value - What are we setting the property to

Using CSS in HTML

Applying CSS to our HTML

  • Inline - right on an HTML tag - using the style= attribute
  • An embedded style sheet in the <head> of the document
  • As external style sheet in a separate file

Span and div tag

  • Span - New “inline” tag with no styling
  • Div - New unsettled block tag with no padding, margin, background-colour or anything else.

Categories:

Updated:

You may also enjoy