CIS89A - 3. Links

From WikiEducator
Jump to: navigation, search
Mir - February 1995

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 title and required elements

  • links - a, href, #, id (replaces name), link title text, top, mailto, subject, target, _blank, visited
  • links within the page, top, links to external web page, 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, maito: special link with subject provided


  1. 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.

  2. Textbook Wendy Willard - Chapter 7. Working with Links. ALSO Chapter 15. section Upload Your Site to a Host Computer. Read 2-3 of the Links media (below).

  3. Working with Links - Open a new coding project. Collect all the links that you selected for previous assignments and add them to this project html file. Use all the link elements and tags to provide links to the sites, to your other projects and headings within this html file.
    Check the Email HTML Code tool for help with the mailto link.
  4. Review the grading rubric in the Working with Links assignment. 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?
  5. 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.

  6. Submit the link to your coding project to the Working with Links assignment. Include any questions or comments you have about the rubric and the coding project evaluation process.
  7. AND Post a link to your project along with your comments and questions about this assignment to the Working with Links discussion.

  8. 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.

  9. 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 simplest, 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 Willard Chapter 15. section Upload Your Site to a Host Computer.

    Set up your Business/Computer Systems Account - If you haven't done this already, see Accessing Your Computer Account for more information. Enter your Campus Wide ID and birthdate (for security reasons!!). Follow the instructions to create a DeAnza Windows account. You will also be saving work to the DeAnza web server Voyager, so you will be using your Voyager account as well. Use the same username and password to login to Voyager.

    To access your Voyager account, you will need an FTP application (File Transfer Protocol) such as FileZilla installed on your computer. Keep reading...

  10. FTP - For pages hosted on Voyager, transfer the HTML code text file with suffix .htm or .html to your Voyager public_html directory. Voyager is an SFTP server. To connect Voyager, enter the address sftp://voyager.deanza.edu into the host field.

    FileZilla (recommended) is open source software distributed free of charge under the terms of the GNU General Public License. FileZilla documentation including tutorials are available.
    Also see https://wikieducator.org/User:Vtaylor/CIS89A_Learning_Web_Design/Voyager_FTP
    NOTE: Make sure the File protocol is "SFTP" otherwise you will not be able to connect to the server.

  11. If you already have a Voyager account, or once you have created your Voyager account and can access your Voyager directory, create a simple HTML file and upload it to your public_html directory in your Voyager account. This must be a text file with the type .htm or .html. You can copy the HTML from Glitch to create a new text file on your own computer.
    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.
    Note: 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.

  12. 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.

  13. Writing for the web - Pick one of the articles listed in Writing for the Web. Write a short review of the article you selected and post it along with a link to the article in the Writing for the Web discussion.

  14. 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.

  15. 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.

  16. Privacy, online identity, digital footprint - Digital Footprint - the record or trail left by the things you do online. Your social media activity, the info on your personal website, your browsing history, your online subscriptions, any photo galleries and videos you’ve uploaded — essentially, anything on the Internet with your name on it. Just like a tattoo, your digital reputation is an expression of yourself. It's highly visible, and hard to remove. What is one thing that you will do differently having reviewed this list? Post ONE sentence in the Digital Footprint discussion.

  17. Success Skills - Protect it - Digital Citizenship. Review 2-3 articles from the Success skills PROTECT list in the Media section below. Pick one article you would recommend. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Protect it discussion.

  18. Group Project groups discussions - 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.
    You are automatically assigned to a group. Since this is a group discussion, each group has its own conversation for this topic. In Group Project groups discussions "pinned" at the top of the Discussions menu, are the discussions you have access to. Note: This will take you out of the course to your group discussion. (It's a Canvas thing...) The objective is to work together with your group to complete these tasks. In Module 11. you will provide feedback on the group project experience.

    Locate the Group Project groups discussions and your group. Post a short note about your experience working in online groups. No experience is ok - we are all here to learn something new. There are several suggested "tasks" for the group. Provide your responses. You can suggest other tasks and activities for your group. There will be several group activities throughout the course.
    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.


Icon multimedia.gif

Media



LINKS

Tutorial Navigation Bar - HTML & CSS - YouTube
3:50 how to make a navigation bar with HTML and CSS. When I was trying to learn how to do this, many sites were including javascript in their code. This is a simple video that's important to w...
HTML Tutorial 10 Creating Internal Links - Linking your pages together - Part 1 - YouTube
9:07 good tutorial for an explanation to the module of working with links. It explains how to create links between your pages, by showing clear code on a new tab notepad. I like this video becaus...
HTML5 Tutorial For Beginners - part 3 of 6 - Images and Hyperlinks - YouTube
how to use images and hyperlinks. The difference between relative and absolute addressing is covered. This video shows the height and width attributes used with the img tag. In older versions of HT...
Documentation - FileZilla Wiki
"Installation on Windows/Linux/Mac OSXTutorialUsage instructionsFixing connection and transfer problems; Network configurationFrequently Asked Questions (FAQ)"
<p class=&qu...


Accessibility

  • Test for Dyslexia: 37 Common Traits - Most dyslexics will exhibit about 10 of the following traits and behaviors. These characteristics can vary from day-to-day or minute-to-minute. The most consistent thing about dyslexics is their inconsistency.
W3C cheatsheet
Accessibility: WCAG2 at a GlancePerceivable Provide text alternatives for non-text content. Provide captions and alternatives for audio and video content. Make content adaptable; and make...
Accessible language | NZ Digital government
Accessible language is language that includes everyone.People can feel excluded when: they don’t understand words or phrases language is used in ways that pose challenges to users of other...
Designing for accessibility is not that hard - UX Collective
These seven guidelines are relatively easy to implement and can help your products get closer to meet level AA of the Web Content Accessibility Guidelines (WCAG 2.0), and work on the most commonly...


Protect

Feedmusic
design. interesting exploration of the future of information creation, sharing, exploring, connecting. property rights and payments platform using intelligent software and digital security. ownersh...
[ALERT] Fake Customer Service Scams
Facebook does not have a customer service phone number, nor does the company sell anti-malware solutions. I'm sure this is not the number you called, but you may see search listings that claim...
5 Ways You Can Help Yourself Stay Secure Online
Back up Your Data RegularlyIf in the unfortunate event you become a victim of malware, such as ransomware, you might not be able to get your data back. Not unless you’ve backed up your data. When...
How to Protect Your Internet Privacy? 13 Tips for 2020
This is a guide to protecting your internet privacy. Learning how to do so is key when we all use the internet with increasing regularity. The internet touches so many parts of our lives these days...
Protecting Your Privacy | CISA
Take advantage of options to limit exposure of private information. Default options on certain websites may be chosen for convenience, not for security. For example, avoid allowing a website to rem...