CIS89A - 3. Links
From WikiEducator
From here to there - Links
- Linking - the ability to embed hyperlinks in pages, is one of the most significant features of the web. The idea that a viewer could click on a word or a picture and immediately be taken to another page that provided additional relevant information was revolutionary.
Learning outcomes
- add links to other web pages
- add links to sections within the same web page
- add links to email address
Keywords
- absolute, relative, section, anchor, email address, downloadable file, style link, default color, tab order target window
Reading guide
- What is a relative link?
- What is required for the mailto link to initiate an email?
Assignments
Coding project required elements - ONE project with 2 html files, 1 css file
- links - a, href, #, id (replaces name), link title text, top, mailto, subject, target, _blank, visited
- styling - all in css file
- links within the page, top, links to external web page (absolute), link to another page in same project (relative), opens in new window, opens in same window, link changes color after being visited, link changes color when mouse hovers over link, title displays when mouse hovers over link, mailto: special link with subject provided
- Reminder: ONE NEW coding project for each module. For this coding project there must be 2 html files and a css file in the project. Normally, there is only ONE html file and a css file for the coding project.
- Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module. Review the Media section (below - scroll down) for links to resources for this module.
- Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 2 Creating a Website on Your Computer . Chapter 5 Links . Chapter 21 Getting Your Website Online - Making Your Site Live p.269-272 for information about transferring files to the web
- Links and web addresses - The "magic" of the WorldWide Web (aka WWW, w3, "the web", internet) is the ability to connect to other information resources anywhere through "hyperlinking" provided as HTML (HyperText Markup Language). The connection is made by supplying the web address (aka URL Universal Resource Locator). When the user wants to access this other resource, they "click" on the link. Their browser goes off and follows the directions provided in the link HTML code - take me to this other resource and display it. Learn more about this process. Find a resource that provides a good explanation of this process so you understand it. Post the link and a brief summary to the Links and Web Addresses discussion. Review 2-3 others.
- Working with Links - Coding project required elements - ONE project with 2 html files, 1 css file. Include links to several different web pages. Use all the link elements and tags to provide links to the sites, to your other projects and headings within this html file. Place all styling in the linked css file. Document your code with comments in html and css files.
For the Relative link to an html file in the same Glitch directory
* create another file in the same Glitch project - Files + in the left navigation menu. Replace cool-file.js with yourfilename.html and click Add this file. Your new file will be added to your project. This file is empty so you will have to add all the basic html code.
* create the relative link to your new file that you have just created in the Glitch project directory
* in your new file, include a link to your project .css file. This is required to include the shared external styling information. This is the main part of the Cascading in CSS. This applies to all pages that share styling throughout your projects and website
Links don't "work" in the right preview panel in Edit view. Switch to "Preview in a new window" view or Share > Live site to check that your links are working.
- Check the Email HTML Code tool for help with the mailto link. This is just code - it won't actually work in your code project.
- Review the grading rubric in the Working with Links assignment. This is a checklist of the requirements for the coding project. Compare your work with the grading criteria. Do you understand the criteria and how your coding project will be evaluated? Any questions about the rubric and the grading process?
- Check your work. Use a HTML code validators such as HTML Validator to check the code you have written. Just copy your HTML code and paste it into the textbox in the online form.
- Submit the link to your coding project to the Working with Links assignment - the web address of the full page Preview of the main page or the Share Live site web address. Include any questions or comments you have about the rubric and the coding project evaluation process.
- AND Post a link to your project along with your comments and questions about this assignment to the Working with Links discussion.
- AND get feedback and provide feedback ... Review 2 other projects and REPLY with a comment to point out something that you learned or you liked. Ask one question about the work.
- Review the work of 2 others - the page display and the source code. Post a note with links to those projects, and a brief description of your observations - anything that you learned from looking at these? Any ideas you have for using in your own work in the future? Post to the Working with Links discussion.
- Voyager public web page - Voyager is a file server. Any files in your public_html directory can be viewed as web pages from any web browser. This is similar to what you do with any web host. This is the most basic part of web development. This process is often facilitated with development tools so you don't see this level of detail. For this course, setting up an FTP application and transferring files to your Voyager public_html directory for web browser access is required. See Voyager FTP for additional information.
Set up your Business/Computer Systems Account - If you haven't done this already, see How to Set Up Your Linux (Voyager) Account for more information. Follow the instructions to create a DeAnza Windows account. You will also be saving work to the DeAnza web server using the same username and password to login to Voyager.
To access your Voyager account, you will need an FTP application (File Transfer Protocol) installed on your computer. Keep reading...
- FTP - For pages hosted on Voyager, transfer the HTML code text file with suffix .html and the associated .css file to your Voyager public_html directory. Voyager is an SFTP server. See Voyager FTP and textbook Chapter 21 Getting Your Website Online - Making Your Site Live for information about transferring files to the web
There are several ways to transfer files to Voyager. You can use any ftp application or web page development tool that provides file transfer to move your page source text file from your computer to your Voyager public_html directory.
Create a simple HTML file and CSS file and upload them to your public_html directory in your Voyager account. This must be a text file with the type .html. You can copy the HTML and CSS from Glitch to create a new text files on your own computer.
* For the transfer, make sure the File protocol is "SFTP" otherwise you will not be able to connect to the server.
* Check that your transfer was successful and you can access your page from your account on Voyager. Some functions work fine with either http: or https: in the web address. Other sites will work with one but not the other. Try each one if you are having problems.
* Check that you have uploaded the .css file for your project and that it is "found" - you may need to change the relative link in your html file to access your css file on Voyager.
- Post a link to your web page in your Voyager account to Link to Voyager discussion.
example : http://voyager.deanza.edu/~vtaylor/m18index.html
Your ~username is a shortcut to your public_html directory in your Voyager user directory. Your ~username is always all lowercase. To access your web page files stored on Voyager - just http:// (not https://)
- Submit the Voyager page web address to the Voyager web page address assignment.
- Review your own work. Do you understand how these elements would be included in professional web sites? What questions came up during the coding project? How did you resolve them? Would you do something differently next time? Write a brief description of any problems your had with the coding project. Post your response to the Links - Review assignment.
- Assistive technology and Inclusive computing - It is important for web developers to understand both the limitations and the powerful tools provided by technology so people with disabilities can use the web. The result may be different but accessibility can be much greater if the web developer understands these design options. Here are some websites with good information.
.. Inclusive design is design that considers the full range of human diversity with respect to ability, language, culture, gender, age and other forms of human difference.
.. DeAnza Computer Accessibility Lab (CAL) Specialized equipment and training are available for loan through DSS and includes: Digital tape recorders, Portable closed circuit print enlargers, Assistive listening devices (DHHS), Daisy players, Smart Pens. Talking calculators
.. Adaptive Technology - includes good overview of some of the adaptive equipment and software available
.. Adaptive tools - to help with learning and attention issues. Some adaptive tools are low-tech and some are pretty fancy.
- Accessibility - Dyslexia simulation - Try out this constantly changing dyslexia simulation. Or try the Screen Reader simulation. Does the simulation give you a better understanding of the problems faced by computer users with these disabilities?
Then describe your experience in 1-2 sentences in the Accessibility Simulations discussion.
- Group Project groups discussions - You have been assigned to a group that you will work with for the entire semester. Throughout the semester, there are discussion tasks to practice working in a group online. This will be your group for review and feedback in the final web project development activities as well. Group Projects Guide
You will have a partial score until you have completed all the group discussion tasks in the course. Points are awarded for participation throughout the course so you will see your score increase after each task.
Meet the others in the group. List 3 things about yourself. One food you really don’t like. Something you really enjoyed doing as a kid. What is your “dream job”. Post your introduction as a reply to your Group Projects groups discussion. Reply to 2 others.
Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
- Chapter 2 Creating a Website on Your Computer
- Chapter 5 Links
- Chapter 21 Getting Your Website Online - Making Your Site Live p.269-272 for information about transferring files to the web
- The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination.
- The A element is the tag you use to create a link. It is also referred to as the anchor tag. Use the title attribute in a link to improve accessibility
- The title attribute specifies extra information about an element. The information is most often shown as a tooltip text when the mouse moves over the element. The title attribute can be used on any HTML element
- To style links appropriately, put the :hover rule after the :link and :visited rules
- add subject to the link
Examples
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/x3links: Error parsing XML for RSS
LINKS
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/links: Error parsing XML for RSS
ACCESSIBILITY
Failed to load RSS feed from http://www.diigo.com/rss/user/vtaylor/accessibility: Error parsing XML for RSS
