Web%20Page%20Creation%20Part%20I

1
Web Page Creation Part I

• ST Introduction to Web Interface Design
• Prof. Angela Guercio

2
Objective

• In this lecture, you will learn
• What HTML is and what XHTML is
• How to create an (X)HTML file
• The (X)HTML syntax
• more syntax in next lecture
• You will experiment (X)HTML and apply the
  concepts hands on.

3
Lets answer a few questions

• What is HTML?
• Hyper Text MarkUp Language
• A language to describe the formatting and the
  layout of content of your web page.
• What is XHTML?
• XHTML (Extensible Hypertext Markup Language)
• An extension of HTML
• Standards available at World Wide Web Consortium
  (W3C)

4
Time for your first hands on!

• Goal Observe a simple text file.
• Activity Create a .txt file, save it with the
  .htm or .html extension and open it with a web
  browser.
• Open Notepad (Start? Program ?Accessory)
• Now close the dialog box, go to File, Edit with
  Notepad and continue editing
• In the file write your name and postal address in
  the same way you would do on an envelope.
• In File Name save as Myaddress.html in any
  folder you like
• Go to the folder where you saved your file and
  double click on the icon of your file. It will be
  open with your default browser. What do you see?
• Go back to your file and change the address with
  the school address. Save (CTRL S)
• Do you see any change in the page? Reload the
  page. Do you see the changes now?

5
Web Page Creation

• Create a document by using a mark-up language
• HTML or XHTML
• Web Browsers show ASCII text files, i.e.
• .txt text file
• .html or .htm HTML files
• Software is available to facilitate the Web page
  creation.

6
Web Browser

• Web browser display Web pages
• make any effort to display on the best way
• for laptop with smaller screen text is rearranged
• formatting from text files is not preserved (e.g.
  break lines are gone!).
• Web browsers dynamically rework the files to fill
  the display window as best as it can
• Web browsers rework each page for each visitor

7
What do I need to start?

• Do I need to be online while creating my page?
• No, you can be offline
• You need to be online only when you publish the
  page
• Which Software do I need?
• A text editor
• NotePad or
• A Friendly Web Editor is available in old
  browsers like Netscape and SeaMonkey or
• Dreamweaver or
• Any other web editor, i.e.
• FrontPage (not supported anymore)
• SeaMonkey, (the successor of Netscape)
• etc.

8
Web Page Basic

• Since Web browsers read text files we can get a
  text file and display it the Web browser.
• A Web server is not needed during page design
• you can be offline
• It is needed only at publication time

9
HTML

• HTML
• HyperText Markup Language is a language that
  gives the author control over the web browser
• set of HTML elements or tags
• insert a HTML element to add to a content or a
  style to a Web page
• Instructions are issued through a series of TAGS
  - which are shown in ltbracketsgt
• Basic HTML Elements
• HTML, HEAD, TITLE, BODY

10
Editing HTML files

• Use Notepad (Windows) or SimpleText (Mac) for
  now.
• do not use Word
• Word file saved as HTML invoke a HTML Converter
  which is not what you want when you are writing
  HTML files!
• or save it Text Only with Line Breaks
• If you prefer a more friendly web editor, use
  Dreamweaver, Frontpage, Netscape Composer,
  SeaMonkey Composer, ect.

11
TAGS

• lthtmlgt..lt/htmlgt
• They can be nested inside other tag pairs
• ltHTMLgt contains everything the browser need to
  know about the Web Page
• ltheadgt lt/headgt
• contains information not shown in the browsers
  Web page display
• lttitlegt lt/titlegt
• contains the title element that appears in the
  browser windows title bar
• ltbodygt lt/bodygt
• Contains the text and the graphics to display

12
TAGS Syntax

• General TAG format
• lttagnamegt lt/tagnamegt

The tag begins formatting.
Content to be formatted.
The closing tag ends formatting. Observe Closing
tags are preceded by the / symbol
13
Tags details

• Tags are NOT case sensitive ltTITLEgt and lttitlegt
  are the same
• MOST tags start with the command and end with a
  slash(/)
• ie. ltTITLEgt . lt/TITLEgt
• However there are a few tags that do not require
  to be terminated
• ltbr /gt
• Break new line
• ltHR /gt
• Horizontal Row next line/page
• Spacing the content inside a TAG is important,
  spacing outside of the TAGs is NOT important

14
Time for more Practice

