How The Internet Works HTML Notes

1
HTML NOTES
How the internet works...
The Internet is a network of networks that allows for communication and sharing of
information. The World Wide Web is just one of several applications which can be
used on the Internet.
Web Terminology
• FTP (File Transfer Protocol), SFTP (Secure File Transfer Protocol) - allows
computers to exchange files over a network
• HTML (HyperText Markup Language) - the "programming" language used to write
web pages
• HTTP (HyperText Transfer Protocol) - the internet protocol which allows web pages
to work
• Protocol - ground rules or "language" that internet computers use to "talk" with
each other
• Source file - the set of tags and text which make up a web page. Browsers process
the source file to make the web page look the way the designer wanted it to look.
• URL (Uniform Resource Locator) - a web address; indicates the location of a web
resource as well as the protocol needed to access it
• Web browser/navigator/client - the software application which displays web pages
• Web page - a single page on the web (a "homepage" is the first web page on a
web site)
• Web server - the computer or network of computers which stores web pages
• Web site - a collection of web pages, usually on a particular topic or business
How web pages work…
1) Client (user) tells the browser to request a web page using the http protocol
2) Request goes over the internet to the web server
3) Web page is found on the web server
4) Copy of the source code for the web page is sent back to the original computer
5) Browser processes ("translates") code into web page
The Internet
Client (user) Server
How does it work?
Web pages are simply made up of plain ASCII text. Web browsers process the codes
used on web pages to display a fully formatted web page. But the pictures, colors,
and other non-text items on a web page aren't actually on the web page itself – the
web page itself is simply text, with the formatting and graphics encoded. You can
look at the code for any web page by going to the "View" menu and choosing "Page
Source".
Introduction to HTML
• HTML stands for "HyperText Markup Language"
• HTML is a collection of text surrounded by tags which modify the text of the
document.
• All tags are encoded in angle brackets (<>).
• Tags work in pairs -- one turns on the modification, one turns it off. Stop tags look
just like start tags except they have a slash (/) in front. <tag>affected text</tag>
• Some tags work on their own. Since they don’t have a closing tag, we place a / at
the end of the tag. The Horizontal Rule tag <hr /> is an example.
• Most tags have attributes which can modify how they function:
<tag attribute="value">affected text</tag>
Tag examples
<em>I want this in italics</em> is processed by the browser to look like: I want
this in italics
<p align="center">I want this new paragraph to be centered</p> is processed by
the browser to look like:
I want this new paragraph to be centered 8
Structural tags
• These are the basic tags which must be a part of every web page. They tell the
browser that the document is a web page.
<html> <head> <title>Title of Webpage</title> </head> <body>
2
This is where the main part of the web page would go
</body> </html>
Breaking Lines and Paragraphs

