HTML

Key facts:

  • Stands for 'HyperText Markup Language'
  • Created at CERN in 1980 by Tim Berners-Lee
  • HTML 2.0 specification was published on 24 November, 1995

Main Purpose:

HyperText Markup Language is a markup language that web browsers use to interpret and compose text, images and other material into visual or audible web pages. Default characteristics for every item of HTML markup are defined in the browser, and these characteristics can be altered or enhanced by the web page designer's additional use of CSS.
(wiki)

Sample html page


<!DOCTYPE html>
<html>
    <body>
	<h1>My First Heading</h1>
	<p>My first paragraph.</p>
    </body>
</html>
  • The DOCTYPE declaration defines the document type
  • The text between <html> and </html> describes the web page
  • The text between <body> and </body> is the visible page content
  • The text between <h1> and </h1> is displayed as a heading
  • The text between <p> and </p> is displayed as a paragraph
watch me in browser

All that was done using tags. So what are they?

They're building blocks of html document.

Simple tag is comprised of < & > which wraps the tag name. ie: <img>

More often tags are paired, with one being opening (regular simple tag) and second closing, which has a slash after the opening angle bracket. ie: <p></p>

However, not all of these elements require the closing tag. Some elements, the so-called void elements, do not have an end tag. ie: <br/>, <img/>

Different tags can contain other tags. Also, tags can have HTML attributes. ie: <a href='#goto-1-anchor'><img alt='Anchor' src='anchor.jpg'/><a>

Doctype

