CIS89A - 1. Getting Started

Tim Berners-Lee talking at the World Wide Web Foundation press conference

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 is Tim Berners-Lee?
• What is the World Wide Web Foundation?
• 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.

NOTE: All activities - discussions, quizzes, assignments, for a module are due on the due date for the module.

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.

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 including participation expectations and due dates for assignments. Please confirm that you have read the entire Syllabus and agree with everything in the I Read the Syllabus assignment. If you have questions, you can ask here.
   
   
2. Learn about the Canvas course management system and online education. Read Canvas Student Guide. Submit Online Orientation assignment.
   
   
3. Introduce yourself to your classmates.
   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.
   
   Write an 'introduction in 140 characters or less' about yourself. 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.
   
   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.
   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?
   
   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.
   
   
4. 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 quick 30 question 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
   
   
5. 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.
   
   
6. Read the Introduction and Chapter 1. Getting Started in the textbook.
   HTML A Beginner's Guide, Fifth Edition. Wendy Willard.
   
   
7. View Page Source - 30 Beautifully Simple Websites links to a collection of simple websites. 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. ( Links to sites work although screen shot images may not.) View the source code for several.
   For example, 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 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. Complete the View HTML and CSS source code quiz.
   
   
8. Professional web pages - Find a web page with a nice layout and good 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. Make a note of this page as you will be learning some best practices of professional web development by analyzing the source code and evaluating the design of the site you selected throughout the course.
   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.
   
   
9. CSS Demonstration - CSS Zen Garden {Verde Moderna} shows the power of CSS (Cascading Style Sheets). CSS allows complete and total control over the style of a hypertext document. The only way this can be illustrated in a way that gets people excited is by demonstrating what it can truly be. See for yourself. The content on all these "sites" is the same. Only the CSS file is different. Check it out! View some of the existing designs - Mid Century Modern, Steel or select from the list on the page. Clicking the link loads the style sheet into this page. The HTML remains the same, the only thing that has changed is the external CSS file. Which 2-3 views did you access? What are some of the changes between views? Do you get it? Are you impressed? Post a brief comment about your experience in the CSS Experience discussion.
   
   
10. Glitch Web App Editor - Assignments can be completed using Glitch - a free online Web Development Editor, so you don't have to have a separate application installed on your computer.
    Learn the basics with this introduction tutorial. Watch the About Glitch video to learn more about the tools. Explore the site. Create a Glitch account.
    To submit assignments, provide the "Show" link to your Glitch coding assignment project.
    
    
11. Remix - Glitch will automatically create your own copy of an existing project that you can modify and rearrange as you wish. View the Glitch Six-Word Summer sample project. Find the Remix your own button - lower right of the project display. Click this button to get your own copy. Glitch starts you off with the main .html file named index.html which is the content - usually text, images, media. Change the text on the index.html page. Keep this simple for now. The tutorial.html file has examples of the html code to help you. Add a description in the description box under options under the project name - upper left. Then follow the Show Live link so you can see the actual project web address for "sharing". You have done it. You have created a web page!
12. Style - style.css - Glitch automatically sets up an external Cascading Stylesheet style.css file for you in your project - listed in project files list on left. 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.
    Select the style.css file and try out different values for the #banner properties - background-color, font-family, width, padding, margin-top. Glitch provides help as you start to change the options.
    Look at the code in your project index.html for the link to this style.css file. This is the connection that browsers will use to determine how to display your coding projects.
    Here is my "remix" of My Six-Word Summer which I changed to My 140 Character Introduction
13. Share your Glitch - Copy the web address of your Show live page and post it along with a short summary (2-3 sentences) about your "test drive" experience to the Glitch project discussion.
    
    If you have questions about Glitch, please ask. This is intended as an easy, fun activity so you can "create" a web page in the first week of class. There is a lot more to web development, so keep this simple. Make a few small changes and make sure it continues to display ok. Share the "Show live" web address. That's all that is required.
    
    
14. 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 Glitch 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, click the "Start" button below, once complete, the test will output the results.
    If necessary, download and install a browser that works well with Glitch and Canvas.
