html 4 0 and web page design module i l.
Skip this Video
Download Presentation
HTML 4.0 and Web Page Design Module I

Loading in 2 Seconds...

play fullscreen
1 / 78

HTML 4.0 and Web Page Design Module I - PowerPoint PPT Presentation

  • Uploaded on

HTML 4.0 and Web Page Design Module I. Preview. Examining HTML Writing source code Placing text on the page Formatting text Creating headings and horizontal rules Creating lists Adding color to your Web pages Introducing graphics Adding hypertext links Creating graphic hyperlinks.

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

PowerPoint Slideshow about 'HTML 4.0 and Web Page Design Module I' - shelley

Download Now 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
  • Examining HTML
  • Writing source code
  • Placing text on the page
  • Formatting text
  • Creating headings and horizontal rules
  • Creating lists
  • Adding color to your Web pages
  • Introducing graphics
  • Adding hypertext links
  • Creating graphic hyperlinks
lesson 1 examining html
Lesson 1: Examining HTML
  • Define HTML
  • Identify HTML design issues
  • Identify Web page elements
world wide web
World Wide Web


The Web, or World Wide Web, is the area of the Internet that allows you to display text and graphics and play videos, and movies. With appropriate equipment, you can even receive or broadcast live audio and video.

web site
Web site

Web site:

A Web site stores information that has been organized into individual hypermedia documents, Web pages, and holds it on a server for distribution across the Internet.



A hyperlink, or link, usually appears as colored, underlined text or a graphic on a Web page. A link is a jumping-off point for moving from one subject to another.

hypermedia document
Hypermedia document

Hypermedia document:

A hypermedia document is a document with a format that can be displayed online, in a browser. In practice, hypermedia documents are often called HTML files, although they may contain many other types of files.

defining html
Defining HTML
  • Using HTML tags
  • Creating files
defining html9
Defining HTML


HTML is a tag-based markup language you use to create Web pages.


A browser is a software application that allows you to view HTML documents, whether Web pages or HTML files, on your own computer. Two popular browsers are Internet Explorer and Netscape Navigator.

defining html10
Defining HTML


Tags are instructions that specify how a browser should display the text and graphics on Web pages.

Source code:

Source code is the tags and text you include in an HTML file.

examining html design issues
Examining HTML Design Issues
  • Different browsers will display the same HTML document in different ways

Settings that affect the display of Web pages:

examining html design issues13
Examining HTML Design Issues
  • HTML standards are set and maintained by the World Wide Web Consortium

Backward compatibility:

Backward compatibility is the idea that earlier versions of HTML, and the Web pages developed with those versions, should not be made obsolete. Browsers must accommodate several versions.

key elements of html 4 0
Key elements of HTML 4.0
  • Provisions for accessibility — alternative displays and multimedia formats for persons with special physical needs
  • The use of style sheets, which are collections of tags that can be applied as a group to an HTML document
  • The use of Document Type Definitions (DTDs), which define and apply certain building blocks for similar types of Web documents
lesson 2 writing source code
Lesson 2: Writing Source Code
  • Gather the tools for writing HTML code
  • Use tags
  • Create an HTML document
  • View an HTML document in a browser
gathering the tools for writing html code
Gathering the Tools forWriting HTML Code
  • HTML Web page authors require three basic tools:
    • Computer with graphics capabilities
    • Text editor
    • Browser software application

Text editor:

A text editor is a software application used to create and manipulate text, such as Notepad and WordPad.



Extensions are tags added to HTML documents to identify certain types of files included in those documents. Examples include .wav for WAV audio files, or .jpg for a certain type of graphics file.

using tags
Using Tags
  • Tags serve as the foundation of HTML documents
  • Tags define the elements and characteristics of HTML documents


Attributes define a specific application of a tag. You associate an attribute with a tag by including it within the tag brackets.

using tags22
Using Tags
  • Sample tags with attributes:
using tags23
Using Tags
  • Four sets of standard HTML tags:
