Tools

Copy the following image urls for images

https://www.tocsweb.com/wp-content/uploads/2017/02/tocs-logo.png

https://www.tocsweb.com/wp-content/uploads/2016/01/towering-oaks-crest.png

We’ll be using the app JSAnywhere to experiment with HTML.

Key things to note about JSAnywhere:

Project – a group of files that make a website, additional images can be added.

JS/HTML/CSS – Taps at the top that open the three main files most websites use. The main HTML file, a Javascript file that holds the programing, and the CSS file that holds the code for the styles. More on CSS below… NOTE it isn’t required to have these three files, everything could be on the same file if you wanted it to be. HTML can let you split your code in sections by making multiple files work together.

The “chain link” icon – Runs a Web Server from your iPad.

HTML properties/attributes

HTML tags can do more with attributes. An attribute gives additional features to the tag, for example, adding a width and a height to an image.

<img src=”https://www.tocsweb.com/wp-content/uploads/2017/02/tocs-logo.png”>

The above tag will display an image at whatever size the image was created. We can control this with the width and height attributes.

<img src=”https://www.tocsweb.com/wp-content/uploads/2017/02/tocs-logo.png” width=”200″ height=”200″>

The number represents the number of pixels on the screen, but you can also use percentages by adding % to the number, e.g. width=”25%” will cause the image to take up 1/4 of the screen.

If you have more than one image that needs the same styles, you can set each of them individually, but there is a way to give them all one attribute. Using the “CLASS” and “ID” attributes lets us name a styles. The Styles are set with CSS.

CSS

CSS is code that is used to define the look of tags in HTML, the “look” is called a “style”. CSS stands for Cascading Style Sheet. You can name most of your own styles, or you can use the tags as the name.

Basic rules of CSS – Styles with class or id attributes: if you want your style to change tag where you used ID as the attribute, use a # sign before the name. If it’s a class attribute, use a . before the name. Names can’t have spaces. Names can’t start with numbers, but can have numbers elsewhere. Only use A-Z the _ and – characters in the name.

Class examples:

<img class=”small-image” src=”image.jpg”>

.small-image{ width:10%; }

ID examples:

<img id=”small-image” src=”image.jpg”>

#small-image{ width:10%; }

The difference between and ID and a Class: Both can apply a style, but an ID should only be used once, it’s meant to go with a single tag and shouldn’t be used again. Classes are for multiple tags. (If you look in the kindergarten room, you know each child is in the kindergarten class, so they are similar. But each child has their own name, or ID)

CSS doesn’t use = like HTML does. It uses the : instead. After you write your value, it should be followed by a ; to tell CSS you are finished. You can use more than one style, each is separated by the ;

.small{width:10%; height:10%}

Each tag has its own set of styles. <img> tags use width, but the <p> tag doesn’t by default (it can with additional coding)

Here is a list of styles you can use on an image

Paragraphs can change color of the text, have a background color, be outlined, have fonts and more. Here is an example:

p{ color: blue; border 3px solid green; font-weight: bold; text-decoration: underlined; font-size:20px; }

Instead of using a . and a # in the example, we are using the tag itself. That style will be applied to all tags as its default style on the page. The only styles that will look different are the ones who are coded later.

In CSS, the last thing to be coded takes priority over the previous code. Things overwrite previous things, which is how the C in CSS is “Cascading.” Order matters A LOT in CSS

p{color:red;}

#blue-text{color:blue}

<p>red text</p>
<p>red text</p>
<p id=”blue-text”>blue text</p>
<p>red text</p>

CSS Animation

CSS can also move elements. Check out this example and this example.