View
214
Download
1
Category
Preview:
Citation preview
Graduate School of Library and Information Science
LIS 753 Introduction to HTML 5
By: Yijun Gao Week Three
What is HTML?
• A language describing web pages --- Stands for Hyper Text Markup Language
• HTML is a markup language --- Includes: a set of markup tags --- The tags describe document content
• HTML documents --- Contain HTML tags & plain text --- Also called web pages
HTML Tags
• HTML markup tags = HTML tags --- keywords (tag names) surrounded by: * angle brackets like <html>
• HTML tags come in pairs --- like <b> and </b> OR
<tagname>content</tagname> --- The first tag in a pair is the start tag *** “start tags only” sometimes works! --- The second tag is the end tag * with a forward slash before the tag name
HTML Elements (Check notes:)• Starts with a start tag / opening tag --- Ends with an end tag / closing tag (Must!)
• The element content is everything between the start and the end tag
• Some HTML elements have empty content• Empty elements are closed in the start tag• Most HTML elements can have attributes• HTML Tip: Use Lowercase Tags
HTML Attributes
• HTML elements can have attributes• Provide additional info. about an element• Always specified in the start tag• Come in name/value pairs:
name="value” Attribute values must be “double quoted”
• Use Lowercase Attributes• <a href="http://www.dom.edu"> link</a> --- which is “element” & “attribute”?
Our First “Full” HTML Page• Can you tell the difference between this one and the
one I posted online (http://gaoyijun.org/1.html )
• It has Five elements<!DOCTYPE html><head> <title></title></head><body><p>Hello, World!!! We are the world!!! Go GSLIS GO!!!</p></body></html>
The <html>element
• It defines the whole document.
• Start tag <html> & end tag </html>
• Its content is another HTML element (the <body> element)
• See notes for <body> & <p> elements
HTML Links
• HTML links are defined with the <a> tag• The href attribute specifies the destination• Example: <a href="url ">Link text</a> <a href="http://www.w3schools.com">This is a link</a>
*** Please also see the note of this page below
Tip: The "Link text" doesn't have to be text. It can be an image or any other HTML element.
HTML Images• HTML images are defined with the <img> tag
• The <img> tag is empty, which means that it contains attributes only, and has no closing tag.
• To display an image on a page, you need to use the src attribute. “src” stands for "source". The value of the src attribute is the URL of the image you want to display. (please check the notes below)
• Syntax for defining an image: <img src="url" alt="some_text">
HTML Images - The Alt Attribute
• It specifies an alternate text for an image, if the image cannot be displayed.
• Its value is an author-defined text: <img src="smiley.gif" alt="Smiley face">
Note: When a web page is loaded, the browser gets the image from a web server and inserts it into the page. Therefore, make sure that the images actually stay in the same spot in relation to the web page, otherwise your visitors will get a broken link icon.
Set Height & Width of an Image
• The height and width attributes are used to specify the size of an image.
• The values are specified in pixels• <img src="smiley.gif" alt="Smiley face"
width="42" height="42">
• Tip: It is a good practice to specify both the height and width attributes for an image.
HTML Tables
• Tables are defined with the <table> tag.
• A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag).
• td stands for "table data" and holds the content of a data cell.
• A <td> tag can contain text, links, images, lists, forms, other tables, etc.
Table Example
• <table border="1"><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
An HTML Table in a browser
row 1, cell 1 row 1, cell 2
row 2, cell 1 row 2, cell 2
<table border="1"> <tr><td>Row 1, cell 1</td><td>Row 1, cell 2</td></tr></table>
Note: The first line above is to set the border size
HTML Table Headers• Defined with the <th> tag.• Text in the <th> element: bold & centered• <table border="1">
<tr><th>Header 1</th><th>Header 2</th></tr><tr><td>row 1, cell 1</td><td>row 1, cell 2</td></tr><tr><td>row 2, cell 1</td><td>row 2, cell 2</td></tr></table>
Playing YouTube Video in HTML
• <embedwidth="420" height="345"src="http://www.youtube.com/v/XGSy3_Czz8k"type="application/x-shockwave-flash"></embed>
• Is it easy?
HTML Forms
• Used to pass data to a server --- One of the most important features
• An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons…(Collect user entered data)
• A form can also contain select lists, textarea, fieldset, legend, and label elements
--- Google Search Page is a form
What is HTML 5
• The latest standard for HTML --- No need to study the HTML 4.01 now --- No need to study XHTML either --- Supported by latest web browsers
• HTML 5 can deliver rich content --- Includes: animation, graphics, music &
movies --- Without additional plugins (NO Flash!!!) --- Extremely useful in the mobile age
HTML 5 is Simple & Powerful…HTML 5 is Simple & Powerful…
• Can build complicated web Applications --- Require fewer scripting (nice…)
• Cross-platform & Device-independent --- For PC, Tablet, Smartphone, Smart TV
• It starts with: <!DOCTYPE html>
HTML5 - New Features
• The <canvas> element for 2D drawing• The <video> and <audio> elements --- For media playback with Flash plugins
• Support for local storage --- You can run the websites locally• New content-specific elements, like <article>,
<footer>, <header>, <nav>, <section>• New form controls, like calendar, date, time,
email, url, search
Recommended