advanced_html.pptx

(1)

Advanced HTML

(2)



Announcements



Advanced HTML

◦

Tables

◦

CSS (Cascading Style Sheets)

◦

Forms

◦

Javascript



Break



Exam Results



HTML Portfolio Assignment



Lab Time to complete projects

(3)



HTML stands for Hypertext Markup Language



HTML pages provide the majority of the

content on the World Wide Web



HTML commands are referred to as tags



Tags usually come in pairs: <b>bold</b>



Unpaired tags look like this: <hr />

(4)

<html>

<head>

</head>

<body>

<hr />

My favorite color is blue!

</font>

</body>

</html>

(5)

HTML Document Basics

Text in the Title tag displays here

(6)

HTML Document Basics

HTML Format Tag

Browser Displays



Basic structure allows

for many features:

◦

<i>Italic</i>

◦

◦

<u>Underline</u>

◦

◦

◦

<img />

◦

<a></a>

Italic

Bold

Underline

• Cat • Dog 1. Cat 2. Dog

(7)



These tags work brilliantly on simple pages

but...



Formatting problems

◦

Not enough formatting control with simple tags

◦

Formatting tags are often clunky

◦

This makes maintaining large Websites difficult



Basic HTML is not robust

◦

HTML pages are static, a.k.a. boring

◦

Simple HTML pages cannot leverage databases

(8)

<html>

<head>

</head>

<body>

<hr />

My favorite color is blue!

</font>

</body>

</html>

(9)



Advanced techniques in HTML remedy such

problems

◦

Tables

provide a graphical way to format data

◦

Cascading Style Sheets (CSS)

allow for

advanced easily-maintainable formatting

◦

Forms

allow HTML to accept data from a user

◦

Javascript

allows for procedural logic to handle:



advanced conditional formatting



input validation



dynamic processing of Web pages

(10)



Presenting data on the Web is useful



Tables provide the simplest and most

powerful way to present data on the Web



HTML Tables offer an excellent range of

capabilities with a few simple tags

(11)

Tag Purpose

<table></table> Defines a table <tr></tr> Defines table row <th></th> Defines table header <td></td> Defines table data <caption></caption> Defines table caption <thead></thead> Defines table head <tbody></tbody> Defines table body <tfoot></tfoot> Defines table footer

(12)

(13)

Table Example

Header Row is Bold!

(14)



Tables can be nested



Tables can be used for formatting

◦

Only do this if absolutely necessary

◦

Working with complex and nested tables is a mess



Tables should be used to present data



We have other options for complex

formatting

(15)



Cascading Style Sheets provide a facility for

formatting Web pages



CSS saves a great deal of work



Multiple styles will cascade into one

◦

Browser default

◦

External style sheets

◦

Internal style sheets

◦

Inline style sheets

(16)

Cascading Style Sheets

(CSS)

<html>

<head>

<body>

</body> </html>

My favorite color is blue! </font>

<p style="font-family: Arial; color: Blue"> My favorite color is blue!

(17)

Cascading Style Sheets

(CSS)

<html>

</body> </html>

<p>My favorite color is blue!</p> <head>

p{font-family: Arial; color: Blue} </style>

</head>

<body>

<head>

(18)

Cascading Style Sheets

(CSS)

(19)

Cascading Style Sheets

(CSS)

<html>

</body> </html>

p{font-family: Arial; color: Blue} </style>

</head>

<body>

<head>

(20)

Cascading Style Sheets

(CSS)

(21)

Cascading Style Sheets

(CSS)

<html>

</body> </html>

</head>

<body>

<head>

(22)

Cascading Style Sheets

(CSS)

/* CSS Comment */

p{font-family: Arial; color: Blue}

(23)



There are many, many CSS commands



If you have a formatting question, the

answer almost always involves CSS



For a detailed list of commands, techniques,

and tips consult the following site:



http://www.w3schools.com/css/default.asp

(24)



Accept information from users



Update databases from a Website



HTML Forms make these goals possible



Forms are created with HTML tags

(25)

<html> <head> <title>My Form</title> </head> <body> <h1>Feedback Form</h1> <hr /> <form method="post" action="mailto:[email protected]"> Name: <input type="text" name="Name"><br />

Comments: <input type="text" name="Comment"><br /> <input type="submit" value="Send Comments"> </form>

</body> </html>

(26)

(27)



Use the GET method for queries



Use the POST method for database

manipulation



Action will usually point to a server-side

script written in a language like PHP or PERL



The server-side script will handle the data

and perform the required operations



For simple email routing, use a free service

like http://www.response-o-matic.com/

(28)



Javascript is a client-side scripting language



Adds logic capabilities to Web pages



The most prevalent programming language

on the planet



Excellent starting point for those interested

in programming

(29)

Javascript

<html> </body> </html> <p> Hello World! </p> <script type="text/javascript"> document.write("Hello World!"); </script> <body>

<head>

(30)

<html>

<body>

var browser=navigator.appName;

var b_version=navigator.appVersion;

var version=parseFloat(b_version);

document.write("Browser name: " + browser);

document.write("<br />");

document.write("Browser version: " + version);

</script>

</body>

</html>

(31)

Javascript

(32)

Javascript

(33)

Javascript

(34)

if (document.images) {

image1off = new Image();

image1off.src = 'images/transparent.gif';

image1on = new Image();

image1on.src = 'images/fib_thinker.jpg';

...

function change(image,ext) {

if (document.images)

document.images[image].src = eval(image +

ext + ".src");

}

//-->

(35)



Web sites have inspired a great number of

technologies and techniques



Keep up with developments in technology



New trends develop all of the time



The better you can use these technologies

the more likely you will be to leverage the

Web to meet your goals