CIS89A - 1. Getting Started

From WikiEducator
Jump to: navigation, search
Sunset in Saguaro National Park

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, you will learn to develop entire web sites and control the appearance, formatting and contents of a site using these elements.


The key skills of web development are teamwork, attention to detail, debugging, project management, distributed version control, the agile process, accessibility and usability, user needs analysis, user testing, and much more. You will have an opportunity to practice all of these as well.



Learning outcomes

  • explore the HTML language formatting and element structures
  • use the basic HTML elements for a simple web page



Keywords

  • HTML, web, internet, element, tag, formatting, hypertext, markup language


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?



Assignments

Webmaking: More than just coding, webmaking is the act of creating, understanding, and promoting content on the Web

For each topic, there are a number of activities listed. These are all related to web development - as practice, examples of design, user interface, accessibility, development tools and industry knowledge. This a 3 unit course, so you should expect to spend 9-12 hours on course work each week. The activities can be completed throughout the week. Don't try to do all the work all at once just before the deadline. Spread the work out through the week.

Critical Friend - Something to think about ... Many of the activities include research and accessing existing web sites. This is an opportunity for you to practice your web site review and evaluation skills. In addition to the explicit activity requirements, take a few minutes to critically examine the site. What is the overall effectiveness of the site? What were the important elements of the user experience? Navigation? Content information presentation? Design - fonts, color, use of white space? If there are features that you like but don't know how to produce, spend some time reviewing the page source as well. If you were the site devloper's critical friend, what would be your feedback?


