Web Page Creation Web Page Creation Part IPart I

ST: Introduction to Web Interface Design ST: Introduction to Web Interface Design Prof. Angela GuercioProf. Angela Guercio

Spring 2007Spring 2007

ObjectiveObjective

In this lecture, you will learn:In this lecture, you will learn:

What HTML isWhat HTML is

How to create an HTML fileHow to create an HTML file

The HTML syntaxThe HTML syntax

more syntax in next lecturemore syntax in next lecture

You will experiment HTML and apply the You will experiment HTML and apply the concepts hands on.concepts hands on.

Web Page CreationWeb Page Creation

Create a document by using a Create a document by using a mark-up languagemark-up language HTMLHTML

Web Browsers show ASCII text Web Browsers show ASCII text filesfiles *.txt = text file*.txt = text file *.html or *.htm = HTML files*.html or *.htm = HTML files

Software is available to facilitate Software is available to facilitate the Web page creation.the Web page creation.

Web BrowserWeb Browser

Web browser display Web pagesWeb browser display Web pages make any effort to display on the best make any effort to display on the best

way way for laptop with smaller screen text is for laptop with smaller screen text is

rearrangedrearranged formatting from text files is not preserved formatting from text files is not preserved

(e.g. break lines are gone!).(e.g. break lines are gone!).

Web browsers Web browsers dynamically reworkdynamically rework the files to fill the display window as the files to fill the display window as best as it canbest as it can

Web browsers rework each page for Web browsers rework each page for each visitoreach visitor

Web Page: BasicWeb Page: Basic

Since Web browsers read text Since Web browsers read text files we can get a text file and files we can get a text file and display it the Web browser.display it the Web browser.

A Web server is not needed A Web server is not needed during page designduring page design

you can be offlineyou can be offline It is needed only at publication It is needed only at publication

timetime

Web Page: TO DOWeb Page: TO DO

Practice: Rename a .txt file with the .htm Practice: Rename a .txt file with the .htm or .html extension and open it with a or .html extension and open it with a browser.browser.

1.1. Open Notepad (StartOpen Notepad (Start Program Program Accessory…)Accessory…)2.2. Now close the dialog box, go to File, Edit with Now close the dialog box, go to File, Edit with

Notepad and continue editingNotepad and continue editing3.3. In the file write your name and postal address in In the file write your name and postal address in

the same way you would do on an envelope.the same way you would do on an envelope.4.4. In File Name save as “Myaddress.html” in any In File Name save as “Myaddress.html” in any

folder you likefolder you like5.5. Go to the folder where you saved your file and Go to the folder where you saved your file and

double click on the icon of your file. It will be open double click on the icon of your file. It will be open with your default browser.with your default browser.

6.6. Go back to your file and change the address with Go back to your file and change the address with the school address. Save (CTRL S) the school address. Save (CTRL S)

7.7. Go back to the browser: do you see any change Go back to the browser: do you see any change in the page? Reload the page. Do you see the in the page? Reload the page. Do you see the changes now?changes now?

HTMLHTML

HyperText Markup Language is a HyperText Markup Language is a language that gives the author language that gives the author control over the web browsercontrol over the web browser set of HTML set of HTML elements or tagselements or tags insert a HTML element to add to a insert a HTML element to add to a

content or a style to a Web pagecontent or a style to a Web page InstructionsInstructions are issued through a are issued through a

series of series of TAGSTAGS - which are shown in - which are shown in <brackets><brackets>

Basic HTML ElementsBasic HTML Elements HTML, HEAD, TITLE, BODYHTML, HEAD, TITLE, BODY

Editing HTML filesEditing HTML files

Use Notepad (Windows) or Use Notepad (Windows) or SimpleText (Mac) for now.SimpleText (Mac) for now. do not use Worddo not use Word

Word file saved as HTML invoke a HTML Word file saved as HTML invoke a HTML Converter which is not what you want when Converter which is not what you want when you are writing HTML files!you are writing HTML files!

or save it “Text Only with Line Breaks”or save it “Text Only with Line Breaks”

Later I will let you use other editors Later I will let you use other editors (ex. Frontpage, Netscape Ed, ect)(ex. Frontpage, Netscape Ed, ect)

TAGSTAGS

<HTML>……..</HTML><HTML>……..</HTML> They can be nested inside other tag pairsThey can be nested inside other tag pairs <HTML> contains everything the browser <HTML> contains everything the browser

need to know about the Web Pageneed to know about the Web Page <HEAD> contains information that is not <HEAD> contains information that is not

displayed in the browser’s Web page displayed in the browser’s Web page displaydisplay

<TITLE> contains the title element that <TITLE> contains the title element that appears in the browser window’s title barappears in the browser window’s title bar

<BODY> text and graphics inside the body <BODY> text and graphics inside the body element are displayed in the browser’s element are displayed in the browser’s Web page displayWeb page display

General TAG format:General TAG format:

<tagname> … </tagname><tagname> … </tagname>

