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
