Web%20Page%20Introduction

1
Web Page Introduction
2
What is a web page?

• A web page is a text file containing markup
  language tags.
• A markup language combines text and extra
  information about the text's structure or
  presentation using markup, which is intermingled
  with the primary text.
• ltH1gt Britain calls for direct talks with Iran
  lt/H1gt

3
Hyper Text MarkUp Language , HTML

• History
• http//en.wikipedia.org/wiki/HTML
• Standard
• The World Wide Web Consortium (W3C)
• HTML 5 lt!DOCTYPE htmlgt
• Multimedia controls
• Video, audio, canvas
• Controls with build-in validation

4
XML, Extensible Markup Language

• User-defined tags
• ltAuthorNamegtJohn Smithlt/AuthorNamegt
• Ex c\inetpub\wwwroot\facoritebook.xml
• Cascade Style Sheet, CSS

5
XML with Stylesheet Example
lt?xml version "1.0" ?gt lt?xml-stylesheet
type"text/css" href"books.css"
?gt ltBooksgt ltBookgt ltbtitlegtMy Favorite
Booklt/btitlegt ltISBNgt1-34567-04-01lt/ISBNgt ltAuthors
gt ltAuthorNamegtJohn Smithlt/AuthorNamegt ltAuthorN
amegtPeter Chenlt/AuthorNamegt lt/Authorsgt ltPricegt
45.00lt/Pricegt ltDescriptiongtThis is a grerat
booklt/Descriptiongt lt/Bookgt ltBookgt ltbtitlegtMy
Second Favorite Booklt/btitlegt ltISBNgt1-34567-04-02lt
/ISBNgt ltAuthorsgt ltAuthorNamegtAdam
Smithlt/AuthorNamegt lt/Authorsgt ltPricegt
25.00lt/Pricegt ltDescriptiongtThis is a second
great booklt/Descriptiongt lt/Bookgt lt/Booksgt
6
Style Sheet Example
btitle displayblock font-family Aerial,
Helvetica font-weight bold font-size
20pt color 9370db text-align
center ISBN displayblock font-family
Aerial, Helvetica font-weight
bold font-size 12pt color
c71585 text-align left Authors display
inline font-family Aerial, Helvetica font-sty
le italic font-size 10pt color
9370db text-align left Price displaybl
ock font-family Aerial, Helvetica font-size
12pt color ff1010 text-align
left Description displayblock font-famil
y Aerial, Helvetica font-size 12pt color
ff1010 text-align left
7
Types of Web pages

• Static page
• The contents of a web page is predefined by HTML
  tags.
• Example david chaos home page.
• Dynamic page
• A web page includes contents produced by a
  programming language when the page is opened.
• Examples
• Pages that display current date/time, visitor
  counter
• Yahoo home page
• Pages that display results based on a database
  query.
• Yahoos Finance/Enter symbol/Historical prices

8
Technologies for Creating Dynamic Pages

• Client-side technology
• JavaScript
• Server-side technology
• Microsoft .Net
• PHP
• Java
• Others

9
HTML Tags (Elements)

• Heading section
• ltheadgt, lttitlegt, ltmetagt, ltscriptgt, etc.
• Body section
• ltbodygt,
• lth1gt lt/h1gt large text
• lth6gt lt/h6gt smallest text
• Reference tag lta hrefcake.jpggt
• ltpgt Paragraph tag
• ltimggt Image tag
• Table lttablegt, lttrgt a new row in table, lttdgt a
  new cell in a table row.
• Form ltformgt, ltinputgt, ltselectgt

10
Example
lthtmlgt lttitlegtDavid Chao HTML Demolt/titlegtltpgt ltbod
ygt lth1gtWelcome to David Chaos Home
Pagelt/h1gt lthrgt lta href"CAKE.JPG"gtClick here to
see a cake picturelt/agtltpgtlt/bodygt lt/htmlgt
11
Online Resources for Learning HTML

• w3schools.com
• http//www.w3schools.com/default.asp
• Example
• Learn HTML5

12
Web Page Editors

• DreamWeaver and many others
• With support to develop dynamic page with script
  languages
• http//www.adobe.com/solutions/html5.html
• MS Word
• Open a new document
• Save As Web Page
• Internet free editor
• Wix free website builder
• http//www.wix.com/

13
Creating Web Page with MS Word

• Text
• Alignment, Size, Font, Bold
• Link
• Existing page, place in document, email
• Table links, photos, multiple columns
• List
• BookMark
• BackGround
• Page layout/Page Color
• Picture
• Email mailtoemailAddress

14
Creating Website Using WIXhttp//www.wix.com/

• Create
• Choose a template
• View
• Edit Desktop/Mobile editor
• Page rearrange the order, add page, page
  transition
• Design background, colors
• Add
• text, image, gallery, media, etc.
• Social, Apps Google map,
• Save/preview
• My Account
• Saved websites

15
Typical Web Site Contents

• About Us
• Company organization
• Mission
• Products/Services
• Partner organizations
• Clients
• Information for users
• Links to relevant sites
• Contact Us

16
Publishing Web Pages

• Web server
• Default directory, default home page
• Creating web pages using editor
• Transfer web pages to web server
• FTP, File Transfer Program