CIS89A - 2. Basic HTML

From WikiEducator
Jump to: navigation, search
Mooc Components

HTML basics

Although web pages have become more complex and visually impressive, they are created using the same basic HTML elements that have been the foundation of the web from the beginning. It is all about letting the world know you have something to say and you understand the simple framework for a web page.

Learning outcomes

  • explore the HTML language formatting and element structures
  • create and save an HTML file
  • preview an HTML file in a browser
  • add comments to an HTML file


  • HTML, web, internet, element, tag, formatting, hypertext, markup language, special characters, comment, style sheet, color identifier

Reading guide

  • What is the origin of the HTML structure?
  • Who controls the HTML standardization?
  • Why is standardization important?
  • Why does the HTML standard change? What is the process for making changes?
  • Why are style sheets called Cascading?
  • What are the advantages of using style sheets?


There are several types of activities within the Assignments for each module. In addition to preparing and publishing actual web pages as HTML files, you will be doing research, participating in discussions and test driving web based tools that will introduce you to other web resources.

Assignment file name and required elements

  • cis89basic1.html - doctype, html, head, body, title, p, h2, comment * stylesheet.css - font-family, color, comment

For each module you will create a web page that includes a number of HTML elements, tags and techniques. Save your file as the file name for the assignment and demonstrate all the HTML elements in the assignment list. The head section of all coding assignment pages must include the page name as the title, and a link to your stylesheet .css file.

Include the assignment file name and the requirements information as a comment in your web page. Copy the line above and include it as a comment. Include comments throughout all coding and stylesheets to document your work.

To submit your HTML file for grading, copy the actual web address for your saved HTML file into the assignment and submit.

For example, for the Basic HTML assignment, save your work. Your project file with name cis89basic1.html. This file should include the elements and tags used appropriately: doctype, html, head, body, title, p, h2, <!-- (comment). The style sheet .css file should include style, font-family, color, and comments.

  1. Before you start the reading and the assignments, take a few minutes to think about what you already know about the topic - Web Development. Write a sentence or two about this in 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. Document Setup and Style Sheet Setup - HTML is for markup and content. CSS is for presentation.. These are the fundamental building blocks for all web development. Review HTML and CSS resources provided and referenced textbook chapters.

  4. For HTML coding assignments, use Mozilla Thimble to create and save your work. If you haven't created a Thimble login, click on the Join us! button to create your account now. If you have an account - sign in.
    Reminder: Thimble is public so anyone can see your work there.

  5. Create an HTML file. Using the Thimble editor, start a new page - Start from scratch. Notice there are two views - Editor and Preview. Make changes to the HTML on the left and immediately see the results on the right.
  6. Page basics - Thimble automatically provided the basic elements for the page because it knew you needed them. Start thinking about a web site you will be building for a final project for the course. Add some information about your proposed project and format the information so you incorporate all the elements and tags for the assignment. Remember, your work is published in a public place so please don't provide any personal contact information.
    To save your work, click Publish. In the dialog window, provide your own description. The HTML file will be saved and a web address will be displayed that is a link you can share. Note: your HTML file doesn't end in .htm or .html because the Thimble editor is handling all the storage and display. Later in the course, we will be using other editors and DeAnza server storage. The files will have to have the .htm or .html file extension to be displayed properly.

  7. Review Applying CSS - There are three ways to apply CSS to HTML: In-line, internal (or embedded), and external. Then add style elements and attributes to your HTML file and .css file to demonstrate the "cascading" feature. For example, set the font-family and color to different values to show how cascading is working and explain with comments.
  8. Save the updated HTML file.

  9. Comments - All your code must be "documented" - include comments to explain what you are doing. It must be clear from your comments where you have included each of the required elements, attributes and properties and that you understand how these work to get credit for the coding assignments.
  10. Check your work. There are a number of HTML code validators - HTML Validator or Markup Validation Service work well. Use one to check the code you have written. Just copy your HTML code and paste it into the textbox in the online form. Fix any errors that the validator finds.
    Note: Check your work for every coding assignment throughout the course before you submit it.

  11. Submit the web address of the HTML file to the Basic HTML assignment. Make sure you include all the required elements in your page. Your grade for the page will be recorded here along with feedback and comments.

  12. AND In the Basic HTML discussion, post the link to your file and a short note about developing this page. Did you have any questions? Do you like using the Thimble editor?
    This is an opportunity to share your work with others, see what others are doing, get ideas, ask questions, ...

  13. Web Literacy - Review the Web Literacy Map description and the background. This is a very comprehensive list of skills and information. These are all important to web developers. We will be looking at specific components of the map, your understanding of each and how these impact you as a web developer.
    In the Exploring description, review the skills. How are you doing? Do you have these skills? How do you get them? Why are these particular skills important? Pick one thing you need to work on. Do some research. Find some answers. Post the skill, what you learned and a link to a useful resource to the WebLiteracy - Exploring discussion.

  14. Success Skills (also known as Learning Literacies) address the demands of being a lifelong learner in a world where so much of what we do makes use of technologies. The six topics cover a wide range of technologies and their application to education and personal growth. Some of these links are not directly related to Web development. They do provide interesting information. These sites are also an opportunity to expand the range of web sites you visit. Look at the site design and think about your "user experience" as well as the information.

    Success Skills - Find it - Research and Information Fluency - browsers, search. The internet provides millions of resources. Being able to locate specific credible information is more than a simple Google search. Review 2-3 articles from Success skills Find it. Post a link and a brief summary of 1 to the Success Skills - Find it discussion.

    NOTE: REVIEW - When reviewing the discussion posts of others - read the description, follow the link and look around. If you have a question or something to add to the discussion, you can reply to the post. Otherwise a reply is NOT necessary. The discussion is a handy way to share links to interesting sites. Visiting many different examples of web sites, web-based applications, online tools and current technologies is a great way to learn more about Web Development.

  15. Look up your name in one or more search engines - How Many of Me, Wikipedia, LinkedIn, DuckDuckGo, Google. Are you there? How is your name used? Are there other people with the same name listed? Is there a problem for you if people mistake the other person for you? How many links were found that contained references to people with the same name as you? Look at a few of these sites. Are there some interesting people who share your name? List 3-4 people in discussion Interesting People with My Name.
    There are more than 400,000 references to Valerie Taylor. There is a romance novelist, a professor of Electrical Engineering, an English actress, a shark researcher and a woman who works to build hospitals in Bangladesh, and me, just to name a few.
    Note: Posting personal information to the discussion is optional. This is a privacy issue for some. If you prefer not to share this information with the class, send your response to the instructor by email.

  16. Privacy of student records: All student information posted and discussed within this course is considered private and confidential. This is not a "public forum". Only enrolled students and designated instructors have access to these discussions. No student information may be accessed or shared with anyone not enrolled in the course. These rules apply to any DeAnza College courses - on-campus or online. This is a safe place to freely express yourself and learn from others in this academic environment. We respect your right to personal privacy. ... DeAnza Privacy Statement

  17. Phishing - Do you think you know an email scam when you see one? Take this quiz and see if you can tell the real corporate emails to customers from the phishing scams. I got 7 out of 10 right. I missed 1 scam but I would have ignored two real requests from companies I do business with.

  18. eCommerce - Some of the "best" examples of web site design are the sites that sell stuff. Find a site that sells products or services online. Think about why the customer visits this site. How does the site design help the customer buy from the site? Post a link to a commercial web site with a brief description of what makes this a successful (or not) web design to the eCommerce site design discussion. Keep the description short - 2-3 sentences.

