Scribd
Upload
27 views129 pages

Ict CH 21 HTML

The document provides an overview of website authoring, detailing the three layers of web development: content, presentation, and behavior. It explains the use of HTML for content creation, CSS for styling, and JavaScript for behavior, along with practical examples for creating web pages, tables, and inserting multimedia elements. Additionally, it covers essential HTML tags and attributes, as well as techniques for structuring and styling web content effectively.

Uploaded by

ei myat
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
27 views129 pages

Ict CH 21 HTML

The document provides an overview of website authoring, detailing the three layers of web development: content, presentation, and behavior. It explains the use of HTML for content creation, CSS for styling, and JavaScript for behavior, along with practical examples for creating web pages, tables, and inserting multimedia elements. Additionally, it covers essential HTML tags and attributes, as well as techniques for structuring and styling web content effectively.

Uploaded by

ei myat
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/ 129

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
3 21.1 Web development layers
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.
4
THE CONTENT LAYER
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
5 HTML

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)
6
THE PRESENTATION LAYER

where the visual impact of the web page is


created

contains the styles to be used, such as colour


themes, fonts

CSS-cascading stylesheet
7
CSS-CASCADING STYLESHEET
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
Can develop at our own stylesheets using a simple
text editor
8
THE BEHAVIOUR LAYER
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
9
CREATE A WEB PAGE
Use the content layer to create a web page Structure
(HTML)
<html> </html>
<!DOCTYPE html>
<head> </head>
<body></body>
10 <html> in Content layer
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


11 CONT
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
12 THE HEAD SECTION
starts with <head> and closes with </head>
Objects between these tags are not usually
displayed by the web browser

should always contain a title


It is the name displayed in the browser toolbar
Page title
13 THE BODY SECTION
starts with <body>
 closes with </body>
objects between these tags are usually
displayed in the web page.

Main Contents
14
CONT’
Add comments Start <!– and end -->
<!DOCTYPE html>
<html>
<head> <title> Webpage Name </title>
</head>
<body>
</body> <!– This is Comments….. -->
</html>
15
CONT’
<p> </p> -- Paragraph
<h1> to <h6> -- 6 Heading styles Largest to
smallest
16
CONT’

Task 21a

Create and save a new web page showing paragraph and


heading styles.
17
CONT’
<!DOCTYPE html>
<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>
18
Browser Output Display
CONT’
19

<sup> and </sup>


<sub> and </sub>
<body>
<p> This is superscripted3<sup>2</sup></p>
<p> This is subscripted H<sub>2</sub>O</p>
20
<!DOCTYPE html>
21 <html>
<head> <title>Task 21a</title>
</head>
<body>
<h1>Legacy International School By NMH </h1>
<p>Text can be superscripted like x<sup>3</sup></p>
<p>Text can be subscripted like H<sub>2</sub>O</p>
</body>
</html>
22 Browser Display Output
23
<!DOCTYPE html>
24 <html>
<head> <title>Task 21a</title>
</head>
<body>
<h1>Legacy International School</h1>
<p> This is style p, the paragraph style</p>
<p>Welcome from Legacy International School</p>
<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>
25
Browser Output Display
26
21.2.8 INSERT A TABLE
Html tags for table
<table></table>
<tr></tr>
<td></td>
<thead></thead>
<tbody></tbody>
<th></th>
27
BASIC TABLE STRUCTURE
<body>
<table> <caption> Colours </caption>
<tr> <td></td><td></td>
</tr>
<tr><td></td><td></td>
</tr>
</table>
</body>
28 Table borders
 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
30 Task 21 C
31
CONT’
<body>
<table> <caption> Colours </caption>
<tr> <td></td>
<td></td>
</tr>
<tr> <td></td>
<td></td>
</tr>
</table>
</body>
32 Task 21c Browser Display
33
34 Task21d Browser Display
35 Table Heading & Footing

<thead></thead>
<tfoot></tfoot>
<th></th>
<tbody></tbody>
36
37
 <!DOCTYPE html>  </thead>
38  <html>  <tfoot> <tr>
 <!-- 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>
 <tr>
39  <td>Pear</td>
 <td>$240</td></tr>
 <tr>
 <td>Banana</td>
 <td>$4235</td> </tr>
 <tr>
 <td>Lemon</td>
 <td>$75</td> </tr>
 </tbody>
 </table>
 </body>
 </html>
40 21d Browser Display
Activity 21.b. Create a new web page with a table that looks
41
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.
42 21.2.10 Use embedded CSS in HTML

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.


43
21.2.11 Set table and cell sizes in terms of pixels
Resize a table

Set Row height & column width


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

Centre align a table in a window


48 Browser Diplay Output
49
Horizontally align cell contents
“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
50
51
52
53 Task 21g Browser Display
54
55

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;
56 21.2.14 Adjust cells to span more than one table column

To create a single cell that spans across all three


columns in the top row of the table you need to
add a colspan attribute to the table data <td> tag
colspan=“2”
57
<tr style=“height:60px; text-align: center;”>
58
<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>
59 21.2.15 Adjust cells to span more
than one table row
rowspan=“3”
60 Cell padding
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>.
61 Cont’
62 Cont’
63 Line break

<br>
tag between each table to set a line break.
The <br> tag does not have a close tag.
Border spacing
64
 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.
65
66 21.2.16 Insert an image

Images (such as pictures or icons) are often used in


web pages and are often used for hyperlinks.
67 Cont’

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.
68 21.2.17 Adjust an image size
69
70
71
72
73
74
75
76 Insert an animated image
77 21.2.18 Insert a video file
<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
78 21.2.19 Insert an audio file
79 21.2.21 Specify background properties

Set the background colour-Hexadecimal colour codes can be


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

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
85 Nested lists
Nested Lists
Primary Lists
86
87 Browser Display for Nested lists
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
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
91 Cont’
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.
92 Division tags

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
93 Anchors

An anchor 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
94
21.3 Use stylesheets
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 that you create.
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.
95
Cont’
While styles can be set with HTML tags, normally they
are defined in the presentation layer of the web page in
CSS format
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.
96
Cont’
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
97

This collection of styles is saved in a


different file in a cascading stylesheet
(.css) format
98 21.3.1 The characteristics of a
cascading stylesheet
 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
99 This 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.
100
21.3.2 CSS syntax
 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
101
102

 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.
103 task21y.htm-task21.css
104 21.3.4 Attach an external stylesheet 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
105 21.3.5 Use relative file paths for
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.
106 Cont’
107
108
109 21.3.6 Add comments to a stylesheet

/* and */ are required for each comment


/* comment for one line
110
21.3.7 CSS text
111
 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
112
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.


113
114
115 Group style definitions
116
117 Font size
Absolute values can be used to set the
number of points, picas, or pixels high, for
each character
118
119 Align text
120
121 Enhance text within a stylesheet
122
123
124 Text colour
125
126 21.3.9 Specify background properties

Background colour
127
128
Background images
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
129

You might also like