The tag beginsformatting.

The closing tag ends formatting.Observe: Closing tags are preceded by the / symbol

Content to be formatted.

TAGS SyntaxTAGS Syntax

Tags detailsTags details Tags are NOT case sensitive: <TITLE> and Tags are NOT case sensitive: <TITLE> and

<title> are the same <title> are the same

MOST tags start with the command and end MOST tags start with the command and end with a slash(/) with a slash(/) ie. <TITLE> ……. </TITLE>ie. <TITLE> ……. </TITLE> However there are a few tags that do not require to However there are a few tags that do not require to

be terminatedbe terminated <br><br>

Break – new lineBreak – new line <HR><HR>

Horizontal Row – next line/pageHorizontal Row – next line/page

Spacing the content inside a TAG is Spacing the content inside a TAG is important, spacing outside of the TAG’s is important, spacing outside of the TAG’s is NOT importantNOT important

PracticePracticeTO DOTO DO: : 1.1. Create a file with NotepadCreate a file with Notepad2.2. Insert the tags in the following wayInsert the tags in the following way<HTML> <HTML>

<HEAD><HEAD><TITLE><TITLE>

</TITLE></TITLE></HEAD></HEAD><BODY><BODY>

</BODY></BODY></HTML></HTML>1.1. Fill the TITLE and the BODY Fill the TITLE and the BODY 2.2. See the result with a Web browser See the result with a Web browser

1.1. Where does the text in the Title appear?Where does the text in the Title appear?2.2. Where does the text in the Body appear?Where does the text in the Body appear?

Web Page Development Web Page Development CycleCycle

1.1. Save your file with the Save Save your file with the Save commandcommand

2.2. Reload the new fileReload the new file

3.3. Review the new Web page Review the new Web page with you Web browserwith you Web browser

4.4. Revise you page as neededRevise you page as needed

Repeat 1-4Repeat 1-4

Formatting: HeadingFormatting: Heading

Heading element (do not confuse with Heading element (do not confuse with HEAD!) give you a title inside the body of HEAD!) give you a title inside the body of the Web pagethe Web page

6-sizes 6-sizes <H1> very large </H1><H1> very large </H1> <H6> very small </H6><H6> very small </H6>

The alternative to heading is the tag The alternative to heading is the tag <big> and <small><big> and <small> More convenientMore convenient You can add more than one <big> or <small> You can add more than one <big> or <small>

in line. in line. You will be limited by the display ability of the You will be limited by the display ability of the

browser.browser.

Formatting: AlignFormatting: Align

Attributes can be added to Attributes can be added to elementselements

Attributes go Attributes go INSIDEINSIDE the angle the angle brackets!brackets!

Align is used to justifyAlign is used to justify <H1 ALIGN=CENTER> very large <H1 ALIGN=CENTER> very large

</H1></H1> <H6 ALIGN=RIGHT> very small <H6 ALIGN=RIGHT> very small

</H6></H6>

More tags: ParagraphMore tags: Paragraph

<P>…</P><P>…</P> breaks the text into blocks of text breaks the text into blocks of text

set off by blank linesset off by blank lines no indentationno indentation the </P> is optionalthe </P> is optional

Title and paragraphs add clarity Title and paragraphs add clarity to the Web page and make it to the Web page and make it easier to read.easier to read.

Tags: ListsTags: Lists Bulleted listsBulleted lists

<UL> ..</UL> <UL> ..</UL> unordered listunordered list

Enumerated listEnumerated list <OL> .. </OL> <OL> .. </OL> ordered listordered list

Each item in the list is marked with tags <LI>..</LI>Each item in the list is marked with tags <LI>..</LI>

</UL>, </LI>, and </OL> are optional but use it </UL>, </LI>, and </OL> are optional but use it anywayanyway

Ordered lists of books<ol><li> book 1<li> book 2</ol>

1. book 12. book 2

Unordered lists of books<ul><li> book 1<li> book 2</ul>

•book 1•book 2

FontsFonts and Styles and Styles

Different computers have different Different computers have different fonts.fonts. What font will the Web browser will What font will the Web browser will

choose if your font is not available?choose if your font is not available? Tag: <FONT>Tag: <FONT>

Attribute FACEAttribute FACE Sans serif fonts: Arial, Geneva, HelveticaSans serif fonts: Arial, Geneva, Helvetica Serif fonts: Times New Romans, TimesSerif fonts: Times New Romans, Times Monospaced fonts: Courier New, CourierMonospaced fonts: Courier New, Courier

Pick a selection:Pick a selection:<FONT FACE = “Arial, Geneva, Helvetica”><FONT FACE = “Arial, Geneva, Helvetica”>

The browser will choose the first available.The browser will choose the first available.

FontsFonts and Stylesand Styles

Tags: Tags: <B>..</B><B>..</B>

for Boldfor Bold <STRONG>..</<STRONG>..</

STRONG>STRONG> like Bold but more generallike Bold but more general