The first attribute to be found on the web-page (if you omit it, it will be implied, and you won't like it for sure)

We can distinguish next sets of doctypes:

  • HTML 5, set via <!doctype html>
  • HTML 4.01, which can be Strict, Transitional, Frameset. Strict is set via <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  • XHTML 1.0, which can be Strict, Transitional, Frameset.
  • XHTML 1.1 DTD - like XHTML 1.0 Strict, but with ability to add modules...
  • ...there're more (SVG, MathML, older versions of HTML, XHTML)

Different doctypes support different tags

List of tags by Doctype

Also, different doctypes have different standards for html: for example, in html4.01 void elements can omit trailing slash, in xhtml we have to set it with space. i.e <img alt="Portrait " src="portrait.jpg" />
other differences

Doctypes can be less strict...

Minimum valid html5 page


<!doctype html>
<title>HTML5 Minimal Markup Example</title>
							
watch me in browser
Passed, 3 warnings
... and more strict.

Minimum valid XHTML 1.0 Strict! page


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
     <title>XHTML 1.0 Strict! Minimal Markup Example</title>
  </head>
  <body>
  </body>
</html>
Passed, 2 warnings

DOM

The Document Object Model (DOM) is a cross-platform and language-independent convention for representing and interacting with objects in HTML, XHTML and XML documents.

For render, most web browsers use a model similar to the DOM. The nodes of every document are organized in a tree structure, called the DOM tree, with topmost node named "Document object".

Head tag

It holds different meta info. About:

  1. external resources (favicon, stylesheets [NB: they only can be in <head> block], etc.) some are loaded by page, some just for reference (i.e.:'author' link)
  2. meta info: description, keywords, content-type, encoding, refresh
  3. page title
  4. javascript can be set here, using <script>
  5. css can be set here using <style>

External resources

To get our resources we have to specify what and where from we're getting. The first one is being told by special attributes - rel or type, i.e.:

<link rel="shortcut icon" href="/somewhere/myicon.png" />

or

<link rel="stylesheet" href="../shared/css/reveal.min.css">

URL resolving

For the second part we're using URL - Uniform Resource Locator, which is also referenced as 'web address'.

By looking at page adress (in adress bar, usually, at the top of your browser window, you can tell

  • the protocol used (http:, https:, ftp:, etc.),
  • the host (google.com),
  • the path (/search/images)
  • and the fragment (#anchor2)

Let's see some examples:


<img src='/relative_to_host_sample_url_image.jpg'/>
<img src='../shared/current_relative_sample_url_image.jpg'/>
<img src='current_relative_sample_url_image.jpg'/>
<img src='https://drive.google.com/uc?export=view&id=0B65dEGRmB3VidlpTaG04b0k0bEE'/>
  • set relatively to host set relatively to host
  • set relatively to current path, referencing parent directory set relatively to current path, referencing parent directory
  • set relatively to current path set relatively to current path
  • absolutely set path absolutely set path

Summing it up

  • A leading slash tells the browser to start at the root directory.
  • If you don't have the leading slash, you're referencing from the current directory.
  • If you add two dots before the leading slash, it means you're referencing the parent of the current directory.

Manipulating relative resolving

You can also change the way relative resolving works by setting href at <base> tag, ie: <BASE href="http://draft.com.ua/img/"> This attribute specifies an absolute URI that acts as the base URI for resolving relative URIs. See sample.

Meta tags.

They do several things:

1. Help out search engines to define, what your page is about, thus helping out SEO guys. You can set your desription, keywords here.




2. Refresh page or redirect to another one.

<meta http-equiv="refresh" content="5; URL=html_basics/#/14/3">
or
<meta http-equiv="location" content="URL=html_basics/#/14/3">
Check it in browser.

This way, the http-equiv attribute can be used to simulate an HTTP response header.

Meta tag with 'http-equiv' also

  1. can give us control over cache
  2. can set up content-language
  3. can set up content-type
  4. can state date
  5. can set expiry date
  6. can state last-modified
  7. can set cookie
  8. can set name of the frame where content document must be loaded
ie:
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="content-language" content="en-US"/>
More usages.

Why should we set encoding?

That's why.

Summing up <head>

General rule of thumb states that whatever tags do not define structure of a webpage should stay out of the <body>.

Meta info and external resources can be stated here.

Stylesheets should be included as early, as possible, to render page properly.

Javascript should better be kept out of it.

Body's tags

There're quite a bunch of different tags (list of 75) which give us a choice for every possible case.

We distinguish 2 types of HTML elements: block and inline.

Block level elements normally start (and end) with a new line when displayed in a browser. i.e: <h1>, <p>, <ul>, <div>.

Inline elements are normally displayed without starting a new line. i.e.: <span>, <a>, <img>.

Comments

Aside stay comments, that just comment out some code.

They're usually set up as <!-- This is a comment -->

<h1>First-level (biggest) heading</h1>

<h2>...</h2>

<h3>...</h3>

<h4>...</h4>

<h5>...</h5>
<h6>Smallest heading</h6>

Formatters

  • <b>b</b>
  • <i>Italic</i>
  • <code>Computer code, for example</code>
  • <em>emphasized</em>
  • <kbd>Keyboard input</kbd>
  • <pre>Preformated text, which format should be keeped    !</pre>
  • <small>small text</small>
  • <strong>important text</strong>
  • <s>Strike through</s>
  • <abbr title='Unidentified flying object'>UFO</abbr>
  • <address>Adress goes here</address>
  • <blockquote>Quotation</blockquote>
  • <cite>title of a work citing from</cite>
  • <del>Deleted text</del>
  • <ins>Inserted text</ins>
  • <sub>subscription text</sub>
  • <sup>superscripted text</sup>
  • All that without stylesheets.

Links

  1. Link text.
  2. random image I didn't care about
  3. Send e-mail
  4. Anchor

Lists



  • One
  • Two
  • Three
  • One
  • Two
  • Three


  1. One
  2. Two
  3. Three
  1. One
  2. Two
  3. Three

Item 1
Describe item 1
Item 2
Describe item 2
Item 1
Describe item 1
Item 2
Describe item 2

Tables


table header table header
table footer table footer
table footer table footer
table header table header
table data table data
table footer table footer

Iframe

Form



Native form elements ( offline version)

Bunch of new structural tags from HTML5

  • <header>- header for document/section
  • <footer> - footer for document/section
  • <section> - section in document
  • <article> - as in clothing article
  • <aside> - aside from the page content
  • <bdi> - might be formatted in different direction
  • <command> - command button for user to invoke
  • <details> - additional details that can be shown/hidden
  • <dialog> - dialog box/window
  • <progress> - progress of a task
  • <ruby> - ruby annotation for East Asian typography

Finally, universal block tag: <div></div> and inline tag <span></span> They provide no usual change by themselves, adding a hook to document.

Why do we have so many tags if we can use those two?

Firstly, so we can style them accordingly [CSS FTW].

And secondly...

It's all about semantics .

Page layout

Web page layout is very important to make your website look good. It defines structure relative to content and styling.

Bootstrap examples

i.e.:

<body>

  

Bootstrap starter template

Use this document as a way to quick start any new project.
All you get is this message and a barebones HTML document.

</body>

Using tables

At some point, tables were used

They provided easy way to position the content, use proportional containers, etc.

Sample.

Grids

Table idea succesors

Gridpak
Bootstrap grid
Gridism
960 grid system

Good thing you can generate your own grid using sass/less loops.

Usually code looks something like


<div class="row">
  <div class="span4">4-section length div</div>
  <div class="span8">8-section length div</div>
</div>

Mostly fluid layout

As can be found here.

<div class="c">
	<div class="main"></div>
	<div class="width-in-percent float-left"></div>
	<div class="width-in-percent float-left"></div>
</div>

Why do people hate IE?

Short answer: it's kinda buggy.
Also it supports bunch of stuff only Microsoft cares about.

But it used to be like that.

Sad part is some people still use IE6 and your customer may want to account for them.

Fixes for html 5 tags

HTML5 Shiv

Conditional comments

for everything else



<link rel='stylesheet' href='css/ie6fixes.css'>

You can use equal, less than (lt), less than / equal (lte), greater than (gt), greater than / equal (gte)

Semantics

Semantics (from Ancient Greek: σημαντικός sēmantikós) is the study of meaning.

Semantic layout won't make your live easier.

Tags provides more information about the semantic content of the markup (<header> vs <div class="header">)

Content itself tells you 'what' it is

Screen readers can more effectively present the content

Creating semantically right document can be obtained through 3 different levels of commitment:

  • Using HTML-elements
  • Naming elements
  • Combination of named elements

Sample usage

Иван Пупкин, pupkin@gmail.com

Let's title person and give his e-mail address.

<h3>Иван Пупкин</h3>
<p>pupkin@gmail.com</p>

In case of styling, name classes accordingly

<h3 class='name'>Иван Пупкин</h3>
<p class='email'>pupkin@gmail.com</p>

Let's go even further and use hCard microformat.

<h3 class="fn n"> <span class="given-name">Иван</span> <span class="family-name">Пупкин</span> </h3> <p class="email">pupkin@gmail.com</p>

Special characters

In case you need special characters, like ¥ or ©, you can either copy-paste them or use entity, that represent them &yen and &copy

Full reference
HTML entities

XML

XML stands for EXtensible Markup Language

XML was created for data description

XML's tags aren't predefined.

XML vs HTML

XML isn't there to replace HTML, they pursue different aims: XML's primary is to describe data and tell us what data is, while HTML is aimed at demonstrating data and telling us how data looks.

Sample XML


<book>
<author>
	Philip K. Dick
</author>
<title>
	Ubik
</title>
<contents>
	<chapter1></chapter1>
	<chapter2></chapter2>
	...
	<chapter17></chapter17>
</contents>
</book>

XSL

Stands for Extensible Stylesheet Language

Not only sets up styles, but also defines XML transformations

Components

In fact, XSL consist of

  • XSLT (Extensible Stylesheet Language Transformations),
  • XPath (XML Path Language),
  • XSL-FO (XSL Formatting Objects).

OPEN GATES TO HELL

Source for XML





  
    Mr. Original
  
  
    1
    2
  
  
    1
    2
    32
  
  
    2
    32
    56
  
  
    3
    57
    90
  

XSL source





  <html>
  <body>
    
        
              
                
                
Chapter Pages
# -
</body> </html>

Hope you didn't die of boredom.

=