Scribd
Upload
57 views152 pages

Ict 21

The document discusses how to create and style web pages using HTML and CSS. It covers the different layers involved in web development including the content, presentation and behavior layers. It provides information on key HTML tags and how to add text formatting, images, links and tables. It also discusses how to style and position page elements using CSS.

Uploaded by

jeremiah341harry0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
57 views152 pages

Ict 21

The document discusses how to create and style web pages using HTML and CSS. It covers the different layers involved in web development including the content, presentation and behavior layers. It provides information on key HTML tags and how to add text formatting, images, links and tables. It also discusses how to style and position page elements using CSS.

Uploaded by

jeremiah341harry0
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 152

Information and

Communication
Technology

By Tr. Nay Myo Htaik


21
2

WEBSITE
AUTHORING
21.1 Web development layers
21.2 Create a web page
21.3 Use stylesheets
21.1 Web development layers 3

 A website is a collection of individual but related web pages that are stored
together and hosted by a web server.
 Web pages can include different objects such as text, sound, video and still
images.
 Using three layers.
 Each has a different purpose:
o the content layer
o the presentation layer
o the behaviour layer.
THE CONTENT LAYER 4

 text and images placed

 where the page structure, such as frames, tables, hyperlinks

 Web pages can include different objects such as text, sound, video
and still images.

 Structure layer
What is HTML? 5

 an abbreviation for HyperText Markup Language

 a text-based language used to develop the content layer of websites

 Files are written in HTML using a simple text editor –Notepad

(Adobe Dreamweaver or Microsoft Expression Web, Visual Studio


Code)

 Files are written in text format and are usually saved with an .htm
(or .html) file extension
THE PRESENTATION LAYER 6

 where the visual impact of the web page is created

 contains the styles to be used, such as colour themes, fonts

 CSS-cascading stylesheet, another text-based language


CSS-CASCADING STYLESHEET 7

 Styles are created and added to web pages


 written (embedded) into HTML but it is usually created in a
separate file saved with a .css file extension
 The stylesheet is then attached to a web page.
 Many websites have one or more common stylesheets
attached to every page in the website to have a similar
appearance with the same font styles and colour schemes
 Can develop at our own stylesheets using a simple text editor
THE BEHAVIOUR LAYER 8

 This layer is where all actions, such as controlling


elements (except hyperlinks), on a web page are
created

 usually created using scripting language like

JavaScript
CREATE A WEB PAGE 9

 Use the content layer to create a web page Structure (HTML)


 <!DOCTYPE html> _All HTML web pages start with a <!DOCTYPE html>
declaration
 The <!DOCTYPE html> declaration is an instruction to the browser to tell it
that the page is written in HTML
 <html> </html> _The first tag that will usually appear in any web page will be
<html>.
 <head> </head>
 <body></body>
<html> in Content layer 10

 The angle brackets tell the browser that this is a markup tag and not
text to be placed on the web page

 The browser does not display the HTML tags

 Most HTML commands have two tags: one to open the command
and one to close it

 a pair of angle brackets


CONT 11

 The tag </html> tells the browser that this is the end of this markup
language

 The forward slash shows that it is a closing tag


THE HEAD SECTION 12

 starts with <head> and closes with </head>

 Objects between these tags are not usually displayed by the web

browser

 It includes <base>, <link>, <meta>, <title>, <style> and <script>.

 should always contain a title that it is the name displayed in the


browser toolbar, Page title
THE BODY SECTION 13

 starts with <body>

 closes with </body>

 objects between these tags are usually displayed in the web page.

 Main Contents
CONT’
14

 Add comments Start <!– and end -->

<!DOCTYPE html>
<html>
<head> <title> Webpage Title Name </title>
</head>
<body>
</body> <!– This is Comments….. -->
</html>
CONT’
15
➢ <p> Legacy Gaming Computers </p> -- Paragraph
➢ <h1> to <h6> -- 6 Heading styles Largest to smallest
➢ <h1> </h1>
➢ <h2> Legacy Gaming Computers </h2>
➢ <h3> </h3>
➢ <h4> </h4>
➢ <h5> </h5>
➢ <h6> </h6>
CONT’
16

