Download presentation
Presentation is loading. Please wait.
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: body: Information about the document
(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! <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 img: Image a: Anchor Try Me p: Paragraph
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=" <p align="center"> <a href=" <img src="image.png" alt="The Image" height="100" width="300"/> </a> </p> BCHB697 - Edwards
7
HTML Tables table: Table tr: Table Row th: Table Heading
width: table width tr: Table Row valign: vertical alignment th: Table Heading align: horizontal alignment width: cell wdith td: Table Data/Cell Try Me <table> <tr> <th>Firstname</th> <th>Lastname</th> <th>Age</th> </tr> <td>Jill</td> <td>Smith</td> <td>50</td> <td>Eve</td> <td>Jackson</td> <td>94</td> </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 <table> <tr> <th>Firstname</th> <td>Jill</td> </tr> <th>Lastname</th> <td>Smith</td> <th>Age</th> <td>50</td> </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
<!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> style: in-page or linked CSS HTML element tag & key-value pairs Try Me 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; styles.css 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; styles.css BCHB697 - Edwards
16
HTML Forms (Traditional)
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 <form action="/action"> First name: <input type="text" name="firstname"/> <br/> Last name: <input type="text" name="lastname"/> <input type="submit" value="Submit"/> </form> BCHB697 - Edwards
17
HTML Forms (Traditional)
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 <form action="/action"> First name: <input type="text" name="firstname"/> <br/> Last name: <input type="text" name="lastname"/> <input type="submit" value="Submit"/> </form> BCHB697 - Edwards
18
HTML Input (Modern) Use Javascript to change the page.
<!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> BCHB697 - Edwards
19
HTML Input (Modern) Use Javascript to change the page.
<!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> BCHB697 - Edwards
20
HTML Input (Modern) Use Javascript to change the page.
<!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> BCHB697 - Edwards
21
Extended Table Example
Try Me <!DOCTYPE html> <html> <head> <style> table { font-family: arial, sans-serif; border-collapse: collapse; width: 100%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; tr:nth-child(even) { background-color: #dddddd; </style> <script> function clicked() { var company = document.getElementById("company").value; var contact = document.getElementById("contact").value; var country = document.getElementById("country").value; var newrow = document.createElement("tr"); newrow.innerHTML = "<td>"+company+"</td><td>"+contact+"</td><td>"+country+"</td>" var tbody = document.getElementById("table").children[0]; var inputrow = document.getElementById("inputrow"); tbody.insertBefore(newrow,inputrow); }; </script> </head> <body> <h2>HTML Table</h2> <table id="table"> <tr> <th>Company</th> <th>Contact</th> <th>Country</th> </tr> <td>Alfreds Futterkiste</td> <td>Maria Anders</td> <td>Germany</td> <td>Centro comercial Moctezuma</td> <td>Francisco Chang</td> <td>Mexico</td> <td>Ernst Handel</td> <td>Roland Mendel</td> <td>Austria</td> <td>Island Trading</td> <td>Helen Bennett</td> <td>UK</td> <td>Laughing Bacchus Winecellars</td> <td>Yoshi Tannamuri</td> <td>Canada</td> <td>Magazzini Alimentari Riuniti</td> <td>Giovanni Rovelli</td> <td>Italy</td> <tr id="inputrow"> <td><input id="company" type="text" value="Company"/></td> <td><input id="contact" type="text" value="Contact"/></td> <td><input id="country" type="text" value="Country"/> <button onclick="clicked();" style="float: right">Add</button> </td> </table> </body> </html> BCHB697 - Edwards
Similar presentations
![>> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.](/24/7400148/big_thumb.jpg ">> Introduction to HTML: Tables. HTML is used to give websites structure 5 Basic Tags Element = Start-Tag+Content+End-Tag Heading Tags [h1-h6] Paragraph.>")
