WWW,%20Website,HTML%20and%20Frontpage

1
WWW,Website,HTML and Frontpage

• Sen Zhang

2
WWW (hardware software)

• The Internet, also called World Wide Web, is a
  worldwide network of thousands of computer
  networks and millions of commercial, educational,
  governmental, and personal computers.
• Built upon this huge physically interconnected
  hardware platform are various Internet services
  which ease information sharing.
• Services are made possible by difference software.

3
websites

• One of the important useful Internet services on
  the WWW is the website service.
• Those computers on which websites are located
  called web servers.

4
What is a Web server?

• A Web server is a computer that runs special
  serving software. That software "serves" HTML
  pages and the files associated with those pages
  when requested by a client, usually a Web
  browser.

5
websites

• A web site consists of a single web page or
  multiple web pages linked together.
• Various websites
• Commercial
• Educational
• Government
• Personal

6
Personal websites

• These Web sites were created by people who want
  to tell about themselves and the personal lives.
• They are designed by people just like you and me.

7
URL

• A URL is a Web Pages address and identifies
  where the web page is stored on the Internet.
• It is a four-part addressing scheme.
• See page BEB 8

8
Identify the parts of a URL
9
URL

• For example, the two URLs below point to two
  different files at the domain employees.oneonta.ed
  u for user zhangs.
• http//employees.oneonta.edu/zhangs/csci100/fp/tur
  key1.gif
• http//employees.oneonta.edu/zhangs/csci100/fp/ind
  ex.html
• The first specifies an image file that should be
  fetched using the http protocol the second
  specifies a Web page that should be fetched using
  the HTTP protocol.

10
Mapping between the url of your website and your
w drive at oneonta

• Externally on the web, the root url for your
  personal website is
• students.oneonta.edu/youraccount/.
• Internally, it is mapped to your w drive
• Therefore, files you save in your w drive or in
  any folders under your w drive can be
  potentially accessed by Internet users.

11
When your work on w drive, you work directly on
the Web server. When you save your pages, the
site is immediately updated.
12
File system is a tree structure
W
A drive or a folder
A file
csci100
My picture
myweb
Wdprj1.doc
The full path of Wdprj1.doc is w\csci100\wdprj1.d
oc, Slash is used as the path separator
index.html
path is a hierarchical directory path of the form
directory\directory\...\name
13
A webpage is an HTML file.

• HyperText Markup Language
• HTML is a collection of platform-independent
  styles (indicated by markup tags) that define the
  various components of a World Wide Web document.
• http//employees.oneonta.edu/zhangs/csci100/fp/ind
  ex.html

14
HTML

• Text Tags(attributes)
• A rich of tags(attributes)define the structure
  and layout of a Web document.

15
HTML

• The big picture of structures for an HTML
  document starts with lthtmlgtlt/htmlgt
• ltHTMLgt
• ltHEADgt
• (enter here what document is about)
• lt/headgt
• ltBODYgt
• (here is the content)and ends with
• lt/BODYgt
• lt/HTMLgt

16
A simple example

• lthtmlgt
• ltheadgt lttitlegt Hello, world!lt/titlegt
• lt/headgt
• ltbodygt
• Under construction! ltbgtThank you for the
  visit.lt/bgt
• lt/bodygt
• lt/htmlgt

17
Example Explained

• The first tag in your HTML document is lthtmlgt.
  This tag tells your browser that this is the
  start of an HTML document.
• The last tag in your document is lt/htmlgt. This
  tag tells your browser that this is the end of
  the HTML document.
• The text between the ltheadgt tag and the lt/headgt
  tag is header information. Header information is
  not displayed in the browser window.
• The text between the lttitlegt tags is the title of
  your document. The title is displayed in your
  browser's caption.
• The text between the ltbodygt tags is the text that
  will be displayed in your browser.
• The text between the ltbgt and lt/bgt tags will be
  displayed in a bold font.

18

• Open your textpad,
• Copy paste
• Save the file as mysample1.html in your w
  drive.
• Start IE, to key in the following url in address
  bar
• Students.oneonta.edu/youraccount/mysample1.html

19
How does the browser display the pages?

• HTML stands for Hyper Text Markup Language
• An HTML file is a text file containing small
  markup tags
• The markup tags tell the Web browser how to
  display the page
• All Web pages contain tags.
• The browser displays the page by reading these
  tags.

20
HTML

• An HTML file must have an htm or html or mht file
  extension
• An HTML file can be created using a simple text
  editor

21
HTML

• All the information you'd like to include in your
  Web page fits in between the ltBODYgt and lt/BODYgt
  tags.
• There are hundreds of other tags used to format
  and layout the information in a Web page. Tags
  are also used to specify hypertext links.

22
Hundreds HTML tags

• Text formatting
• Hyperlinks
• Images
• Tables
• Many other tags
• For a more complete list of tags, check out the
  link from my course website.

23
Hypertext

• Hyperlinks are text or graphics that can be
  clicked to bring the user to another web file
  such as a web page or graphic.
• Hypertexts allow Web developers to direct users
  to other Web pages with only a click of the mouse
  on either an image or text.
• Hyperlinks are the essence of the World Wide Web
  as they link pages within sites and from one web
  site to other web sites.
• This means you can jump from one document to
  another simply by clicking on hot spots.

