Ced 519 html and javascript
Download
1 / 169

CEd 519 HTML and JavaScript - PowerPoint PPT Presentation


  • 252 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



And what will i get from all this extra work
And what will I get from all this extra work? making pages purely in HTML.

  • First, by entering tags, you will develop a deeper understanding of how HTML really works


Why learn html
Why learn HTML ? making pages purely in HTML.

  • Second, you will be able to troubleshoot Web pages when picky little errors occur


Why learn html1
Why learn HTML ? making pages purely in HTML.

  • Third, you will be able to view other pages and learn how they achieved certain effects.


Why learn html2
Why learn HTML ? making pages purely in HTML.

  • Fourth, you will understand a little better the file and folder structures found on Web computers.


Why learn html3
Why learn HTML ? making pages purely in 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 ? making pages purely in 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 ? making pages purely in HTML.

  • Finally, and most importantly, by learning HTML you will understand how HTML, JavaScript, CSS, DHTML, XML and work together.




Why text only format
Why text only format? word processor, or notepad, wordpad, or simple text.

  • 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 word processor, or notepad, wordpad, or simple text.

  • HTML is a subset of Standard Generalized Markup Language (SGML)

    • SGML is a standard for how to organize and tag elements of a document

      <B>sample text</B>


Html coding practices
HTML Coding Practices word processor, or notepad, wordpad, or simple text.

  • Tags are capitalized to separate tags from contents

  • Use ending tags whenever possible

  • Separate sections of HTML code with spaces


tags are capitalized word processor, or notepad, wordpad, or simple text.

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 word processor, or notepad, wordpad, or simple text.

  • 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 word processor, or notepad, wordpad, or simple text.

  • 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


Creating a html document by using notepad
Creating a HTML Document – by using notepad word processor, or notepad, wordpad, or simple text.


Creating a html document by using a html text editor
Creating a HTML Document – by using a HTML Text Editor word processor, or notepad, wordpad, or simple text.


Tag format
Tag Format word processor, or notepad, wordpad, or simple text.

  • 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 word processor, or notepad, wordpad, or simple text.

  • 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 <BR><HR>


Empty tags and containers1
Empty Tags and Containers word processor, or notepad, wordpad, or simple text.

  • 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 word processor, or notepad, wordpad, or simple text.

  • 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 word processor, or notepad, wordpad, or simple text.

  • The end tag for commands is simply the begin tag with the added slash /

    <H1>text affected here</H1>

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


Project 2

Project 2 word processor, or notepad, wordpad, or simple text.

Creating a Web Sitewith Links


Hyperlinks
Hyperlinks word processor, or notepad, wordpad, or simple text.

  • 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 word processor, or notepad, wordpad, or simple text.

  • 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)


Linking within a web page

links to targets word processor, or notepad, wordpad, or simple text.

targets

Linking within a Web Page


Linking to another web page within the same web site
Linking to Another Web Page within the Same Web Site word processor, or notepad, wordpad, or simple text.


Linking to another web site
Linking to Another Web Site word processor, or notepad, wordpad, or simple text.


Linking to e mail
Linking to E-Mail word processor, or notepad, wordpad, or simple text.


Links
Links word processor, or notepad, wordpad, or simple text.

  • 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.

    <A HREF="http://www.stritch.edu">

    Click Here For Stritch Home Page</A>


Here s what s happening

Here's What's Happening word processor, or notepad, wordpad, or simple text.


A href http www stritch edu click here for stritch home page a
<A word processor, or notepad, wordpad, or simple text.HREF="http://www.stritch.edu">Click Here For Stritch Home Page</A>

  • A stands for Anchor.

  • The Anchor Tag <A> is a container that serves as the basis for all the links we create


Link components
Link Components word processor, or notepad, wordpad, or simple text.

  • 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 word processor, or notepad, wordpad, or simple text.

  • 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
<A word processor, or notepad, wordpad, or simple text.HREF="http://www.stritch.edu">Click Here For Stritch Home Page</A>

  • 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
