HTML - basic tags - How to learn more

What is HTML? HyperText Markup Language HTML5: – Recommended by the W3C

HTML “ HTML is the lingua franca for publishing hypertext on the World Wide Web ” Structure and format of documents defined by. Enables connections between documents through hyperlinks

HTML Earlier version of HTML (HTML 4.1) offered : – text – multimedia – hyperlink features – scripting languages – style sheets

HTML 4 Strengths: Standard (ISO 8879) Text-based => interoperability Issues: Consequences of popularity and flexibility (sloppy syntax) Explosion of device types (Mobile phones, PDAs, appliances, etc)

HTML – conceptually Attractive proposition: Basic set of HTML tags Extension framework

HTML5 – In practice Today ’ s standard for web development Backwards compatible with earlier versions Good browser compatibility Extensions developed for non-standard devices Makes programming for accessibility easier Allows separation of content and style (e.g.for mobile delivery) Easy to learn – Countless resources available – –

Historical summary SGML XML HTML XHTML

Basic example Hello World!

Hello World

Another basic example

Hello world 2 Some formatted text This is a paragraph. Text can be formatted easily: italic, Bold, underlined, italic and underlined (note that underlining isn't a good stylistic choice on the web, guess why?). A bullet list Apples Pears Bananas Oranges Author: Grégory Leplâtre

Hello world 2 – (1) (…) Some formatted text (…)

Hello world 2 – (2) (…) This is a paragraph. Text can be formatted easily: italic, Bold, underlined, italic and underlined (note that underlining isn't a good stylistic choice on the web, guess why?). (…)

Hello world 2 – (3) (…) Apples Pears Bananas Oranges (…)

(…) Author: Grégory Leplâtre (…)

What we have learnt Links: – (not yet) Structural tags: –,,,,, Formatting tags: –,, Graphical elements: – Special characters: – é â

HTML components 1.A DOCTYPE: 2. The tag (must be the first tag of the document, after 1) 3. and tags. 4.The head must contain a character set definition and a.

5. tag The title appears at the top of the browser. Can be used by search engines. Literally: information about (the page). A typical page will contain several of these tags. Works with name/content pairs: specifies the style sheet to be used (more on this in the CSS lecture)

Title My first web page

Character set definition

5. tag The content of the page must be included within the tag.

Proper HTML Hello World!

HTML5 Hello World! Hello World! page Hello World!

HTML tags

Headings,, … (h1 largest font, h6, smallest font) Example: Some Basic Examples Example 1: formatting

Spacing – non-breaking space: forces the browser to display a white space. starts a new paragraph (which must be concluded with a ). - line break: starts a new line.

Text formatting Bold: or Italics: or Underline: Preformatted text:

Lists There are three types of lists: Ordered lists – numbered Unordered lists – bullet Definition lists

Ordered lists Apples Bananas Oranges Pears

Unordered lists Apples Bananas Oranges Pears

Nested lists 1.Starters Sea food chowder Soupe du jour Goats cheese salad 2.Main courses Haggis Sea bass Risotto 3.Sweets – Chocolate mousse – Carrot cake – Apple tart

Tables 2-dimensional representation of data: tag to create a table, contains … tag for each line, which contains … tag for each column In addition: table headings Formatting: Tag attributes

Table example

Tables – Important attributes border: border width (0 used frequently) cellspacing: space between cells cellpadding: space between the cell walls and content width: width of the table (% or pixels)

Links One tag, four types of links: 1.Link to a location on the same page 2.Link to a document relative to the current document 3.Absolute link to a document 4. link General format: Text to display The above HTML code will look like: Text to display

1. Link within document HTML codeOutcome of HTML in your browser ……. 1. Introduction 2. Discussion …… Introduction ……. Discussion ……. 1. Introduction 2. Discussion Introduction …… Discussion

1. Link within document Two steps: 1. defines a hypertext link that specifies where you want to go within a document Go to part 1 2. defines the place where you will jump to with a document when you click on the above link Part 1 is here The # sign indicates a location within a document and must be included.

2. Relative link Link to a document on the same server: link text Example: teaching main page

3. Absolute link Link to a document on the same server: link text Example: teaching main page

Images Images are added using the tag: Pictures can be used as links:

Audio and Video? HTML doesn ’ t support these. Links to audio or video files are possible. Ways to embed media in web pages involves plugins … For multimedia students next year …

Final Exercise My Web Page My name is: Xxxxxx Xxxxxxx My characteristics are: Height180 cm Weight65 Kg Age22

Summary eXtensible Learning Process – Simple basic principle (tags) – Expand your tag knowledge (w3schools) Practice – Next practical – At home

Next week Laboratory exercise – HTML Lecture – Styling (CSS+ design issues)