1-02: HTML Markup Introduction

Editor's Notes

• #3 This lesson we’ll expand on the content layer – HTML – which is all the structure and content of the web.
• #4 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.
• #6 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.
• #7 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.
• #8 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.
• #9 The HTML Element:The bracketed tags contained in the document as shown are known as elements, and these tags all follow this convention.
• #10 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.
• #11 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.
• #12 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.
• #13 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.
• #14 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"/> 
• #15 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.
• #16 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.
• #19 Special CharactersThere's a bunch of common characters, like the copyright symbol ©, that aren't part of the normal set of ASCII characters which are used on the web. The normal set has only letters, numbers, and a few basic symbols. You may see a problem with that however, since if you put one in an (X)HTML document, the browser will think it's the beginning of a tag. If we have special character we need to substitute it. You can represent it by its numeric or named character reference for the web. When the browser sees the character reference, it substitutes the proper character in that spot when the page is displayed. There's a few ways to do this: 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 “;”. Say we wanted to add the copyright symbol ( © ) to the page... in XHTML we must use the named entity & copy ; (or its numeric equivalent & # 169 ; ) where we want the symbol to appear. NOTE: There is to be no spaces between the & and the closing semicolon - i just can't write them here in the wiki because it treats them as the characters otherwise! That's how well it works!An example of the html for inserting a copyright symbol: <p>All content copyright & copy ; 2007, Jennifer Robbins</p>or:<p>All content copyright & # 169 ; 2007, Jennifer Robbins</p>  A common mistake is the & symbol, which should be & amp ; .This is just a restriction of adding propper content for the web. 
• #20 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/