Introduction to HTML

What is HTML?  Hyper Text Markup Language  Not a programming language but a markup language  Used for presentation and layout of web pages  Used to describe page content  Earlier versions of HTML had little semantic constructs  Newest versions of the HTML spec attempt to rectify this

Basic Structure of an HTML page Hello World This is a paragraph

Understanding HTML Tags  HTML tags are keywords (tag names) surrounded by angle brackets like  HTML tags normally come in pairs like and  The first tag in a pair is the start tag, the second tag is the end tag  The end tag is written like the start tag, with a forward slash before the tag name  Start and end tags are also called opening tags and closing tags Content goes here

Html Headings  These are used to display heading content on a web page  They are represented by tags to Example : This is a heading 1 tag This is a heading 2 tag This is a heading 3 tag This is a heading 4 tag This is a heading 5 tag This is a heading 6 tag

Html paragraphs  Represented by the tag  Example The content of the paragraph goes here!

Html links  Represented by the tag Google Home Page  The tag can also be used to represent anchor tags to content on the same page  Link to content  Content to be linked to

Images  Represented by tag

Tables  Used for displaying data  In early web days tables were used for styling pages, but styling now should be exclusively achieved with CSS (Cascading Style Sheets)  Tables are defined with the tag  Child elements of include  Table Row  Table definition or column  table header

Example of simple table First Name Last Name Address John Smith

Example of well defined table Details on the productivity of each Manager in a plant Weekday Date Manager Qty Mon 09/11 Kelsey 639 Tue 09/12 Lindsey 596 Wed 09/13 Randy 1135 Thu 09/14 Susan 1002 Fri 09/15 Randy 908 Sat 09/16 Lindsey 371 Sun 09/17 Susan 272 Total 4923

Table Result

HTML List Tags  Ordered lists  Unordered lists  These parent list tags contain children elements which make up the individual list items

Ordered Lists College of Applied Science and Tech Information Technology Dept College of Business

Unordered Lists Apple Banana Grape Strawberry

Block vs Inline Elements  HTML elements can generally be categorized as block level elements or inline elements  Block level elements start and end with a new line when displayed in a browser  Eg of Block level elements are:  Inline elements are displayed without starting a new line  Eg of Inline elements are: etc

element  This is a block level element  It is used to separate and style large blocks of content  Displayed by default on the browser with a line break before and after it  Example of Use Content of page goes here

element  This is an inline element  Used to apply special styles and formatting to text that is displayed inline  It is often used in conjunction with CSS to achieve the desired formatting  An error has occurred! An error has occurred!

HTML Forms  Forms are used to send information from the client to the web server  Forms contain different type of elements  Text fields  Radio buttons  Checkboxes  Select lists  Textareas  Password fields  Buttons or

Form Tags

Form Example

Form HTML Code Sample Form First Name: Last Name: Address: Gender: Male

Form HTML Code Cont’d Female Age Range: Comments:

HTML DOCTYPE  A declaration helps a browser to display a web page correctly  It is usually placed at the start of an HTML file  A few different flavors of DOCTYPE exist  is not an HTML tag but it is information to the browser about what version HTML is rendered in

HTML 5 DOCTYPE Title of the document The body of the document

HTML Versions Source: List of other doc types:

HTML5  What is HTML5?   Excellent HTML5 resource 

What is HTML5?  Latest specification of HTML  Includes native tags for video so plugins do not have to be downloaded  Adds semantic native tags for common document structures  Headers  Footers  Sections  Captions

What is HTML5  Will allow a single version of an app to be rendered effectively across every compliant browser and platform including mobile phones and tablets  Can be thought of a collection of individual features  To convert your old web pages to HTML5 simply place the new DOCTYPE at the start of your page

Looking more closely at the new features of HTML5  Canvas   Geolocation   Local Storage   Cache Manifest   Web Workers for multi-threaded javascript

Storing Data in Browsers  Cookies  Allow us to login automatically to frequently visited websites  They have a data size limit of 4 KB  Issues with privacy and tracking  They are sent with every HTTP request so there is additional overhead in data transfer across the wire

Local Storage and Session Storage  It has a simple API (get and set)  Provides developers with a large amount of space (at least 5 to 10 MB per domain)  Data stored can be accessed via javascript  sessionStorage is only available within the browser tab or window session  It is removed when the browser is closed  Only designed to store data in a single web page session

Local Storage and Session Storage  Localstorage is kept even between browser sessions  Data is still available when the browser is closed or opened  Example sessionStorage.setItem('myKey', 'myValue'); var myVar = sessionStorage.getItem('myKey'); localStorage.setItem('myKey', 'myValue'); var myVar = localStorage.getItem('myKey'); Good Resource:

New Form Elements of HTML5  New form elements with automatic validation    Url   Numbers 

New form elements of HTML5  Numbers as sliders   Date Pickers   Search boxes 

New form elements of HTML5  Color Picker 

Case studies   