Task 21a

Create and save a new web page showing paragraph and heading styles.
CONT’
<!DOCTYPE html> 17
<html>
<!-- Markup created on 06/01/2022 -->
<head>
<title>Task 21a</title>
</head>
<body>
<p>My first web page by MY NAME HERE</p>
<h1>This is style h1, the largest heading style</h1>
<h2>This is style h2</h2>
<h3>This is style h3</h3>
<h4>This is style h4</h4>
<h5>This is style h5</h5>
<h6>This is style h6, the smallest heading style</h6>
<p>This is style p, the paragraph style</p>
</body>
</html>
Browser Output Display 18
CONT’ 19

 <sup> and </sup>

 <sub> and </sub>

 <body>

 <p> This is superscripted 3<sup>2</sup> </p>

 <p> This is subscripted H<sub>2</sub>O</p>


20
21
Browser Display Output 22
23
 <!DOCTYPE html> 24
 <html>

 <head> <title>activity 21a</title>


 </head>

 <body>

 <p>Text can be superscripted like 100 m<sup>2</sup></p>


 <p>Text can be superscripted like 500 cm<sup>3</sup></p>
<p>Text can be subscripted like CO<sub>2</sub>O</p>-->
 </body> </html>
Browser Output Display 25
21.2.8 INSERT A TABLE 26
Html tags for table
 <table>
 <tr> <td> </td> <td> </td> > <td> </td> </tr>
 <tr> <td> </td> <td> </td> > <td> </td> </tr>
 <tr> <td> </td> <td> </td> > <td> </td> </tr>
 <thead><tr><th></th><th></th><th></th></tr> </thead>
 <tbody> </tbody>
 <tfoot> </tfoot>
 <th> </th> </table>
BASIC TABLE STRUCTURE 27

 <body>
 <table> <caption> Colours </caption>
 <tr> <td></td><td></td>
 </tr>
 <tr><td></td><td></td>
 </tr>
 </table>
 </body>
Table borders 28

 The word ‘border’ is an attribute


 a border attribute with a value of "1".
<table border=“1”>
 Attributes should be in lower case
 attribute values should always be enclosed in quotes
 The only valid border values in HTML5 are "1" and " ":
 "1" makes the border visible.
 "" hides the table border
29
Task 21 C 30
CONT’ 31

 <body>
 <table> <caption> Colours </caption>
 <tr> <td></td>
 <td></td>
 </tr>
 <tr> <td></td>
 <td></td>
 </tr>
 </table>
 </body>
Task 21c Browser Display 32
33
Task21d Browser Display 34
Table Heading & Footing 35

 <thead></thead>

 <tfoot></tfoot>

 <th></th>

 <tbody></tbody>
36
37
 <!DOCTYPE html>  </thead>
 <html>  <tfoot> <tr> 38
 <!-- Task 21d by Graham Brown -->  <td>Total</td>
 <head>  <td>$6560</td>
 <title>Task 21d</title>  </tr>
 </head>  </tfoot>
 <body>  <tbody>
 <table border="1">  <tr>
 <caption>Fruit sales</caption>  <td>Apple</td>
 <thead>  <td>$1230</td></tr>
 <tr>  <tr>
 <th>Fruit</th>  <td>Orange</td>
 <th>Price</th></tr>  <td>$780</td></tr>
39
<tr> </tbody>
<td>Pear</td> </table>
<td>$240</td></tr> </body>
<tr> </html>
<td>Banana</td>
<td>$4235</td> </tr>
<tr>
<td>Lemon</td>
<td>$75</td> </tr>
21d Browser Display 40
41
Activity 21.b. Create a new web page with a table that looks like this
and has the caption ‘Hours of sunshine last week’. Make sure the top
row of the table is in the header section and the bottom row is in the
footer section. Print your web page as HTML and as it is viewed in
your browser.
21.2.10 Use embedded CSS in HTML 42

 Styles can be applied to tables and other HTML


