Transcript more HTML - bhecker.com
Web Development URLS and Web basics, Misc. Topics More WWW, HTTP Background information
Uniform Resource Locators
Hypertext Transfer Protocol (HTTP)
manages the hypertext links that are used to navigate the Web ensures that Web browsers correctly process and display the various types of information contained in Web pages (text, graphics, audio, and so on)
Uniform Resource Locators The protocol portion of a URL is followed by a colon, two forward slashes, and a host A host refers to a computer system that is being accessed by a remote computer The host portion of a URL is usually www for “World Wide Web”
Uniform Resource Locators
Domain name
a unique address used for identifying a computer, often a Web server, on the Internet consists of two parts separated by a period The first part of a domain name is usually text that easily identifies a person or an organization, such as bhecker or Course
Uniform Resource Locators The last part of a domain name, known as the domain identifier, identifies the type of institution or organization Common domain identifiers include .biz, .com, .edu, .info, .net, .org, .gov, .mil, or .int
Uniform Resource Locators
Absolute and Relative Links An absolute URL refers to the full Web address of a Web page or to a specific drive and directory A relative URL specifies the location of a file relative to the location of the currently loaded Web page
Hiding Web Pages from Search Engines Your Web site may includes pages that you do not want to be included in any search engine indexes
Hiding Web Pages from Search Engines For instance, you may have a page that stores personal information or private data that, although not private enough to encrypt using special security software or a protocol such as HTTPS, should not be returned to a user who performs a search in a search engine
Hiding Web Pages from Search Engines You can inform search engine spiders that you do not want certain pages on your site to be indexed by placing a file named site
robots.tx
in the root directory of the Web server that hosts your Web This technique is called the Robots Exclusion Protocol
The http-equiv Attribute When a user wants to access a Web page, either by entering its URL in a browser’s Address box or by clicking a link, the user’s Web browser asks the Web server for the Web page in what is referred to as a request
The http-equiv Attribute What the Web server returns to the user is called the response One part of the response is the requested Web page
The http-equiv Attribute
The response header is sent to the Web browser before the Web page is sent in order to provide information that the browser needs to render the page
The http-equiv Attribute
One of the most important pieces of information in the response header is the type of data, or content-type, that the server is sending
Web Development Adding Sound to your website
Working with audio on the web Audio can be compelling It can add greatly to the mood of a site It can “complete” the experience
Problems with audio Audio files can be extremely large Copyright issues can be troublesome Audio can be distracting Cross-platform audio is tricky
Types of Audio Files Wav (very large) Mp3 (smaller, good compression) Realmedia rm (good compression, proprietary format) Midi (excellent file size, variable quality)
Incorporating audio into a page Using a link Using an embed tag Using the bgsound tag Using CSS elements
Linking to a sound External reference to sound File plays when user clicks on it File opens in another (unspecified) player Browser determines program file will be played in
Using the bgsound tag
Using an embed tag
Sound Example
Web Development Creating Image Maps
Image Maps Image maps allow users to navigate to different Web pages by clicking an image An image map consists of an image that is divided into regions Each region is then associated with a URL; these regions are called hot zones
Image Maps You can open the URL associated with each region by clicking the hot zone with your mouse One of the most common uses of image maps is to create graphical menus that you can use for navigation
Web Page with Image Maps
Image Map Required Elements An
element that contains an
src
attribute specifying the name of the image file and a
usemap
attribute specifying the value assigned to the
id
and
name
attributes of the
element
Image Map Required Elements A
the element that specifies mapping coordinates and includes attributes that have the same value as used in
element
id usemap
and
name
attribute
Image Map Required Elements
elements nested within the
element that identify the coordinates within the image that will be recognized as hot zones
Image Maps You precede the value you assign to the
usemap
attribute (which is the value assigned to the
id
and
name
attributes of the
element) in the
element by a number sign
(#)
Image Maps The
element defines the coordinates used to create an image map’s hot zones The
element defines a region within an image map and is nested within a
element
Image Map Example
Click on one of the planets to watch it closer:
See the coordinates
Move the mouse over the image, and look at the status bar to see how the coordinates change.
Example: Uses the mouse to control the environment
Basic mouse over effects
Web Development Cascading style sheets separating content & presentation inline vs. document vs.external
sub-classes of elements pseudo-elements on to programming…
Introduction to Styles and Properties To ensure that future Web page authoring separates the definition of the elements in a document from how they appear, many of the display and formatting extensions that were added to the HTML language, such as the
element, were deprecated in HTML 4.0 and in XHTML 1.0 in favor of CSS
Introduction to Styles and Properties Cascading Style Sheets (CSS) are a standard set by the World Wide Web Consortium (W3C) for managing the design and formatting of Web pages in a Web browser
Introduction to Styles and Properties A single piece of CSS formatting information, such as text alignment or font size, is referred to as a style Some of the style capabilities of CSS include the ability to change fonts, backgrounds, and colors, and to modify the layout of elements as they appear in a Web browser
Introduction to Styles and Properties CSS information can be added directly to documents or stored in separate documents and shared among multiple Web pages The term “cascading” refers to the Web pages’ ability to use CSS information from more than one source
CSS Properties CSS styles are created with two parts separated by a colon: the property, which refers to a specific CSS style, and the value assigned to it, which determines the style’s visual characteristics Together, a CSS property and the value assigned to it are referred to as a declaration or style declaration
CSS Properties
Common CSS Properties
CSS Properties The properties available in CSS1 are grouped into the following categories: Color and background properties Font properties Text properties Box properties Classification properties
CSS Properties CSS recommendation, Level 2 (CSS2) was released in 1998 CSS2 builds on the properties in CSS1 and includes new features such as table properties and the ability to change the appearance of the mouse pointer
CSS Properties At the time of this writing, no Web browser provides complete support for the properties available in CSS2
Inline Styles The most basic method of applying styles is to use inline styles, which allow you to add style information to a single element in a document
Inline Styles You use the
style
attribute to assign inline style information to an element You assign to the
style
attribute a property declaration enclosed in quotation marks
CSS Values The values you can assign to a CSS property depend on what type of property it is Some properties can be assigned a range of values
CSS Values For instance, you can assign any font name that is available on a user’s system to the
font family
property For other properties, you must assign a value from a specific set of values
Length Units Length units refer to the units of measure that you can use in a style declaration to determine the size or positioning of an element Whether a length unit is used for sizing or positioning depends on the property and the element to which it is assigned
Length Units You assign a measurement value to a property by assigning the number that represents the measurement, immediately followed by the unit of measure
Color Units A color unit represents a color value that you can assign to a property You can assign a color unit to a property using any one of 16 color names defined in the CSS1 specification
Color Units
Color Units Most graphical computer systems use the RGB color system for specifying colors You can also assign a color using the RGB color system
Content vs. presentation most HTML tags define content type, independent of presentation style sheets associate presentation formats with HTML elements Remember, HTML style sheets are known as Cascading Style Sheets, since can be defined at three different levels 1.inline style sheets apply to the content of a single HTML element 2.document style sheets apply to the whole BODY of a document 3.external style sheets can be linked and applied to numerous documents lower-level style sheets can override higher-level style sheets
Inline style sheets
This is a right-justified paragraph in a sans serif font (preferably Arial), with some style="color:green" >green text
And here is a formatted link.
Using the style attribute, can specify presentation style for a single HTML element within tag, list sequence of property:value pairs font-family:Courier,monospace font-style:italic font-weight:bold font-size:12pt font-size:large font-size:larger color:red color:#000080 background-color:white text-decoration:underline text-decoration:none text-align:left text-align:center text-align:right text-align:justify vertical-align:top vertical-align:middle vertical-align:bottom text-indent:5em text-indent:0.2in
Inline style sheets (cont.)
Here is an image ![“Barbara](“heckerb.gif")
embedded in text.
- one thing
- or another
- with this
- or that
Inline style sheets (cont.)
| name | age |
|---|---|
| Chris Smith | 19 |
| Pat Jones | 20 |
| Doogie Howser | 9 |
Document style sheets inline style sheets apply to individual elements in the page can lead to inconsistencies as similar elements are formatted differently e.g., might like for all H1 elements to be centered inline definitions mix content & presentation violates the general philosophy of HTML alternatively, document style sheets allow for a clean separation of content and presentation style definitions are placed in the HEAD of the page (within STYLE tags) can apply to all elements, or a subclass of elements, throughout the page
Document style sheets
Centered Title
This paragraph will have the first line indented, but subsequent lines will be flush.
This paragraph will not be indented.
The End
document style sheets ensure that similar elements are formatted similarly can even define subclasses of elements and specify formatting p.indenteddefines subclass of paragraphs • inherits all defaults of
• adds new features to specify this newly defined class, place class="ID" attribute in tag note how "clean" the BODY is
Document style sheets (cont.)
| name | age |
|---|---|
| Chris Smith | 19 |
| Pat Jones | 20 |
| Doogie Howser | 9 |
what if you changed your mind?
Pseudo-elements
Welcome to my Web page. I am so happy you are here.
Be sure to visit CNN for late-breaking news.
pseudo-elements are used to address sub-parts of elements can specify appearance of link in various states :visited :active :hover can specify format of first line in page or paragraph :first-line can specify format of first letter in page or paragraph :first-letter Danger : changing the look of familiar elements is confusing Careful : current browsers do not support all CSS2 featuresExternal style sheets modularity is key to the development and reuse of software design/implement/test useful routines and classes package and make available for reuse saves in development cost & time central libraries make it possible to make a single change and propogate external style sheets place the style definitions in separate files multiple pages can link to the same style sheet, consistent look across a site possible to make a single change and propagate automatically represents the ultimate in content/representation separation
Modularity & style sheets
Centered Title
This paragraph will have the first line indented, but subsequent lines will be flush.
This paragraph will not be indented.
The End
h1 {color : blue; text-align : center} p.indented {text-indent:0.2in} ideally, the developer(s) of a Web site would place all formatting options in an external style sheet all Web pages link to that same style sheet for a uniform look simplifies Web pages since only need to specify structure/content tagsHow to show the creation date and URL information
End of Lecture