User:Vtaylor/CIS 89A HTML and CSS/CIS89A - 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 comment to an HTML file

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

Study notes
 * 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?

== ==

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.

HTML editor
 * Webmaker - Thimble editor

Personal Learning Network (PLN) - the aggregation of single-functionality tools which enable learners greater control over their own learning experience. Instead of centralized, instructor-controlled learning, PLNs are distributed, social and learner-centric. PLN can include using web tools to create connections with others which extend our learning, increases our reflection while enabling us to learn together as part of a global community. PLNs increase our opportunities to ask questions and receive help compared to our normal daily face-to-face interactions.
 * Building an online space to highlight your academic work will help you come job search time. The article talks about graduate students but this is applicable to everyone looking for a job today.

== Assignments== 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 - doctype, html, head, body, p, <!--, style, font-family, color, h2

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. 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 with the file name cis89basic1. This file should include the elements and tags used appropriately: doctype, html, head, body, p, <!--, style, font-family, color, h2 Please 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.


 * 1) 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.


 * 1) Review Chapter 2. Document Setup and Chapter 3. Style Sheet Setup.

''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.''
 * 1) Look up your name in one or more search engines. How about Wikipedia? LinkedIn? DuckDuckGo? How Many of Me? 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.


 * 1) Learning Literacies - 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 in the Find it  - media selections. Post a link and a brief summary of 1 to the Learning Literacies - Find it discussion. Review 2 others.

In the Personal Learning Network discussion, post links to 3 web sites that provide useful information that you frequently visit as a source of new information or as a reference.
 * 1) Personal Learning Network (PLN) is your personal reference library. It includes web sites that you visit frequently for school and learning related information. Your PLN should include dictionaries, search engines, but also news and updates related to courses, even online communities of people who share your interests and provide useful information as blog posts, Facebook updates or tweets. Throughout the course, keep track of these links to interesting web sites with descriptions, as well as examples of formatting - tables, sections, pictures and multimedia.


 * 1) Web Literacy - In the Exploring description, review the skills associated with   Search - Locating information, people and resources via the Web; and  Credibility - Critically evaluating information found on the Web.   How are you doing? Do you have these skills? How do you get them? Why are these particular skills important? In the WebLiteracy - Exploring discussion, post a brief status report about your understanding and skills in the Search and Credibility  areas.

To save your work, click Publish. The dialog window is automatically filled. Change the file name to cis89basic1 and provide your own description. The HTML file will be saved as https://.. your Webmaker user id .. .makes.org/thimble/..jumble of numbers and letters../cis89basic1 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.
 * 1) You will need a WebMaker account to save your work. If you haven't created a Webmaker login, click on the Join us! button to create your Persona now. If you have an account (Persona) - sign in.
 * 2) 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.
 * 3) Page basics - Thimble automatically provided the basic elements for the page because it knew you needed them. Add some information about your Personal Learning Network 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.
 * 1) Add style elements to demonstrate the "cascading" feature. Add color to your page using at least two different types of color identifiers. Save the updated HTML file. Submit the web address of the HTML file to the Basic HTML assignment.
 * 2) In the Basic HTML discussion, post a short note about developing this page. Did you have any questions? Do you like using the Thimble editor?

Review the posts of 2 other students.
 * 1) Community Participation - Virtual "communities" are groups of people with common interests who share information, ask questions and have discussions online. Sometimes these are personal - family and friends, but many are professional or special interest groups. In the Community participation discussion, post a note about your online communities. These can be casual - Facebook groups, newsletters, discussion forums, or they can be more formal requiring members to join to participate.