ced 519 html and javascript
Download
Skip this Video
Download Presentation
CEd 519 HTML and JavaScript

Loading in 2 Seconds...

play fullscreen
1 / 169

CEd 519 HTML and JavaScript - PowerPoint PPT Presentation


  • 254 Views
  • Uploaded on

CEd 519 HTML and JavaScript. CARDINAL STRITCH UNIVERSITY Mary Martens Instructor. Let’s Review, what is HTML?. HTML is the language used to create web pages. HTML documents are interpreted and displayed in web browsers.

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 'CEd 519 HTML and JavaScript' - ashby


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
ced 519 html and javascript

CEd 519HTML and JavaScript

CARDINAL STRITCH UNIVERSITY

Mary Martens

Instructor

let s review what is html
Let’s Review, what is HTML?
  • HTML is the language used to create web pages.
  • HTML documents are interpreted and displayed in web browsers.
  • When a web browser recognizes an HTML element, it must display that element in accordance with an HTML standard.
so why would i want to learn html
So, why would I wantto learn HTML ?
  • In the last two weeks’ classes we became familiar with Netscape Composer which is one of several programs that can let you create Web pages without learning HTML.
  • Some others are Adobe PageMill, Microsoft FrontPage, Macromedia Dreamweaver, Claris Homepage
slide4
But for most of this class we are going to concentrate on making pages purely in HTML.
  • Yes this takes a little more time, and the typing is a lot more tedious.
and what will i get from all this extra work
And what will I get from all this extra work?
  • First, by entering tags, you will develop a deeper understanding of how HTML really works
why learn html
Why learn HTML ?
  • Second, you will be able to troubleshoot Web pages when picky little errors occur
why learn html1
Why learn HTML ?
  • Third, you will be able to view other pages and learn how they achieved certain effects.
why learn html2
Why learn HTML ?
  • Fourth, you will understand a little better the file and folder structures found on Web computers.
why learn html3
Why learn HTML ?
  • Another reason to write pages in HTML is to decrease the size of the file.
  • Using a Page Editor, or a Word Processor like Microsoft “Word” and saving the file as HTML adds lines and lines of code that must be downloaded to the users computer.
  • Here’s an example.Look at the source code of these two pages

In Word

In notepad

why learn html4
Why learn HTML ?
  • Another problem with Page Editors is if you use any of these programs, you are limited to the features that each program is capable of producing.
why learn html5
Why learn HTML ?
  • Finally, and most importantly, by learning HTML you will understand how HTML, JavaScript, CSS, DHTML, XML and work together.
slide12
So by the end of the class you may want to start a Web page using an HTML editor.
  • But, instead of being limited by the features that each program is capable of producing, you will be able to add features the program may not yet recognize.
  • That way you will get the best of both worlds.
slide13
As you learn HTML, you will write the HTML document on the word processor, or notepad, wordpad, or simple text.
  • When you are finished creating the HTML document, you'll then open the document in a browser, like Internet Explorer or Netscape Navigator.
why text only format
Why text only format?
  • HTML browsers can only read text. To understand how limited that is, look at your keyboard.
  • See the letters and numbers and little signs like % and @ and *? There are 128 in all (read upper- and lowercase letters as two). That's text. That's what the browser reads. It simply doesn't understand anything else.
html elements
HTML Elements
  • HTML is a subset of Standard Generalized Markup Language (SGML)
    • SGML is a standard for how to organize and tag elements of a document

sample text

html coding practices
HTML Coding Practices
  • Tags are capitalized to separate tags from contents
  • Use ending tags whenever possible
  • Separate sections of HTML code with spaces
slide17
tags are capitalized

spaces between sections of code

use of ending tags

creating a html document by using a text editor
Creating a HTML Document – by using a Text Editor
  • Text Editor
    • Program that allows a user to enter, change, save, and print text, such as HTML
    • No advanced features
    • Allows you to develop HTML documents easily
