Glossary Cww

Banner - A typically rectangular advertisement placed on a web site, either above, below, or on the sides of the web site's main content and linked to the advertiser's own web site.

Blog - Short for web log, a blog is a web page that serves as a publicly accessible personal journal for an individual. Typically updated daily, blogs often reflect the personality of the author.

Branding - Creating a distinct personality for a product (in this case the artist, not the label) and telling the world about it.

Cookie - A message that a web server gives to a web browser. The browser stores the message in a text file. The main purpose of cookies is to identify users and possibly prepare customized web pages for them.

CSS - Short for cascading style sheets, a new feature being added to HTML that gives both web site developers and users more control over how pages are displayed. With CSS, designers and users can create style sheets that define how different elements, such as headers and links, appear. These style sheets can then be applied to any web page.

FTP - File transfer protocol, the protocol for exchanging files over the Internet.

GIF - Pronounced giff or jiff, GIF stands for graphics interchange format. GIF is limited to 256 colors and is more effective for scanned images such as illustrations than it is for color photos.

Home page - The main page of a web site. Typically, the home page serves as an index or table of contents to other documents stored at the site.

JPEG - Short for Joint Photographic Experts Group, and pronounced JAY-peg. JPEG is a compression technique for color images, used for most photographs on the Web.

Liquid layout - Layouts that are based on percentages of the current browser window's size. They flex with the size of the window.

Navigation bar - A set of buttons or graphic images typically in a row or column used as a central point that links you to major topic sections on a web site.

PDF - Portable document format (PDF) is a file format that has captured all the elements of a printed document as an electronic image that you can view, navigate, print, or forward to someone else. PDF files are created using Adobe Acrobat, Acrobat Capture, or similar products (whatis.com)

PNG - Short for Portable Network Graphics, and pronounced ping, a new bitmapped graphics format similar to GIF.

Splash page - The page on a web site that the user sees first before being given the option to continue to the main content of the site. Splash pages are used to promote a company, service, or product or to inform the user of what kind of software or browser is necessary to view the rest of the site's pages.

Storyboarding - A storyboard is an expression of everything that will be contained in a program or web site—what menu screens will look like, what pictures (still and moving6) will be seen including when and for how long, and what audio and text will accompany the images, either synchronously or hyperlinked.

Thumbnail - A miniature display of a page or photo that can be enlarged when clicked. This enables a web page design that can hold many small images. The thumbnail is simply a smaller version of the picture connected by a hyperlink to the larger photo.

Virtual street team - A group of Internet marketers, generally selected from the target market, who actively promote the artist on the Web, generally from the perspective of the artist's avid fans.

Webmaster - A person or group of people responsible for the design, implementation, management, and maintenance of a web site.

WYSIWYG - Pronounced WIZ-zee-wig and short for "what you see is what you get." A WYSIWYG application is one that enables you to see on the display screen exactly what will appear when the document is printed or published to the Web.

REFERENCES AND FuRTHER READiNG

Bear, Jacci Howard. Lorem ipsum dolor,

http://desktoppub.about.com/cs/pagelayout/a/lorem.htm.

Bear, Jacci Howard. Why and how to use templates effectively,

http://desktoppub.about.com/cs/pagelayout/a/use_templates.htm.

Chastain, Sue. Top 8 free photo editors for Windows,

http://graphicssoft.about.com/od/pixelbasedwin/tp/freephotoedw.htm.

CNET Web Editor Reviews. Namo WebEditor Suite 2006, http://reviews.cnet.com/ web-graphics/namo-webeditor-suite-2006/4505-3637_7-31752255.html.

ConsumerSearch.com. Web design software reviews,

www.consumersearch.com/www/software/web-design-software.

Fehd, Amanda. (2008, March 27). Adobe launches free version of Photoshop. The Tennessean, business section, p. 1.

Gillespie, Joe. www.wpdfd.com.

Knab, Christopher. (November 2003). How to write a music-related press release, http://www.musicbizacademy.com/knab/articles/pressrelease.htm.

Kymin, Jennifer. Basics of web design,

http://webdesign.About.com/od/webdesigntutorials/a/aa070504.htm.

Moon, Phoebe. www.phoebemoon.com.

