Introduction to HTML5

HTML class

Julia Dizhak

moneypark

Agenda

  1. Intro to the web development process
  2. Start with base HTML template
  3. Types of HTML tags
  4. A brief history of markup
  5. Design of HTML5

HyperText Markup Language

HTML is the standard markup language used to create Web pages

html

Journey to the development process

rocket

Graphic design

design

Front End Development

Front end development is the development of those elements of a website that the customer sees and interacts with directly

frontend

Front End for MoneyPark

frontend

Back End Development

Back end development responsible for logic of the project ( deals with dynamic content)

back-end

House house

tree

Lets Start with simple structure

moneypark mortgage homepage tree

Tag - the basic word in HTML

tag

Attributes

Each tag can also have attributes with values

Attributes appear inside the opening tag and their values sit inside the quotation marks.

Some tags can't use without attributes

Attributes come in name/value pairs like: name="value"

Attribute class: class="value"

Attribute id: id="value"

HTML-CSS-DOM

dom

DOM

standart convention for

representing and interacting with elements in HTML

Tree like Structure

tree

Tree

structure

How page looks like without CSS

The document written in HTML defines the structure and content of the page. To define the style you have to use another language CSS

structure structure
css

Moneypark without CSS

css

The base HTML template

			<!Doctype>
      <html>
          <head>
              <title> HTML </title> 
          </head>
          <body>
              ...
          </body>
      </html>

The base HTML template like a Human

html

How HTML base template looks in browser

html

!Doctype

			<!Doctype>
          document type declaration
          used to let the browser know
          what version of HTML you are using

Tag html

			<html>
			    the root element that specifies of the document is HTML
          the openning tag immediately follows
          the DOCTYPE declaration
          the closing tag is the last thing in the document
          the html element must contain the head and the body
			</html>

Tag head

			<head>
			   the header of HTML where information 
         about the document placed
			</head>

Tag title

			<title>
			    defines  the title of page
          you must have a title element to produce
          a valid document
          and it must be placed within the head element
			</title>

Title in browser tab

html

Tag body

			<body>
			    the main body of HTMl document
          where all of content is placed
          it should be used just once
          it must start immediately after the closing tag /head
          and end directly before the closing /html
			</body>

Tags

			<div> </div>
			<h2> </h2>
      <strong> </strong>
      <p> </p>
      <br>
      <a> </a>

Tag div - structure

			<div>
			    defines a block of HTML
          or division
          or a section in an HTML document
          The tag is used to group block-elements
          to format them with CSS
			</div>

From h1 to h6 - headings

Heading are defined with the <h1> to <h6> tags

			<h1> defines the most important heading
          ... 
			<h6> defines the least important heading
      h1 headings should be main headings,
          followed by h2 headings
              then the less important h3, and so on.

Tag p - text

  			<p>
  			    element defines a paragraph
  			</p>

Browsers automatically add an empty line before and after a paragraph.

Tag strong - format text in the document

			<strong>
			    It defines important text
			</strong>

Break line

			<br>
			    defines a line break
      use if you want a new line without starting a new paragraph

The <br> element is an empty HTML element. It has no end tag.

Attributes

Each Tag can also have attributes with values

Attributes appear inside the opening tag and their values sit inside the quotation marks.

Some tags can't use without attributes

Attributes come in name/value pairs like: name="value"

Tag a - link

			<a href="http://www.moneypark.ch">
			  MoneyPark
			</a>

The <a> tag defines a hyperlink, which is used to link from one page to another.

The required attribute of the <a> element is the "href" attribute, which indicates the link's destination - address.

Tag img

The <img> tag defines an image

The <img>tag has two required attributes: "src" and "alt".

			<img src="pictures/moneypark-logo.png" alt="MoneyPark" >
			    "src" - specifies the URL of the image
			    "alt" - specifies an alternate text for an image, 
          if the image cannot be displayed.

