37
TEC 319 Introduction to HTML
| Date post: | 02-Jan-2016 |
| Category: |
Documents |
| Upload: | andrea-king |
| View: | 235 times |
| Download: | 0 times |
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>
<html><body>
<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>[email protected]</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>
</ol>
Unordered Lists
<ul><li>Apple</li><li>Banana</li><li>Grape</li><li>Strawberry</li>
</ul>
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>
<form action="UrlToProcessForm" method="post">
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">
<option value="1">10-20</option><option value="2">20-30</option><option value="3">30-40</option><option value="4">40-50</option>
</select><br/>
Comments:<br/><textarea id="comments" name="comments" rows="5" cols="10"></textarea> <br/>
<input type="submit" name="submit" id="submit" /></body>
</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
HTML5
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
<input type=“number” min=“0” max=“10” step=“2”/>
New form elements of HTML5 Numbers as sliders
<input type="range" min="0" max="10" step="2" value="6">
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
![1 Hyper Text Markup Language (HTML) UNIT- 02 Hyper Text Markup Language (HTML) UNIT-02/LECTURE-01 Introduction to Hyper Text Markup Language (HTML) About HTML: [RGPV/Dec 2013(4)] So](https://static.documents.pub/doc/80x56/5aae4bc17f8b9a25088c15fa/1-hyper-text-markup-language-html-unit-02-hyper-text-markup-language-html-unit-02lecture-01.jpg)
