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

HTML Notes Updated

HTML NOTES

Uploaded by

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

HTML Notes Updated

HTML NOTES

Uploaded by

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

HTML Notes

1. Introduction to HTML

HTML (HyperText Markup Language) is the foundational language for creating web pages. It allows

developers to structure content and elements on the web.

HTML uses tags (keywords surrounded by angle brackets < >) to identify different types of content.

Tags often come in pairs like <tagname> and </tagname>, with the first tag in the pair being the

opening tag and the second being the closing tag.

2. Basic Structure of an HTML Document

The basic structure of an HTML document looks like this:

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>This is a Heading</h1>

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

</body>

</html>

Explanation:

- <!DOCTYPE html>: This declaration defines the document type and version of HTML being used

(HTML5 in this case).

- <html>: This is the root element of the HTML page. All other elements are nested within it.

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

- <title>: Sets the title of the webpage, which is displayed on the browser tab.

- <body>: This is where the visible content of the webpage is placed. Text, images, links, and other

elements go here.

- <h1>: Represents a top-level heading. HTML supports multiple levels of headings, from <h1>

(most important) to <h6> (least important).

- <p>: Represents a paragraph of text.

3. Common HTML Tags

3.1 Headings

HTML provides six levels of headings, <h1> to <h6>, where <h1> is the highest or most important

level and <h6> is the least.

Example:

<h1>This is an H1 Heading</h1>

<h2>This is an H2 Heading</h2>

<h3>This is an H3 Heading</h3>

3.2 Paragraph

The <p> tag defines a paragraph of text. Browsers automatically add some space (margin) before

and after a paragraph.

Example:

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

3.3 Links

The <a> tag is used to create hyperlinks. The href attribute specifies the URL of the page the link

goes to.
Example:

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

3.4 Images

The <img> tag is used to embed images. It requires the src attribute to define the image source

(URL or path) and the alt attribute for alternate text (useful for accessibility).

Example:

<img src="image.jpg" alt="A description of the image">

3.5 Lists

HTML supports ordered and unordered lists:

- Ordered List (<ol>): Items are numbered.

Example:

<ol>

<li>First item</li>

<li>Second item</li>

</ol>

- Unordered List (<ul>): Items are bulleted.

Example:

<ul>

<li>First item</li>

<li>Second item</li>

</ul>
3.6 Tables

Tables are used to display data in a tabular format.

Example:

<table>

<tr>

<th>Header 1</th>

<th>Header 2</th>

</tr>

<tr>

<td>Data 1</td>

<td>Data 2</td>

</tr>

</table>

Explanation:

- <table>: Defines the table.

- <tr>: Defines a row in the table.

- <th>: Defines a header cell in the table.

- <td>: Defines a standard cell in the table.

4. Attributes

Attributes provide additional information about HTML elements. They are always included in the

opening tag and usually come in name/value pairs like name="value".

Common Attributes:

- id: Specifies a unique id for an element.

Example:
<h2 id="section1">This is a Heading with an ID</h2>

- class: Specifies one or more class names for an element, which can be used to style elements with

CSS.

Example:

<p class="intro">This paragraph has a class attribute.</p>

- style: Adds inline CSS styles to an element.

Example:

<p style="color: red;">This paragraph has inline styles.</p>

- src: Specifies the source of an embedded object like an image.

Example:

<img src="logo.png" alt="Logo">

- href: Specifies the URL of the linked page.

Example:

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

5. HTML Semantics

Semantic HTML elements clearly describe their meaning in a human- and machine-readable way.

Common Semantic Elements:

- <header>: Represents the header of a document or section.

Example:

<header>

<h1>My Website</h1>
</header>

- <nav>: Contains the navigation links.

Example:

<nav>

<a href="#home">Home</a>

<a href="#about">About</a>

</nav>

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

Example:

<section>

<h2>Section Title</h2>

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

</section>

- <article>: Represents an independent piece of content like a blog post.

Example:

<article>

<h2>Article Title</h2>

<p>This is an article.</p>

</article>

- <footer>: Defines the footer of a document or section.

Example:

<footer>
<p>Copyright © 2024 My Website</p>

</footer>

6. Multimedia

6.1 Images

The <img> tag embeds images in the document.

Example:

<img src="image.jpg" alt="A beautiful scenery" width="500" height="600">

6.2 Audio

The <audio> tag is used to embed sound content.

Example:

<audio controls>

<source src="audio.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

6.3 Video

The <video> tag is used to embed video content.

Example:

<video controls width="500">

<source src="video.mp4" type="video/mp4">

Your browser does not support the video tag.


</video>

7. HTML Forms and Inputs

HTML forms are used to collect user inputs and send them to a server.

Example:

<form action="/submit" method="POST">

<label for="name">Name:</label>

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

<br>

<label for="email">Email:</label>

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

<br>

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

</form>

Common Input Types:

- text: Single-line text input.

- password: Password input (text hidden).

- email: Input for email addresses.

- radio: Radio button (single choice from a group).

- checkbox: Checkbox (multiple choices).

- submit: Submit button to send the form data to the server.

8. HTML Entities

HTML entities are special characters that cannot be easily typed or have reserved meanings in

HTML.

Examples:
- &nbsp;: Non-breaking space

- &lt;: Less than (<)

- &gt;: Greater than (>)

- &amp;: Ampersand (&)

9. HTML5 Features

9.1 New Elements

HTML5 introduced several new elements, such as:

- <article>: Represents an article.

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

- <nav>: Defines navigation links.

- <header>: Represents a header for a section.

You might also like