CIS89A - 3. Text

From WikiEducator
Jump to: navigation, search
San Francisco International Airport at night

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?


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.

  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.
    .. DeAnza Disability Information Specialized equipment is 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.

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

  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. Success Skills - Protect it - Digital Citizenship. Review 2-3 articles from Success skills - Protect it. 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.

  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.

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


How to Create a Center Aligned Page with CSS – CSS Tutorial
A website tends to look more balanced when it’s centered on the monitor, instead of clinging to the left side with lots of white space on the right. This looks even worse with increased resolutio...
Starting with HTML + CSS
how to create an HTML file, a CSS file and how to make them work together. start using CSS and have never written a CSS style sheet It does not explain much of CSS. some extra explanation of the HT...
Writing for the Web: Articles, Training & Reports | NN/g
collection of articles that talk about writing for the web. suggestions for making content more interesting and attractive. things to avaoid. Start content with the most important piece of informat...
Copyright on the Web
Copyright on the web seems to be a difficult concept for some people to understand. But it's really simple: If you did not write or create the article, graphic, or data that you found, then you...
F-Shaped Pattern For Reading Web Content
"Eyetracking visualizations show that users often read Web pages in an F-shaped pattern: two horizontal stripes followed by a vertical stripe. F for fast. That's how users read your precio...


Accessibility in HTML5 – Clarissa Peterson
Accessibility for the web means making sure that our web pages and applications are available to everyone, including people with disabilities. Many but not all users with disabilities use assistive...
Keyboard-Only Navigation for Improved Accessibility
For users who can’t use a mouse make interactive and navigation elements easily accessible by tabbing and display a keyboard-focus indicator. users navigate the internet using the keyboard rathe...
Web-based Intranet and Internet Information and Applications (1194.22) - United States Access Board
when audio presentations are available on a multimedia web page, the audio portion must be captioned. Audio is a non-textual element, so a text equivalent of the audio must be provided if the audio...
6 Surprising Bad Practices That Hurt Dyslexic Users - UX Movement
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 have on dy...
How to Make Your Website More Accessible | InstantShift
Accessibility is about making your website accessible to all Internet users—everyone who wants to view it, both disabled and abled. For example, can a blind person use your website and access its...

2017.4 7288 . 2018.3 9808