Scribd
Upload
10 views

HTML all resources

html resources

Uploaded by

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

HTML all resources

html resources

Uploaded by

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

Table des matières

HTML basics and Exemples..........................................................................1


Basic Document Structure...........................................................................1
Metadata Elements....................................................................................1
Content Sectioning.....................................................................................1
Text Content.............................................................................................1
Lists........................................................................................................1
Tables.....................................................................................................1
Forms and Inputs......................................................................................1
Embedded Content....................................................................................1
Scripting..................................................................................................1
Semantic Elements.....................................................................................1
Interactive Elements..................................................................................1
Miscellaneous Elements..............................................................................1
Basic Document Structure...........................................................................2
Metadata Elements....................................................................................2
Content Sectioning.....................................................................................2
Text Content.............................................................................................2
Lists........................................................................................................2
Forms and Inputs......................................................................................2
Media Elements.........................................................................................2
IMPLEMENT CSS in HTML..............................................................................2
1. Inline CSS.............................................................................................2
2. Internal CSS..........................................................................................2
3. External CSS.........................................................................................2
4. CSS Selectors.........................................................................................2
5. Advanced Techniques..............................................................................2

HTML has a comprehensive set of tags and elements, each serving specific purposes in
structuring and presenting web content. Below is a categorized list of all commonly used
HTML elements as of the latest HTML5 standard:
HTML basics and Exemples
Basic Document Structure

 <html>: The root element of an HTML document.


 <head>: Contains metadata and links to resources.
 <body>: Contains the content of the HTML document.

Metadata Elements

 <meta>: Metadata about the HTML document.


 <title>: Title of the document (shown in the browser tab).
 <link>: Links to external resources (e.g., stylesheets).
 <style>: Internal CSS styles.
 <base>: Base URL for all relative URLs in the document.
 <script>: Embeds or references JavaScript.

Content Sectioning

 <header>: Introductory content or navigational links.


 <footer>: Footer content, typically at the bottom of a document.
 <main>: Main content of the document.
 <section>: Thematic grouping of content.
 <article>: Self-contained content (e.g., a blog post).
 <aside>: Content related to the main content (e.g., a sidebar).
 <nav>: Navigational links.
 <h1> to <h6>: Headings, from most important (<h1>) to least important (<h6>).

Text Content

 <p>: Paragraphs.
 <span>: Inline container for text.
 <a>: Hyperlink.
 <strong>: Strong importance (bold by default).
 <em>: Emphasized text (italic by default).
 <b>: Bold text (without implying importance).
 <i>: Italic text (without implying emphasis).
 <mark>: Highlighted text.
 <small>: Smaller text.
 <abbr>: Abbreviation or acronym.
 <time>: Time or date.
 <q>: Short inline quotation.
 <blockquote>: Long quotation.
 <cite>: Citation.
 <code>: Inline code.
 <pre>: Preformatted text.
 <br>: Line break.
 <hr>: Horizontal rule (thematic break).

Lists

 <ul>: Unordered list.


 <ol>: Ordered list.
 <li>: List item.
 <dl>: Description list.
 <dt>: Term in a description list.
 <dd>: Description of the term.

Tables

 <table>: Table container.


 <thead>: Table header group.
 <tbody>: Table body group.
 <tfoot>: Table footer group.
 <tr>: Table row.
 <th>: Table header cell.
 <td>: Table data cell.
 <caption>: Table caption.
 <col>: Column properties.
 <colgroup>: Group of columns.

Forms and Inputs

 <form>: Form container.


 <input>: Input field (various types: text, password, email, etc.).
 <label>: Label for form controls.
 <textarea>: Multi-line text input.
 <button>: Clickable button.
 <select>: Dropdown list.
 <option>: Option in a dropdown list.
 <optgroup>: Group of options in a dropdown list.
 <fieldset>: Group of form controls.
 <legend>: Title for a <fieldset>.
 <datalist>: List of pre-defined options for an <input>.
 <output>: Result of a calculation or action.
 <progress>: Progress bar.
 <meter>: Scalar measurement or value.

