Zero to Web in 60 minutes

Zero to Web in 60 minutes(a very basic HTML tutorial)

Howard Stateman

March 2009 Zero to Web in 60 Minutes 2

It’s A Text File

• Web Pages are text files– No Compiling, compression or encoding

• The file extension defines it– .html or .htm

• index.html or index.htm is your home page– Every subdirectory can have a home page

– .shtml .asp .php • For server-side pages • Out of the scope of this class


Build Your Own

• Open a new text document– Notepad or wordpad (write) or vi– Save as "all files" with .html extension

• Use Word Processors at your own risk– But not in this class, please

• They add a ton of formatting code

• Double-click to open in browser– Save your changes, then hit "refresh"


Basic Syntax

• Commands are called tags• Tags begins with a <• Tags end with a >• Most tags are used in pairs:

<html> blah blah blah </html>• Tags are not case-sensitive

– <HTML> = <Html> = <htmL>


Your Basic Web Page

<html><head><title>Your window title goes here</title></head><body>Blah blah blah

</body></html>


HTML

• Stands for Hypertext Markup Language– Based on SGML

• A child of early UNIX nroff and troff print formatting languages

• You don’t want to know how old those are

• The <html> tag begins all web pages• The </html> tag ends all web pages• Nothing goes between <html> and <head>


<HEAD>

• Not required• Can contain a variety of items

– Window Title– META information and commands– Scripts– Comments

• Must end </head> before <body> tag


<BODY>

• <body> is required– All your content goes between

<body>and

</body>– Nothing goes between </body>and </html>


Arguments

• Many tags accept arguments<BODY>

can become<BODY bgcolor="red">

or<BODY background="images/myphoto.jpg">


A Few Useful Tags

• Text modifiers– <H1> through <H6>

• Headline sizes: H1 is biggest– 

• Underline– 

• Bold– 

• Italics


A Few More Useful Tags

• <STRIKE>– Strike-out (line through a word or sentence)

• – Emphasis– Bold, ital, etc. depends on browser & font

• <BLINK>– Makes text blink on and off– Highly annoying, not supported in all browsers


Comments

• – ends a comment






• An improvement on <Hn> tags

For example:blah

You can also use the RGB color codesblah 

For a color chart, see http://www.howeird.com/colors.html


Paragraphs and Breaks

• HTML ignores CRLFs• In HTML, this:There once was a man named Big FredWho liked to pour jam on his headHis wife told him, "Honey""We’ll run out of money"Then she went shopping for bread

• Will come out like this: There once was a man named Big Fred Who liked to pour jam on his headHis

wife told him, "Honey""We’ll run out of money"Then she went shopping for bread


 and 

• Use to begin a paragraph• Use to insert CRLFThere once was a man named Big Fred Who liked to pour jam on his head His wife told him, "Honey" "We’ll run out of money" Then she went shopping for bread next paragraph…

• is stand-alone (no )• only requires when it has arguments

– blah


Links and Anchors

• <A>– Begins a URL link

• </A> ends the link<A href="http://www.motorola.com">Moto</a>Only "Moto" will appear on the page

To force the URL to pop up in another window:<A href=http://www.motorola.com

target="_blank">Moto</a>

Also try: target="one", target="two"

http://www.motorola.com/




Images

• <IMG> is used to place images – A stand-alone tag (no </IMG>)– It accepts many arguments– Src

• Source (URL pointing to the image file)

– Height– Width– Align<IMG Src="images/my.jpg" height=320 align=center><IMG Src=http://www.motorola.com/images/logo.png>

http://www.motorola.com/images/logo.png

http://www.motorola.com/images/logo.png


Clickable Image<A href="http://www.motorola.com"> <IMG SRC="http://www.motorola.com/images/logo.png"> Moto Web Site</a>

Will be clickable, and look like this:

Moto Web Site


Lists

• <UL>– Unordered List– Bullets

• <OL>– Ordered List– Numbered

• <LI>– List Item


<UL><LI><OL><UL><LI>Item One<LI>Item Two<LI>Item Three</UL>

<OL><LI>Item One<LI>Item Two<LI>Item Three</OL>

•Item One•Item Two•Item Three

1. Item One2. Item Two3. Item Three


Tables

• <TABLE>– Begins a formatted table– Takes several arguments

• Bgcolor, text, width• border, cellspacing, cellpadding

– <TR>• Table Row

– <TH>, <TD>• Table Header, Table Data (column)


Basic Table<TABLE><TR><TH>Column One</TH><TH>Column Two</TH></TR><TR><TD>Item One</TD><TD>Item Two</TD></TR></TABLE>


Special Characters

• Two ways to call– Character Code (numeric)– HTML code (alpha)

• Begins with "&"• Ends with ";"• Use charmap for numeric code• See handout for alpha codes


Some Useful Characters

• < less than "<"• > greater than ">"• space " "• & ampersand "&" • é acute accent e "é"• ñ n with tilde "ñ"• &#3C0; Pi "π"


Play Time

• <EMBED></EMBED>– Place audio/video in a player on page– Several arguments

• SRC• Height• Width• Autostart• Loop


<EMBED>Audio<EMBED src="http://www.howeird.com/sounds/fields1.mp3" autostart="true" loop="false" width=240 height=80></EMBED>

Video<EMBED src="video.wmv" autostart="true" loop="true"></EMBED>


Scrolling Text• <MARQUEE></MARQUEE>

– A fun tag to scroll text across the screen<MARQUEE>Wheeeeeeee!

</MARQUEE>

<MARQUEE behavior="scroll" direction="up">

Wheeeeeeee!

</MARQUEE>


User Input

• CGI is beyond the scope of this class– Common Gateway Interface– HTML to Perl, C script

• <FORM>– Radio button– Checkbox– Text Box– Text field

Date post:	14-Apr-2017
Category:	Documents
Upload:	howard-stateman
View:	85 times
Download:	0 times

Zero to Web in 60 minutes

Documents