•<p> text text text </p> –Paragraph tag
–Most browsers render (process) this with blank lines between each paragraph
•<br /> –Line break tag. Used when the webmaster wants a carriage return but
doesn't want a blank line to follow
•<hr /> –Horizontal Rule. Used to place a straight line across the page.
Breaking Lines and Paragraphs
•<p> text text text </p>
–Paragraph tag
–Most browsers render (process) this with blank lines between each paragraph
•<br />
–Line break tag. Used when the webmaster wants a carriage return but doesn't
want a blank line to follow
•<hr />
–Horizontal Rule. Used to place a straight line across the page.
Header Tags
Header Tags -- Used for marking sections and subsections in a document. Using
Cascading Style Sheets (CSS), you can change the default meaning for the tags.
<h1> Header 1 -- Giant-sized and bold </h1> <h2> Header 2 -- Large and bold
</h2> <h3> Header 3 -- Normal-sized and bold </h3> <h4> Header 4 -- Small and
bold </h4> <h5> Header 5 -- Very Small and bold </h5> <h6> Header 6 -- Tiny
and bold </h6>
Formatting text
• Bolding and Italicizing: – <strong>text you want bold</strong>
<b> you can also use the bold tag (no longer recommended) </b>
– <em>text you want in italics</em>
<i> you can also use the italics tag (no longer recommended) </i>
• Aligning text or graphics left/center/right:
– <p align="left">new paragraph justified left</p>
– <p align="center">new paragraph centered</p>
– <p align="right">new paragraph justified right</p
Linking Documents
• One of the really exciting things webmasters can do is link their web page to
another's.
• To do this, webmasters use a pair of anchor tags:
<a href="URL">text to become clickable hotlink</a>
A = Anchor
HREF = hypertext reference
URL = Uniform Resource Locator
(a web address, such as http://www.stanford.edu/
More on linking documents
• Things to know about links:
– Case counts for the URL
– The URL must be exact
– You must have something in the "text to become clickable hotlink" section for the
link to work
File Transfer Protocol
• FTP (File Transfer Protocol) is used to publish web pages by copying the HTML
source files from your computer to the server computer.
• Some web servers will no longer allow you to use FTP and instead require SFTP
(Secure FTP) or SSH (Secure Socket Shell). But the concept is the same -- you create
your web page on your computer, then copy them to the server computer.
Colors
• Web colors are specified by HEXADECIMAL code which describes the RGB value.
RGB stands for RED GREEN BLUE. These are the primary colors that make up all
other colors. The hexadecimal code includes two characters for each color.
Hexadecimal codes have the format: #RRGGBB
3
• Examples: White = #FFFFFF, Black = #000000,
Red = #FF0000, Green = #00FF00
• Browsers greater than version 3 can also correctly process 256 named colors (red,
white, black, turquoise, periwinkle, etc.)
Ref: http://www.stanford.edu/group/csp/cs21/samples/color.html
Using Colors on Web Pages
One way you can setting colors for the entire page is to modify (by adding
attributes to) the <BODY> tag:
<body bgcolor="red" text="yellow" link="green" alink="black" vlink="purple">
BGCOLOR = modifies background color
TEXT = modifies text color
LINK = modifies link color
VLINK = modifies viewed link color (links that have been visited)
ALINK = modifies active link color (color that occurs the split second a user is
clicking on a link)
Cross-platform color issues
• Different systems have different color cards & monitors and aren't calibrated to
each other
• Even within the same system, color cards and monitors, the user can set their
options .and change the look of their displays
• Macs tend to be brighter than Windows
• Strive for contrast and value balance
BAD EXAMPLE:
http://www.stanford.edu/group/csp/cs21/demos/low.html
GOOD EXAMPLE:
http://www.stanford.edu/group/csp/cs21/demos/BonW.html
http://www.stanford.edu/group/csp/cs21/demos/WonB.html
Fonts
• Designers can also specify the font they wish to use on the page. One way to do
this is to use the <font> tag. However, the W3C has recently decided to deprecate
both the <font> tag and the use of the bgcolor attribute -- instead, they want us to
start using style sheets. More on how to use style sheets in the next couple of
slides. That said, many web sites today still use the <font> tag.
• Not all systems have the same fonts. If you choose a font that isn't on the user's
system, the page won't look the way you prefer.
<font face="FONTNAME"> [text] </font>
• The default font for browsers is Times. This is a SERIF font. Another popular choice
is Arial. This is a SANS-SERIF font. Another type of font is MONOSPACE, such as
Courier.
• One way to avoid the issue of conflicting or missing fonts is to specify the type of
font, rather than the actual font, such as:
<font face="sans-serif"> [text] </font>
• Another way is to put more than one font into the tag. The browser will check to
see if the computer has the font in order:
<font face="Palatino, Arial, sans-serif"> [text] </font>
Other Font Attributes
• SIZE = "number": 1 = smallest, 7 = largest
<font size="1">Small size</font>
Small size
• COLOR - changes text color (use either hexadecimal code or named color)
<font color="red">Red</font>
Red
Combining Font Attributes:
<font face="comic sans ms" color="yellow" size="7">Comic Sans MS,
Yellow, Size 7</font>
Comic Sans MS, Yellow, Size 7
Using Cascading Style Sheets
• Cascading Style Sheets allow you to customize the look of your pages by creating
a style for these pages and then change the look of the entire site by making one
4
change in one document. Style Sheets are well known to "power-users" of MSWord
and Adobe Pagemaker. This same level of ease and control works on the web.
• Style sheets work by allowing you to define properties for how HTML elements
(tags) appear when viewed in a Web browser. For example, you can set it up so that
every
<h1> on your page appears in green, Arial, 18 points, and italics – automatically
(instead of big and bold, which is the default state of h1).
H1 Example
• If in the future you decide they should all be blue, then you just change it in one
place and they can be updated throughout your site.
H1 Example
Week 2 Slide 16 of 22 CS21: Web Site Design
How do style sheets work?
• Suppose you want to create that page where every <h2> tag is green, italicized,
and in Arial font. Before CSS came along, you would have to write the following
every time the <h2> tag was used.
<h2><i><font face="Arial" color="green">This is a green, italicized, Arial
H2</font></i></h2>
• Now, you can simply specify this in a single step by typi.ng something like this:
h2 {font-family: Arial; font-style: italic; color: green; }
• Then in the body of the document, you simply use the <h2> tag as usual. When
the page is viewed, all the <h2> tags will appear as you wished them to
automatically.
• If later you do decide you want the <h2>s to suddenly be blue instead of green,
you simply change the style sheet command to be blue instead of green.
• You can set up styles for every HTML tag. This is done either by placing the styles
in the <head>, by using an inline style, or by placing the styles in an external style
sheet.
Defining styles: head
• You can set a style sheet for a single document by putting the style information in
the head of the document.
<head> <style type="Text/css">

</style> <head> <body>
<h1> This is sooooooooooooooo Cooooooooooool </h1> <p> nothing cooooool
here </p>
<h1> this one is cool toooooooooooooo<h1> </body>
The actual style information is included in an HTML comment tag (<!—commented
text -->) in order to hide it from browsers that don't understand CSS. The TYPE
attribute of the <style> tag defines the type of style sheet being used -- in this case
CSS, Cascading Style Sheets.
Defining Styles: inline
You can also simply include the style information in a particular tag right in the
document by adding the STYLE attribute to the tag directly.
<body>
<h1 style="faont-maily: Arial; font-style: Italic; color: green;">
This is sooooooooooooooo Cooooooooooool </h1>
<p> nothing cooooool here </p>
<h1> this one is cool toooooooooooooo<h1>
</body>
</html>
This particular method is most useful if you want to change a single instance of a
tag in a document that already has a style associated with it. When there are
multiple styles affecting a document, the style closest to the tag in question takes
precedence. In other words, if I have put astyle in HEAD of the document but also
included an INLINE style, that INLINE style will override the document style for that
one instance of the tag.
To set a style for an entire site of documents, create a standalone text file with a
.css extension (e.g., basic.css) that contains the necessary style information. Then,
5
link each web page to that CSS file using either the <link> tag or the import
method
Text that appears in the basic.css style sheet document
h2 {font-family: Arial; font-style: italic; color: green;}
p {font-family: Courier; font-style: bold; color: red; }
HTML document, using the <link> tag method
<head>
<link rel="stylesheet" type="text/css" href="basic.css" /> </head>
HTML document, using the import method
<head>
<style type="text/css">
 </style>
</head>
Classes and IDs
• Classes and IDs are ways for you to pre-define particular features.
• Suppose you wanted to create a style to allow parts of a web page to be
highlighted.
• You can create such a style by creating either a class or an id, defining that class
or id, and then referencing that class or id when you want it to be used.
• Classes can be used more than once on a web page; an id should only be used
once per web page. Classes are preceded by a "." (dot). IDs are preceded by a "#".
<head> <style type="Text/css">
<!—highlight { background-color: #cccccc; } -->
</style> <head> <body><p> this paragraph is not highlighted. </p> <p
class="highlight"> this paragraph is highlishted.</p> </body> </html>
Span and div
• You can also use classes and ids with <SPAN> and <DIV> tags. These are
container tags with minimal formatting associated with them. You can set up a
<SPAN class="whatever"> to attach a style to specific letters or words. The <DIV>
tag will start on the next line and start a new line after itself and is used to attach a
style to larger bodies of text or graphics.
type here page 21
<head>
<style type=”text/css”>
<!—#brighttext {color: #00ff00; font-weight: bolder;}
.periwinklebluetext {color: #6699ff;}
</style>
</head>
<body>
I love Pakistan<br/>
We should love our beloved country<br/>
<div id=”brighttext”>
Yes Sir! Yes Sir!
</div>
Three bags full. <br/>
<span class=”periwinklebluetext”>one</span> for my master. <br/>
<span class=”periwinklebluetext”>one</span> for my dame. <br/>
<span class=”periwinklebluetext”>one</span> for the little boy, <br/>
Who lives down the lane.
</body> <html>
Week Agenda
• Using Special Characters • Using Graphics on web pages • Types of web graphics
• Using existing web graphics • Creating web graphics • Background graphics
Special Characters • Because the source codes for Web pages are created with
plain ASCII text only, the characters on the source code are limited to the standard
keyboard characters. To have special characters such as oe, ß, ñ, or © show up on
a web page, designers must utilize special HTML codes.
• Example:
© = © ñ = ñ ß = ß = oe
http://www.stanford.edu/group/csp/cs21/samples/ascii.html
6
Structure of a URL
• Uniform Resource Locators provide links from a page anywhere on the World Wide
Web to any resource on the Internet.
• Starts with the protocol (defines how the info is to be sent and received):
– http:// Web page – ftp:// FTP site – mailto: send a mail message – file:/// File on a
local (desktop) machine
The server
• Servers are computers which provide
HTML web pages to a browser using the http protocol.
• Must have direct, permanent connection to the Internet
Domain
• Domain defines the server on the internet where the the resources are located.
Common ones are .com (commercial), .org
(nonprofit organization), .mil (military), and .edu (educational facility)
• Common country codes are: .uk (United Kingdom), .jp (Japan), .au (Australia)
Directory Path
• Directory path consists of zero or more directories separated by forward-slash
characters. (/)
• Important distinction between PCs and the internet: directories on PCs are
separated by backwards slash. (\)
Links
• <a href="http://www.stanford.edu/people/markb/resume.html">
Mark's resume </a>
• This is an absolute link. It defines completely the domain of the host computer
(www.stanford.edu), as well as the path (/people/markb) and the file (resume.html).
• <a href="resume.html">Mark's resume</a>
• This is a relative link. Note that the protocol, domain, and path are omitted from
the URL. The browser will assume the current domain and path are to be used.
By current, we mean the domain and directory of the page that is currently being
displayed (ie, relative to the current page, find this page).
Using Graphics on Web Pages
• Graphics on web pages are separate files. Unlike a Word document, where the
graphics actually "live" within the document, to get a graphic on a web page,
designers point to the graphic file in the HTML source code like this:
<img src="URL-of-graphic" alt="description of graphic" />
• Graphics are copyrighted material and should only be used with permission.
Graphics can be described as either relative or fully qualified URLs
http://www.stanford.edu/group/csp/cs21/demos/bunny.html
<html> <head> <title>Bunny Webpage</title> </head>
<body bgcolor="turquoise"> <h2 align="center">BUNNY!</h2> <p
align="center">
<img src="bunny.gif" /> </p> </body> </html>
Relative reference (relative to the location of the HTML document)
<html> <head> <title>Bunny Webpage</title> </head>
<body bgcolor="turquoise"> <h2 align="center">BUNNY!</h2> <p
align="center">
<img src="http://www.stanford.edu/group/csp/cs21/demos/bunny.gif" />
</p> </body> </html>
Fully qualified URL
Bunny.html
In the bunny web page example, both bunny.html and bunny.gif are located in the
same directory.
(http://www.stanford.edu/group/csp/cs21/demos/)
That's why we could use relative URL to insert the graphic (<img src="bunny.gif"
/>).
If we wanted to use the fully-qualified URL, it would have been:
<img src="http://www.stanford.edu/group/csp/cs21/demos/bunny.gif" />
But since both bunny.gif and bunny.html are in the same webspace, it makes better
sense to use the relative URL.
Types of Web Graphics
7
GIF: GIF (Graphics Interchange Format) is the most common graphic type on the
web. It can be pronounced with a hard or soft “g.” GIF is limited to 8-bit color
information (256 colors) and works best for line art. It allows for transparent and
animated graphics.
JPEG: JPEG (Joint Photographic Experts Group) was designed for color-rich images,
such as photographs. JPEG compresses graphics with high color depth (24-bit color
-- up to 16 million colors) so that they are smaller and download faster. JPEG
compression is "lossy" – some image detail is lost during compression
Using Existing Web Graphics
• Not a graphic artist? Don't despair! Few of us are! • There are numerous graphics
archives on the Web where you can find wonderful, usable, professional-looking
graphics for use on your web pages.
• Remember, graphics are copyrighted -- don't use them unless they from an
archive or you have explicit written permission to use them.
• To find a graphics archive, point your browser to Yahoo!
(http://www.yahoo.com/) and search for "Clip Art" or "Web graphics".
You'll likely find more than you could possibly use.
• There are a couple of graphic archives listed on the Resources page.
Downloading Graphics
• In your web browser:
– Point your mouse over the image and right-click the image.
– Choose “Save Image (Picture) As . . .”
– Specify the destination location of the image file on your computer. Click OK.
Photographs
• Existing photos can be converted to digital format using a scanner and scanner
software. Most scanner software allows you to save the graphic as a GIF or JPEG. If
you aren't happy with the resulting photo, it can be "cleaned up" using a program
such as Photoshop or Fireworks. New photos can be converted to digital format
(usually JPEG) by the processor. Kodak, Longs, and other processors can save your
photos on a CD-ROM or diskette as well as creating prints for you. Again, these
photos can be
"cleaned up" using a program such as Fireworks.
Creating Web Graphics
• Graphics Software Packages
– There are a wide variety of software packages available for the creation of Web
graphics. Some are designed specifically for this purpose (such as Fireworks) while
others can do much more than merely create Web graphics but do a great job at
that task as well (such as Photoshop).
– Creating graphics can be a simple process (creating a button with a text label) or
a much more complicated process (creating a logo).
– Visit the Resources page for suggestions on software. Also, there is a listing of free
tools available for download on the web.
Background Graphics
• Done by modifying the <BODY> tag:
<body background="THE_URL"> or by adding a body style to the style sheet body
{ background: url(THE_URL); } where THE_URL is the location of the graphic
• Creating a web page with a colored background can be nice but you can go one
step further with a background graphic.
• Background graphics are generally small graphics that tile across the browser
window to create a filled-in effect. As such, some graphics are better suited to being
background graphics than others.
• General rules:
– Keep the graphic/text contrast high
– Keep the background graphic SIMPLE -- too much color, too much pattern can
make it really hard to read over
– Don't overuse background graphics -- it can become distracting
Animated Graphics
• Using Existing Animations
– Most graphics archives include animated sections
8
– Most animations are a form of GIF format; in terms of placing animations on a web
page, there is no difference between an animated GIF and a non-animated GIF
(same tag, same process).
• Creating New Animations
– There are software packages specifically for creating animations. Animations are a
series of static graphics that are "stitched" together and saved into one file. The
browser shows each of the static images in sequence resulting in the animations.
Uploading image to webspace
• Process is the same as uploading HTML files
• Only difference -- graphics are BINARY, not plain ASCII text, so you'll need to press
the
BINARY or RAW DATA button in your FTP client (Fetch / WS_FTP)
• Don’t forget to reset the button back to
"ASCII" for when you send HTML files...
Weekly Assignment
• Visit some graphics archives. Choose some graphics you'd like to have on your
pages.
Save them to your hard drive so you'll have access to them (get permission if
they're copyrighted!)
• Or, if you have the software and skills, create a graphic or two to use on your site.
• Or, scan a photo into your computer start from 34 PAGE

How The Internet Works HTML Notes

Enviado por

Dados do documento

Descrição original:

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

How The Internet Works HTML Notes

Enviado por

Direitos autorais:

Formatos disponíveis

1

Breaking Lines and Paragraphs

Você também pode gostar