6 Technically, these are called static and dynamic. In web page terms, "static" is a page with fixed text and standard images; "dynamic" is a page with variable information, moving or rotating pictures (or animation), and possibly some visitor interaction.

Nevue, David. (2005). How to promote your music successfully on the Internet, www.promoteyourmusic.com.

PC Magazine Software Reviews. SJ Namo WebEditor 6 Suite, www.pcmag.com/article2/0,1759,1607976,00.asp.

Spellman P., (2000, March 24). Media power: Creating a music publicity plan that works: Part 1, www.harmony-central.com./Bands/Articles/Self-Promoting_Musician/chapter-14-1.html.

Top Ten Reviews. SiteSpinner, http://website-creation-software-review.toptenreviews. com/sitespinner-review.html.

Top Ten Reviews. Web Easy, http://website-creation-software-review.toptenreviews. com/web-easy-professional-review.html.

Web Design Services India. www.webdesignservicesindia.com.

Web Graphics. www.sph.sc.edu/comd/rorden/graphics.html.

Web Style Guide. http://webstyleguide.com/page/frames.html.

www.pcmag.com/encyclopedia_term.

www.amacord.com/services/storybrd.html.

www.webopedia.com.

www.theclienthelpdesk.com.

This page intentionally left blank

HTML and Scripts

HTML: THE BASiCS AND WHY YOU NEED THEM

Hypertext markup language (HTML) is the predominant authoring language for the creation of web pages. HTML defines the structure and layout of a web document by using a variety of tags and attributes to denote formatting of certain text as headings, paragraphs, and lists. HTML is written in the form of tags bracketed by the greater than and less than symbols, such as < tag >. Most tags come in pairs, the opening tag is listed as <tag>, and the closing tag is </tag>, which denotes the end of the previous command. For example, if you wanted to italicize a word in a sentence, you would precede the word with the tag for italics <i> and follow the word with the end tag </i>. Failure to include the end tag would result in everything from that point forward being presented in italics. A web visitor's browser examines the HTML for instructions on how to display the graphics, text, and other multimedia components. Tutorials can be found at www.w3schools.com.

When someone types in a URL or clicks on a Web page link, the browser requests a document from a Web server via the hypertext transport protocol, or HTTP. The server then sends the document back to the user, which is displayed on the browser. The things that are contained in the document (text, photos, audio and video files, etc.) were all put there using HTML structure.

www.answers.com

All HTML documents start with the command <html>. This lets the browser know to read and interpret the commands as HTML. The last tag on the web page should be the end tag </html>. This tag tells your browser that this is the end of the HTML document. Beneath the <html> tag at the top of the page, you will find header information between the <head> and </head> tags. This information is not displayed on the page. The head element contains information about the document, some of which helps search engines catalog and describe the site. Head tags include those shown in Table 6.1.

Here is an example of the source code for a heading for a web page head that was shown in Chapter 5 (Figure 5.1):

<!doctype html public "-//w3c//dtd html 4.0 transitional//en"> <html><head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta name="DESCRIPTION" content="Bill Wharton (Sauce Boss) has cooked gumbo for over 140000 people for free during his high energy concerts with his band--The Ingredients">

<meta name="GENERATOR" content="Mozilla/4.73C-CCK-MCD {C-UDP; EBM-APPLE} (Macintosh; U; PPC) [Netscape]">

<meta name="keywords" content="blues music hot sauce gumbo slide guitar Bill Wharton datil pepper habanero Liquid Summer recipe contest Sauce Boss Jimmy Buffett Parrothead Planet Gumbo Podcast Florida Blues">

<link rel="stylesheet" href="main.css" type="text/css" media=screen><title>Sauce

Boss</title>

(www.sauceboss.com)

Meta Tags

Meta tags are author-generated HTML commands that are placed in the head section of an HTML document. These tags help identify the content of the

Table 6.1

Source Code for Head Tags

Tag

Description

<!DOCTYPE>

Defines the document type; goes before the <html> start tag

<head>

Defines information about the document

<tltle>

Defines the document title

<base>

Defines a base URL for all the links on a page

<llnk>

Defines a resource reference

<meta>

Defines meta information (as in meta tags—see the text)

