Introduction to Web Authoring
Objectives:
• By the end of this term, students should be able to understand the basics of web authoring,
including HTML, CSS, and JavaScript.
• They will learn how these three technologies work together to create a simple web page.
Introduction to Web Authoring
Web authoring is the process of creating web pages using various languages and tools, primarily
HTML, CSS, and JavaScript.
• Web authoring is composed of three layers: content, presentation and behaviour.
• Content layer is created using HTML and contains all the data to be displayed on a web page
• Presentation is created using CSS and is used to determine the appearance of html objects
such as setting backgrounds, borders, font sizes, text and many other features
• Behaviour layer is created using JavaScript and is used to add interactivity to the web page.
It enables the page contents to change by manipulating the presentation or by replacing
content after a mouse click or keyboard activity.
Overview of HTML, CSS, and JavaScript:
o HTML (HyperText Markup Language): The structure and content of a web page.
o CSS (Cascading Style Sheets): The presentation and styling of a web page.
o JavaScript: The behavior and interactivity of a web page.
1. Introduction to HTML
HTML Structure:
• HTML document contains the head and body wrapped around the html tags.
• Tags are used to instruct the browser on how to interpret the content wrapped within the
tags.
Example Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is my first paragraph.</p>
</body>
</html>
Explanation:
o <!DOCTYPE html>: Declares the document type as HTML5.
o <html>: The root element of the HTML page.
o <head>: Contains meta-information about the document.
o <title>: The title of the webpage displayed in the browser tab.
o <body>: The main content of the webpage.
o <h1>: Header tag used for main headings.
o <p>: Paragraph tag used for text.
2. Introduction to CSS (15 minutes)
CSS Structure:
• CSS is used to style HTML elements.
• There are different ways of linking HTML and CSS: internal, external, and inline CSS.
Example Code:
body {
background-color: #f0f0f0;
font-family: Arial, sans-serif;
margin: 20px;
}
h1 {
color: #333;
}
p {
color: #555;
}
Explanation:
o body { ... }: Styles applied to the entire page.
o h1 { ... }: Styles applied to the <h1> header.
o p { ... }: Styles applied to the <p> paragraphs.
Embedding CSS into HTML:
• The <style></style> wraps around the css code in the head (the opening tags comes before
any style and the closing tag comes after)
• For external CSS, the styles are saved in a file with the extension .css e.g. styles.css
• In the head section, add the code below:
<link rel=”stylesheet” href=”styles.css”>
3. Introduction to JavaScript
JavaScript Structure:
o JavaScript is useful for adding interactivity to web pages.
o JavaScript is embedded within an HTML document in various ways.
Example Code:
<script>
function showAlert() {
alert("Hello, welcome to my web page!");
}
</script>
Explanation:
a. function showAlert() { ... }: Defines a JavaScript function named showAlert.
b. alert("..."): Displays a pop-up alert box with a message
Embedding JavaScript into HTML:
• JavaScript can be included in the <head> or <body> sections using the <script> tag.
• e.g. 1. When the document is saved separately as .js script
<script type=”javascript” src=”script.js”></script>
• e.g. 2. Where the javascript code is created within the html page
<script type=”javascript”>
//javascript code goes here
</script>
Interactivity Example:
<button onclick="showAlert()">Click Me!</button>
Explanation:
onclick="showAlert()": Adds an event listener to the button, triggering the showAlert function when
clicked.
Practical Exercise
Task:
Create a simple web page using the example HTML, CSS, and JavaScript code provided.
Students should modify the content, styles, and JavaScript to make the page their own.
Instructions:
o Create an HTML file (index.html).
o Add inline CSS in the <head> or an external CSS file.
o Add a JavaScript function in the <head> or just before the closing <body> tag.
o Test the page by opening it in a web browser.
