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 projects - For each module, create a NEW coding project. Remix this basic basic index.html and style.css Glitch project.
Include and demonstrate

  • all the HTML and CSS elements in the elements and tags list for the module
  • content in ONE html file, styling in a linked css file
  • comments throughout all coding and stylesheets to document your work

To submit your coding project for grading, submit the web address of your coding project .html page.

These are learning and practice projects. You will get a grade and feedback. If you missed some of the required items, fix the code and RESUBMIT for review and regrading.

HTML and CSS Basics - Coding project requirements
** BASICS ** Keep it Simple. Demonstrate that you understand all these and they are visible in your code. We will get to the fancy stuff later. For now, just provide the minimum requirements described here and in the grading Rubric in a new empty project.

  • .html - doctype, html, head, body, title, p, h2, comment
  • .css - font-family, color, comment, cascading - external, internal (embedded), in-line
  • ordered lists with 2 different numbering, un-numbered lists with 2 different bullet types, nested lists,


  1. In this module and others, there are quizzes and surveys. Please respond to these even if they are not in the list of activities. In addition to the Activities page, also look through the list in the Modules menu on the left of the Canvas screen.

  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 - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
    * Chapter 4 Basic HTML Elements . Chapter 6 Structure and Layout with HTML . Chapter 12 Targeting Elements

    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. Coding project - Create a NEW coding project to clearly demonstrate the elements and properties associated with the current module coding project. Create a new project for the coding project for each module.
    Glitch always starts with something. Log in to your account. Remix this Basic project.

  5. Page basics - See HTML and CSS Basics coding project required elements (above). Use all the elements and tags listed appropriately. You will need several paragraphs of text in your project to use to apply the coding. 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 What is CSS - There are three ways to apply CSS to HTML: In-line, internal (or embedded), and external. https://www.hostinger.com/tutorials/what-is-css
    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. Your HTML coding project has a unique web address. The coding project web address is the Share Live site web address link. This is the web address to share in the discussion and submit for assignment grading. This is the web address to provide to the code validation tools - next activity.

  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. 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 editor?
    This is an opportunity to share your work with others, see what others are doing, get ideas, ask questions, ...

  12. Review your own work. How did you do? Included all the required items in the coding project description? Comments in HTML AND CSS code? All the required elements are visible in the page display? Fixed coding errors highlighted by code validation site? Understand the learning objectives for this coding project? Understand how these elements would be included in professional web sites? What questions came up during the coding project? How did you resolve them? Would you do something differently next time? Check your work. Update your coding project if necessary. Write a brief description of any problems your had with the coding project. Post your response to the Basic HTML - Review assignment. Provide some specifics of your learning experience.

  13. What is the internet, really? When we talk about the internet, what does that look like? Hardware, software, networking, communications, manufacturing, sales and service providers. Pick one aspect of the internet infrastructure and find 2-3 resources that provide information to help understand what the internet is, its components and operation. Post a summary of your findings and the links to the Internet infrastructure discussion. Review the posts of 2 others and comment on the relationship between your findings and theirs.

  14. Great Web Design - Throughout the course we will be looking at a lot of web sites for information (content) and for format and layout (style) and for functionality (user interface). All these are components of web design. That is a lot to cover. We will look at elements of each of these throughout the course and bring them all together in the end. So what makes a great web design? Find a resource that discusses the features that make a great web design. Post a link to your selection and 2-3 sentences about why this will be important to remember throughout the course to the Great Web Design discussion. Review 2 others and point out one specific item that you think is particularly important in web design.

  15. Web Literacy - Read / Exploring - 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 Exploring 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.

  16. Success Skills (also known as Learning Literacies) address the demands of being a lifelong learner in today's world. Do you study the way you do because somebody taught you to study that way? Probably not. Learning to learn is rarely taught. Throughout the course we will introduce the learning literacies - more that just study skills. The six topics cover a wide range of technologies and their application to education and personal growth. The first skill is Find it - Research and Information Fluency - browsers, search. There are millions of resources on the internet. 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.

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

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


The CIS89A Web Development course introduces Cascading Style Sheets (CSS) right from the beginning. The CSS references are usually covered separately from basic HTML coding.