Embedded Content

 <img>: Image.
 <audio>: Audio content.
 <video>: Video content.
 <source>: Media source (for <audio> or <video>).
 <track>: Subtitles or captions for <video> and <audio>.
 <iframe>: Inline frame (embed another document).
 <embed>: Embedded external content.
 <object>: Embedded object (e.g., multimedia).
 <param>: Parameters for <object>.

Scripting

 <script>: JavaScript code or external script file.


 <noscript>: Fallback content for browsers without JavaScript.
 <canvas>: Drawing surface for graphics (via JavaScript).

Semantic Elements

 <div>: Generic container.


 <span>: Generic inline container.
 <figure>: Self-contained content (e.g., image with caption).
 <figcaption>: Caption for <figure>.

Interactive Elements

 <details>: Disclosure widget for additional content.


 <summary>: Summary or label for <details>.
 <dialog>: Dialog box or popup.
 <menu>: List of commands.
 <menuitem>: Command in a menu.
Miscellaneous Elements

 <template>: Template content (not rendered in the DOM).


 <slot>: Placeholder for child content (in web components).
 <shadow>: Shadow DOM (deprecated).

This list includes all significant HTML5 elements. If you'd like detailed examples or
explanations for any specific tag, let me know!

Here’s an expanded list of HTML tags with examples for each:

Basic Document Structure

1. <html>

html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>

2. <head>

html
Copy code
<head>
<title>My Page</title>
<meta charset="UTF-8">
</head>

3. <body>

html
Copy code
<body>
<h1>Welcome!</h1>
<p>This is a webpage.</p>
</body>

Metadata Elements

1. <meta>
html
Copy code
<meta name="viewport" content="width=device-width, initial-
scale=1.0">

2. <title>

html
Copy code
<title>My Awesome Page</title>

3. <link>

html
Copy code
<link rel="stylesheet" href="styles.css">

4. <style>

html
Copy code
<style>
body {
background-color: lightblue;
}
</style>

5. <base>

html
Copy code
<base href="https://example.com/">
<a href="about.html">About</a> <!-- Resolves to
https://example.com/about.html -->

6. <script>

html
Copy code
<script>
console.log("Hello, World!");
</script>

Content Sectioning

1. <header>

html
Copy code
<header>
<h1>Site Title</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
</nav>
</header>

2. <footer>

html
Copy code
<footer>
<p>&copy; 2024 My Website</p>
</footer>

3. <main>

html
Copy code
<main>
<article>
<h2>Blog Post</h2>
<p>This is a blog post.</p>
</article>
</main>

4. <section>

html
Copy code
<section>
<h2>About Us</h2>
<p>We are a web development company.</p>
</section>

5. <article>

html
Copy code
<article>
<h2>Breaking News</h2>
<p>Something exciting happened today!</p>
</article>

6. <aside>

html
Copy code
<aside>
<p>Related content or advertisements.</p>
</aside>

7. <nav>

html
Copy code
<nav>
<a href="#home">Home</a>
<a href="#services">Services</a>
</nav>
8. <h1> to <h6>

html
Copy code
<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Section Title</h3>

Text Content

1. <p>

html
Copy code
<p>This is a paragraph of text.</p>

2. <span>

html
Copy code
<span style="color: red;">Highlighted text</span>

3. <a>

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

4. <strong>

html
Copy code
<strong>Important text</strong>

5. <em>

html
Copy code
<em>Emphasized text</em>

6. <b>

html
Copy code
<b>Bold text</b>

7. <i>

html
Copy code
<i>Italic text</i>

8. <mark>
html
Copy code
<mark>Highlighted text</mark>

9. <small>

html
Copy code
<small>Small print text</small>

10. <abbr>

html
Copy code
<abbr title="HyperText Markup Language">HTML</abbr>

11. <time>

html
Copy code
<time datetime="2024-12-12">December 12, 2024</time>

12. <q>

html
Copy code
<q>Inline quotation text</q>

