CIS89A - 2. HTML Basics

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. Let the world know you have something to say. Use the simple framework for a web page.
Lists are everywhere. Much of the information on the web is text. Using lists for text increases readability and helps viewers skim text to find what they are looking for.


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
  • use each of the list types in a web page
  • combine list types
  • use customized list formatting


Keywords

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

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?
  • What types of lists are available?
  • How can list appearance be altered?
  • What customization can be added to list appearance?


Assignments

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

Coding assignments - For each module, create a coding project. Include and demonstrate

  • all the HTML and CSS elements in the elements and tags list for the module
  • name and the requirements information as a comment
  • comments throughout all coding and stylesheets to document your work.

To submit your HTML and CSS coding project for grading, copy the web address for your project LIve App or view into the assignment and submit.


HTML and CSS Basics - Coding project title and requirements

  • HTML and CSS coding project required elements
  • .html - doctype, html, head, body, title, p, h2, comment
  • .css - font-family, color, comment, cascading - external, internal (embedded), in-line
  • li, ol, ul, dl, i, A, dt, dd * ordered lists with 2 different numbering, un-numbered lists with 2 different bullet types, nested lists, definition list used appropriately
  • .css - list-style-type, customized bullets (list-style-image) - look it up in an online resource


  1. 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 are important ideas in the assignments for this module. Review the Media section (below - scroll down) for links to resources for this module.

  3. Textbook - HTML and CSS Visual Quickstart Guide, Eighth Edition. Castro and Hyslop
      Read chapters 3. Basic HTML Structure, 4. Text, 15. Lists

    HTML is for markup and content. CSS is for presentation. These are the fundamental building blocks for all web development. Review resources provided in the Media section below and referenced textbook chapters.

  4. Create a new coding project - start from scratch. If you are using Glitch, notice there are two views - Edit Project and Show. Make changes to the HTML and CSS and immediately see the results on the Show view.
    Suggestion - have both views open either as separate browser tabs or browser windows. Or use the side-by-side view.
    Recommended: For HTML and CSS coding projects, use Glitch to create and save your work.
  5. Page basics - Glitch automatically provides the basic elements for the html and css files because it knows you need them. The tags and elements for this module project are listed. See HTML and CSS Basics coding project required elements (above). Use all the elements and tags listed appropriately.

    Find several paragraphs of text and copy these to your project to use to apply the coding. Be sure to include the web address of the source text to provide "attribution" - give credit to the original author of the text. Remember, your work is published in a public place so please don't provide any personal contact information.
  6. Comments - All your code - .css and .html code, must be "documented" - include comments to explain what you are doing. Include a comment with each of the required elements, attributes and properties. Show you understand how these work.

  7. Review Applying CSS - There are three ways to apply CSS to HTML: In-line, internal (or embedded), and external. Add style elements and attributes to your HTML code and stylesheet 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. Share your HTML code. Glitch saves your HTML code. Share the Show Live display web address link.

  9. Check your work. There are a number of HTML code validators such as Markup Validation Service. Check your code. Copy your HTML code and paste it into the textbox in the online form. Note: Glitch adds some lines of code that the checkers may not recognize. This isn't an error, just something to notice. Check your work for every coding assignment throughout the course before you submit it.

  10. Submit the link to your coding project to the Basic HTML assignment. Include all the required elements in your code. Your grade for the coding project will be recorded in the Canvas Assignment along with feedback and comments.

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

  12. Web Literacy - Read - The skills in the Mozilla Web Literacy framework are all important to web developers. Reading on the web is a critical skill for engaging content online. Review the web literacy skills in the READ group. How are you doing? Do you have these skills? Pick one thing you need to work on. Do some research. Find an online resource that provides some answers. Post the skill, what you learned and a link to a useful resource to the Web Literacy - Read discussion.

  13. Success Skills (also known as Learning Literacies) address the demands of being a lifelong learner in today's world. The six topics cover a wide range of technologies and their application to education and personal growth. These sites 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 the Success skills - FIND resources in the Media section below. Post a link and a brief summary of 1 to the Success Skills - Find it discussion.

  14. Look up your name in one or more search engines - DuckDuckGo, LinkedIn, 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 you or 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.

  15. 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, Policies & Procedures

Icon multimedia.gif

Media


HTML and CSS - 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.

  • Textbook - Wendy Willard
  • Chapter 2. Document Setup, Chapter 3. Style Sheet Setup, Chapter 10. Creating Lists

HTML

  • HTML Dog HTML Beginner Tutorial
  • 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

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


CSS

Learning CSS by Parkour Ninja on Prezi
With CSS, this entire task can be accomplished with three rules. All I need to do is set a rule for the entire document that the font is "Times New Roman" and a rule for headings that the...
Appendix B: CSS Reference - HTML5 & CSS3 Visual Quickstart Guide (Eighth Edition)
CSS reference tables:Table B.1—CSS Properties and Values: Designed as a quick reference to many common or useful CSS properties, their default value, allowed values, where the value is inherited,...
Advantages and Drawbacks of Inline Styles in CSS
Inline styles are CSS styles that are applied directly in the page's HTML. There are both advantages and disadvantages to this approach.they can over-ride things you didn't intend them to....
HTML vs CSS - 6 important Comparisons You Must Learn
HTML provides the structure of web pages whereas CSS is mainly used to control the styling and layout (visual and aural) of web pages. HTML provides tags that are surrounding the content of any web...


FIND

Refine web searches - Google Search Help
Refine image searchesOverall Advanced Search Go to Advanced Image Search. Use filters like region or file type to narrow your results. At the bottom, click Advanced Search.Refine web searc...
Webmaker/WebLiteracyMap/Exploring - MozillaWiki
"ExploringReading the WebNavigationUsing software tools to browse the Web Accessing the web using the common features of a browser Using hyperlinks to access a range of resources on the...
How to Use Wikipedia for Research - Online Education Blog of Touro College
Here are three ways that students can utilize Wikipedia as a trustworthy research resource:Research – At the bottom of each Wikipedia article is a “Reference” section. This section provides l...


READ

Evaluating Internet Resources | Georgetown University Library
information available on the Internet is not regulated for quality or accuracy; therefore, it is particularly important for the individual Internet user to evaluate the resource or information. Kee...