User:Vtaylor/Willard/CIS 89A HTML and CSS/CIS89A notes

CIS89A * https://wikieducator.org/User:Vtaylor/CIS_89A_HTML_and_CSS

Dec 2018 - notice - Thimble is going away by Dec 2019. Recommended alternative is Glitch
 * 19w - cis2 - introduce Glitch and Thimble in Module 7 * students seem to like Glitch ok even though it doesn't have the side by side editor / view panels - 2mar2019

= CIS89A Summer 2018 =


 * assignments


 * skills * protect find use share solve make

misc notes
2018.6


 * moved from User:Vtaylor/CIS 89A HTML and CSS - relative addressing messed up

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


 * 2018 * /Syllabus SPRING 2018/ * media following assignments * some surveys to google forms so students see results *


 * 2017 - transition from Moodle/Catalyst to Canvas


 * /16F information/
 * /CIS89A Video tutorials/


 * /CIS89A Coding Challenges/ - more advanced coding assignments
 * /CIS89A Project/, /CIS89A Voyager/


 * /Welcome to CIS89A/, /CIS89A welcome email/
 * Apr 2016 /Orientation/ * online ed .pdf,
 * https://thimble.mozilla.org/en-US/user/vtaylor/
 * learning literacies resources
 * /CIS89A Syllabus/ > [deanza]


 * Thimble supports all three types of style sheets - inline, internal and external. For the CIS89A course assignments, you will be using internal style sheets, that are placed within the header information of the web page (Willard p.44) * for external CSS stylesheet file - will need to be hosted as https & .css

??
 * https://thimble.mozilla.org/en-US/ - Thimble test CSS practice - internal

?? need to know for CIS89A
 * Help information? This is a bit tricky - the link is in the top line. If you click on the little graphic that has 3 horizontal line, Help is one of the choices. The web address for the Thimble help page https://support.mozilla.org/en-US/products/webmaker/thimble

Popcorn remixes
 * https://lsmall.makes.org/popcorn/2eej - koala bears
 * https://simi16.makes.org/popcorn/2ef1 - cat on flying carpet
 * https://achew.makes.org/popcorn/2efv - minecraft
 * https://liling.makes.org/popcorn/2enr - travel in groups
 * https://svizcaya.makes.org/popcorn/2eqz - star trails
 * https://ujlearn.makes.org/popcorn/2et7 - team work
 * https://maggie-cui.makes.org/popcorn/2ev7 - kid and lion
 * https://redavis21.makes.org/popcorn/2evr - dog and cat
 * https://ddxjason.makes.org/popcorn/2ewk - skydiving
 * https://wonderful615.makes.org/popcorn/2ewv - babies
 * https://erikt.makes.org/popcorn/2ex2 - seal pup

Web Literacy Map
 * https://wiki.mozilla.org/Webmaker/WebLiteracyMap

PACE - Practice, Apply, Correct, Extend

= CIS89A Spring 2018 = from module announcements * byxbee blog

3. A few words - Text
Most web pages include a lot of text. It is important to know how to format text for readability and searching.

Most visitors skim to find the information they are looking for. So it is important that pages of text are attractive and well organized.


 * consider onscreen readability of text
 * provide printer-friendly version of page
 * organize content with natural divisions and headings
 * arrange information in columns
 * understand accessibility issues for people with disabilities

Keywords


 * readability, text style, .PDF, paragraph, line break, quotation block, box, alignment, page layout, column, fluid, layer

from module 2. Basic HTML

Wow. Many of you are jumping right in, already adding images, creating surveys and using lots of features that we will be covering during the course.

Have a look through the list of module topics. This will tell you when we will "study" these topics in detail. All the modules are open, so you can look ahead at the resources and references that you may use as you work with these features.

There are plenty of online resources and tutorials as well. Thanks to everyone who provided a link to an online resource that you found helpful.

If you are new to online learning and web development, please just take your time and work through the activities as they are described in each module.The course structure and module pacing is designed with you in mind.

The format of this course allows everyone to learn more about HTML, CSS and web development than they knew when the course started. Some students are starting with all the basic knowledge and need the course credit. Others are starting from almost nothing. There is plenty here for everyone to learn and be challenged.

HyperText Markup Language (HTML) is a "markup language" - telling a web browser how to display a page --Willard p. 4

Information about formatting (markup) is separate from the content. By changing the markup specifications, the content can be reformatted for completely different devices or dramatically altered "look and feel" without ever changing the content.

A markup language is a system for annotating a document in a way that is syntactically distinguishable from the text. The idea and terminology evolved from the "marking up" of paper manuscripts, i.e., the revision instructions by editors, traditionally written with a blue pencil on authors' manuscripts.[citation needed] In digital media, this "blue pencil instruction text" was replaced by tags, that is, instructions are expressed directly by tags or "instruction text encapsulated by tags." ... Some markup languages, such as the widely used HTML, have pre-defined presentation semantics—meaning that their specification prescribes how to present the structured data. https://en.wikipedia.org/wiki/Markup_language

