04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks

Save this PDF as:
 WORD  PNG  TXT  JPG

Size: px
Start display at page:

Download "04 Links & Images. 1 The Anchor Tag. 1.1 Hyperlinks"

Transcription

1 One of the greatest strengths of Hypertext Markup Language is hypertext the ability to link documents together. The World Wide Web itself consists of millions of html documents all linked together via hypertext. A good web site designer should be able to use hyperlinks to make it easy for visitors to not only move around their site easily, but to also get to related sites. The key is to enable people to get to what they want as quickly and easily as possible. Hyperlinks are defined in html using the <A> (anchor tag) and must always have a start and end tag as described in the next section. 1 The Anchor Tag 1.1 Hyperlinks The most common use for the anchor tag is to provide a link to another document. This is done using an anchor tag with a hyperlink reference attribute, as shown below. <A HREF= filename.html >text for the link</a> E.g. If you wanted the text see our product list to be used as a link to a document called product.html you would do this with the following line of html: <A HREF= product.html >see our product list</a> Most browsers display hyperlink text (the text between the closing and ending A tag) as underlined text displayed in the colour specified in the document s BODY tag. Moving the mouse pointer over a hyperlink will change the shape of the pointer to a pointing hand. Clicking the text will make the browser load the document the link points to. Steve O Neil 2005 Page 1 of 17

2 1.2 Relative vs absolute links There are two types of hyperlinks you can use in your html - relative and absolute. An absolute hyperlink will give the complete address of a document. A relative hyperlink will give the address of the destination document in relation to the current location. In most cases, a relative link will only give the name of a file that s in the same location as the file currently being edited. E.g. If two documents were in the same location you may use a relative reference such as <A HREF= index.html >main page</a> If they were in different locations (such as a link to another site) you would need to use an absolute reference such as <A HREF= >someone else s page</a> Tip Always save your main page as index.html. If an address that goes to a directory without specifying a filename is entered into a browser, the browser will look for a file in that directory called index.html and load it. So if someone tries to go to their web browser will load the document links It is often useful in an html document to create a link to an address. Doing this means that when someone clicks the link, their program will open, ready to send an to that address. To create an link, you use a regular hyperlink tag. For the link location, put MAILTO: followed by the address. E.g. <A HREF= >send me an </a>. It is a common practice to make the address itself into an link. E.g. If you wanted the text to appear on your page as a link to the address it describes, you could use the following HTML. <A HREF= Steve O Neil 2005 Page 2 of 17

3 Exercise 7 Create links to other pages and links 1 Open the file index.html. We will create a navigation section with links that can be used to get to other pages in the site. The navigation links will go along the top of the page similar to the links shown below. Note the vertical lines ( ) that are used to separate each link so it is easy for users to tell them apart. If you can t find it on your keyboard you can get it by holding down [Shift] and pressing \. (Note that on most keyboards looks like ) Home About Us Upcoming Events Who's Who Contacts Links 2 Between the body and the main heading, insert the following html. This should be after the <BODY> tag and before the <H1> tag so that it will appear at the top of the page above the heading. Remember the at the end of each line. Put a blank space before and after each one. <P ALIGN="center"> <A HREF="index.html">Home</A> <A HREF="about.html">About Us</A> <A HREF="events.html">Upcoming Events</A> <A HREF="who.html">Who's Who</A> <A HREF="contacts.html">Contacts</A> <A HREF="links.html">Links</A> </P> 3 Find the text that says If you have any questions about us, call on (08) We will replace the phone number with an link. Change it to If you have any questions about us, <A us an </a> 5 Find the text that says Take a look around and find out about our club. 6 We will turn the text about our club into a link to about.html by replacing it with the HTML below. <A HREF="about.html">about our club</a> 7 Save and preview the document. It should look similar to the one below. 8 Open the file contacts.html and make the address on that page into a MAILTO link. Steve O Neil 2005 Page 3 of 17

4 1.4 Bookmark links It is often useful to link to a different part of the same document or to link to a specific location on a different document. It is especially useful to do this when you want an index at the top of a long document so people can skip to different parts in the document. Eg. Take a look at the news items page on the left. There are headings for each month on this long page and a user might want to go to a certain month such as April without having to scroll through the whole page. This can be done using the NAME attribute of the anchor tag. Firstly you need to specify the destination for the link. You would do this by going to the April heading and putting in the following HTML. E.g. <A NAME= april ></A> It is not essential to have any text inside the A tag although in this instance you could put the tag around the text in the April heading. E.g. <H2><A NAME= april >April</A></H2> You can then link to it by using a regular anchor tag, with the link name, following a #, as the link location. E.g. <A HREF= #april >See the news for April</A> Note that the names you give each location are case sensitive. I.e. uppercase and lowercase letters do make a difference. To link to a specific location in another document, you first need to make sure that the point you want to link to has an <A NAME= ></A> tag. Then you can link to it as normal, with the name of the bookmark at the end of the name of the document. E.g. <A HREF= news.html#april >Link to the external destination</a> Tip If you use bookmark links to allow visitors to your site to go to different parts of a long document, it is a good idea to provide back to top links at regular intervals. You can do this by naming a location at the top of the document, and then placing links to that document at regular intervals down the page. Steve O Neil 2005 Page 4 of 17

5 Exercise 8 Create internal links within a document In this exercise we will work with a file called links.html. This contains a list of links to other sites in several categories. Since the entire list is quite long, we will put a small contents section up the top. This will allow users to use a link to go straight down to the section they re after. 1 Open the document called links.html 2 Have a look at the html and preview it in your browser The first thing we need to do is name the destinations for the links. We will use the category headings as the destinations. 3 In your HTML editor find the following text in the HTML <H3 ALIGN="center">AFL Clubs</H3> This is the first category heading. We will mark this as the destination for a link by giving it a name (afl) that we will link to later on. Add an anchor name (<A NAME= >) so it is similar to the HTML below. <H3 ALIGN="center"><A NAME="afl">AFL Clubs</A></H3> 4 We will now do the same thing for the WAFLs Clubs and SANFL Clubs headings. Further down the page. Give them the following names. WAFL Clubs (wafl) and SANFL Clubs (sanfl) 5 We will now put a contents section below the Links To Other Sites heading and above the AFL Clubs heading. I.e. On the line after <H1 and before <H3. The links in the contents section will point at the names we just set up. 6 In that position, insert the following html <P><A HREF="#afl">AFL Clubs</A> <BR><A HREF="#wafl">WAFL Clubs</A> <BR><A HREF="#sanfl">SANFL Clubs</A></P> 7 Save and preview the document test the links in the contents section. We will finish our site navigation by taking the links we put on our main page and copying them to the top of every other page. We will also take the information from the bottom of the main page and copy it to the bottom of every other page. 8 Use copy and paste to copy the navigation section from the top of the index.html page to the same position in all the other pages. (about, contacts, events, links, who) 9 Use copy and paste to copy the information at the bottom of the index.html page to the same position in all the other pages (everything from the horizontal line downwards). 10 Once all documents are saved, preview one of them and use the navigation area at the top of the page to look at each one. 11 On your links.html page, put the following line below the <BODY> tag. <A NAME="top"></A> At the end of each section of links (after each </DL> tag), add a back to top link with the following line of HTML <P><A HREF="#top">Back to top</a> Steve O Neil 2005 Page 5 of 17

