CIS89A - 3. Text

From WikiEducator
Jump to: navigation, search

A few words - Text

Most web pages include a lot of text. It is important to know how to format text for readability and searching. Most visitors skim to find the information they are looking for. So it is important that pages of text are attractive and well organized.

Learning outcomes

  • consider onscreen readability of text
  • provide printer-friendly version of page
  • organize content with natural divisions and headings
  • arrange information in columns
  • understand accessibility issues for people with disabilities


  • readability, text style, .PDF, paragraph, line break, quotation block, box, alignment, page layout, column, fluid, layer

Reading guide

  • What contributes to the readability of a web page?
  • Why should you avoid underlining text on a web page?
  • What are three key things to remember when designing a printable version of a web page?

Icon multimedia.gif


  • Wendy Willard - Chapters 4. Working with Text, 5. Page Structure, 6. Positioning Page Elements
  • HTML Dog HTML Beginner Tutorial
  • Visual Quickstart - 4. Text

Writing for the web

  • Writing for the Web - great collection of articles about writing for the web
  • Website Reading: It (Sometimes) Does Happen - When web content helps users focus on sections of interest, users switch from scanning to actually reading the copy. Users go to websites for information. Users scarcely read anything during an average website visit.
  • Say What You Mean (video 2:00) - not specific to the web
  • Readability Calculator - useful tool for checking the readability of your content. You have to know what the indices represent and what is appropriate for your target audience.


The Difference Between ID and Class | CSS-Tricks
"having both an ID and a Class on a single element. In fact, it is often a very good idea. Take for example the default markup for a WordPress comment list item: li id="comment-27299&quot...
Free Fonts! Legit Free & Quality | Font Squirrel
"Free Font Utopia. We know how hard it is to find quality freeware that is licensed for commercial work. We've done the hard work, hand-selecting these typefaces and presenting them in an...
DaFont - Download fonts
"The fonts presented on this website are their authors' property, and are either freeware, shareware, demo versions or public domain. The licence mentioned above the download button is jus...
6 Surprising Bad Practices That Hurt Dyslexic Users - UX Movement
"six bad practices that are likely to cause these visual distortion effects for dyslexic users. These bad practices can also make reading difficult for non-dyslexic users. But the effect they...
The Lowdown On Absolute vs. Relative Positioning
"how absolute and relative positioning work on their own, it’s time to dive into a more complex example and see how they can work together in a truly useful manner. This time we’re going t...


Everything About Color Contrast And Why You Should Rethink It
"Let’s estimate that 10% of the world population would benefit from designs that are easier to see. Multiply that by the number of customers or potential customers who use your website or ap...
Web Accessibility: Designing Web Pages for All Users
"suggestions, concepts, resources, and links to materials for designing and producing web pages that allow access to the entire population of potential users regardless of disability or comput...
WCAG 2.0 at a Glance | Web Accessibility Initiative (WAI) | W3C
"Web Content Accessibility Guidelines (WCAG) Provide text alternatives for non-text content. Provide captions and other alternatives for multimedia. Create content that can be presente...
WebAIM: Low Vision Simulation
"This simulation provides an opportunity for users to experience a web page using simulated visual disabilities. While it certainly does not simulate low vision itself, it can be used to help...
Games Pose Unique Accessibility Challenges by Pamela S. Hogle : Learning Solutions Magazine
"Some changes to game design that can increase accessibility despite these challenges are simple and add little or nothing to development costs, while others might incur a larger cost in time...


  • You're Being Watched - even if someone isn't trying to steal your identity, they still want to know everything about you so they can place advertising where you are likely to see it.
  • Here's How Easily Someone Could Hack Into Your Life (INFOGRAPHIC) - If you're reading this, there's 69 percent chance you will become a victim of hacking at some point in your lifetime. And if you think protecting yourself is as easy as changing a couple passwords and installing some anti-virus software, you're 100 percent wrong.
  • Theft: How To Avoid It, What To Do If It Happens]


Assignment file name and required elements

  • cis89text1 - strong, font-family, small, large, italic, h1, h3, div, p, br, pre, align, margin, padding

  1. KWLH - What do you already KNOW about Text? What do you WANT to learn? Make a note for yourself as you start work on this module. Then, at the end of this module, what did you LEARN? HOW did you learn it? Post a brief note to the I know... discussion.

  2. Review the Keywords and Study questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  3. Read Chapters 4. Working with Text, 5. Page Structure, 6. Positioning Page Elements in the textbook.

  4. Work through the W3schools Paragraph tutorial, Try it and exercises.

  5. Working with text - For this assignment, you need some text to format. Find a web page that provides some useful information associated with your interests. Select 4-5 paragraphs of text and copy the text to a new Thimble page AND include the web address of the page you are copying from. The text will look like a big jumble of words.
    Using the original web page layout as a guide, add text formatting so the text is readable. Save the file as cis89text1. Include the assignment file name and the list of elements and attributes for the assignment as a comment in your code.
  6. Page structure, Positioning elements - In the same file, use the assignment elements and tags to reformat and organize the text. You can add more text if you need to. For this assignment, the text isn't as important figuring out ways to use all the elements and tags within your page. Save (publish) the final version.
  7. Submit the full web address of your assignment file to the Text and Page Format assignment.
  8. Post a link to your assignment file along with a list of the assignment elements that you used in your code, and any comments or questions about the assignment to the Text and Page Format discussion.
  9. Review the work of 2 others. For each, post a note with a link to the page, 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? Any questions you have about the code you are reviewing? Post to the Text and Page Format discussion.

  10. 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.
    Review articles in the posts of 2 other students and post a reply describing how you will use this information.

  11. Adaptive technology - 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 Adaptive Technology. Here are some websites with good information on Adaptive Technology.
    .. Indiana University - Using technology to provide equal access and an inclusive environment for the IU community
    .. California State University - series of videos of students with disabilities
    .. CSU Introduction to Web Accessibility (with quicktime videos!) strategies to design "access-friendly" websites.

  12. Accessibility - Dyslexia simulation - Try out this constantly changing dyslexia simulation, which you can read more about at Reddit, Website Aims to Simulate What It’s Like to Be Dyslexic. Or try one of the other simulations. 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.

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

  14. Learning Literacies - Protect it. Review 2-3 articles from Protect it - Digital Citizenship. Pick one article you would recommend from the selection list. 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 Learning Literacies - Protect it discussion. Review the discussion posts of 2 others.

  15. Test drive - Pinterest is a popular social bookmarking site. Contributors "pin" their favorite sites to their "boards". Usually each board has a theme so all the pins will be related to that topic of theme. What makes Pinterest appealing is the attractive display of links arranged with an image from the linked site. Pick 2-3 Pinterest boards associated with web development topics and post links and brief descriptions of the theme to the Pinterest discussion
    Visit the boards selected by 2 other students.

2017.4 7288