Discussion posts For summaries and reviews, keep you posts to 2-3 sentences. Please do not include a lot of text from the article. It is important to learn to read a whole article then pick out just the few ideas to pass along to the class.

Textbook Optional There are plenty of really good online tutorials for HTML and CSS. There are links to several in each module. I like a soft cover reference book, but most of the time I just search online for a tag or attribute. Some students really like the video tutorials. Everyone has a personal preference. There is no point in requiring a textbook if many students never use it. If you like something in print, get the Willard book.

If you have questions, please ask.

Have a great week. ..vt

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


 * 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

Keywords


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

from 1. Getting Started

How to use Thimble Did you just try looking around and trying Thimble? There is online help available. There are links to Thimble tutorials and videos in the media section of the Assignments page. You can search for others. Several students made suggestions in the discussion forum. You can also ask specific questions there.

Discussion grading Discussion grading will vary depending on the activities within a module. Reply to each topic. Provide links and supporting information as outlined in the activity description. Respond to others to extend and expand the discussion. Be brief. Use college-appropriate writing - grammar, punctuation.

Student Learning Outcome Officially - by the end of the course students can create and publish web pages. Most students do way more than that. Basic HTML is simple. What you can do with it is amazing. The assignment activities are intended to introduce you to what is possible. Some students will stick with the basics and that's ok, too. Sharing assignments within the class helps everyone achieve their personal objectives.

Dynamic layouts Responsive web site design is covered later in the course. There are many options for every tag that contribute to how the display will work in different environments.

Great start to the class. Thanks to everyone for your contributions and enthusiasm.

If you have questions, please ask.

Have a wonderful week.

..vt

April 9, 2018 -
 * ACTIVATE course - from Faculty page in MyPortal


 * actual course


 * set up in cis89a https://deanza.instructure.com/courses/4310
 * deanza canvas orientation and resources https://deanza.instructure.com/courses/3382

https://wikieducator.org/User:Vtaylor/CIS_89A_HTML_and_CSS
 * syllabus
 * welcome
 * https://deanza.instructure.com/courses/4310 canvas

2018.2 - DeAnza Bookstore adoption * OPTIONAL HTML: A Beginner's Guide, 5th Edition by Wendy Willard (Author)

New for 18s * European privacy * AVR Augmented / Virtual Reality * privacy fair use

http://byxbee.wikispaces.com/cis89a

= =

2015.2.6 - live > master request. page review discussion > rating by peers. assignment scoring - required, style, clarity ? quick

cis89images1 - img, src, width, height, alt, title (image attribute), href, map, area, shape, coords, figure, figcaption, border, float, margin, .gif, .jpg, .png


 * https://thimble.mozilla.org/en-US/ * Thimble test * CSS practice - internal
 * for external CSS stylesheet file - will need to be hosted as https & .css
 * https://wiki.mozilla.org/Webmaker/WebLiteracyMap

CIS89A HTML and CSS Web Page Development

 * HTML - in the beginning, Tim Berners-Lee, WorldWide Web Consortium, history
 * CSS - beyond academic publishing, "brand" website
 * Web Literacy Standard - Mozilla Learn project
 * technologies - consume, create, collaborate
 * Webmaker - remix, make, share
 * cis89a.makes.org - remixes for CIS 89A
 * Choose your own adventure - personal objectives, quizzes to help you decide, map

Building activities / projects - suggestions - weekly report
 * Starters - easier, fun - overview, introduction to Web Literacies
 * Basics - skill building - all Web Literacies competencies
 * Challenges - stretch, more difficult - in depth on one or more Web Literacies
 * Projects - individual, collaboration - activities, teaching kits - based on skill or competency in Web Literacies - #tags

HTML and CSS - Visual Quickstart - textbook

== notes, resources==
 * Ira - http://validator.w3.org/ Wendy Willard text,

HTML Beginner Tutorial assumes that you have absolutely no previous knowledge of HTML or CSS. HTML Intermediate Tutorial
 * Getting Started: What you need to do to get going and make your first HTML page.
 * Tags, Attributes and Elements: The stuff that makes up HTML.
 * Page Titles: Titles. For Pages. A difficult concept, we know…
 * Paragraphs: Structuring your content with paragraphs.
 * Headings: The six levels of headings.
 * Lists: How to define ordered and unordered lists.
 * Links: How to makes links to other pages, and elsewhere.
 * Images: Adding something a bit more than text…
 * Tables: How to use tabular data.
 * Forms: Text boxes and other user-input thingamajigs.
 * Putting It All Together: Taking all of the above stuff and shoving it together. Sort of in a recap groove.


 * CSS Beginner Tutorial - purpose of this guide is to teach the bare essentials - just enough to get started. The CSS Intermediate Tutorial and CSS Advanced Tutorial go into more depth about CSS.


 * Web Writing Style Guide Version 1.0 - open online textbook - Creating a Basic Web Page Is Easy! Time to Style Your Document with CSS. Learning More About Code


 * Cascading Style Sheets (CSS) is a powerful tool that transforms the presentation of a document or a collection of documents, and it’s spread to nearly every corner of the Web—as well as many non-web environments. In this free introduction to Cascade Style Sheets, you’ll learn how CSS makes it possible for you to completely change the way document elements are presented by a user agent. You’ll discover the origins of this specification and how CSS styles work with HTML.


 * https://wiki.mozilla.org/Learning/WebLiteracyStandard
 * https://webmaker.org/en-US/tools - web creation tools - googles, thimble, popcorn - Mozilla, projects https://webmaker.org/. support http://support.mozilla.org/en-US/products/webmaker/thimble - Using this kit, learners will create a fun webpage for their 'alter ego'. The will use the webmaking tool Thimble to code basic HTML and the following CSS properties: positioning values, hex numbers/color, fonts/sizes, class, div.
 * teaching kits - introduce, explain, explore https://vtaylor.makes.org/thimble/evil-twin-the-opposite-of-me
 * mentors - http://support.mozilla.org/en-US/products/webmaker/events-and-help-for-mentors
 * html cheatsheet https://mozteach.makes.org/thimble/html-cheatsheet >>> https://developer.mozilla.org/en-US/docs/Web/HTML/Element
 * CSS cheatsheet https://mozteach.makes.org/thimble/css-cheatsheet >>> https://developer.mozilla.org/en-US/learn/css