6 2 The Image Tag It is rare these days to find a website without pictures being used in some form. Images are inserted in html with the IMG tag. Since the tag is specifying the point where the image will appear, there is no close tag to indicate the end of the image. The most basic image tag will specify the name (source SRC) of the image file to be inserted. Like hyperlinks, this file reference may be relative or absolute. E.g. <IMG SRC= picture.gif > Images are commonly used as hyperlinks instead of text. A picture is worth a thousand words so a picture can often indicate the purpose of a link better than a word. Using images can also make it possible to use an image showing special text effects (such as shadows) that are impossible with html text. To make a picture into a link, you insert your image tag inside your anchor tag. E.g. <A HREF= link.html ><IMG SRC= picture.gif ></A> There are quite a few attributes that an image tag can have. These are outlined below. 2.1 Image tag attributes HEIGHT WIDTH HSPACE VSPACE ALT BORDER ALIGN E.g. These two attributes specify the size of the image in pixels. If they are not included, the image will display at its normal size. It is usually a good idea to include these attributes for two reasons. 1 The browser can load the picture quicker when it already knows its exact size. 2 The browser will make room for the loading picture rather than shifting everything down the page as each image loads. These attributes specify the amount of horizontal and vertical space around the picture in pixel measurements. Specifies the text that will display while the picture is loading or if it doesn t load. If the picture s important, make sure you include this. Some people don t have browsers that show images and some turn image loading off to speed up their browsing. Recent browsers use the alternate text as a pop-up when the mouse is moved over the image. Specifies the width (in pixels) of the picture s border. Set this to 0 if the picture is a hyper-link; otherwise a border the colour of your links will appear around the image. TOP Aligns the top of the picture with the top of the current line of text MIDDLE Aligns the middle of the picture with the middle of the current line of text BOTTOM LEFT RIGHT Aligns the bottom of the picture with the bottom of the current line of text Aligns the picture to the left of text and will make text wrap around the picture Aligns the picture to the right of text and will make text wrap around the picture <IMG SRC= picture.gif ALT= Photo HEIGHT= 50 WIDTH= 50 BORDER= 0 ALIGN= left > Steve O Neil 2005 Page 6 of 17

7 2.2 Image types There are two image formats commonly used throughout the Internet. These are GIF (Graphical Interchange Format) and JPEG (Joint Photographic Experts Group). The reason they are both so widely used is because they are both formats that can compress an image s file size without too much loss in image quality. These smaller file sizes make them ideal for use on the Internet GIF Images Graphic Interchange Format Developed by CompuServe. Standard gifs are usually GIF89a format. Animated gifs are GIF89b format. GIF87a standard is still sometimes used but doesn t support transparent areas. File extension -.gif JPEG Images Joint Photographic Expert Group Developed by the group the format was named after. File extension -.jpg.jpeg or.jpe GIF vs JPEG Differences GIF JPEG Best for drawings, logos, graphs, text Best for scanned photos, artwork No more than 256 colours Approximately 16.7 million colours Lossless format (no loss in quality) Lossy format (loss in quality when saved) Interlaced Progressive rendering Transparent areas Animation PNG Images Portable Network Graphic Combines the features of GIF and JPEG in to one format. But isn t very commonly used. File extension.png 2.3 Tips for Using Graphics in Websites Remember that graphics may look different on different screen sizes. Don t make the picture any bigger than you absolutely have to. Re-size graphics in a graphics program instead of doing it in the web page. Provide alternate text for the image (Use the ALT attribute in the image tag). Save pictures in the right place. Usually best to save them in the same folder as your website files. Make filenames descriptive. Avoid spaces in filenames. Use an underscore _ instead. Keep filenames lowercase. Avoid capital letters. Steve O Neil 2005 Page 7 of 17

8 2.4 Preparing images The golden rule when it comes to preparing images for use in web pages is; don t make the images any bigger than you need to. It s also best to avoid using too many images. Images can do a lot to enhance a page s appearance but too many can make it painfully slow to download. Images take a lot longer to download than text and it can be surprising how much difference there can be in download times for different sized images. You can change the size of an image using the HEIGHT & WIDTH attributes in the image tag but avoid doing that. Get the image to the size you want before you save it and use it in your web page. Most browsers don t do a very good job of re-sizing images and they will end up looking very poor. Good graphic design skills are extremely valuable for a web designer. Try to become familiar with a good quality image-editing program such as Photoshop or Paint Shop Pro. If you are using several images with a bit of text after each one then you may need to take steps to avoid stepping your images. E.g. Text Text Text More text This happens when the text you want to place next to the picture is not enough to carry past the bottom of the picture. When you add the next picture, instead of placing it under the first one, it will be placed beside the existing one. To prevent this problem, you can use the CLEAR attribute of the BR tag. This will force everything after that point to begin on a completely new line. The tag should be <BR CLEAR= all > This should make the new picture begin on a new line like the example below. Text Text Text More text Steve O Neil 2005 Page 8 of 17