Textbook - Read HTML and CSS Visual Quickstart Guide, Ninth Edition. Casabona.
* Chapter 4 Basic HTML Elements . Chapter 6 Structure and Layout with HTML . Chapter 12 Targeting Elements


In addition to the textbook, many of the details of elements and attributes for the the elements are available from online sources. Because these change, the textbook just covers the basics. Below are links to some of the resources. Other resources are available - just search online.

Lists


Examples

AJM Photo
"Welcome to AJM PhotoOrdered Lists Birds are great Birds are gre...
HTML and CSS Basics
"Hi there!I'm learning web development!I'm your cool new webpage. Made wit...


HTML

Glitch editor

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

list-style-image

custom list bullets or markers that are little pictures


.. basics,video - these are just a few of thousands of video tutorials

HTML Crash Course For Absolute Beginners - YouTube
In this crash course I will cram as much about HTML that I can. This is meant for absolute beginners. If you are interested in learning HTML but know nothing, then you are in the right place. We wi...


.. htmltutorial - online resources

YouTube - Web Development Tutorial for Beginners (#1) - How to build webpages with HTML
In this video, we'll cover how to develop websites using just the computer you have already.EVERYTHING you need to learn Web Dev or keep your skills current in 2020! This curated list covers b...
HTML Tutorial - How to Make a Super Simple Website - YouTube
If you're an absolute beginner in web development, you can learn the basics of HTML here. This video covers setting up an HTML file, and the basic HTML tags and what they mean. Download the web...
Learn HTML Videos - W3schools
We have made a video tutorial thatcovers all the basics of HTML- in a new fun format :-} Watch the first chapter for free! whole course $9.99Video courseLearn HTML by watching an educational cartoo...


Cascading StyleSheets (CSS)

CSS Zen Garden

many examples of CSS style sheets

CSS Examples

nice list of examples of the CSS code for specific styling.
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...


HTML Checkers

The W3C Markup Validation Service
Markup Validation Service Check the markup (HTML, XHTML, …) of Web documents. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. there are other valida...
15 Most Popular HTML Validator Online Tools in 2020
HTML Validator can be defined as the process to validate HTML web elements for any syntax or format errors.Why validators came into the picture?When a developer designs a perfect web page, then he...


HTML / CSS REFERENCE

HTML Reference
HTML Tags Ordered AlphabeticallyHTML Reference With Browser SupportThe table below lists all HTML elements and their attributes, along with browser support:Defines the document type<a> Defin...
References | HTML Dog
HTML ReferencesTag-by-tag, property-by-property, and more, references for HTML and CSS. Tags: All of the valid HTML5 tags, with description and usage, example, and required and optional attribut...


INTERNET

What is Web3 and Why It Matters | On Digital Strategy | Dion Hinchcliffe
the future of the Web, especially as it relates to creating, storing, and exchanging information, can be better achieved by incorporating decentralization based on blockchains. That’s really it,...
What Is DNS? Everything You Need to Know About the Web's Phone Book | PCMag
Domain Name System (DNS) is the phone book of the internet. It’s the system that converts website domain names (hostnames) into numerical values (IP address) so they can be found and loaded into...
What is Web3?
Web3 is a term used to describe the next iteration of the internet, one that is built on blockchain technology and is communally controlled by its users. new era of the internet, one in which use a...


FIND

How Search Works - YouTube
The life span of a Google query is less then 1/2 second, and involves quite a few steps before you see the most relevant results. Here's how it all works. page rank, search results, ads transcr...
Perplexity Blog
"What's the difference between Quick Search vs. Copilot Search?While Quick Search gives you fast, basic answers, Copilot goes further. It asks for details, considers your preferences, dive...
How to Be Amazingly Good at Asking Questions
You might not be getting the feedback you need to make corrections in your behavior. You might not be getting type of answers that you need to hear. You also might just be getting downright wrong i...


READ

12 Crucial Strategies for Promoting Team Collaboration
Ideally, you should be discussing your team's goals on a daily basis.A team that knows their individual -- as well as collective -- goals helps to reduce silos and keep everyone productive.Morn...
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...


2021.10 10,181 .