User:Vtaylor/CIS 89A HTML and CSS/CIS89A - Getting Started

Getting started
 * You are here because you want to learn HTML and create web pages. Welcome! All web pages are built using a few essential elements. Through practice assignments, reading and discussions, your will learn to develop entire web sites and control the appearance, formatting and contents of a site using these elements.

Learning outcomes
 * explore the HTML language formatting and element structures
 * use the basic HTML elements for a basic web page

Keywords
 * HTML, web, internet, element, tag, formatting, hypertext, markup language

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?

== == The course follows the textbook - HTML A Beginner's Guide, Fifth Edition. Wendy Willard.

In each module, there is a reference to the textbook chapters as well as the online tutorial and optional reference guide. So you will see all three listed in the Media section.
 * Textbook (Wendy Willard) - HTML A Beginner's Guide, Fifth Edition. Wendy Willard, 2013. ISBN 978-0-07-180927-6


 * Online tutorials - HTML Dog Tutorials
 * Video tutorials - HTML5 tutorials - Introduction + 52 more


 * Optional (Visual Quickstart) - HTML and CSS: Visual Quickstart Guide, Eighth Edition. Elizabeth Castro, Bruce Hyslop, 2014. ISBN 978-0-321-92883-2.

For the Getting Started module - here are the main references
 * Wendy Willard - Introduction, Chapter 1. Getting Started
 * HTML5 - Introduction
 * HTML Dog Tutorials - Getting Started, Tags, Attributes and Elements
 * Visual Quickstart 1. Webpage Building Blocks

Simple web pages, basic HTML from Web 2.0 Design Guide from 30 Beautifully Simple Websites
 * Really simple web page - created with Thimble but includes a few of the elements covered in the coming weeks.
 * http://www.markboultondesign.com/ - the HTML for this site is simple and easy to follow.
 * http://simplebits.com/
 * http://www.artypapers.com/
 * http://www.verticalgardendesign.com/
 * http://www.augustinteractive.com/
 * http://hatbox.co/
 * https://www.youtube.com/watch?v=Mp0f0zTPLec (video 4:16)

Web Literacy, background, searching
 * Web Literacy Map - nice overview of all aspects of the web, understanding the structure, important issues like security and privacy and the skills necessary to be an informed users and contributor.
 * Web Literacy Learning Pathways - HTML, CSS and JavaScript skills to create this interactive map using Mozilla Thimble. Click on links in any box to highlight the prerequisite knowledge and what this is a prereq for. You have to try it yourself as it is hard to explain. The idea is that there is a learning pathway through the entire structure.
 * Webopedia - IP address - Internet Protocol (IP) address, URL - Abbreviation of Uniform Resource Locator (URL) it is the global address of documents and other resources on the World Wide Web.
 * Search Operators - Narrow down your search results by adding symbols and words to your search called search operators.
 * How to Become a Search Ninja: Harnessing the True Power of Google - boost your search skills. If the results are in Google's index, they can be found.
 * ;http://pennystocks.la/internet-in-real-time/ Internet in Real-Time] - the amount and rate of activity is constantly increasing so as soon as anything has been produced it’s already out of date. This one is different as it shows you how quickly data is generated – in real time.

HTML / CSS tutorials, reference
 * TutorialsPoint - good tutorials for HTML and programming languages, HTML Quick Guide, handy online reference guides, web developer tools
 * Code Academy - HTML, CSS - interactive tutorial that covers all the basics
 * Create a Simple Web Page with HTML - covers creating web pages from the very start
 * Bucky's Room - computer programming, computer science, math, physics, chemistry, biology
 * What Beautiful HTML Code Looks Like - looks at each line of HTML code on the sample web page, and describes the good points
 * HTML5 Test - text your browser's HTML5 support

== Assignments== Your responses to this and all other assignments will be graded for college-level writing. Spelling and grammar errors will result in deductions. Late submissions are accepted but points will be deducted for late submissions, unless you get an extension from the instructor prior to the due date. Complete and thoughtful replies that demonstrate original thinking and personal experience are necessary for full credit.


 * 1) Read the Syllabus - CIS 89A Web Page Development. There is a lot of important information in the syllabus.
 * 2) Read Welcome to CIS89A that describes how to get started. This page describes how the class works in detail and answers many questions that you might have. Also read Introduction to CATALYST (aka Moodle) and  Discussion participation guide.


 * 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) Complete the survey I am here.... This will help determine how quickly we move through the course and how many related topics to explore along the way. This is an introductory course, so we will start at the very beginning and work up to more complex web page development. There are more challenging assignments for students who already know how to build basic web pages and want to learn more advanced techniques and technologies.


 * 1) Read the Introduction and Chapter 1. Getting Started in the textbook.