9 Exercise 9 Inserting images We are now going to insert some pictures in our documents and replace our text navigation bar with a graphical navigation bar. HTML that has been modified or added is highlighted with bold text. 1 Make sure index.html is open for editing 2 Find and delete the following line near the top of the document <H1 ALIGN="center">Cannington Cougars Football Club Website</H1> 3 In its place, insert and centre the picture called heading.gif with Cannington Cougars Football Club as the alternate text. The resulting html should look like this: <P ALIGN= center > <IMG SRC="heading.gif" ALT="Cannington Cougars Football Club" WIDTH= 300 HEIGHT= 100 BORDER= 0 ></P> 4 Now for the navigation bar. In each of the hyperlinks, we ll replace the text with a picture. We ll also remove the vertical lines ( ) between each link. The html should end up looking like this: <P ALIGN= center > <A HREF="index.html"> <IMG SRC="icon_home.gif" ALT="Home" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="about.html"> <IMG SRC="icon_about.gif" ALT="About Us" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="events.html"> <IMG SRC="icon_events.gif" ALT="Upcoming Events" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="who.html"> <IMG SRC="icon_who.gif" ALT="Who's Who" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="contacts.html"> <IMG SRC="icon_contact.gif" ALT="Contacts" WIDTH="95" HEIGHT="70" BORDER="0"></A> <A HREF="links.html"> <IMG SRC="icon_links.gif" ALT="Links" WIDTH="95" HEIGHT="70" BORDER="0"></A> </P> 5 Now copy that html and paste it in all the other pages, just below the <BODY> tag. This should give us a consistent navigation bar on each page and make it easy to get from one page to another. (The other pages are about, contacts, events, links, who) 6 When all your documents are saved, preview index.html and see the changes you ve made. Your site should look similar to the picture on the next page. Steve O Neil 2005 Page 9 of 17

10 2.5 Finished Site Steve O Neil 2005 Page 10 of 17

11 3 Browser Specific Tags The two main web browsers, Netscape s Navigator and Microsoft s Internet Explorer have both introduced new html tags as features of their new browsers. These extra tags that are outside the HTML specification are often referred to as browser extensions. Many of the current standards have resulted from their additions to html. E.g. The latest standard, HTML 4 includes frames an html technique introduced by Netscape when they released Navigator version 2. Although Netscape and Microsoft are usually quick to make their browser s compatible with the other browser s innovative features, some of these additions are still only used by the browser they originated with. A few of these are mentioned below. Because these html tags only work in a particular browser, many web site designers are hesitant to use them. 3.1 Netscape Navigator One of the Netscape s first additions to html was the BLINK tag. Any text that was formatted using the BLINK tag would blink on and off while the page was being displayed. When it was first introduced you could hardly visit a web site without seeing blinking text somewhere but the novelty has since worn off. 3.2 Internet Explorer One of Microsoft s early additions to html was the MARQUEE tag. This could be used to make text scroll sideways across the screen marquee style. It can be used effectively but lack of support in other browsers has meant that this tag is seldom used. Exercise 10 A look at browser extensions 1 In your editor, open the file index2.html. This file is similar to the index.html file you have been working on except that it has some browser-specific tags added. 2 Look for the line that contains the text Top of the table whenever we're able. Notice the <BLINK> tag and the <MARQUEE> tag (the marquee tag has several additional attributes). The <BLINK> tag will be used by Navigator and ignored by Internet Explorer, while the <MARQUEE> tag will be used by Internet Explorer and ignored by Navigator. 3 Preview the file in Internet Explorer. Notice the Marquee effect on the text. 4 Preview the file in Navigator. Now instead of the scrolling marquee text you ll see blinking text. Steve O Neil 2005 Page 11 of 17

12 Links and Images Revision Questions 1. If you had a line <A HREF= news.html >See our latest news</a> which text would show in the browser for the link? 2. What image type would usually be best for a scanned photo? 3. How would you make text wrap around an image? Steve O Neil 2005 Page 12 of 17

13 4 Using Image Maps for Navigation An image map is a technique in HTML that allows a single image to be associated with more than one hyperlink. Eg if you had a picture that was a map of Australia, a visitor to your site could click on a state in the map to be taken to a page for that state. This is because each part of the image (each state) is associated with a different hyperlink. Another benefit of using an image map is that it can speed up the loading of the page. The more files a browser has to load, the more times the browser will have to send requests for files. This takes time. Even if separate graphics may add up to a smaller file size than a single large graphic, the single graphic will usually load quicker. There are two types of image maps used in HTML. Server side image maps refer to another file on the server, so that if a person clicks on the image, the browser refers to that file for the location the link needs to go to. Client side image maps have the information about the image s hyperlinks contained in the HTML of the same page. Since server side image maps are becoming less common, in these exercises we will be covering client side image maps. 4.1 Image Map HTML The information for an image map is contained within the <MAP> </MAP> tags. The <MAP> tag itself has only one attribute. The NAME= attribute, which identifies the map so that it can be associated with the appropriate image. Unlike most tag attributes in HTML, the name of an image map is case sensitive. Within the map tags itself, you would put the information about each of the hyperlinks within the image. These clickable areas are commonly known as hotspots and are defined with an <AREA> tag. The attributes of an <AREA> tag are listed below. ALT= COORDS= HREF= NOHREF SHAPE= Similar to the ALT= attribute in the <IMAGE> tag. This determines the text that will be used if the image isn t displayed. Provides the coordinates for a hotspot within an image. These coordinates are set in pixels and specify the distance from the top of the picture and the left of the picture. In circle hotspots it is also necessary to specify the radius of the hotspot. The precise coordinates can normally be obtained from your graphics program. E.g. in Photoshop, move your mouse to a point on the image and your info palette will show you the x/y coordinates of that point. Similar to the HREF= attribute of the <A> tag. This specifies the destination of the hotspot s hyperlink. When this attribute is used, it means that this hotspot will have no hyperlink associated with it. It is useful for deliberately creating gaps in other hotspots. Any part of a hotspot being covered by a NOHREF hotspot will be non-clickable. There are three types of hotspots, which can be chosen with this attribute. They are rectangle, circle and polygon. For a rectangle hotspot, you need to specify the x/y coordinates for the top left corner and the bottom right corner. For a circle hotspot, you need to specify the x/y coordinates for the centre of the circle and the radius of the circle. For a polygon hotspot you need to specify the x/y coordinates for each point in the polygon shape. Steve O Neil 2005 Page 13 of 17

14 Once you have specified all of the information for the image map, you then need to insert the image itself in the normal way with an <IMG> tag. Within the image tag you will need to add a USEMAP= attribute. The USEMAP attribute will equal the name of your map that you specified with the <MAP> tag. Below is an example of the HTML for an image map, along with the accompanying image. Notice that the Image map has three hotspots a rectangle, a circle and a polygon. <MAP NAME="MainMap"> <AREA SHAPE="polygon" COORDS="201, 106, 224, 141, 268, 133, 275, 93, 247, 54, 209, 66" HREF="poly.html" ALT="Poly Page"> <AREA SHAPE="rect" COORDS="60, 115, 120, 169" HREF="rect.html" ALT="Rectangle Page"> <AREA SHAPE="circle" COORDS="67, 63, 28" HREF="circle.html" ALT="Circle Page"> </MAP> <IMG SRC="pics/imagemap.gif" USEMAP="#MainMap" WIDTH="300" HEIGHT="250" BORDER="0"> This would create an image with hotspots similar to the following diagram. Compare the notes with the HTML above. Circle area with the centre 67 pixels from the left, 63 from the top and a radius of 28 This area has a corner that is 201 pixels from the left and 106 from the top, another corner that is 224 from the left and 141 from the top etc. Square area with the top left corner 60 pixels from the left and 115 from the top. The bottom right corner is 120 from the left and 169 from the top Steve O Neil 2005 Page 14 of 17

