Web%20Page%20Introduction - PowerPoint PPT Presentation

About This Presentation
Title:

Web%20Page%20Introduction

Description:

Hyper Text MarkUp Language , HTML XML, Extensible Markup Language XML with Stylesheet Example Style Sheet Example Types of Web pages Technologies for Creating ... – PowerPoint PPT presentation

Number of Views:113
Avg rating:3.0/5.0
Slides: 17
Provided by: COB84
Learn more at: https://faculty.sfsu.edu
Category:

less

Transcript and Presenter's Notes

Title: 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
Write a Comment
User Comments (0)
About PowerShow.com