3. Last week we said... separate your content, presentation & behaviour It eases our development, with multiple people, and allows all our technologies to work nicely together.
4. Today: Basic HTML Concepts: Document overview - Meet HTML! HTML Syntax - tags, html, xhtml attributes Block & Inline - <DIV>'s and <SPAN>'s Special characters.
5. 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.
6. The document... Browser goes to http://finda.com.au Gets back an XHTML formatted (“marked-up”) document. ‘Document’ is a term that describes the page and all it’s associated bits and pieces.
7. 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>
8. What are all these brackets?! Part of the HTML Syntax: The bracketed tags are elements.
9. 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>
10. 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.
11. 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.
12.
13. In head: define properties of the document and linkages to css and js.
14.
15. 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.
16. 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.
This lesson we’ll expand on the content layer – HTML – which is all the structure and content of the web.
Last lesson we covered the basics of the layers of web development, and how important it is to separate everything for ease of development. It allows all our technologies to work neatly together.
Introduction:Welcome to HTML!Here we're going to start introducing HTML as a language and understanding how it forms the building blocks of the elements on a web page. These elements on a page, can convey anything from information, to lists and even input. As a language, HTML has been designed to provide us the ability to include many different types of things for presentation on the web. Over the course of time, more and more elements and their practical use will be demonstrated as well as the theory of how they all link together to form a seamless web experience that we enjoy on a daily basis. What is HTML?HTML (HyperText Markup Language) is literally the language used to create web page documents. The updated version, XHTML (eXtensible HTML) is essentially the same language with stricter rules in how it's written and understood by browsers.What we will actually be concentrating on is XHTML for our course but we'll refer to the differences between these derivative languages as we go, and when we recap the course at points. PS: If someone mentions "(X)HTML" they collectively mean both HTML or XHTML. Firstly, and possibly the most important thing to remember about (X)HTML itself is that it's not a programming language. (X)HTML is a markup language which means it defines a way of identifying and describing parts of a document. Markup is essentially the bits and pieces of a document which you see (or don't see!) through a browser - such as headings, paragraphs, buttons, structural divisions, etc. Markup language doesn't define any programming logic, it defines what's on the page. In order to get a basic understanding of the language, going to write some pages and code snippets by hand in this course, as it's the best way to learn.
Document overview:When you punch in a URL into your web browser or click on a hypertext link such as http://finda.com.au, your browser asks our servers to send back what web content it finds at that address. What the browser gets back is an (X)HTML formatted document. Document is the term that describes the full page and all it's associated bits and pieces. Everything that makes up the page you see when rendered is "marked-up" in that document.
Meet (X)HTML!Here is some example source code for a very basic (X)HTML document.You can see that the above example contains the text that will be displayed to the viewer of the page, but it also contains special tags (indicated with angle brackets, < and >) that describe each text element on the page.Adding descriptive tags to a text document in this way is known as “marking up” the document.
The HTML Element:The bracketed tags contained in the document as shown are known as elements, and these tags all follow this convention.
Element names are usually lowercase, as XHTML requires it. And as we use and teach XHTML primarily over HTML, we will be using these stricter rules. The (X)HTML syntax was created especially for documents with hypertext links. HTML defines dozens of text elements that make up documents such as headings, paragraphs, emphasized text, and of course, links. These elements are used according to "semantic markup" - the type of tag used, provides information to that bit of content's relevancy or use. Examples of these can be seen in the <h1></h1> tags which specifies the most important heading on the page and the <p></p> tags which define a paragraph.
Elements don't always have content, and some never have content - they are referred to as empty elements! They are written differently if they are empty. Empty tags are closed by adding a trailing slash preceded by a space before the closing bracket, like so:<img />, <br />, and <hr /> There are also HTML elements that add information about the document (such as its <title>) and that add media such as images, videos, Flash movies, or applets to the page.
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 closed (or terminated, to use the proper term). They all need their </blah> if in a pair... or <blah /> if they are an empty element.
The structure of an (X)HTML document is a heirarchy, and in it's most basic sense everything is contained inside the <html></html> tags. The <HTML> tag is known as the root element, because it contains everything else, as well as defines that everything inside will be the further markup of the document. After that, we move one level down, and see the <head></head> and <body></body> tags - Humans have a head and a body, and so do (X)HTML documents.The head area is where we define various properties of the document such as it's title (which is required), and also set up linkages to any CSS files and javascript files the document may use. The body is where we specify all the main content, and inside of it, are all our base elements such as headings and paragraphs.These tags don't specify how anything in the document looks, but they are required to be there in order to play by the XHTML rules and be "vaild" as a document.
Attributes:We now know about elements, but in order to make some elements useful, we need to apply attributes to them so they can perform their role. For example, An <img /> (image) tag is not very useful by itself... there’s no way to know which image to use! That’s where attributes come in. "Attributes are instructions that clarify or modify an element." For the img element, the src (short for “source”) attribute is required, and provides the location of the image file via its URL. The syntax for attributes is as follows:<element attribute-name="value">Content</element> or for empty elements (less commonly):<elementattribute-name="value"/>
For our image element example we can check the graphic. There are a variety of different tags for different elements, some are common, and others are only used on certain tags. We'll examine certain tags individually later.
Block and Inline elementsYou may have noticed in the past that heading and paragraph elements start on new lines and do not run together as other text can. That is because they are examples of block-level elements. Browsers treat block-level elements as though they are in rectangular boxes, stacked up in the page top to bottom. Each block-level element begins on a new line, and some space is also usually added above and below the entire element by default. If you open an example in firefox, and use the firebug plugin, you can clearly see the outlines as you select them. By contrast, if you check content that is marked up with a <span> element or as emphasized with an <em>, you will see that it does not start a new line, but rather stays in the flow of the paragraph. That is because the em element is an inline element. Inline elements do not start new lines; Boxes are drawn around them in firebug to show that they just go with the flow of text. The difference between block-level and inline elements is important. In (X)HTML markup, whether an element is block-level or inline restricts what other elements it may contain and where it will end up being positioned. For example, you can’t logically put a block-level element within an inline element (such as a paragraph within a link). Blocklevel and inline elements also behave differently when it comes to applying Cascading Style Sheet (css) properties.
There's hundreds of equivellant characters, and they can all be found on various standards websites like http://www.webstandards.org/learn/reference/charts/entities/http://www.webmonkey.com/2010/02/special_characters/
