webpage design with html part 1
Download
Skip this Video
Download Presentation
Webpage Design with HTML (part 1)

Loading in 2 Seconds...

play fullscreen
1 / 23

Webpage Design with HTML (part 1) - PowerPoint PPT Presentation


  • 189 Views
  • Uploaded on

Webpage Design with HTML (part 1). Computer and Information Science P. Minnesma © pminnesma, 2003. Terminology. WWW (World Wide Web) A global hypertext media service of the Internet; the Web. Conceived in 1990.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'Webpage Design with HTML (part 1)' - Pat_Xavi


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
webpage design with html part 1

Webpage Design with HTML(part 1)

Computer and Information Science

P. Minnesma

© pminnesma, 2003

terminology
Terminology
  • WWW (World Wide Web)A global hypertext media service of the Internet; the Web. Conceived in 1990.
  • HypertextText that links to other text (now includes images, video, sound, animation). Conceived in 1965.
  • HTML (HyperText Markup Language)The authoring language used to develop webpages.

© pminnesma, 2003

slide3
Web BrowserSoftware designed for the Internet; needs to run on a client computer. It performs 5 functions: locates Internet resources, requests resources from servers*, downloads data, interprets code, and displays data.Names: Microsoft Internet Explorer, Netscape Navigator* servers include: web servers, Gopher servers, FTP servers
  • URL (Uniform Resource Locator)The address of any Internet-based information resource. http:// is assumed.
  • TCP/IP (Transmission Control Protocol/Internet Protocol)The language (protocol) of the Internet; it packs and unpacks data called “packets” and sends/receives them. (see video)

© pminnesma, 2003

slide4
The hypertext language uses “tags” to control the data.

<> for start tags

for stop tags

HTML authority site: http://www.w3c.org/

© pminnesma, 2003

tools needed
Tools Needed
  • Notepad (or Wordprocessor or text editor)
  • Web Browser (Microsoft or Netscape)

© pminnesma, 2003

four basic tags
Four Basic Tags
  • the tag to tell the browser an HTML document starts and stops
  • contains general info and it (will not be displayed)
  • data displayed on the title bar
  • data displayed in the browser window

© pminnesma, 2003

let s get started
Let’s get started...

This is my first webpage

Paragraphs and any data appears here....

SaveAs: Index.html

Create a folder called: first HTML

© pminnesma, 2003

pause

formatting tags container tags
Formatting Tags(container tags)
  • paragraph container tag
  • bold container tag
  • italic container tag
  • underline container tag

single or non-container tags:


horizontal rule (line)


carriage return (enter)

© pminnesma, 2003

practice
Practice

Add some paragraph data to your Index.html file, and incorporate the formats just introduced.

SaveAs: Index2.html

Open: Internet Explorer (off-line)

© pminnesma, 2003

slide10

This is my first webpage

Welcome to my first webpage.


My name is Mr. Minnesma, but you can call me sir. This is great, that I am learning how to write my first program in HyperText Markup Language (HTML).

Soon I will be able to add hyperlinks and graphics!! Cool!


Last updated: August 15, 2002

(c) pminnesma, 2002

© pminnesma, 2003

slide11
Welcome to my first webpage.

My name is Mr. Minnesma, but you can call me sir. This is great, that I am learning how to write my first program in HyperText Markup Language (HTML).

Soon I will be able to add hyperlinks and graphics!! Cool!

Last updated: August 15, 2002(c) pminnesma, 2002

© pminnesma, 2003

pause

more format tags
more Format Tags
  • Heading 1 (22 pt. bold)
  • Heading 2 (16 pt. bold)
  • Heading 3 (14 pt. bold)
  • Heading 4 (12 pt. bold)
  • Heading 5 (8 pt. bold)
  • Heading 6 (6 pt. bold)

© pminnesma, 2003

practice13
Practice

Add some Headings to your Index2.html file, and incorporate the formats just introduced.

SaveAs: Index3.html

View it: Internet Explorer (off-line)

© pminnesma, 2003

slide14
Welcome to my first webpage.
  • My name is Mr. Minnesma, but you can call me sir. This isgreat, that I am learning how to write my first program in HyperText Markup Language (HTML).
  • Soon I will be able to add hyperlinks and graphics!! Cool!
  • Last updated: August 15, 2002
  • (c) pminnesma, 2002

© pminnesma, 2003

pause

slide15
try changing

to

alignment can be applied to any tag, even horizontal lines and images

tag name

attribute

modifier

© pminnesma, 2003

lists
Lists

un-ordered lists:

  • first point

  • second point

  • third point

© pminnesma, 2003

practice17
Practice

Add a List to your Index3.html file, and incorporate the formats just introduced.

SaveAs: Index4.html

View it: Internet Explorer (off-line)

© pminnesma, 2003

slide18
Welcome to my first webpage.
  • My name is Mr. Minnesma, but you can call me sir. This isgreat, that I am learning how to write my first program in HyperText Markup Language (HTML).
  • Soon I will be able to add hyperlinks and graphics!! Cool!
  • Things I enjoy doing, include:
    • School work
    • School work
    • School work
  • Last updated: August 15, 2002
  • (c) pminnesma, 2002

Things I enjoy doing, include:

  • School work

  • School work

  • School work

© pminnesma, 2003

pause

practice19
Practice

Try these changes to your List to your Index3.html file. View changes in the browser. Don’t save.

change

    to:

                  these are called:

                  Ordered Lists

                  pause

                  © pminnesma, 2003

variations on hr
Variations on HR


100% length of screen, 2 pixels thick


dictates thickness in pixels


dictates width of screen


line position on screen


produces a solid line


dictates line colour

© pminnesma, 2003

practice21
Practice

Try the following variation on a line.


SaveAs: Index5.html

View it: Internet Explorer (off-line)

© pminnesma, 2003

slide22

This is my first webpage

Welcome to my first webpage.


My name is Mr. Minnesma, but you can call me sir. This is great, that I am learning how to write my first program in HyperText Markup Language (HTML).

Soon I will be able to add hyperlinks and graphics!!Cool!

Things I enjoy doing, include:

  • School work

  • School work

  • School work


Last updated: August 15, 2002

(c) pminnesma, 2002

© pminnesma, 2003

pause

slide23
Welcome to my first webpage.
  • My name is Mr. Minnesma, but you can call me sir. This is great, that I am learning how to write my first program in HyperText Markup Language (HTML).
  • Soon I will be able to add hyperlinks and graphics!! Cool!
  • Things I enjoy doing, include:
    • School work
    • School work
    • School work
  • Last updated: August 15, 2002
  • (c) pminnesma, 2002

stop

ad