1 / 18

Comprehensive Guide to HTML Forms, Iframes, and Multimedia in Web Development

This tutorial explores essential HTML elements for web development, focusing on forms, iframes, and multimedia integration. Learn how to create and style forms using various input fields, buttons, and placeholder text. Discover the versatility of iframes to embed content from other sources, including Google Maps. The tutorial also covers the `<object>` and `<embed>` elements for multimedia content and discusses image maps to create interactive links within images. Enhance your web projects with user interaction and file upload capabilities, along with best practices for accessibility and SEO.

wyman
Download Presentation

Comprehensive Guide to HTML Forms, Iframes, and Multimedia in Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. WDV 101Intro to Website Development Additional Topics

  2. Tutorial #9 Review – Forms • Forms <form> • Legend and fieldset • Fields <input> • Text • Email • Password • Radio buttons, check box, text area, select lists • Buttons (submit, reset) • Placeholder • Iframes

  3. iframes • Iframes - An inline frame is used to embed another document within the current HTML document. • Example: <iframe class="dmacc" src="http://www.dmacc.edu"></iframe> • Can style like other elements iframe.dmacc { height: 500px; width: 800px; border: solid thick red; }

  4. iframes • Some sites have really nice iframes for you to use • Google Maps has a great one (demo)

  5. Placing Multimedia • Object Element – used to embed a variety of data types • Appendix A has examples <object data =“moviename.swf” type= “application/x-shockwave-flash” classid = “” height=“400” width=“400” > <param name = “src” value=moviename.swf” /> </object>

  6. The Parameter Element • Object uses parameter <param> to define the characterizes of the object • Can only be used within the object start and end • The <embed> element can be used for when browsers have trouble with the object being used • HTML5 has <video src=“”> and <audio src=“”> elements to use video and audio within your page

  7. Image Maps • Discussed in Tutorial # 2 • An image map is an image that is divided into sections that server as links • Uses the usemap attribute to assign the value of the image map • You create the maps by defining the area • <area shape=“” coords = “x, y, r”

  8. Image Maps <imgsrc="dmacclogo2009.gif" alt="DMACC Logo" width="205" height="85" border="0" usemap="#Map" /> <map name="Map" id="Map"> <area shape="rect" coords="5,0,85,86" href="#" /> <area shape="rect" coords="100,1,205,87" href="#" /> </map> • This is a lot easier in Dreamweaver. (Demo)

  9. Java Script – Image Rotation • The simplest one here: http://www.dmacc.info/Rotate/banner.htm • The <script> element is used to define the javascript • It is placed in the <head> section (or could also be linked in) • The onload attribute of the body element calls the script in this case. • There are multiple attributes that can call js.

  10. Java Script – Image Rotation • DMACC.edu uses a WOW Slider • http://wowslider.com/?gclid=CM-qoK3vwbgCFdBcMgodHS0A3A • Costs money for use other than personal stuff but very powerful • Demo

  11. Wow Slider • Example

  12. Java Script - General • A lot of sites off free java script that you can just paste in code • Some sites have things to buy • Getting pre-made JS can really help add functionality while developing a site.

  13. Gradient Background • This was a requested topic. This site can be used to generate gradients • http://www.colorzilla.com/gradient-editor/ • Pick the style and paste the CSS into the selector you want to style. • Demo

  14. User Interaction • Users with disabilities • Government sites must follow standards.

  15. Search Engine Optimzation

  16. User File Upload • Create a form for user to enter values • Input type File used for file browser <input type="file" name="file" id="file"> • Create the PHP to handle the upload • Example: http://www.w3schools.com/PHP/php_file_upload.asp

  17. Larry’s Topics • Hosting • http://www.heartland-webhosting.com/ • Others

  18. What to do after this class • Some general ideas of things to look into if you want to continue with web development • Advanced Dreamweaver • Server Side (PHP, ASP, JSP) • Scripting (Java Script) • Photoshop (other photo editing) • Database • Web Dev at DMACC https://go.dmacc.edu/programs/webdevelopment/Pages/welcome.aspx https://go.dmacc.edu/pibs/documents/webdevaas.pdf

More Related