Download presentation
Presentation is loading. Please wait.
1
The University of Tulsa
Introduction to HTML5/CSS3 and JavaScript Akhilesh Bajaj The University of Tulsa © 2017, Akhilesh Bajaj, All Rights Reserved
2
A static web page (index.html)
3
How a web server processes a static web page
4
How JavaScript fits into this architecture
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
5
A dynamic web page at amazon.com
6
How a web server processes a dynamic web page
SQL PHP
7
An HTML file (index.html) in a browser with no CSS applied to it
HTML represents the content shown, not HOW it is shown CSS = Cascading Style Sheets, control the appearance Or HOW the content is shown
8
The code for the HTML file named index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Join List</title> <link rel="stylesheet" href=" _list.css"> <script src=" _list.js"></script> </head> <body> <main> <h1>Please join our list</h1> <form id=" _form" name=" _form" action="join.html" onsubmit="return validate Form()" method="get"> <label for=" _address1"> Address:</label> <input type=" " id=" _address1" name=" _address1" required> <span id=" _address1_error" class = "blue">*</span> <br> <label for=" _address2">Re-enter Address:</label> <input type=" " id=" _address2" name=" _address2" title="Re-Enter the same address“ placeholder="Re-enter the address" required> <span id=" _address2_error" class = "blue">*</span> <label for="first_name">First Name:</label> <input type="text" id="first_name" name="first_name" required> <span id="first_name_error" class = "green">*</span> <label for="birth_date">Birth Date:</label> <input type="date" id="birth_date" name="birth_date" required> <span id="birth_date_error" class = "green">*</span> <label for="color_choice">Select Color:</label> <input type="color" id = "color_choice" value="#00FF00"> <label> </label> <input type="submit" id="join_list" value="Join our List"> <input type="reset" id = "reset_list" name = "reset_list"> </form> </main> </body> </html>
9
The CSS File called email_list.css
body { font-family: Arial, Helvetica, sans-serif; background-color: white; margin: 0 auto; width: 670px; border: 5px solid green; padding: 0 2em 1em; } h1 { color: gray; margin-bottom: .5em; label { float: left; width: 11em; text-align: right; input { margin-left: 1em; input[text]{ border-style: groove; span { color: red; /* #first_name_error { color:green; */ .green{ .blue{ color:blue; .big { font-size:300%;
10
The code for the JavaScript file email_list.js
var $ = function(id) { return document.getElementById(id); }; var validate Form = function() { var Address1 = $(" _address1").value; var Address2 = $(" _address2").value; //DEBUG alert("value of address 1 is "+ Address1); //DEBUG alert("value of address 2 is "+ Address2); $(" _address1_error").firstChild.nodeValue = ""; $(" _address2_error").firstChild.nodeValue = ""; $("first_name_error").firstChild.nodeValue = ""; if ( Address1 !== Address2) { $(" _address2_error").firstChild.nodeValue = "This entry must equal first entry."; return false; } return true; window.onload = function() { $(" _address1").focus(); InClass: Play with the CSS file so that fields are separated from others
11
HTML div and span elements
<div> elements are generic block elements that are given an ID and/or a class, so they can be referenced in the CSS and javascript code <span> elements are generic inline elements that are also given an ID or a class, for the same reasons.
12
The primary HTML5 semantic elements or Tags
A page that’s structured with HTML5 elements
13
The HTML in a web browser
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
14
The basic HTML attributes
HTML that uses these attributes
15
HTML that can be selected by type, id, or class
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
16
CSS rule sets that select by type, id, and class
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
17
The HTML elements in a browser
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
18
Two ways to provide styles
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
19
A head element that includes two style sheets
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
20
The URL for downloading the normalize.css style sheet
Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
21
In Class Assignment Create an Interactive Web Application that allows the user to input -Sales Price(> 0) & Sales tax Percent(between 0.01 and 99.99) & Shipping charges (>0) It displays the Sales Tax and the Total Price. Use HTML5 fields for error checking, CSS for a professional look and JavaScript for the calculations.
Similar presentations