elements by placing CSS instructions in a style
attribute within the HTML tag.

 This is called embedded CSS.


21.2.11 Set table and cell sizes in terms of pixels 43

Resize a table
❑ This attribute is an embedded CSS style attribute.
❑ In the table tag add a second attribute named style with the embedded
CSS property value

Set Table width


21.2.11 Set table and cell sizes in terms of pixels 44

Set Row height & column width


45
21.2.12 Set table and cell sizes in terms of % values
Set Table width & cell size
46
Task 21e Browser Display 47
21.2.13 Apply styles to tables 48

Centre align a table in a window


Browser Diplay Output 49
Horizontally align cell contents 50
 “text-align:center“
 "text-align:right“
 "text-align:left“

Table border:
 Create a single table border
❑ border-collapse:collapse;
 Set table border widths
❑ border:solid 2px
51
52
53
Task 21g Browser Display 54
55
56
Vertically align table cell contents

 Data held in table cells can be vertically aligned with embedded CSS
so that it fits in the top, middle or bottom of the cell.

 vertical-align: top;

 vertical-align: middle;

 vertical-align: bottom;
21.2.14 Adjust cells to span more than one table column 57

 To create a single cell that spans across all three columns in the top row of
the table.

 need to add a colspan attribute to the table data <td> tag

 colspan =“2”
58
59
<tr style=“height:60px; text-align: center;”>
<td colspan=“3” style=“border:solid 3px”> Vertical </d></tr>
<tr style=“height:60px; text-align: center;”>
<td style=“vertical-align: top;”> Top </d> <td style=“vertical-
align: middle;”> Middle </d>
<td style=“vertical-align: middle;”> Bottom </d> </tr>
60
61
21.2.15 Adjust cells to span more than one table row

rowspan=“3”
Cell padding 62

 the space between the cell contents and the border of the cell

 It can be applied to both the table tag <table> and/or to each item of
table cell

 using table data <td> or table header <th>.


Cont’ 63
Cont’ 64
Line break 65

 <br>
 tag between each table to set a line break.
 The <br> tag does not have a close tag.
66
Border spacing 67

 The spacing between the borders (border spacing) of individual cells is set in the
<table> tag.
 The style attribute is used with the border-spacing property.
 Two values can be passed to this property: the horizontal spacing first, then the
vertical spacing
 If the horizontal and vertical border spacing are the same, you can use a single
value.
68
21.2.16 Insert an image 69

 Images (such as pictures or icons) are often used in web pages


and are often used for hyperlinks.
Cont’ 70

Where to store an image

Images must be stored in the same folder as the web page.


This is called the current folder

Apply alternate text-The image has been replaced by the text


defined by the alt text attribute to tell the user what the missing
image should be.
21.2.17 Adjust an image size 71

Images can be resized using two methods:

 to change the size of the displayed image in the markup.

 to physically resize the image in a graphics package.


72
73
74
Adjust an image size 75

Adjust an image size in the markup

 To change the size of an image in the markup use either


the width or height attributes within the image tag
Insert an animated image 76
21.2.18 Insert a video file 77
 <video width="400" height="224" controls>

 Your browser does not support this type of video.

 <source src="wreck.mp4" type="video/mp4">

 </video>

 Video controls and autoplay


21.2.19 Insert an audio file 78
21.2.21 Specify background properties 79

 Set the background colour-Hexadecimal colour codes can be used


with background and foreground colours
80
21.2.22 Apply styles to a list 81

Numbered lists

 Numbered lists are ordered lists in HTML because they


are in number order.

 Place the tag <ol> at the start of the numbered list


and the tag </ol> at the end
82
83
Bulleted lists
 Bulleted lists are called unordered lists in HTML.

 Place the tag <ul> at the start of the numbered


