CIS403 WEB APPLICATION DEVELOPMENT Getting Started
WHAT DO YOU NEED TO CREATE A WEBPAGE? • Assumption 1: you know nothing about HTML. • Assumption 2: You harbour some computer knowledge. • A computer (Obviously). • A browser like Netscape, Explorer, Chameleon, Opera, Mosaic, Mozila… • A word processor. • + a few more things to make the site available on the internet for the world to access it.
(FAQ) Frequently Asked Questions • I have a Macintosh (or IBM). Will this work on my computer? • Must I be logged on the internet? • Do I need na expensive program to help me do this? • Is this going to require to learn a whole new computer language?
What is HTML? • HTML stands for Hypertext Markup Language • Hyper is opposite of old linear computer program. HTML allows the person viewing the web page to go anywhere anytime. • Text –real honest-to-goodness English letters • Markup – you write in plain English and markup what you wrote • L- for language
Creating HTML Docs. With a Word Processor • Write the page as you would write any document. • When you go to save always choose Save As • When the Save As box pops up change the file format. • For IBM-compatible computer, save the document as ASCII text DOS or just text format. For Macintosh save as text format. • Add .HTML suffix to the document name.
CIS403 WEB BASED APPLICATION DEVELOPMENT Flags and Commands
What Are Flags? • Think of flags as commands • HTML is written in English and we use a series of flags to format and position the text • All flags have same format, they begin with < and end with > , example <B>Joe</B> • The flags are only in capital as best practice the browser doesn´t care. • Not all flags require begin and end
A Few HTML Flags
Effect
Flags
How it Looks
Bold Italic Typewriter Bold Italic
<B>Bold</B> <I>Italic</I> <TT>Typewritter</TT> <B><I>Bold and Italic</B></I>
Bold Italic Typewriter Bold and Italic
Single Flags • <HR> • <BR>
• <P>
Gives a line across the page. Breaks the text and starts on the next line. Important because in text format, keyboard format instructions arenot saved. Stands for paragraph. It does the exact same things as <BR> and goes on to skip a line.
Writing Your First Web Page <HTML> <TITLE> MY first HTML page </TITLE> <B>This is my first HTML page !</B><P> I can write in <I>Italic</I> or <B>Bold</B><BR> <HR> <B><I>Or I can write in both</I></B><BR> <HR> <TT>... and that´s all </TT> </HTML>
HTML Primer Manipulating Text, Heading, Font Size, Centering and Alignment of text.
Heading Flags • • • • •
Used extensively in HTML There are six heading flags <H1> through <H6> They create nice bold text. Its a simple <H#> and <H#> command. When you use a heading command the text is alone by default. • Its like the heading command carry the <P>
Heading Flag <H1>This is Heading 1</H1> <H2>This is Heading 2</H2> <H3>This is Heading 3</H3> <H4>This is Heading 4</H4> <H5>This is Heading 5</H5> <H6>This is Heading 6</H6>
Font Size Command • They add a little for command over text. • They help seperating your page into logical sections of text • There are 12 sizes +6 through -6 • <FONT SIZE = “##”> • The ## can be anything from +6 to -6 • This is referred to as a subcommand (Command Inside a Command).
Font Size Commands • • • • • • • •
<FONT SIZE=“+4”>This is font size +4</FONT> <FONT SIZE=“+3”>This is font size +3</FONT> <FONT SIZE=“+2”>This is font size +2</FONT> <FONT SIZE=“+1”>This is font size +1</FONT> <FONT SIZE=“-1”>This is font size -1</FONT> <FONT SIZE=“-2”>This is font size -2</FONT> <FONT SIZE=“-3”>This is font size -3</FONT> <FONT SIZE=“-4”>This is font size -4</FONT>
Centering & Alignement • By default text always starts on the left. • You centre the text by surrounding it with <CENTER> and </CENTER>. • Alignment is a little trickier. • You set the text aside as a paragraph unto itself: <P ALIGN=“right”Right Aligned Text</P>
Centering & Alignement • <CENTER> All text here will be centered</CENTER> • <P ALIGN=“Text that will go to the right</P>
Making a Link to Someone Else • <A HREF=http://www.htmlgoodies.com>Click Here To Go To HTML Gooddies</A> • A stands for Anchor, begins attachment. • http://www.htmlgoodies.com is the link site address. • Click Here To Go To HTML Gooddies is the command prompt, write some text that describes the link. • </A> ends the link command
Allowing People to Email You from Your Page • < A HREF=mailto:kandieroa@africau.ac.zw> Click Here To Write Me</A> • mailto: calls on the email program contained in your visitor’s browser. • If it does not work there are no email preferences set on the browser. • In explorer the options areon the view menu, you find a place to put your email details.
Placing an Image on Your Page • • • •
<IMG SRC=“image.gif”> IMG stands for image. SRC stands for source Image.gif is the name of the image.
Creating a Clickable Image • <A HREF=http://www.htlmgoogies.com><IMG SRC=“joe.gif></A> • <IMG BORDER=“0” SRC=“joe.gif”>
Manipulating Images • <CENTER><IMG ALIGN=“right” SRC=“image.gif></CENTER> • <IMG ALIGHN=“right” SRC=“image.gif”