CIS89A - 2. Basic HTML

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


Keywords

• 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?

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.

HTML and CSS coding - For each module, create a coding project that includes and demonstrate all the HTML and CSS elements in the elements and tags list for the module. All coding projects must include the module name as the title element, and a link to your stylesheet .css file. Include the module name and the requirements information as a comment in your code. Include 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 saved project into the assignment and submit.

Note: For the purposes of this course Web Development includes HTML and Cascading Style Sheets CSS. If there is a reference to HTML without specifically referencing CSS, assume that it means HTML and CSS.

Module 2. Basic HTML Coding project title and requirements

• cis89basic1 HTML and CSS coding project required elements
• .html - doctype, html, head, body, title, p, h2, comment
• .css - font-family, color, comment

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 and CSS coding projects, use Glitch to create and save your work. If you haven't created a Glitch login, click on the Join us! button to create your account now. If you have an account - sign in.
   If you have some experience and would prefer to upload your coding projects to DeAnza's Voyager web server, you are welcome to do this as an alternate to Glitch. Everyone else - stick with Glitch.
   
   
5. Create a new coding project using the Glitch editor - start from scratch. 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.
6. 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 cis89basic1 HTML and CSS coding project required elements (above). Use all the elements and tags listed appropriately. Remember, your work is published in a public place so please don't provide any personal contact information.
   
7. Comments - All your code - .css and .html 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.
   
   
8. 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 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.
   
   
9. Share your HTML code. The HTML code will be saved and the Show Live display web address is the link you can share.
   
   
10. Check your work. There are a number of HTML code validators such as Markup Validation Service. Use one to check the code you have written. Just copy your HTML code and paste it into the textbox in the online form. Note: Glitch adds some lines of code that the checkers won't recognize. This isn't an error, just something to notice. Check your work for every coding assignment throughout the course before you submit it.
    
    
11. Submit the link to your coding project to the Basic HTML assignment. Make sure you include all the required elements in your code. Your grade for the coding project will be recorded in the Assignment along with feedback and comments.
    
    
12. 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, ...
    
    
13. 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 article that provides some answers. Post the skill, what you learned and a link to a useful resource to the Web Literacy - Read discussion. -- updated 2018.10.7
    
    
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 (link). https://wikieducator.org/User:Vtaylor/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 - DuckDuckGo, Wikipedia, 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.
    
    
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, Policies & Procedures

Media

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.

HTML

• 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 Dog CSS Beginner Tutorial
• Visual Quickstart - 8. Working with Style Sheets
• Visual Quickstart - 7-14
• CSS Cheatsheet - a reference guide for the most commonly used CSS selectors and properties.
• Applying CSS - There are three ways to apply CSS to HTML: In-line, internal, and external.
• Basic CSS: Inline, Embedded, External: What’s The Difference?
• CSS Zen Garden - many examples of CSS style sheets
• CSS Examples - nice list of examples of the CSS code for specific styling.

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

• How to Make Your Website More Accessible - Accessibility is about making your website accessible to all Internet users—everyone who wants to view it, both disabled and abled.

• 16 Practical Tips for Solving Your Problems More Easily - solve problems more easily. Doing some of these things early on can really help you solve the problem faster and with less struggle and pain.

CSS

How to Link CSS to HTML – Stylesheet File Linking

To link your CSS to your HTML, you have to use the link tag with some relevant attributes.The link tag is a self-closing tag you should put at the head section of your HTML.To link CSS to HTML with...

CSS basics - Learn web development | MDN

Selector This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, elements). To style a different element, change the selector.Declara...

28 outstanding examples of CSS | Creative Bloq

28 great examples of CSS sites that will provide a burst of web design inspirationBuilt using Ruby on Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has the ability to let travellers...

Style HTML by Using External CSS and Inline Style

There are three options for styling HTML elements. You can style HTML elements by using the inline CSS. The internal CSS is for styling whole pages. The external stylesheet can set rules for entire...

CSS 101 - Berkeley Advanced Media Institute

To style elements in a document, you simply apply rules to selectors. What’s that now? Simple: A “selector” is a way of referring to some specific element or group of elements on a page. For...

Transitions & Animations - Learn to Code Advanced HTML & CSS

With CSS3 transitions you have the potential to alter the appearance and behavior of an element whenever a state change occurs, such as when it is hovered over, focused on, active, or targeted.Anim...

CSS Crash Course For Absolute Beginners - YouTube

In this video I will cram as much as possible about CSS. We will be looking at styles, selectors, declarations, etc. We will build a CSS cheat sheet that you can keep as a resource and we will also...

2018.3 8472 . 2019.4 11,806 .