Introduction to HTML. What is HTML? Hyper Text Markup Language Not a programming language but a...

transcript

TEC 319Introduction 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<!DOCTYPE html>

<h1>Hello World</h1>

<p>This is a paragraph</p>

</body></html>

Understanding HTML Tags

HTML tags are keywords (tag names) surrounded by angle brackets like <html>

HTML tags normally come in pairs like <b> and </b>

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

<tagname>Content goes here</tagname>

Html Headings

These are used to display heading content on a web page

They are represented by tags <h1> to <h6>Example :

<h1>This is a heading 1 tag</h1>

<h2>This is a heading 2 tag</h2><h3>This is a heading 3 tag</h3><h4>This is a heading 4 tag</h4><h5>This is a heading 5 tag</h5><h6>This is a heading 6 tag</h6>

Html paragraphs

Represented by the <p> tag Example<p>The content of the paragraph

goes here!</p>

Html links

Represented by the <a> tag<a href=“http://www.google.com”>Google

Home Page</a>Google Home Page The <a> tag can also be used to represent

anchor tags to content on the same page <a href=“#pageContent”>Link to

content</a> <a name=“pageContent”>Content to be

linked to</a>

Images

Represented by <img > tag<img src=“logo.gif” width=“300”

height=“100” alt=“Company Logo”/>

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 <table> tag

Child elements of <table> include <tr> Table Row <td> Table definition or column <th> table header

Example of simple table

<table summary=“Contact information for address book”><tr> <th>First Name</th> <th>Last Name</th> <th>Email Address</th></tr><tr> <td>John</td> <td>Smith</td> <td>john.smith@gmail.com</td></tr>

</table>

Example of well defined table

<TABLE SUMMARY="Quantity of items assembled on each Manager's shift“ ><CAPTION>Details on the productivity of each Manager in a plant</CAPTION><THEAD> <TR> <TH>Weekday</TH> <TH>Date</TH> <TH>Manager</TH> <TH>Qty</TH>

</TR></THEAD>

<TBODY> <TR> <TD>Mon</TD> <TD>09/11</TD> <TD>Kelsey</TD> <TD>639</TD> </TR> <TR> <TD>Tue</TD> <TD>09/12</TD> <TD>Lindsey</TD> <TD>596</TD> </TR> <TR> <TD>Wed</TD> <TD>09/13</TD> <TD>Randy</TD> <TD>1135</TD> </TR> <TR> <TD>Thu</TD> <TD>09/14</TD> <TD>Susan</TD> <TD>1002</TD> </TR> <TR> <TD>Fri</TD> <TD>09/15</TD> <TD>Randy</TD> <TD>908</TD> </TR> <TR> <TD>Sat</TD> <TD>09/16</TD> <TD>Lindsey</TD> <TD>371</TD> </TR> <TR> <TD>Sun</TD> <TD>09/17</TD> <TD>Susan</TD> <TD>272</TD> </TR></TBODY>

<TFOOT> <TR> <TH ALIGN=LEFT COLSPAN=3>Total</TH> <TH>4923</TH> </TR></TFOOT>

</TABLE>

Table Result

HTML List Tags

Ordered lists <ol> Unordered lists <ul> These parent list tags contain

children <li> elements which make up the individual list items

Ordered Lists

<ol><li>College of Applied Science and Tech</li><li>Information Technology Dept</li><li>College of Business</li>

Unordered Lists

<ul><li>Apple</li><li>Banana</li><li>Grape</li><li>Strawberry</li>

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: <h1> <p>

<ul> <table> Inline elements are displayed without

starting a new line Eg of Inline elements are: <span> <td> <a>

<img> etc

<div> 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<div>

<p>Content of page goes here</p></div>

<span> 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

<span class=“errorText”>An error has occurred!</span>

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 <input type=“text”/> Radio buttons <input type=“radio”/> Checkboxes <input type=“checkbox”/> Select lists

<select><option></option></select> Textareas <textarea></textarea> Password fields <input type=“password”/> Buttons <input type=“submit”/> or <button/>

Form Tags

Form Example

Form HTML Code<!DOCTYPE html><html><body><h1>Sample Form</h1>

First Name: <input type="text" id="firstName" name="firstName" value="" size="35" /> <br/>

Last Name: <input type="text" id="lastName" name="lastName" value="" size="35" /> <br/>

Email Address: <input type="text" id="emailAddress" name="emailAddress" value="" size="35" /> <br/>

Gender: <br/><input type="radio" name="gender" id="male" value="male"/> Male

Form HTML Code Cont’d<input type="radio" name="gender" id="female" value="male"/> Female <br/>

Age Range: <br/><select id="ageRange" name="ageRange">

</select><br/>

Comments:<br/><textarea id="comments" name="comments" rows="5" cols="10"></textarea> <br/>

</html>

HTML DOCTYPE

A <!DOCTYPE> 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

<!DOCTYPE> is not an HTML tag but it is information to the browser about what version HTML is rendered in

HTML 5 DOCTYPE

<!DOCTYPE html><html><head><title>Title of the document</title></head>

<body>The body of the document</body>

</html>

HTML Versions

Source: http://www.w3schools.com/html/html_doctype.asp

List of other doc types: http://www.w3schools.com/tags/tag_doctype.asp

What is HTML5? http://

www.youtube.com/watch?v=mzPxo7Y6JyA

Excellent HTML5 resource http://diveintohtml5.info/

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

<!DOCTYPE html>

Looking more closely at the new features of HTML5 Canvas http://diveintohtml5.info/canvas.html Geolocation http://diveintohtml5.info/canvas.html Local Storage http://diveintohtml5.info/storage.html Cache Manifest http://diveintohtml5.info/offline.html 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 ExamplesessionStorage.setItem('myKey', 'myValue'); var myVar = sessionStorage.getItem('myKey');localStorage.setItem('myKey', 'myValue'); var myVar = localStorage.getItem('myKey');

Good Resource: http://sixrevisions.com/html/introduction-web-storage/

New Form Elements of HTML5 New form elements with automatic

validation Email

<input type=“email” /> Url

<input type=“url”/> Numbers

New form elements of HTML5 Numbers as sliders

Date Pickers <input type=“date”/>

Search boxes <input type=“search”/>

New form elements of HTML5 Color Picker <input type=“color”/>

Case studies

http://illinoisstate.edu/

http://www.apple.com

http://news.google.com

Introduction to HTML. What is HTML? Hyper Text Markup Language Not a programming language but a...

Documents