The University of Tulsa Introduction to HTML5/CSS3 and JavaScript Akhilesh Bajaj The University of Tulsa © 2017, 2018 Akhilesh Bajaj, All Rights Reserved
A static web page (index.html)
How a web server processes a static web page
How JavaScript fits into this architecture Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
A dynamic web page at amazon.com
How a web server processes a dynamic web page SQL PHP
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
The code for the HTML file named index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Join Email List</title> <link rel="stylesheet" href="email_list.css"> <script src="email_list.js"></script> </head> <body> <main> <h1>Please join our email list</h1> <form id="email_form" name="email_form" action="join.html" onsubmit="return validateEmailForm()" method="get"> <label for="email_address1">Email Address:</label> <input type="email" id="email_address1" name="email_address1" required> <span id="email_address1_error" class = "blue">*</span> <br> <label for="email_address2">Re-enter Email Address:</label> <input type="email" id="email_address2" name="email_address2" title="Re-Enter the same address“ placeholder="Re-enter the address" required> <span id="email_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>
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%;
The code for the JavaScript file email_list.js var $ = function(id) { return document.getElementById(id); }; var validateEmailForm = function() { var emailAddress1 = $("email_address1").value; var emailAddress2 = $("email_address2").value; //DEBUG alert("value of email address 1 is "+ emailAddress1); //DEBUG alert("value of email address 2 is "+ emailAddress2); $("email_address1_error").firstChild.nodeValue = ""; $("email_address2_error").firstChild.nodeValue = ""; $("first_name_error").firstChild.nodeValue = ""; if (emailAddress1 !== emailAddress2) { $("email_address2_error").firstChild.nodeValue = "This entry must equal first entry."; return false; } return true; window.onload = function() { $("email_address1").focus(); InClass: Play with the CSS file so that email fields are separated from others
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.
The primary HTML5 semantic elements or Tags A page that’s structured with HTML5 elements
The HTML in a web browser Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
The basic HTML attributes HTML that uses these attributes
HTML that can be selected by type, id, or class Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
CSS rule sets that select by type, id, and class Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
The HTML elements in a browser Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
Two ways to provide styles Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
A head element that includes two style sheets Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
The URL for downloading the normalize.css style sheet Murach's JavaScript (2nd Ed.), C1 © 2015, Mike Murach & Associates, Inc.
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.