HTML

Overview and aims

  • This lecture will explain the basic of how HTML works and how to create Web pages in HTML
  • By the end of the lecture you will be able to:
    • Understand the basic structure of an HTML page
    • Create a simple web page with HTML
    • Do basic text formatting
    • Embed images in a web page
    • Create hyperlinks

HTML

  • HTML is the fundamental language of the web
  • Almost all web content ends up as html
  • Content management systems store cotent as html
  • Scripts generate html

HTML

  • There are lots of software tools for creating HTML pages
  • Professional tools like Dreamweaver
  • User friendly tools like iWeb on a Mac
  • Microsoft Word can save to web pages
  • Google pages and similar sites allow you to quickly set up a page
  • Content management systems allow you create web pages within a defined structure

HTML

  • But if you really want to work with the web, you still need to know the basics of html, so today we will edit it by hand
  • To get under the hood of a CMS you need to be able to directly edit the html some times
    • Change the details of how something is displayed
    • Embed media and other content
    • Edit themes and styles to customise the look of your site (next week)

HTML

  • We will look at HTML in two ways
  • HTML files
    • Create a file in notepad called test.html (or whatever)
    • write some text and save
    • open it in a browser
  • In wordpress
    • Go to your wordpress site
    • Open up a post or page
    • In the top right of the editor change from the Visual tab to the HTML tab

Overview and aims

  • This lecture will explain the basic of how HTML works and how to create Web pages in HTML
  • By the end of the lecture you will be able to:
    • Understand the basic structure of an HTML page
    • Create a simple web page with HTML
    • Do basic text formatting
    • Embed images in a web page
    • Create hyperlinks

HTML

  • HTML consist of two things
  • Text
  • Tags
    • Text in between angle brackets:
      • This is a <tag>
    • They contol how everything on a web page works
      • formatting text
      • embedding images
      • links
      • and much much more…
  • Lets try creating the simplest html page possible

Regions

  • Tags define regions of a web page
  • A region is started with a start tag that looks like this: <tag>
  • and ended with an end tag that looks like this: </tag>
  • Everything between the start and end tags is effected by the tag
  • For example the <i> is the italics tag
  • everything between <i> and </i> is in italics

Regions

  • There are some special regions which all web pages should have
  • The <html> defines your page
  • Everything in your page should be within an <html> region
  • It tell your browser that what it is looking at is a standard html document

head and body

  • There are two other regions that make up your page, within the <html> tag
  • <head> and <body>
  • The head contains a lot of tags that give information about your page, but is not displayed as part of it
    • For now the only tag we will use is <title>
    • The page title that appears in the title bar of your browser
  • The body contains all of the visible content of the page, everything else we’ll talk about today goes in the body

Text formatting

  • There are a lot of tags that control how text is layed out in HTML
    • Paragraph and section breaks
    • Headings
    • Text Style

Paragraphs

  • HTML ignores carriage returns in the text you type in
    • It all just runs together in one paragraph
    • Seems strange but there are good reasons
    • How you layout source code is different from how a document should be layed out
  • To define a paragraph you use the <p> tag

Headings

  • You want headings and tiles to stand out
  • There are several tags for headings
    • <h1> to <h6>
    • <h1> is the biggest
    • <h6> the smallest

Text style

  • There are two types of tag that control text style
  • Content-based style tags
    • These tell the browser something about the meaning of some text
  • Physical style tags
    • These control the physical appearance of text
  • For example
    • The <em> tag is a content based tag which says that some text should be empahsised but now how
    • The <i> tag makes the text itallic

Text style

  • Content-based style tags
    • <em> emphasise
    • <code> used for computer source code (I’m using it a lot in this presentation)
  • Physical style tags
    • <i> itallics
    • <b> bold
    • <u> underlined
    • <big> <small> text size
    • <blink> evil

Text style

  • Physical styles give you more control
  • but content based styles are prefered because they are more flexible
  • style can be changed independent of content using CSS
    • Cascading Style Sheets
    • I will talk about them in later weeks

Attributes

  • Some tags have other information attached to them
  • Not just their name
  • For example the body tag has attributes that control the whole document
    • You can change the background colour of the web page
      • <body bgcolor = "red">
      • Note the American spelling
    • And the text colour
      • <body bgcolor = "red" text = "blue">

Colours

  • Colours can be represented by their names, as above
  • But for more control you can use RGB colours
  • Represented as 3 numbers in the form #RRGGBB

Colours

  • The numbers are hexidecimal
    • Base 16
    • 0-9 are the same as decimal
    • Higher digits are represented as letters
    • 10 is A, 11 is B, up to 15 is F
      • #10 = 16
      • #FF = 255 (maximum colour value)
      • #8C = 140
  • <body bgcolor = "#FF000" text = "#008C8C">

Images

  • Images are added using the <img> tag
  • It has lots of attributes but the most important is src
    • <img src = "pics/BenPimlott.jpg">
  • It tells the browser there the image file you want to use is, in one of three ways
    • A file in the same directory as the web page
    • A path relative to the directory that the web page is in
    • An external URL

Links

  • Links are created with the <a> (anchor) tag
  • Everything between <a> and </a> is the text of the link
  • The page you link to is put in the href attribute
    • <a href = "http://doc.gold.ac.uk/~mas02mg">My Web Page</a>
  • You give a URL
    • Uniform Resource Locator
    • The standard address for anything on the web
    • i.e. the web address you type into your browser

Overview and aims

  • This lecture will explain the basic of how HTML works and how to create Web pages in HTML
  • By the end of the lecture you will be able to:
    • Understand the basic structure of an HTML page
    • Create a simple web page with HTML
    • Do basic text formatting
    • Embed images in a web page
    • Create hyperlinks

Using HTML

  • What do you do with HTML?
  • Create Web pages by hand
  • Edit exiting web pages
  • Edit wordpress themes
  • Use in more advanced web programming (e.g. php)

Using HTML

  • Create Web pages by hand
  • You can create a web page by just typing in HTML into notepad
  • How it was done back in the day
  • No one does this any more

Using HTML

  • Edit exiting web pages
  • You can get more exact control over pages that have been generated by other tools
  • e.g. The wordpress visual editor creates html
  • You can switch to html view to have complete control over the content
  • For example embedding content
    • Sites like google maps and YouTube have links for embedding their content in your own site
    • You just need to copy the link and paste it into your own html page

Using HTML

  • Edit wordpress themes
    • More next week
  • Use in more advanced web programming (e.g. php)
    • More in other courses

Overview and aims

  • This lecture will explain the basic of how HTML works and how to create Web pages in HTML
  • By the end of the lecture you will be able to:
    • Understand the basic structure of an HTML page
    • Create a simple web page with HTML
    • Do basic text formatting
    • Embed images in a web page
    • Create hyperlinks

Where from here?

  • This was a very quick overview of HTML
  • You should know the basics but there is a lot more:
    • Forms for user interfaces
    • Tables and frames for layout
    • Stylesheets
    • scripting
  • Go and find out more for yourself
    • Google is your friend
    • Lots of good books (the library is your friend)
PDF Printer    Send article as PDF to