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

Basic HTML Table of Contents

Uploaded by

sixdstrs
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
5 views

Basic HTML Table of Contents

Uploaded by

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

Basic HTML

Introduction to HTML
What is HTML?

HTML, or HyperText Markup Language, is the standard language used to create and
structure content on the web. It is a markup language that uses a series of elements to
define the structure and presentation of web pages. HTML is the backbone of web
development, providing the foundational structure for all web content.

History of HTML

HTML was first proposed by Tim Berners-Lee in 1991 as a way to create and share
documents over the internet. The first version, HTML 1.0, was very basic, with only a
few tags. Over the years, HTML has evolved significantly, with major updates like
HTML4 and HTML5 introducing new elements and features. HTML5, released in
2014, brought significant enhancements, including new semantic elements, multimedia
support, and APIs.

HTML Document Structure

Every HTML document starts with a basic structure that includes the following
elements:
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>Welcome to My Web Page</h1>
<p>This is a paragraph of text.</p>
</body>
</html>

- `<!DOCTYPE html>`: This declaration defines the document type and version of
HTML being used which is HTML5.

- `<html>`: The root element that wraps all the content on the page.

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

- `<title>`: Sets the title of the web page, which appears in the browser tab.
- `<body>`: Contains the content that is displayed on the web page.

HTML Tags and Elements


HTML tags are the building blocks of HTML. They are enclosed in angle brackets
(e.g., `<p>` for paragraphs). Elements are the content within tags. For example:

HTML element

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

Here, `<p>` is the opening tag, `</p>` is the closing tag, and "This is a paragraph."
is the content.

HTML Attributes

Attributes provide additional information about elements. They are specified within
the opening tag and consist of a name and a value. For example:

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

Here, `href` is the attribute name, and `"https://www.example.com"` is the attribute


value.

HTML Comments

Comments are non-executable notes within the code, useful for documentation and
debugging. They are enclosed within `<!--` and `-->`. For example:
<!-- This is a comment -->

Text Formatting
Headings (`<h1>` to `<h6>`)

Headings are used to structure content hierarchically, with `<h1>` being the most
important and `<h6>` the least. For example:
<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
```

Paragraphs (`<p>`)
Paragraphs are used to group related text content. For example:

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

Bold and Italics (`<b>`, `<strong>`, `<i>`, `<em>`)

These elements are used to emphasize text. `<b>` and `<strong>` make text bold,
while `<i>` and `<em>` make text italic. For example:

<b>Bold text</b>
<strong>Strong text</strong>
<i>Italic text</i>
<em>Emphasized text</em>
```

Superscript and Subscript (`<sup>`, `<sub>`)

These elements are used for mathematical notations and chemical formulas. For
example:

<p>E=mc<sup>2</sup></p>
<p>H<sub>2</sub>O</p>

Line Breaks and Horizontal Rules (`<br>`, `<hr>`)

`<br>` inserts a line break, while `<hr>` adds a horizontal line. For example:

<p>This is the first line.<br>This is the second line.</p>


<hr>
<p>This is a new paragraph.</p>
```
Links and Anchors
Creating Hyperlinks (`<a>`)

The `<a>` tag is used to create hyperlinks, allowing users to navigate between
pages. For example:

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

Target Attributes (`_blank`, `_self`, etc.)

These attributes define where the linked content will open. For example:
<a href="https://www.example.com" target="_blank">Visit
Example</a>

```

Bookmark Links

These links allow users to jump to specific sections within a page. For example:

<a href="#section1">Go to Section 1</a>


<h2 id="section1">Section 1</h2>

```

Images and Multimedia


Inserting Images (`<img>`)

The `<img>` tag is used to embed images in a web page. For example:

<img src="image.jpg" alt="Description of image" width="300"


height="200">

```

Image Attributes (`src`, `alt`, `width`, `height`)

These attributes specify the image source, alternative text, and dimensions.

Multimedia Embedding (`<video>`, `<audio>`)

These elements allow embedding of video and audio content. For example:
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

<audio controls>
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio tag.
</audio>

```

Lists
Unordered Lists (`<ul>`)

Lists with bullet points. For example:

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

```

Ordered Lists (`<ol>`)

Lists with numbered items. For example:

<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
List Items (`<li>`)

Individual items within a list.

Description Lists (`<dl>`, `<dt>`, `<dd>`)

Lists used for defining terms and their descriptions. For example:

<dl>
<dt>Term 1</dt>
<dd>Description 1</dd>
<dt>Term 2</dt>
<dd>Description 2</dd>
</dl>

