Scribd
Upload
0 views

HTML

The document provides a comprehensive guide on essential HTML concepts and their implementation, including basic structure, headings, paragraphs, lists, links, images, tables, forms, multimedia, iframes, and buttons. It also includes CSS styling examples to enhance the design of web pages. This guide is tailored for IGCSE ICT 0417, offering practical examples for each HTML element.

Uploaded by

selassienatasha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
0 views

HTML

The document provides a comprehensive guide on essential HTML concepts and their implementation, including basic structure, headings, paragraphs, lists, links, images, tables, forms, multimedia, iframes, and buttons. It also includes CSS styling examples to enhance the design of web pages. This guide is tailored for IGCSE ICT 0417, offering practical examples for each HTML element.

Uploaded by

selassienatasha
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 10

1.

Basic HTML Structure


Every HTML page follows a basic structure:
html
CopyEdit
<!DOCTYPE html>
<html>
<head>
<title>My Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple webpage. </p>
</body>
</html>

2. Headings
Headings are used to define titles and subtitles.
html
CopyEdit
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>

3. Paragraphs and Line Breaks


Used for writing text and creating spaces.
html
CopyEdit
<p>This is a paragraph.</p>
<p>This is another paragraph with a <br> line break.</p>

4. Formatting Text
Used to style text.
html
CopyEdit
<b>Bold text</b>
<i>Italic text</i>
<u>Underlined text</u>
<small>Smaller text</small>
<mark>Highlighted text</mark>

5. Lists
Ordered List (Numbered)
html
CopyEdit
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>
Unordered List (Bullet points)
html
CopyEdit
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>

6. Links (Hyperlinks)
Used to navigate between web pages.
html
CopyEdit
<a href="https://www.google.com">Visit Google</a>

7. Images
Used to display pictures.
html
CopyEdit
<img src="image.jpg" alt="Description of image">

8. Tables
Used to display data in a structured format.
html
CopyEdit
<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>

9. Forms
Used to collect user input.
html
CopyEdit
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

10. Multimedia (Audio & Video)


Audio
html
CopyEdit
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>
Video
html
CopyEdit
<video controls width="300">
<source src="video.mp4" type="video/mp4">
</video>

11. IFrame (Embedding Other Websites)


html
CopyEdit
<iframe src="https://www.bbc.com" width="600" height="400"></iframe>

12. Buttons
Used to trigger actions.
html
CopyEdit
<button onclick="alert('Button Clicked!')">Click Me</button>

This list covers all essential HTML concepts for IGCSE ICT 0417. Let me know if you need
more explanations! 🚀
4o
You said:
html code list with functions and examples of how to implement them IGCSE ICT 0417
WITH design codes WITH CSS codes and links etc
ChatGPT said:
Here's a comprehensive guide covering HTML elements with functions, CSS styling, and
examples, tailored for IGCSE ICT 0417.

📌 Basic HTML Structure


Every webpage starts with this basic structure:
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Web Page</title>
<link rel="stylesheet" href="style.css"> <!-- Link to external CSS -->
</head>
<body>

<h1>Welcome to My Website</h1>
<p>This is a simple webpage with design.</p>

</body>
</html>

📌 CSS Styling
Save this as style.css to apply design to the page.
css
CopyEdit
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
}

h1 {
color: blue;
}

p{
font-size: 18px;
color: #333;
}

📌 Headings & Paragraphs


Function: Display different text sizes and formatting.
html
CopyEdit
<h1>Main Heading</h1>
<h2>Subheading</h2>
<p>This is a paragraph.</p>
CSS:
css
CopyEdit
h1 {
font-size: 30px;
color: darkblue;
}

p{
color: gray;
line-height: 1.5;
}

📌 Lists
Function: Create numbered or bullet-point lists.
html
CopyEdit
<h3>Ordered List</h3>
<ol>
<li>First Item</li>
<li>Second Item</li>
</ol>

<h3>Unordered List</h3>
<ul>
<li>Apples</li>
<li>Oranges</li>
</ul>
CSS:
css
CopyEdit
ol {
color: darkgreen;
}

ul {
color: brown;
}

📌 Hyperlinks
Function: Navigate to another page or website.
html
CopyEdit
<a href="https://www.google.com" target="_blank">Visit Google</a>
CSS:
css
CopyEdit
a{
text-decoration: none;
color: blue;
}

a:hover {
color: red;
}

📌 Images
Function: Display pictures on a webpage.
html
CopyEdit
<img src="image.jpg" alt="Description of Image" width="300">
CSS:
css
CopyEdit
img {
border: 2px solid black;
border-radius: 10px;
}

📌 Tables
Function: Structure data in rows and columns.
html
CopyEdit
<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>
CSS:
css
CopyEdit
table {
width: 50%;
border-collapse: collapse;
margin: 20px auto;
}

th, td {
border: 1px solid black;
padding: 10px;
}

📌 Forms
Function: Collect user input.
html
CopyEdit
<form action="submit.php" method="post">
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>
CSS:
css
CopyEdit
input {
padding: 5px;
border: 1px solid #333;
}

📌 Multimedia (Audio & Video)


Function: Play audio and video files.
html
CopyEdit
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>

<video controls width="300">


<source src="video.mp4" type="video/mp4">
</video>
CSS:
css
CopyEdit
audio, video {
display: block;
margin: 20px auto;
}

📌 IFrame (Embedding a Website)


html
CopyEdit
<iframe src="https://www.bbc.com" width="600" height="400"></iframe>
CSS:
css
CopyEdit
iframe {
border: 2px solid black;
}

📌 Buttons
Function: Trigger actions on click.
html
CopyEdit
<button onclick="alert('Hello!')">Click Me</button>
CSS:
css
CopyEdit
button {
background-color: blue;
color: white;
padding: 10px 15px;
border: none;
cursor: pointer;
}

button:hover {
background-color: red;
}

📌 Complete Example:
Save as index.html
html
CopyEdit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>IGCSE ICT Website</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>My Stylish Web Page</h1>
<p>Welcome to my website!</p>

<a href="https://www.google.com" target="_blank">Visit Google</a>

<img src="image.jpg" alt="Sample Image" width="200">

<table>
<tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
</tr>
</table>

<form action="submit.php" method="post">


<label for="name">Name:</label>
<input type="text" id="name" name="name">
<input type="submit" value="Submit">
</form>

<button onclick="alert('Hello!')">Click Me</button>

</body>
</html>
Save as style.css
css
CopyEdit
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
text-align: center;
}

h1 {
color: darkblue;
}

p{
font-size: 18px;
color: #333;
}

a{
text-decoration: none;
color: blue;}

a:hover {color: red;}


img { border: 2px solid black;
border-radius: 10px;}

table {width: 50%; border-collapse: collapse;


margin: 20px auto;}

th, td {border: 1px solid black;


padding: 10px;}

button {background-color: blue;


color: white;
padding: 10px 15px;
border: none;
cursor: pointer;}

button: hover {background-color: red;}

You might also like