Showing posts with label web authoring. Show all posts

Tuesday, 22 September 2020

Development of ideas-web

Criterion B - Development of ideas - MYP Digital Design projects

Upload your Development of Ideas section, including your designs/ideas, to this online assignment.

For web sites, you may want to include:

A site map diagram showing the structure of your web pages and how they link to one another,

A set of wireframe designs/diagrams showing the possible layouts that you are designing for your web site. Evaluate them all, choose the best one and justify your choice in terms of the design specification.

Recommended software:

Adobe XD (how to wireframe XD)
Draw.io (online, desktop app)
Pencil (desktop app)
Create.ly (online)

Tuesday, 27 November 2018

HTML and CSS Online Exercises

The following HTML & CSS exercises have some questions outside the IGCSE ICT syllabus, but I think they can be very useful to practice and prepare. They include hints and answers. I'm adding recommendations on which ones to do and which ones to skip. Quizzes are available at the same website, but are optional, just one more resource to study and remember.

HTML EXERCISES @ https://www.w3schools.com/html/exercise.asp

From HTML Attributes to HTML Lists
Skip HTML quotations
Skip HTML classes and id, but we will study these later, they sometimes appear in the real exams. https://css-tricks.com/the-difference-between-id-and-class/

CSS EXERCISES @ https://www.w3schools.com/css/exercise.asp

Start from CSS Syntax, all the way to ...
CSS Positioning, up to and including exercise 3
Skip CSS Overflow, but ...
Do CSS Align Exercise 1

DO NOT FORGET:
Use validators when in doubt--

The types of CSS and their differences--

In a nutshell: external < internal < inline

Sunday, 25 November 2018

HTML and CSS for ICT

HTML & CSS revision resources for (I)GCSE ICT

To revise at home, may use the following resources to study, revise and prepare for our course's examinations and practicals.

Reference:

https://www.w3schools.com/
http://www.tutorialspoint.com/
https://validator.w3.org/#validate_by_input HTML validator (checks and shows errors)
https://jigsaw.w3.org/css-validator/#validate_by_input CSS validator

Tutorials/Learning tools (note that these may not be IGCSE ICT-specific):

https://youtu.be/bupWPZdXqIA <= excellent video tutorials about HTML & CSS (not IGCSE ICT-specific, detailed and thorough); you may want to skip to video number 6 (CSS basics) if you find the pacing on the slow side at the beginning
https://youtu.be/6mZsGqMHV9E <= IGCSE ICT web authoring taks of the specimen paper 3; author has video tutorials about other practical tasks as well, check his channel
Check the HTML examples from W3Schools and their HTML online exercises as well
They also have CSS examples and CSS exercises
https://www.w3resource.com/html-css-exercise/index.php online exercises to practice HTML & CSS, with answers

Memory training:

Minimum set of HTML tags and CSS selectors

This is a list of what you should know. It is a suggestion and may not be exhaustive; always check and compare against the examination topics and your current syllabus). For example, <!DOCTYPE> and <META> are not included, although you may be asked about them in exams and they are useful to know; I just do not consider them as essential as others.

HTML

<html>
<head>
<body>

<title>
<style>
<h1 … h6>
<p>
<br />
<hr />
<img />
<a href="">
<a href="mailto: ...?subject= …">
<a name="anchor_name">
<a href="# anchor_name">
<b> <strong>
<i> <em>
<u>
<s> <strike>
<sub> <sup>
<ol> <ul>
<li>
<table> <caption> <thead> <tbody> <th> <tr> <td> (also remember colspan and rowspan)

CSS

Size in pixels (at least px and % )
RGB hex notation #000000 ~ #FFFFFF
RGB (decimal notation) – rgb(0,0,0) ~ rgb(255, 255, 255)
width
height
background-color
background
background-repeat
background-image
background-position
color
text-indent
text-align
text-decoration
text-transform
letter-spacing
word-spacing
font
font-family
font-style
font-weight
font-stretch
font-size
font-size-adjust
margin
margin-top
margin-right
margin-bottom
margin-left
padding
padding-top
padding-right
padding-bottom
padding-left
border
border-top
border-bottom
border-right
border-left
border-color
border-top-color
border-right-color
border-bottom-color
border-left-color
border-style
border-top-style
border-right-style
border-bottom-style
border-left-style
border-width
border-top-width
border-right-width
border-bottom-width
border-left-width
table-layout
border-collapse
border-spacing
list-style
list-style-type
list-style-image
list-style-position

technomess