Here are the assignment activities for this module.

  1. Read the Syllabus - CIS 89A Web Page Development. There is a lot of important information in the syllabus. If you have questions, please ask by posting in the Syllabus questions discussion. If you don't ask, I will assume that you have read the entire Syllabus and agree with everything.

  2. Learn about the Canvas course management system and online education. 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 review Canvas Student Guide and Discussion participation guide.
    Submit Online Orientation assignment.

  3. In the Discussions forum, introduce yourself to your classmates. Write an 'introduction in 140 characters or less' about yourself. 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.
    * Edit the title of your post to your name.
    For example, here is my introduction.
    Valerie Taylor - always learning something new, sharing something important and interesting
    There is more to the story than what you can say in 140 characters. Use the "Reply" link to ask questions about other introductions.
  4. Add a picture to your Canvas profile. Go to My profile setting, select Edit profile, and add a picture. This will show up as the little picture next to your discussion posts.

  5. Edit (or reply to) your Introduction post (or reply to 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.
    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?

  6. Digital literacies - With technology becoming ever more prevalent in today's world and Apps being designed to meet specific needs, it is becoming increasingly important to identify these technologies and recognize how they may be of benefit to you now and when you graduate. Complete this short quiz to reveal a personalized profile spanning six different genres, which suggests ways you can improve how you use technology within your studies. These could have further reaching applications for when you graduate and apply for jobs. Digital Literacies Quiz

  7. Optional - requires that you provide your email address to get results. The Inner Heroes Personality quiz http://www.innerheroes.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.

    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 for partial credit. You can get an extension and full credit if requested prior to the due date. For full credit, complete and thoughtful replies must demonstrate original thinking and personal experience.

  8. 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.
    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.
    Cascading Style Sheet .css file - also look for links to the external stylesheet file. <link rel="stylesheet" href="style.css"> This statement should be in the <head> section of the HTML source. Follow the link and look at the source code for this file too. This is a shared description for the display of any pages that link to this .css file.

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

    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.

  10. Review the Keywords and Reading guide at the top of this page. These will help you look for important ideas in the rest of assignments for this module.

  11. Read the Introduction and Chapter 1. Getting Started in the textbook.
    HTML A Beginner's Guide, Fifth Edition. Wendy Willard.

  12. Thimble HTML Editor - Assignments can be completed using Mozilla Thimble - an online HTML Editor, so you don't have to have a separate application installed on your computer.
    Learn the basics with this introduction tutorial. Watch the Welcome Mozilla Thimble video to learn more about the tools. Explore the site.
    Create a Thimble account. To submit assignments, provide sharing link to your Mozilla Thimble page display.
  13. Remix one of the Thimble sample projects. Change the text on the page and change the page name. Keep it simple this week. You will have plenty of opportunity to make it fancy as we cover other topics in the course. Then Publish your work. Thimble will display a dialog box where you can 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".
    You have done it. You have created a web page!
    Here is my "remix" of My Six-Word Summer which I changed to My 140 Character Introduction https://thimbleprojects.org/vtaylor/447714
  14. style.css - Thimble automatically sets up and external Cascading Stylesheet style.css file for you in your project - listed in project files list on left. Have a look at what is there. Look at the code on your project index.html for the link to this style file. This is where the style descriptions go. Although there are other places to define styling, using this external styleheet is an important part of the CIS89A Web Development course.
  15. Share you Mozilla Thimble page - Copy the web address of your display page and post it along with a short summary (2-3 sentences) about your "test drive" experience to the Mozilla Thimble discussion.
    If you have questions about Thimble, please ask.

  16. Getting Started - Survey - This Google form survey includes all the questions in the other "surveys".
  17. 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 Mozilla Thimble tools. These resources are designed to support the latest versions of modern browsers like Mozilla Firefox or Google Chrome. Also, the Canvas software is designed to run with Firefox.
    Check out your browser with the Computer Readiness Test. The Computer Readiness Test will test your current browser for plugins and versions to help you better navigate our Canvas site. To begin, hit the "Start" button below, once complete, the test will output the results.
    If necessary, download and install a browser that works well with Mozilla Thimble.
  18. 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.

  19. 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. We will be looking at specific components of the map, your understanding of each and how these impact you as a web developer.
    In the Exploring description, review the skills. How are you doing? Do you have these skills? How do you get them? Why are these particular skills important? Pick one thing you need to work on. Do some research. Find some answers. Post the skill, what you learned and a link to a useful resource to the WebLiteracy - Exploring discussion.

  20. 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 1-2 sentences, answer these 2 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.


Icon multimedia.gif

Media


Mozilla Thimble - an online HTML Editor


BASICS

HTML Tutorials | HTML Dog
HTML is where the magic of web page design begins. It isn’t presentational — that’s what CSS is for — HyperText Markup Language is a simple, elegant way to structure content."
...
Starting with HTML + CSS
short tutorial is meant for people who want to start using CSS and have never written a CSS style sheet before. It does not explain much of CSS. It just explains how to create an HTML file, a CSS f...
Thimble by Mozilla - Features
Thimble is a full-featured code editor that runs right in the browser. It's designed to help new coders create their own sites and web-based projects using HTML, CSS & JavaScript. Everythin...
HTML for Kids | Learn Web Design The Easy Way
Learning HTML For Kids. about the markup language HTML.This tutorial will give you solid, basic knowledge of HTML and how to create webpages. Text with basic formatting Lists Links Images...
Fix Your Site With the Right DOCTYPE! · An A List Apart Article
2002 DOCTYPES are also essential to the proper rendering and functioning of web documents in compliant browsers like Mozilla, IE5/Mac, and IE6/Win. A recent DOCTYPE that includes a full URI (a comp...
Learn HTML in 15 Minutes - YouTube
how to use 50 different tags in HTML. I then give an example of each. This video was done because of a dare. Link to article on HTML with examples: http://bit.ly/cFDX8I
<p class=...
Quick Introduction to FTP
"FTP is short for File Transfer Protocol, and that's just what FTP is: the file transfer protocol in the Internet's TCP/IP protocol suite. Not sure what those words mean? Check out FTP...


2014.4 662 . 2014.8 1527 . 2015.1 2640 . 2016.3 5392 . 2016.7 6396 . 2018.5 12,294 .