creating a html document by using a text editor1
Creating a HTML Document – by using a Text Editor
  • The program Web Notepad is on your CD
  • This is a HTML Text Editor
    • Program that allows a user to enter, change, save, and print text, such as HTML
    • No advanced features, but it will color your tags, and search for particular lines of code
    • Allows you to develop HTML documents easily
tag format
Tag Format
  • All tag formats (also called commands or flags) are the same. They begin with a less-than sign: < and end with a greater-than sign: >
    • (these are also called “angle brackets”)
  • What goes inside the < and > is the tag.
  • Learning HTML is learning the tag to perform whatever command you want to do.
empty tags and containers
Empty Tags and Containers
  • Tags come in two general types:
  • Empty tags, do not hold or surround anything, so they are called “empty”.
  • Empty tags are used for page formatting.
  • An empty tag does not enclose any text so it has no closing tag.
  • Some examples are

empty tags and containers1
Empty Tags and Containers
  • Container tags, start with a beginning tag, contain some text that is modified by the container, and end with an ending, or closing tag.
  • Container tags are used to manipulate or control the contents placed within them
open and close flags
Open and Close Flags
  • The majority of HTML tags are container tags, that is they require both an open and a close tag (a beginning and ending tag).
  • Most are very easy to understand because the tag is obvious.
important points review
Important Points Review
  • The end tag for commands is simply the begin tag with the added slash /

text affected here

  • Tags will not show up on your page as long as your commands are inside the brackets, the tag is used to alter the text, but the actual code is hidden from the viewer.
project 2

Project 2

Creating a Web Sitewith Links

hyperlinks
Hyperlinks
  • Hyperlinks are the elements in an electronic document that link to another place in the same document or to an entirely different document.
  • Links are the distinguishing feature of the WWW. They let you skip from one page to another, call up a movie or a recording and download files with FTP.
hyperlinks inside your document
Hyperlinks Inside Your Document
  • Links are the most fundamental part of the world wide web.
  • It is the links that tie it all together.
  • There are four different kinds of links you can have on your website:
    • Links to anchors on the current page (Internal).
    • Links to other pages within the current site (Local)
    • Links to pages outside the current site (Global)
    • Links to directly send an E-mail (E-mail)
links
Links
  • The way to create a link to another page is a set tag format like any of the others you have seen so far.
  • Once you learn the format, you can make as many links as you want, to any other page you want.
  • For example: The code below would create a link to the Stritch home page.

Click Here For Stritch Home Page

link components
Link Components
  • Once you begin the tag for a Link, you will need to include attributes to create the 3 components of the link
    • 1. The Destination
    • 2. The Label
    • 3. The Target
the destination
The Destination
  • The destination - the most important part. It is used to specify what will happen when the visitor clicks the link.
  • You can create links that show an image, play a sound or movie, download files, open a newsgroup, send an e-mail message and more.
  • The most common links, however connect to other Web pages.
a href http www stritch edu click here for stritch home page a1
Click Here For Stritch Home Page
  • HREF stands for Hypertext REFerence.
  • That's a nice, short way of saying to the browser, "This is where the link is going to go."
a href http www stritch edu click here for stritch home page a2
Click Here For Stritch Home Page
the label
The Label
  • The label is the part the visitor sees and clicks on to reach the destination.
  • It can be text, an image, or both. Label text is often, but not always underlined.
  • The better the label, the more likely a visitor will click on it. In fact, eliciting Web visitor’s click is considered an art in web page circles.
a href http www stritch edu click here for stritch home page a3
Click Here For Stritch Home Page
  • Where it reads Click Here For Stritch Home Page is the label - the part the visitor sees on the page and will click on to reach the destination.
  • Since what is in that space is all that will appear on the page for the viewer to click. You should write something that denotes the link.
a href http www stritch edu click here for stritch home page a4
Click Here For Stritch Home Page

So here's what will appear on the page using the command above…

Click Here For Stritch Home Page