15 4.2 Tips for using image maps ALT Attribute It is a good idea to include the ALT attribute for your image map hotspots since this will provide non-graphical browsers with text in place of the hotspots Alternate Navigation Don t rely solely on an image map for your navigation. Many browsers (including text and voice based browsers) are unable to recognise image maps so an alternate form of navigation should be provided. Having a basic text based navigation bar at the bottom of the page is a good idea. This can be placed in a small text size so that it will be inconspicuous in most browsers. People using non-graphical browsers can then use that to get around your site instead of the navigation bar. E.g. Home Upcoming Events Who s Who Contact Us Links You don t have to worry about it not being very visible in the older browsers it s intended for. If a browser s old enough that it doesn t recognise image maps, chances are it also won t recognise the FONT tag you use to make the text navigation small. Steve O Neil 2005 Page 15 of 17

16 Exercise 11 Creating an Image Map We will now create an image map to navigate to different areas of a website 1 Open the file imagemap.html in your HTML editor. Look at the HTML and preview the document. We create an image map using the second image on the page. 2 Place the following HTML above that image. This is the HTML to define the hotspots in our image. Notice that the name of our image map is mainmap. Remember that these names are case sensitive so normally we would keep it lowercase. <MAP NAME="mainmap"> <AREA ALT="About Us" COORDS="1,18,83,96" HREF="mapabout.html"> <AREA ALT="Upcoming Events" COORDS="3,239,85,126" HREF="mapevents.html"> <AREA ALT="Links" SHAPE="CIRCLE" COORDS="250,173,47" HREF="maplinks.html"> <AREA ALT="Contacts" COORDS="219,98,299,21" HREF="mapcontacts.html"> <AREA ALT="Who's Who" SHAPE="poly" COORDS="196,248,116,245,106,177,152,143,185,182" HREF="mapwho.html"> </MAP> 4. Now we need to change the image tag so that it will refer to our image map. We will do this by adding the USEMAP attribute as shown below. The Bold text indicates what has been added. <IMG SRC="imagemap.gif" USEMAP="#mainmap" ALT="Image Map" WIDTH=300 HEIGHT=250 BORDER=0> 5. Save and preview the file. Test the links in your image. Steve O Neil 2005 Page 16 of 17

17 Image Map Revision Questions 1. What are the two types of image maps? 2. What three types of hotspot shapes can be included in an image map? 3. What are some ways you could accommodate browsers that won t show an image map? 4. List of some examples of places where you would use an image map? Steve O Neil 2005 Page 17 of 17

Aligns the top of the picture with the top of the current line of text MIDDLE

Aligns the top of the picture with the top of the current line of text MIDDLE 2 The Image Tag It is rare these days to find a website without pictures being used in some form. Images are inserted in html with the IMG tag. Since the tag is specifying the point where the image will

More information

HTML Notes. How HTML is structured. Sections of an HTML Document. Paired tags. Tag attributes. Page attributes

HTML Notes. How HTML is structured. Sections of an HTML Document. Paired tags. Tag attributes. Page attributes HTML Notes How HTML is structured HTML consists of standard ASCI (American Standard Character Interchange) text surrounded by html tags. Tags are instructions which tell a web browser how to display a

More information

Microsoft FrontPage. 1. Introduction

Microsoft FrontPage. 1. Introduction 1. Introduction Microsoft FrontPage is a full featured HTML editor. A Web site is a group of HTML pages and graphics that are interconnected with hyperlinks. A FrontPage Web site is a site created in FrontPage.

More information

Caldes CM12: Content Management Software Introduction v1.9

Caldes CM12: Content Management Software Introduction v1.9 Caldes CM12: Content Management Software Introduction v1.9 Enterprise Version: If you are using Express, please contact us. Background Information This manual assumes that you have some basic knowledge

More information

06 Frames. 1 Description of Frames. 1.1 The FRAMESET Tag

06 Frames. 1 Description of Frames. 1.1 The FRAMESET Tag 1 Description of Frames Netscape introduced frames when they released version 2 of their navigator browser, although various additions to frames have been made since then. Frames allow a web page to be

More information

Using Microsoft Word. Working With Objects

Using Microsoft Word. Working With Objects Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects

More information

Talking: Web. Web design is the hardest thing you will ever do in life. At least when you do it for the first time. Home Page. Talking: Resources

Talking: Web. Web design is the hardest thing you will ever do in life. At least when you do it for the first time. Home Page. Talking: Resources 1 Talking: Web Web design is the hardest thing you will ever do in life. At least when you do it for the first time. Home Page Yale: http://info.med.yale.edu/caim/manual/ Design for designers: http://www.wpdfd.com/

More information

Dreamweaver and Fireworks MX Integration Brian Hogan

Dreamweaver and Fireworks MX Integration Brian Hogan Dreamweaver and Fireworks MX Integration Brian Hogan This tutorial will take you through the necessary steps to create a template-based web site using Macromedia Dreamweaver and Macromedia Fireworks. The

More information

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images

HTML5 & CSS 8 th Edition. Chapter 3 Enhancing a Website with Links and Images HTML5 & CSS 8 th Edition Chapter 3 Enhancing a Website with Links and Images Chapter Objectives 1. Describe types of hyperlinks 2. Create relative links, absolute links, email links, and telephone links

More information

Depending on your role, this might mean adding and editing, for example, events, blog entries or news stories.

Depending on your role, this might mean adding and editing, for example, events, blog entries or news stories. website guide guide for adding and editing web content Introduction The MS Society website uses a content management system (CMS) called Drupal. As a contributor to the site, you ll receive training in

More information

Creating Web Pages with Microsoft FrontPage

Creating Web Pages with Microsoft FrontPage Creating Web Pages with Microsoft FrontPage 1. Page Properties 1.1 Basic page information Choose File Properties. Type the name of the Title of the page, for example Template. And then click OK. Short

More information

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers

07 Forms. 1 About Forms. 2 The FORM Tag. 1.1 Form Handlers 1 About Forms For a website to be successful, it is important to be able to get feedback from visitors to your site. This could be a request for information, general comments on your site or even a product

More information

TUTORIAL 4 Building a Navigation Bar with Fireworks