<A word processor, or notepad, wordpad, or simple text.HREF="http://www.stritch.edu">Click Here For Stritch Home Page</A>

  • Notice that the address has an equal sign in front of it and is enclosed in quotes.

  • Why? Because HREFis an attribute of the Anchor <A> tag.

  • The value of the attribute is the destination http://www.stritch.edu or the FULL ADDRESS of the link.


The label
The Label word processor, or notepad, wordpad, or simple text.

  • 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
<A word processor, or notepad, wordpad, or simple text.HREF="http://www.stritch.edu">Click Here For Stritch Home Page</A>

  • 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
<A word processor, or notepad, wordpad, or simple text.HREF="http://www.stritch.edu">Click Here For Stritch Home Page</A>

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 word processor, or notepad, wordpad, or simple text.

  • 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? word processor, or notepad, wordpad, or simple text.

  • 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.



The target
The Target easy time in terms of navigating your Web pages.

  • 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 easy time in terms of navigating your Web pages.

  • 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:// easy time in terms of navigating your Web pages. 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:// easy time in terms of navigating your Web pages. 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. easy time in terms of navigating your Web pages. 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. easy time in terms of navigating your Web pages. 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. easy time in terms of navigating your Web pages. 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. easy time in terms of navigating your Web pages. 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 easy time in terms of navigating your Web pages.

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 easy time in terms of navigating your Web pages.

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 easy time in terms of navigating your Web pages.

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/ easy time in terms of navigating your Web pages. 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:// easy time in terms of navigating your Web pages. 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 easy time in terms of navigating your Web pages.

  • 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 easy time in terms of navigating your Web pages. 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/ easy time in terms of navigating your Web pages. 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/ easy time in terms of navigating your Web pages. 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/ easy time in terms of navigating your Web pages. 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


Hyperlink to another page on your site
Hyperlink to another page on your site easy time in terms of navigating your Web pages.


A general rule
A general Rule easy time in terms of navigating your Web pages.

  • 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 easy time in terms of navigating your Web pages.

  • 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 page1
Hyperlink on Same Page easy time in terms of navigating your Web pages.

  • To link to a target, you must first create the target

  • The anchor tag <A> is again used, but this time it is used as a tool to label the target anchor for the link.

    <ANAME=“targetname”>


Hyperlink on same page2
Hyperlink on Same Page easy time in terms of navigating your Web pages.

<ANAME=“targetname”> </A>

  • 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 </A> to complete the definition of the anchor


Linking to a target
Linking to a Target easy time in terms of navigating your Web pages.

  • To create the Link to the target you will use the format

    <AHREF=“#targetname”>label</A>

  • 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 easy time in terms of navigating your Web pages.

  • 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”

<AHREF=“#top”>TOP</A>

<AHREF=“#bottom”>BOTTOM</A>


E mail links on your page

E-Mail Links on Your Page easy time in terms of navigating your Web pages.


E mail mailto
E-mail=mailto: easy time in terms of navigating your Web pages.

  • 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 pattern
Here's the pattern easy time in terms of navigating your Web pages.

<AHREF="mailto:[email protected]">

Click Here To Write Me</A>

  • The anchor tag <A> is used to start the e-mail link.

  • The attribute HREFuses the same format as a link except in a link you write "mailto:" in place of the http:// and your e-mail address in place of the page address or URL


Here s the pattern1
Here's the pattern easy time in terms of navigating your Web pages.

<AHREF="mailto:[email protected]">

Click Here To Write Me</A>

  • You still need the </A> 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 easy time in terms of navigating your Web pages.

  • 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)


Text easy time in terms of navigating your Web pages.

  • 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 easy time in terms of navigating your Web pages.

  • One way to center text on the page is to surround the text you want centered with simple <CENTER> and </CENTER> commands.

  • Here's what it looks like:

    <CENTER>

    All text in here will be centered

    </CENTER>



The as a paragraph unto itself. Use the ALIGN=“RIGHT”

attribute is added to the

<P>command.


  • If you're just using as a paragraph unto itself. Use the <P>to create a new paragraph, then it can sit all by its lonesome.

  • If you add an attribute to a single flag like the<P>flag, then you'll need to use an end flag. That is</P>


Changing the color of your text
Changing the Color as a paragraph unto itself. Use the of 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-Page as a paragraph unto itself. Use the Text Colors

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