```

Tables

Basic Table Structure (`<table>`, `<tr>`, `<td>`)

Tables are used to organize data in rows and columns. For example:

<table>

<tr>

<td>Row 1, Cell 1</td>

<td>Row 1, Cell 2</td>

</tr>

<tr>

<td>Row 2, Cell 1</td>

<td>Row 2, Cell 2</td>

</tr>

</table>
Table Headers (`<th>`)

Headers for table columns or rows. For example:


<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>

```

Table Rows and Columns

Rows are defined by `<tr>`, and columns by `<td>`.

Table Attributes (`border`, `cellspacing`, `cellpadding`)

These attributes control the appearance of tables. For example:

<table border="1" cellspacing="0" cellpadding="10">


<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
</tr>
</table>

```

Forms
Form Structure (`<form>`)

Forms are used to collect user input. For example:


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

```

Input Elements (`<input>`)

Various types of input fields, such as text, radio buttons, and checkboxes. For
example:

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


<input type="radio" name="gender" value="male"> Male
<input type="checkbox" name="vehicle" value="Bike"> I have a
bike

```

Text Fields (`<input type="text">`)

Single-line text input fields.

Radio Buttons and Checkboxes (`<input type="radio">`, `<input


type="checkbox">`)

Used for multiple-choice questions.

Dropdown Lists (`<select>`, `<option>`)

Lists of options for users to select from. For example:

<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
</select>

```

Textarea (`<textarea>`)

Multi-line text input fields. For example:

<textarea name="message" rows="10" cols="30">


Enter your message here.
</textarea>

```

Submit and Reset Buttons (`<input type="submit">`, `<input type="reset">`)

Buttons to submit or reset form data. For example:

<input type="submit" value="Submit">


<input type="reset" value="Reset">

```

Semantic HTML
Semantic elements provide meaning to the structure of content, improving
accessibility and SEO. Common Semantic Elements (`<header>`, `<footer>`,
`<nav>`, `<article>`, `<section>`, `<aside>`)

These elements define the structure of a web page. For example:

<header>
<h1>My Website</h1>
</header>
<nav>
<a href="/home">Home</a>
<a href="/about">About</a>
</nav>
<article>
<h2>Article Title</h2>
<p>Article content...</p>
</article>
<aside>
<h3>Related Links</h3>
<a href="/link1">Link 1</a>
<a href="/link2">Link 2</a>
</aside>
<footer>
<p>© 2023 My Website</p>
</footer>

```

Benefits of Semantic HTML

Improved readability, accessibility, and SEO.

HTML5 Features

New HTML5 Elements (`<canvas>`, `<video>`, `<audio>`, `<article>`,


`<section>`, etc.)

HTML5 introduced new elements for multimedia and semantic structuring.

HTML5 Form Enhancements (`<input type="date">`, `<input type="email">`,


etc.)

New input types for better form validation. For example:

<input type="date" name="dob">


<input type="email" name="email">

```

HTML5 APIs (Geolocation, Local Storage, etc.)

APIs that extend the functionality of web applications. For example:

<script>
if (navigator.geolocation) {

navigator.geolocation.getCurrentPosition(showPosition);
} else {
console.log("Geolocation is not supported by this
browser.");
}
</script>

```

HTML Document Head

Document Title (`<title>`)

The title of the web page, displayed in the browser tab. For example:

<title>My Web Page</title>

```

Meta Tags (`<meta>`)

Metadata about the document, such as character encoding and description. For
example:
<meta charset="UTF-8"> UTF-8 covers almost all of the characters and symbols in the
world!
<meta name="description" content="This is a description of my
web page.">

Link Tags (`<link>`)

Used to link external resources like stylesheets. For example:

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

It is good practice to place it inside the <head> section

Script Tags (`<script>`)

Used to include JavaScript code. For example,


<script src="script.js"></script>

It is good practice to place it at the bottom of you code


ASSIGNMENT: Simple HTML Website project

File Structure:

• index.html (Home Page)

• about.html (About Page)

• services.html (Services Page)

• contact.html (Contact Page)

Explanation:

• index.html: with one h1 heading tag carrying your university name and a p tag
describing your university.

• about.html: with one h1 heading tag carrying your name and a p tag describing
yourself.

• contact.html: a form with 2 inputs: one for username and one for password

• food.html: a table with 2 rows and 2 columns

Food Prices
Food-name Food price

To be submitted on Tuesday next week

You might also like