HTML HyperText Markup Language (HTML) is the core language of nearly all Web content. Most of what you see on screen in your browser is described, fundamentally, using HTML. More precisely, HTML is the language that describes the structure and the semantic content of a Web document. Content within a Web page is tagged with HTML elements such as, , and so forth. https://developer.mozilla.org/en-US/docs/Web/HTML
 * https://developer.mozilla.org/en-US/docs/Web/HTML/Element

CSS (Cascading Style Sheets) is a language for describing the appearance of web pages. To create good-looking web pages, you need to learn CSS in order to define the appearance and location of the HTML elements within the pages. https://developer.mozilla.org/en-US/learn/css


 * https://tbx.makes.org/thimble/maker-party-your-first-hack-pt-2
 * https://mozteach.makes.org/thimble/xray-goggles-teaching-kit
 * https://dougwalters.makes.org/thimble/sycsd-adult-education-webmaking
 * https://mozteach.makes.org/thimble/ways-of-the-web-teaching-kit
 * https://mozteach.makes.org/popcorn/1boj
 * https://thimble.webmaker.org/project/10274/remix
 * https://mozteach.makes.org/thimble/make-your-own-teaching-kit

== maker map== cis89a.makes.org - remixes for CIS 89A - teaching kit > learning activities - Evil Twin

https://webmaker.makes.org, Teaching kit ? remix > learning


 * Web Literacies - Exploring, Building, Connecting - weekly discussions - competency from each strand
 * Textbook - discussions - HTML topics 1-7, 15-18. CSS, JavaScript
 * Building - Consumer - general knowledge, Builder - regular user, Advanced - power user


 * images - Creative Commons, Flickr - CC-BY-SA

Activities / projects - suggestions - choose your own adventure - weekly report
 * Starters - easier, fun - overview, introduction to Web Literacies
 * Basics - skill building - all Web Literacies competencies
 * Challenges - stretch, more difficult - in depth on one or more Web Literacies

Projects - individual, collaboration
 * activities, teaching kits - based on skill or competency in Web Literacies - #tags

== outline==
 * sequence provided, due dates for assignments/discussion, work ahead and/or more depth
 * consume (12), create (9), collaborate (3)
 * curate, reflect, contribute

personalization
 * what you know
 * what you want to know
 * plan, options > groups
 * students answer student questions

build your own adventure - placement/assessment - self, quiz
 * new here - basic concepts, functionality - required
 * some experience - beyond current level - select one or more areas of interest/focus
 * challenge - depth, breadth, extension

??
 * scoring - focus, interest, depth, exploration

topic
 * I know
 * consume - site, review, highlight, question, discuss
 * create - demonstrate, learning narrative, peer review
 * collaborate - problem, work breakdown, solution
 * thinking thing - sharing, questions, news, funny
 * I wonder - reflection, want to know...

Technologies
 * consume - search, RSS, Twitter
 * create - presentation, share, publish - blog, Prezi, Pinterest, Flickr
 * collaborate - Wikia, Wikispaces

= template=


 * Introduction

Learning outcomes

Keywords

Study notes
 * What

== ==

== Assignments==


 * 1) I know
 * 2) consume - site, review, highlight, question, discuss
 * 3) create - demonstrate, learning narrative, peer review
 * 4) collaborate - problem, work breakdown, solution
 * 5) thinking thing - sharing, questions, news, funny
 * 6) I wonder - reflection, want to know...


 * Web Literacies - Exploring, Building, Connecting - weekly discussions - competency from each strand
 * Textbook - discussions - HTML topics 1-7, 15-18. CSS, JavaScript
 * Building - Consumer - general knowledge, Builder - regular user, Advanced - power user

Building / create - Activities / projects - suggestions - choose your own adventure - weekly report
 * Starters - easier, fun - overview, introduction to Web Literacies
 * Basics - skill building - all Web Literacies competencies
 * Challenges - stretch, more difficult - in depth on one or more Web Literacies