CMW: Javascript

Here’s a more-or-less simple piece of Javascript that will protect your email address online.

Remember: Google spiders your sites, but so do lots of evil bots, trolling specifically for things like email addresses.

This Javascript generates your email address at the viewer’s browser, so it never appears in your code. Copy and paste this into your HTML document at the place you want the contact link to appear.

 

<script language=”JavaScript” class=”normal”>
<!– Hide this script from js-challenged browsers —

var name = “glenn”;
var domain = “gnorman.org”;
var first = “Contact”;
var last = “Glenn”;

document.write(‘<a href=\”mailto:’ + name + ‘@’ + domain + ‘\”>’);
document.write(first + ‘ ‘ + last + ‘</a>’);

//  Done Hiding –>
</script>

Be especially careful when you’re copying and pasting text with quotation marks.

CMW: Site Management

Creating and Maintaining a Website: Site Management

  • Register a Domain Name
    • Exercise: go to http://www.networksolutions.com/ and search for your domain name
  • Obtain Hosting
    • C-panel basics
  • File Transfer/Upload
  • Site Promotion
    • Search Engine Registration

CMW: Dreamweaver

Creating and Maintaining a WebsiteDreamweaver: Dreamweaver

  • The site in Dreamweaver
  • Dreamweaver tools for site management, FTP, scripting, CSS etc.
  • Other WYSIWYG tools

CMW: External Stylesheets

Creating and Maintaining a Website: CSS: Using Style Sheets

Creating an External Stylesheet

A linked, or external, stylesheet is often the first line of formatting in a CSS strategy.  Linked stylesheets permit you to define style rules for multiple pages in your website.  The result is a centralized location for style information that can easily be modified or even replaced. The file takes a .css extension, and links to each page in its scope using the following syntax:

<link rel=”stylesheet” type=”text/css” href=”path_to_file.css” />

Exercise 1: Create a Stylesheet

  • Open a new Notepad or Text Wrangler window
  • Create a style rule as follows:

p{
font-weight: bold;
color: blue;
}

  • Save the file in your site root as style1.css

Exercise 2: Add an External Stylesheet to a Series of Webpages

  • Open index.html.
  • Immediately before the closing </head> tag, add the following code:

<link rel=”stylesheet” type=”text/css” href=”style1.css” />

  • Save and refresh index.html.
  • Open about.html and contact.html.
  • Immediately before the closing head tag, add the following code:

<link rel=”stylesheet” type=”text/css” href=”style.css” />

  • Save and view about.html and contact.html.

 

CMW: CSS

Creating and Maintaining a Website: Cascading Style Sheets

CSS is a rule-based language that applies styling to your HTML elements. You write a rule in CSS that selects various groups of elements and modify the properties of those elements. CSS can modify properties such as text color, background color, width, border thickness, font-size and more.

W3Schools has an excellent reference and lessons at
http://www.w3schools.com/css/

There is also a very nice one-page guide at
http://www.whoishostingthis.com/resources/css3/

CSS offers:

  • Consistency:
    elements defined in a stylesheet will look the same from page to page
  • Simplicity:
    changes to an element in a page or site can be made from a central location and will propagate throughout the site
  • Flexibility:
    cascading styles allow you to define exceptions to style rules when necessary, so you’re not stuck with a style that’s inappropriate for the purpose
  • Accessibility:
    users of all abilities and levels can access pages formatted with CSS, whereas HTML formats can cause serious accessibility problems

CSS Syntax

A CSS rule looks like this:

selector {
property1: value;
property2: value;
property3:value;
}

The selector identifies the HTML elements to which the rule will apply. It could name an element such as <body> or use a class or an ID. There are other more complex selectors as well.

The curly braces contain the declaration block.

The property/value pairs are separated by semi-colons.

Here’s a specific example

p {
font-size: 2em;
font-family: Arial, Helvetica, sans-serif;
color: red;
border: 2px solid blue;
}

Unique Identifiers

Unique identifiers are page elements that occur once in an HTML document.  Typically, these elements are marked up by a standard HTML tag, which is in turn modified by the ID attribute.  An example might be a <div> tag, designated to contain unique information, such as a banner or footer.  Such a series of elements might include:

<h1 id=”headline”>…</h1>
<p id=”introduction”>…</p>
<div id=”footer”>…</div>

ID names can include numbers, but must begin with letters.  No unique identifier should repeat during the course of a single web document. (That’s why they’re unique!)

Classes

Classes are designators that permit the developer to apply style rules to multiple selectors throughout a document.  For example, you might use a class definition to create blue, bold, italic text, and then apply that class to a <p>, a <div>, and a <h1>.  Respectively, these might read:

<p class=”myclass”>. . . .</p>
<div class=”myclass”>. . .</div>
<h1 class=”myclass”>. . . </h1>

Pseudo-Classes

Pseudo-classes are rules that apply to certain selectors only in given situations or when a tag is in a certain state.  The most common set of pseudo-classes pertains to the anchor (<a>) tag.  The <a> tag takes four states:

:link (effective when the anchor is an unvisited link)
:visited (effective when the link in question has been visited)
:hover (effective when the mouse hovers over the link)
:active (effective when the link is active, as when the mouse is down)

When writing CSS rules for pseudo-classes with anchors, put them in the order shown in your stylesheet.
Pseudo-classes may be used in conjunction with unique identifiers, standard classes, or simple tags.

CMW: Splitting the Page

Creating and Maintaining a Website: Splitting Up the Page

Follow the directions in the book on pages 57 – 62.

Additional HTML tags

<blockquote>
<p>Blockquote: this is blockquoted text</p>
</blockquote>

Cite

<cite>Cite</cite>

<Em> and <strong>
vs.
<i> and <b>

<br>
vs.
<p>

CMW: Using divs

Creating and Maintaining a Website: Using divs

Open html2-code > chapter2 > web_site_files > 06_adding_structure_with_divs > index.html.

Save this file to your root folder as index.html. You must also save the image divers-circle.jpg to your root folder. Preview!

Here’s an example of what the tags look like:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Example of the div element</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<p>This is yet another paragraph.</p>
<p>And just one more paragraph.</p>

<div>This is a div.</div>
<div>The content of each div appears on a new line.</div>
<div>But unlike paragraphs, there is no additional padding.</div>
<div>A div is a generic block-level container.</div>
</body>

</html>

 

CMW: Lists

Creating and Maintaining a Website: Lists

Make a list. Using this example from the code archive, modify your index.html page to use lists like the ones below.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<title>Lists – an introduction</title>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″/>
</head>
<body>
<h1>Lists – an introduction </h1>
<p>Here’s a paragraph. A lovely, concise little paragraph.</p>
<p>Here comes another one, followed by a subheading.</p>
<h2>A subheading here</h2>
<p>And now for a list or two:</p>
<ul>
<li>This is a bulleted list</li>
<li>No order applied</li>
<li>Just a bunch of points we want to make</li>
</ul>
<p>And here’s an ordered list:</p>
<ol>
<li>This is the first item</li>
<li>Followed by this one</li>
<li>And one more for luck</li>
</ol>
</body>
</html>