<h1>Example heading 1</h1> <h3>Example heading 3</h3> <h4>Example heading 4</h4> <h6>Example heading 6</h6> Example of heading 6 <h2>Example heading 2</h2> <h5>Example heading 5</h5> Examples of headings 3 <hr> </header> A website designer is an individual responsible for determining the layout, background and design of a website. In addition to having knowledge about the web, website designers also need to be creative in order to decorate the website. CHAPTER 3 Web-Based Programming 293 <h4>Examples of Pure Values</h4> since the beginning.</p> <body> </body> <html> <head></head> Figure 3.3.30 Six levels of heading <p>Pure values should be inculcated in every student <h1>Pure values</h1> Figure 3.3.32 Example of using the <header> element in HTML </html> Figure 3.3.31 Output example for six headings <h4>Definition of Pure Values</h4> <header> Examples of Using Header Elements in HTML Examples of headings 4 Output: Career Science Computer •Logo or icon Figure 3.3.32 shows the <header> element used to display the content identification for a web page or navigation link. The <header> element usually contains: •Author information •One or more <heading> elements (<h1> – <h6>) Examples of headings 1 Examples of headings 5 Examples of headings 2 Machine Translated by Google
Output: Output: Examples of Using Line Break Elements in HTML Examples of Using the Paragraph Element in HTML To organize text in paragraph form, the "<p>" element is used in HTML as shown in Figure 3.3.34. Figure 3.3.35 shows the output for using the <p> element in HTML. Figure 3.3.33 shows an example of output for the use of the <header> element used in HTML. To display text on a new line, the <br> element is used in HTML as shown in Figure 3.3.36. Figure 3.3.34 The <p> element used in HTML Figure 3.3.33 An example of output that has a <header> element Figure 3.3.35 An example of output that has a <p> element Figure 3.3.36 The <br> element used in HTML 294 Computer Science Form 5 <p>This paragraph<br>is used with the<br>line break element </p> Machine Translated by Google
Figure 3.3.37 shows the output for using the <br> element to start a new line in HTML. To display graphics in web pages, the <img> element is used. The <img> element is an empty element, that is, this element does not need a close tag. The src attribute is used with the <img> tag to specify the URL or address the image is taken from. In addition, attributes such as width and height can also be used together for this element to set the displayed graphic display size as desired. Figure 3.3.38 shows an example of using the <img> element in HTML. Figure 3.3.39 shows the output for using the <img> element in HTML. This paragraph is used with the line break element Output: Examples of Image Elements in HTML CHAPTER 3 Web-Based Programming 295 Figure 3.3.38 The <img> element in HTML <img src="URL_for_image—inserted\image.jpg" Figure 3.3.37 An example of output that has a <br> element style="width:128px;height:128px;"> Figure 3.3.39 Output for the <img> element in Figure 3.3.38 Machine Translated by Google
Figure 3.3.40 shows an example of the use of the <iframe> element used together with the HTML elements <p>, <br> and <img>. Figure 3.3.41 shows the output results for the use of <iframe> when the web site sengara.my is displayed in a frame or frames in the 'About Me' website. The iframe HTML element is used to display another HTML document within the currently displayed HTML document. The src, height and width attributes are used to determine the display size on the iframe. <center> <html> Figure 3.3.41 Output example for the <iframe> element <a href="http://sebenarnya.my"><h4>sebenarnya.my</h4></a> </p> <br> Figure 3.3.40 The <iframe> element in HTML the news displayed is correct. To know its validity, we can refer to the website <iframe height="40%" src="http://sebenarnya.my"></iframe> </center> </body> </html> <head><title>Program Example</title></head> <body> <h2>About Me</h2> <img src="E:\girl2.jpg"> <p>My name is Suriana Binti Shuib . I am 17 years old. I go to Seri Intan National Secondary School. I have a happy family </p> <p>I enjoy surfing the Internet in my spare time. However, not all that 296 Computer Science Form 5 Examples of Frame Elements in HTML <iframe> element Machine Translated by Google
2Type the following HTML program: Part 1 3Save (save) as join.html 1 Open the NotePad software. Do this activity in the computer lab. 2Type the following HTML program: 3Save (save) as second.html 4 Open the join.html file through a web browser such as Internet Explorer or Google Chrome. 1 Open the NotePad software. 1Open a new NotePad file. Part 3 Part 2 Objective: Place the frame in the web page 3Save (save) as first.html Observations of Websites 2Type the following HTML program: Individual Work ACTIVITY 3 <head><title>First</title></head> <body> <h1>First frame</ h1> </body> </html> <html> <html> CHAPTER 3 Web-Based Programming 297 <html> <head><title>Join</title></head> <body> <iframe height=”30%” width=”100%”src=”pertama.html”> </iframe> <iframe height=”70 %” width=”30%” src=”second.html”> </iframe> </body> </html> <head><title>Second</title></head> <body> <h1>Second frame</h1> </body> </html> Machine Translated by Google
3.3.4 Using Cascading Style What is CSS? 6Get an image from an Internet source (example: webcam.jpg). 7 Place the image in the first frame as follows: 5 The display result on the web browser is as follows: Sheets (CSS) for Styling Text, Font, Bankground, Table, Borders and Positions Cascading Style Sheet (CSS) is one of the programming languages that is an extension to HTML. CSS allows changes to the style of a web page and describes the presentation of an HTML document. What is CSS? goo.gl/ rB1X3S 298 Computer Science Form 5 Machine Translated by Google
color: blue; 2 1 The text "School Website" is displayed as "heading". Example 1 shows the difference in the rendering of the "School Website" text, i.e. the color style of the text is to be changed to blue. 2 The text is displayed according to the style set on <style>, i.e. color: blue. Description: <head> <title>Without Using CSS</title> </head> <body> <h1>School Website</h1> </body> </ html> Figure 3.3.42 Example HTML and Output (without CSS and with CSS). <head> CHAPTER 3 Web-Based Programming 299 { <html> <body> <h1>School Website</h1> 1 </body> </ html> <title>Using CSS</title> <style> h1 <html> } </style> </head> EXAMPLE 1 Example without CSS in HTML Examples of CSS in HTML Output: Output: How to Write CSS in HTML Programming There are three ways to write CSS in HTML, namely: • External Style Sheet (External Style Sheet) • Internal Style Sheet (Internal Style Sheet) • Inline Style Machine Translated by Google
External Style Sheet (External Style Sheet) which has been written in “style1.css”: There are two files that need to be prepared: 2 A file named “utama.html” needs to be prepared to use the style File “main.html” Example 2 shows how to write CSS using the External Style Sheet. File “style1.css” the following content: 1 A file named "style1.css" should be provided which contains You Did you know? You Did you know? Output: 2 Internal Style Sheets can Internal Advantage 1 You can control several documents at once. <title>Using CSS</title> <head> </html> Advantages of External Style Sheets 3 Internal Style Sheets do not </head> 1 Internal Style 3 You can easily group styles to make them more efficient. color: blue; <link rel=”stylesheet” type=”text/css” href=”style1.css”> h1 { 2 You can build classes for styles that can be applied to different HTML elements. Style Sheets <body> requires you to upload a lot of files. on the currently displayed page. </body> Figure 3.3.43 Example of HTML, CSS and Output (External Style Sheet) <h1>School Website</h1> } <html> Sheets only give an impression 300 Computer Science Form 5 using class and ID. An external style sheet means that style tags will be written and stored in a single file and that file must have the extension "CSS". Next, the file will be called from the HTML tag with the following syntax: <link rel=”stylesheet” type=”text/css” href=”style1.css”> EXAMPLE 2 Machine Translated by Google
An internal style sheet means that style tags can be written either inside the “<head>” or “<body>” area. You can write style tags in both areas. “<style>” can be placed anywhere either before the HTML tag or after the HTML tag. EXAMPLE 3 EXAMPLE 4 Internal Style Sheet (Internal Style Sheet) { color: blue; Figure 3.3.44 Example of HTML, CSS and Output (Internal Style Sheet – <head>) <head> <title>Using CSS</title> </head> <body> </ style> h1 <head> <title>Use of CSS</title> <style> h1 <html> CHAPTER 3 Web-Based Programming 301 } </style> <h1>School Website </h1> </body> </html> color: blue; <html> } </style> </ head> <body> <h1>School Website</h1> </body> </ html> { The program's HTML, CSS and output are shown in Figure 3.3.45. The program's HTML, CSS and output are shown in Figure 3.3.44. Example 4 shows CSS using the Internal Style Sheet written in the "<body>" area. Example 3 shows CSS using the Internal Style Sheet written in the "<head>" area. Output: Machine Translated by Google
set <body> <h1 style = "color: blue;" >School Website</h1> • Hexadecimal color 302 Computer Science Form 5 Colors in CSS can be specified with the following methods: Based on three styles to put • HSL color <html> </html> •RGB color </body> •RGBA colors Mind Test •The color <head> CSS, list the differences you can identify. • HSLA color </head> Figure 3.3.46 Example of HTML, CSS and Output (Inline Style) <title>Use of CSS (Inline Style)</title> Figure 3.3.45 Example of HTML, CSS and Output (Internal Style Sheet – <body>) "<h1>", which is the head (heading) of a title in a web page and the color "<h1>" wants to be changed to blue. Therefore, the style tag should be written in the “<h1>” tag as shown in Example 5. If there are all three styles at once in an HTML, the inline style will be executed first compared to the outer style sheet and the inner style sheet. Inline style means the style tag will be written on the tag section/element. For example, there is Output: Output: Style in line (Inline Style) EXAMPLE 5 Example 5 shows CSS for inline style in HTML (Inline Style). The HTML, CSS and output programs are shown in Figure 3.3.46. You Did you know? Machine Translated by Google
Among those styles are: The following syntax will change the text color of the <h1> heading to blue. Text color (colour) There are several styles for text in CSS for a web page. EXAMPLE 6 Building HTML Websites That Contain CSS for Giving Style to Text color: blue; { color: red; 2 Figure 3.3.47 Example of HTML, CSS and Output (changing text color) h1 { CHAPTER 3 Web-Based Programming 303 </body> </ html> <body> <h1>School Website</h1> 1 <title>Change Text Color</title> <style> h1 <head> } } </style> </head> <html> 1 There is a <h1> heading on the website. 2 The CSS setting color:red makes the <h1> text color red. Description: Example 6 shows changing the text color of <h1> to red. The HTML, CSS and output programs are shown in Figure 3.3.47. Output: Machine Translated by Google
<html> { h1 text-align: center; 2 Figure 3.3.48 Example of HTML, CSS and Output (text alignment) 304 Computer Science Form 5 { text-align: center; Figure 3.3.48 Example of HTML, CSS and Output (text alignment) <head> <title>Text Alignment</title> <style> h1 } } </style> </head> <body> <h1>School Website</h1> 1 </body> </ html> Example 7 shows the text alignment of the <h1> being changed to the middle of the HTML document. The program's HTML, CSS and output are shown in Figure 3.3.48. Description: 2 Setting the CSS text - align : center makes the text align in the middle 1 There is a <h1> heading heading on the website. website. HTML document. document. Description: 2 Setting the CSS text - align : center makes the text align in the middle Text alignment The following syntax will change the text alignment of the <h1> to the middle of the HTML document. EXAMPLE 7 Output: Machine Translated by Google
Did you know? You EXAMPLE 8 Text shadow (Text shadow) The following syntax will add a shadow on the head text (header text) as much as the thickness of two pixels, the distance of the shadow with two pixels and the shadow will be black. Figure 3.3.49 Example of HTML, CSS and Output (shadow) <html> #000000 refers to the Hexadecimal color code in HTML. <head> </head> </style> </body> { <style> <body> <title>Text Shadow</title> h1 text-shadow: 2px 2px #000000; <h1>School Website</h1> 1 CHAPTER 3 Web-Based Programming 305 { } h1 } </html> text-shadow: 2px 2px #000000; 2 Description: Example 8 shows the text for <h1> has a black shadow with a shadow thickness of 2px (pixels) and a distance between the shadow and the original text of 2px 2 CSS Setting text-shadow: 2px 2px #000000; casts a shadow on the text with a shadow thickness of 2px with a shadow color code of #000000, which is black. 1 There is a <h1> heading on the website. (pixels). The HTML, CSS and output programs are shown in Figure 3.3.49. Output: Machine Translated by Google
</head> <style> • Surname font-family: “Arial Black”; } <title>Font Family</title> There are two types of font family names, viz { <h1>School Website</h1> 1 </body> font-family: "Arial Black"; 2 Figure 3.3.50 Example of HTML, CSS and Output (font family) h1 { </html> • Generic name </style> "courier", "arial" and so on } <head> h1 <body> 306 Computer Science Form 5 "serif", "sans-serif", "cursive", "fantasy" and so on <html> EXAMPLE 9 Did you know? Build an HTML Website You Contains CSS to Style the Font (Font) There are several font styles in CSS for a website. Among those styles are: •Font family (Font family) Pupils can refer to the font family that has been "saved" into the computer or refer to the list of fonts found in Microsoft Word. Example 9 shows changing the font style of the <h1> text, which is changing the font family (font family) to 2 The CSS setting font—family: "Arial Black" makes the text type "Arial Black". "Arial Black". The program's HTML, CSS and output are shown in Figure 3.3.50. 1 There is <h1> on the opposite web. Description: Output: Machine Translated by Google
Figure 3.3.51 Example of HTML, CSS and Output (font size) { h1 <title>Font Size</title> <style> CSS Font–Size Property goo.gl/ 83Krjq } </style> </ head> <body> <h1>School Website</h1> 1 </body> </ html> CHAPTER 3 Web-Based Programming 307 <head> font-size: 70; { <html> font-size: 70; 2 } h1 2 The CSS setting font–size:70 makes the text size 70. Description: Example 10 shows changing the font size to a larger one, which is 70 (otherwise known as 70 pixels). The program's HTML, CSS and output are shown in Figure 3.3.51. 1 There is a <h1> heading on the website. The font size can be changed according to the set size. The following syntax shows the font size changed to 70. Font size EXAMPLE 10 Output: Machine Translated by Google
<html> Try changing the code on the side to change the italic font style to bold and normal. <head> h1 { <title>Font Style</title> <style> h1 Good luck! } 308 Computer Science Form 5 } </style> </head> <body> <h1>School Website</h1> 1 </body> </ html> { font-style: italic; 2 Figure 3.3.52 Example of HTML, CSS and Output (font style) font-style: italic; Mind Test 2 Setting the CSS font-style: italic makes the shape of the text set in the web page. 1 There is a <h1> heading in the website. Example 11 shows the conversion of the font style of the text <h1> to italic. The program's HTML, CSS and output are shown in Figure 3.3.52. Description: Font style The font style can be changed as needed in the HTML document. The following syntax shows the font style changed to italic. Among other styles are bold and normal. EXAMPLE 11 Output: Machine Translated by Google
There are several styles that can be added to the background (background) of an HTML document for a website that uses CSS. Among them are: •Change the background color Document background refers to the <body> background. The following syntax will change the background of an HTML document to light green. EXAMPLE 12 Giving Style to the Background Building HTML Websites That Contain CSS for } background-color: lightgreen; <html> Figure 3.3.53 Example of HTML, CSS and Output (background color) body { CHAPTER 3 Web-Based Programming 309 } </style> </head> <body> <h1>School Website</h1> 1 </body> </ html> background-color: lightgreen; 2 <head> <title>Background Color</title> <style> body { 1 There is a <h1> heading in the website. Example 12 shows changing the background color of an HTML document (web page) to lightgreen. Refer to “htmlcolorcodes.com” for other colors. The HTML, CSS and output programs are shown in Figure 3.3.53. 2 Setting CSS background-color:lightgreen to be the background color of the web page. Description: Output: Machine Translated by Google
website background. Daily background-image: url("image.jpg"); 2 Description: 1 There is a <h1> heading in the web page. Example 13 shows the background of an HTML document (web page) can be represented by an image. The image used as the background is obtained from the "image.jpg" file that has been saved. The program's HTML, CSS and output are shown in Figure 3.3.54. Application 2 The image saved in the same place as the HTML document, which is "image. jpg" has become EXAMPLE 13 The following syntax will change the background of an HTML document by adding an image or picture as the background. •Adding an image or picture as a background By default, the image will be repeated until it fills the entire HTML document. Images can be saved in the same or different places as the HTML document. Pictures can also be obtained by calling the link to the picture. background-image: url("image.jpg"); } <html> 310 Computer Science Form 5 body { } </style> </head> <body> <h1>School Website</h1> 1 </body> </ html> You can visit goo.gl/ 27ZdNDM to try changing the background color of the HTML document. <title>Image Background</title> <style> body { Figure 3.3.54 Example of HTML, CSS and Output (image stored in the same place as the background) <head> Output: Machine Translated by Google
<html> background-image: url(“D:/web/image.jpg”); body { <head> } </style> </head> <body> <h1>School Website</h1> 1 </body> </ html> Background-image goo.gl/ qyV5LB background-image: url(“D:/web/bandar.jpg”); 2 Figure 3.3.55 Example of HTML, CSS and Output (image stored elsewhere) <title>Image Background</title> <style> body { CHAPTER 3 Web-Based Programming 311 } Example 14 shows that the background of an HTML document (web page) can be represented by an image obtained from the file "city.jpg" stored in another directory, namely "D:web/". The program's HTML, CSS and output are shown in Figure 3.3.55. Description: 2 The image saved in another directory, that is from "D:/web/bandar.jpg" becomes the background of the website. 1 There is a <h1> heading. The following syntax shows a picture or image that can be stored in a different place than the HTML document but it is necessary to access the image by knowing the path or directory of the image. EXAMPLE 14 Output: Machine Translated by Google
<html> body { background-image: url(“http://allfreedesigns.com/ Figure 3.3.56 Example of HTML, CSS and Output (image from Internet source as background) <title>Image Background</title> <style> body { 312 Computer Science Form 5 } } </style> </head> <body> <h1>School Website</h1> 1 </body> </ html> <head> background-image: url("https://newevolutiondesigns.com/images/freebies/ white-wallpaper-18.jpg"); wp-content/uploads/2014/08/tech-background-6.jpg”); 2 1 There is a <h1> heading. Example 15 shows the background of an HTML document (web page) can be represented by an image obtained from a file in an Internet resource such as "http://allfreedesigns.com/wp-content/uploads/ 2014/08/tech-background-6. jpg". The program's HTML, CSS and output are shown in Figure 3.3.56. Description: 2 Images from Internet sources, namely from "http://allfreedesigns.com/wp-content/ uploads/2014/08/ tech-background-6.jpg" become the background of the website. The following syntax will load pictures or images found in Internet sources (Example: https://newevolutiondesigns.com/images/freebies/white-wallpaper-18.jpg ) by taking the picture link. EXAMPLE 15 Output: Machine Translated by Google
Previously, students have learned how to create a table or known as a table in an HTML document. Table consists of "<tr>" "<th>" and "<td>" which refers to each line in the table (row), table head (header) and table item (data). There are several styles that can be added to the table. Among them are: , In the following syntax, the entire table will have an outer line or border added. • Placing an outer line or border EXAMPLE 16 Giving Styles to Tables Building Html Websites That Contain CSS for <head> <title>Table Style</title> <style> <tr> <th>WEBSITE CONTENT</th> </tr> <html> <tr> { { table table border: 1px solid; <td>School Introduction</td> </tr> } </style> </ head> <body> <h1>School Website</h1> } CHAPTER 3 Web-Based Programming 313 border: 1px solid; 2 <tr> <td>Teacher List</td> </tr> </ table> </body> </ html> <table> 1 Example 16 shows a table (table) found in an HTML document (web page) plus an outer line (border). The HTML, CSS and output programs are shown in Figure 3.3.57. Machine Translated by Google
} 314 Computer Science Form 5 table, th, td { border: 1px solid; Figure 3.3.57 Example of HTML, CSS and Output (border table) Figure 3.3.58 Line type The following syntax uses the solid line type. There are several types of lines, namely Solid, Dotted, Dashed, Inset and Outset as shown in Figure 3.3.58. The same goes for the header and data on the table, each part of which will have its own border. The thickness of the line or border is indicated by 1px, which is the thickness of 1 pixel. Students can make it thicker by adding a number like 3px. Output: Inset 1 There is a <table> on the website. 2 <table> has an outline with CSS settings of solid line type and thickness of Line name Description: Dashed Dotted Solid Output 1px. Line Machine Translated by Google
1 There is a <table> on the website. 1 border: 1px solid; 2 Description: 2 Border <table>, <th>, <td> have a single line with CSS settings of solid line type and Example 17 shows that the border is to be added to the table (table), table head (header) and table data represented by <table>, <th> and <td>. Each border has a thickness of 1 pixel and a solid line type. The program's HTML, CSS and output are shown in Figure 3.3.59. thickness of 1px. Output: EXAMPLE 17 <tr> <head> <html> <th>WEBSITE CONTENT</th> </tr> } </style> </ head> <body> <h1>School Website</h1> <table> Figure 3.3.59 Example of HTML, CSS and Output (type of line from thick Border Table) CHAPTER 3 Web-Based Programming 315 <td>School Introduction</td> </tr> <td>Teacher List</td> </tr> </ table> </body> </ html> <tr> <title>Table Style</title> <style> table, th, td { <tr> Machine Translated by Google
table, th, td { <td>Teacher List</td> </tr> </ table> </body> </ html> } border-collapse:collapse; <tr> 316 Computer Science Form 5 <html> } </style> </ head> <body> <h1>School Website</h1> <table> border: 1px solid; Figure 3.3.60 Example of HTML, CSS and Output (Single Border Table) <title> Table Style</title> <style> table <tr> <head> <tr> <th>WEBSITE CONTENT</th> </tr> <td>School Introduction</td> </tr> { } border-collapse: collapse; 2 { table Example 18 shows that the table has one line on the border with a thickness of 1 pixel and a solid line. The program's HTML, CSS and output are shown in Figure 3.3.60. 1 The following syntax sets a line or border to be a single border. EXAMPLE 18 Output: Machine Translated by Google
The following syntax thickens the border by 3px. EXAMPLE 19 Description: 2 Border <table> has a single line with the CSS border-collapse: collapse setting. border: 3px solid; 2 Example 19 shows the table has one line on the border line and a thickness of 3 pixels and a solid line type. The program's HTML, CSS and output are shown in Figure 3.3.61. 1 There is a <table> on the website. 1 border-collapse: collapse; border: 3px solid; } <td>School Introduction</td> </tr> { table, th, td { CHAPTER 3 Web-Based Programming 317 <tr> table, th, td { } <html> <td>Teacher List</td> </tr> </ table> </body> </ html> <tr> } </style> </ head> <body> <h1>School Website</h1> <table> <tr> <title> Table Style</title> <style> table <th>WEBSITE CONTENT</th> </tr> <head> Machine Translated by Google
<html> <head> border-collapse: collapse; 318 Computer Science Form 5 } td Figure 3.3.61 Example of HTML, CSS and Output (bold Border Table) { border: 2px dashed; border: 2px solid; table, th { <title> Table Style</title> <style> table { } </style> </ head> <body> <h1>School Website</h1> } EXAMPLE 20 Output: Example 20 shows the table has a single line on the border line and a thickness of 3 pixels and a solid line type, while <td> has a dashed line type. The program's HTML, CSS and output are shown in Figure 3.3.62. Description: 1 There is a <table> on the website. 2 2 Border table is thickened with CSS border: 3px solid. Machine Translated by Google
Description: 2 The table border has been set by separating the CSS settings for <th>, which is a 2px border solid and for <td> that is, border:2px dashed. Example 21 shows the width and height of the table (table) changed to 100% and 20%, that is, the width will fill the entire HTML document and the height will only fill 20% of the HTML document. The HTML, CSS and output programs are shown in Figure 3.3.63. 1 There is a <table> on the website. 1 • Setting the width and height of a table The following syntax shows the width and height of a table can be set according to the suitability of a web page. <td>Teacher List</td> </tr> </ table> </body> </ html> <tr> <th>WEBSITE CONTENT</th> </tr> table <tr> <tr> } width: 100%; height: 20%; CHAPTER 3 Web-Based Programming 319 <table> Figure 3.3.62 Example of HTML, CSS and Output (separate Border Table settings) <td>School Introduction</td> </tr> { Output: EXAMPLE 21 Machine Translated by Google
1 There is a <table> on the website. 3 The height of <table> has been set, which is height:20%. Description: 2 The width of <table> has been set, which is width:100%. 1 Output: <tr> width: 100%; 2 <th>WEBSITE CONTENT</th> </tr> border-collapse: collapse; } <tr> <td>School Introduction</td> </tr> height: 20%; 3 <html> border: 1px solid; 320 Computer Science Form 5 table, th, td { <td>Teacher List</td> </tr> </ table> </body> </ html> <title> Table Style</title> <style> table { <tr> } </style> </ head> <body> <h1>School Website</h1> <table> <head> Figure 3.3.63 Example of HTML, CSS and Output (width and height of the table) Machine Translated by Google
<tr> } text-align: center; Figure 3.3.64 Example of HTML, CSS and Output (table text alignment) <table> <td>Teacher List</td> </tr> </ table> </body> </ html> } </style> </ head> <body> <h1>School Website</h1> <head> <th>WEBSITE CONTENT</th> </tr> <html> <tr> <td>School Introduction</td> </tr> table { CHAPTER 3 Web-Based Programming 321 <title> Table Style</title> <style> table <tr> { } table, th, td { Example 22 shows that the text in the table can be aligned to center, which is in the middle of the <th> or <td> field. The program's HTML, CSS and output are shown in Figure 3.3.64. border: 1px solid; border-collapse: collapse; width: 100%; height: 20%; text-align: center; 2 1 The alignment of the text in the table can also be set and there are three forms of alignment, namely: (a) left (b) center (c) right • Set the alignment of the text in the table EXAMPLE 22 Output: Machine Translated by Google
• Changing the background color and text color in the table The following syntax changes the background color and text color in the table. EXAMPLE 23 Description: 2 The text in the <table> has been manually aligned with the CSS text-align:center placement. Example 23 shows the background color of the table is changed to green and the text color in the table is set to white. The program's HTML, CSS and output are shown in Figure 3.3.65. border-collapse: collapse; background-color: green; 2 colors: white; 3 1 1 There is a <table> on the website. <td>Teacher List</td> </tr> </ table> </body> </ html> { } table, th, td { border: 1px solid; <tr> table { } <tr> 322 Computer Science Form 5 } </style> </ head> <body> <h1>School Website</h1> <table> background-color: green; color: white; <tr> <th>WEBSITE CONTENT</th> </tr> <td>School Introduction</td> </tr> <head> <title> Table Style</title> <style> table <html> Machine Translated by Google
} </style> </ head> <html> border: 1px solid; border-collapse: collapse; backgroundcolor: green; color: white; CHAPTER 3 Web-Based Programming 323 <head> <title> Table Style</title> <style> table { padding: 20px; 2 table { { } padding: 20px; Figure 3.3.65 Example of HTML, CSS and Output (background color and text color for Table) } table, th, td •Thickening the distance between the fields (padding) in the table The distance between a field or a "<td>" in a table can be increased by setting the distance in pixels. Output: Description: 1 There is a <table> on the website. 3 <table> has white text color with CSS setting color: white. Example 24 shows the distance between table fields changed or increased to 20 pixels. The program's HTML, CSS and output are shown in Figure 3.3.66. 2 <table> has a green background color with the setting CSSbackground–color:green. EXAMPLE 24 Machine Translated by Google
Description: 2 Padding: 20px is used for the distance between fields in <table>, that is from one <td> to one others. 1 There is a <table> on the website. 1 Giving Style to Borders Building HTML Websites That Contain CSS for <td>Teacher List</td> </tr> </ table> </body> </ html> <tr> <th>WEBSITE CONTENT</th> </tr> border-style: solid; borderwidth: 5px; border-color: red; <tr> <tr> { h1 324 Computer Science Form 5 <body> <h1>School Website</h1> <table> Figure 3.3.66 Example of HTML, CSC and O/P (Padding Table) <td>School Introduction</td> </tr> } Output: This section will show how to place an outer line or known as a border for a section such as paragraph "<p>", heading "<h1>" and so on. The method is the same as what has been learned in the table, that is students can put an outer line or border for the produced table. Machine Translated by Google
1 There is a <h1> heading on the website. Example 26 shows the border of the heading <h1> which has dashed lines. The program's HTML, CSS and output are shown in Figure 3.3.68. Description: Example 25 shows a <h1> heading that has a border, which is an outer line and the line type is solid and the border thickness is set to 5 pixels. The program's HTML, CSS and output are shown in Figure 3.3.67. 2 border-style:solid is the type of border used. Output: EXAMPLE 26 EXAMPLE 25 } </style> </head> <body> <h1>School Website</h1> 1 </body> </ html> <head> <html> border-style: solid; 2 borderwidth: 5px; CHAPTER 3 Web-Based Programming 325 { Figure 3.3.67 Example of HTML, CSS and Output (borders) <title>Border Style</title> <style> h1 Machine Translated by Google
Description: 1 There is a <h1> heading on the website. 2 border-style: dashed is the type of border used. Building HTML Websites That Contain CSS for Giving Style to the Position </body> { </html> <h1>School Website</h1> 1 h1 326 Computer Science Form 5 border-color: red; Figure 3.3.68 Example of HTML, CSS and Output (border type) border-style: dashed; 2 borderwidth: 5px; <html> </style> } <title>Border Style</title> <style> <body> </head> <head> Output: This section will set the position of a component or tag in "<body>" such as "<h1>". The position is set by specifying the CSS components, that is the container or container such as "<h1>", the type of position such as relative, the width of the container (width) and the height of the container (height) in pixels or percent and the position such as top, left, right and bottom in pixels. The position starts from the values top 0, left 0, right 0 and bottom 0. There are several types of positions, namely: Static This position is the default position of every HTML element found in the document. The position of the elements will follow the sequence or order on the website. The position of the element will not change or will not follow the rules. Machine Translated by Google
• Fixed The element's position is changed depending on or relative to its normal position or its initial position. If the 4th box is to be added, then the box will be placed in the lowest position, which is below the 3rd box. The position of the 2nd box will be out of sequence or order in the web page and lead to the original point. 2nd box position The position of the elements will not follow the order or order on the website anymore and will be placed according to the desired position. Absolute Relative affected by changes in the 2nd box. Example: When the position of the 2nd box is changed to top:50px and left:20px, then the 2nd box will move down by 50px and move to the right by 20px. The other box will not Example: The position of the element depends on the browser viewport, that is, on the user's view of the web browser. The position of the element will remain in the same position even if the user scrolls on the web page. will change, i.e. move by 20px down and 20px to the right calculated starting from the origin point. Example: normal position/initial position position after being imposed top: 50px, left: 20px Three separate blocks from the "Browser Viewport" view position after being imposed position after being imposed Origin point (0, 0) Origin point (0, 0) normal position/initial position top: 50px, left: 20px top : 20px, left : 20px CHAPTER 3 Web-Based Programming 327 Origin point (0,0) position after being imposed Three separate blocks from the "Browser Viewport" field top: 50px, left: 20px Origin point (0,0) Three separate blocks from the "Browser Viewport" field 1 2 3 2 3 3 1 2 Machine Translated by Google
Example 28 shows changing the position (position) of the <h1>, <h2>, <h3>, <h4> components in the web page. The HTML program, JavaScript and output are shown in Figure 3.3.70 and Figure 3.3.71. Example 27 shows an HTML document (web page) that has headings <h1>, <h2>, <h3> and <h4> and can be in a designated position as shown in Figure 3.3.69. 4 3 2 } <title>Without Style Position</title> </head> <body> <h1>School Website (Absolute)</h1> <h2>School 1 (Relative)</h2> <h3>School 2 (Fixed) </h3> <h4>School 3 (Static)</h4> </body> </html> } h2 background-color: lightgreen; position: absolute; width: 40%; top: 10px; left: 50px; height: 100px; <head> background-color: lightpink; position: relative; top: 70px; width: 30%; left: 300px; height: 100px; 328 Computer Science Form 5 { Figure 3.3.69 Example of HTML, CSS and Output without positioning styles <html> } h3 background-color: lightblue; position: fixed; bottom: 70px; width: 20%; left: 200px; height: 100px; { <html> <head> <title> Style Position</title> <style> h1 { EXAMPLE 28 EXAMPLE 27 Output: Machine Translated by Google
5 The <h4> position style has been changed to static, which means the position will not change or not according to the rules. The ranking will be in order on the website. 5 2 The <h1> position style has been changed to absolute, which is according to the CSS setting, top: 10px, 4 The <h3> position style has been changed to fixed, that is, the <h3> position is always in the same place even if the user views the website in another area. The <h3> position setting is bottom:70px, left:200px, height:100px. 1 There are four components on a web page, namely <h1>, <h2>, <h3>, and <h4>. 1 3 Position style <h2> has been changed to relative, that is according to the original position and following Description: setting top:70x, left:300px, height:100px. left:50px, height:100px on website position. Figure 3.3.71 Output Example (position) { } </style> </ head> <body> <h1>School Website (Absolute)</h1> <h2>School 1 (Relative)</h2> <h3>School 2 (Fixed)</h3> < h4>School 3 (Static)</h4> </body> </ html> Figure 3.3.70 Example of HTML and CSS (position) h4 background-color: lightgrey; position: static; bottom: 70px; width: 10%; left: 200px; height: 100px; CHAPTER 3 Web-Based Programming 329 Output: Machine Translated by Google
Part 1 Students are required to create a new HTML file and create a website without applying any styles in CSS. The HTML tag for the website is given as follows: Developing a Simple Website Using CSS Do this activity in the computer lab. Part 2 Next, students will add or modify the HTML file by adding CSS styles that change the style of text, font, background, table and position. Objective: Students can apply CSS styles that have been learned. Group work ACTIVITY 4 <tr> <td>Contact Us</td> <td>eBook</ td> <td>Cookie Information</td> </tr> <td>Career Opportunities</td> <td>Related Web Pages</td> <td>Privacy Policy</td> </tr> 330 Computer Science Form 5 <head> <td>Site Map</td> <td>Worldwide</td> <td>Rights & Permissions</td> </tr> </ table> <tr> <html> <tr> <tr> <title>CSS Application</title> </head> <body> <table> <table> <tr> <td>About Us</td> <td>Focus</ td> <td>Terms and Conditions</td> </tr> <td>© 2016 CSS Activities. (001111-T). All Rights Reserved.</td> </tr> </table> </body> </html> Machine Translated by Google
Construction of Interactive User Websites Including Data Validation Features Example 29 shows a program that will check if data in a text field has been entered textname = document.getElementById("n1").value; 4 <button type="button" onclick="checkData()">Name Verification</button> 2 window.alert("Please enter your name"); 5 Figure 3.3.72. <input id="n1"> 1 before pressing the "Name Verification" button. The program's HTML, CSS and output are shown in function checkData() 3 3.3.5 Building an Interactive User Website, which Contains Data Validation Features, Option Buttons and Popup Boxes An interactive user website is a web page that allows website visitors to interact with the content on the website. Among the activities that can be done are such as giving a comment or leaving a contact number in the form provided on the website. able to accept the implementation of interactions with the website and process requests at the user level. In a website, data can be verified on a form or field provided. For example, data for name, address and identification number. Other activities that can be performed are such as validating data on forms, making choices from various option buttons and responding to popup boxes or dialog boxes found in a web page. This topic will explain and show how the client scripting language, which is JavaScript EXAMPLE 29 <script> if (textname==" ") <html> } </html> } CHAPTER 3 Web-Based Programming 331 var textname; { </body> Your Name: { </script> <body> Machine Translated by Google
3 If no name is entered and the button is clicked, the subroutine checkData ( ) method is called. 4 The name value in the "Your Name:" text field will be read and checked using You:”, the following is the program response: 2 2 Onclick button for "Name Verification" provided. Once the "Name Verification" button is pressed without entering any data in the text field "Name 5 If the text field is empty, i.e. no name is entered, an alert popup box with the message "Please enter your name" will be displayed as a reminder to the user to enter a name. 4 1 A text field is provided so that the user can enter a name. if statement. Description: Example 30 shows a program that will check whether the data in the text field is a number or not a number. If the user enters non-number data, a message will be displayed using the window.alert() function. The HTML program, JavaScript and output are shown in Figure 3.3.73. EXAMPLE 30 Output: Figure 3.3.72 Example of HTML, JavaScript and Output (data validation) } enter a number."); Queue Number: <input id="n2"> 1 <button type="button" onclick="checkNumber()">Queue Number Verification </button> 332 Computer Science Form 5 <body> var textnumber; textnumber = document.getElementById("n2").value; if (isNaN(textnumber)) { window.alert("The entered value is not a number. Please 5 <html> } </script> </ body> </ html> <script> function checkNumber() 3 { Machine Translated by Google
2 Onclick buttons for “Queue Number Verification” are provided. Numbers only A combination of text and numbers 3 After the queue number is entered and the button is clicked, the checkNumber( ) subroutine is displayed. 1 A text field is provided so that the user can enter the queue number. along with the message “The entered value is not a number. Please enter a number.” will be displayed. 5 If the queue number value is not a number (check using the isNaN function), an alert popup box Description: 4 The queue number value in the text field is read and checked using the if statement. Conversely if the queue number value is a number, no other commands are executed. Build Interactive User Websites that include Optional Button Features Text only Output: CHAPTER 3 Web-Based Programming 333 Figure 3.3.73 Example of HTML, JavaScript and Output (number or non-number validation) A radio button will provide more than one option and the user has to select only one of those options. In a website, users can also interact by making choices that have been provided in the website. Therefore, in order to develop a website, there are various methods to produce the option buttons provided by a website. •Radio button A radio button can be generated in a “<form>” and a radio button is a type of input in a “form” (input type ="radio"). The name of each radio button can be given, which is in the format name:“name_button_radio”. If the name on the name attribute is the same, then both radio buttons are in the same group. Only one button can be selected at a time. id is the unique name given to each radio button Among the optional buttons provided are radio buttons and checkbox buttons. Machine Translated by Google
EXAMPLE 31 if (document.getElementById('full').checked == true) 4 { If the name on the name attribute is the same, then both radio buttons are in the same group. Only one button can be selected at a time. } document.getElementById('full').checked=false; document.getElementById('half').checked=false; } <script> function checkMod() 3 { <body> <b>STUDY MODE</b> } else } </script> </ body> </ html> window.alert("Study Mode: FULL TIME"); <html> <input type="radio" name="mod" id="full">Full Time <input type="radio" name="mod" id="part">Part Time 334 Computer Science Form 5 { <form action=""> if (document.getElementById('half').checked == true) { window.alert("Study Mode: PART TIME"); <p> <button type="button" onclick="checkMod()">Study Mode Confirmation 2 </button> </p> </form> as identification and can be called in scripting programs for access or review purposes. Example 31 shows how the generation of radio buttons in HTML and the response to options on the radio button is implemented by JavaScript, that is, at the client scripting language level. Example 31 shows a program that validates a selection from a radio button. 5 1 6 There are two radio buttons, namely “FULL TIME” and 'HALF TIME”. When the radio button is clicked, the program returns the value true, that is, the button is selected and becomes input to the program. There is a “Study Mode Validation” button which will call the checkMode( ) procedure to execute and check the selected radio button. The message “Study Mode: FULL TIME” will be displayed if the first radio button is selected, and the message “Study Mode: PART TIME” will be displayed if the second radio button is selected. The HTML program, JavaScript and output are shown in Figure 3.3.74. Machine Translated by Google
3 When the "Study Mode Confirmation" button is clicked, the checkMode() subroutine is called. 4 The study mode radio button option is checked using an if statement. Option 2 6 On the other hand, if the user selects the id="half" radio button, an alert pops up box with a message 2 Onclick buttons for "Study Mode Confirmation" are provided. Option 1 FULL TIME" will be displayed as a reminder. 1 Two radio buttons for Study mode are displayed, namely "full time" and "part time". 5 If the user selects the id="full" radio button, a pop-up alert box with the message "Study Mode: Description: "Study Mode: HALF TIME" will be displayed as a reminder. The example below shows how the production of a checkbox button in HTML and the response to the selection on the checkbox button is implemented by JavaScript, that is at the level of the client scripting language. • Checkbox button The checkbox button will provide several options and the user can select more than one option. are the same, then both checkbox buttons are in the same group. Unlike radio buttons, more than one button can be selected at a time for checkbox buttons. id is a unique name given to each checkbox button as self-identification and can be called in scripting programs for access or review purposes. Checkbox buttons can be produced in "<form>" and checkbox buttons are also a type of input in the form (input type="checkbox"). If the name on the name attribute Output: Figure 3.3.74 Example of HTML, JavaScript and Output (Radio Button) CHAPTER 3 Web-Based Programming 335 Machine Translated by Google
EXAMPLE 32 1 5 3 Example 32 shows a program using a checkbox button to provide a list of subject options and after the "Subject Validation" button is pressed, the selected subjects are inserted into the text field area called the text area. } <input type="checkbox" name="sub" id="Mathematics">Mathematics <input type="checkbox" name="sub" id="English">English <input type="checkbox" name="sub" id="Science">Science <input type="checkbox" name="sub" id="Malaysian Language">Malaysian Language <p><button type="button" onclick="checkSubjek ()">Subject Verification 2 < /button></p> <p><textarea id="Subject List" rows="10" cols="30" value="b"> </textarea></p> <p><button type="button " onclick="resetSubjek()">Reset Subject </button></p> </form> } } <b>SUBJECTS WISH TO BE REGISTERED</b> <form action="" name="MyForm"> 336 Computer Science Form 5 <script> function checkSubject() { var elLength = document.MyForm.elements.length; document.getElementById("SubjectList").value =" "; for (i=0; i<elLength; i++) { function resetSubject() 4 { var type = MyForm.elements[i].type; if (type=="checkbox" && MyForm.elements[i].checked) { MyForm.elements[i].checked=false; var elLength = document.MyForm.elements.length; for (i=0; i<elLength; i++) { } </script> </ body> </ html> <html> <body> document.getElementById("SubjectList").value += MyForm.elements[i].id+'\n'; } Machine Translated by Google
Output: 3 When the "Subject Validation" button is clicked, the checkSubject() subroutine is called. All subjects selected on the checkbox will be saved in the "MyForm" form and displayed on the textarea id="Subject List" provided. 4 When the "Reset Subject" button is clicked, the resetSubject() subroutine is called. After clicking subject confirmation 2 Onclick buttons for "Subject Verification" and "Subject Reset" are provided. Before clicking subject confirmation 1 Four checkboxes for subject selection are displayed. 5 resetSubjek() will clear the "MyForm" form and textarea. Description: Figure 3.3.75 Example of HTML, JavaScript and Output (Checkbox) CHAPTER 3 Web-Based Programming 337 Machine Translated by Google
JavaScript has three types of popup boxes, namely Alert box, Confirm box and Prompt box. • Alert box This Alert box will be displayed and used if you want to get the certainty of the information coming from the user or give feedback to the user. The syntax for creating an Alert box is window.alert(" "). Description: 1 A text field is provided so that the user can enter a name. enter a name. 3 Message "You need to enter your name." displayed to remind the user that alertInput() is called. Example 33 shows a program that needs to accept a user's name and remind the user to enter the name by displaying a message on the Alert box. The HTML program, JavaScript and output are shown in Figure 3.3.76. <input type="text" > 1 2 The alert popup box continues to be displayed as soon as the website is opened because of the subroutine window.alert("You need to enter your name."); 3 Build Interactive User Websites that include Popup Box Features EXAMPLE 33 <body> Name: alertLogin(); 2 function alertEnter() { <html> Figure 3.3.76 Example of HTML, JavaScript and Output (Alert Box) <script> } </script> </ body> </ html> 338 Computer Science Form 5 Output: Machine Translated by Google
EXAMPLE 34 <input type="text" > 1 <button onclick="pastiHantar()">Send</button> 2 <script> function sureSend() 3 { } CHAPTER 3 Web-Based Programming 339 Name: Figure 3.3.77 Example of HTML, JavaScript and Output (Confirm Box) <body> </script> </ body> if (window.confirm("Are you sure?") == true) 4 { </html> <html> } • Confirm box This Confirm box will be used if the user wants to confirm some information. The syntax to generate the Confirm box is window.confirm(" "). Confirm box with the text "Are you sure?" displayed for confirmation Example 34 shows a program that accepts a username and confirms the name to be sent using the Confirm box. The HTML program, JavaScript and output are shown in Figure 3.3.77. User input name and click "Send" button document.write("Information has been sent."); 5 Once the "OK" button is clicked, the message "Information has been sent" is displayed. If the "Cancel" button is clicked, no message is displayed and the previous display is maintained. Output: Machine Translated by Google
• Prompt Box This Prompt box will be used if the user wants to enter a value before entering a website. The syntax for generating the Prompt box is window.prompt(" "). Solution: 5 Message "Information has been sent." will be displayed. If the "Cancel" button is clicked the same display 3 When the "Send" button is clicked, subroutine sureSend() method is called and a confirmation popup box 2 OnClick buttons for "Submit" are provided. will be maintained. the word if. 2 1 A text field is provided so that the user can enter a name. 4 4 If the "OK" button is clicked, the "Are You Sure" information is correct and checked using Description: will be displayed. Example 35 shows a program that enters a username through the use of a Prompt box. EXAMPLE 35 340 Computer Science Form 5 <body> <p>Please click the following button to enter your name.</p> <button onclick="enter Name()">Click Enter Name</button> 1 <p id="information"> </p> < script> function enterName() { } </script> </ body> document.getElementById("information").innerHTML = + user + "! How are you today?"; if (user != null) 3 { <html> } </html> var user = window.prompt("Please enter your name:", ""); "Hi " Machine Translated by Google
3 If "OK" is clicked, the name text field will be checked using an if statement. Text field 2 When the button is clicked, the inputName() subroutine is called and a pop up prompt box is displayed asking the user to enter a name. Prompt box display Once the "OK" button is clicked, the message "Hi Aminah! How are you today?" displayed. 1 An onclick button, namely "Click Enter Name" is provided. The button needs to be clicked 4 If a name is entered or the text field is not empty, the message "Hi Aminah! How are you today?" displayed. If no name is entered, i.e. the text field is empty, the pop up prompt button remains displayed unless the "Cancel" button is clicked. Description: checked whether the name is entered or not. Output: CHAPTER 3 Web-Based Programming 341 Figure 3.3.78 Example of HTML, JavaScript and Output (Prompt Box) Machine Translated by Google
Ease of updating the acquired data and save it back into the database Search information based on requests from users information obtained on request from users A form object (form) in a web page Connection to the server computer (web server) Elements in an interactive website Display 3.3.6 Use of Server Scripting Languages to Build Websites That Can Access and Update Data in Databases (iv) website content is frequently updated. An interactive website means a website that has dynamic content and is suitable for a search or request from a user. The content of the website can be changed from a specific website or as a result of server computer processing that is displayed differently according to the request from the user. Among the interactive website features are: (iii) website content changes according to user requests. An example of an interactive website is a website that displays student biodata information. Student information has previously been stored in the server computer. When we want to display specific student information, we only need to enter search information such as student number and then the website will display the student's biodata information based on the student number that has been entered. Figure 3.3.79 shows the important elements found in an interactive website. (i) using web programming languages such as PHP, ASP and others. (ii) have access to the database. Figure 3.3.79 Important elements in an interactive website 342 Computer Science Form 5 Machine Translated by Google