Short Introduction to HTML - George Mason Universityoffutt/classes/642/slides/642Lec02b-HTML.pdf ·...

1

Short Introduction to HTML(With Forms and StyleSheets)

Jeff Offutt

http://www.cs.gmu.edu/~offutt/

SWE 642

Software Engineering for the World Wide Web

sources: HTML 4 for the World Wide Web, Castro, Peachtree Press

Core Web Programming, Hall, PTR

Why Learn HTML?

• Many HTML editors are available

• We can create reasonably good HTML without knowing the language

• But …

– We need to know the language to write excellent HTML

– Editors get in the way of small changes

– We need to write programs that create HTML

• Thus, a web software engineer needs to know HTML

9/4/2013 © Offutt 2

2

HTML Basic Definitions• Element: A piece of a document

sentence, paragraph, list, table, head, …

• Tag: A command to control the format

<name></name>

• Attribute: An option or parameter to a tag

• Rendering: A browser formats the text into a window according to the formatting rules

9/4/2013 © Offutt 3

Not case sensitive

Some people use upper case for tags as

a matter of style

HTML Structure

9/4/2013 © Offutt 4

Rendered

Not rendered

Hex: RRGGBB000000 – BlackFFFFFF – White

<html><head>

<title>My Little Web Page</title></head><body bgcolor=“#FFFFFF”>

</body></html>

3

Some HTML Tags

• Headers : <h1>, <h2>, …• Breaks : <p>, <br>, <hr>• Fonts : <b>, <em>, <i>, <tt>, <u>• Lists : <ul><li>, <ol><li>,

<dl><dt>A<dd>stuff

• Color : <font color=“#RRGGBB” size=“-1”>

• Special chars : < > &

ö (ö) ñ (ñ) è (È)

9/4/2013 © Offutt 5

Note that <font> is deprecated in HTML 4 and not supported in XHTML, but still widely used

Links in HTML

• <a href=“classes/642/”>642</a>• Relative links are:

– Faster

– Easier to move

– Require less typing, thus less mistakes

• target=“_blank” // new window

• href=“#NAME” // within the current file

• <a href=“mailto:[email protected]”>offutt</a>• <img src=“X.jpg” alt=“a picture”>

9/4/2013 © Offutt 6

4

HTML Tables

9/4/2013 © Offutt 7

<table><tr>

<td></td><td></td>

</tr><tr>

</table>

<table border=2 cellspacing=2bgcolor=“#FFFFFF” width=500 align=“center”>

Note that bgcolor and align are deprecated in HTML 4, but still widely used

HTML Forms

9/4/2013 © Offutt 8

<form action=“URL of program” method=“post”>

<input type = {text, radio, checkbox, file, hidden}><label><select>, <option><textarea><button><input type = {Submit, Reset}><fieldset><legend>

5

A Small Form

9/4/2013 © Offutt 9

<form method="post" action="http://cs.gmu.edu:8080/offutt/servlet/calculate">

<table border=1>

<tr> <td>

<table align=“center”>

<tr>

<td>First val:</td>

<td><input type="text" name="LHS" value="" size=5 /></td>

</tr>

<tr>

<td>Second val:</td>

<td><input type="text" name="RHS" value="" size=5 /></td>

</tr>

<tr>

<td>Result:</td>

<td><input type="text" name="RSLT" value="" size=6 /></td>

</tr>

</table>

<table>

<tr>

<td><input type="submit" name="Operation" value="Add“ /></td>

<td><input type="submit“ name="Operation" value="Subtract” /></td>

<td><input type="submit" name="Operation" value="Multiply“ /></td>

<td><input type="submit" name="Operation" value="Divide“ /></td>

</table></td></tr>

<tr>

<td align=center><input type="reset" name="reset" value="Reset“ /></td>

</table>

</form>

Server software will get “Operation=Add”

Radio Buttons

9/4/2013 © Offutt 10

<form>

<input type=“radio" name=“Year“ value=“freshman” id=“freshman” />

<label for=“Year“>freshman</label>

<br/>

<input type=“radio" name=“Year“ value=“sophomore” id=“sophomore” />

<label for=“Year“>sophomore</label>

<br/>

<input type=“radio" name=“Year“ value=“junior” id=“junior” />

<label for=“Year">junior</label>

<br/>

<input type=“radio" name=“Year“ value=“senior” id=“senior” />

<label for=“Year">senior</label>

<br/>

</form>

Usability: Users can click the text, not just the circle

All “name” values must be the same in a radio box

6

Checkboxes

9/4/2013 © Offutt 11

<form>

I have a bike:

<input type=“checkbox" name=“vehicle“ value=“Bike“ />

<br />

I have a car:

<input type=“checkbox" name=“vehicle“ value=“Car“ />

<br />

I have an airplane:

<input type=“checkbox“

name=“vehicle“ value=“Airplane“ />

</form>

<form>

<select name=“major“>

<option value=“SWE” selected=“selected”>SWE</option>

<option value=“CS”>CS</option>

<option value=“ISA”>ISA</option>

<option value=“INFS”>INFS</option>

</select>

</form>

Dropdown

9/4/2013 © Offutt 12

7

Select Box

9/4/2013 © Offutt 13

<form>

<select name=“classes“ size=“5” multiple=“multiple”>

<option value=“619”>619</option>














</select>

</form>

Text Area

9/4/2013 © Offutt 14

<p align=“justify“>

Enter your message in the box below:

</p>

<form>

<textarea rows=“10“ cols=“70“>

This text goes inside initially; leave this blank for an empty box.

</textarea>

</form>

8

Buttons

9/4/2013 © Offutt 15

<form>

<input type=“button“ value=“Don’t click me!“ />

</form>

