Writing Your Own Web Page with HTML
Download
Report
Transcript Writing Your Own Web Page with HTML
Writing Your Own Web Page with
HTML
World Wide Web
Provides multimedia communication over
the Internet
Terminology:
URL, HYPERTEXT, HOMEPAGE, SERVER,
ISP, LINK, WEBSITE
HTML is the language of the ‘Web
HTML History
Different versions, each improving on the
last
HTML2, HTML3, HTML4 and now HTML
5 is being worked on as a “draft”
Outlined and controlled by the World
Wide Web Consortium (W3C) let by
Timothy Berners-Lee
◦ Berners-Lee developed the idea of HTML
Anyone can participate in development of
the WWW
Preparing a Web Site
Writing vehicle
◦ Programming in HTML
◦ Authoring software
Browser
◦ Test the code locally
◦ Test the code on the server
Server
◦ Test links to other sites
◦ Store your published site
Organization of a website
• Hierarchical
– Home page provides general overview, defines main links for the pages
further down in the hierarchy
– Pages contain more specific information
– Links to move up or down
– Readers can easily know their position in the structure
• Linear (sequential)
– Home page is the title or introduction
– Links move from one page to another, typically forward and backward
– Very rigid
– Limits your readers’ freedom to explore
• Combination of Linear and Hierarchical
– Links to move up or down, forward or backward
– Readers lose their mental positioning when crossing hierarchical
boundaries by moving forward or backward
• Web organization
– Little or no overall structure
HyperText Markup Language
(HTML)
HyperText
◦ Active text
◦ Link
◦ Clicking causes an action
Markup Language
◦ Tags indicate formatting and document
structure
◦ Source code is processed by a program that
understands the tags and formats the page (a
web browser)
Programming in HTML
Type tags into a text file (Notepad)
◦ HTML editor
◦ HTML code must be saved with .html extension
Authoring Software
WYSIWYG
Create web page visually
HTML code is generated automatically
See image on next slide
Process: Preparing a Web Page
Use writing vehicle to create web site
Test locally using the browser
Connect to Internet using your browser
Test the links to other sites
Publish the site to your server
Test the site by accessing from the server
HTML - Basic Tags
Tag – tells browser how to display the
information provided
Enclosed in angle brackets < >
Generally used in pairs
◦ Open tag
◦ Closing tag : same tag with / in front
You can nest tags
Tags cannot overlap
(<i><b>WordUp!</i></b>
is bad form, not guaranteed to work)
HTML- Document Tags
<HTML> … </HTML>
◦ Beginning and end of every HTML document
<HEAD> … </HEAD>
◦ Contains information about the document
including the title that is to appear in the title
bar
<BODY> … </BODY>
◦ All content for the page is placed between
these tags
HTML – Basic Tags
<HTML>
<HEAD>
</HEAD>
<BODY>
</BODY>
</HTML>
If you view this from the browser, you will
see a blank page
HTML Basic Tags
<TITLE> … </TITLE>
Causes the page title
to be displayed in the
title bar
Place in the heading
section between
<HEAD> … </HEAD>
HTML – Basic Tags
Add content between <BODY> …
</BODY>
Text Structure Tags
◦
◦
◦
◦
Headings
Paragraphs
Lists
Images
HTML – Creating and Testing
Open text editor
Enter basic document tags
<HTML>
<HEAD> … </HEAD>
<BODY> … </BODY>
</HTML>
Save as .html
Do not close text editor
HTML – Creating and Testing
Open your browser
Type file path/name as the URL or use
File Open and select the file
The file name should appear on the title
bar
The main window should be blank
Do not close the browser
HTML – Creating and Testing
Return to the open file in the text editor
Add a <TITLE> tag inside <HEAD>
Save
Return to the browser
Click refresh or reload button
Check the title bar
HTML – Creating and Testing
Add one tag at a time to create content
After each addition
◦ Save the file in the text editor
◦ Refresh/reload the file in the browser
◦ Verify that your entry is correct
HTML Text Tags – Heading Tags
<H1> … </H1> Largest heading
<H2> … </H2>
<H3> … </H3>
<H4> … </H4>
<H5> … </H5>
<H6> … </H6> Smallest heading
<H1>Theatre Schedule</H1>
HTML Text Tags – Paragraph Tag
<P> … </P>
◦ Blank line inserted before the start of the
paragraph
One space between adjacent words
regardless of the number of spaces in the
source
Extra spaces and lines are ignored
<P>Learning HTML is a lot of fun!</P>
HTML Text Tags - Break
<BR>
Forces a new line
<P>Learning HTML is a lot of <BR>fun!</P>
Displays as:
Learning HTML is a lot of
fun!
HTML List Tags
<UL> … </UL>
◦ Unordered list
(bulleted list)
<OL> … </OL>
◦ Ordered list
(numbered list)
Every item in a list is
preceded with <LI>
List contents are
indented
HTML Formatting Tags
Make page more attractive
Make page more functional
Style Tags
◦ Logical
◦ Physical
HTML Formatting Tags – Logical
Style Tags
Browser dependent
Emphasis Tag
◦ <EM> … </EM>
◦ Usually displays italics
Strong emphasis Tag
◦ <STRONG> … <STRONG>
◦ Usually displays boldface
HTML Formatting Tags – Physical
Style Tags
Tell browser how to display the text
Italics
<I> … </I>
Boldface
<B> … </B>
Center
<CENTER> … </CENTER>
Images
Use images that are appropriate and
attractive
Use sparingly since they effect download
time
Obtaining Images
Download from a site that offers free
images
◦ Pay to use an image
◦ Scan an image/document that you own or
have permission to use
Digital camera
Create original graphics using software
Image File Formats
Acceptable image formats vary by browser
Generally acceptable formats are
◦ GIF
Graphics Interchange Format
Used for graphics like clipart
◦ JPG
Joint Photographic Experts Group
Use for photographs
◦ PNG
Portable Network Graphics
Expected to replace GIF
HTML – Image Tag
Inline image
Loaded with HTML
code
◦ <IMG>
Attributes:
◦
◦
◦
◦
SRC
ALT
HEIGHT
WIDTH
<IMG SRC=“hello.jpg”>
<IMG SRC=“hello.jpg ALT=“Hello!”
WIDTH=“50%”>
HTML – Link Tag (HREF)
Link to
◦ Other sites
◦ Between
your own pages
◦ To e-mail
<A HREF=”name”>hypertext</A>
<A HREF=”http://www.kodak.com”>Kodak</A>
<A HREF=”johnpage.html”>John’s Page</A>
<A
HREF=”mailto:[email protected]”>John’s
mail</A>
Changing Font
<FONT>…</FONT>
◦ Attributes
SIZE=“…” (font size, 1 through 7)
COLOR=“…” (font colour)
FACE=“…” (font type)
<FONT SIZE=“3” COLOR=“#FF9933”
FACE=“tahoma”> …</FONT>
HTML Tags – Background Colour
and Graphics
Attributes of <BODY>
◦ BGCOLOR=”code”
Specify color for background of the screen
◦ BACKGROUND=”path/file”
Tiles the graphic in the file to fit the screen
<BODY BGCOLOR=”green”>
<BODY BGCOLOR=”#00FF00”>
<BODY BACKGROUND=”abcpict.jpg”>
CSS – Cascading Style Sheets
Introduced in HTML 4.01
Current versions of HTML want to
separate content from presentation
(format or appearance.. its “look”)
The HTML tags like <P> and <BR> are
used for basic formatting
Text and background colour, dropcaps,
placement on the page and other
complex formatting features would can be
controlled by CSS
Style Sheet in HTML 4
Style sheets add more design control and separate this
design from HTML itself
◦
◦
◦
◦
External style sheets apply the same style rules to all pages
Embedded style sheet apply style rules to a single page
Inline styles apply style rules to page elements
Cascading Style Sheet (CSS) refers to the capability for style
information from more than one source to be combined
Example of style sheet code
◦ BODY { background-color: #CCFFCC;
font-family: Arial, Helvetica, sans-serif;
color: #330066 }
◦ A:link { color: #330066 }
◦ A:visited { color: #660000 }
◦ A:hover { color: #FFCC00 }
◦ A:active { color: #FF0000 }
Multimedia – Adding Sound and
Video
External Multimedia
◦ Any media file that cannot be automatically loaded by a
Web browser
◦ Helper applications (or viewers) handle different external
media files that are not directly supported by your
browser
Sound File Extensions:
◦
◦
◦
◦
.au (fully cross-platform)
.aiff (Macintosh)
.wav (Windows)
MPEG Audio .mp2, .mp3 (cross-platform)
< A HREF=“anthem.au”><IMG SRC=“flag.gif”></A>
Multimedia – Adding Sound and
Video
Video Files Extensions
◦ MPEG .mpeg, .mpg
◦ .mov
◦ .avi
< A HREF=“dumbo3.mov”>hypertext</A>
Inline Multimedia
◦ Inline video
<IMG DYNSRC=“rainstorm.avi”
SRC=rainstorm.gif”>
◦ Inline sounds
<BGSOUND SRC=“trumpet.au”>