1 / 21

HTML Basics

HTML Basics. BCHB697. Outline. Hypertext Markup Language (HTML) Headings, Paragraphs Images, Anchors Tables CSS Forms, Events. HTML. XML-style document that describes how the web-browser should present the page Focus is on human as the consumer Display, layout oriented

lunap
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 BCHB697

  2. Outline • Hypertext Markup Language (HTML) • Headings, Paragraphs • Images, Anchors • Tables • CSS • Forms, Events BCHB697 - Edwards

  3. HTML • XML-style document that describes how the web-browser should present the page • Focus is on human as the consumer • Display, layout oriented • Originally static (or generated on the server) • Now, often generated in the browser (javascript) BCHB697 - Edwards

  4. HTML Shell • head: • Information about the document • body: • (Visible) Content of the document <!DOCTYPE html> <html> <head> </head> <body> </body> </html> BCHB697 - Edwards

  5. HTML Headings & Paragraph • h1, …, h6: • Different levels of headings • p: • Paragraph (mostly optional) • br • Line break • Try Me! • Try Me! <h1>This is heading 1</h1> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nec velit dapibus scelerisque. <h2>This is heading 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque varius nec velit scelerisque.</p> <h3>This is heading 3</h3> <br/> BCHB697 - Edwards

  6. HTML Images & Anchors • Try Me • Try Me • img: Image • src: URL of image file • alt: alternative text • height: image height • width: image width • a: Anchor • href: URL to jump to • Absolute or relative • p: Paragraph • align: Text alignment <img src="image.png"/> <a href="http://...">Text</a> <p align="center"> <a href="http://..."> <img src="image.png" alt="The Image" height="100" width="300"/> </a> </p> BCHB697 - Edwards

  7. HTML Tables • table: Table • width: table width • tr: Table Row • valign: vertical alignment • th: Table Heading • align: horizontal alignment • width: cell wdith • td: Table Data/Cell • align: horizontal alignment • width: cell wdith • Try Me <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> </table> BCHB697 - Edwards

  8. HTML Tables (Vertical) • table: Table • width: table width • tr: Table Row • valign: vertical alignment • th: Table Heading • align: horizontal alignment • width: cell wdith • td: Table Data/Cell • align: horizontal alignment • width: cell wdith <table> <tr> <th>Firstname</th> <td>Jill</td> </tr> <tr> <th>Lastname</th> <td>Smith</td> </tr> <tr> <th>Age</th> <td>50</td> </tr> </table> BCHB697 - Edwards

  9. HTML Styles • Styles define how the HTML should be presented • style="" parameter in HTML element • All "traditional" HTML element display/layout attributes are available as styles (plus more) • width, height, align, valign, … • e.g. <table style="width:100%;">…</table> • Try Me, Try Me BCHB697 - Edwards

  10. Cascading Style Sheets (CSS) • Specify styles for (all) HTML elements in a consistent and reliable manner • Separate presentation from content • Ensure similar look-and-feel across entire website • Enable site-wide visual/theme changes by updating one file • Respects HTML containment structure • Can apply styles to individual elements or selectively to some elements BCHB697 - Edwards

  11. In-Page CSS • style: in-page or linked CSS • HTML element tag & key-value pairs • Try Me <!DOCTYPE html> <html> <head> <style> body {background-color: powderblue;} h1 {color: blue;} p {color: red;} </style> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> BCHB697 - Edwards

  12. Linked CSS • style: in-page or linked CSS • Absolute or relative URL • HTML element tag & key-value pairs <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> </body> </html> BCHB697 - Edwards

  13. Linked CSS styles.css body { background-color: powderblue; } h1 { color: blue; } p { color: red; } BCHB697 - Edwards

  14. HTML class, id attributes • HTML elements can be identified as members of a class or by id. Try Me! <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css"> </head> <body> <h1 id="main">This is a heading</h1> <p class="error">This is a paragraph.</p> <h1>This is a heading</h1> <p class="info">This is a paragraph.</p> <div>This is another paragraph.</div> </body> </html> BCHB697 - Edwards

  15. Linked CSS styles.css body { background-color: powderblue; } h1 { color: blue; } #main { color: green; } p.error { color: red; } p.info { color: purple; } BCHB697 - Edwards

  16. HTML Forms (Traditional) <form action="/action"> First name: <input type="text" name="firstname"/> <br/> Last name: <input type="text" name="lastname"/> <br/> <input type="submit" value="Submit"/> </form> • form: Group of input elements w/ a submit input element, action attribute is URL to receive values from the input elements • input: Obtain user input – lots of types BCHB697 - Edwards

  17. HTML Forms (Traditional) <form action="/action"> First name: <input type="text" name="firstname"/> <br/> Last name: <input type="text" name="lastname"/> <br/> <input type="submit" value="Submit"/> </form> • Require web-server to handle action • Input element name attributes provide key-value pairs, method attribute indicates GET or POST • Use table element to layout form elements BCHB697 - Edwards

  18. HTML Input (Modern) <!DOCTYPE html> <html> <body> <script> function clicked() { var elt = document.getElementById('demo'); elt.innerHTML = Date(); }; </script> <button type="button" onclick="clicked();"> Click me! </button> <div id="demo"/> </body> </html> • Use Javascript to change the page. BCHB697 - Edwards

  19. HTML Input (Modern) <!DOCTYPE html> <html> <body> <script> function changed(self) { var elt = document.getElementById('demo'); elt.innerHTML = "Input value:"+self.value; }; </script> <input type="text" onchange="changed(this);"/> <div id="demo"/> </body> </html> • Use Javascript to change the page. BCHB697 - Edwards

  20. HTML Input (Modern) <!DOCTYPE html> <html> <body> <script> function changed(self) { var elt = document.getElementById('demo'); elt.innerHTML = "Input value:"+self.value; }; </script> <input type="text" onkeypress="changed(this);"/> <div id="demo"/> </body> </html> • Use Javascript to change the page. BCHB697 - Edwards

  21. Extended Table Example • Try Me BCHB697 - Edwards

More Related