Cs 120 concepts of computing
This presentation is the property of its rightful owner.
Sponsored Links
1 / 19

CS 120 Concepts of Computing PowerPoint PPT Presentation


  • 53 Views
  • Uploaded on
  • Presentation posted in: General

CS 120 Concepts of Computing. Introduction to Web Page/Site Development. What is a Web Page?. A document… w/ text, graphics, links, etc. described in a text file... using HTML tags to specify the layout of the elements on the page that can be displayed by a web browser.

Download Presentation

CS 120 Concepts of Computing

An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


Cs 120 concepts of computing

CS 120Concepts of Computing

Introduction to

Web Page/Site Development


What is a web page

What is a Web Page?

A document…

  • w/ text, graphics, links, etc.

    described in a text file...

  • using HTML tags to specify the layout of the elements on the page

    that can be displayed by a web browser.


What is an html tag

What is an HTML Tag?

  • Formatting instructions for page elements.

  • Beginning Tag:

    <name parameters>

  • Ending Tag:

    </name>

  • Parameters specify options

    parameter=“value”

  • Example:

    <font color=“#ff0000”>Hi!</font>

More later …


What s on a web page

Paragraphs of text

Formatted text

Headings

Lists

Rules (horz. lines)

Links (to pages, mail addresses, files)

Background (color or pattern)

Images / Graphics

Image Maps

Tables

Frames

Forms

Sound Clips

Video Clips

Java Applets

What’s on a web page?


What s on a web page1

Paragraphs of text

Formatted text

Headings

Lists

Rules (horz. lines)

Links (to pages, mail addresses, files)

Background (color or pattern)

Images / Graphics

Image Maps

Tables

Frames

Forms

Sound Clips

Video Clips

Java Applets

What’s on a web page?

Items in yellow will be covered in this class.


What is a web site

What is a web site?

  • A collection of related web pages.

  • 1st page = “Home Page”

    • note: This is NOT the browser’s home page!

    • index.htm or index.html


Terminology

Terminology

  • Web Server

  • Web Browser

  • HTTP

  • HTML

  • URL

    • http://server/folder-path/filename.htm

    • file:///folder-path/filename.htm

    • mailto:[email protected]


Tools for creating web pages

Tools for Creating Web Pages

  • Text Editor

    • Example: Notepad

  • Word Processor

  • HTML Editor

    • Example: EditPlus2

  • Web Page Authoring Tool

    • Examples: Dreamweaver & Nvu

  • Other Programs that Generate Web Pages


Before you begin

Before you begin……...

  • Collect Information

  • Determine the Site Organization


Before you begin1

Before you begin……...

  • Collect Information

  • Determine the Site Organization

  • Determine the File Organization


Before you begin2

Before you begin……...

  • Collect Information

  • Determine the Site Organization

  • Determine the File Organization

  • Collect Supporting Graphics

    • not part of the web page file

    • JPG, GIF, or PNG

    • file size?

    • location?


File folder naming rules

File & Folder Naming Rules

  • Dependent on the server

  • No spaces

  • Use correct extensions

    • .htm or .html for web pages

    • .jpg or .gif for graphics

  • Special Filenames

    • default.htm– server default (don’t use)

    • index.htm– home page


Web page layout considerations

Web Page Layout Considerations

  • HTML is not WP or DTP

  • Can’t control page size

  • Limited font control (typeface & size)

  • Limited control of position of graphics

  • Why these limitations?

    • HTML is platform independent


Html basics a minimal page

HTML Basics … a minimal page

<HTML>

<HEAD>

<TITLE>Page Title</TITLE>

</HEAD>

<BODY BGCOLOR=“#FFFFFF”>

<P>Have a <B>nice</B> day.</P>

</BODY>

</HTML>


Html basics a minimal page1

HTML Basics … a minimal page

<HTML>

<HEAD>

<TITLE>Page Title</TITLE>

</HEAD>

<BODY BGCOLOR=“#FFFFFF”>

<P>Have a <B>nice</B> day.</P>

</BODY>

</HTML>


Html basics a minimal page2

HTML Basics … a minimal page

<HTML>

<HEAD>

<TITLE>Page Title</TITLE>

</HEAD>

<BODY BGCOLOR=“#FFFFFF”>

<P>Have a <B>nice</B> day.</P>

</BODY>

</HTML>


Html basics a minimal page3

HTML Basics … a minimal page

<HTML>

<HEAD>

<TITLE>Page Title</TITLE>

</HEAD>

<BODY BGCOLOR=“#FFFFFF”>

<P>Have a <B>nice</B> day.</P>

</BODY>

</HTML>


Html basics a minimal page4

HTML Basics … a minimal page

<HTML>

<HEAD>

<TITLE>Page Title</TITLE>

</HEAD>

<BODY BGCOLOR=“#FFFFFF”>

<P>Have a <B>nice</B> day.</P>

</BODY>

</HTML>


Html basics a minimal page5

HTML Basics … a minimal page

<HTML>

<HEAD>

<TITLE>Page Title</TITLE>

</HEAD>

<BODY BGCOLOR=“#FFFFFF”>

<P>Have a <B>nice</B> day.</P>

</BODY>

</HTML>


  • Login