No.4 Images and Style Sheets

Files that Construct a Webpage

Up to the previous lesson, we learned that HTML files correspond with webpages. However, there is a limit to what you can do with HTML, and it is common to combine HTML with other types of files.

The following files are often used.

Style Sheet(CSS)
Used to define the visual layout (font size, colour and etc) 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-0(☆☆)

land
Download this image (click or right click-Save Link As)
Inspect its properties using “Finder”.
What is the “colour system” used by this image?(How many possible colours?). Tips: Examine the file size of this image (how many bytes?). Examine the dimension of this image (how many pixels: for example 300 pixels X 500 pixels). For now just keep in mind that 1 byte can represent 256 colours(we will cover this in detail in Chapter 8, and will also be covered below on the slide “Binary and Hexadecimal Numbers” )

Exercise 04-1(☆☆)

A few years ago, the analogue broadcasting finished in Japan. 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 from File→Export.
    • Using white spaces or Japanese characters in a file name may result in complicated issues, so make sure to use only alphanumeric letters.
  4. Open the file by double-clicking it.  “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 a 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 specify 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 people 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 an image file from the web, we must follow the rules of citation or get the 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 might be functions that won’t work.  When writing a CSS file, remember to check whether each function will work or not 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. First of all, browsers load HTML files and then load CSS files, and finally display them on the screen. It is same to the case of img element, when the specific image file is loaded and then displayed.

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

Syntax of CSS

In a CSS file, we line up the definition of style. It has a form of “where” and “what” style you want to do.

“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 (but not in the middle of property). Comments can be written by enclosing a text with /* and */.

Exercise 04-4(☆)
  1. Make the file mystyle.css (via 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 is it changed. If nothing happened, 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. Break up/decompose the primary colors of light into red(R), green(G), blue(B).
  2. Set the brightness of each color in the values between 0-255.
  3. Convert each of these values into two digits of hexadecimal numbers(00-FF).
  4. There is a method to write 3 hexadecimal numbers in the order of RGB, however we will make one hexadecimal number with six digits(000000-FFFFFF).

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

Exercise 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 will be displayed.

Defining Borders

The class schedule does not look smart 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 of border property and set a border of your choice.

“class” Attribute and Selectors

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 td element to important.
  2. Add the following style to mystyle.css and reload the browser.
  3. Choose classes that aren’t that important (Of course it doesn’t mean you can fail these classes 🙂 ) 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 of them and make the class name important.  What color is displayed?
  2. Edit mystyle.css so that it displays 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 Firefox Inspector for CSS-(Reference only.Chrome, below ,(section 3.7) , is recommended for this class)

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 final processed 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.

Using Chrome Developer Tools for CSS-recommended

We learned how to use  Chrome Developer Tools (2.6 at Lesson 2), let’s try using it for CSS.

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

Styles
Lists all the rules that apply to the selected element.
Computed
Lists all CSS properties and their final processed values.

On the Styles 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 value

The videos below are for Firefox (Inspector) only. No video is available for Chrome Developer Tool yet (please ask SA or Lecturer for assistance when required)

 

[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 Chrome Developer Tools (“Elements” tab) .
  2. Click on the color property and switch 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 Accessibility

HTML describes the structure of the webpage semantically, and a style sheet is used to apply the 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 information to millions of people, and to do so, the method of how to display the information can vary depending on the recipient.

Web accessibility refers to the practice of removing obstacles for people with disabilities, from accessing the web. In web accessibility, it is important to write separately the structure and appearance.

Exercise 04-11(☆☆☆☆☆)

There is a web accessability checker that inspect whether the page has a consideration of web accessibility. Try using it, by looking at the references below.

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