Scribd
Upload
401 views4 pages

Chapter 21 Website Authoring PDF

The document discusses website authoring and covers: 1) The three layers of web development - content (HTML), presentation (CSS), and behavior (JavaScript). 2) Creating a basic web page structure using HTML including the head, body, links, and comments. 3) Common HTML elements like tables, images, video, and audio and how to insert them into pages. 4) Using CSS for the presentation layer to style text, images, tables and control layout with properties like background, padding, and borders. CSS can be internal or linked via an external stylesheet.

Uploaded by

nii zelia
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
401 views4 pages

Chapter 21 Website Authoring PDF

The document discusses website authoring and covers: 1) The three layers of web development - content (HTML), presentation (CSS), and behavior (JavaScript). 2) Creating a basic web page structure using HTML including the head, body, links, and comments. 3) Common HTML elements like tables, images, video, and audio and how to insert them into pages. 4) Using CSS for the presentation layer to style text, images, tables and control layout with properties like background, padding, and borders. CSS can be internal or linked via an external stylesheet.

Uploaded by

nii zelia
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/ 4

Chapter 21 Website authoring

21.1 The three web development layers


Content layer
HTML : is HyperText MarkupLanguage. It is a text-based language used to develop
websites.
Presentation layer
CSS : is Cascading Style Sheet.a different text-based language used to develop
websites.
Behaviour layer
Javascript: user enter code to control elements in the web page and how users
interact with them
21.2 Creating a web page
Using HTML
<!DOCTYPE html>
<head>
<body>
The head section of a web page
Title and metadata
<head>
<title>a sample page</title>
<meta charset="UTF-8">
<meta name="keywords" content="ICT">
<meta name="description" content="IGCSE">
<meta name="author" content="XXX">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
The body section of a web page
Hyperlinks,bookmarks(a type of hyperlink) and anchors
Links
Link to items on the same page
<div id="bookmark"></div>
<a href="#bookmark">XXXX</a>
Link to a locally stored web page
<a href="xx.html">XXXXX</a>
Link to a website using its URL
<a href="http://www.google.com"></a>
Open in the same or a new windows
In the same window
<a href="" target="_self">
In a new window
<a href="" target="_blank"></a>
In a specified window
<a href="" target="_XXX"></a>
Comments
<!--This is a comment-->
Table
width and border
<table width="50%" border="1"></table>
Row heights
<tr height="50px"></tr>
Alignment
<td align="center"></td>
Table header
<caption>XXX</caption>
Spanning of columns and rows
<td colspan="x"></td>
<td rowspan="x"></td>
Inserting images,videos and sound into a web page
Image
<img src="x.jpg" alt="xxx">
Video
<video width="00px" controls><source src="x.mp4" type="video/mp4">
</video>
<video width="00px" controls><source src="x.webm" type="video/webm">
</video>
<video width="00px" controls><source src="x.ogg" type="video/ogg">
</video>
<video width="00px" autoplay><source src="x.mp4"></video>
Audio
<audio controls><source src="x.mp3" type="audio/mpeg"></audio>
<audio controls><source src="x.wav" type="audio/wav"></audio>
<audio controls><source src="x.ogg" type="audio/ogg"></audio>
21.3 Use CSS in the presentation layer
Development of HTML and CSS
Internal CSS
<style></style>
Using ids
#para1 {font-family: Arial; color:#ff0000;}
<p id="para1"></p>
Using classes
.myclass1 {font-size:18pt;color:#0000ff;}
<p class=".myclass"></p>
Attaching comments to CSS
/*xxxxxxxxx*/
Images
background images
body {background-image: url("xx.jpg")}
Tiled background images
body {background-image: url("xx.jpg"); background-repeat: no-repeat}
Position a background image
body {background-image: url("xx.jpg"); background-repeat: no-repeat;
background-position: right top; margin-right: 00px}
CSS and tables
background colour
table,th,td {border: 1px solid #0000; background-color:#ffff00; background-
collapse: collapse;}
horizontal alignment and vertical alignment
.c {text-align:center;vertical-align:top;}
.r{text-align:right;vertical-align:bottom;}
<td class="c">XXX</td>
<td class="r">XXX</td>
spacing
table,th,td {border-spacing:15px;}
padding
table,th,td {padding:5px;}
borders(collapsed,border thickness and visible/invisible)
External stylesheet
<head>
<link rel="stylesheet" type="text/css" href="x.css">
</head>

以上内容整理于 幕布文档

You might also like