24
Animated gifs

• Animated gifs can add some eye catching spots on
  your pages . Just dont overdo it.

25
How to authorize HTML pages

• Plain text editors such as textpad or notepad
  editor, in this case, you need to memorize many
  tags such as ltbodygt lttablegt lta refgt and so on.
• Microsoft Word, then save document as an html web
  page.
• Frontpage.
• Dreamweaver and many other tools.

26
What are text editors?

• Text editors are programs that modify text files.
  
• Their editing functions are analogous to those in
  the word processing programs that you may be
  familiar with, but they may or may not use a
  graphics user interface, and none of them can be
  used to affect a text file's format (fonts, bold,
  italic, and so forth) - because text files don't
  have any of these attributes.

27
Pure text editor vs. Word Processor

• A text editor is a program that allows you to
  edit (write and modify) a text file. With it you
  can see the contents and make changes at your
  will on them.
• A text editor has its limitations though a text
  editor won't allow you to specify different font
  types and sizes, insert graphics, etc... For
  that, more sophisticated work, you need a word
  processor.
• So an editor is a "simple" way of entering and
  modifying text with no other formatting features.

28
HTML Editors

• You can easily edit HTML files using a WYSIWYG
  (what you see is what you get) editor like
  FrontPage, Claris Home Page, Adobe PageMill, or
  Dreamweaver instead of writing your markup tags
  in a plain text file.
• But if you want to be a skillful Web developer, I
  strongly recommend that you use a plain text
  editor to learn your primer HTML first before you
  jump into FrontPage.

29
MS FrontPage

• FrontPage is a tool to create and manage Web
  pages.
• FrontPage is one of the best HTML editors for
  beginners. It is user friendly.

30
Similar to Word

• If you are familiar with Word than you will be
  very comfortable with this software.
• As you navigate through the software, you're
  probably noticing it's very similar to Microsoft
  Word.  You can change font sizes, colors,
  underline, bold, left and right align, add
  bullets, etc. by using the various menus just
  like you would in Word.

31
Word vs. FrontPage

• FrontPage also lets you insert elements such as
  page transitions and Dynamic HTML (DHTML)
  effects, as well as Web components such as hit
  counters and search forms. You can import and
  export entire sites, and easily edit in place
  on the Web server without downloading pages.
• FrontPage lets you view and edit the source code
  easily, switching between the normal (WYSIWYG)
  view and the HTML code, and you can create .ASP
  pages and secure pages for e-commerce.FrontPage
  also includes site management features that Word
  lacks, such as the ability to easily move folders
  and files on the Web server and to generate
  reports that detail recently added or changed
  files, problems, workflow status, and usage
  statistics.

32
Word vs. FrontPage

• They are competitors in the Web page editing
  arena, both are members of the Microsoft Office
  family.
• FrontPage has the advantage of using the same
  toolbar conventions as Word and other Office
  programs, so its easy for Word users to learn.
  Its also a genuine WYSIWYG utility what you see
  in the interface is pretty much what you see in
  the browser (even Java applets and animations can
  be viewed using the Preview function without
  opening the page in a browser).
• FrontPage lets users open and work on entire Web
  sites, not just individual Web pages. You can
  create oneonta.edu sites for collaboration, link
  to databases, and create and manipulate complex
  forms.

33
Create Hyperlinks in FrontPage

• To create a hyperlink in FrontPage, follow these
  steps
• Highlight the text or graphic that will be the
  hyperlink and select InsertHyperlink from the
  menu bar
• pressing CTRLK.

34

• Hyperlinks view allows you to organize the links
  in the web pages.

35
Changing Views

• You can toggle back and forth between the Normal
  and HTML screens.  If you are interested in
  learning how to write HTML you can view that
  screen to see how the code is written.  You can
  also edit from that view if you wish.

36
Visual effect achieved by Javascript

• JavaScript is a programming language that is
  mostly used in web pages, usually to add features
  that make the web page more interactive.

37
Add background music

• Check out my website.

38
How does the  WWW work?

• Web information is stored in documents called Web
  pages. 
• Web pages are files stored on computers called
  Web servers.
• Computers reading the Web pages are called Web
  clients.
• Web clients view the pages with a program called
  a Web browser.
• Popular browsers are Internet Explorer and
  Netscape Navigator.

39
How to write a web page?

• Plain text editor, then you need to know various
  HTML tags.
• Specialized tools
• Frontpage
• Word
• Dreamweaver

40
Web server

• If you want other people to view your pages, you
  must publish them.
• To publish your work, you have to copy your files
  to a web server.

41
Where to find a Web server?

• If you want your site available on the World Wide
  Web, usually you need to find a company that
  offers space on their server. Companies like
  these are typically called Web site hosting
  companies, although you might sometimes hear them
  called Internet service providers (ISP).

42
(No Transcript)
43

• But you do not need to worry about this issue,
  because as a student in SUCO, you are
  automatically provided your web space, which is
  mapped as your w drive. So a web server hosted by
  our college will host your web site to make it
  accessible to the Internet.
• When you create your websites under w drive, you
  actually create and work with directly on our
  college Web server. This means that as soon as
  you save your changes, they will be seen
  immediately on the World Wide Web.

44
Bring youtube to your webpage

• http//employees.oneonta.edu/zhangs/csci100/testyo
  utube10.html