Icon multimedia.gif


Note: the textbook HTML: A Beginner's Guide by Wendy Willard, introduces the concept of Cascading Style Sheets (CSS) right from the beginning. Many other HTML books and tutorials address CSS as a separate topic for more advanced web page development. For CIS89A we are following the textbook sequence. If you use other guides or books, you will find the CSS references are usually covered toward the end of the material or in a separate guide specifically for CSS.


  • Wendy Willard - Chapter 2. Document Setup, Chapter 3. Style Sheet Setup
  • HTML Dog HTML Beginner Tutorial
  • Visual Quickstart - 3. Basic HTML Structure
  • HTML Cheatsheet - a reference guide for the most commonly used HTML tags.
  • Color Names Supported by All Browsers - 140 color names are defined in the HTML and CSS color specification (17 standard colors plus 123 more). The table lists them all, along with their hexadecimal values. The 17 standard colors are: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow.

Cascading StyleSheets (CSS)

HTML editor

  • Thimble editor - simple HTML code editor, provides preview of the web page you are working on as you work, provides hints, syntax as you type


Examples | HTML Dog
Stripped-down, bare-bone examples demonstrating various HTML elements and CSS properties. See them in action and tinker — play with the code and watch what happens.Text Headings: h1 to h6 in the...
12 Little-Known CSS Facts — SitePoint
new things — properties you’ve never used, values you’ve never considered, or specification details you never knew about. new little tidbits Admittedly, not everything in this post will have...
CSS Zen Garden: The Beauty of CSS Design
There is a continuing need to show the power of CSS. The Zen Garden aims to excite, inspire, and encourage participation. To begin, view some of the existing designs in the list. Clicking on any on...
Basic CSS: The Cascade, And Why Go External? | Designorati
CSS is a wise and good way to create rock-solid styling that is easy to update and separates style from content. Stating the obvious: having external CSS keeps our HTML as simple as we can, and the...
Basic CSS: Inline, Embedded, External: What’s The Difference? | Designorati
three main types of web page style sheet implementation; inline styles, embedded, and external. Embedding is taking the all the styles one will be using in the page and consolidating them in a sing...
CSS Beginner Tutorial | HTML Dog
"teach the bare essentials - just enough to get started. CSS, or Cascading Styles Sheets, is a way to style and present HTML. Whereas the HTML is the meaning or content, the style sheet is the...
CSS Online Training - tutorialspoint
video CSS is used to control the style of a web document in a simple and easy way. CSS is the acronym for "Cascading Style Sheet". This online training covers both the versions CSS1,CSS2...

2018.3 8472