Fieldset Borders and Mailto

9/4/2013 © Offutt 16

<fieldset>

<legend>

Contact Information

</legend>

<form action=“mailto:[email protected]” method=“post” enctype=“text/plain”>

Name: <input type=“text“ name=“theName“ />

EMail: <input type=“text“ name=“EMail“ />

Phone: <input type=“text“ name=“Phone“ maxlength=“12“ size=“12“ />

<center>

<input type=“reset “ value=“Reset“ />

<input type=“submit“ value=“Send“ />

</center>

</form>

</fieldset>

9

Fieldset Borders and Mailto

9/4/2013 © Offutt 17

<fieldset>

<legend>

Contact Information

</legend>

<form action=“mailto:[email protected]” method=“post” enctype=“text/plain”>

Name: <input type=“text“ name=“theName“>

EMail: <input type=“text“ name=“EMail“>

Phone: <input type=“text“ name=“Phone“ maxlength=“12“ size=“12“>

<center>

<input type=“reset “ value=“Reset“>

<input type=“submit“ value=“Send“>

</center>

</form>

</fieldset>

Styling and Cascading

• Original HTML used attributes and tags to control the style of text and objects

– <font color=“#RRGGBB” size=“-1”>

• Style Sheets and Cascading Style Sheets (CSS) were added to allow for more abstraction

– The same style commands can be used in different places in a document

– The same style commands can be applied to different documents

9/4/2013 © Offutt 18

10

Some Style Commands

• Size : font-size:110%

• Color: color:#900000; background-color:#FFFF00

• Font: font-weight:bold; font-style:italic; text-decoration:underline; font-family:helvetica

• Many many more …

– http://www.yourhtmlsource.com/stylesheets/introduction.html

– http://www.w3.org/Style/Examples/011/firstcss

9/4/2013 © Offutt 19

Embedding Style in HTML

• The HTML style attribute can be inserted into various HTML tags

– <span style="color:red">Do they vote?

– <a href="./index.html" style="text-decoration:none;color:blue">

– <span style="color:#800000; font-size:60%; font-style:italic">

– <p style="text-align:justify; font-style:italic; font-family:comic sans ms; font-size:85%">

9/4/2013 © Offutt 20

11

Defining Style Classes in HTML• In the head:

9/4/2013 © Offutt 21

<head>

<title>...

<style>

P{text-align:justify}

P.menu{font-size:75%;color:#555555;background-color:E4F4E4}

A:hover {background:white}

</style>

• In the body:

<p class="menu">

<a href="#CLASSES">Classes</a> *

<a href="#RSRCH">Research</a>

</p>

Defining Style in a .CSS File

9/4/2013 © Offutt 22

/* For use in 642 web site pages. */

P {text-align:justify}

LI {text-align:justify}

A:hover {background:white}

DT {font-weight:bold;font-size:90%}

.noteI {color:red}

.noteII {color:red; font-weight:bold}

.big {font-size:110%}

.small {font-size:90%}

.head {font-size:150%; font-weight:bold; text-align:center}

.offsite {font-size:90%; font-style:italic; font-family:"comic sans ms"}

.commands {font-family:helvetica;color:green;font-weight:bold;font-size:90%}

.quote {font-size:60%; font-style:italic;color:#800000}

.exam {color:#900000; font-weight:bold;font-size:105%;background-color:#FFFF00}

.snow {color:#800000; font-weight:bold; font-size:105%; background-color:#bbbbbb}

.hwkquote {font-size:95%; font-style:italic; font-weight:bold; color:#800000}

File: 642-style.css

12

Using Style from a .CSS File• In the head:

9/4/2013 © Offutt 23

<head>

<link rel=“stylesheet” href=“./205-style.css” type=“text/css” />

• In the body:

<div class=“head">

<span class=“noteI">

<tr class=“snow">

<span class=“quote">

HTML Suggestions• Don’t build: Borrow, modify, experiment

• Maintenance is crucial: Make your HTML readable– Choose a style and stick with it

– Use white space and carriage returns

– Use comments liberally

– Indent lists and nested elements

• Let the browsers make as many decisions as possible when they render your HTML– Don’t over-specify the fonts

• Look at your HTML with different browsers

9/4/2013 © Offutt 24

13

HTML Suggestions (2)• Always use descriptive titles

• Specifying the height and width of images will help browsers display faster– But may not work as well on different size browser windows

• Use ALT on every image

• Forms:– Be sure to use unique descriptive names

– Radio buttons must have the same name or users can select multiple buttons

• Close all tags (SGML standard)

9/4/2013 © Offutt 25

HTML Suggestions (3)

• Many UI experts recommend against frames

– They make navigation difficult

– They make it hard to print web pages

– Browsers render them differently

– They make bookmarking impossible

• Frames may be acceptable for small, internal use web sites

• The same affect can be achieved by using CSSS or tables

9/4/2013 © Offutt 26

14

Your Home Page

• You can create a home page on mason

• Unix commands:– cd // Go to your home directory

– chmod 755 . // Make your home directory readable

– mkdir public_html // Create the standard home page directory

– chmod 755 public_html– cd public_html // Go to the home page directory

– Create an HTML page with the name “index.html”

– chmod 644 index.html // Make the file readable

• Your URL will be: http://mason.gmu.edu/~username/

9/4/2013 © Offutt 27

Conclusions

9/4/2013 © Offutt 28

Learning HTML syntax is not hard

Designing good web pages is VERY hard

Short Introduction to HTML - George Mason Universityoffutt/classes/642/slides/642Lec02b-HTML.pdf ·...

Documents

Transcript of Short Introduction to HTML - George Mason Universityoffutt/classes/642/slides/642Lec02b-HTML.pdf ·...