lesson 3 placing text on the page
Lesson 3: Placing Text on the Page
  • Format paragraphs
  • Create line breaks
  • Format addresses
  • Create block quotes
  • Use the Preformat tag
formatting paragraphs
Formatting Paragraphs


In a Web document, a paragraph is one or more lines of text that are kept together on a page. A paragraph may or may not include line breaks.

  • Use the <P> tag to announce the beginning of a new paragraph
creating line breaks
Creating Line Breaks

Line break:

The line break ends a line of text instantly and makes the following text or element flow to the next line.

formatting addresses
Formatting Addresses

Address formatting – Notepad


Formatting Addresses

Address formatting – browser

creating block quotes
Creating Block Quotes

Block quotes:

Block quotes are indented sections of text used to offset particular elements of a document.

using the preformat tag
Using the Preformat Tag
  • The <PRE> tag and its required closing tag, </PRE>, define an area in which browsers display text exactly as it is typed in the HTML document
  • Normally, a browser ignores spaces and tabs, but the Preformat tags allow you to insert spaces or tabs
  • The Preformat tag can save you time, especially before you learn to create tables in HTML
lesson 4 formatting text
Lesson 4: Formatting Text
  • Add text attributes
  • Change text size
adding text attributes
Adding Text Attributes

Text attributes:

Text attributes are HTML codes you use to offset or emphasize text in HTML documents.

Content-based tags:

Content-based tags signal the browser to interpret the purpose or content of the text. Although all browsers recognize content-based tags, each may display the marked text in a different way.

adding text attributes37
Adding Text Attributes

Format-specific tags:

Format-specific tags define the appearance of the text but do not provide specification about its content.

changing text size
Changing Text Size
  • In HTML, you specify text size in relative terms, plus or minus values, rather than in the point sizes
    • Size 1 is the smallest setting, and size 7 is the largest
  • Basefont tag defines the current body text size —the basefont size
  • Use Font tags around a word or phrase to make it smaller or larger than the surrounding text
lesson 5 creating headings and horizontal rules
Lesson 5: Creating Headings and Horizontal Rules
  • Create headings
  • Create horizontal rules
headings and horizontal rules
Headings and Horizontal Rules


Headings are specially formatted titles or topic lines of text.

Horizontal rules:

Horizontal rules are lines used to divide areas of a document.

creating headings
Creating Headings
  • Using standard heading sizes
    • Like text, headings are based on a relative sizing scale
    • Level 1 is the largest, and Level 6 is the smallest
  • Customizing headings
creating horizontal rules44
Creating Horizontal Rules
  • Setting the thickness of rules


A pixel, or picture element, is a single point in a graphic element. Pixels are so close together that they appear connected.

creating horizontal rules45
Creating Horizontal Rules
  • Defining the width of rules across a page

Actual pixel widths:

Actual pixel widths means that your rule line will appear the same size in every instance, as long as the display resolution does not change.

Relative percentage widths:

Relative percentage widths will always appear the same width in relation to the size of the browser window.

lesson 6 creating lists
Lesson 6: Creating Lists
  • Define basic list types
  • Create unordered lists
  • Create ordered lists
  • Create definition lists
defining basic list types
Defining Basic List Types

Unordered lists:

Unordered lists are collections of related items displayed in no particular sequence—like many shopping lists. The lines of unordered lists are not numbered or lettered.

Ordered lists:

Ordered lists are collections of items in a specific pattern or order. Step-by-step instructions and tables of contents are examples of ordered lists.

defining basic list types48
Defining Basic List Types

Definition lists:

Definition lists present collections of terms and explanations. A glossary is a good example of a definition list.

List tags:

List tags define the style of a list. Every list requires an opening list tag and a closing list tag.

Line tag:

A line tag indicates to a browser that the text following it is a list item. A series of line tags makes up a list.

creating unordered lists
Creating Unordered Lists
  • Create unordered lists using the <UL> opening tag and the required </UL> closing tag
  • Unordered bulleted lists are the easiest lists to create and probably the most widely used
