CIS89A - 6. CSS Formatting
From WikiEducator
CSS Formatting
- Fonts are important design elements and need to be included via the CSS embed function. Pages can be designed to be printed as documents. Although they may not be used often, there are several more CSS display tricks worth knowing.
Learning outcomes
- include specific fonts within the page
- format web pages for printing
- explore additional CSS presentation features
Keywords
- embed, transition, transformation, animation, filter
Reading guide
- Where do fonts come from?
- How are fonts included in the page information
- Why would anyone want to print a web page?
- What are some of the additional display options available with CSS?
Assignments
Coding project title and required elements
- cis89morecss1 * include 2-3 additional fonts * format a page for printing * demonstrate transitions, transformations, animations and filters.
- Review the Keywords and Reading guide questions at the top of this page. These will help you look for important ideas in the rest of assignments for this module.
- Textbook - Learning Web Design - Chapters 11-13 - 11. Introducing Cascading Style Sheets, 12. Formatting Text, 13. Colors and Backgrounds
- CSS Formatting - In a new coding project, demonstrate requirements using all the appropriate elements and tags within your project. Publish your HTML file.
- Submit the web address of your coding project to the CSS Formatting assignment.
- Post a link to your coding project and any comments or questions about the assignment to the CSS Formatting discussion.
- Educational videos - There are thousands of great educational videos on the web. TED Education, Two Minute Papers and TeacherTube series are the best known sources but there are many others. Find an example of a educational video. In the Educational videos discussion, post a link to the video you selected and a brief description. Be sure to include the length of the video in minutes:seconds.
Review the selections of 2 others.
- HTML5 support - HTML5 test - Check your browser for HTML5 support. This assignment will be hopelessly frustrating if the browser you are using does not support the HTML5 elements that you are trying to use. Check that your browser actually supports audio, video and the types of media that you select to include in your assignment page. If your browser doesn't support these elements and media types, download a browser that does - either a newer version, or a different one. As a web developer you need to be aware of these differences and plan your site content accordingly.
- HTML5 - The HTML standard has been evolving to meet the demands of viewers and web developers to make use of new technologies as they become available. HTML5 is the most recent update. There are a number of new features and several modifications that are applicable to multimedia on the web. Review one or more HTML5 Introductions and tutorials. Check out movies and games that are created entirely in HTML5. What are some of the big changes? Why are these important to you as a web developer? Post a brief comment to the HTML5 updates discussion.
- Success Skills - Use it - how technologies are woven into daily living. Review 2-3 of the articles from Success skills Use it. Pick one article you would recommend from the selection list. Find another article online that would be appropriate to add to the selection list. Post a link and a brief summary of the reasons for each of your selections to the Success Skills - Use it discussion. Review 2 others.
- H5P Project - HTML5 has enabled new ways to create content for the web. H5P authoring tools developed by MIT and developers from around the world, make extensive use of HTML5 for creating interactive elements. Read About H5P project. Explore several of the H5P examples. Select one of the H5P interactive teaching game or quiz. Some suggestions - counting, adding numbers up to 10, easy reading storybook, ... How is HTML5 functionality being used? Is it effective? Post a link to your selection and HTML5 observations to Test drive H5P discussion. Review the work of 3 others.
- HTML Coding validation - there are a number of tools available free online that will check your HTML code and highlight errors. Find one and have it check your code for the assignment. How did you do? Did it find errors that you missed? Did you understand what was wrong? Were you able to fix the problem? Did you re-check your code to see that you fixed the problem? Post a link to the HTML checker you used and a brief descriptions of your experience using it in the HTML Code Checker discussion. Review the post of 2 others.
- Weeks 1-6 Midterm Review - This is about the middle of the course. We have covered a lot in a relatively short time. Now stop for a few minutes and think about the CIS89A Web Development course so far. In the first 6 weeks of the course, what was one pleasant surprise? What is one question that didn't get answered? What is something that you can do that will improve your course participation? Submit your comments and questions as the Weeks 1-6 Midterm Review assignment.
- Textbook - Learning Web Design - Chapters 11-13 - 11. Introducing Cascading Style Sheets, 12. Formatting Text, 13. Colors and Backgrounds
- HTML Dog HTML Beginner Tutorial
CSS
- How to Link CSS to HTML – Stylesheet File Linking
- To link your CSS to your HTML, you have to use the link tag with some relevant attributes.The link tag is a self-closing tag you should put at the head section of your HTML.To link CSS to HTML with...
- CSS basics - Learn web development | MDN
- Selector This is the HTML element name at the start of the ruleset. It defines the element(s) to be styled (in this example, elements). To style a different element, change the selector.Declara...
- 28 outstanding examples of CSS | Creative Bloq
- 28 great examples of CSS sites that will provide a burst of web design inspirationBuilt using Ruby on Rails with HTML5, SCSS, CoffeeScript and jQuery, the platform has the ability to let travellers...
- Style HTML by Using External CSS and Inline Style
- There are three options for styling HTML elements. You can style HTML elements by using the inline CSS. The internal CSS is for styling whole pages. The external stylesheet can set rules for entire...
Coding, programming
- Hour of Code - Write your first computer program Code.org - Learn the basic concepts of Computer Science with drag and drop programming. This is a game-like, self-directed tutorial starring video lectures. Learn repeat-loops, conditionals, and basic algorithms.
- Hour of Code - Javascript - An introduction to JavaScript by KhanAcademy - Learn the basics of JavaScript programming while creating fun drawings with your code. Video, step-by-step tutorials
- CodeAcademy - write code and see the results right away.
- Eloquent JavaScript A Modern Introduction to Programming - an introduction to the JavaScript programming language and programming in general. Originally written and published in digital form, includes interactive examples and a mechanism for playing with all the example code. This version is released under an open license.
- The 2015 Top Ten Programming Languages - The big five—Java, C, C++, Python, and C#—remain on top. The big mover is R, a statistical computing language that’s handy for analyzing and visualizing big data.
- Getting started | micro:bit
- "The BBC micro:bit is an award-winning programmable device that allows students to get hands-on with coding and digital making. Use it to inspire your students to recognise the power of techno...
- BBC micro:bit v2 : ID 4781 : $17.95 : Adafruit Industries, Unique & fun DIY electronics and kits
- "BBC micro:bit v2Product ID: 4781$17.95There are multiple versions of this item. Please select one from the options below: Single BBC micro:bit v2 $17.95 Single micro:bit v2 Go Bundle -...
- Micro:bit Educational Foundation | micro:bit
- Lesson resources for teachersPlanning and teaching with the micro:bitPrimary ages 7-11Complete, editable computing units of work and resources with cross-curricular links for art, science, geograph...
- Buy the micro:bit | micro:bit
- Lesson resources for teachersPlanning and teaching with the micro:bitPrimary ages 7-11Complete, editable computing units of work and resources with cross-curricular links for art, science, geograph...