No.4 Images and Style Sheets

Files that Construct a Webpage

Up to the previous lesson, we learned that HTML files correspond with webpages.  But there is a limit to what you can do with HTML, and is general to combinate HTML with other sorts of files.

The folllowing files are commonly used.

Style Sheet(CSS)
Used to define the visual layout of a webpage.
Script(JavaScript)
Used to process data or to add movement to webpages.
Images(JPEG, PNG, etc)
Pictures displayed on webpages.

cn12a

In this lesson, we will learn about style sheets and images.  We will learn about scripting on subsequent lessons.

Images

Analog and Digital

Computers used nowadays mainly process digital data.

(PPT Download)

Exercise 04-1(☆☆)

Why did the broadcasting method of television change from analogue broadcasting to digital broadcasting?

Displaying a Image File

Let’s take a photo of yourself and display it on your self introduction page.

Exercise 04-2(☆☆)
  1. Start up Photo Booth from the application folder.
  2. Photo Booth is an app that takes pictures with the built-in camera on iMac.  The button with the camera mark is the shutter, and you can add effects to the photo by clicking on the “effect” button.

  3. Save the photo to a file.
    • Using whitespaces or symbols in a file name will complicate things, so make sure to use only alphanumeric letters.
  4. Open the file by double-clicking.  “Preview” should start up.
  5. Trim the photo by selecting the range you want(with your mouse), and select Tools→Crop.
  6. Use “Tools→Adjust size…” in the menu so that each side of the image is within 200~300 pixels.
  7. Save the edited photo to the file.
  8. Check how to use the “img element” in the Reference, and display the photo on your self introduction page.
    • Use relative URL to specifying the file.  It is easier to have the HTML file and image file in the same directory.
  9. Use the “title attribute” and add a description of the image.
  10. In this case, how should we specify the “alt attribute“?

Due to privacy issues, some say that you shouldn’t upload mug shots.  The file we made today can’t be viewed from the web, but be careful when uploading personal information to the internet.

Exercise 04-3(☆)
  1. Add “Keio University” to the list of schools on your self introduction page, and display the SFC logo mark.
  2. Attach the “<a> element” and link the image to SFC’s Homepage.
  3. In this case, how should we specify the “alt attribute“?

Image files have copyrights.  When using a image file from the web, we must follow the rules of citation or obtain permission from the author.

Like image files, we can make and display videos on the web as well.  However, there are many formats when using a video, and depending on the browser, some formats will not work.

Style Sheet

What is CSS?

Explained on the 2nd lesson, HTML is a markup language that describes the structure of a webpage.  CSS is a language that describes the design of a webpage.

There are a few levels defined in CSS.  Recent browsers support Level3(CSS3), but depending on the browser, there may be functions that won’t work.  When writing a css file, remember to check whether each funtion will work on your browser.

CSS is written in a separate file from HTML, so we must define (on the HTML file) which css file to use.

There is a method to write CSS inside HTML, but to avoid confusion we will use separate files in this class.

Syntax of CSS

In a CSS file, we define “where” and “which” style we want to use.

“where”
A “selector” is used to declare where to apply each style on HTML.  There are a few ways to define the selector, and the easiest way is to write the element of the HTML.  For instance, when we want to set the style of the header, we can simply write “h1”.  When specifying multiple elements you must separate each selector with a comma.
“what”
The “property” is defined like the following: aaa is bbb.  For instance, the property “color : blue” indicates that the color is blue.  When there are multiple properties, you must separate each property with a semi-colon.

A style is written like the following: selector {aaa : bbb}

Spaces and new lines can be placed freely.  Comments can be written by enclosing a text with /*                  */.

Excercise 04-4(☆)
  1. Make the file “mystyle.css”(vai text editor) under the same directory as your self introduction page, and write the following.
  2. Open “introduction.html" and add a link element to the head element.
  3. Open your self introduction page via browser and check out what changed.  If nothing changes, make sure the header is written with a h1 element.
  4. Edit mystyle.css, change blue to green and reload the page.