TUTORIAL 4 Building a Navigation Bar with Fireworks TUTORIAL 4 Building a Navigation Bar with Fireworks This tutorial shows you how to build a Macromedia Fireworks MX 2004 navigation bar that you can use on multiple pages of your website. A navigation bar

More information

WYSIWYG Manual Ironcities Stadt Kolbermoor 2012

WYSIWYG Manual Ironcities Stadt Kolbermoor 2012 WYSIWYG Manual Ironcities Stadt Kolbermoor 2012 WYSIWYG Editor Manual TinyMCE used on http://www.ironcities.net is a WYSIWYG (what you see is what you get) editor that allows users a familiar word-processing

More information

Quick Guide for Dreamweaver CC Basics April 2016 Training:

Quick Guide for Dreamweaver CC Basics April 2016 Training: Dreamweaver CC Basics When you look at a web page, you might wonder how it is made. To display a web page, your internet browser reads and interprets a special set of instructions. These instructions are

More information

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame...

Contents. Launching FrontPage... 3. Working with the FrontPage Interface... 3 View Options... 4 The Folders List... 5 The Page View Frame... Using Microsoft Office 2003 Introduction to FrontPage Handout INFORMATION TECHNOLOGY SERVICES California State University, Los Angeles Version 1.0 Fall 2005 Contents Launching FrontPage... 3 Working with

More information

Web Page Design Final Exam Review Page 1 of 7

Web Page Design Final Exam Review Page 1 of 7 Web Page Design Final Exam Review Page 1 of 7 Multiple Choice--Instructions: Circle the correct response. 1. Computers and networks allow people to. a. gather data and information b. analyze data and information

More information

Simple Edit Masterclass

Simple Edit Masterclass Squiz Australia Pty. Ltd. A 92 Jarrett Street, Leichhardt NSW 2040 P +61 2 8507 9900 F +61 2 8507 9988 W www.squiz.net Simple Edit Masterclass University of Western Sydney 20 July, 2010 AUSTRALIA UNITED

More information

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University

Web Design Basics. Cindy Royal, Ph.D. Associate Professor Texas State University Web Design Basics Cindy Royal, Ph.D. Associate Professor Texas State University HTML and CSS HTML stands for Hypertext Markup Language. It is the main language of the Web. While there are other languages

More information

How-to Guide: MIT DLC Drupal Cloud Theme

How-to Guide: MIT DLC Drupal Cloud Theme How-to Guide: MIT DLC Drupal Cloud Theme This guide will show you how to take your initial Drupal Cloud site... and turn it into something more like this, using the MIT DLC Drupal Cloud theme. See this

More information

Using Microsoft Word. Working With Objects

Using Microsoft Word. Working With Objects Using Microsoft Word Many Word documents will require elements that were created in programs other than Word, such as the picture to the right. Nontext elements in a document are referred to as Objects

More information

Microsoft Expression Web Quickstart Guide

Microsoft Expression Web Quickstart Guide Microsoft Expression Web Quickstart Guide Expression Web Quickstart Guide (20-Minute Training) Welcome to Expression Web. When you first launch the program, you ll find a number of task panes, toolbars,

More information

JISIS and Web Technologies

JISIS and Web Technologies 27 November 2012 Status: Draft Author: Jean-Claude Dauphin JISIS and Web Technologies I. Introduction This document does aspire to explain how J-ISIS is related to Web technologies and how to use J-ISIS

More information

Using Adobe Dreamweaver CS4 (10.0)

Using Adobe Dreamweaver CS4 (10.0) Getting Started Before you begin create a folder on your desktop called DreamweaverTraining This is where you will save your pages. Inside of the DreamweaverTraining folder, create another folder called

More information

COMMON CUSTOMIZATIONS

COMMON CUSTOMIZATIONS COMMON CUSTOMIZATIONS As always, if you have questions about any of these features, please contact us by e-mail at pposupport@museumsoftware.com or by phone at 1-800-562-6080. EDIT FOOTER TEXT Included

More information

Steps in Creating Web Pages

Steps in Creating Web Pages 5 M i n u t e W e b P a g e s - M o z i l l a 1 of 6 A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser.

More information

Introduction to XHTML. 2010, Robert K. Moniot 1

Introduction to XHTML. 2010, Robert K. Moniot 1 Chapter 4 Introduction to XHTML 2010, Robert K. Moniot 1 OBJECTIVES In this chapter, you will learn: Characteristics of XHTML vs. older HTML. How to write XHTML to create web pages: Controlling document

More information

ANATOMY OF A WEB PAGE...

ANATOMY OF A WEB PAGE... Web Design Contents INTRODUCTION... 4 WHAT YOU WILL LEARN... 4 ABOUT THE HOME AND LEARN WEB DESIGN SOFTWARE... 5 INSTALLING THE SOFTWARE... 6 WEB COURSE FILES... 6 ANATOMY OF A WEB PAGE... 7 WHAT IS A

More information

Hypercosm. Studio. www.hypercosm.com

Hypercosm. Studio. www.hypercosm.com Hypercosm Studio www.hypercosm.com Hypercosm Studio Guide 3 Revision: November 2005 Copyright 2005 Hypercosm LLC All rights reserved. Hypercosm, OMAR, Hypercosm 3D Player, and Hypercosm Studio are trademarks

More information

GUIDELINES FOR SCHOOL WEB PAGES

GUIDELINES FOR SCHOOL WEB PAGES GUIDELINES FOR SCHOOL WEB PAGES Introduction Mountain Home Public School District School web pages are public documents welcoming the outside world to our school and linking our students and staff to outside

More information

File types There are certain image file types that can be used in a web page. They are:

File types There are certain image file types that can be used in a web page. They are: Using Images in web design (Dreamweaver CC) In this document: Image file types for web pages Inserting an image Resizing an image in Dreamweaver CSS properties for image alignment and responsiveness nigelbuckner

More information

NJCU WEBSITE TRAINING MANUAL

NJCU WEBSITE TRAINING MANUAL NJCU WEBSITE TRAINING MANUAL Submit Support Requests to: http://web.njcu.edu/its/websupport/ (Login with your GothicNet Username and Password.) Table of Contents NJCU WEBSITE TRAINING: Content Contributors...

More information

HTML. Project 5. Creating an Image Map PROJECT #5

HTML. Project 5. Creating an Image Map PROJECT #5 HTML PROJECT #5 Project 5 Creating an Image Map poly One of the attributes of the tag, used to define a polygonal hotspot 2 Toolbox Part of the Paint window that displays tools used to edit or draw

More information

