Scribd
Upload
15 views10 pages

SS1 HTML CSS Robotics Handout (1) 110301

This document is an ICT handout for SS1 students covering HTML, CSS, and an introduction to robotics. It includes topics such as the structure of HTML documents, text formatting, inserting media, CSS application methods, and the basics of robotics, including types and applications. Activities are provided throughout to reinforce learning and practical application of the concepts discussed.

Uploaded by

netbiosb
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
15 views10 pages

SS1 HTML CSS Robotics Handout (1) 110301

This document is an ICT handout for SS1 students covering HTML, CSS, and an introduction to robotics. It includes topics such as the structure of HTML documents, text formatting, inserting media, CSS application methods, and the basics of robotics, including types and applications. Activities are provided throughout to reinforce learning and practical application of the concepts discussed.

Uploaded by

netbiosb
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/ 10

SS1 Third Term ICT Handout: HTML, CSS, and Introduction to Robotics

1: Introduction to HTML

Meaning of HTML

HTML (HyperText Markup Language) is the standard language used to create and
structure content on the web. It allows us to display text, images, videos, and links using
tags and elements.

History of HTML

- Developed by Tim Berners-Lee in 1991

- Initially used for sharing research documents

- Evolved into HTML5 with support for modern web technologies

Basic Structure of an HTML Document

<!DOCTYPE html>

<html>

<head>

<title>My First Webpage</title>

</head>

<body>

<h1>Hello, world!</h1>

<p>This is my first paragraph in HTML.</p>

</body>

</html>
Week 2: HTML Tags and Elements

Text Formatting Tags

- <b>: Bold text

- <i>: Italicize text

- <u>: Underline text

- <br>: Line break

- <hr>: Horizontal rule

List Tags

- <ol>: Ordered list

- <ul>: Unordered list

- <li>: List item

Examples:

<b>Bold Text</b><br>

<i>Italic Text</i><br>

<u>Underlined Text</u>

Activity:

- Create a grocery list using both ordered and unordered lists.

- Format a short biography using bold, italic, and underline tags.


Week 3: Inserting Media and Links in HTML

Inserting Images

<img src="apple.jpg" alt="An apple" width="200">

- src: Source of the image

- alt: Alternative text

- width, height: Set dimensions

Adding Hyperlinks

<a href="https://example.com">Visit Example</a>

Embedding Videos (Intro)

<video width="320" height="240" controls>

<source src="movie.mp4" type="video/mp4">

Your browser does not support the video tag.

</video>

Activity:

- Add an image of your favorite fruit

- Create a link to your school’s website


Week 4: Introduction to CSS

Meaning and Uses of CSS

CSS (Cascading Style Sheets) describes how HTML elements are displayed on the
screen. It controls colors, fonts, layouts, and more.

Ways of Applying CSS

1. Inline CSS

<p style="color:red;">Red Text</p>

2. Internal CSS (within <style> tag)

<style>

h1 { color: blue; }

</style>

3. External CSS (linked file)

<link rel="stylesheet" href="styles.css">

Syntax Example:

css

p{

font-size: 16px;

color: green;

Activity:

- Style a paragraph with different colors and font sizes using all three CSS methods.
Week 5: CSS Properties and Layout

Box Model

The CSS box model includes:

- Content

- Padding (space around content)

- Border (line around padding)

- Margin (space outside border)

Example:

css

div {

margin: 10px;

padding: 20px;

border: 2px solid black;

background-color: lightblue;

Styling Text and Backgrounds

- Font size, family

- Background color and images

- Alignment and spacing

Project:

- Design a personal profile webpage with styled text, colors, and backgrounds.
Week 6: Tables and Forms in HTML

Creating Tables

html

<table border="1">

<tr>

<th>Name</th><th>Score</th>

</tr>

<tr>

<td>Alice</td><td>90</td>

</tr>

</table>

Creating Forms

html

<form>

Name: <input type="text" name="name"><br>

Gender: <select>

<option>Male</option>

<option>Female</option>

</select><br>

Message:<br>

<textarea rows="4" cols="30"></textarea><br>

<input type="submit">

</form>
Activity:

- Create a feedback form with name, email, and message sections.


Week 7: Introduction to Robotics

Meaning of Robotics

Robotics involves the design, construction, and operation of robots that can perform tasks
either automatically or semi-automatically.

History of Robotics

- Coined by Isaac Asimov (1940s)

- First robots used in industrial manufacturing

Importance of Robotics

- Automate tasks

- Work in dangerous environments

- Improve precision and efficiency

Components of a Robot

1. Sensors: Detect inputs (e.g., light, motion)

2. Actuators: Motors or parts that move

3. Controller: Brain of the robot

Activity:

- Label the components of a robot diagram


Week 8: Types and Applications of Robots

Types of Robots

1. Industrial Robots – Used in factories

2. Service Robots – Help people (cleaning, delivery)

3. Medical Robots – Surgery and healthcare support

4. Domestic Robots – Vacuuming, lawn mowing

Applications

- Manufacturing

- Healthcare

- Agriculture

- Military

Activity:

- Match robot types to their uses

- Watch a video demonstration of service robots


Week 9 & 10: Complete Static Website

You might also like