Scribd
Upload
8 views

Chapter 1 - Basics of HTML

Uploaded by

Japan Patel
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
8 views

Chapter 1 - Basics of HTML

Uploaded by

Japan Patel
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/ 11

CHAPTER 1: BASICS OF HTML

❖ Introduction :

HTML, or HyperText Markup Language, is the standard language used to


create and design web pages. Here are some basics to get started:

1. Structure :

HTML uses tags to structure content. Tags are enclosed in angle brackets `<
>`, and most tags come in pairs: an opening tag and a closing tag. The
content is placed between the opening and closing tags.

➔ Example:
```html
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```

2. Elements :

HTML documents are made up of elements, which are defined by tags that
define the structure and content of web pages. Common elements include
headings, paragraphs, images, links, lists, tables, forms, etc.

3. Attributes :

Tags can have attributes that provide additional information about an element.
Attributes are always included in the opening tag and are usually in
name/value pairs like `name="value"`.

➔ Example:
```html
<a href="https://www.example.com">Visit our website</a>

Gyanmanjari Innovative University 1 iSpark


```

4. Headings :

HTML includes six levels of headings, `<h1>` to `<h6>`, where `<h1>` is the
highest (most important) and `<h6>` is the lowest.

5. Paragraphs :

Text content is placed within `<p>` tags to create paragraphs.

6. Links :

`<a>` tags are used to create hyperlinks. The `href` attribute specifies the
URL to link to.

7. **Images**: `<img>` tags are used to embed images. The `src` attribute
specifies the path to the image file.

8. Lists :

HTML supports ordered lists (`<ol>`), unordered lists (`<ul>`), and definition
lists (`<dl>`).

9. Tables :

Tables are created using `<table>`, `<tr>` for rows, `<td>` for data cells, and
`<th>` for header cells.

10. Forms :

HTML provides `<form>` tags to create forms for user input. Form elements
include `<input>`, `<textarea>`, `<select>`, etc.

11. Comments :

You can add comments in HTML using `<!-- comment here -->`. Comments
are not displayed in the browser and are used for notes or reminders.

HTML is the foundation for creating web pages and is often used in
conjunction with CSS (Cascading Style Sheets) for styling and JavaScript for
dynamic behaviour. Mastering HTML basics is essential for anyone interested
in web development.

Gyanmanjari Innovative University 2 iSpark


❖ HTML syntax:

1. Elements and Tags :

- HTML is composed of elements represented by tags enclosed in angle brackets


(`< >`).

- Tags usually come in pairs: an opening tag `<tag>` and a closing tag `</tag>`.
The closing tag includes a forward slash `/` before the tag name.

- Example: `<p>This is a paragraph.</p>`

2. Attributes :

- HTML elements can have attributes that provide additional information about the
element.

- Attributes are placed within the opening tag and are usually in name/value pairs
like `name="value"`.

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

3. DOCTYPE Declaration :

- The `<!DOCTYPE>` declaration must be the very first thing in an HTML


document, before the `<html>` tag.

- It specifies the version of HTML being used and helps browsers to render content
correctly.

- Example: `<!DOCTYPE html>`

4. HTML Document Structure :

- An HTML document starts with an `<html>` tag and includes `<head>` and
`<body>` sections.

- The `<head>` section contains meta-information about the document, such as


`<title>`, `<meta>`, `<link>`, and `<style>` tags.

Gyanmanjari Innovative University 3 iSpark


- The `<body>` section contains the visible content of the document.

- Example:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document Title</title>
</head>
<body>
<h1>Main Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
```

5. Whitespace :

- HTML ignores extra whitespace (spaces, tabs, newlines) between tags and within
tags.

- It is used for readability and formatting purposes.

6. Comments :

- HTML allows comments that are not displayed in the browser and are used for
adding notes or explanations within the code.

- Comments are enclosed in `<!--` and `-->`.

- Example: `<!-- This is a comment -->`

7. Self-Closing Tags :

- Some tags in HTML do not have a closing tag and are self-closed with a trailing
slash `/`.

- Example: `<img src="image.jpg" alt="Image">`

Gyanmanjari Innovative University 4 iSpark


8. Case Sensitivity :

- HTML tags and attribute names are case insensitive in practice, although
lowercase is recommended for consistency.

9. Quoting Attribute Values :

- Attribute values can be quoted with double quotes (`"`) or single quotes (`'`).
Double quotes are commonly used.

```html
<a href="https://www.example.com">Link</a>
<img src="image.jpg" alt="Description">
```

❖ Properties of HTML :

1. Id :

Specifies a unique identifier for an element. Used for styling with CSS or for
JavaScript manipulation.

```html
<div id="header">...</div>
```

2. Class :

Specifies one or more class names for an element, which can be used to
apply styles with CSS or select elements with JavaScript.

```html
<p class="intro">...</p>
```

3. Style :

Allows inline CSS styling for an element. This property directly applies CSS
rules to the element.

```html

Gyanmanjari Innovative University 5 iSpark


<h1 style="color: blue; font-size: 24px;">Heading</h1>
```

4. Src :

Specifies the URL or path to an external resource, such as an image or a