list and the tag </ul> at the end
84
Nested lists 85
Nested Lists
Primary Lists 86
Browser Display for Nested lists 87
88
89
Bookmarks
A bookmark is a named reference point in an
electronic document.
 It is often used to hyperlink to that point from
other locations
 Bookmarks can be useful if a web page is very
long
90

 The <hr> tag used to draws a horizontal


line across the page.
91
Hyperlinks

A hyperlink is a method of accessing another


document or resource from your current
application.

Hyperlinks do not just relate to web pages:


other application software can also use them
Cont’ 92

The colour of the hyperlink gives us information


about its use. All browsers, using their default
settings, display links like this:

 blue and underlined – a link that has not yet


been used
 purple – a link that has been previously used
 red – an active link.
Anchors
93

It is used to create a hyperlink to allow you to navigate


within the page or navigate to an external page.

An anchor starts with an <a> tag and closes with an


</a> tag.

the href attribute with tells the browser where to create a


hyperlink to,

the target attribute which tells the browser in which


window to open the linked document or page
21.2.24 Create a hyperlink 94
Hyperlinks within a web page

 The hyperlink is created using an anchor.

 The two anchor tags are placed each side of the


word‘top’.

 href is the name of the destination anchor.

 This anchor name is always inside speech marks and


preceded by the # symbol
95
 References to pages stored in the same folder as
your web page just have an

 address without the URL. To link to a local file


called ‘next_page.htm
21.2.25 The use of relative file paths 96

 When creating a hyperlink reference to another


file, particularly one stored locally, it is really
important to use a relative file path
Hyperlinks to other web pages 97
98
Open a web page in a new browser window 99

 When a web page is opened, it may open in the


current window or it may open in a new window.

 This is set using the target attribute. This attribute is part


of the anchor

 tells the browser which window to use for the web


page that you are going to open
Cont’ 100
 The target attribute can be used
 If a target name of _blank is applied, this will
open in a new browser window
 If a target name of _blank is applied, this will
open in a new browser window
101
Use a hyperlink to send an email message 102
Create a hyperlink from an image 103
21.2.28 The function of metatags 104

 Metatags are not displayed in the browser

 hold important information that the browser


requires,

 such as specifying the character set, page


description, keywords, author of the document,
and the viewport settings.
Cont’ 105

 Its functions tell browsers how to display the


page

 they tell search engines about keywords, which


helps them list the page in the results of relevant
searches
21.2.29 Use metatags 106

 <meta> </meta>

 Three attributes_ charset, name and content

 Charset__specifies the type of characters (called the

character encoding) that are displayed


 UTF-8, which is for Unicode

 ISO-8859-1, which is for the Latin alphabet


Cont’ 107

Name attribute

 it is used to specify the four other elements


required for this task, these are: author, description,
keywords and viewport
Cont’ 108
content attribute

 it is used with the name attribute and contains the


value assigned to the name.

 This value is in the form of text.


Web page description 109

Keywords for a search engine


Viewport settings 110

 the user’s visible area of the web page

 using a smaller display size to view a web page,


for example, on a mobile phone or tablet
21.2.30 Set a default target window 111

<base target=“_blank”>
112
21.3 Use stylesheets 113

 Using styles is much quicker and easier than applying


individual settings – such as font face, font size, text
alignment and font colours – to every piece of text in each
web page

 Styles are not only set for text, but can also be used to
define page layout, colour schemes and default settings for
other objects and links on the page.
Cont’ 114

 using the attribute style embedded in some


presentation layer elements at the HTML.

 These are called in-line styles.

 Styles may also be defined in the head section of a


web page or defined in an external stylesheet.
Cont’ 115
 The stylesheet is attached to the web page in the head
section of the markup

 styles can be applied individually to each page

 it is more efficient to write, edit and attach one or more


common stylesheet/s to all the pages in a website

 This collection of styles is saved in a different file in a