13. <blockquote>

html
Copy code
<blockquote>
This is a long block quote.
</blockquote>

14. <cite>

html
Copy code
<cite>Author Name</cite>

15. <code>

html
Copy code
<code>console.log("Hello, World!");</code>

16. <pre>

html
Copy code
<pre>
function foo() {
return "bar";
}
</pre>

17. <br>

html
Copy code
Line 1<br>Line 2

18. <hr>

html
Copy code
<hr>

Lists

1. <ul> and <li>

html
Copy code
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>

2. <ol>

html
Copy code
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>

3. <dl>, <dt>, and <dd>

html
Copy code
<dl>
<dt>Term</dt>
<dd>Definition</dd>
</dl>

Forms and Inputs

1. <form>

html
Copy code
<form action="/submit" method="post">
<input type="text" name="name">
<button type="submit">Submit</button>
</form>

2. <input>

html
Copy code
<input type="email" placeholder="Enter your email">

3. <textarea>

html
Copy code
<textarea rows="4" cols="50"></textarea>

4. <button>

html
Copy code
<button>Click Me</button>

Media Elements

1. <img>

html
Copy code
<img src="image.jpg" alt="Sample image">

2. <audio>

html
Copy code
<audio controls>
<source src="audio.mp3" type="audio/mpeg">
</audio>

3. <video>

html
Copy code
<video controls>
<source src="video.mp4" type="video/mp4">
</video>

4. <iframe>

html
Copy code
<iframe src="https://example.com"></iframe>
IMPLEMENT CSS in HTML
CSS (Cascading Style Sheets), you can style HTML elements by applying
rules that specify the appearance of those elements. CSS can be applied in
three main ways: inline, internal, and external. Below is a guide with
examples for each method:

1. Inline CSS

 Style is applied directly to an individual HTML element using the style attribute.

Example:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; font-size: 24px;">Hello, World!</h1>
<p style="background-color: yellow; padding: 10px;">This is a paragraph
with inline CSS.</p>
</body>
</html>

2. Internal CSS

 Style rules are placed within a <style> tag inside the <head> section of the HTML
document.

Example:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>Internal CSS Example</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: green;
font-family: Arial, sans-serif;
}
p {
color: white;
background-color: black;
padding: 15px;
border-radius: 5px;
}
</style>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This paragraph is styled using internal CSS.</p>
</body>
</html>

3. External CSS

 Styles are written in a separate .css file, which is linked to the HTML document
using a <link> tag in the <head>.

Example:

HTML File:

html
Copy code
<!DOCTYPE html>
<html>
<head>
<title>External CSS Example</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>External CSS Styling</h1>
<p>This is styled using an external CSS file.</p>
</body>
</html>

CSS File (styles.css):

css
Copy code
body {
font-family: 'Verdana', sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
}
h1 {
color: #333;
text-align: center;
margin-top: 20px;
}
p {
color: #555;
padding: 10px 20px;
background-color: #eee;
border-left: 5px solid #ccc;
}

4. CSS Selectors

CSS rules consist of a selector and a declaration block. Here are some common selectors:

Selector Description Example


* Targets all elements * { margin: 0; padding: 0; }
element Targets specific elements h1 { color: red; }

.class
Targets elements with a specific .button { color: blue; }
class
#id
Targets an element with a specific #header { text-align: center; }
ID
h1, p { font-family: sans-
element,element Targets multiple elements serif; }
element element Targets descendant elements div p { color: gray; }

5. Advanced Techniques

 Pseudo-classes: Style elements based on their state.

css
Copy code
a:hover {
color: red;
}
input:focus {
border: 2px solid blue;
}

 Pseudo-elements: Style parts of an element.

css
Copy code
p::first-line {
font-weight: bold;
}

 Media Queries: Apply styles based on screen size.

css
Copy code
@media (max-width: 600px) {
body {
background-color: lightblue;
}
}
By combining these methods and techniques, you can create visually appealing and
responsive web pages.

You might also like