Butterfly link to home page
EDT 555 Advanced Web Design: Tips & Tricks

HTML 

   

Using the <div> tag

The <div> tag, which stands for division, acts as a paragraph break like the <p> tag, because it is defining a logical division in the Web page. It determines the alignment of that section of your page. The <div> tag gives you the ability to name certain sections of your documents so that you can affect them with style sheets. The primary attributes of the <div> tag are align (left, center, right, and justify), style, and name.

How to use title attributes

You can use the TITLEattribute for many page elements, such as links, tables, an individual table rows. Title attributes are more versatile than the ALT attribute, they improve Web page accessibility, they are read as regular page content by many search engine spiders. Example code is as follows:

   <a href="edt555tips.htm" title="Learn Web design tips & tricks - 1">Page 1</a>

Mouseover the following links to see the title attribute associated with each link:

Home | Contact Us | Links

Mouseover the red text "attribute" above to see the title attribute used to create a popup definition.

Tip: Use a null link (an undesignated link) for an element you want to appear as a link:
   <a href="javascript: void(0)">attribute</a>

Tip: Insert a nonbreaking space (&nbsp;) before and after the title text to create a left and right margin:

   <a href="news.htm" title="&nbsp;Read about Internet trends, software, and
   more&nbsp;">News</a>

Tip: Keep title length to 60 pixels to accommodate Mozilla browsers.

How to create a stationary background image on a Web page

The stationary butterfly image on this page results from specifying a style in the BODY tag:

<body background="butterfly2.jpg" style="background-repeat: no-repeat; background-position: top right;
background-attachment: fixed"
>

The position of the image can be changed by altering the "background-position" portion of the style. The following positions can be used: top left, top center, top right, center left, center center, center right, bottom left, bottom center, bottom right.

Inserting meta tags & page titles in web pages

Insert meta tags in FrontPage: Insert meta tags: Open the htm page. Right-click on the page. Select Page Properties… In the Page description box, Type in a meaningful description of the web page. In the Keywords box, type in keywords (separated by commas) that are descriptive of the web page.

Insert page title in FrontPage: Right-click on the page. Select Page Properties… Type in the Title of the web page in the Title text box.

Insert page title in Dreamweaver: Open the htm page. Click the Page Properties button in the Properties Inspector. Select Category – Title/Encoding. Type the page title in the Title text box.

Insert meta tags in Dreamweaver: Using the top menu, select Insert – HTML – Head Tags – Keywords. Then type the keywords (separated by commas) in the text box. Repeat this process using Insert – HTML – Head Tags – Description.

Note: You also can manually insert a meta tag for the author of the web page: <meta name="Author" content="name">

How to use anchors

Page anchors are used to specify locations to link to. Anchors allow visitors to jump to a specific place in the current page or to jump to a specific place on another page. Anchors begin with the <A> tag and end with the </A> tag.

For example, to create an anchor in
Dreamweaver that will allow the Web page user to click a link (placed at the bottom of the page) called "top of page" in order to return to the top of the page without scrolling:

  1. Place the cursor at the top of the page; then click the Named Anchor icon in the toolbar or from the top menu, select Insert > Named Anchor.

  2. From the Named Anchor window, type "top" in the Anchor name text box, and click OK.

  3. Type "go to top" at the end of the page, highlight that text.

  4. In the Link text box of the Property inspector, type a number sign (#) and the name of the anchor ("top".

In FrontPage an anchor is called a "bookmark." The same example is done the following way:

  1. Place the cursor at the top of the page; then from the top menu, select Insert > Bookmark.

  2. From the Bookmark window, type "top" in the Bookmark name text box and click OK.

  3. Type "go to top" at the end of the page, highlight that text, and click the Insert Hyperlink icon in the toolbar or from the top menu select Insert > Hyperlink.

  4. From the Insert Hyperlink window, click the Bookmark button, click the "top" bookmark, and click OK, OK.

 

News  HTML  Dreamweaver  FrontPage  Photoshop Elements  Style sheets  JavaScript  Powerpoints  Misc