How to create pop-up menus

How to create pop-up menus How to create pop-up menus Pop-up menus are menus that are displayed in a browser when a site visitor moves the pointer over or clicks a trigger image. Items in a pop-up menu can have URL links attached

More information

Introduction to Web Design Curriculum Sample

Introduction to Web Design Curriculum Sample Introduction to Web Design Curriculum Sample Thank you for evaluating our curriculum pack for your school! We have assembled what we believe to be the finest collection of materials anywhere to teach basic

More information

Using Dreamweaver. 8 Dynamic HTML Menus. Using layers for page layout

Using Dreamweaver. 8 Dynamic HTML Menus. Using layers for page layout Using Dreamweaver 8 Dynamic HTML (DHTML) is a term that refers to websites that use a combination of HTML, scripting such as JavaScript, CSS and the Document Object Model (DOM). HTML and CSS are used to

More information

Frames. In this chapter

Frames. In this chapter Frames 2007 NOTES This article was originally published in 2003 as Chapter 12 of Learning Web Design, 2nd edition. Since the time of its publication, frames have become all but extinct, particularly for

More information

ACADEMIC TECHNOLOGY SUPPORT

ACADEMIC TECHNOLOGY SUPPORT ACADEMIC TECHNOLOGY SUPPORT Adobe Photoshop Introduction Part 1 (Basics- Image Manipulation) ats@etsu.edu 439-8611 www.etsu.edu/ats Table of Contents: Overview... 1 Objectives... 1 Basic Graphic Terminology...

More information

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint

Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint Instructions for Creating a Poster for Arts and Humanities Research Day Using PowerPoint While it is, of course, possible to create a Research Day poster using a graphics editing programme such as Adobe

More information

The Web Web page Links 16-3

The Web Web page Links 16-3 Chapter Goals Compare and contrast the Internet and the World Wide Web Describe general Web processing Write basic HTML documents Describe several specific HTML tags and their purposes 16-1 Chapter Goals

More information

Joomla! 2.5.x Training Manual

Joomla! 2.5.x Training Manual Joomla! 2.5.x Training Manual Joomla is an online content management system that keeps track of all content on your website including text, images, links, and documents. This manual includes several tutorials

More information

Basic tutorial for Dreamweaver CS5

Basic tutorial for Dreamweaver CS5 Basic tutorial for Dreamweaver CS5 Creating a New Website: When you first open up Dreamweaver, a welcome screen introduces the user to some basic options to start creating websites. If you re going to

More information

Welcome to the Drupal How to Guide for Business/Association Member

Welcome to the Drupal How to Guide for Business/Association Member www.webprophets.com.au PO Box 2007 St Kilda West Victoria Australia 3182 Phone +61 3 9534 1800 Fax +61 3 9534 1100 Email info@webprophets.com.au Web www.webprophets.com.au Welcome to the Drupal How to

More information

Dreamweaver - Formatting your page with CSS

Dreamweaver - Formatting your page with CSS Dreamweaver - Formatting your page with CSS Creating your first website Part 4: Formatting your page with CSS Now I ll show you how to format text on your page using cascading style sheets (CSS). Learn

More information

Creating and Editing a Web Page. Chapter 2 HTML

Creating and Editing a Web Page. Chapter 2 HTML Creating and Editing a Web Page Chapter 2 HTML Chapter Objectives Identify elements of a Web page Start Notepad and describe the Notepad window Enable word wrap in Notepad Enter the HTML tags Enter a centered

More information

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1

Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl. Web Design in Nvu Workbook 1 Inspiring Creative Fun Ysbrydoledig Creadigol Hwyl Web Design in Nvu Workbook 1 The demand for Web Development skills is at an all time high due to the growing demand for businesses and individuals to

More information

understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver

understand how image maps can enhance a design and make a site more interactive know how to create an image map easily with Dreamweaver LESSON 3: ADDING IMAGE MAPS, ANIMATION, AND FORMS CREATING AN IMAGE MAP OBJECTIVES By the end of this part of the lesson you will: understand how image maps can enhance a design and make a site more interactive

More information

Creating a Web Presentation

Creating a Web Presentation 9.1 LESSON 9 Creating a Web Presentation After completing this lesson, you will be able to: Create an agenda slide or home page. Create a hyperlink to a slide. Create a Web presentation with the AutoContent

More information

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver

Dreamweaver Introduction -- Creating Web Pages with Dreamweaver Dreamweaver Introduction -- Creating Web Pages with Dreamweaver This workshop covers the basics of web authoring with Dreamweaver. Learn how to create and format a webpage including creating tables, inserting

More information

Creating a website using Voice: Beginners Course. Participant course notes

Creating a website using Voice: Beginners Course. Participant course notes Creating a website using Voice: Beginners Course Topic Page number Introduction to Voice 2 Logging onto your website and setting passwords 4 Moving around your site 5 Adding and editing text 7 Adding an

More information

To familiarise University Web administration staff with the capabilities of the University CMS and also introduce concepts of Web marketing.

To familiarise University Web administration staff with the capabilities of the University CMS and also introduce concepts of Web marketing. Web Training Course: Web Editing - How to use the Content Management System (CMS). Version 1.0 Draft October 2006 Version 1.1 March 2007 Version 1.2 April 2007 Course Rationale: The University is currently

More information

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote

Client Admin Site Adding/Editing Content Under Site Builder/Site Navigation Tutorial by Commerce Promote SiteBuilder (Adding/Editing Content) Enable web pages on your website Add and format text and images Upload images Create Image Links Create Sub Levels Create Hyperlinks Upload Data files (ppt,xls,word

More information

IAS Web Development using Dreamweaver CS4

IAS Web Development using Dreamweaver CS4 IAS Web Development using Dreamweaver CS4 Information Technology Group Institute for Advanced Study Einstein Drive Princeton, NJ 08540 609 734 8044 * helpdesk@ias.edu Information Technology Group [2] Institute

More information

Computers Tools for an Information Age

Computers Tools for an Information Age Before You Start Writing Your Own Web Page Chapter 9 Using HTML or FrontPage This chapter offers beginning instruction in HyperText Markup Language (HTML) Microsoft FrontPage 2000. 1 2 Requirements Where

More information

Visual Elements and Graphics HTML

Visual Elements and Graphics HTML Visual Elements and Graphics HTML The Horizontal Rule Is used to visually separate areas of a page To create a horizontal rule, use the tag Horizontal rules are centered within their container element

More information

ADOBE Dreamweaver CS3 Basics

ADOBE Dreamweaver CS3 Basics ADOBE Dreamweaver CS3 Basics IT Center Training Email: training@health.ufl.edu Web Page: http://training.health.ufl.edu This page intentionally left blank 2 8/27/2008 Contents Before you start with Dreamweaver....

More information

Creating HTML authored webpages using a text editor

Creating HTML authored webpages using a text editor GRC 175 Assignment 1 Creating HTML authored webpages using a text editor Tasks: 1. Acquire web host space with ad free provider 2. Create an index webpage (index.html) 3. Create a class management webpage

More information

Adobe Dreamweaver CS4: Learning the Tools

Adobe Dreamweaver CS4: Learning the Tools Adobe Dreamweaver CS4: Learning the Tools Dreamweaver is an HTML (Hypertext Markup Language) editor, authoring tool, and Web site management tool. Dreamweaver is a WYSIWYG (what you see is what you get)

More information

Adobe Dreamweaver - Basic Web Page Tutorial

Adobe Dreamweaver - Basic Web Page Tutorial Adobe Dreamweaver - Basic Web Page Tutorial Window Elements While Dreamweaver can look very intimidating when it is first launched it is an easy program. Dreamweaver knows that your files must be organized

More information

Lions Clubs International e-district House Content Management System (CMS) Training Guide

Lions Clubs International e-district House Content Management System (CMS) Training Guide Lions Clubs International e-district House Content Management System (CMS) Training Guide All of the material contained in this guide is the exclusive property of Alkon Consulting Group, Inc. (Alkon).

More information

2. Click on Add content, then choose Page. 3. Here, we will want to enter in a short but fitting title for the page.

2. Click on Add content, then choose Page. 3. Here, we will want to enter in a short but fitting title for the page. Drupal 7 Content Editing Tutorial Note: If, at any time, you are unable to access a certain part of the site or do not see an option shown in the tutorial, please kindly ask your administrator to give

More information

Graphic Design Basics Tutorial

Graphic Design Basics Tutorial Graphic Design Basics Tutorial This tutorial will guide you through the basic tasks of designing graphics with Macromedia Fireworks MX 2004. You ll get hands-on experience using the industry s leading

More information

KOMPOZER Web Design Software

KOMPOZER Web Design Software KOMPOZER Web Design Software An IGCSE Student Handbook written by Phil Watkins www.kompozer.net CONTENTS This student guide is designed to allow for you to become a competent user* of the Kompozer web

More information

Redback Solutions. Visionscape Manual

Redback Solutions. Visionscape Manual Redback Solutions Visionscape Manual Updated 31/05/2013 1 Copyright 2013 Redback Solutions Pty Ltd. All rights reserved. The Visionscape Content Management System (CMS) may not be copied, reproduced or

More information

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide

CONTENTM WEBSITE MANAGEMENT SYSTEM. Getting Started Guide CONTENTM WEBSITE MANAGEMENT SYSTEM Getting Started Guide Table of Contents CONTENTM WEBSITE MANAGEMENT SYSTEM... 1 GETTING TO KNOW YOUR SITE...5 PAGE STRUCTURE...5 Templates...5 Menus...5 Content Areas...5

More information

HTML CREATOR. HTML Creator

HTML CREATOR. HTML Creator HTML CREATOR The HTML Creator is an HTML editing tool that allows you to create content in HTML without having to enter HTML tags. Similar to a word processor, you can easily create and maintain content

More information

Creating Personal Web Sites Using SharePoint Designer 2007

Creating Personal Web Sites Using SharePoint Designer 2007 Creating Personal Web Sites Using SharePoint Designer 2007 Faculty Workshop May 12 th & 13 th, 2009 Overview Create Pictures Home Page: INDEX.htm Other Pages Links from Home Page to Other Pages Prepare

More information

CiviCRM for The Giving Circle. Bulk Mailing Tips & Tricks

CiviCRM for The Giving Circle. Bulk Mailing Tips & Tricks CiviCRM for The Giving Circle Bulk Mailing Tips & Tricks By Leo D. Geoffrion & Ken Hapeman Technology for the Public Good Saratoga Springs, NY Version 1.1 5/26/2013 Table of Contents 1. Introduction...

More information

When including an image within a page the following aspects must be included: <img src= "" />

When including an image within a page the following aspects must be included: <img src=  /> HTML LESSON #2 Images Inserting images requires the tag, however like the font tag, the tag requires an attribute, in this case the src="" attribute. It doesn't do anything by itself. When

More information

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running

Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Module 6 Web Page Concept and Design: Getting a Web Page Up and Running Lesson 3 Creating Web Pages Using HTML UNESCO EIPICT M6. LESSON 3 1 Rationale Librarians need to learn how to plan, design and create

More information

Quick Reference Guide

Quick Reference Guide Simplified Web Interface for Teachers Quick Reference Guide Online Development Center Site Profile 5 These fields will be pre-populated with your information { 1 2 3 4 Key 1) Website Title: Enter the name

More information

Umbraco Content Management System (CMS) User Guide

Umbraco Content Management System (CMS) User Guide Umbraco Content Management System (CMS) User Guide Content & media At the bottom-left of the screen you ll see 2 main sections of the CMS Content and Media. Content is the section that displays by default

More information

Microsoft FrontPage Step by Step Training

Microsoft FrontPage Step by Step Training Toolbars Menu Standard Formatting Quick Tag Selector Views Toolbar Type a Question for Help Box Task Pane Microsoft FrontPage Step by Step Training Views Design allows you to design and edit web pages

More information

Drupal A Guide for Web Editors

Drupal A Guide for Web Editors University Information Technology Services Kennesaw State University Drupal A Guide for Web Editors Last updated on March 3, 2010 Copyright 2010 KSU Dept. of Information Technology Services This document

More information

Creative Stream Content Management System (CMS)

Creative Stream Content Management System (CMS) Creative Stream Content Management System (CMS) The Creative Stream CMS is modular and as such installations may vary. Therefore certain sections of this document may not be relevant to your CMS. Contents

More information

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence

Web Development. Owen Sacco. ICS2205/ICS2230 Web Intelligence Web Development Owen Sacco ICS2205/ICS2230 Web Intelligence Introduction Client-Side scripting involves using programming technologies to build web pages and applications that are run on the client (i.e.

More information

Hotspots and Markers

Hotspots and Markers MapsAlive User Guide Hotspots and Markers Last updated March 22, 2016 Copyright 2010 2016, AvantLogic Corporation Table of Contents 1 Introduction... 4 2 Terminology... 5 3 Hotspot vs. Marker What s the

More information

Book Builder Training Materials Using Book Builder September 2014

Book Builder Training Materials Using Book Builder September 2014 Book Builder Training Materials Using Book Builder September 2014 Prepared by WDI, Inc. Table of Contents Introduction --------------------------------------------------------------------------------------------------------------------

More information

HTML Chapter 3. Working with links

HTML Chapter 3. Working with links HTML Chapter 3 Working with links Chapter 3 Project for Chapter 3 Pasta Divine Website Pages 91-132 Apply Your Knowledge Pages 134-135 Extend Your Knowledge Pages 135-136 Make It Right Page 137 In The

More information

Volume. DAVID A. WILLIAMS Getting Started Guide for Web Development Customers. Getting Started Guide

Volume. DAVID A. WILLIAMS Getting Started Guide for Web Development Customers. Getting Started Guide Volume 3 DAVID A. WILLIAMS Getting Started Guide for Web Development Customers Getting Started Guide WEB SITE DEVELOPMENT Getting Started Guide 2001-2006 David A. Williams All Rights Reserved Phone: 607-587-9275

More information

EDIT202 Web Page Creation Lab Prep Sheet

EDIT202 Web Page Creation Lab Prep Sheet EDIT202 Web Page Creation Lab Prep Sheet Creating and managing websites can be a valuable educational tool. Whether it is just to share administrative information, deliver course content or to be used

More information

RHYTHMYX USER MANUAL EDITING WEB PAGES

RHYTHMYX USER MANUAL EDITING WEB PAGES RHYTHMYX USER MANUAL EDITING WEB PAGES Rhythmyx Content Management Server... 1 Content Explorer Window... 2 Display Options... 3 Editing an Existing Web Page... 4 Creating a Generic Content Item -- a Web

More information

Hello. What s inside? Ready to build a website?

Hello. What s inside? Ready to build a website? Beginner s guide Hello Ready to build a website? Our easy-to-use software allows to create and customise the style and layout of your site without you having to understand any coding or HTML. In this guide

More information

PowerPoint Exercises 3 Drawing

PowerPoint Exercises 3 Drawing PowerPoint Exercises 3 In these exercises we will become more familiar with the drawing tools available in PowerPoint (and other office programs too for that matter!). The drawing tools are all available

More information

HTML TEST. Multiple Choice Identify the choice that best completes the statement or answers the question.

HTML TEST. Multiple Choice Identify the choice that best completes the statement or answers the question. HTML TEST Multiple Choice Identify the choice that best completes the statement or answers the question. 1. What does HTML stand for? a. Hyper Link Markup Language b. Hyper Text Markup Logics c. Hyper

More information

How to create buttons and navigation bars

How to create buttons and navigation bars How to create buttons and navigation bars Adobe Fireworks CS3 enables you to design the look and functionality of buttons, including links and rollover features. After you export these buttons from Fireworks,

More information

ID Studio. Help. DOC0017 Version 4.0. 2015... Nortech Control Systems Ltd

ID Studio. Help. DOC0017 Version 4.0. 2015... Nortech Control Systems Ltd ID Studio Help DOC0017 Version 4.0 ID Studio Table of Contents Part I Product Overview 1 Part II Installation and Settings 2 1 Installation... 2 2 Settings... 4 Part III Card Printing 6 1 Card Printing...

More information

Wellesley College Alumnae Association. Volunteer Instructions for Email Template

Wellesley College Alumnae Association. Volunteer Instructions for Email Template Volunteer Instructions for Email Template Instructions: Sending an Email in Harris 1. Log into Harris, using your username and password If you do not remember your username/password, please call 781.283.2331

More information

(Refer Slide Time: 02:27) So our topic of discussion today is something called image map which provides just that kinds of a capability.

(Refer Slide Time: 02:27) So our topic of discussion today is something called image map which provides just that kinds of a capability. Internet Technology Prof. Indranil Sengupta Department of Computer Science and Engineering Indian Institute of Technology, Kharagpur Lecture No #18 Image Maps If you recall, in our last lecture we are

More information

Introduction. Steps in Creating Web Pages

Introduction. Steps in Creating Web Pages 1 of 7 Introduction A basic web page is a plain text file that has been marked up with tags around a word or phrase to describe how it should be displayed by the web browser. To see the HTML codes of any

More information

Creating your personal website. Installing necessary programs Creating a website Publishing a website

Creating your personal website. Installing necessary programs Creating a website Publishing a website Creating your personal website Installing necessary programs Creating a website Publishing a website The objective of these instructions is to aid in the production of a personal website published on

More information

Adobe Dreamweaver CC 14 Tutorial

Adobe Dreamweaver CC 14 Tutorial Adobe Dreamweaver CC 14 Tutorial GETTING STARTED This tutorial focuses on the basic steps involved in creating an attractive, functional website. In using this tutorial you will learn to design a site

More information

Using econtentmanager s ewebeditpro Editor

Using econtentmanager s ewebeditpro Editor Using econtentmanager s ewebeditpro Editor econtentmanager comes with its own content editor, called ewebeditpro. With ewebeditpro, you can add and modify your page content with WYSIWYG ease-of-use. The

More information

Tutorial 2 Developing a Web Site

Tutorial 2 Developing a Web Site Tutorial 2 Developing a Web Site HTML and CSS 6 TH EDITION Objectives Explore how to storyboard a Web site Create navigation lists Create links between documents in a Web site Understand absolute and relative

More information

Fireworks for Graphics and Images

Fireworks for Graphics and Images Fireworks for Graphics and Images Joan Weeks SLIS Computer Labs Mgr. October 2009 Fireworks for Banners and Images Fireworks is a web developer s tool to make banners and graphics, as well as format images

More information

Chapter 14: Links. Types of Links. 1 Chapter 14: Links

Chapter 14: Links. Types of Links. 1 Chapter 14: Links 1 Unlike a word processor, the pages that you create for a website do not really have any order. You can create as many pages as you like, in any order that you like. The way your website is arranged and

More information

Getting Started with KompoZer

Getting Started with KompoZer Getting Started with KompoZer Contents Web Publishing with KompoZer... 1 Objectives... 1 UNIX computer account... 1 Resources for learning more about WWW and HTML... 1 Introduction... 2 Publishing files

More information

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL

Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL Go Kiwi Internet Content Management System Version 5.0 (K5) TRAINING MANUAL K5 CMS The K5 Content Management System (CMS), previously known as Kwik-Az Updating, is a small downloadable program that permits

More information

Using HTML to create a web page

Using HTML to create a web page S.3 Computer Literacy Using HTML to create a web page To create web pages it is best to know HyperText Markup Language (HTML). Markup tags tell the browser how to display text and images on web pages.

More information