''Valerie Taylor - Open education. How can I help?'' There is more to the story than what you can say in 6 words. Use the "Reply" link to ask questions about other 6 Word Stories. Write 2-3 sentences describing why you are taking this course and what you hope to learn in the class. Is this "for fun" or do you need to take this class for work or school? Are you enrolled in other DeAnza classes this quarter? Have you taken other distance learning classes? Could you physically get to DeAnza campus in Cupertino? If not, why not - travel, physical limitations, transportation, child care, scheduling? Are you planning to travel during the quarter and keep up with the class remotely? Where will you be?
 * 1) In the Discussions forum, introduce yourself to your classmates. Write a '6 Word Story' about yourself (some examples). Post your introduction in discussion topic Introductions and expectations. Please use the Reply function to post your information. This will add your introduction to the topic discussion thread. For example, here is my introduction.
 * 1) Edit your Introduction, and add 2-3 sentences about your outside interests. Are you interested in art, music, computer games, travel, cooking? Do you have any pets? You can include a small picture. This is an opportunity to meet classmates with similar interests.
 * 1) The Inner Heroes Personality quiz http://www.truecolorscareer.com/quiz.asp  addresses how you interact with others. Take the quiz, then indicate your type - Helper, Thinker, Doer, Planner - in the I'm a... choice. Include it in your Introduction post

In the Exploring description, review the skills associated with Navigation - Using software tools to browse the Web, and  Web Mechanics - Understanding the Web ecosystem. 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 Navigation and Web Mechanics areas. Just one sentence about each, please.
 * 1) 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. Throughout the semester, we will be looking at specific components of the map, your understanding of each and how these impact you as a web developer.

Download and install a browser that works well with WebMaker if necessary.
 * 1) Browser check -  Everything for CIS89A happens on the web. Not only do we publish on the web, but many of the tools we use exist as web applications rather than installed programs on our computers. Because of this, it is critical that you run up-to-date web browsers when working with WebMaker tools. These resources are designed to support the latest versions of modern browsers like Mozilla Firefox or Google Chrome. Also, the Catalyst software is designed to run with Firefox.

Using Firefox to view the "source" - the HTML for the page -  From the top menu Tools > Web Developer > Page Source. Or right-click and select View Page Source. When you activate the Page source option, all the behind-the-scenes HTML is displayed. Look at the same page source using Mozilla Goggles. Same source, two different viewing tools. Look through the HTML coding and see if you can determine how the HTML tags are being used.
 * 1) View Page Source - Several "simple" web pages are listed in the selected Media section. These are examples of pages that use only basic HTML and are similar to what you can expect to make in the next couple of weeks. View the source.

Review the pages suggested by 3 other students. What did you think about the pages they selected? Do you have any questions about their selection and summary? Think critically about site design and how these sites are constructed.
 * 1) Real web pages - Find a web page with a nice layout and functionality. In the Learn from the Pros discussion, post a link to a web page that you like and give a brief description of the elements of the page.

NOTE: Review means just that - read the description, follow the link and look around - that is a "review" for the purposes of this course. 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. The objective is to visit many different examples of web sites, web-based applications, online tools and current technologies.

Create a WebMaker account. You will be using this account for your assignments. To submit assignments, you will provide a link to your WebMaker Thimble pages. You have done it. You have created a web page!
 * 1) Read the WebMaker About page to learn more about the organization and the tools. Explore the site. You will be using Thimble for most of your work.
 * 1) Thimble HTML Editor - We are going to be doing something new! All the assignments will be completed using some  online tools. Mozilla WebMaker provides Thimble - an online HTML Editor, so you don't have to have a separate application installed on your computer.
 * 2) Save your work - Change the text on the page. Then save your work. Thimble will display a dialog box where you can change the page name and provide information about the page you created. Add a description and save the file. Then follow the link so you can see the actual page   web address for "sharing". Make a copy of this web address to include in your post described in the next activity.
 * 1) Mozilla WebMaker Thimble - Post a short summary (2-3 sentences) about your "test drive" experience to the Mozilla WebMaker Thimble discussion.


 * 1) Week 1 in review - The first week of any class is pretty chaotic, so this a chance for you to stop for a few minutes and think about the CIS89A Web Page Development course. What was one pleasant surprise? What is one question that didn't get answered? In 2-3 sentences, answer these questions about your CIS89A 1. Getting Started experience. Submit your comments and questions as the Week 1 in review assignment. Be sure to click the "Submit" link as well - this puts your answer in the "ready for grading" status.

accessed 2014.04.10 - 662.