Rice Files


Page sections

1-16 A 1 Rice Preparation Green 1-16 B 1 Rice Preparation Brown 1-16 Example 1: Color words or color codes 1-16 Explanation 1: Color words or color codes 1-16 Orientation 1: HTML practice 1-16 Orientation 2: Image of an HTML file: RicePreparationBrown.html

Workbook pages

1. Settings. Line breaks and paragraphs.

2. Commenting code and checking your StarfruitJuice files

3. Style Terms

4. Headings

5. Fonts and Colors.

6. Simplified HTML structure. Colors.

7. Ordered and unordered lists

8. More List Styles

9. Font Families and Font Sizes

10. Bold, Italic and Underline

11. Tables. Online HTML Editor.

12. Including images in Tables

13. Visual Studio Code. Table Colors.

14. Table Headings and Heights of Table Rows

15. Table Sizes, Borders and Alignments

16. Rice Files

17. Hyperlinks

18. Further studies

1-16 Orientation 1: HTML practice

With the exercises in the following sections you can practice creating HTML pages using various colors.

1-16 Explanation 1: Color words or color codes

Here is the list of HTML color names. And here you can pick color codes.
For colors, you can use either color names or color codes.

1-16 Example 1: Color words or color codes

In this example, a color name and a color code are used for the same color:

Color name: blueviolet Style: <td style="color:blueviolet;"> HTML version: This is a little text
Color code: #8A2BE2 Style: <td style="color:#8A2BE2;"> HTML version: This is a little text

1-16 Orientation 2: Image of an HTML file: RicePreparationBrown.html

So far, the code of starfruit HTML files you created in each exercise had to match exactly with the starfruit code HTML of the exercise.
In the following sections, you will first open an image of an HTML file, and then proceed to generate an HTML file, based on the image. However, your HTML file doesn't have to precisely match the measurements of the image; it is fine if its size is slightly different.

1-16 B 1 Rice Preparation Brown

  1. in the PracticeFiles folder, create a folder and name it RiceFiles
  2. in the RiceFiles folder, create a folder for the images of your HTML pages and name it Img
  3. download the rice image here, and save it in the images folder
  4. create an HTML page that looks like this image, and save it in the RiceFiles folder as RicePreparationBrown.html. The scale of your HTML page may be different from that of the image.
For the colors use:
  • page: linen
  • top rectangle: #f3d8a5
  • left rectangle: #e09d1f
  • right rectangle: #edc478
  • bottom rectangle: #e7b04b

1-16 A 1 Rice Preparation Green

  1. create a copy of RicePreparationBrown.html
  2. save the copy as RicePreparationGreen.html
  3. modify RicePreparationGreen.html with these colors:
    1. page: GreenYellow
    2. top rectangle: #f2ffcc
    3. left rectangle: #ace600
    4. right rectangle: #dfff80
    5. bottom rectangle: #c6ff1a
  4. save RicePreparationGreen.html


This page was created by Hanspeter Amend
Previous page   Table of contents