script file.

```html
<img src="image.jpg" alt="Description">
```

5. Href :

Specifies the URL of the linked resource in `<a>` (anchor) elements.

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

6. Alt :

Provides alternative text for images, which is displayed if the image cannot be
loaded or read by screen readers.

```html
<img src="image.jpg" alt="Alternative text">
```

7. Title :

Adds a title or tooltip text to an element, typically displayed when the user
hovers over the element.

```html
<abbr title="World Health Organization">WHO</abbr>
```

8. Type :

Specifies the type of an `<input>` element, such as text, checkbox, radio, etc.

```html
<input type="text" name="username">

Gyanmanjari Innovative University 6 iSpark


```

9. Value :

Specifies the initial value or current value of an `<input>` element.

```html
<input type="text" value="Initial Value">
```

10. Disabled :

Disables an input field or button, preventing user interaction.

```html
<input type="text" disabled>
```

11. Readonly : Makes an input field read-only, preventing user modification


but allowing selection and copy.

```html
<input type="text" value="Read Only" readonly>
```

These properties are essential for defining the structure, behavior, and
appearance of HTML elements within web pages. They provide flexibility and
control over how elements are displayed and interacted with by users.

❖ Role of HTML :

1. Defining Structure
2. Creating Content
3. Enabling Accessibility
4. Supporting SEO
5. Integrating with CSS and JavaScript
6. Facilitating Responsive Design
7. Adhering to Web Standards

Gyanmanjari Innovative University 7 iSpark


❖ Certainly! Here's a list of some commonly used HTML
tags along with brief descriptions of their purposes:

1. Document Structure :

- `<html>`: Defines the root of an HTML document.

- `<head>`: Contains meta-information about the HTML document, such as


title, links to stylesheets, scripts, etc.

- `<body>`: Contains the content of the HTML document that is displayed in


the browser.

2. Headings :

- `<h1>` to `<h6>`: Defines headings of decreasing sizes, where `<h1>` is


the largest and `<h6>` is the smallest.

3. Paragraphs and Text :

- `<p>`: Defines a paragraph of text.

- `<br>`: Inserts a single line break.

- `<hr>`: Represents a thematic break or horizontal rule.

4. Links :

- `<a>`: Defines a hyperlink, linking to another document or resource.

- `<nav>`: Defines a section of navigation links.

5. Lists :

- `<ul>`: Defines an unordered list, typically rendered with bullet points.

Gyanmanjari Innovative University 8 iSpark


- `<ol>`: Defines an ordered list, typically rendered with numbers or letters.

- `<li>`: Defines a list item within `<ul>` or `<ol>`.

6. Images and Multimedia :

- `<img>`: Embeds an image in the document.

- `<audio>`: Embeds audio content.

- `<video>`: Embeds video content.

7. Tables :

- `<table>`: Defines a table.

- `<tr>`: Defines a row within a table.

- `<th>`: Defines a header cell within a table row.

- `<td>`: Defines a standard cell within a table row.

8. Forms and Input :

- `<form>`: Defines an HTML form for user input.

- `<input>`: Defines an input field, such as text input, checkboxes, radio


buttons, etc.

- `<textarea>`: Defines a multiline text input control.

- `<button>`: Defines a clickable button.

9. Semantic and Structural Elements :

- `<header>`: Defines a header for a document or a section.

- `<footer>`: Defines a footer for a document or a section.

Gyanmanjari Innovative University 9 iSpark


- `<section>`: Defines a section in a document.

- `<article>`: Defines an article or independent piece of content within a


document.

- `<aside>`: Defines content that is tangentially related to the content


around it, often used for sidebars.

10. Miscellaneous :

- `<div>`: Defines a division or section in a document, used for grouping


content for styling or scripting purposes.

- `<span>`: Defines a span of text, typically used for styling purposes or


inline elements.

❖ TASK : Here's a simple and straightforward example of an HTML


document that displays a basic webpage with a heading,
paragraph of text, and an image:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple HTML Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a simple example of HTML.</p>
<img src="https://via.placeholder.com/400"
alt="Placeholder Image">
<p>HTML (HyperText Markup Language) is the standard
markup language for creating web pages.</p>
</body>

Gyanmanjari Innovative University 10 iSpark


</html>

Breakdown of the Example:

● <!DOCTYPE html>: Declares the document type and version of HTML.


● <html lang="en">: Defines the root element of the HTML document and
specifies the language (English).
● <head>: Contains meta-information about the document, such as character
encoding (<meta charset="UTF-8">) and the document title (<title>).
● <body>: Contains the visible content of the HTML document.
● <h1>: Defines the main heading of the webpage.
● <p>: Defines a paragraph of text.
● <img>: Embeds an image (src attribute specifies the image URL, alt
attribute provides alternative text for accessibility).

Output:

When rendered in a web browser, this HTML code would display:

● A large heading saying "Welcome to My Website".


● A paragraph of text explaining the simplicity of HTML.
● An image with a placeholder URL.
● Another paragraph explaining HTML's role as a markup language for web
pages.

Gyanmanjari Innovative University 11 iSpark

You might also like