webpage design with html part 1 l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Webpage Design with HTML (part 1) PowerPoint Presentation
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


  • 195 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

<HTML> </html>

<HEAD> </head>

<TITLE> </title>

<BODY> </body>

© pminnesma, 2003

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

<HTML>

<HEAD>

<TITLE>This is my first webpage</title>

</HEAD>

<BODY>

<P>Paragraphs and any data appears here....</p>

</body>

</html>

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

<P> </p>

<B> </b>

<I> </i>

<U> </u>

single or non-container tags:

<HR> horizontal rule (line)

<BR> 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

<HTML>

<HEAD>

<TITLE>This is my first webpage</title>

</head>

<BODY>

<P>Welcome to my first webpage.</p>

<HR>

<P>My name is <B>Mr. Minnesma</b>, but you can call me sir. This is great, that I am learning how to write my first program in <U>HyperText Markup Language</u> (HTML).</p>

<P>Soon I will be able to add <I>hyperlinks</i> and <I>graphics</i>!! Cool!</p>

<HR>

Last updated: August 15, 2002<BR>

(c) pminnesma, 2002

</body>

</html>

© 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)

<H1> </h1>

<H2> </ h2 >

<H3> </ h3 >

<H4> </ h4 >

<H5> </h5>

<H6> </ h6 >

© 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

<H1>

to

<H1 align=“center”>

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

tag name

attribute

modifier

© pminnesma, 2003

lists
Lists

un-ordered lists:

<UL>

<LI> first point

<LI> second point

<LI> third point

</UL>

© 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:

<UL>

<LI>School work

<LI>School work

<LI>School work

</ul>

© 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 <UL> to:

<UL type=“circle”>

<UL type=A>

<UL type=a>

<UL type=I>

<UL type=i>

<UL type=1>

<OL type=1 start “5”>

these are called:

Ordered Lists

pause

© pminnesma, 2003

variations on hr
Variations on HR

<HR> 100% length of screen, 2 pixels thick

<HR size=“number”> dictates thickness in pixels

<HR width=“number or percent> dictates width of screen

<HR align=“left/center/right> line position on screen

<HR noshade> produces a solid line

<HR color=“name or #rr-gg-bb”> dictates line colour

© pminnesma, 2003

practice21
Practice

Try the following variation on a line.

<HR width=“66%” align=“center” size=“5” color=“red” noshade>

SaveAs: Index5.html

View it: Internet Explorer (off-line)

© pminnesma, 2003

slide22

<HTML>

<HEAD>

<TITLE>This is my first webpage</title>

</head>

<BODY>

<P><H1 align="center">Welcome to my first webpage.</h1></p>

<HR>

<P>My name is <B>Mr. Minnesma</b>, but you can call me sir. This is great, that I am learning how to write my first program in <U>HyperText Markup Language</u> (HTML).</p>

<P>Soon I will be able to add <I>hyperlinks</i> and <I>graphics</i>!!Cool!</p>

Things I enjoy doing, include:

<UL>

<LI>School work

<LI>School work

<LI>School work

</ul>

<HR width=66% align=center size="5" color="red" noshade>

Last updated: August 15, 2002

<H6>(c) pminnesma, 2002</h6>

</body>

</html>

© 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