2. AGENDA
• Overview of Course
• Professor Availability Info
• Blackboard Introduction
• Grading & Grading Scale
• How to Succeed in INFO 3205 Without Really Trying
• Academic Dishonesty
• HTML Basics
6. GRADING & GRADING SCALE
100-90: A
89-85: A-
84-80: B+
79-75: B
74-72: B-
71-69: C+
68-66: C
65-63: C-
62-60: D
59-0: F
Participation 10%
5 HWs 25%
Website 50%
Presentation 15%
7. HOW TO SUCCEED IN INFO 3205
WITHOUT REALLY TRYING
• Ask questions with any issues
• Submit homework assignments on time
• Participate in class
• Come to class on time
• Focus efforts on website components!!
8. ACADEMIC DISHONESTY
• Please see Academic Dishonesty paragraphs on Course Syllabus
• Unless otherwise specified your work submitted should reflect you
completed 100% of the work and did not have any assistance from a
classmate [i.e. copying]
• You should be able to do all course work based on my instruction
and/or similar walkthroughs on YouTube
9. TOOLS NEEDED FOR CLASS
• WYSIWYG Editor
• Google WYSIWYG HTML Editor and choose the one you would like to use
• Notepad (or similar tool) to save HTML/CSS/JS files and open
them in your browser to check they work
• Adobe Suite (provided by FDU)
10. WHAT IS HTML?
• HTML is the language for describing the structure of Web pages. HTML gives
authors the means to:
• Publish online documents with headings, text, tables, lists, photos, etc.
• Retrieve online information via hypertext links, at the click of a button.
• Design forms for conducting transactions with remote services, for use in
searching for information, making reservations, ordering products, etc.
• Include spread-sheets, video clips, sound clips, and other applications directly
in their documents.
• With HTML, authors describe the structure of pages
using markup. The elements of the language label pieces of content such as
“paragraph,” “list,” “table,” and so on.
11. HTML BASICS
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size
is the attribute and +1 is the value of the attribute. that are
specified in the open bracket.
12. HTML SNIPPET
• In the following HTML snippet name the following: tag,
attribute, attribute value and value: <font size=“+1”>Test
font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code
13. STATIC VS. DYNAMIC WEBSITES
• Static Websites
• Never change
• Unless the HTML code is
changed and uploaded to web
server
• Dynamic Websites
• Can change based on an event
or data based on code on the
website
• Common occurrences of this
are dates/times on a website
14. IMPORTANT CODE
• <!DOCTYPE html>
<html lang="en">
<head>
<title>Title of the document</title>
</head>
<body>
</body>
</html>
• This HTML code indicates the title of the
web page is Important Code
• The <head> element is a container for
metadata (data about data) and is placed
between the <html> tag and the <body>
tag.
• Metadata is data about the HTML
document. Metadata is not displayed.
• Metadata typically define the document
title, character set, styles, scripts, and
other meta information.
15. <BODY></BODY> TAG
• The <body> tag defines the document's body.
• The <body> element contains all the contents of an HTML
document, such as headings, paragraphs, images, hyperlinks,
tables, lists, etc.
• Note: There can only be one <body> element in an HTML
document.
16. <UL></UL> TAG
• An unordered HTML list:
• <ul>
• <li>Coffee</li>
• <li>Tea</li>
• <li>Milk</li>
• </ul>
• The <ul> tag defines an unordered
(bulleted) list.
• Use the <ul> tag together with the
<li> tag to create unordered lists.
• Tip: Use CSS to style lists.
• Tip: For ordered lists, use the <ol>
tag.
17. <LI></LI> TAG
• The <li> tag defines a list item.
• The <li> tag is used inside ordered lists(<ol>), unordered lists (<ul>), and in menu lists
(<menu>).
• In <ul> and <menu>, the list items will usually be displayed with bullet points.
• In <ol>, the list items will usually be displayed with numbers or letters.
• Tip: Use CSS to style lists.
18. <A></A> TAG
• The <a> tag defines a hyperlink, which is used to link from one page to
another.
• The most important attribute of the <a> element is the href attribute, which
indicates the link's destination.
• By default, links will appear as follows in all browsers:
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
19. <A HREF….</A>
• How to open a link in a new browser window:
• <a href="https://www.w3schools.com" target="_blank">Visit
W3Schools.com!</a>
• The hyperlink reference is to the website, the target opens the link in
a new browser window and the text Visit W3Schools.com! is the text
listed which is linked to the website.
21. IMPORTANT TAGS
• <p></p> for writing a paragraph with text
• <b> - Bold text
• <strong> - Important text
• <i> - Italic text
• <em> - Emphasized text
• <small> - Smaller text
22. <B> AND <STRONG> TAGS
• In order to bold text you can use either the <b> or <strong>
tags
• <b>Marino</b> will show up as Marino
• <strong>Marino</strong> will show up as Marino
• Notice they are both merely bold!
23. <I> AND <EM> TAGS
• In order to italicize text you can use either the <i> or <em>
tags
• <i>Marino</i> will show up as Marino
• <em>Marino</em> will show up as Marino
• Notice they are both merely italic!
24. <SMALL> TAG
• This merely makes your text smaller without having to utilize
the size attribute or similar attributes within HTML code
• Ideally, you use this tag to deemphasize something [things that
are not important]
25. IN CLASS EXERCISE
• Using the information taught in class create an HTML file index.html where you have
a paragraph describing yourself.
• Also, create a menu with the following links: Home, Favorite Sports Teams, and
Contact Me
• Have the Favorite Sports Teams have a dropdown menu of at least three teams you
like. (Examples can include teams from Baseball, Football, Soccer, Basketball,
Hockey, College, High School, etc.)
26. IN CLASS EXERCISE GETTING STARTED
• To write a paragraph use the
<p>…</p> tag
<html>
<head>
<title>Your Name</title>
</head>
<body>
<p>Put paragraph here</p>
</body>
</html>
27. IN CLASS EXERCISE GETTING STARTED
• To create your links use the <ul> and <il> tags
• Your code should go in the header section <head>
<ul>
<li><a href="" class="current">Home</a></li>
<li><a href="">Favorite Sports Teams</a></li>
<li><a href="">Contact Me</a></li>
</ul>
28. IN CLASS EXERCISE GETTING STARTED
• You should use the <select> tag for your dropdown
<select name="teams" id="teams">
<option value="1">Team 1</option>
<option value="2">Team 2</option>
<option value="3">Team 3</option>
</select>
31. HTML REVIEW
• HTML stands for Hypertext Markup Language
• HTML consists of Tags and values
• Tags have Attributes specified as <font size=“+1”> where size is the
attribute and +1 is the value of the attribute. that are specified in the
open bracket.
• Static websites never change unless you edit the code and upload
updated version
• Dynamic websites can change based on an event or data embedded
within the code; common with dates and times
32. HTML SNIPPET
• In the following HTML snippet name the following: tag,
attribute, attribute value and value: <font size=“+1”>Test
font</font>
• Tag = font
• Attribute = size
• Attribute value = +1
• Value = Test font
• Why does </font> appear at the end?
• To close out the tag in the HTML code
33. COMMON HTML TAGS
• <html>…</html> - begins and ends the entire HTML document
• <head>…</head> - defines information about the document
• <body>…</body> - defines the document’s body
• <p>…</p> - defines a paragraph
• <ul>…</ul> - defines an unordered list
• <ol>…</ol> - defines an ordered list
• <li>…</li> - defines a list item
• <a href>…</a> - hyperlink
• <img src…./> - defines an image
35. STYLES & FONTS
STYLES
• <h1 style="color:blue;">This is
a heading</h1>
• <p style="color:red;">This is a
paragraph.</p>
FONTS
• <h1 style="font-
family:verdana;">This is a
heading</h1>
• <p style="font-
family:courier;">This is a
paragraph.</p>
36. TEXT SIZE & ALIGNMENT
SIZE
• <h1 style="font-
size:300%;">This is a
heading</h1>
• <p style="font-
size:160%;">This is a
paragraph.</p>
ALIGNMENT
• <h1 style="text-
align:center;">Centered
Heading</h1>
• <p style="text-
align:center;">Centered
paragraph.</p>
37. LANGUAGE
• <html lang="en">
• https://www.tutorialrepublic.com/html-reference/html-
language-codes.php
• All language codes listed above
38. USING IMAGES
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500"
height="600">
• img src – image source
• alt – description
• width and height should be altered depending on needs
39. IMAGES AS BACKGROUND
• <div style="background-image: url('img_girl.jpg');">
• <style>
• div {
• background-image: url('img_girl.jpg');
• }
• </style>
41. BUILDING TABLES
• Why build a table?
• Easiest way to organize info in an HTML file
• Assuming not using XML or JSON [covered later in the course]
42. TAGS FOR BUILDING A TABLE
• <table>…</table> - defines a table
• <tr>…</tr> - defines a table row, must appear within a table
• <td>…</td> - defines a table column, must appear within a table
row
• <th>…</th> - defines a table header
43. <TABLE></TABLE> TAG
• The <table> tag defines an HTML table.
• An HTML table consists of one <table> element and one or
more <tr>, <th>, and <td> elements.
44. <TR></TR> TAG
• The <tr> tag defines a row in an HTML table.
• A <tr> element contains one or more <th> or <td> elements.
45. <TD></TD> TAG
• The <td> tag defines a standard data cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <td> elements are regular and left-aligned by default.
• The text in <th> elements are bold and centered by default.
46. <TH></TH> TAG
• The <th> tag defines a header cell in an HTML table.
• An HTML table has two kinds of cells:
Header cells - contains header information (created with the <th> element)
Data cells - contains data (created with the <td> element)
• The text in <th> elements are bold and centered by default.
• The text in <td> elements are regular and left-aligned by default.
47. BUILDING AN HTML FILE WITH A TABLE
Begin with basic code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
</head>
<body>
</body>
</html>
48. ADD YOUR HEADER
• <title>New Page 1</title>
• </head>
• <h1 align="center">Your Schedule</h1>
• <body>
• By adding the <h1></h1> code you have created an overall
header
49. BEGIN CREATING YOUR TABLE
• <body>
• <table border="0" width="100%">
• </table>
• </body>
• You can play around with the thickness of the table’s border by
changing “0” to different sizes
50. BUILDING THE TABLE’S DATA
<table border="0" width="100%">
<tr>
<th>Course Name</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
51. BUILDING THE TABLE’S DATA
<tr>
<th>Instructor</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<th>Number of
Credits</th>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
53. VISUAL TABLE NOTES
• Sizes of the cells in each row will change when you replace the
code with actual text
• What do you do if you are taking more than 4 courses?
• You will need to add an additional <td></td> for each section [Course
Name, Instructor, and Number of Credits] until you have enough cells to
cover all of your courses for the table you create in Assignment 2
54. <DIV></DIV> TAG
• The <div> tag defines a division or a section in an HTML document.
• The <div> tag is used as a container for HTML elements - which is
then styled with CSS or manipulated with JavaScript.
• The <div> tag is easily styled by using the class or id attribute.
• Any sort of content can be put inside the <div> tag!
• Note: By default, browsers always place a line break before and after
the <div> element.
• For our purpose, it is important to note the <div> tag serves as a
break for a paragraph [<p></p> tag]
55. HTML REVIEW
• <a href=“websitelink.com”>Website Link</a> serves as code
for hyperlinking a website
• As discussed href is “hyperlink reference”
• The <h1></h1> tag represents a header
• <h2></h2>, <h3></h3>, etc. also exist and get smaller
56. KEEP IN MIND NOW, BUT FOR LATER
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text
58. BUILDING OUR GALLERY
<table border="0" width="100%">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Change the
highlighted 0 to a
larger number so we
can see the border
59. PICTURE GALLERY
• The code on the previous slide only gives us 4 boxes
• How do we get our 16?
60. WHERE DO
WE GET
IMAGES?
• https://www.freeim
ages.com/search/b
aseball
• Or search Google
for free use images
62. EMBEDDING IMAGES
• <img src="img_girl.jpg" alt="Girl in a jacket" width="500"
height="600">
• Where img src is your image source
• alt is your alternate description of the image
• width and height should be modified so that all pictures line up
63. HOW IT LOOKS?
• <td><img src="https://media.istockphoto.com/photos/baseball-
with-clipping-path-picture-
id177401325?b=1&k=20&m=177401325&s=170x170&h=AK3kCSU
XA7K8BsjeydSH3U5oNEkezA2gZ9c9KuDkJZg=" alt="baseball"
width="100" height="100"></td>
• Use the direct image source for now, once we have an image saved to
our web space the img src is much shorter like in previous example
66. OF NOTE
• You don’t need to use alt tag if you don’t want to
• You can remove the table border once all 16 images are there
• You want to use the same height for each image
69. REMINDER FROM HTML LESSON
• <form>…</form> - defines a form
• <input type…/> - defines a form input
• button
checkbox
file
hidden
image
password
radio
reset
submit
text
70. INPUTS - HTML
<input type="text"> Displays a single-line text input field
<input type="radio"> Displays a radio button (for selecting
one of many choices)
<input type="checkbox"> Displays a checkbox (for selecting
zero or more of many choices)
<input type="submit"> Displays a submit button (for
submitting the form)
<input type="button"> Displays a clickable button
79. UNDERSTANDING PHP
• A PHP script can be placed anywhere in the document.
• A PHP script starts with <?php and ends with ?>:
• <?php
• // PHP code goes here
• ?>
• The default file extension for PHP files is ".php".
• A PHP file normally contains HTML tags, and some PHP scripting code.
83. USING PHP TO UPLOAD FILES - HTML
<html>
<body>
<form action="upload.php" method="post" enctype="multipart/form-data">
Select image to upload:
<input type="file" name="fileToUpload" id="fileToUpload">
<input type="submit" value="Upload Image" name="submit">
</form>
</body>
</html>
84. UPLOAD.PHP
<?php
$target_dir = "uploads/";
$target_file = $target_dir . basename($_FILES["fileToUpload"]["name"]);
$uploadOk = 1;
$imageFileType = strtolower(pathinfo($target_file,PATHINFO_EXTENSION));
// Check if image file is a actual image or fake image
if(isset($_POST["submit"])) {
$check = getimagesize($_FILES["fileToUpload"]["tmp_name"]);
if($check !== false) {
echo "File is an image - " . $check["mime"] . ".";
$uploadOk = 1;
} else {
echo "File is not an image.";
$uploadOk = 0;
}
}
85. UPLOAD.PHP
// Check if file already exists
if (file_exists($target_file)) {
echo "Sorry, file already exists.";
$uploadOk = 0;
}
// Check file size
if ($_FILES["fileToUpload"]["size"] > 500000) {
echo "Sorry, your file is too large.";
$uploadOk = 0;
}
// Allow certain file formats
if($imageFileType != "jpg" && $imageFileType != "png" && $imageFileType != "jpeg"
&& $imageFileType != "gif" ) {
echo "Sorry, only JPG, JPEG, PNG & GIF files are allowed.";
$uploadOk = 0;
}
86. UPLOAD.PHP
// Check if $uploadOk is set to 0 by an error
if ($uploadOk == 0) {
echo "Sorry, your file was not uploaded.";
// if everything is ok, try to upload file
} else {
if (move_uploaded_file($_FILES["fileToUpload"]["tmp_name"], $target_file)) {
echo "The file ". htmlspecialchars( basename( $_FILES["fileToUpload"]["name"])). " has been
uploaded.";
} else {
echo "Sorry, there was an error uploading your file.";
}
}
?>
87. WHAT IS THE PHP CODE DOING?
• PHP script explained:
• $target_dir = "uploads/" - specifies the directory where the file is
going to be placed
• $target_file specifies the path of the file to be uploaded
• $uploadOk=1 is not used yet (will be used later)
• $imageFileType holds the file extension of the file (in lower case)
• Next, check if the image file is an actual image or a fake image
88. PHP OPEN AND READ
• <?php
• $myfile = fopen("webdictionary.txt", "r") or die("Unable to open
file!");
• echo fread($myfile,filesize("webdictionary.txt"));
• fclose($myfile);
• ?>
89. PHP CREATE AND WRITE
• <?php
• $myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
• $txt = "John Doen";
• fwrite($myfile, $txt);
• $txt = "Jane Doen";
• fwrite($myfile, $txt);
• fclose($myfile);
• ?>
90. PHP/FORMS IN CLASS ASSIGNMENT
Using PHP, JavaScript and/or HTML create a Contact form which will accept Name,
Email, and Comment as inputs. The Submit button can either return the input or
provide an external webpage noting your input has been emailed.
92. HAVE TO EDIT WELCOME.PHP
<html>
<body>
Welcome <?php echo $_POST["name"]; ?><br>
Your email address is: <?php echo $_POST["email"]; ?>
Your comment was: <?php echo $_POST["comment"]; ?>
</body>
</html>
93. TO SEND VIA EMAIL
<?php
$from = "matt.marino@shu.edu";
$to = "dspace-community@googlegroups.com";
$message = "Unsubscribe";
$info = "Unsubscribe";
$check = mail($to, "Unsubscribe",
$message, "From:matt.marino@shu.edu");
if ($check != true) { echo "Sorry... Error Sending E-Mail. E-Mail NOT Sent.";}
else { echo "Thank You. Your E-Mail Has Been Sent... We Will Get Back To You
Shortly...";}
Create a file
mailtest.php and
upload to your
courses web space
Change the to
To your email address,
so you get the inputs
94. HTML FOR EMAIL
<html>
<body>
<form action=“mailtest.php" method="post">
Name: <input type="text" name="name"><br>
E-mail: <input type="text" name="email"><br>
Comment: <input type="text" name="comment"><br>
<input type="submit">
</form>
</body>
</html>
PHP files must be live on a web
server to work properly
95. ECHOING FORM DATA HTML CODE
<HTML>
<HEAD>
<TITLE> Echoing Form Data Example </TITLE>
</HEAD>
<form method="post" action="echo.php">
<label for="name">What is your name?</label> <input type="text" name="name"
id="name"><br>
<label for="yearborn">What year were you born? <input type="text" name="yearborn"
id="yearborn"><br>
<label for="favcolor">What is your favorite color? <input type="text" name="favcolor"
id="favcolor"><br>
<input type="Submit" value="Submit to Test PHP Script">
</form>
</BODY>
</HTML>
96. ECHOING FORM DATA PHP CODE
(ECHO.PHP)
<HTML>
<HEAD>
<TITLE> Echoing Form Data Example
</TITLE>
</HEAD>
<?php
// Initialize variables from form
$name = $_POST['name'];
$favcolor = $_POST['favcolor'];
$yearborn = $_POST['yearborn'];
// encode any special characters in these
variables
$encoded_name = htmlentities($name);
$encoded_favcolor = htmlentities($favcolor);
print("<body
// print the person's name
print("Hello $encoded_name<br>");
$currentdate = getdate();
$year = $currentdate["year"];
// Calculate age using the $yearborn field
from the submitted form
$age = $year - $yearborn;
// print the person's age
print("You are $age years old");
?>
</BODY>
</HTML>
97. WRITING FORM DATA TO A FILE ON THE
SERVER HTML CODE
<HTML>
<HEAD>
<TITLE> Writing Form Data to a File on the Server Example </TITLE>
</HEAD>
<form method="post" action=“write.php">
<label for="name">What is your name?</label> <input type="text" name="name"
id="name"><br>
<label for="yearborn">What year were you born? <input type="text" name="yearborn"
id="yearborn"><br>
<label for="favcolor">What is your favorite color? <input type="text" name="favcolor"
id="favcolor"><br>
<input type="Submit" value="Submit to Test PHP Script">
</form>
</BODY>
</HTML>
98. WRITING FORM DATA TO A FILE ON THE
SERVER PHP CODE (WRITE.PHP)
<HTML>
<HEAD>
<TITLE> Writing Form Data to a File on the Server Example </TITLE>
</HEAD>
<BODY>
<?php
// The next line opens a file handle to a file called output.txt
// the file handle is like an alias to the file
// the a in the fopen function means append so entries
// will be appended to the output.txt file
$out = fopen("outputoutput.txt", "a");
// if the file could not be opened for whatever reason, print
// an error message and exit the program
if (!$out) {
print("Could not append to file");
exit;
}
// fputs writes output to a file. the syntax is where
to write
// followed by what to write
// $name is the contents of the name field in the
sample form
// t represents a tab character and n represents
a new line
fputs($out,"$_POST[name]t");
fputs($out,"$_POST[yearborn]t");
fputs($out,"$_POST[favcolor]t");
fputs($out,"$_SERVER[REMOTE_ADDR]n");
print("Thanks you for completing our survey.");
fclose($out);
?>
</BODY>
</HTML>
99. UPLOADING FILES HTML CODE
<HTML>
<HEAD>
<TITLE> Uploading Files Example </TITLE>
</HEAD>
<form enctype="multipart/form-data" action="upload.php"
method="POST">
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
Choose a file to upload: <input name="uploadedfile" type="file"
/><br />
<input type="submit" value="Upload File" />
</form>
</BODY>
100. UPLOADING FILES PHP CODE (UPLOAD.PHP)
<HTML>
<HEAD>
<TITLE> Uploading Files - place file in
uploads folder </TITLE>
</HEAD>
<BODY>
<?php
$target_path = "uploads/";
$target_path = $target_path . basename(
$_FILES['uploadedfile']['name']);
if(move_uploaded_file($_FILES['uploadedfile']['tmp_name'],
$target_path)) {
echo "The file ". basename(
$_FILES['uploadedfile']['name']).
" has been uploaded";
} else{
echo "There was an error uploading the file, please try
again!";
}
?>
</BODY>
</HTML>
101. VOTE EXAMPLE HTML CODE
<HTML>
<HEAD>
<TITLE> Vote to end class </TITLE>
</HEAD>
<form method="post" action="vote.php">
<label for="name">What is your name?</label> <input type="text" name="name" id="name"><br>
<p>Should we end Class now?</p>
<p>
<input type="radio" name="vote" value="Yes">Yes
<input type="radio" name="vote" value="No">No
<input type="radio" name="vote" value="Maybe">Maybe
<p align="left"><input type="submit" value="Submit" name="B1"><input type="reset" value="Reset"
name="B2"></p>
</form>
</BODY>
</HTML>
102. VOTE EXAMPLE PHP CODE (VOTE.PHP)
<HTML>
<HEAD>
<TITLE> Recording Vote </TITLE>
</HEAD>
<BODY>
<?php
$out = fopen("outputvote.txt", "a");
if (!$out) {
print("Could not append to file");
exit;
}
fputs($out,"$_POST[name]t");
fputs($out,"$_POST[vote]n");
print("Thank you for voting");
fclose($out);
?>
</BODY>
</HTML>
104. BIRTHDAY PHP CODE (BDAY.PHP)
<HTML>
<HEAD>
<TITLE> Birthday results </TITLE>
</HEAD>
<BODY>
<?php
$out = fopen("outputbirthday.txt", "a");
if (!$out) {
print("Could not append to file");
exit;
}
fputs($out,"$_POST[name]t");
fputs($out,"$_POST[month]t");
fputs($out,"$_POST[day]n");
print("Thank you for entering your birthday");
fclose($out);
?>
</BODY>
</HTML>
105. TIMESTAMPS HTML CODE
<HTML>
<BODY style="background-color:orange">
<HEAD>
<TITLE> Time stamped comments </TITLE>
</HEAD>
<form method="post" action="timestamp.php">
<p> Enter your comments:
<p>
<textarea rows="5" cols="30" name="comment" wrap="physical"></textarea><br />
<input type="Submit" value="Submit Comments">
</form>
</BODY>
</HTML>
106. TIMESTAMPS PHP CODE (TIMESTAMP.PHP)
<HTML>
<HEAD>
<TITLE> Timestamped Comments </TITLE>
</HEAD>
<?php
$name = $_POST['comment'];
$out = fopen("outputtimestamps.txt", "a");
if (!$out) {
print("Could not append to file");
exit;
}
fputs($out,"Comment timestamp: ");
fputs($out,date("m/j/y h:i", time()));
fputs($out,"...IP address: ");
fputs($out,$_SERVER[REMOTE_ADDR]);
fputs($out,"n");
fputs($out,"$_POST[comment]nn");
print("Thank you. Your comments are
important to us. ");
fclose($out);
?>
</BODY>
</HTML>
107. HTML ASSIGNMENT
• Create a file called schedule.html to be uploaded to Blackboard.
• schedule.html should contain an introduction to yourself
followed by a table including your course schedule and an
image you feel represents each of your classes. For example, if
you feel a course is chaotic you might use an image of people
playing dodgeball.
109. WHY CSS?
• CSS stands for Cascading Style Sheets.
• CSS saves a lot of work. It can control the layout of multiple
web pages all at once.
• Websites generally have sub-folders where CSS files are stored
110. SYNTAX
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?
111. STYLESHEETS
• While HTML defines where structures start and end, stylesheets
define what they look like
• When used properly, stylesheets allow for a consistent look and feel
throughout a website with one simple change of a file
• They are defined in three different ways:
• External: the styles are defined in a .css file (preferred)
• Internal: the styles are defined inside the HTML file, usually in the
header section
• Inline: the style is defined inside an existing tag, usually in the body
section
112. HOW TO USE THE 3 METHODS
• Inline - by using the style attribute inside HTML elements
• Internal - by using a <style> element in the <head> section
• External - by using a <link> element to link to an external CSS
file
113. INLINE EXAMPLE
• An inline CSS is used to apply a unique style to a single HTML
element.
• An inline CSS uses the style attribute of an HTML element.
• The following example sets the text color of the <h1> element
to blue, and the text color of the <p> element to red:
• <h1 style="color:blue;">A Blue Heading</h1>
• <p style="color:red;">A red paragraph.</p>
114. INTERNAL EXAMPLE
• An internal CSS is used to define a style for a
single HTML page.
• An internal CSS is defined in the <head>
section of an HTML page, within a <style>
element.
• The following example sets the text color of
ALL the <h1> elements (on that page) to
blue, and the text color of ALL the <p>
elements to red. In addition, the page will be
displayed with a "powderblue" background
color:
<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>
115. EXTERNAL EXAMPLE [MOST COMMON]
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
117. BEYOND CSS BASICS
• With CSS, you can control:
• Color
• Font
• size of text
• spacing between elements
• how elements are positioned and laid out
• what background images or background colors to be used
• different displays for different devices and screen sizes
118. CHANGING STYLESHEETS
• Changing a stylesheet on the fly can be done on the server when the
request is received. For example, the webserver can determine the
type of browser (Internet Explorer, Firefox, Chrome, iPhone,
Blackberry) and render the page appropriately
• You can also give that functionality to the user. Perhaps the user
might want a larger font or a different color. With JavaScript, you can
create a button that changes the stylesheet for the entire page.
119. TWO MORE STYLESHEET EXAMPLES
• styles.css
h1 {
border: 2px black solid;
color: black;
}
.justified {
text-align: left;
}
• styles2.css
h1 {
border: 2px red solid;
color: red;
}
.justified {
text-align: right;
}
120. HOW STYLESHEETS ARE PUT TOGETHER
• Each style in a style sheet has three parts:
• A selector
• One or more properties
• One or more values for each property
• Syntax
selector {
property1: value1 [value2 …];
property2: value1 [value2 …];
}
• To associate a style sheet to an HTML document, use the <link> tag within the head tag:
• <link href=“styles.css” rel=“stylesheet” type=“text/css” />
121. STYLESHEET STYLES
• #id – ID’s are used to define large structures in an HTML
document. Each id can be used only once in each HTML
document.
• .class – Classes are styles that can be reused and applied to
different elements via a class parameter, such as <h1
class=“name”> …</h1>
124. <STYLE></STYLE> TAG
• The <style> tag is very important when using CSS code inside
an HTML file
• All the CSS code must be in between the <style> and </style>
• Otherwise it is not recognized
125. CSS PROPERTIES
• The CSS color property defines the text color to be used.
• The CSS font-family property defines the font to be used.
• The CSS font-size property defines the text size to be used.
126. CSS PROPERTIES
• The CSS border property defines a border around an HTML
element.
• The CSS padding property defines a padding (space) between
the text and the border.
• The CSS margin property defines a margin (space) outside the
border.
127. CSS PROPERTIES
• Use the HTML style attribute for
inline styling
• Use the HTML <style> element to
define internal CSS
• Use the HTML <link> element to
refer to an external CSS file
• Use the HTML <head> element to
store <style> and <link> elements
• Use the CSS color property for text
colors
• Use the CSS font-family property
for text fonts
• Use the CSS font-size property for
text sizes
• Use the CSS border property for
borders
• Use the CSS padding property for
space inside the border
• Use the CSS margin property for
space outside the border
128. CSS LINKING [EXTERNAL]
• This example uses a full URL to link to a style sheet:
• <link rel="stylesheet" href="https://www.w3schools.com/html/styles.css">
• This example links to a style sheet located in the html folder on the current
web site:
• <link rel="stylesheet" href="/html/styles.css">
• This example links to a style sheet located in the same folder as the current
page:
• <link rel="stylesheet" href="styles.css">
130. OVERWRITING LINK DEFAULTS
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link
131. IN CLASS EXERCISE
Create a CSS file called example.css where you set a background color, header color
and alignment, and text color, size and font.
134. EXAMPLE.CSS TEXT COLOR, SIZE, AND
FONT
<style>
p {
color: blue;
size: 12px;
font: serif;
}
</style>
135. CHECK EXAMPLE.CSS IN WYSIWYG FIRST
• Put all of your pieces into the <style> tag within the <head>
section of your HTML “test” using your WYSIWYG
• Once checked, pull everything out of the <style> … </style>
tag and put into Notepad – save as example.css
136. SHOW HOW INTERNAL WORKS
• Reference in an HTML file
• See if it works!
137. QUICK REVIEW
• 3 Elements to a CSS Statement
• Selector
• What HTML sections does it affect?
• Property
• What attribute of that HTML section will be affected?
• Value
• What change will be made to that attribute?
138. QUICK REVIEW
• External – separate .css file
• Internal – inside the <style> tag
• Inline – on the same line of code using the style attribute
139. CSS INHERITANCE
• Used when you have many sections of a website/web page and
want them to look differently
• Each section can be modified using both internal and inline CSS
code
• Works like programming languages, such as Java or Python
140. GENERAL CSS – REMEMBER?
• Uses our tags like paragraph <p> or header <h1> or <body>
<style>
p {
color: red;
}
</style>
Internal CSS
141. INHERITANCE CSS
• First, create a class
<style>
.bobdole {
background-color: red;
color: blue;
}
</style>
Internal CSS
143. ANOTHER EXAMPLE
<!DOCTYPE html>
<html>
<head>
<style>
.intro {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Welcome to My Homepage</h1>
<div class="intro">
<p>My name is Jerry.</p>
<p>George is unemployed and lives with his
parents.</p>
</div>
<p>My neighbor is Kramer.</p>
<p class="intro">Gene sounds like Mickey.</p>
</body>
</html>
144. OVERWRITING LINK DEFAULTS
• a:link {color:#FF0000;}
• color to apply to link before it’s visited
• a:visited {color:#00FF00;}
• color to apply to link before it’s visited
• a:hover {color:#FF00FF;}
• color to apply to link while mouse pointer is over it
• a:active {color:#0000FF;}
• color to apply while left mouse button is held down on link
145. LINK DEFAULTS
• By default, a link will appear like this (in all browsers):
• An unvisited link is underlined and blue
• A visited link is underlined and purple
• An active link is underlined and red
• You can change the link state colors, by using CSS:
165. IN CLASS EXERCISE
Change your html page created in In Class Exercise 1 to include CSS code so that your
links and paragraph section are different colors, size, and font. Make sure to use
internal CSS code (i.e. code in the HTML file).
167. CSS HEIGHT AND WIDTH
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
179. CSS IMAGE GALLERY EXAMPLE
@media only screen and (max-width: 700px) {
.responsive {
width: 49.99999%;
margin: 6px 0;
}
}
@media only screen and (max-width: 500px) {
.responsive {
width: 100%;
}
}
180. CSS IMAGE GALLERY EXAMPLE
.clearfix:after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<h2>Responsive Image Gallery</h2>
<h4>Resize the browser window to see the effect.</h4>
181. CSS IMAGE GALLERY EXAMPLE
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_5terre.jpg">
<img src="img_5terre.jpg" alt="Cinque Terre"
width="600" height="400">
</a>
<div class="desc">Add a description of the
image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_forest.jpg">
<img src="img_forest.jpg" alt="Forest"
width="600" height="400">
</a>
<div class="desc">Add a description of the
image here</div>
</div>
</div>
182. CSS IMAGE GALLERY EXAMPLE
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_lights.jpg">
<img src="img_lights.jpg" alt="Northern
Lights" width="600" height="400">
</a>
<div class="desc">Add a description of the
image here</div>
</div>
</div>
<div class="responsive">
<div class="gallery">
<a target="_blank" href="img_mountains.jpg">
<img src="img_mountains.jpg"
alt="Mountains" width="600" height="400">
</a>
<div class="desc">Add a description of the
image here</div>
</div>
</div>
183. CSS IMAGE GALLERY EXAMPLE
<div class="clearfix"></div>
<div style="padding:6px;">
<p>This example use media queries to re-arrange the images on different screen sizes:
for screens larger than 700px wide, it will show four images side by side, for screens
smaller than 700px, it will show two images side by side. For screens smaller than 500px,
the images will stack vertically (100%).</p>
<p>You will learn more about media queries and responsive web design later in our CSS
Tutorial.</p>
</div>
</body>
</html>
185. CSS ROTATE
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
background-color: yellow;
border: 1px solid black;
}
div#myDiv {
transform: rotate(20deg);
}
</style>
</head>
<body>
<h1>The rotate() Method</h1>
<p>The rotate() method rotates an element
clockwise or counter-clockwise.</p>
<div>
This a normal div element.
</div>
<div id="myDiv">
This div element is rotated clockwise 20
degrees.
</div>
</body>
</html>
186. CSS TRANSITION
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background: red;
transition: width 2s, height 4s;
}
div:hover {
width: 300px;
height: 300px;
}
</style>
</head>
<body>
<h1>The transition Property</h1>
<p>Hover over the div element below,
to see the transition effect:</p>
<div></div>
</body>
</html>
187. CSS ANIMATION
<html>
<head>
<style>
div {
width: 100px;
height: 100px;
background-color: red;
position: relative;
animation-name: example;
animation-duration: 4s;
}
@keyframes example {
0% {background-color:red; left:0px; top:0px;}
25% {background-color:yellow; left:200px;
top:0px;}
50% {background-color:blue; left:200px;
top:200px;}
75% {background-color:green; left:0px;
top:200px;}
100% {background-color:red; left:0px; top:0px;}
}
</style>
</head>
<body>
<h1>CSS Animation</h1>
<div></div>
<p><b>Note:</b> When an animation is finished,
it goes back to its original style.</p>
</body>
</html>
189. CSS THUMBNAIL IMAGE AS LINK
<html>
<head>
<style>
img {
border: 1px solid #ddd;
border-radius: 4px;
padding: 5px;
width: 150px;
}
img:hover {
box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);
}
</style>
</head>
<body>
<h2>Thumbnail Image as Link</h2>
<p>Use the border property to create thumbnail
images. Wrap an anchor around the image to use it
as a link.</p>
<p>Hover over the image and click on it to see the
effect.</p>
<a target="_blank" href="paris.jpg">
<img src="paris.jpg" alt="Paris"
style="width:150px">
</a>
</body>
</html>
203. CSS HOVERABLE BUTTONS
</style>
</head>
<body>
<h2>Hoverable Buttons</h2>
<p>Use the :hover selector to change the style of the button when you move the mouse over
it.</p>
<p><strong>Tip:</strong> Use the transition-duration property to determine the speed of the
"hover" effect:</p>
<button class="button button1">Green</button>
<button class="button button2">Blue</button>
<button class="button button3">Red</button>
<button class="button button4">Gray</button>
<button class="button button5">Black</button>
</body>
</html>
204. CSS ASSIGNMENT
• Create an HTML file called dropdown.html where you utilize internal
CSS to create a dropdown menu AND set CSS parameters [color,
alignment, etc.] for your headers and paragraphs.
• Your dropdown menu should include a Home, About Me, Class Info,
and Contact Me pages listed. Create dropdowns for both the About
Me and Class Info sections.
206. XHTML BASICS
• XHTML stands for EXtensible HyperText Markup Language
• XHTML is a stricter, more XML-based version of HTML
• XHTML is HTML defined as an XML application
• XHTML is supported by all major browsers
207. XHTML FOR THE EXPERTS
• XML is a markup language where all documents must be
marked up correctly (be "well-formed").
• XHTML was developed to make HTML more extensible and
flexible to work with other data formats (such as XML). In
addition, browsers ignore errors in HTML pages, and try to
display the website even if it has some errors in the markup. So
XHTML comes with a much stricter error handling.
208. STRICT?
• <!DOCTYPE> is mandatory
• The xmlns attribute in <html> is mandatory
• <html>, <head>, <title>, and <body> are mandatory
• Elements must always be properly nested
• Elements must always be closed
• Elements must always be in lowercase
• Attribute names must always be in lowercase
• Attribute values must always be quoted
• Attribute minimization is forbidden
209. EXAMPLE XHTML CODE
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
• "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
• <html xmlns="http://www.w3.org/1999/xhtml">
• <head>
• <title>Title of document</title>
• </head>
• <body>
• some content here...
• </body>
• </html>
210. COMPARED TO HTML CODE
• <html>
• <head>
• </head>
• <body>
• </body>
• </html>
211. IMPORTANCE OF XHTML
• XHTML documents are XML conforming as they are readily viewed,
edited, and validated with standard XML tools.
• XHTML documents can be written to operate better than they did
before in existing browsers as well as in new browsers.
• XHTML documents can utilize applications such as scripts and
applets that rely upon either the HTML Document Object Model or
the XML Document Object Model.
• XHTML gives you a more consistent, well-structured format so that
your webpages can be easily parsed and processed by present and
future web browsers.
212. IMPORTANCE OF XHMTL
• You can easily maintain, edit, convert and format your document in
the long run.
• Since XHTML is an official standard of the W3C, your website
becomes more compatible with many browsers and it is rendered
more accurately.
• XHTML combines strength of HTML and XML. Also, XHTML pages can
be rendered by all XML enabled browsers.
• XHTML defines quality standard for your webpages and if you follow
that, then your web pages are counted as quality web pages. The
W3C certifies those pages with their quality stamp.
213. XML BASICS
• Stands for eXtensible Markup Language
• Used to define customized markup languages
• We are already familiar with XML since we understand HTML
214. INTERESTING XML NOTES
• XML is a software- and hardware-independent tool for storing and
transporting data.
• XML was designed to store and transport data
• XML was designed to be self-descriptive
• Maybe it is a little hard to understand, but XML does not DO
anything.
215. XML JUST STORES DATA
• XML is just information wrapped in tags.
• XML is the parent language to HTML
• XML is used to contain data, not to display data
• XML tags are custom, defined by the author.
• HTML can enrich XML data but neither can replace the other.
One is used for storing (XML) and the other is used for
displaying (HTML).
216. XML RULES
• XML elements must follow these rules:
• Can contain letters, numbers and other characters
• Can’t start with a number or punctuation character
• Can’t start with ‘xml’
• Can’t contain spaces
217. WRITING IN XML
• XML attributes must be quoted as in: <employee type=‘permanent’>
• Alternatively, you can write
• <employee>
<type>permanent</type>
</employee>
• Both above examples accomplish the same goal and there are no
rules as to which one is right. The second example is easier to read
and looks nicer.
218. XML VS. HTML
• XML was designed to carry data - with focus on what data is
• HTML was designed to display data - with focus on how data
looks
• XML tags are not predefined like HTML tags are
219. YOU DEFINE XML TAGS
• The XML language has no predefined tags.
• Tags are "invented" by the author of the XML document.
• HTML works with predefined tags like <p>, <h1>, <table>, etc.
• With XML, the author must define both the tags and the document
structure.
220. WHY USE XML?
• It simplifies data sharing
• It simplifies data transport
• It simplifies platform changes
• It simplifies data availability
221. MORE REASONS TO USE XML
• XML stores data in plain text format. This provides a software- and
hardware-independent way of storing, transporting, and sharing
data.
• XML also makes it easier to expand or upgrade to new operating
systems, new applications, or new browsers, without losing data.
• With XML, data can be available to all kinds of "reading machines"
like people, computers, voice machines, news feeds, etc.
222. IN WHAT WAYS CAN WE USE XML?
• Create a list of books
• Create a list of transactions
• Create a news article header
• Detail weather service information
• And much, much more!
223. XML EXAMPLE CODE
• <?xml version="1.0" encoding="UTF-8"?> Prolog
• <note> Root
• <to>Tove</to>
• <from>Jani</from>
• <heading>Reminder</heading>
• <body>Don't forget me this weekend!</body>
• </note> notice all have closing tags like HTML!!!!
224. XML CAN USE HTML TAGS
• Tags you have previously seen can be used in XML, such as:
• <b></b> for bold text
• <i></i> for italicized text
225. ATTRIBUTES MUST BE QUOTED
• <note date="12/18/1953">
• <to>Tove</to>
• <from>Jani</from>
• </note>
• In this example our attribute is our date 12/18/1953
226. ENTITY REFERENCES
< < less than
> > greater than
& & ampersand
' ' apostrophe
" " quotation mark
Entity references help you to avoid errors
227. COMMENTS IN XML
• <!-- This is a comment -->
• This exact structure is required for XML comments
228. XML ELEMENTS
• An element can contain:
• Text
• Attributes
• other elements
• or a mix of the above
• Examples could be <rate>19.99</rate>
229. XML NAMING RULES REMINDER
• XML elements must follow these naming rules:
• Element names are case-sensitive
• Element names must start with a letter or underscore
• Element names cannot start with the letters xml (or XML, or Xml, etc)
• Element names can contain letters, digits, hyphens, underscores, and
periods
• Element names cannot contain spaces
• Any name can be used, no words are reserved (except xml).
230. STANDARDS ADVISING NAMING RULES
• Create descriptive names, like this: <person>, <firstname>, <lastname>.
• Create short and simple names, like this: <book_title> not like this: <the_title_of_the_book>.
• Avoid "-". If you name something "first-name", some software may think you want to subtract "name" from "first".
• Avoid ".". If you name something "first.name", some software may think that "name" is a property of the object "first".
• Avoid ":". Colons are reserved for namespaces (more later).
• Non-English letters like éòá are perfectly legal in XML, but watch out for problems if your software doesn't support
them.
233. XSLT
• XSLT - eXtensbile Stylesheet Language Transformations
• XSLT transform XML into HTML, before it is displayed by a
browser
• You can transform a XML document into an HTML document
just by linking the XML document to the XSLT file by using the
following line:
• <?xml-stylesheet type="text/xsl" href="xsltexample.xsl"?>
234. ANOTHER XML EXAMPLE
• <xml>
<addressbook>
<address>
<name>Mark Nazzaro</name>
<email>nazzarma@shu.edu</email>
</address>
<address>
<name>David Rosenthal</name>
<email>rosentdv@shu.edu</email>
</address>
</addressbook>
</xml>
235. JSON BASICS
• JSON stands for JavaScript Object Notation
• JSON is easier to parse than XML
• Properties make up a JSON object
• JSON.parse() parses retrieved data
• JSON.stringify() converts a JavaScript object into a string
236. JSON VS. XML
• Syntax for storing and
exchanging data
• Similar to XML:
• Hierarchical – values embedded
within values
• Human readable
• Both can use XMLHttpRequest
• Different from XML:
• No tags
• Shorter
• Quicker to read and write
• JSON uses arrays
• Easier to parse JSON
237. JSON OBJECT EXAMPLE
• A car is an object which has three properties describing it
• Make – String value representing the make of the car
• Model – String value representing the model of the car
• Price – Numeric value representing the price of the car
238. HOW THAT LOOKS IN XML
<car>
<make>Chevrolet</make>
<model>Suburban</model>
<price>60000</price>
</car>
239. HOW IT LOOKS IN JSON
{
"make": "Chevrolet",
"model": "Suburban",
"price": 60000
}
241. ACCESSING VALUES IN OBJECTS
• In order to access the values of an object, you
can use the dot (.) notation
myObj =
{“firstName”:”Matt”,”lastName”:”Marino”,”a
ge”:34};
firstName = myObj.firstName;
lastName = myObj.lastName;
age = myObj.age;
• You can also access the values using a bracket
notation
firstName = myObj[“firstName”];
lastName = myObj[“lastName”];
age = myObj[“age”];
• You can also access all of the values using a for
loop:
for (x in myObj)
{
}
242. PARSING
• When data is received from a web server, it can be parsed with
JSON.parse() and it becomes a JavaScript object.
var text = '{ "name":"John", "birth":"1986-12-14", "city":"New York"}';
var obj = JSON.parse(text);
obj.birth = new Date(obj.birth);
document.getElementById("demo").innerHTML = obj.name + ", " +
obj.birth;
243. STRINGIFY
• Convert a JavaScript object into a string
var obj = { "name":"John", "age":30, "city":"New York"};
var myJSON = JSON.stringify(obj);
document.getElementById("demo").innerHTML = myJSON
249. XML ASSIGNMENT
Create a booklist file in XML (called books.xml). Include in your data storage files the
following book info: title of book, author of book, and price of book.
For help refer to slide 34 in the 2-21-24 PPT