<I>..</I><I>..</I> for Italicfor Italic

<EM>..</EM><EM>..</EM> like Italic but more generallike Italic but more general

<U> underlined<U> underlined

FontsFonts and Stylesand Styles

Attributes:Attributes: COLOR=“COLOR=“the the

color” color” for Color for Color settingsetting

SIZE=+2 for the SIZE=+2 for the change of the change of the current sizecurrent size

<font size = 6> <font size = 6> insert your textinsert your text here here

</font> will set the </font> will set the size to 6size to 6

Size chart

Size 1 = 8ptsSize 1 = 8ptsSize 2 = 10ptsSize 2 = 10ptsSize 3 = 12ptsSize 3 = 12ptsSize 4 = 14ptsSize 4 = 14ptsSize 5 = 18ptsSize 5 = 18ptsSize 6 = 24ptsSize 6 = 24ptsSize 7 = 36ptsSize 7 = 36pts

Blanks, Comments, etc.Blanks, Comments, etc.

Try to insert blanks lines or extra Try to insert blanks lines or extra white space characterswhite space characters What happens?What happens?

To insert whitespaces?To insert whitespaces? &nbsp inserts a white space&nbsp inserts a white space

<!--, --> for comments<!--, --> for comments <BR> inserts line breaks<BR> inserts line breaks <HR> draws one horizontal <HR> draws one horizontal

separpation lineseparpation line

Image FilesImage Files

GIF (Graphic Interchange Format)GIF (Graphic Interchange Format) extension .gifextension .gif

JPEG (Joint Photographic Expert JPEG (Joint Photographic Expert Group)Group) extension .jpgextension .jpg

Scanner create TIFF (Tagged Image Scanner create TIFF (Tagged Image File Format) fileFile Format) file conversion in GIF or JPEG is done in conversion in GIF or JPEG is done in

softwaresoftware image in GIF is smaller but still goodimage in GIF is smaller but still good

IMG tagIMG tag

<img src="../../Desktop/aubree.jpg" <img src="../../Desktop/aubree.jpg" alt="" width="125" height="149">alt="" width="125" height="149">

IMG creates an IMG creates an inline imageinline image i.e. treated like a single alphanumeric character i.e. treated like a single alphanumeric character

which has a larger size than a regular characterwhich has a larger size than a regular character SRC specifies the image file and the SRC specifies the image file and the

physical locationphysical location ALT specifies the size of the imageALT specifies the size of the image

Use it all the time because:Use it all the time because: Lynx user (an old text-based browser) will Lynx user (an old text-based browser) will

recognize what they are missing if ALT is recognize what they are missing if ALT is specifiedspecified

Text-to-voice browser for visually impaired, get a Text-to-voice browser for visually impaired, get a great amount of information from it.great amount of information from it.

Aligning and resizing imagesAligning and resizing images

Include ALIGN attribute inside the Include ALIGN attribute inside the IMG tagIMG tag CenterCenter Top Top BottomBottom MiddleMiddle

WIDTH and HEIGHT are used to WIDTH and HEIGHT are used to resizeresize resize but preserve original scaleresize but preserve original scale resizing does not reduce memory or resizing does not reduce memory or

bandwidth requirementsbandwidth requirements BORDER is used to put a frame BORDER is used to put a frame

around a picture around a picture 0 no border0 no border

GraphicsGraphics

Insert a background color Insert a background color 16,777,216 colors16,777,216 colors or 216 Web-safe colorsor 216 Web-safe colors colors are in hexadecimal notation colors are in hexadecimal notation

(base 16)(base 16) insert the attribute insert the attribute

BGCOLOR=“#FFFFFF” in the BGCOLOR=“#FFFFFF” in the BODY tag for white backgroundBODY tag for white background

pattern background uses the pattern background uses the attribute BACKGROUND followed attribute BACKGROUND followed by the file you want to use.by the file you want to use.

Patterned backgroundPatterned background

<BODY <BODY BACKGROUND=“image.jpg”>BACKGROUND=“image.jpg”>

do not use a pattern that distracts do not use a pattern that distracts the reader from the pagethe reader from the page

use bold headings and oversized use bold headings and oversized fontsfonts

Design IssuesDesign Issues

Do not overload your pageDo not overload your page avoid to put images on top of a avoid to put images on top of a

patterned backgroundpatterned background images, background and special images, background and special

effects should not fight each effects should not fight each other.other.

if you use many pictures use a if you use many pictures use a solid color for the backgroundsolid color for the background

HW: to start in classHW: to start in class

Write a html file that produces this Write a html file that produces this page (see next slide) as output. page (see next slide) as output.

The instructions about the Format, the The instructions about the Format, the Style, the Font, and the Color are in Style, the Font, and the Color are in the page.the page.

When completed, e-mail the file to When completed, e-mail the file to your teacher (your teacher (aguercio@kent.eduaguercio@kent.edu ) )

Deadline: Before next class.Deadline: Before next class.