Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
HTML – Markup Introduction<br />Colin Gourlay & Kevin Vanderbeken<br />
HTML<br />=<br />(the content layer)<br />
Last week we said...<br />separate your content, presentation & behaviour <br />It eases our development, with multiple pe...
Today:<br />Basic HTML Concepts:<br />Document overview - Meet HTML!<br />HTML Syntax - tags, html, xhtml attributes<br />...
What is HTML...<br />Hypertext Markup Language<br />The building block of elements in a web document.<br />A language desi...
The document...<br />Browser goes to http://finda.com.au<br />Gets back an XHTML formatted (“marked-up”) document.<br />‘D...
Meet XHTML...<br /><html><br /><head><br /><title> This is my title. </title><br /></head><br />	<body><br /><h1>Hello Wor...
What are all these brackets?!<br />Part of the HTML Syntax:<br />The bracketed tags are elements.<br />
The HTML Element<br />Required to be lowercase in XHTML.<br />XHTML defines dozens of text elements that make up documents...
The HTML Element (cont..)<br />Elements don't always have content!<br />Empty tags are closed by adding a trailing slash p...
Document Requirements<br />The base structure of the document is required, and some fields like <title> are a required ele...
Structure of an XHTML document<br />We saw it before – essentially the document is a hierarchy.<br /><ul><li>Everything is...
In head: define properties of the document and linkages to css and js.
In body: All the content we want the page to display.</li></li></ul><li>Attributes: Making tags more useful!<br />“Attribu...
Block and Inline elements:<br />It’s all about boxes around things!<br />Block level elements: Treated as boxes stacked up...
Block and Inline elements:<br />It’s all about boxes around things!<br />Block level elements: Treated as boxes stacked up...
Special Characters:<br />Some text characters need to be written using a html character substitute because they would not ...
how’s our speed?<br />
email us...<br />kevin.vanderbeken@apn.com.au<br />colin.gourlay@apn.com.au<br />
next week...<br />
CSS INTRO<br />
Upcoming SlideShare
Loading in …5
×

1-02: HTML Markup Introduction

1,089 views

Published on

  • Be the first to comment

1-02: HTML Markup Introduction

  1. 1. HTML – Markup Introduction<br />Colin Gourlay & Kevin Vanderbeken<br />
  2. 2. HTML<br />=<br />(the content layer)<br />
  3. 3. Last week we said...<br />separate your content, presentation & behaviour <br />It eases our development, with multiple people, and allows all our technologies to work nicely together.<br />
  4. 4. Today:<br />Basic HTML Concepts:<br />Document overview - Meet HTML!<br />HTML Syntax - tags, html, xhtml attributes<br />Block & Inline - <DIV>'s and <SPAN>'s<br />Special characters.<br />
  5. 5. What is HTML...<br />Hypertext Markup Language<br />The building block of elements in a web document.<br />A language designed to allow us to put many kinds of things on the web.<br />Has a few variations through different standards: HTML and XHTML – We’re doing XHTML, it’s stricter.<br />Not a programming language! Markup languages describe parts (in a document).<br />It’s the bits of a document in a language a browser can understand.<br />
  6. 6. The document...<br />Browser goes to http://finda.com.au<br />Gets back an XHTML formatted (“marked-up”) document.<br />‘Document’ is a term that describes the page and all it’s associated bits and pieces.<br />
  7. 7. Meet XHTML...<br /><html><br /><head><br /><title> This is my title. </title><br /></head><br /> <body><br /><h1>Hello World!</h1><br /><p>I am a very basic page. <br /> Use your back button to <br /> get out of here.</p><br /></body><br /></html><br />
  8. 8. What are all these brackets?!<br />Part of the HTML Syntax:<br />The bracketed tags are elements.<br />
  9. 9. The HTML Element<br />Required to be lowercase in XHTML.<br />XHTML defines dozens of text elements that make up documents:<br />Headings<br />Paragraphs<br />Emphasised text<br />Links<br />Etc.<br />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><br />
  10. 10. The HTML Element (cont..)<br />Elements don't always have content!<br />Empty tags are closed by adding a trailing slash preceded by a space before the closing bracket:<br /> <img />, <br />, and <hr /><br />There are HTML elements that add information about the document (such as its <title>).<br />Some add media such as images, videos, Flash movies, or applets to the page.<br />
  11. 11. Document Requirements<br />The base structure of the document is required, and some fields like <title> are a required element of an XHTML page.<br />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.<br />
  12. 12. Structure of an XHTML document<br />We saw it before – essentially the document is a hierarchy.<br /><ul><li>Everything is inside the <html> </html> tags.
  13. 13. In head: define properties of the document and linkages to css and js.
  14. 14. In body: All the content we want the page to display.</li></li></ul><li>Attributes: Making tags more useful!<br />“Attributes are instructions that clarify or modify an element.”<br /><element attribute-name="value">Content</element><br /> <br />or for empty elements (less commonly):<br /><element attribute-name="value"/><br /><ul><li>In this way we can tell the browser things like, “This image element has it’s actual image file stored here.”</li></li></ul><li>
  15. 15. Block and Inline elements:<br />It’s all about boxes around things!<br />Block level elements: Treated as boxes stacked up in the page top to bottom. <div>, <p>, etc.<br />Inline elements: do not start a new line, but stay in the flow of content. <span>, <em>, <a>, etc.<br />
  16. 16. Block and Inline elements:<br />It’s all about boxes around things!<br />Block level elements: Treated as boxes stacked up in the page top to bottom. <div>, <p>, etc.<br />Inline elements: do not start a new line, but stay in the flow of content. <span>, <em>, <a>, etc.<br />Whether an element is block or inline restricts what other elements it may contain and where it will end up being positioned.<br />
  17. 17.
  18. 18. Special Characters:<br />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.<br />© , & and < are examples of this!<br />You can represent it by its numeric or named character reference for the web.<br />Two options: by an assigned numeric value (numeric entity) or using a predefined abbreviated name for the character (called a named entity). <br />All character references begin with a “&” and end with an “;”.<br />
  19. 19.
  20. 20. how’s our speed?<br />
  21. 21. email us...<br />kevin.vanderbeken@apn.com.au<br />colin.gourlay@apn.com.au<br />
  22. 22. next week...<br />
  23. 23. CSS INTRO<br />

×