Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
8 views

Introduction to HTML

Uploaded by

Peter -Thunder
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

Introduction to HTML

Uploaded by

Peter -Thunder
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 9

Introduction to HTML

HTML, or HyperText Markup Language, is the standard language used to create and design web pages. It
forms the structure of a webpage, defining elements such as text, images, links, and more.
Understanding HTML is crucial for creating and editing web content, especially in the context of IGCSE
Edexcel O Level ICT practical exams.

What is an HTML Editor?

An HTML editor is a tool used to write and edit HTML code. These editors provide a convenient interface
for writing code and often include features like syntax highlighting, code suggestions, and error checking.
Popular HTML editors include Notepad++ (free and lightweight), Sublime Text, Visual Studio Code, and
online editors like CodePen.

Basics of HTML

HTML uses tags to structure and format content. Tags are enclosed in angle brackets, like `<tagname>`.
Most HTML elements have an opening tag `<tagname>` and a closing tag `</tagname>`, with content in
between.

Structure of an HTML Document

A typical HTML document has the following basic structure:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<!-- Content goes here -->
</body>
</html>
- `<!DOCTYPE html>`: Declares the document type as HTML5.

- `<html>`: The root element of an HTML page.

- `<head>`: Contains meta-information about the document, such as its title and links to stylesheets.

- `<title>`: Specifies the title of the webpage (appears in the browser tab).

- `<body>`: Contains the main content of the webpage.

HTML Elements and Attributes

- Elements: The building blocks of HTML, defined by tags.

For example, `<p>` defines a paragraph, `<h1>` defines a heading, and `<a>` defines a link.

- Attributes: Provide additional information about elements. They are added inside the opening tag.

For example, In `<a href="https://example.com" >` href is an attribute and sets the link's
destination.

Common HTML Elements

1. Headings: Defined with `<h1>` to `<h6>` tags, where `<h1>` is the largest heading and `<h6>` is the
smallest.

```

<h1>Main Heading</h1>

<h2>Sub Heading</h2>

```

2. Paragraphs: Defined with the `<p>` tag to represent blocks of text.

```

<p>This is a paragraph.</p>

```

3. Links: Defined using the `<a>` tag with the `href` attribute to specify the URL.
```

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

```

4. Images: Defined using the `<img>` tag with the `src` attribute to specify the image source and the `alt`
attribute for alternative text.

```

<img src="image.jpg" alt="Description of image">

```

5. Videos: Defined using the `<video>` tag with `src`, `controls`, and other attributes.

```

<video src="video.mp4" controls></video>

```

CSS: Styling HTML

CSS (Cascading Style Sheets) is used to style HTML elements. There are three types of CSS:

1. Inline CSS: Styles are applied directly within an HTML element using the `style` attribute.

```

<p style="color: blue; font-size: 14px;">Styled paragraph.</p>

```

2. Internal CSS: Styles are defined within the `<style>` tag inside the `<head>` section of the HTML
document.

```

<style>

p{
color: blue;

font-size: 14px;

</style>

```

3. External CSS: Styles are defined in a separate file (e.g., `styles.css`) and linked to the HTML document
using the `<link>` tag.

```

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

```

Working with Tables

Tables are defined using the `<table>` tag. Each table row is defined with `<tr>`, table headers with
`<th>`, and table cells with `<td>`.

```

<table border="1">

<tr>

<th>Heading 1</th>

<th>Heading 2</th>

</tr>

<tr>

<td>Cell 1</td>

<td>Cell 2</td>

</tr>

</table>

```
Links and Anchors

- Use the `<a>` tag to create hyperlinks. The `href` attribute specifies the URL.

```

<a href="https://example.com">Click Here</a>

```

- Use the `target` attribute to open links in a new tab.

```

<a href="https://example.com" target="_blank">Open in new tab</a>

```

Text Formatting and Modifying Table, Image, and Video


Attributes

HTML provides various ways to format text and modify the attributes of tables, images, and videos.
These modifications help enhance the appearance and functionality of web content.

Text Formatting

HTML offers several tags to format text, making it bold, italic, underlined, or changing its size and
color:

- Bold: Use the `<b>` or `<strong>` tag to make text bold.

```

<b>Bold Text</b>

```

- Italic: Use the `<i>` or `<em>` tag to italicize text.

```

<i>Italic Text</i>
```

- Underline: Use the `<u>` tag to underline text.

```

<u>Underlined Text</u>

```

- Font Size and Color: Use the `style` attribute to change the size and color of the text.

```

<p style="font-size: 16px; color: red;">Styled Text</p>

```

- Font Family: Change the typeface of text using the `font-family` property.

```

<p style="font-family: Arial, sans-serif;">Text with a specific font</p>

```

- Text Alignment: Align text to the left, right, center, or justify it using the `text-align` property.

```

<p style="text-align: center;">Centered Text</p>

```

Modifying Table, Image, and Video Attributes

 Width and Height: Adjust the dimensions of tables, images, and videos using the `width`
and `height` attributes.

- Image Example:

```
<img src="image.jpg" width="200" height="150" alt="Description">

```

- Table Example:

```

<table width="80%" height="200">

<!-- Table content -->

</table>

```

- Video Example:

```

<video src="video.mp4" width="320" height="240" controls></video>

```

 Background Color: Change the background color of text, tables, or cells using the `style`
attribute with the `background-color` property.

- Table Example:

```

<table style="background-color: lightgrey;">

<tr>

<td style="background-color: yellow;">Cell 1</td>

<td>Cell 2</td>

</tr>

</table>

```
 Borders: Add or modify borders around tables, cells, images, or videos using the `border`
attribute or `style` property.

- Table Example:

```

<table border="1" style="border-collapse: collapse;">

<tr>

<td style="border: 1px solid black;">Cell 1</td>

<td>Cell 2</td>

</tr>

</table>

```

- Image Example:

```

<img src="image.jpg" style="border: 2px solid black;" alt="Image with border">

```

 Padding and Margin: Add space around elements using `padding` (inside an element)
and `margin` (outside an element).

- Table Cell Padding Example:

```

<td style="padding: 10px;">Padded Cell</td>

```

- Image Margin Example:

```

<img src="image.jpg" style="margin: 20px;" alt="Image with margin">

```

 Text Decoration: Remove or add text decorations such as underlines with the `text-
decoration` property.

- Remove Underline from Link:

```
<a href="https://example.com" style="text-decoration: none;">Link without
underline</a>

```

 Opacity: Adjust the transparency of images and videos using the `opacity` property.

- Image Opacity Example:

```

<img src="image.jpg" style="opacity: 0.5;" alt="Transparent Image">

```

 Hover Effects: Change the appearance of elements when the mouse hovers over them
using the `:hover` CSS pseudo-class.

- Image Hover Example:

```

<style>

img:hover {

opacity: 0.7;

border: 2px solid blue;

</style>

<img src="image.jpg" alt="Hover over me">

```

 Responsive Design: Use percentages or viewport units (`vw`, `vh`) for width and height
to make elements responsive, adapting to different screen sizes.

- Responsive Image Example:

```

<img src="image.jpg" style="width: 100%; height: auto;" alt="Responsive Image">

```

You might also like