Introduction to Computers 12/6/2015 1 BEGINNING HTML DESIGNING YOUR OWN WWW PAGES.

Introduction to Computers 04/21/23 1

BEGINNING HTML

DESIGNING YOUR OWN

WWW

PAGES


What is HTML?

Hypertext Markup LanguageUsed to create documents for the WWWStructure is important


General Command Format

Not case sensitiveTabs and Returns are not recognizedCommands start with a < and end with a >There is a beginning and an ending to most

command structuresThe / symbol is used to terminate a

command structure


Starting a WWW page

Start a WWW page by declaring itself <html>

End a WWW page by terminating itself </html>


Parts of a HTML document

<html>HeadingTitleBody</html>


The Heading

<head><title>Title of your WWW page</title></head>


The Body

Starts with: <body>Heading LevelsParagraphsListsLinksEnds with: </body>


The Body: Heading Levels

Six heading levels: h1 to h6General format

<hx> and </hx> where x is the heading level 1..6

Level 1 is the largest font size and 6 the smallest

Example: <h1>My First Page </h1>


The Body: Paragraphs

Used to separate paragraphsGeneral format

<p>This is your paragraph</p>


The Body: Lists

Three kinds of listsOrdered NumberedUnordered BulletsDefinition Explanatory List


Lists : Ordered

NumberedGeneral Format

Begins with <ol> and ends with </ol>Individual items in the list are designated with a

<li> in front of them. (NOTE: there is no </li>)Example: <ol>

<li> Chapter 1<li> Chapter 2</ol>


Lists: Unordered

BulletsGeneral Format

Begins with <ul> and ends with </ul>Individual items in the list are designated with a

<li> in front of them. (NOTE: there is no </li>)Example: <ul>

<li> Chapter 1<li> Chapter 2</ul>


Examples

OrderedMy first WWW pageThis is your paragraph

1. Chapter 1

2. Chapter 2

UnorderedMy first WWW pageThis is your paragraph

• Chapter 1

• Chapter 2


Lists: Definition

BulletsGeneral Format

Begins with <dl> and ends with </dl>Individual items in the list have two parts

Term <dt> (NOTE: there is no </dt>)Definition <dd> (NOTE: there is no </dd>)

Example: <dl><dt> Chapter 1<dd> Keys to Success</dl>


The Body: Links

Four typesPageImages - stillImages - motionSound


Links: Page

URL - Uniform Resource LocatorInternet protocol used to reach document

or resourceAddress of a document or resourceprotocol://machine.name.directory/

documenthttp://www.bps.k12.nd.us


Links: Page

General Format< a href = “URL” > text of link </a>The text of link is the part that the users

will click or select to activate the linkExample:

< a href = “http://www.bps.k12.nd.us”>Dakota RoughRider </a>


Links: Images - Still

Image must be in GIF or JPEG format Image must be in same folder as your html

fileGeneral Format

< img src = “image name.gif”> optional captionExample:

< img src = “parrot.gif”> This is a parrot


Links: Images - Still

OptionsImage alignment - top, middle or bottomAligns base of the image with the base line of the

surrounding textGeneral Format:

<img align = “alignment” src = ““image name.gif”> optional caption

Example:< img align= “middle” src = “parrot . gif”> parrot


Links: Images - Motion

Image should be in MPEG format Image must be in same folder as you html fileGeneral Format

< a href=“image name.mpeg”> text of link < /a >Example:

< a href= “birds.mpeg” > Parrots in flight < /a >


Links: Sound

Sound should be in AU format Image must be in same folder as you html fileGeneral Format

< a href=“sound name.au”> text of link < /a >Example:

< a href= “brdsnd.au” > Sounds of parrots < /a >


Extras

Bold < b > text < /b > Italic < i > text < /i >Center < center > text or image < /center

>


General Overview

< html >

< head >

< title > Ostrich < /title >

< /head >

< body >

text for your page

< /body >

< /html >


Java Applets

A Java applet is a small Java application that is embedded in an HTML document and runs in a browser window.

When a browser interprets a document that contains a Java applet, the program files are downloaded onto the user’s machine and then the browser’s Java interpreter runs the applet.


Making an Applet

Must change your program to extend to the class GBApplet rather than GBFrame. public class programName extends GBApplet Must also import:

java.applet.*; java.awt.*;

Must add a reference to the class file in a HTML document to access Java file. <Applet code=“programName.class" width=“200",

height="200"></applet> Must be included in the body of the HTML document.

Introduction to Computers 12/6/2015 1 BEGINNING HTML DESIGNING YOUR OWN WWW PAGES.

Documents

Transcript of Introduction to Computers 12/6/2015 1 BEGINNING HTML DESIGNING YOUR OWN WWW PAGES.