click here for stritch home page
Click Here For Stritch Home Page
  • On a web page the area of text or the image used as the label is known as the “hotspot”.
    • The mouse pointer changes when it is moved over the area. Like this
    • Generally, the mouse pointer changes to a pointing hand when it is moved over the hotspot.
    • The destination URL appears on the status bar when the mouse pointer is over a hotspot
  • This change notifies the user that there is a link from that text or image.
what to write for the link
What To Write For The Link?
  • There are a couple different schools of thought on this.
  • One suggests that what you write for links should be quite blatant. This includes text like "Click here for this" or "Here's a link to...".
  • The other states that since the hypertext links will be blue (or whatever color they're set to), and the mouse pointer will change, the links should be just another word in the text set up as a link.
slide46
Just remember your readers should be allowed to have a very easy time in terms of navigating your Web pages.
  • But it's your page and you make that decision.
the target
The Target
  • The last component, the target is most often used for internal links. For local and global links the target is often ignored or left up to the browser.
  • The target determines where the destination will be displayed.
  • The target might be a particular named window or frame, or a new window or frame.
a few notes about urls
A few notes about URLs
  • Uniform Resource Locator, or URL, is a fancy name for address.
  • It contains information about where a file is and what a browser should do with it.
  • Each file on the Internet has a unique URL.
http www stritch edu ced 514 html
http://www.stritch.edu/ced/514.html
  • The first part of the URL is called the Scheme. It tells the browser how to deal with the file that it is about to open.
  • One of the most common schemes you will see is http, or HyperText Transfer Protocol.
  • Essentially, http:// means the data is stored on the web. The colon and backslashes separate the protocol prefix from the rest of the address.
  • Other schemes are ftp, telnet, mailto, file
http www stritch edu ced 514 html1
http://www.stritch.edu/ced/514.html
  • The www portion of a URL was initially used by the scientists at CERN (The European Laboratory for Particle Physics) to distinguish between World Wide Web files and Internet files.
  • In browsers this portion may not be necessary when typing in an address. In html, the http://www is required
http www stritch edu ced 514 html2
http://www.stritch.edu/ced/514.html
  • The next section is the domain name used by the server that provides access to the requested data. It points to the IP (Internet Protocol) address of the web server.
  • In this case here at Stritch…

stritch.edu

http www stritch edu ced 514 html3
http://www.stritch.edu/ced/514.html
  • An Internet Domain Survey conducted bythe Internet Software Consortiumfound there as of Jan 2003 there are up to 1 billion indexable pages, on 171,638,297 sites
  • Although site sponsors can determine their own alphanumeric domain name, they also have to play by some rules.
http www stritch edu ced 514 html4
http://www.stritch.edu/ced/514.html
  • Domain names generally consist of up to 26 characters that can be letters or numbers
  • No empty spaces but you can use hyphens
  • There are some registrars that permit you to use up to 63 characters but be wary of doing this - some applications will not recognize them
http www stritch edu ced 514 html5
http://www.stritch.edu/ced/514.html
  • To keep things organized, the domain names have a hierarchy.
  • The top of the hierarchy comes at the end of the name. The TLD (Top-Level Domain) typically consists of three letters following a period
http www stritch edu ced 514 html6
.com

Commercial use

.edu

Education and research

.gov

Government agencies

.int

International organizations

.mil

Military agencies

.net

Gateway or host use

.org

Non-profit organizations

http://www.stritch.edu/ced/514.html

Original TLDs (top level domains)

http www stritch edu ced 514 html7
.aero

Air-transport industry

.biz

businesses

.coop

cooperatives

.info

Information or general use

.museum

Museum content

.name

Personal use

Professional: Accountants, lawyers & physicians

.pro

http://www.stritch.edu/ced/514.html

Newer TLDs (top level domains)

http www stritch edu http www fosu edu cn foshan univ china
.AQ

Antarctica

.BE

Belgium

.CN

China

.IE

Ireland

.MX

Mexico

.TW

Taiwan

http://www.stritch.edu/http://www.fosu.edu.cn/[Foshan Univ China]

Here in the United States we use generic TLDs, other countries use their own two-character ccTLDs (countrycode TLDs)

http www stritch edu ced 514 html8
http://www.stritch.edu/ced/514.html
  • The next portion of the address after the domain name indicates a directory on the Web server.
  • Additional subdirectories may be included in the address.
  • This is the Path that leads to the file and the file name itself.
http www stritch edu ced 514 html9
http://www.stritch.edu/ced/514.html
  • URL’s can be absolute or relative.
  • An absolute URL shows the complete address, that is the entire path to the file, including the scheme, domain name, the complete path, and the file name itself.
  • When you are referencing a file from someone else’s server you always use an absolute URL
relative urls
Relative URLs
  • Another way of indicating an address is to use a relative URL.
  • To understand a relative URL, imagine you stopped at my house looking for a neighbor’s house. To give you directions to my neighbor’s, instead of giving her complete address, I might just say “it’s three doors down on the right.
  • This is a relative address -- where it points to depends on where the information is given from
relative address 519 html http www stritch edu ced 514 html http www stritch edu ced 519 html
relative address 519.htmlhttp://www.stritch.edu/ced/514.htmlhttp://www.stritch.edu/ced/519.html
  • In the same way, a relative URL describes the location of the desired file with reference to the location of the file that contains the URL itself.
  • In the example above, to call the second page from the first page you would only need the file name 519.html
http www stritch edu ced 514 html http www stritch edu ced 519 html 519 html
http://www.stritch.edu/ced/514.htmlhttp://www.stritch.edu/ced/519.html519.html

The relative URL for a file that is in the same directory as the current file is simply

file name.extension

http www stritch edu ced 514 html http www stritch edu ced class 519 html
http://www.stritch.edu/ced/514.htmlhttp://www.stritch.edu/ced/class/519.html

class/519.html

The relative URL for a file that is in a sub-directory of the current file is

folder name/file name.extension

http www stritch edu ced 514 html http www stritch edu info 519 html
http://www.stritch.edu/ced/514.htmlhttp://www.stritch.edu/info/519.html

../info/519.html

  • To reference a file in a directory at a higher level of the file hierarchy, use two periods and a forward slash to reference any file on the same hard disk as the current file.
  • You can combine and repeat the two periods and forward slash to reference any file on the same hard disk as the current file
a general rule
A general Rule
  • Use relative URLs for links to Web pages on your site
  • Use absolute URLs for links to Web pages on other sites.
hyperlink on same page
Hyperlink on Same Page
  • These are called Internal links
  • Targets point to a specific place within a page.
  • Linking to a target is very similar to normal links.
  • If no target is given, links always point to the top of a page.
hyperlink on same page2
Hyperlink on Same Page

  • The NAMEattribute provides a tag that will serve as a target
  • “targetname” is the value for the attribute NAME, this is the text you will use internally to identify that section of the Web page - keep it short and meaningful, no spaces
  • You will need an end tag to complete the definition of the anchor
linking to a target
Linking to a Target
  • To create the Link to the target you will use the format

label

  • A # in front of a link location specifies that the link is pointing to a target on a page. (target meaning a specific place on your page).
hyperlink on same page3
Hyperlink on Same Page
  • To link to an specific spot you need to:
    • Create the Target itself.
    • Create a links pointing to the targets

Name=“top”

Back to TOP

see the BOTTOM

Name=“bottom”

TOP

BOTTOM

e mail mailto
E-mail=mailto:
  • This is what's known as a mailto: command.
  • It follows the same coding scheme as the hypertext link.
  • What this format does is place blue wording on the screen that people can click to send you a piece of e-mail.
here s the pattern1
Here's the pattern

Click Here To Write Me

  • You still need the tag to close the tag
  • Notice there is NO SPACE between the colon and the e-mail address. And no // as there is in http://
link errors
Link errors
  • The most common reason URLs fail is that they are transcribed or typed incorrectly. (copy and paste the address)
  • The second most common reason is the document they point to has been moved or deleted (check your links after your page is mounted)
slide77
Text
  • Since we've already done some writing you've no doubt noticed that the text that appeared in the browser window was justified to the left of the screen.
  • In HTML that's the default.
  • It just happens without your specifying any particular justification.
centering text
Centering text
  • One way to center text on the page is to surround the text you want centered with simple
    and
    commands.
  • Here's what it looks like:

All text in here will be centered

slide79
To get text to the right You must first set the text aside as a paragraph unto itself. Use the

command you learned but now alter it by adding an attribute to it.

  • Here's the format:

Text in here is pushed to the right

slide80
TheALIGN=“RIGHT”

attribute is added to the

command.

slide81
If you're just using

to create a new paragraph, then it can sit all by its lonesome.

  • If you add an attribute to a single flag like the

    flag, then you'll need to use an end flag. That is

changing the color of your text
Changing the Colorof Your Text
  • In order to change text colors, you will need two things:
    • 1. A command to change the text.
    • 2. The color name or hex code.
changing full page text colors
Changing Full-PageText Colors

You have the ability to change full-page text colors over four levels:

TEXT="######"

LINK="######"

ALINK="######"

VLINK="######"

slide84
TEXT=". . ."
  • The TEXT attribute sets the color for all the text on the page except the text enclosed in an anchor container.
  • If you do not specify a TEXT color, the text will likely be black.
slide86
LINK=". . ."
  • LINK allows us to choose what color link we want our pages to have. This is nice for making your links look good with certain backgrounds.
  • You are probably used to browsers' default link color of blue.
alink active link
ALINK=". . ." [ACTIVE LINK]
  • ALINKis not really noticeable to the average user. This is because it only shows up while you are physically clicking on a link.
  • It's not all that important, but if you are into details you will probably want to do this. The default ALINK on browsers is typically red.
vlink visited link
VLINK=“. . .” [VISITED LINK]
  • VLINK is the color of any links which the user has already followed at one time or another.
  • This is handy if you do not want people to waste time wondering if they have already tried certain links on your site.
slide89
When you write the hex codes, write them with a # sign in front of the code. Also be sure to enclose it in quotation marks, like so:

VLINK="#FFFFFF"

slide90
Like all attributes, the body background and text colors are not written individually
  • They are all set within one body tag.
slide92
These commands come

right after the commands. Again, in that position they affect everything on the page.

Something like this:

or

link alink vlink
LINK=".. ." ALINK =".. ." VLINK =".. ."
  • Carefully chose the colors for your links if you decide to change then.
  • It can be very confusing and frustrating for your users if you change these colors.
  • Most browsers keep the link colors constant, and users come to depend on those colors
links1
normal link (LINK)

visited link (VLINK)

active link (ALINK)

Links
selecting link colors
Selecting Link Colors
  • While you can prescribe the colors that different link types have,
  • Unless the user has his/her browser set to allow your colors to take over, they won’t work
changing pieces of text
Changing Pieces of Text
  • After you set the Text color in the body, you can change various pieces of text within your page to different colors, sizes and fonts as the need arises.
  • The body colors remain the major colors that you have selected for the rest of your page.
formatting smaller pieces of text
Formatting Smaller Pieces of Text
  • The term style describes a way to set off a group of characters from the surrounding text block
  • There are two general forms of style
    • Physical Style
    • Logical Styles
formatting smaller pieces of text1
Formatting Smaller Pieces of Text
  • Since the browser is in control of the way the text actually appears, the HTML code can only attempt to provide formatting direction.
  • All we can say with any degree of certainty is that any particular style will be rendered the same way each time by any particular browser.
formatting smaller pieces of text2
Formatting Smaller Pieces of Text
  • For example, one browser may render all level 1 headings,

    , as bold and in large font.

  • Another browser may render all such headings as centered and underlined but in the same size font as the rest of the document.
physical styles
Physical Styles
  • These commands describe the way the text is to look in a browser.
  • While the general rule is that you control the content and the browser controls the format, these tags are designed to actually give some control of the format where possible.
physical styles1
Physical Styles
  • Some browsers will recognize these tags, and some will ignore them. Minimal use of physical tags helps ensure a better, more consistent page.
  • Similar commands are found on most word processors

Examples

BOLD Superscript

Italics Subscript

Underline

logical styles
Logical Styles
  • Logical styles are also called content-based styles.
  • They require the Web weaver to consider not what the page should look like, but rather how the particular text sequence is supposed to be used.
logical styles1
Logical Styles
  • The fact that a particular group of characters is enclosed within a specific logical container is what is important, not how the browser chooses to display those contents.
  • This marks a change in thinking, away from the simple word-processing mentality and toward a more consistent and user-centered way of presenting information.
logical styles2
Logical Styles
  • These styles can convey more information than the physical tags.
  • They not only change the appearance of the text, but also explain why the text was set off from the body of the page.
logical styles3
Logical Styles
  • It is suggested that you use logical styles whenever you can, marking text according to how it is to be used rather than how you expect it to look.
  • This principle will probably become more important as future versions of browsers become more complex and intelligent and have more expressive formatting capabilities.
logical styles4
Logical Styles
  • Different browsers interpret these commands differently
  • Examples:

(emphasize)

(citation)

(bold)

(HTML example)

  • This has advantage of allowing specialized browsers (Windows CE, WebTV, text-only) to render these in a useful way
physical vs logical
Physical vs. Logical
  • Physical has advantage of not allowing browser to change the “look” you create
  • Logical has advantage of letting the browser do things in the way that are best for it.
  • Good to know both; decide according to planned usage
formatted text samples
normal text

bold text

BIG text

BLOCKQUOTE

italicized text

Subscript &superscript

strikethrough text

teletype / monospace text

underlined text

Formatted Text Samples
headings
Headings
  • You have learned that HTML gives you six standard headings or title sizes to choose from
  • These are denoted by

    ,

    , …

  • 1 is the most prominent (the largest) 6 the least prominent (the smallest)
headings1
Headings
  • In most browsers, Heading commands create nice, bold text, and are quite easy to use.
  • It's a simple and command.
with h comes p
With comes

  • Remember that when you use a heading command, by default, you set the text alone. It's like the heading commands carry a

    command with them.

  • You cannot get other text to sit right up against a heading.
the font tag
The Font Tag
  • Heading commands are great for right at the top of the page, but in the body of your page you may want to use the font tag command.
  • The font tag and its attributes give you a little more control over your text.
font attributes
Font Attributes
  • By itself, the tag does nothing
  • But the tag accepts attributes that alter the font
sample font attributes
normal text

text with color

different font face

different font size

Sample Font Attributes
changing specific word color
Changing Specific Word Color
  • The font color attribute allows you to change the color of a section of text.
  • It also works if you want to change the color for only one word or even for just one letter!
changing the font color
Changing The Font Color
  • This works like changing the background, text, and link colors
  • It is different in that it only applies to text that is specified, where the TEXT command works for the whole document

  • It can be combined with other attributes

changing the font face
Changing the Font Face
  • You can change the font face, but if the font is not available on the user’s machine, the command is ignored

  • If the font name is more than one word, it must be surrounded by quotation marks

multiple face commands
Multiple Face Commands

  • Multiple values for the font attribute can be entered
  • “fontname1” is first choice
  • “fontname2” is your second choice should the user not have the first font installed on his system.
  • And down the line until a font installed on the machine is found or it uses the default
the font size command
The Command.
  • There are twelve (12) font size commands available to you:
  • +6 through +1 and -1 through -6.
  • As you've probably guessed, +6 is the largest (it's huge); -6 is the smallest (it's a little too small).
slide121
This is +3

This is +1

This is -1

This is -6

slide122
If this is the default font

This is +6

This is +3

This is +1

This is -1

This is -6

graphics and the web
Graphics and the Web:
  • You can use many different image formats on the web but…
  • Consider that most people use GIF or JPEG, pictures for their web pages.
  • These formats are easy to handle and easy to make and load.
slide125
GIF:
  • Pronounced GIF as in gift or jif as in jiffy. (either is correct)
  • The format was invented by Compuserve and it's very popular. The reason is that it's a simple format.
  • It's a series of colored picture elements, or dots, known as pixels, that line up to make a picture. Your television's picture is created much the same way. Browsers can handle this format quite easily.
jpg or jpeg
JPG or JPEG:
  • Joint Photographic Experts Group
  • The format is unique in that it uses compression after it's been created. That's fancy computer talk that means that when the computer is not using a .jpeg image it folds it up and puts it away.
  • For example, if the picture is 10K bytes when displayed, it may be only 4K bytes when stored. It saves on hard drive space, but also tends to require a bit of memory on your part to unfold the image.
slide127
PDF
  • These are graphical representations of pages. Like a copy made on a copy machine
  • Designed to keep formatting over the web.
  • Works great but is expensive to make and use.
slide128
BMP:
  • Even though Internet Explorer will now allow you to place an image as a BMP, I wouldn't. No other browsers will be able to display it. Go with .gif or .jpg.
  • You will find a lot of graphics in this format because it is Window’s native format.
  • Easy to convert to GIF.
size does matter
Size Does Matter:
  • Big pictures take a long time to load.
  • Generally, if you make your viewer wait for a picture, it better be good.
graphics and the web1
Graphics and the Web:

GIF and JPG images are compressed formats which provide the most efficient online transmission because of their small size.

adding an image
Adding an Image:
  • The command to place an image is constant. You will use the same format every time.

  • You use the empty tag to insert an image into your document.
here s what happening
Here’s What Happening

  • IMGstands for “image”
  • It announces to the browser that an image will go here on the page.
  • The image will pop up right where you write in the image flag.
img src filename xxx
  • The SRC (source) attribute is the only required attribute of the tag.
  • This attribute tells the browser where to find the image that is to be inserted into your page.
  • It's best for you to place the images you want to use in the same directory as the page. This way you can call for the image by name alone.
img src filename xxx1
  • The value for the attribute SRCis the file name of the image, for example image.gif is the name of the image.
  • Notice it's following the same format as the attributes for other HTML tags.
  • There is an equal sign and the file name is in quotes.
img src filename xxx2
  • Because the tag doesn’t force a line break, you can insert an image into the text line and it will simply appear along with the text.
image attributes
Image Attributes:



  • If you put a
    or

    on either side of a graphic it will be set off from the text slightly.

  • The ALT tag shows a text description of the image, both when the mouse hovers over the picture, or if the picture can’t be found.
images as links
Images As Links:
  • Images make great links
  • You can easily use a graphic this way, just put it where the label would appear.
using an image as a link label
Using an Image As a Link Label

  • Place an image tag where you would normally have placed the label text.
borders
Borders:

border = xx

  • Adds a border to the image where xxis the number of pixels you wish to have around the graphic as a border.
  • A borderon an image can make the image display as if it has a frame around it
  • The default is zero so you must add the attribute to display a frame
image borders
Image Borders
  • The one exception to a default frame of zero is when you make the graphic a link. The image then will have a thin border, in the default (or selected) link color of all links
  • To remove this border you will need to set the border to 0
image borders1
image withborder

image withborder andnormal link

image withborder andvisited link

Image Borders
border or no border on links a href www stritch edu img src home gif a
Border or No Border on Links SRC="home.gif">

If you want a border on the image, leave it as

If you don’t want a border on the image, add the border attribute

size still matters
Size Still Matters:
  • If you need to know how big the graphic is.
  • Open your picture in an image editor or Load it into Netscape and the title bar will tell you the graphics size.
  • Use this to add the height and width to the img tag.
height width speed
Height & Width = Speed
  • Specify the height and width for each graphic you use.
  • It speeds things up a lot.
  • Browsers need this information

HEIGHT=89 WIDTH=103>

other image attributes
Other Image Attributes
  • Placement on the page
  • The default is justified to the left. If you write an image tag on a page, the image will pop up on the left.
center
  • You can center a graphic with the standard center tag. Use the
    and
    commands
  • You may also use

  • But don’t forget, if you add an attribute to the

    tag, you need a

    to turn it off.
right aligned
Right Aligned
  • Want if you to get the image to the right of the page?
  • Here's the format:

align attribute
ALIGN attribute:
  • ALIGN=“left”or “right”allows the text to wrap left or right of the graphic.
  • “Left”puts the image on the left and the text on the right.
  • Want them lined up exactly? Use a table.
image alignment
Image Alignment

image

ALIGN=LEFT

image alignment1
Image Alignment

image

ALIGN=RIGHT

aligning text with images
Aligning Text With Images
  • Images don't always stand alone. You will often want text alongside them.
  • You can ALIGN a single row of text along the top, the middle, or the bottom.
  • To do that use the ALIGN="--" attribute with one of these three values:
  • "top", "middle", or "bottom".
slide152
Using the top, middle, and bottom attributes only allows for one line of text next to the image, and then the rest jumps down below the image.
  • Don't use the top, middle, or bottom attribute unless you only want one line of text. If you want text to wrap around the image, use ALIGN="left" and ALIGN="right".
align attribute1
ALIGN attribute:
  • TOP, MIDDLE, orBOTTOM relate to how the text next to the image will look.
  • There is alsoABSBOTTOMand BASELINE.
  • Take a look at p 2.40 and 2.41 in our text for examples of alignment.
image alignment2
Image Alignment

image

ALIGN=TOP

image alignment3
Image Alignment

image

ALIGN=MIDDLE

image alignment4
Image Alignment

image

ALIGN=BOTTOM

slide157
Here are the formats:

text text text

text text text

text text text

IMAGE ATTRIBUTES

image alignment5
Image Alignment
  • Format to align images:

  • To end right-aligned text wrap:

  • To end left-aligned text wrap:

  • Top, Middle, and Bottom alignment
vspace hspace
VSPACE & HSPACE:
  • HSPACEand VSPACEattributes control the amount of horizontal and vertical space around an image
  • Want to set the graphic off from the text?
  • Use VSPACE and HSPACE attributes to increase the vertical and horizontal space. VSPACE=25HSPACE=25, offsets 25 pixels.
more about images1
VSPACE = 0

HSPACE = 0

VSPACE = 20

HSPACE =20

More About Images
thumbnail images
Thumbnail Images
  • Smaller versions of original images
  • Used as a link that loads the full-sized image when clicked
  • Thumbnails load more quickly
  • Create a thumbnail version by editing the file in a graphics editor and saving it with a different filename
obtaining images
Obtaining Images
  • Images are available from a variety of sources
    • Clip art gallery
    • Create them yourself
    • Scanner
    • Digital Camera
    • Other Web sites
project 2 web pages
horizontal ruleimage

background image

home page

changed bullet types

changed bullet types

horizontal ruleimage

text link to second page

e-mail link

Project 2 Web Pages
slide166
colored text

bold text

bold text

square bullets

Bold and italicized text

square bullets

Bold and italicized text

square bullets

Bold and italicized text

square bullets

image link
Image Link

Image Link to Purdue

our index page
Our index page
  • Keep all your files for a page in a folder, html and pictures
  • Link to the folder using relative address

  • FTP all files at once in the folder
  • Can add a link back to your index

or users will need to use the back button

tonight s activities
Tonight’s Activities
  • Create the web page from Project 2
  • Apply Your Knowledge (2.60) - Exercise 1
  • (You will find the files you need on your class CD, copy the folder to your disc before you start working on the file)

Assignment Folder due next week

(Class 3-4 assignments).

Proj 2

Start AYK

End AYK

ad