JavaScript by Example (2nd Edition)
| These are some topics that you should know about.
B.11.1 Metatags Example (Part 1)
Metatags are a study in themselves . Each part of the following example shows you the most common tags used. Some sites put the tags in Part 1 of the example first, followed by the TITLE tag and then the real metatag meat. They all follow the complex tag form seen below. The META NAME portion stays the same. You change the part in quotes after the CONTENT= to fit your situation. The first part is standard. You can copy it verbatim except for the CONTENT portion of the META NAME="Author" tag.
<HEAD> <TITLE>Simon Says Put the Title First</TITLE> < META NAME ="Author" CONTENT ="myownwebpage.com"> < META NAME ="distribution" CONTENT ="global"> < META NAME ="resource-type" CONTENT ="document"> < META NAME ="language" CONTENT ="en"> </HEAD> B.11.2 Metatags Example (Part 2)
This part illustrates the keywords that identify your site to some search engines. Notice the great variety of keywords used by this site. Most of them are common to many sites. It's not so much a case of trying to be different but of giving the people what they want. The trick is to pick words that match what your audience is looking for (note the word "free"), which explains why a Web search can lead to some very strange results indeed. META NAME="Keywords" CONTENT=" SHOPPING, JOB BANK, Sign Up!, Find-A-Job, Post-A-Job, CLASSIFIEDS, Search Ads, Place Ad, Change Ad, Delete Ad, Cool Notify, Hot List, DIRECTORIES, ActiveX, ASP, C/C++, CGI, Databases, Emerging Tech, HTML/DHTML, Intranets, Java, JavaScript, Middleware, Perl, Visual Basic, XML, What's Cool, What's New, Japanese Pages, REFERENCE, Online Reference Library, LEARNING CENTER, Course Catalog, Tutorials, Experts Q&A, JOURNAL, Tech Focus, Tech Workshop, Staff Picks, Users' Choice, Profiles, NEWS CENTRAL, Archive, DOWNLOADS, Free Graphics, Free Scripts, COMMUNITY, Discussions, J.D.A., Whos Who, CALENDAR, Online Events, Industry Events, Conferences, ABOUT US, Who We Are, What We Do, News About Us, Advertising Info, Vendor Info , Job Openings, Awards, FAQs, email, highlights, developers, Current issues"> B.11.3 Metatags Example (Part 3)
This tag describes your site and your purpose. When users do a Web search the description is what the search engine retrieves and prints (together with the title) in the search results. <META NAME="description" CONTENT=" myownwebpage.com is the leading online service for novice Web page developers. It includes So Help Me Mama, the unofficial and utterly useless directory for Java, as well as news, information, tutorials, and directories for other Internet technologies including ActiveX, JavaScript, Perl, VRML, Java Beans, push technologies, and other Internet and intranet technologies. myownwebpage.com is also the home of Really Cheap Software, the Unprofessional Developer's Store, where na ¢ve developers can purchase and download thousands of Web, authoring, and other development products at some of today's highest prices. "> B.11.4 Style Sheet Example
Originally, Web pages were all about information and not about formatting; certainly not about style. Discreet additions of color and subtle graphics were one thing but spinning, screaming, flashing page parts quite another. Not only was this not dignified, but the variety of colors and styles meant more work for the developer maintaining the Web site. As things got more complicated, style sheets were introduced as a way to create a look without so much hand tweaking. The site developer puts the requirements for color and text elements in one of three places, and these determine the look of the site. For special cases you can define the requirements inside a tag, such as the body tag. For a simple site with few pages to maintain you can define the requirements in the <HEAD> portion of each page. (See the example below.) For a large site or one that keeps changing its look you can define the requirements in a separate document. The cascading part of CSS (cascading style sheets) comes from the way style requirements are prioritized. Local (inside tag) requirements take precedence over document (inside the head portion) requirements, which take precedence over global (separate document) requirements. In this introductory overview we will use as an example the within-document form. NOTE: this is not as straightforward as old-fashioned HTML. It doesn't use the traditional start/stop tags except to identify the section as style. Because older browsers can't deal with style sheets, everything defining the style must be placed between comment tags and contained in a section surrounded by <STYLE> tags. Various elements are defined using an identifier and its qualifiers. You must put these attributes inside curly braces. A qualifier (such as font size or font family) is followed by a colon and a specifier (such as 24 pt or sans serif). A semicolon separates sets of attributes for each element you choose to define. The example shown uses standard elements and suggested attributes.
<HEAD> <TITLE>You call that a style sheet?</TITLE> <> <!-- BODY {background: #FFFFFF} H1 {font-size: 24pt; font-family: arial} H2 {font-size: 18pt; font-family: braggadocio} H3 {font size: 14pt; font-family: sans-serif} --> </STYLE> </HEAD> B.11.5 JavaScript Example
JavaScript adds action to a Web page. Its advantages are that it is not compiled and doesn't have to run on a server. Web developers use JavaScript to create small "events" such as pop-up windows (see the example below) and image rollovers. As with style sheets, older browsers can't handle JavaScript so it must be hidden inside comment tags. The example shown causes three pop-up windows to appear successively on a Web page when launched. Like other special effects on the Web, this sort of thing can be overdone.
<head> <title>First Exercise</title> <script language="JavaScript"> <!-- hide me alert("Here's a little script"); alert("Just to show"); alert("That I know JavaScript!"); // end hide --> </script> </head> |