page and specify which search terms should be used to list the site on search engines. Popular meta tags can affect search engine rankings and are generally listed in the sections "Meta Keywords" and "Meta Description." Search engines often use the description meta tag and display it in the results. A meta tag can be generated automatically by the site www.submitcorner.com. The example tag shown here will let a search engine know to categorize the above web site under blues music, slide guitar, and by the artist's other endeavor, Louisianastyle cooking.

The web page title is also significant and should reflect the nature of the site. The <TITLE> tag is the caption that appears on the title bar of your browser and is the name on the clickable link listed in the search engine results. (Example: <title>Sauce Boss</title>.)

FIGURE 6.1

Google search results for Sauce Boss, including tags. (Courtesy of Bill Wharton.)

FIGURE 6.1

Google search results for Sauce Boss, including tags. (Courtesy of Bill Wharton.)

The table shown in Figure 6.2 is from www.makemyownwebpage.com and describes the various types of meta tags. The author describes meta tags as "where the search engines go to see what your priorities are."

FiGURE 6.2

Example meta tags (www.makemyown webpage.com) by permission.

MET A Tags

The <meta> tags are where the search engines go to see what your priorities are. A couple of other resources are also looking at meta tags for other content. You may have several Meta tags for a single web page.

Syntax

<META rc&ME="X tern-name" CONTENT= "items ">

<META KTT?-ZQV±V= "iterns" CONTEND "1tem-coding">

Modifiers

NAME-DESCRIPTION" CONTENT="diarcripi»«"

This description is what most search engines tell the world about your web page.

NAME="KE YWO RD S" C ONTENT="Arev, word, keyword'

Keywords help define your topic for what the search engines are looking for Separate each keyword or phrase with a comma.

NAME="ROBOTS" C' ONTENT=" index Jo flW

Tells the Search Engine Robots how to look at your site. The possible choices here are first INDEX or NOINDEX. This tells the search engines whether or not you want them to scan this page and include it in their indexes. Second term is FOLLOW ox NOFOLLOW, which tells the search engines to follow the links on the page and index those or not. Not all search engines recognize this term.