cascading stylesheet (.css) format
116

 This collection of styles is saved in a


different file in a cascading stylesheet
(.css) format
21.3.1 The characteristics of a cascading stylesheet
117
 A cascading stylesheet is a simple way of adding style (for
example, fonts, colours, spacing) to web pages
 One or more of these cascading stylesheets can be
attached to a web page, and the styles in the stylesheet will
be applied to that page.
 Where more than one web page is used, the styles only
have to be defined once and then attached to all the web
pages
 In-line styles, defined within the HTML, usually override styles
attached from an external stylesheet
 This 118
allows companies to develop different stylesheets
for specific items such as colour schemes, text styles
and styles for a particular document or set of
documents

 If more than one stylesheet is attached to a web page


at the same time, those attached later in the markup
have priority over earlier ones.

 If a style has more than one declaration of the same


property, the last value is used for the property.
21.3.2 CSS syntax 119
 CSS rules have a selector and a declaration block

 Each element has one or more declarations, each


separated by a semicolon.
 Each declaration has a property name and a value,
separated by a colon.
 Each declaration block is surrounded by curly brackets
120
121

 The element name/s, in this case td and th, are followed


by curly brackets {}.

 Can define the two elements td, table data and th, table
head at the same time,

 Save styles in cascading stylesheet format, the filename


filename.css in the same folder as your web page.
task21y htm to task21.css 122
21.3.4 Attach an external stylesheet 123

to a web page

 <link rel="stylesheet" type="text/css" href="tablestyle.css">

 In the HTML window, add this line of text above the title
tags in the head section
21.3.5 Use relative file paths for 124

attached stylesheets
 The link (with the relative file path) is attached to the
web page so when the page is opened or refreshed,

 the browser searches for the file tablestyle.css and


applies the styles from this file to the web page.

 The filename in this line of markup must match the


name of the CSS file that it was saved.
Cont’ 125
126
127
21.3.6 Add comments to a 128

stylesheet
 /* and */ are required for each comment
 /* comment for one line
129
21.3.7 CSS text 130
 Stylesheets do not have tags ithem as they are not a markup
language.

 Each style has a style name, which is called a selector

 selector is followed by curly brackets {}

 the property for the style, followed by a colon, then the property’s
value
21.3.8 Specify font properties 131
Font families

 Individual fonts can be specified, but these are not always


available in all browsers, so there are a number of generic font
families, including serif and sans-serif fonts

 The generic font family must always be listed after the other
preferred font/s. The font-family property must contain a hyphen

 A serif font is one that has small lines or strokes (called serifs) at the
ends of characters

 A font that does not contain serifs is known as a sans-serif font.


132
133
Group style definitions 134
135
Font size 136

 Absolutevalues can be used to set the


number of points, picas, or pixels high, for
each character
137
Align text 138
139
Enhance text within a stylesheet 140
141
142
Text colour 143
144
21.3.9 Specify background 145

properties
 Background colour
146
Background images 147

 applied to the body section of a web page


using the background-image property with a
value containing the Uniform Resource Locator
followed by the image’s address or filename
148
Division tags 149

 The <div> tag is short for a division or section of


an HTML document or page.

 It is also used as a container for HTML elements


that can be styled with CSS
150
body {background-color: #da9f25;
background-image: url("j2232logo.png");
background-repeat: no-repeat;
background-position: top right;
background-attachment: fixed;
background-size: 200px 150px;}
151
/* Name, Center Number and Candidate Number*/

h1,h2,h3 {font-family: "Casion Pro Bold", "Times New Roman",serif;}

h1 {color: #FF0000; text-align: center;

font-size: 30 point;}

h2 {color: #000000; text-align: justify;

font-size: 18 point;}

h3 {color: #000000; text-align: left: font-size: 14 point;}


152

table {margin-right: 25%; margin-left: 5%;

margin-top: 5%; margin-bottom: 5%;}

td {padding: 10px;}

table,td {border: solid 0px;}

You might also like