Tag ul - unordered list 

			<ul>
			    <li> first line item </li>
          <li> second line item 
              <ul>
                 <li> first nested line item </li>
              </ul>
          </li> 
          <li> third line item </li>
			</ul>

In browser unordered list looks like:

Tag ol - ordered list 

			<ol>
			    <li> first line item </li>
          <li> second line item 
              <ul>
                 <li> first nested line item </li>
              </ul>
          </li> 
          <li> third line item </li>
			</ol>

In browser ordered list looks like:

  1. first line item
  2. second line item
    1. first nested line item
    2. second nested line item
  3. third line item
    • first second nested line item
    • second second nested line item
  4. fourth line item

The progress tag - represents the progress of a task

HTML5

The select tag - create a drop-down list with four options

HTML5

The datalist tag - an input element with pre-defined values in a datalist:

HTML5

More HTML tags

HTML5
HTML5

Tags type

HTML meta tags

          <base> <link>
      		<meta> <noscript> <script>
      		<style> <title>

The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.

Meta elements used to specify page description, keywords, author of the document, last modified, and other metadata.

Structure tags

          <html> <head>
      		<div> <body> <span>
      		<article> <aside> <section> <nav>

Structure tag - element which define the structure of the document

Header

          <header>
      		    Used to contain the header content of a site
      		<header>

Footer

            <footer>
        		     Contains the footer content of a site.
        		<footer>

Nav

            <nav>
        		     Contains the navigation menu,
                 or other navigation functionality for the page.
        		<nav>

Aside

            <aside>
        		     Defines a block of content that is related  
                 to the main content
                 around it, but not central to the flow of it
        		<aside>

Heading tags

          <h1> <h2> <h3> <h4> <h5> <h6>
      		<hgroup>

Heading tag - element which define the head of part document

<h1> defines the most important heading

<h6> defines the least important heading

Text tags

          <a> <abbr> <b>
      		<cite> <code> <command>
      		<del> <dfn> <em> <i> <input>
      		<ins> <kbd> <keygen> <label> <map> <mark> <meter>
      		<output> <progress> <q> …

Text tag - content element

Embeded tags (third-party content)

          <img> <iframe> <embed> <math> <object>
      		<canvas> <audio> <svg> <video>
      
          <iframe> -  a nested browsing context
      		<canvas> - represents a bitmap area that scripts can be used
              to render graphics, graphs, game graphics on the fly.
          <audio> - represents a sound , or an audio stream
          <svg> - defines an embedded vectorial image 
          <video> - a video, with the necessary interface to play it.

SVG

Example svg

Video

Interactive

          <a> <button> <input> <label> <menu>
      		<img> <iframe>
          <select> <textarea> <video>

Interactive tag - element designed to interact with user

The HyperTextMarkup Language was created by Sir Tim Berners-Lee Tim Berners Lee In 1991 he wrote a document called “HTML Tags” and proposed two dozen elements that could be used for writing web pages.

The timeline of HTML

XHTML

Extensible

XHTML Timeline

XHTML Features

WHATWG

Mozila Foundation

Apple

Google

Opera

2004

WHATWG

The Web Hypertext Application Technology Working Group

Workign groups

IETF (the Internet Engineering Task Force)

W3C (the World Wide Web Consortium)

WHATWG (The Web Hypertext Application Technology Working Group)

One goal is

make the Internet work better by producing high quality, relevant technical documents that influence the way people design, use, and manage the Internet

How standarts are made ?

Why do we have an <img> element?

Why we use <div> element?

Why we use <p> element?

...

Smart people

I’d like to proposal a new optional html tag

What is the current state of HTML5?

Most HTML5 features work today

* in progressive browsers

(except Internet Explorer)

Internet Explorer

Things you should know about HTML5

Interactive Classes

Interactive Classes from Udacity (Google invested ...)

Books

Publishing house: A Book Apart

HTML5 for Web Designers by Jeremy Keith

abookapart.com

Blog