Download presentation
Presentation is loading. Please wait.
1
HTML5 - 2 Forms, Frames, Graphics
2
ww2 accounts Your ww2 accounts are set up. You can access your homepage at ww2.cs.fsu.edu/~<CSUsername> You have a directory called “public_html” set up in your account. All your files should be in this directory. Files outside this directory will not be visible on the internet. Your homepage SHOULD be in this directory (not in a subdirectory) and SHOULD be called “index.html”. Your home directory already has a file called “index.html”. It’s essentially empty. You should replace it with your own homepage.
3
HTML Layouts Layouts were created using the <div> tag in older versions of HTML. Partitions the page into columns/blocks, each used for a specific purpose. <div> was paired with CSS styles using the id attributes. Layouts can also be created using tables, but it is not recommended. HTML5 introduces new semantic elements to handle layouts.
4
HTML5 Layouts
5
HTML5 Semantic Elements
A semantic element clearly describes its meaning to both the browser and the developer. All the layout tags in the previous slide are semantic elements. Other semantic elements include: <figure>: Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc. <figcaption>: Defines a caption for a <figure> element. <main>: Specifies the main content of a document. <mark>: Defines marked/highlighted text. <time>: Defines a date/time.
6
Iframes An iframe is used to display a web page within a web page.
Syntax: <iframe src="demo_iframe.htm" width="200" height="200" frameborder="0" name="iframe_a"></iframe> An iframe can be used as the target frame for a link. <p><a href=" target="iframe_a"> W3Schools.com</a></p>
7
<head> The <head> tag has several attributes for different purposes. <title>: specify the title of the document. <base>: specify base for all URL’s. <link>: link to an external resource. <style>: specify inline style. <meta>: specify metadata for machine parsing. <script>: usually for client-side Javascript.
8
XHTML eXtended HTML. Follows strict coding standards.
DOCTYPE, <html>, <head>, <title> and <body> are mandatory. xmlns attribute in <html> is mandatory. Attributes must be in lowercase, quoted and not minimized. Elements must be in lowercase, properly nested and closed (even when empty).
9
Forms HTML Forms are used to select different kinds of user input and pass data to the server. An HTML form can contain input elements like text fields, checkboxes, radio-buttons, submit buttons and more. A form can also contain select lists, textarea, fieldset, legend, and label elements. The <form> tag is used to create an HTML form.
10
Input Element for a Form
The <input> element is used to select user information. An <input> element can vary in many ways, depending on the type attribute. Some common <input> types are: text: defines a one-line input field that a user can enter text into. password: defines a password field. radio: let a user select ONLY ONE of a limited number of choices. checkbox: let a user select ZERO or MORE options of a limited number of choices. submit: defines a Submit button. Used to send form data to a server. Also includes the action and method attributes.
11
Other Form related tags
12
HTML5 input types HTML5 introduces several new input types: color date
datetime datetime-local month number range search tel time url week
13
HTML5 Form attributes HTML5 has several new attributes for <form> and <input>. New attributes for <form>: autocomplete novalidate New attributes for <input>: autofocus form formaction formenctype formmethod
14
HTML5 Form attributes New attributes for <input>: formnovalidate
formtarget height and width list min and max multiple pattern (regexp) placeholder required step
15
HTML Graphics: Canvas The HTML5 <canvas> element is used to draw graphics, on the fly, via scripting. The <canvas> element is only a container for graphics. By default, the <canvas> element has no border and no content. You can have multiple <canvas> elements on one HTML page. <canvas id="myCanvas" width="200" height="100"></canvas>
16
HTML Graphics: Canvas Drawing on the canvas is usually done with Javascript. Objects include, but are not limited to: Paths Text Gradients Images
17
HTML Graphics: SVG SVG stands for Scalable Vector Graphics
SVG is used to define vector-based graphics for the Web SVG defines the graphics in XML format SVG graphics do NOT lose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a W3C recommendation
18
HTML Graphics: SVG In HTML5, you can embed SVG elements directly into your HTML page. <!DOCTYPE html> <html> <body> <svg width="300" height="200"> <polygon points="100,10 40, ,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" /> </svg> </body> </html>
19
Canvas vs. SVG
Similar presentations
