1-02: HTML Markup Introduction
23
HTML – Markup Introduction Colin Gourlay & Kevin Vanderbeken
-
date post
11-Sep-2014 -
Category
Documents
-
view
987 -
download
0
description
Transcript of 1-02: HTML Markup Introduction
HTML – Markup Introduction
Colin Gourlay & Kevin Vanderbeken
HTML=
(the content layer)
separate your content, presentation & behaviour
Last week we said...
It eases our development, with multiple people, and allows all our technologies to work nicely together.
Today:Basic HTML Concepts:
Document overview - Meet HTML!HTML Syntax - tags, html, xhtml attributesBlock & Inline - <DIV>'s and <SPAN>'sSpecial characters.
What is HTML...Hypertext Markup Language• The building block of elements in a web
document.• A language designed to allow us to put many
kinds of things on the web.• Has a few variations through different standards:
HTML and XHTML – We’re doing XHTML, it’s stricter.
• Not a programming language! Markup languages describe parts (in a document).
• It’s the bits of a document in a language a browser can understand.
The document...
‘Document’ is a term that describes the page and all it’s associated bits
and pieces.
1. Browser goes to http://finda.com.au2. Gets back an XHTML formatted (“marked-up”) document.
Meet XHTML...<html>
<head><title> This is my title. </title>
</head><body>
<h1>Hello World!</h1><p>I am a very basic page. Use your back button to get out of here.</p>
</body></html>
What are all these brackets?!Part of the HTML Syntax:
The bracketed tags are elements.
The HTML Element• Required to be lowercase in XHTML.• XHTML defines dozens of text elements that make
up documents:– Headings– Paragraphs– Emphasised text– Links– Etc.
• Used according to it’s semantic markup: type of tag used provides information to the relevancy or type of content that it’s holding. Eg. Headings <h1>
The HTML Element (cont..)
• Elements don't always have content!• Empty tags are closed by adding a trailing slash
preceded by a space before the closing bracket:<img />, <br />, and <hr />
• There are HTML elements that add information about the document (such as its <title>).
• Some add media such as images, videos, Flash movies, or applets to the page.
Document Requirements• The base structure of the document is required,
and some fields like <title> are a required element of an XHTML page.
• In XHTML, all elements, including empty elements, must be terminated (closed). They all need their </blah> if in a pair... or <blah /> if they are an empty element.
Structure of an XHTML document• We saw it before – essentially the document is a
hierarchy.
• Everything is inside the <html> </html> tags.
• In head: define properties of the document and linkages to css and js.
• In body: All the content we want the page to display.
Attributes: Making tags more useful!
• “Attributes are instructions that clarify or modify an element.”
<element attribute-name="value">Content</element>
or for empty elements (less commonly):<element attribute-name="value" />
• In this way we can tell the browser things like, “This image element has it’s actual image file stored here.”
Block and Inline elements:
• It’s all about boxes around things!• Block level elements: Treated as boxes stacked up
in the page top to bottom. <div>, <p>, etc.• Inline elements: do not start a new line, but stay
in the flow of content. <span>, <em>, <a>, etc.
Block and Inline elements:
• It’s all about boxes around things!• Block level elements: Treated as boxes stacked up
in the page top to bottom. <div>, <p>, etc.• Inline elements: do not start a new line, but stay
in the flow of content. <span>, <em>, <a>, etc.
• Whether an element is block or inline restricts what other elements it may contain and where it will end up being positioned.
Special Characters:
• Some text characters need to be written using a html character substitute because they would not be understood by html or they might be misinterpreted as markup.
• © , & and < are examples of this!• You can represent it by its numeric or named character
reference for the web.• Two options: by an assigned numeric value (numeric entity)
or using a predefined abbreviated name for the character (called a named entity).
• All character references begin with a “&” and end with an “;”.
how’s our speed?
next week...
![1 Hyper Text Markup Language (HTML) UNIT- 02 Hyper Text Markup Language (HTML) UNIT-02/LECTURE-01 Introduction to Hyper Text Markup Language (HTML) About HTML: [RGPV/Dec 2013(4)] So](https://static.fdocuments.in/doc/165x107/5aae4bc17f8b9a25088c15fa/1-hyper-text-markup-language-html-unit-02-hyper-text-markup-language-html-unit-02lecture-01.jpg)