TEXT="######"

LINK="######"

ALINK="######"

VLINK="######"


TEXT=". . ." as a paragraph unto itself. Use the

  • 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.


Adding a text color
Adding a Text Color as a paragraph unto itself. Use the

<BODYBGCOLOR=“Blue”TEXT=“Yellow”>

Or

<BODYBGCOLOR=“Blue” TEXT=“#000000”>


LINK=". . ." as a paragraph unto itself. Use the

  • 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=". . ." as a paragraph unto itself. Use the [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=“. . .” as a paragraph unto itself. Use the [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.




<BODY not written individuallyBGCOLOR="#99CCCC" TEXT="#000000" LINK="#C0D9D9" VLINK="#663399" ALINK="#FFCC99">

For example ... here is a sample body tag

NOTE: You must only have ONLY ONE BODY TAG on your page. If you have more than one body tag, or you have it in the wrong part of your page, then the page may not load correctly with some browsers!


These commands come not written individually

right after the<TITLE> </TITLE>commands. Again, in that position they affect everything on the page.

Something like this:

<BODYBGCOLOR="#99CCCC" TEXT="#000000" LINK="#C0D9D9" VLINK="#663399" ALINK="#FFCC99">or <BODYBGCOLOR=”White" TEXT="MidnightBlue" LINK="DarkMagenta" VLINK="MediumOrchid" ALINK="DeepPink">


Link alink vlink
LINK= not written individually".. ." 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) not written individually

visited link (VLINK)

active link (ALINK)

Links


Selecting link colors
Selecting Link Colors not written individually

  • 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 not written individually

  • 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 not written individually

  • 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 not written individually

  • 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 not written individually

  • For example, one browser may render all level 1 headings, <H1>, 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 not written individually

  • 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 not written individually

  • 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

<B>BOLD <SUP>Superscript

<I>Italics <SUB>Subscript

<U>Underline


Logical styles
Logical Styles not written individually

  • 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 not written individually

  • 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 not written individually

  • 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 not written individually

  • 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 not written individually

  • Different browsers interpret these commands differently

  • Examples:

    <EM>(emphasize)

    <CITE> (citation)

    <STRONG> (bold)

    <CODE> (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 not written individually

  • 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 not written individually

bold text

BIG text

BLOCKQUOTE

italicized text

Subscript &superscript

strikethrough text

teletype / monospace text

underlined text

Formatted Text Samples


Headings
Headings not written individually

  • You have learned that HTML gives you six standard headings or title sizes to choose from

  • These are denoted by <H1>, <H2>, … <H6>

  • 1 is the most prominent (the largest) 6 the least prominent (the smallest)


Headings1
Headings not written individually

  • In most browsers, Heading commands create nice, bold text, and are quite easy to use.

  • It's a simple <H#> and </H#> command.


With h comes p
With not written individually<H#> comes <P>

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

  • You cannot get other text to sit right up against a heading.


The font tag
The Font Tag not written individually

  • 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 not written individually

  • By itself, the <FONT> tag does nothing

  • But the <FONT> tag accepts attributes that alter the font


Sample font attributes

normal text not written individually

text with color

different font face

different font size

Sample Font Attributes


Changing specific word color
Changing Specific Word Color not written individually

  • 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 formula:

  • 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

    <FONTCOLOR=“lime”>

  • It can be combined with other attributes

    <FONTSIZE=“5” COLOR=“red”>


Changing the font face
Changing the Font Face formula:

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

    <FONTFACE=Arial>

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

    <FONTFACE=“Comic Sans MS”>


Multiple face commands
Multiple Face Commands formula:

<FONT FACE=“Arial”, “Mistral”, “Snowy”>

  • Multiple values for the font attribute can be entered <FONT FACE=“xxxxxx”>

  • “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 formula: <FONTSIZE=“#”> 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).


<FONT formula: SIZE="+3">This is +3</FONT>

<FONT SIZE="+1">This is +1</FONT>

<FONT SIZE="-1">This is -1</FONT>

<FONT SIZE="-6">This is -6</FONT>


If this is the default font formula:

This is +6

This is +3

This is +1

This is -1

This is -6


Graphics

GRAPHICS formula:


Graphics and the web
Graphics and the Web: formula:

  • 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.


GIF: formula:

  • 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: formula:

  • 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.


PDF formula:

  • 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.


BMP: formula:

  • 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: formula:

  • 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: formula:

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: formula:

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

    <IMGSRC=“filename.xxx”>

  • You use the empty tag <IMG> to insert an image into your document.


Here s what happening
Here’s What Happening formula:

<IMGSRC=“filename.xxx”>

  • 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
<IMG formula: SRC=“filename.xxx”>

  • The SRC (source) attribute is the only required attribute of the <IMG> 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
<IMG formula: SRC=“filename.xxx”>

  • 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
<IMG formula: SRC=“filename.xxx”>

  • Because the <IMG> 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: formula:

<BR>

<IMGSRC=“car.gif”ALT=“My Car!”>

<BR>

  • If you put a <BR> or <P> 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: formula:

  • 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 formula:

<AHREF=“www.stritch.edu">

<IMG SRC="home.gif"></A>

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


Borders
Borders: formula:

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 formula:

  • 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 with formula: border

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 formula: <AHREF=”www.stritch.edu"><IMG SRC="home.gif"></A>

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

<IMG SRC="home.gif">

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

<IMG BORDER="0" SRC="home.gif">


Size still matters
Size Still Matters: formula:

  • 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 formula:

  • Specify the height and width for each graphic you use.

  • It speeds things up a lot.

  • Browsers need this information

    <IMGSRC=“file.gif”

    HEIGHT=89 WIDTH=103>


Other image attributes
Other Image Attributes formula:

  • 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
<CENTER> formula:

  • You can center a graphic with the standard center tag. Use the <CENTER> and </CENTER> commands

  • You may also use

    <PALIGN=“CENTER”>

  • But don’t forget, if you add an attribute to the <P> tag, you need a </P> to turn it off.


Right aligned
Right Aligned formula:

  • Want if you to get the image to the right of the page?

  • Here's the format:

    <IMGSRC="image.gif”ALIGN="right">


Align attribute
ALIGN formula: 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 formula:

image

ALIGN=LEFT


Image alignment1
Image Alignment formula:

image

ALIGN=RIGHT


Aligning text with images
Aligning Text With Images formula:

  • 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".


  • Using the formula: 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: formula:

  • 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 formula:

image

ALIGN=TOP


Image alignment3
Image Alignment formula:

image

ALIGN=MIDDLE


Image alignment4
Image Alignment formula:

image

ALIGN=BOTTOM


Here are the formats: formula:

<IMGALIGN="top"SRC=”image.gif">

text text text

<IMGALIGN="middle”SRC=”image.gif">

text text text

<IMGALIGN="bottom”SRC=”image.gif">

text text text

IMAGE ATTRIBUTES


Image alignment5
Image Alignment formula:

  • Format to align images:

    <IMGSRC=“ovallaeb.gif”ALIGN=RIGHT>

  • To end right-aligned text wrap:

    <BRCLEAR=RIGHT>

  • To end left-aligned text wrap:

    <BRCLEAR=RIGHT>

  • Top, Middle, and Bottom alignment



Vspace hspace
VSPACE & HSPACE: formula:

  • 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 formula:

HSPACE = 0

VSPACE = 20

HSPACE =20

More About Images


Thumbnail images
Thumbnail Images formula:

  • 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


Thumbnail image

thumbnail image formula:

enlarged image

Thumbnail Image


Obtaining images
Obtaining Images formula:

  • 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 rule formula: image

background image

home page

changed bullet types

changed bullet types

horizontal ruleimage

text link to second page

e-mail link

Project 2 Web Pages


colored text formula:

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 formula:

Image Link to Purdue


Our index page
Our index page formula:

  • Keep all your files for a page in a folder, html and pictures

  • Link to the folder using relative address

    <ahref=“folder/one.html”>

  • FTP all files at once in the folder

  • Can add a link back to your index

    <ahref=“../index.html”>

    or users will need to use the back button


Tonight s activities
Tonight’s Activities formula:

  • 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