This helps define the level of objectionable materials within tliis web page. Possible choices here are GENERAL (general audience... anybody), AiiTURE (Adult materials... may be objectionable), RESTRICTED (18 years old and up) and 14 YEARS (14 years old and up,

NAME-AUTHOR" COKrENT='[email protected]" Lists the authors name and or email address

NAME-'COPYRIGHT" CONTEXT" Copyright 2002"

Displays the copyright, trademark or any intellectual property information about the web page.

NAME="GENERATOR" CONTENT=" notepad"

Displays the publishing tool used to make my own web page.

HTTP-EQUIY="refresh" CONTENTS; URL=iWex, htm "

This allows you to forward the \isitor to a new page as listed by the URL term. The timing (just before URL) is set to how many seconds to pause before forwarding.

Body Tags

The body of an HTML document uses tags to format text and graphics. There are numerous tags to denote font size, color, style, and other features, and there are others that denote paragraph formatting. Figure 6.3 indicates some of the body text formatting tags commonly used, including break, alignment, and justified.

This is line one followed by a break <br> And here is line two with a break.<br> And a third and final lme.<p>&nbsp;</p>

This is lute one followed by a break <br>

And here is hne two followed by a paragraph tag.<'p>

<p align-lieft">Left Justified Text</p>

<p>Here is a small block of text, enough text to cause the sentence to wrap around and illustrate the effect of the left tag on word wrap.</p>

<p align="nght">Right Justified TexK'p>

<p aligu="right">Here is a small block of text, enough text to cause the sentence to wrap and illustrate the effect of the right tag oil word YvTap.<'p>

<p align-" center">Center Justified Text</p>

<p align-'center">Here is a small block of text where the sentence wraps and illustrates the effect of center oil word wTap </p>

<p align="justify">Justify Jttstified<yp>

<p align= "justify" >Here is a small block of ftilly-justified text, enough to wrap and illustrate tlie effect of -justofv" on word wrap.</p>

This is line one followed by a break. And here is line two with a break. Aid a thud and final hue.

Tins is line one followed by a break

And here is Ime two followed by a paragraph tag.

And a third final hne.

Left Justified Text

Here is a small block of text, enough text to cause the sentence to wrap around and illustrate the effect of the "left" tag on word wrap.

Right Justified Text

Here is a small block of text, enough text to cause the sentence to wrap and illustrate the effect of the "right" tag on word wrap

Center Justified Text

Here is a small block of text where the sentence wraps and illustrates the effect of "center" on w-ord wrap

Justify7 Justified

Here is a small block of fully-justified text, enough to wrap and illustrate the effect of "justify" on word wrap.

FIGURE 6.3

Example of page body formatting.

Other tags may denote font style and color. It is recommended that you use standard, commonly used fonts. If the web visitor's browser or computer is not set up for the fonts you have chosen for your body text, the substitution fonts may disrupt the formatting of the page and cause elements to shift out of place.

FONTS AND COLORS

HTML tags also indicate characteristics of the text appearance such as font size, color, and formatting.

In Figure 6.4, Arial and Times Roman fonts are used, along with underline, italics, bold, and font colors. The <i> tags indicate italics, <b> is for bold type, <u> is for underline, and the font tag can include, among other things, face, color, and size.

FiGuRE 6.4

Example of font formatting.

<font £ ac e=" At i al "> At i al 12 point tont</ f ontxpxbx i>

<font face="Time3 r.'f i Roman" size=rr4rr>Tim£S Roman [l4 point type in bold arid italics< /funtx/i></b></p>

<pxtont face="Times Hero Roman" size="4">

Hii3 sentence contains <u>underlines</u>,

<i>italiC3,</i> <b>bold,</b> and

-■font i:olc.i="*i0000FF">a color change to blue</font> </bx/Eontx/p>

Aria! 12 pointfont

Times Roman 14 point type in bold and italics

This sentence contains underlines, italics, bold, and a color change to blue

Table 6.2 Commonly Used HTML Formatting Commands

Basic Text Commands

Table 6.2 Commonly Used HTML Formatting Commands

Basic Text Commands

<br>

Break

Same as carriage return.

<p>

Paragraph

Carriage return plus adds a blank line.

<b> </b>

Bold

Text between the two tags is displayed in bold.

<l> </l>

Italics

Text between the two tags is displayed in italics.

<u> </u>

Underline

Text between the two tags is displayed in underline.

<font slze=?></font>

Font size

Sets size of font from 1 to 7.

<font color=?></font>

Font color

Sets font color, using name or hex value.

<font face=?></font>

Font typeface

Sets the typeface such as Times Roman, Arial, Tahoma, etc.

<font size="3" color="#FF000" face="arial">The actual text affected by the commands</font>

Example of font size, color and face.

Table 6.2 Commonly Used HTML Formatting Commands—cont'd

Images

<image src=url>

Insert an image

url would be the address where the image is found and generally ends with .jpeg or .gif.

Image subcommands

Width = 120

The picture width will be displayed as 120 pixels wide.

Height = 60

The picture width will be displayed as 60 pixels high.

Align = left

The picture will align to the left of text.

ALT = "text"

Tells the browser what text to insert on the screen if the image is not available.

Border = 4

The border around the image will be 4 pixels.

Hspace = 4

The horizontal space between the image and surrounding text will be 4 pixels.

Vspace = 4

The vertical space between the image and surrounding text.

Links

<a href="mailto:EMAIL"></a>

E-mail link

Creates a mailto link that automatically opens up the user's default e-mail program and inserts the e-mail address.

<a href="newpage.html"> Link to New Page</a>

Hyperlink to another site or location

The "Link to New Page" portion of the command is what is displayed on the screen as the hot link.

(Continued)

(Continued)

Table 6.2 Commonly Used HTML Formatting Commands—cont'd

Color Commands

Table 6.2 Commonly Used HTML Formatting Commands—cont'd

Color Commands

Hex HTML colors are indicated by a six-digit series of letters and numbers but can also be indicated by a color name.

bgcolor="#000000"

Background color

Used to tell the browser what color of background to use.

text="#ffffff"

Text color

The standard color to use on general text that follows.

link="#004000"

Link color

The standard color to use on unvisited links that follow.

vlink="#44aaff"

Color for visited links

alink="#ff00ff" Color for mouse-over As the cursor passes over the link, this is the momentary color the link changes to while the user is hovering over the link with the cursor.

background="file.gif" Background image If you prefer to use an image as the background, this command specifies the image.

Continue reading here: MUSiC ViDEO CLiPS

Was this article helpful?

0 0