CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.

Slides:



Advertisements
Similar presentations
CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. October 11, 2010—All HTML code brought to XHTML standards.
Advertisements

KompoZer. This is what KompoZer will look like with a blank document open. As you can see, there are a lot of icons for beginning users. But don't be.
XP 1 Developing a Basic Web Site Tutorial 2: Web Site Structures & Links.
Developing a Web Site: Links Using a link is a quicker way to access information at the bottom of a Web page than scrolling down A user can select a link.
Microsoft Expression Web-Illustrated Unit C: Adding Text and Links.
Links and Comments.
New Perspectives on Creating Web Pages with HTML
HTML Introduction (cont.) 10/01/ Lecture 8, MAT 279, Fall 2009.
XP Adding Hypertext Links to a Web Page. XP Objectives Create hypertext links between elements within a Web page Create hypertext links between Web pages.
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Path to Files Various Links Click Here :( Page Footers.
CIS101 Introduction to Computing Week 06. Agenda Your questions Resume project HTML Project Two This week online Next class.
1 Linking Web Pages Why is Hypertext Hyper? Storyboarding Page Links (Site Map) Sequential and Indexed-Sequential Designs Hierarchical Design Custom Design.
Announcement #1 1 Lecture 9. Announcement #2  Midterm exam will be on Oct. 12 (Tuesday)  pm – 1.45 pm  Exam will cover all materials till Oct.
Shows the entire path to the file, including the scheme, server name, the complete path, and the file name itself. Same idea of stating your full name,
Links in HTML. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another web page on the same.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
XP Creating Web Pages with HTML, 3e1 WEB DESIGN & MANAGEMENT CLASS 5 - 2/26/02 - Agenda Homework discussions FTP issues – If you have FTP issues, please.
XP New Perspectives on Browser and Basics Tutorial 1 1 Browser and Basics Tutorial 1.
Tutorial #2 Creating Links. Tutorial #1 Review Basic Page (DOCTYPE, HTML, Head, Title, Body) Tags Structure( ),,,,,, Nested Tags content Tag Attributes.
WEB DESIGN USING DREAMWEAVER. The World Wide Web –A Web site is a group of related files organized around a common topic –A Web page is a single file.
Enhancing Your Web Site. More Basic HTML Tags Today you will learn these tags: & add-on (alt, height, width & align) and “href” add-on Add a text link.
Informatics Computer School CS114 Web Publishing HTML Lesson 2.
Agenda Links External and Internet Links Anchor Tag Text Hyperlinks Image Hyperlinks Images Image Attributes: src, alt, width, height, align, border.
XP 1 New Perspectives on Creating Web Pages with HTML Adding Hypertext Links to a Web Page.
Copyright (c) 2004 Prentice-Hall. All rights reserved. 1 Committed to Shaping the Next Generation of IT Experts. Project 4: Creating Hyperlinks Kelly L.
Images in HTML PowerPoint How images are used in HTML.
XHTML Louise Soe updated September 2009.
Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and attributes Create.
Adding Hypertext Links to a Web Page Tutorial 2 eXtensible Markup Language (XML)
Introduction to HTML. What is a HTML File?  HTML stands for Hyper Text Markup Language  An HTML file is a text file containing small markup tags  The.
Developing a Web Site. Web Site Navigational Structures A storyboard is a diagram of a Web site’s structure, showing all the pages in the site and indicating.
Tutorial 4: Working with Hyperlinks. Objectives Session 4.1 – Place bookmarks on a Web page – Create a link to a bookmark – Create a link to another Web.
CIS 205—Web Design & Development Dreamweaver Chapter 1.
XP Mohammad Moizuddin Creating Web Pages with HTML Tutorial 2 1 New Perspectives on Creating Web Pages With HTML Tutorial 2: Adding Hypertext Links to.
 The World Wide Web is a collection of electronic documents linked together like a spider web.  These documents are stored on computers called servers.
Creating Links – Lesson 31 Creating Links Lesson 3.
Unit 2, cont. September 12 More HTML. Attributes Some tags are modifiable with attributes This changes the way a tag behaves Modifying a tag requires.
Enhancing Your Web Site—Adding Links Web Page **YOU MUST HAVE COMPLETED THE 1ST 3 WEB PAGES BEFORE YOU CAN DO THIS ONE. **YOU SHOULD HAVE COMPLETED THE.
Unit 3 Day 6 FOCS – Web Design. Journal Unit #3 Entry #4 Write the source code that would make the following display on a rendered page: Shopping List.
Adding Links Learning Web Design: Chapter 6. Lesson Overview Using the anchor tag Linking to other pages with relative or absolute pathnames Linking to.
CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.
Tutorial 2 Developing a Web Site. XP Objectives Learn how to storyboard various Web site structures Create links among documents in a Web site Understand.
XP 1 HTML Tutorial 2: Developing a Basic Web Site.
Making Websites with Dreamweaver BTT. What is Dreamweaver?  “What You See Is What You Get” (WYSIWYG) web design software  Rather than writing code and.
4 HTML Basics Section 4.1 Format HTML tags Identify HTML guidelines Section 4.2 Organize Web site files and folder Use a text editor Use HTML tags and.
HTML Basics. HTML Coding HTML Hypertext markup language The code used to create web pages.
Links in HTML What you need to know….. Hyperlinks or links Millions of linked web pages make up the World Wide Web Used to connect a web page to another.
HTML Links HTML uses a hyperlink to another document on the Web.
Lesson 6 Links. Creating Folders  For every web site/page, you need to create a separate folder  The computer cannot find links if they are not stored.
1 More About HTML Images and Links. 22 Objectives You will be able to Include images in your HTML page. Create links to other pages on your HTML page.
HTML Comprehensive Concepts and Techniques Second Edition Project 2 Creating a Web Site with Links.
Developing a Basic Web Site HTML Tutorial 2. Objectives Define links and how to use them. Create element ids to mark specific locations within a document.
`. Lecture Overview HTML Body Elements Linking techniques HyperText references Linking images Linking to locations on a page Linking to a fragment on.
XP 1 Charles Edeki AIU Live Chat for Unit 2 ITC0381.
ENHANCE YOUR WEBSITE. HOW TO INSERT COLOR??? USE THE TAG: GO TO PICK COLOR WANT BY POINTING: THEN USE THE HEX NUMBER.
Hyperlinks Links for Other Pages. Hyperlink (aka Link) Text (or image) user can click Takes user to different location In general, location can be: On.
Online PD Basic HTML The Magic Of Web Pages
Section 4.1 Section 4.2 Format HTML tags Identify HTML guidelines
Links and Comments in HTML5
Creating Links – Lesson 3
Links and Comments.
Enhance your website.
CNIT 131 HTML5 – Anchor/Link.
Links and Comments.
HTML Introduction Lecture 8.
Enhancing Your Web Site—Adding Links Web Page
Links and Comments.
Links and Comments.
4.00 Apply procedures to add content by using Dreamweaver. (22%)
Presentation transcript:

CIS67 Foundations for Creating Web Pages Professor Al Fichera Rev. August 25, 2010—All HTML code brought to XHTML standards.

Before We Start Adding Hypertext Links by Professor Al Fichera 2 This lecture was originally written back in 1998 I believe, and has been updated quite a bit since then. When we started building html code, the rules were, well, rather loose so to speak. Upper-case, mixed-case letters never seemed to matter to the Browsers of the day because we were all so new at it. This lecture was updated to remove the above weaknesses', and introduced some XHTML concepts with the use of all lower- case letters. August 25, 2010

Creating The Proper Anchor Tag Adding Hypertext Links by Professor Al Fichera 3 Let’s start with the basic tag for hypertext. The tag creates an anchor. Hypertext anchors help you move about the Web site as well as from one site to another. August 25, 2010

Anchors Aweigh Adding Hypertext Links by Professor Al Fichera 4 It’s important now to close what you open, in a mirror fashion. The anchor tag must be closed with the tag. Between the two tags you will insert the hypertext reference, the clickable text and/or a clickable picture. August 25, 2010

Starting Hypertext Links Adding Hypertext Links by Professor Al Fichera 5 You link to other documents using the anchor and it's link properties: <a href=" At this point you will add either an address to another Web page you own or the Web address to another site. August 25, 2010

Finishing Hypertext Links Adding Hypertext Links by Professor Al Fichera 6 After the ending >, place the “clickable link text" for example: Prof. Al’s Place Finish with a closing tag (It must be noted that when linking text that you be sure to use the proper case (upper or lower), for your keyed-in letters, URL’s are case sensitive!) August 25, 2010

Creating Links Between Pages Adding Hypertext Links by Professor Al Fichera 7 Linking to a document on your computer or Website. Be sure that it is in the same folder as the document containing the links, or you will have to add the folder’s name to the link. Clickable Text August 25, 2010

Web Page Structures Adding Hypertext Links by Professor Al Fichera 8 It's a good idea to map out how your Web pages are to relate to each other. Linear Structures Each page is linked to the next and previous pages Hierarchical Structures Starts with a general topic that includes links to more specific topics Mixed Structures Combines both of the above techniques August 25, 2010

Linear Structures Adding Hypertext Links by Professor Al Fichera 9 Linear Web Page Structures Home Page Page 1 Page 2 Page 3 Page 4 Page 5 August 25, 2010

Link Structure Coding Adding Hypertext Links by Professor Al Fichera 10 One possible link structure from the last slide could look something like this: Home Page to Page One Go to Page 1 Page One return to Home Page Go to Home August 25, 2010

Hierarchical Structures Adding Hypertext Links by Professor Al Fichera 11 Hierarchical Web Page Structures Home Page Page 1 Page 2 Page 3 Page 4 Page 5 August 25, 2010

Hierarchical Structure Coding Adding Hypertext Links by Professor Al Fichera 12 Using the Flow Chart link structure shown in the last slide, only two links would be on the Home page: Home Page to Page One Go to Page 1 Home Page to Page Four Go to Page 4 Only pages 1 and 4 can return directly to the Home page. August 25, 2010

Naming Anchors Adding Hypertext Links by Professor Al Fichera 13 To link to another part of a long Web document requires a different type of Anchor tag. The Name tag. This tag names a target area within the document for the link, e.g.: e.g., top, middle, bottom Note: The text used for the target name should be unique to that location, and the same as used in the Anchor tag. Usually, there is no clickable text with this type of anchor tag. August 25, 2010

Referencing Named Anchors Adding Hypertext Links by Professor Al Fichera 14 The portion of the hypertext tag that links you to the Named target looks like this: Back to Top The text placed between the Anchor tags will become the Hypertext for the link. Notice the use of the pound symbol ( # ) in this type of hypertext reference. August 25, 2010

Linking to a Section of a Doc Adding Hypertext Links by Professor Al Fichera 15 Normally, linking to a document brings you to the top of it's page. Perhaps you'd like your visitor to jump to a certain part of the Web page instead. The following would link your visitor to the bottom of the page. Go to Bottom August 25, 2010

Images as Hypertext Links Adding Hypertext Links by Professor Al Fichera 16 Clicking on an Image to Link you to another site is easier than you can imagine. Instead of using text to click on for the Hypertext Link why not use a small picture instead? August 25, 2010

Using Images as Links Adding Hypertext Links by Professor Al Fichera 17 There will be many opportunities within a Website where a clickable button would be more suitable than text. In this case all you do is replace the clickable text with the Image Source tag. August 25, 2010

Images as Hypertext Links Adding Hypertext Links by Professor Al Fichera 18 Use the following example to accomplish this: If you need better text-to-image spacing, add this to the img src tag: August 25, 2010

Alternate Text with Images Adding Hypertext Links by Professor Al Fichera 19 To help viewers who have turned off pictures speed-up identity of pictures and/or icons on your page, use the following in your img src tag. Whereas "imagename" is your short description of the image that will load on their screen. August 25, 2010

Creating Links Adding Hypertext Links by Professor Al Fichera links are hypertext too. The coding is a bit different than normal hyperlinks. In the a href tag use this: Me August 25, 2010

Creative Tricks Adding Hypertext Links by Professor Al Fichera links can fill in the Subject Line before they are sent off to you. Add the following to the end of your address in the href, no spaces allowed: Me August 25, 2010 Note: Code above was word wrapped by PowerPoint.

More Creative Tricks Adding Hypertext Links by Professor Al Fichera links can add content to the actual body of the too! Add the following to the end of your address in the href, no spaces allowed: Me August 25, 2010 Note: Code above was word wrapped by PowerPoint.

Using Folders for Your Files Adding Hypertext Links by Professor Al Fichera 23 This path shows exactly where the file is on the computer. In HTML you start every pathname with a slash ( / ) Separate each folder name from the next with a slash. (More on this later.) August 25, 2010

Folder Pathnames Adding Hypertext Links by Professor Al Fichera 24 When referencing files in different folders in the link tag, you must include each file's location, called its path. HTML supports two kinds of paths, absolute and relative. August 25, 2010

Absolute Pathnames Adding Hypertext Links by Professor Al Fichera 25 Absolute pathnames give a file's exact location in relation to the current Web document. These use the complete Internet Protocol, for example: Absolute pathnames to Web page files you own can create problems when moving a whole Web site to an another host location. * http = Hyper Text Mark-up Protocol ** The slash at the end of the URL address is short-hand for index.html. August 25, 2010

Relative Pathnames Adding Hypertext Links by Professor Al Fichera 26 Relative pathnames give a file's location in relation to the current Web document. These use (2) periods and a slash (../) to reference a file in a folder above the current folder in the hierarchy, for example: Relative pathnames are easy to move to different servers, and you won't have to rename any possible folder name changes. August 25, 2010

Using Relative Pathnames Adding Hypertext Links by Professor Al Fichera 27 If your HTML document is in a nested file folder, and you want to reference an image or file in the parent folder, you may use the../ reference in your hypertext tag. Image courtesy of Ron Pumphrey, Shadow-Design.com August 25, 2010

Double-Nested Folders Adding Hypertext Links by Professor Al Fichera 28 Another version of nested folders and relative references. Image courtesy of Ron Pumphrey, Shadow-Design.com August 25, 2010

Why Use Relative Pathnames? Adding Hypertext Links by Professor Al Fichera 29 A couple of important reasons! Moving a Web site to another location. All files and folders can be moved and all your links will work. If you used absolute pathnames, you will have to go back and change everyone on them! The browser will load your page faster! August 25, 2010

Using Target Windows Adding Hypertext Links by Professor Al Fichera 30 To allow users of your site to return more easily from one of your hypertext links, use the following tag in your a href code. The new window will be opened and available to the user on the Taskbar below leaving your page still open to the viewer. Since writing this, most Browsers now have “Pop-Up” killers, so you take your chances, I guess! August 25, 2010

Historical 1998 Bibliography Adding Hypertext Links by Professor Al Fichera 31 Carey, Patrick, Creating Web Pages with HTML, Comprehensive, Course Technology, Cambridge, Mass., 1998 (9 tutorials). Burns, Joe, HTML Goodies, QUE Macmillian Publishing, Inc., Indianapolis, IN, 1999 (527 pages). Martin, Teresa and Glenn Davis, The Project Cool, Guide to Enhancing Your Website, John Wiley Sons, Inc., New York, NY, 1998 (416 pages). Oliver, Dick and Molly Holzschlag, Teach yourself HTML4 in 24 hours, Sams.net Publishing, Indianapolis, IN, 1997 (405 pages). Ibañez, Ardith, and Natalie Zee, HTML Web Magic, Hayden Books, Indianapolis, IN, 1997 (230 pages). Vodnik, Sasha, Dynamic HTML, Course Technology, Cambridge, Mass., 1998 (7 tutorials). Jasc Software, Paint Shop Pro 5, Jasc Software, Inc., Minnetonka, MN, 1998 (335 pages). August 25, 2010