• TO DO
• Create a file with Notepad
• Insert the tags in the following way
• ltHTMLgt
• ltHEADgt
• ltTITLEgt
• My First Web Page
• lt/TITLEgt
• lt/HEADgt
• ltBODYgt
• This is only a test!
• lt/BODYgt
• lt/HTMLgt
• Save the file as FirstPage.html
• Open the page with a Web browser
• Where does the text in the Title appear?
• Where does the text in the Body appear?

15
Web Page Development Cycle

• Save your file with the Save command
• Reload the new file
• Review the new Web page with you Web browser
• Revise you page as needed
• Repeat 1-4

16
Old free web editors - Instructions for Netscape
and SeaMonkey

1. Open Netscape 7.2 (or SeaMonkey)
2. Click on File?New?Composer Page.
3. Click on Source Code (on the bottom of the page)
4. Paste the content of the previous HTML file
5. Save it
6. Click on Browse to Preview your file

17
Web Page Development Cycle

• Modify the file
• Save it
• Reload the page in your web browser, ex.
• Click on Browse to reload the file with Seamonkey
• Click on Live View to see the live page in
  Dreamweaver
• If you desire to change something go back to the
  file and restart step 1.
• Keep performing this cycle until your page is
  ready to be made public.

18
Formatting Tags Heading

• Heading element (do not confuse with HEAD!) are
  used for a title inside the body of the Web page
• 6-sizes
• ltH1gt very large lt/H1gt
• ltH6gt very small lt/H6gt

19
Formatting Heading (cont.)

• The alternative to heading is the tag ltbiggt and
  ltsmallgt
• More convenient
• You can add more than one ltbiggt or ltsmallgt in
  line.
• You will be limited by the display ability of the
  browser.

ltbiggt
ltsmallgt
20
Attributes

• Attributes can be added to elements
• Attributes go INSIDE the angle brackets!
• A few examples of attributes
• align is used to justify
• bgcolor used to indicate the background color
• border used in tables
• ect.

21
Formatting Tags Align

• Align is used to justify
• Left, right, center
• Example
• lth1 aligncentergt very large lt/h1gt
• lth6 alignrightgt very small lt/h6gt

22
Styles

• Tags
• ltSTRONGgt..lt/STRONGgt
• General for Bold text
• ltEMgt..lt/EMgt
• General for Italic text
• ltUgt lt/Ugt
• General for underlined text

23
More tags Paragraph

• ltPgtlt/Pgt
• breaks the text into blocks of text set off by
  blank lines
• no indentation
• Remember
• Title and paragraphs add clarity to the Web page
  and make it easier to read.

24
Tags Lists

• Bulleted lists
• ltULgt ..lt/ULgt unordered list
• Enumerated list
• ltOLgt .. lt/OLgt ordered list
• Each item in the list is marked with tags
  ltLIgt..lt/LIgt
• lt/ULgt, lt/LIgt, and lt/OLgt are optional but use it
  anyway

Ordered lists of books ltolgtltligt book 1ltligt book
2lt/olgt 1. book 12. book 2

• Unordered lists of books
• ltulgtltligt book 1ltligt book 2lt/ulgt
• book 1
• book 2

25
Fonts

• Different computers have different fonts.
• What font will the Web browser will choose if
  your font is not available?
• Tag ltFONTgt
• Attribute FACE
• Sans serif fonts Arial, Geneva, Helvetica
• Serif fonts Times New Romans, Times
• Monospaced fonts Courier New, Courier
• Pick a selection
• ltFONT FACE Arial, Geneva, Helveticagt
• The browser will choose the first available.

26
Fonts

• Tag ltfontgt lt/fontgt
• Attribute FACE
• Sans serif fonts Arial, Geneva, Helvetica
• Serif fonts Times New Romans, Times
• Monospaced fonts Courier New, Courier
• Pick a selection
• Example
• ltfont face Arial, Geneva, Helveticagt
• The browser will choose the first available.

27
Fonts Attributes
Size chart Size 1 8pts Size 2 10pts Size 3
12pts Size 4 14pts Size 5 18pts Size 6
24pts Size 7 36pts

• COLORthe color
• for Color setting
• SIZE2
• for the change of the current size
• Example
• ltfont color Orange size 6gt Hello! lt/fontgt
  will display
• Hello!

28
Blanks, Comments, etc.

• Insert blanks lines or extra white space
  characters in the code
• Do you see the line or the space on the webpage?
• nbsp
• inserts a white space
• lt!-- comment here --gt
• for comments
• ltbr /gt
• inserts line breaks
• lthr /gt
• draws an horizontal line

29

• More next time