Defining the Color

The color you specify in CSS can be written by simply typing in the name of the color(such as blue and green), but when we want to use colors that aren’t defined in CSS, we need to type in the color code.  Color codes use hexadecimal numbers, so let’s take the time to study binary and hexadecimal numbers first.

(PPT Download)

Described in Analog and Digital, we must quantitize the color into numeric values.

  1. Disassemble the primary colors of light into red(R), green(G), blue(B).
  2. Set the brighness of each color in the values between 0-255.
  3. Convert each of these values into hexadecimal numbers(00-FF).
  4. Write the 3 hexadecimal numbers in the order of RGB, and make a hexadecimal number with six digits(000000-FFFFFF).

This number can be used as the color code by placing a “#” before the first digit.

Excercise 04-5(☆)
  1. Open mystyle.css, change the color code to #F0A050, and reload the browser.
  2. Edit the numbers of the color code and see what kind of colors are dispayed.

Defining Borders

The class schedule looks funny without borders, so let’s add some.

Exercise 04-6(☆)
  1. Add the following style to “mystyle.css” and reload the browser.
  2. Check out the Reference(border property) and set a border of your choice.

“class” Attribute and Selectors

The same style for each element will be applied, if we define the selector with the element name.  Instead, if we want to apply different styles (within the same element), we can define the “class attribute” to classify each element.  From now on, we will simply call the value of the class attribute “class”.

The selector of a style using class is written like the following: element.class

Exercise 04-7(☆☆)
  1. Choose 2 or 3 classes that you think are most important on your timetable, and set the class of the “td element” to important.
  2. Add the following style to mystyle.css and reload the browser.
  3. Choose classes that aren’t that important and display the letters in blue.

You can omit the name of the element and simply write .class to set the style for each class without applying the element.

Exercise 04-8(☆☆)
  1. From the list of your hobbies, select one and make the class important.  What color is displayed?
  2. Edit mystyle.css to display class important in red, on both the timetable and hobby.
Exercise 04-9(☆☆☆☆☆)

There are times when styles conflict with each other.  For instance, when we want to use blue for element td and red for class important, what color will be displayed in <td class="important">...</td> ?  First, try it by yourself, then study about the priorities of selectors, explained on Reference below.

Using Inspector for CSS

We learned how to use Inspector for HTML , let’s try using it for CSS.

When searching an element, the CSS pane is displayed on the right side.  There are 4 kinds of displays and can be switched by clicking on the tabs.

Rules
Lists all the rules that apply to the selected element.
Computed
Lists all CSS properties and their calculated values.

On the Rules display, rules can be switched on and off by clicking the property.  You can change the value of the property as well.  Try changing some values.

[quicktime]http://ipl.sfc.keio.ac.jp/text/info1/resources/02.mov[/quicktime]

Exercise 04-10(☆☆)
  1. Open your self introduction page and display the information of the header(h1) using inspector.
  2. Click on the color property and swich it on and off.
  3. You can add properties by clicking the blank areas.  Add the font-size property and change the value to 48pt.
  4. Change the font-size property to a size of your choice.

Web Accessability

HTML describes the structure of the webpage semantically, and a style sheet is used to apply design to the page.  The reason for dividing these roles is based on the thought, that the most important duty of the web is to provide infomation to millions of people, and to do so the method of displaying the information should be able to vary depending on the recipient.

Web accessibility refers to the practice of removing obstacles for people with disabilities, from accessing the web.

Excercise 04-11(☆☆☆☆☆)

Try using the web accessability checker below.

Points to Check
  • What kinds of files construct a webpage?
  • What are some good points of converting analog data to digital data?
  • What steps do you need to take to convert analog data to digital data?
  • What is the difference between bitmap images and vector images?
  • What is the meaning of style sheets?
  • How do you define a style with CSS?
  • What is the class attribute used for CSS?
  • What is web accessablility?