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 tags come in pairs --- like and OR content --- 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 link --- which is “element” & “attribute”?

Our First “Full” HTML Page Can you tell the difference between this one and the one I posted online ( ) It has Five elements Hello, World!!! We are the world!!! Go GSLIS GO!!!

The element It defines the whole document. Start tag & end tag Its content is another HTML element (the element) See notes for & elements

HTML Links HTML links are defined with the tag The href attribute specifies the destination Example: Link text This is a link *** 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 tag The 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:

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: 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 Tip: It is a good practice to specify both the height and width attributes for an image.

HTML Tables Tables are defined with the tag. A table is divided into rows (with the tag), and each row is divided into data cells (with the tag). td stands for "table data" and holds the content of a data cell. A tag can contain text, links, images, lists, forms, other tables, etc.

Table Example row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

An HTML Table in a browser row 1, cell 1row 1, cell 2 row 2, cell 1row 2, cell 2 Row 1, cell 1 Row 1, cell 2 Note: The first line above is to set the border size

HTML Table Headers Defined with the tag. Text in the element: bold & centered Header 1 Header 2 row 1, cell 1 row 1, cell 2 row 2, cell 1 row 2, cell 2

Playing YouTube Video in HTML 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… Can build complicated web Applications --- Require fewer scripting (nice…) Cross-platform & Device-independent --- For PC, Tablet, Smartphone, Smart TV It starts with:

HTML5 - New Features The element for 2D drawing The and elements --- For media playback with Flash plugins Support for local storage --- You can run the websites locally New content-specific elements, like,,,, New form controls, like calendar, date, time, , url, search