Advanced HTML Tags:

Outline: Today we will learning about other tags and features we can include in out webpages. Some of the new features we will learn about today are: Tables Forms iFrames Audio/Video

Tables: Tables are useful for displaying tabular data on the web, like research study results. Tables in the past were used as a way to layout a webpage, but now this is strongly discouraged. Now layouts are left up to CSS, but we will talk about that later

Tables and Table Headers: The TABLE element contains all the elements that make up a table – the header, rows, and columns. The example below shows the code and output of a table of monthly saving. Most tables start with a header row with the names of the columns. the tr element creates a row, the th elements create header cells in the row. The td elements create normal cells in a row. In the example to the right the two header columns are Month and Savings You don’t actually need the <thead> and <tbody> tags

Tables and Table Body: Tables can consist of any number of data rows after the header. The tr element creates a row, and td elements create data cells in each row One Way to provide additional info about the purpose and use of a table is via the caption element, which goes right under the table element. <table> <caption> Monthly Savings (in USD) for 2010 </caption> …. </table>

Forms: The web started as a way for people to post static(non-changing) information, but now is largely about “user-contributed content”. All that content means a lot of forms. Users see forms on social sites, login screens, banking sites and more. Forms are just areas where a user can type some input. A form consist of a form element with multiple input controls inside of it that helps retrieve user data in some way, and attributes that specify how a server should handle the form. The example below asks for a search query, and then sends the query to a Google server once submitted. A form is processed by a server, which typically takes the inputs and stores them a database.

Input Element: The input element is used for many different types of user input, depending on value of the type attribute. It defaults to a simple 1-line text input. The “name” attribute gives the server a way to identify the piece of attribute. The “value” attribute can be set to specify a default value. The “placeholder” provides a hint to the user. The “type” attribute is used to determine what type of input the user will give.

Label Element: The label element is used to caption a form control, so users know what they should put in it.

Checkboxes: The input element can be used for letting users pick multiple items in a list or simply indicate yes/no, using type=“checkbox”

Radio Buttons: Similarly, the input element can be used for creating a group of radio buttons, for letting users pick one in a list, with type=“radio”.

Range Sliders: The input element can be used for users to pick a value in a range, using type=“range”. **New, only supported in modern browsers

Select Element: The select element used with the option element produces a dropdown of options for the user to pick from.

Textarea element: To let the user specify multiple lines of text, use the textarea element, and specify cols or rows to specify a specific size.

Button Element: The button element is most commonly used to submit a form to the server, but can also be used for resetting a form or other scripted actions.

Mini Assignment up to Forms #2: Starting with the webpage from the first exercise, add tags to the webpage so that it looks like the screenshot to the right: You are adding a table with a header You are adding text input areas You are adding a dropdown menu You are adding radio buttons or check boxes You are adding a text area box You are adding a button

Iframes: You can use HTML to embed other webpages in your own page using element pointing at a URL: The iframe element makes it easy for websites to become embeddable on other websites, and for users to share content that they’ve created on a site. Most websites don’t naturally look good when embedded at small sizes, so websites create special versions that are designed for embedability, and provide users with those URLs.

Iframe Google Calendar:

Multimedia Objects Learn more about: You can use object to embed non-HTML content in your page, like a quicktime movie or a flash file. The object tag should have one or more param child tags that give info to the browser on what to embed. You must have the file located somewhere on your computer or server if you want in your HTML page. The embed tag is similar to the object tag, but is sometimes used in cases where the object tag doesn’t work. The embed tag should specify src and type attributes. <embed type=“application/x-shockwave-flash” src=“beatingheart.swf”/>

Multimedia in HTML5: In HTML5, you can embed audio or video using native HTML tags, and if the browser supports the tags, it will give users controls to play the file. The audio and video tags are both relatively new, so they only work in the most recent versions of modern browsers. To convert certain videos into a web-ready video you may have to use certain programs like FireFogg which works for the Firefox browser.

Videos: The video element embeds a video player for a particular video file. You can use these attributes to customize the video player: poster, preload, autoplay, loop, and controls.

Video Media Sources: As we saw, different browsers support different formats Thankfully, HTML5 lets us specify multiple sources for the video and audio elements, so browsers can use whichever works for them.

Audio: The audio element is used for embedding an audio player inside a page for a particular audio file. You can use various attributes to customize the player: preload, autoplay, loop, and controls.

HTML Web Assignment #3 You are going to take everything you have created previously and you are going to add the following: You are going to add an iframe tag to embed a website on your webpage: Not all sites can be imbedded on a webpage so try a couple of different ones until you find one that works. You are either going to add an object tag or a video tag to your webpage: You can use either tag to embed a video in your webpage. You can find videos online but you must find the file itself not just a YouTube link. Right click the video and look for the option that says open video in new tab. Or you can use a video you have saved on your computer if you have the file. You are going to add an audio tag to your webpage as well: You can try and find a song online. Make sure the URL ends in .mp3 or any other audio extension file name. Right click the audio player and look for the option to open the file in a new tab. You can also use an audio file saved on your computer if you have the file.