15. 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.
    
    
16. 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.

Critical Friend
Something to think about ... Many of the activities include research and accessing existing web sites. Every site you visit for any course activity 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 you are viewing. 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 developer's critical friend, what would be your feedback?

Conventional HTML and CSS development
If you have web development experience and are familiar with the DeAnza CIS Voyager development environment, you are welcome to complete all the coding assignment projects as HTML and CSS files uploaded to your Voyager public html directory. To submit your coding assignments, provide the link to the main html page, which should include a link to your associated css file.

Do the first Glitch assignments. Your feedback as someone familiar with "real" web development will be helpful. Many of the students in this course have no prior web development or programming experience. Glitch is a great way for everyone to be producing web-viewable resources immediately. Besides, Glitch is pretty fun. Thanks for your understanding.

Ready for more challenge?
If you already have experience using HTML and want to work ahead, please do. All the assignments are open throughout the course. If you have questions about more advanced topics and assignments, please ask.

Media

Glitch - online web app and HTML Editor

• Learn the basics with this introduction tutorial to learn more about the tools.

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

Note: The course follows the Fifth Edition of HTML - A Beginner's Guide by Wendy Willard. There are significant changes and additions to this version from the Fourth Edition. You can check your book against the Fifth Edition Table of Contents.

Starting with Cascading Style Sheets (CSS) is a big change from how HTML has been taught. The Fifth Edition of HTML - A Beginner's Guide by Wendy Willard does a really nice job of making this shift.

Most other HTML resources and tutorial add CSS as an advanced topic rather than including them as a basic component of any web development project. You can certainly use these other resources. Just be aware that there will be differences between them and this course and the Willard Fifth Edition.

• Optional - Visual Quickstart - HTML and CSS: Visual Quickstart Guide, Eighth Edition. Elizabeth Castro, Bruce Hyslop, 2014. ISBN 978-0-321-92883-2
• Optional - Murach's HTML5/CSS3 4th Edition. Anne Boehm, Zak Ruvalcaba, 2018. ISBN 978-1-943872-26-8

For the Getting Started module - here are the main references

• Wendy Willard - Introduction, Chapter 1. Getting Started
• HTML Dog Tutorials - Getting Started, Tags, Attributes and Elements
• Visual Quickstart 1. Webpage Building Blocks

Browsers

• Guide to Web Browsers - Web browsers directly impact our user experience on the web, and often we’ll blame a web site for problems without realizing the issues may actually be caused by our browser. Browser add-ons and extensions can cause problems even if the browser is working fine.

Web Literacy, background, searching ** some of this is out of date

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

HTML / CSS tutorials, reference

• 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
• 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
• Web Development - course introduces the design and development of web-based applications - the basic fundamentals of the Internet and Web protocols, the different architectures that Web-related applications use, and the programming languages that enable the development of Web applications. also matters of security and reliability in the development of web applications via the use of transport encryption and authentication.
• Computers and IT courses - free courses, including web development

BASICS

HTML - GeeksforGeeks

HTML is used to create the structure of web pages that are displayed on the World Wide Web (www). It contains Tags and Attributes that are used to design the web pages. Also, we can link multiple p...

How the web works - Learn web development | MDN

a simplified view of what happens when you view a webpage in a web browser on your computer or phone.This theory is not essential to writing web code in the short term, but before long you'll r...

Front-end web developer - Learn web development | MDN

structured course that will teach you all you need to know to become a front-end web developer. Work through each section, learning new skills (or improving existing ones) as you go along. Backgrou...

19 Commonly Used HTML Tags to Know for Beginners - Geekflare

If you want to become a front-end developer, one of the most common pieces of advice you will get is to learn HTML. Hypertext Markup Language, abbreviated as HTML, is the foundation of most web pag...

HTML Tutorial

HTML is the standard markup language for Web pages. create your own Website. latest HTML5 standard.In this HTML tutorial, you will find more than 200 examples. With our online "Try it Yourself...

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

Introduction to HTML

The <!DOCTYPE html> declaration defines that this document is an HTML5 documentThe <html> element is the root element of an HTML pageThe <head> element contains meta information a...

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