Upload
tamekah-bridges
View
19
Download
0
Embed Size (px)
DESCRIPTION
BEGINNING HTML. DESIGNING YOUR OWN WWW PAGES. What is HTML?. Hypertext Markup Language Used to create documents for the WWW Structure is important. General Command Format. Not case sensitive Tabs and Returns are not recognized Commands start with a < and end with a > - PowerPoint PPT Presentation
Citation preview
Introduction to Computers 04/20/23 1
BEGINNING HTML
DESIGNING YOUR OWN
WWW
PAGES
Introduction to Computers 04/20/23 2
What is HTML?
Hypertext Markup LanguageUsed to create documents for the WWWStructure is important
Introduction to Computers 04/20/23 3
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
Introduction to Computers 04/20/23 4
Starting a WWW page
Start a WWW page by declaring itself <html>
End a WWW page by terminating itself </html>
Introduction to Computers 04/20/23 5
Parts of a HTML document
<html>HeadingTitleBody</html>
Introduction to Computers 04/20/23 6
The Heading
<head><title>Title of your WWW page</title></head>
Introduction to Computers 04/20/23 7
The Body
Starts with: <body>Heading LevelsParagraphsListsLinksEnds with: </body>
Introduction to Computers 04/20/23 8
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>
Introduction to Computers 04/20/23 9
The Body: Paragraphs
Used to separate paragraphsGeneral format
<p>This is your paragraph</p>
Introduction to Computers 04/20/23 10
The Body: Lists
Three kinds of listsOrdered NumberedUnordered BulletsDefinition Explanatory List
Introduction to Computers 04/20/23 11
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>
Introduction to Computers 04/20/23 12
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>
Introduction to Computers 04/20/23 13
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
Introduction to Computers 04/20/23 14
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>
Introduction to Computers 04/20/23 15
The Body: Links
Four typesPageImages - stillImages - motionSound
Introduction to Computers 04/20/23 16
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
Introduction to Computers 04/20/23 17
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>
Introduction to Computers 04/20/23 18
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
Introduction to Computers 04/20/23 19
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
Introduction to Computers 04/20/23 20
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 >
Introduction to Computers 04/20/23 21
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 >
Introduction to Computers 04/20/23 22
Extras
Bold < b > text < /b > Italic < i > text < /i >Center < center > text or image < /center
>
Introduction to Computers 04/20/23 23
General Overview
< html >
< head >
< title > Ostrich < /title >
< /head >
< body >
text for your page
< /body >
< /html >
Introduction to Computers 04/20/23 24
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.
Introduction to Computers 04/20/23 25
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.