Webpage design with html part 1
Download
1 / 23

Webpage Design - PowerPoint PPT Presentation


  • 184 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' - 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 l.jpg

Webpage Design with HTML(part 1)

Computer and Information Science

P. Minnesma

© pminnesma, 2003


Terminology l.jpg
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 l.jpg

  • 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 l.jpg

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 l.jpg
Tools Needed

  • Notepad (or Wordprocessor or text editor)

  • Web Browser (Microsoft or Netscape)

© pminnesma, 2003


Four basic tags l.jpg
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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

<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 l.jpg

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 l.jpg
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 l.jpg
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 l.jpg

  • 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 l.jpg

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 l.jpg
Lists

un-ordered lists:

<UL>

<LI> first point

<LI> second point

<LI> third point

</UL>

© pminnesma, 2003


Practice17 l.jpg
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 l.jpg

  • 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 l.jpg
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 l.jpg
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 l.jpg
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 l.jpg

<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 l.jpg

  • 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