creating ordered lists
Creating Ordered Lists
  • Ordered lists are most useful when the sequence of list items is important
  • Ordered lists use the <OL> </OL> list tags
creating definition lists
Creating Definition Lists
  • Formatted differently from unordered and ordered lists
  • Useful way to present terms and glossaries
lesson 7 adding color to your web pages
Lesson 7: Adding Colorto Your Web Pages
  • Define color options for Web pages
  • Apply background color
  • Apply color to text
color options for web pages
Color Options for Web Pages

16 basic colors recognized by all browsers:

color options for web pages54
Color Options for Web Pages

Hexadecimal code:

Hexadecimal code, or hex, is a numbering system that uses both numeric and alpha characters to define sets of 16 elements. Browsers can interpret hex codes as specific colors.


RGB represents red, green, and blue — the three colors of light which can be mixed to produce any other color.

applying background color
Applying Background Color
  • To specify background color, you insert the BGCOLOR=n attribute in the document’s <BODY> tag
    • The n specifies the color setting
    • You can specify the color setting using color names and RGB color settings
  • Your choice should enhance the appearance of the text and other foreground content
applying color to text
Applying Color to Text
  • To color all the body text in a document (except links), you add the TEXT=n attribute to the <BODY> tag, where n equals the color specification
  • To color instances of text, you surround the text with the <FONT COLOR=n>...</FONT> tags
lesson 8 introducing graphics
Lesson 8: Introducing Graphics
  • Identify GIFs and JPEGs
  • Place graphics on a page
  • Apply graphics to a page background
identifying gifs and jpegs
Identifying GIFs and JPEGs


GIF stands for Graphics Interchange Format. The GIF image format was first developed for image transfer among CompuServe users.


JPEG stands for Joint Photographic Experts Group, which is the name of the standards organization that developed the JPEG image format.

placing graphics on a page
Placing Graphics on a Page
  • Before you can place images on your Web pages, the images must be stored on your system
  • You use the <IMG> tag to place graphics on your Web pages
lesson 9 adding hypertext links
Lesson 9: Adding Hypertext Links
  • Define hypertext links
  • Create links to other Web pages
  • Create links within a document
  • Assign color attributes to links
hypertext links
Hypertext Links

Hypertext links:

Hypertext links are words or phrases specially coded by a Web author to allow users to navigate among Web pages and images.


An anchor is the component of a hyperlink that viewers click on to move to a target location or Web document. The anchor tag is <A>.


A target is the component of a hypertext link to which viewers move.

creating links to other web pages
Creating Links to OtherWeb Pages
  • Create links to pages on your own server or on another Internet server
creating hypertext links to specific targets
Creating Hypertext Linksto Specific Targets
  • Creating hypertext links to specific targets is a two-step process
    • Mark the target area
    • Create a hypertext link to the specific target
lesson 10 creating graphic hyperlinks
Lesson 10: CreatingGraphic Hyperlinks
  • Create graphic hyperlinks to other Web pages
  • Create graphic hyperlinks within documents
  • Create a graphic hyperlink from a graphic
  • Add borders to graphic hyperlinks
creating graphic hyperlinks to other web pages
Creating Graphic Hyperlinks to Other Web Pages
  • Creating graphic links consists of placing images and adding link tags
creating graphic hyperlinks within documents
Creating Graphic Hyperlinks within Documents
  • Creating an internal graphic link is a three-step process
    • Mark your target area
    • Place your graphic
    • Create your anchor link
creating a link from a graphic to itself
Creating a Link from aGraphic to Itself
  • Small images can be enlarged for a better view
    • Viewer can select which graphics to enlarge
    • Using small images speeds up the initial download and display of your Web page
  • Examining HTML
  • Writing source code
  • Placing text on the page
  • Formatting text
  • Creating headings and horizontal rules
  • Creating lists
  • Adding color to your Web pages
  • Introducing graphics
  • Adding hypertext links
  • Creating graphic hyperlinks