1 / 17

HTML Basics

HTML Basics. ICS 415 Cam Moore 29 Aug 2013. What is HTML. Hypertext Markup Language Basis for the World Wide Web ASCII Text document Used by Web browsers to present text and graphics HTML documents include markup tags and plain text to describe the contents of the document.

leane
Download Presentation

HTML Basics

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. HTML Basics ICS 415 Cam Moore 29 Aug 2013

  2. What is HTML • Hypertext Markup Language • Basis for the World Wide Web • ASCII Text document • Used by Web browsers to present text and graphics • HTML documents include markup tags and plain text to describe the contents of the document

  3. HTML Versions • HTML – 1991 • HTML+ – 1993 • HTML 2.0 – 1995 • HTML 3.2 – 1997 • HTML 4.01 – 1999 • XHTML 1.0 – 2000 • HTML5 – 2012 • XHTML5 – 2013

  4. Basic HTML Page <!DOCTYPE html> <html> <head> <title>Basic HTML Page</title> </head> <body> <h1>Heading 1</h1> <p>First paragraph … </p> <a href=“link.html”>Link</a> </body> </html>

  5. DOCTYPE • Defines the document type. • HTML5 • <!DOCTYPE html> • HTML 4.01 • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”> • XHTML 1.0 • <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transistional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transistional.dtd”>

  6. HTML Tags • HTML tags are keywords surrounded by <> • <html>, <head>, <title>,… • Normally come in pairs <html>…</html> • Define HTML Elements • Basic tags: • Structure <html>, <head> and <body> • Headings <h1>, <h2>, …, <h6> • Paragraph <p> • Links <a href=“/”>Link</a> • Images <imgsrc=“hi.png”> • Comment <!-- This is a comment --> • Tags should be lower case and be closed • See: http://www.w3schools.com/tags/default.asp

  7. HTML Attributes • HTML Elements may have Attributes • Attributes provide additional information about HTML Elements • Specified in the start tag of the element • Name/Value pairs • name=“value” • Should be quoted ‘Carleton “Cam” Moore’ • Should be lower case • Standard Attributes: • class – one or more class in a style sheet • id – unique id for the element • style – inline CSS style for the element • title – extra information about the element (tooltip)

  8. HTML Head Element • The <head> element is a container for heading elements • <title> - the title of the document • <style> - defines style information for the document • <meta> - metadata about the document • <link> - defines relationship to external resource • <script> - client-side script, such as JavaScript • <noscript> - displays message if scripting is disabled in the client • <base> - specifies the base URL/target for all URLs in the page

  9. HTML Tables

  10. HTML Lists • Ordered Lists (Numbered) • <ol> • <li> • Unordered Lists (Bullets) • <ul> • <li> • Description Lists • <dl> • <dt> • <dd>

  11. HTML Blocks • <div> is a block element that can contain other HTML elements • <span> is an inline element that can contain other HTML elements • Mostly used for styling via CSS

  12. HTML Forms • Forms are used to pass information to a Server • <form> • <input> • <textarea> • <button> • <select> • <option> • <filedset> • <label>

  13. Form Example • <form name=“input” action=“example.html” method=“get”> • Username: <input type=“text” name=“user”> • <input type=“submit” value=“Submit”> • </form>

  14. Input types • Text • <input type=“text” name=“firstname”> • Password • <input type=“password” name=“pwd”> • Radio Button • <input type=“radio” name=“sex” value=“male> • Checkbox • <input type=“checkbox” name=“vehicle” value=“Car”> • Submit Button • <input type=“submit” value=“Submit”>

  15. HTML Iframes • Iframes are used to display web pages within a web page • <iframesrc=“URL”></iframe>

  16. HTML Frames • HTML Frames allow independent windows or subwindows • <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”> • The <frameset> element replaces the <body> element • Attributes: rows, cols • %, pixels, *(remainder) “1*,250,3*,10%”

  17. HTML Frames (cont) • <frame> elements inside <frameset> element • Attributes: • name – name of frame for targeting • src – URL source for frame content • frameborder – 0|1 hide or show border • marginwidth – in pixels • marginheight – in pixels • See http://www.w3.org/TR/html401/present/frames.html for more

More Related