Computer.pdf

# Chapter 1: Building Websites with HTML | Lesson 1 ## OBJECTIVES - Reviewing the rules of building Web pages - Reviewing basic HTML Tags. ## Review HTML (HyperText Markup Language) is a computer language used to build Web pages. ## Exercise Fill in the blanks with the following expressions: NOTEPAD++ - Internet Browser - .HTML - .XLS - <> - </> 1- The program **Notepad++** is used to write HTML Tags. 2- A Web page should have the extension **.HTML**. 3- To view a Web page in its final layout, open it in an **Internet Browser**. 4- To open an HTML tag, write it between **<>**. 5- To close an HTML tag, write it between **</>**. ## Tags to define the structure of a Web page A Web page should be declared using 3 essential TAGS: **<HTML> - <HEAD> - <BODY>** 1. The tags are written in **Notepad++**. 2. The Web page is generated in the **browser**. ## The use of some basic Tags Last year, you learned basic HTML tags to generate simple Web pages. Let's review them in order to be able to discover more new TAGS. ### The tags <Title> and </Title> The title is typed in order to be displayed in the Windows Title Bar. The title typed between `<title>` and `</title>` cannot be formatted. ### The tags <Body> and </Body> Many tags can be written in order to build and to format a Web page. Describe the use of each of the TAGs below. 1. **<B>** To make the text bold. 2. **<I>** To display text in italics. 3. **<U>** To underline text 4. **<BR>** Creates a line break in text 5. **<P>** Represent a paragraph. 6. **<HR>**. Horizontal rule 7. **<BODY BGCOLOR>** set the background color ondechien 8. **<IMG SRC>**. embed an image in a web page ## Adding properties to a TAG It is always possible to add properties to a TAG. The TAG `<HR>` inserts a horizontal line. You can't control its shape unless you add to it some properties. The TAG `<HR width = "500px" size = "10px" color = "red" align = "center">` draws a line according to the above-mentioned properties. ## Remember Most of the tags should be written between an opened tag and a closed one. An opened tag should be written between `< >` A closed tag should be written between `</ >` ## Exercise Open Notepad++ and create an HTML page to display your different hobbies. Seperate the different hobbies with an horizontal line. ## Project 1 1. Changing the colour of the background 2. Inserting an image and a horizontal line 3. Setting the width and the height of an image. 1. Open Notepad++ and write the HTML TAGs to reproduce the Web page as shown on the right 2. The title "My Hobbies Are:" is aligned center and the font size is equal to 16 px 3. A horizontal line is drawn below the title having the following properties: width=500 px size= 7 px colour = red align=center 4. Each of the 4 hobbies should be formatted as shown 5. At the end of the page, insert a picture. Set its width to 350 px and its height to 250 px 6. Set the background colour to yellow. ## Setting the size and the alignment of the title The Tag `<font size="16px">` sets the size of the font to 16 pixels. Add the align property to the tag `<P>` to centre the title: `<P align="center">`. ## Inserting a horizontal row <HR> To set the properties of the horizontal line, add the following properties: width, size and colour to the Tag `<HR>` as shown below. `<HR width="500px" size="7px" color="red" align="center">` 1. It is possible to set the width in pixels or in percentage. 2. The alignment can be set to: left, right or aligned center. 3. The properties of a tag should be always written between quotation marks. ## Lowercase or Uppercase Tags in HTML can be written in lowercase or in uppercase. ## Inserting a picture Set the image properties as shown below: `<img src="pic1.jpg" width="350px" height="250px" border="6px">`. 1. To centre the image, the Tag `<P align="center">` is added before the `<img>` Tag. 2. The alignment can be set to: left, right or centred. 3. The property border="6px" sets the border thikness of the image to 6 pixels. ## Resizing a picture in Photoshop If a picture is resized in HTML, it will keep its original size in MB. In order to make an image smaller in MB size, resize it in Photoshop. 1. Execute the command Image Image size. 2. Set the appropriate width. Then click on OK. ## Changing the colour of the background To change the colour of the background, add the property bgcolor to the tag `<body>` as shown below. `<body bgcolor="yellow">` ## The solution ```html <HTML> <HEAD> <TITLE> My Hobbies </TITLE> </HEAD> <BODY bgcolor="yellow"> <p align="center"> <font size="16px">My Hobbies Are:<br></font> </p> <HR width="500px" Size="5px" color="red" align="center"> <b>1- Tennis</b><br> <i>2- Football</i><br> <i><u>3- Swimming<br> -4- Reading</u></i><br> <p align="center"> <img src="pic1.jpg" width="350px" height="250px"> </BODY> </HTML> ``` ## Remember While writing an HTML page, you should always remember to: 1. close a tag (look at line 7). 2. use the tag `<br>` to return to a new line. 3. write the tag properties between quotation marks. # Chapter 1: Building Websites with HTML | Lesson 2 ## OBJECTIVES - Inserting a table - Declaring rows and columns - Setting the border of a table - Setting the width of a table ## Project 2 1. Open Notepad++ and write the HTML TAGs in order to reproduce the Web page as shown on the right 2. The title "ICT & ROBOTICS FOUNDATION" is centred and its font size is equal to 18 px 3. Insert a logo 4. Insert a table of 5 columns and 4 rows 5. Set the borders of the table to 2 pixels 6. Set the width of the table to 550 pixels. ## Declaring a table The two tags `<Table>` and `</Table>` declare a table. Between the table TAGs, two other tags are written to declare the rows and the columns of the table. Look at the example below. ```html <table border ="1px" width="550px"> <TR> <TD>First Name</TD> <TD>Last Name</TD> <TD>Address</TD> <TD>E-Mail</TD> </TR> </table> ``` This is a table formed of 1 row (TR) and 4 columns (TD) ## Columns and Rows in a table Keep in mind that 3 tags are needed to draw a table: **<TABLE> - <TR> - <TD>** ## Declaring a row in a table: <TR> (TR stands for Table Row) Each time you want to create a new row in a table, write the two tags: `<TR>` and `</TR>`. If you have 15 friends to add to a table, declare 15+1 `<TR>`: 1 row for the header and 15 rows for the 15 names. ## Declaring a column in a table: <TD> (TD stands for Table Division) The tag `<TD>` is declared between the tags `<TR>` and `</TR>`. For each column, a `<TD>` is declared. If you have to declare 4 columns, 4 `<TD>` should be written between the tags `</TR>` and `</TR>`. ## Examine how your HTML code should look like ```HTML <HTML> <HEAD> <TITLE> ALGOCODE </TITLE> </HEAD> <BODY bgcolor="orange"> <p align="center"> <font size="18px" color="yellow">ICT & ROBOTICS FOUNDATION <br></font> <img src="algo.jpg" width="407px" height="93px"><br><br> </p> <table width="550px" border="2px" align="center"> <tr> <td>Group age </td> <td>Coding </td> <td>Robotics </td> <td>3D printing </td> <td>Arduino </td> </tr> <tr> <td>YES </td> <td>7-10 years </td> </tr> </table> </BODY> </HTML> ``` ## PAY ATTENTION! If you do not add the border properties, the table will be displayed without borders. ## Challenge Create a Web page to show: 1. The benefits of recycling. 2. Items you can recycle. # Chapter 1: Building Websites with HTML | Lesson 3 ## OBJECTIVES - Setting the width of a column and a table - Changing the colour of a cell or a table - Aligning a text in a cell. ## Project 3 1. Open Notepad++ and write the HTML TAGS in order to reproduce the Web page as shown on the right 2. The title "Purchasing List:" is centred and its size is 18 px 3. Insert a table formed of 4 columns and 4 rows 4. Set the borders of the table to 2 pixels 5. Set the width of the table to 500 pixels 6. Align the table to "Centre" 7. Set the table's background colour to red 8. Set the background colour of the first column to yellow 9. Set the width of the first column to 200 pixels and the other columns to 70 pixels. ## Setting the border, the width and the alignment of the table 1. In order to display the borders of the table, write the following tag: `<Table border="1px">`. 2. In order to set the width of the table to 500 pixels, write the following tag: `<Table border="1px" width="500px">`. 3. In order to centre the table, write the following tag: `<Table border="1px" width="500px" align="center">`. ## Changing the table's or the cell's colour 1. To change the colour of the table, write the following tag: `<Table bgcolor="red">`. 2. To change the colour of the cell, write the following tag: `<TD bgcolor="yellow" >`. 3. To change the width of the column, write the following tag: `<TD bgcolor="yellow" width="200px">`. ## Creating tables in HTML Creating tables in HTML should be done in order to master the creation of tables in HTML. ## Pay attention The 2 exercises will be used in the final project at the end of this chapter. Save them in a safe place in order to find them easily. ## Exercise 1 Open Notepad++ and write the HTML TAGs in order to create a page to display the list of your favourites. 1. Background colour = Red 2. Table's width = 780 px 3. Table's borders = 1 px 4. Number of columns = 2, number of rows = 8 5. Width of column 1 = 300 px, 6. Width of column 2 = 480 px. 6. Colour of column 1 = White. 7. Colour of column 2 = yellow 7. List your favourites in the second column. ## Exercise 2 Open Notepad++ and write the HTML TAGs in order to create a page to display the list of your friends. 1. Background colour = Green 2. Table's width = 780 px 3. Table's borders = 3 px 4. Number of columns = 4, number of rows = same as the number of friends 5. Width of columns 1 and 2 = 250 px 6. Width of columns 3 and 4 = 140 px 6. Colour of column 1 = White 7. Colour of column 2 = Yellow 8. Colour of column 3 = Blue 9. Colour of column 4 = Purple 10. Fill in the table with real data related to your friends ## Challenge Create a Web page to show: 1. The different transportation means 2. Pictures of transportation means (car, bus,...) 3. A table to list the number of cars in countries of your choice. # Chapter 1: Building Websites with HTML | Lesson 4 ## OBJECTIVES - Setting a navigation menu - Creating a hyperlink between two pages - Creating an external hyperlink. ## Project 4 1. Open Notepad++ and write the HTML TAGS to create a website formed of 4 pages 2. The first page named index.html will contain your name, a picture of your choice, the title of the project and a navigation menu to access the three other pages 3. The second page, named dogs.html, will contain a title, a picture, a line and a navigation menu 4. The third page is named cats.html 5. The fourth page is named tiger.html. NB: The layout of the 3 Web pages (dogs, cats and tiger) should be similar to the one on the right. ## What is a navigation menu? Once activated, the navigation menu lets you access all the pages of the website. The first step to do in order to create the navigation menu is to write the different elements forming it. The second step consists of linking each item of the menu to its page. This manipulation is called "Activating the Hyperlink". ## When is the navigation menu activated? The navigation menu cannot be activated unless all the Web pages are created. NB: The activation of the navigation menu should be the last step in creating the website. ## Where is the navigation menu created? The navigation menu should be created on all the pages of the website. Once it is activated, you can access any page of the website from anywhere. ## Activating a hyperlink The tag `<A HREF>` is used to activate a hyperlink; it should be closed with the `</A>` tag. 1. Examine how the menu is created. It is a simple text typed between the two tags `<P>` and `</P>`. 2. Look how the navigation menu is displayed. If you try to click on an item, nothing will happen. This is because the hyperlink is not activated yet. ## How is the hyperlink activated? Examine the following TAG: `<A HREF="dog.html"> DOG </A>` The `<A HREF>` tag should be always assigned to a Web page. In this case the word DOG will be activated as a hyperlink and it will lead to the page "dog.html". 3. Look how the Tags `<A HREF>` and `</A>` are added before and after the title "DOG". 4. Look at the result. Now you can click on the item DOG in order to access the page dog.html. ## A PROJECT TO DO Add the `<a href>` tag before the image tag as follows. `<a href="dogs.html"><img src="dog.jpg"></a>`. Write down the result. # HTML definitions | Definition | Description | |---|---| | Table | A structured set of data made up of rows and columns | | Browser | Visualizes a web page in its final layout | | HTML | A computer language used to build web pages | | Navigation menu | Let's you access all the pages of a website | | Hyperlink | Appear blue and underlined in the browser |

Document Details

Related

Full Transcript

Upgrade to continue