Scribd
Upload
13 views

html_notes_and_examples

html language

Uploaded by

Erick Onesmo
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
13 views

html_notes_and_examples

html language

Uploaded by

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

HTML NOTES AND EXAMPLES

1. What is HTML?
HTML (HyperText Markup Language) is the standard language for creating web pages.
It uses "tags" to structure content like text, images, links, and more.

2. Basic Structure of an HTML Document:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

- <!DOCTYPE html>: Declares the document type.


- <html>: The root element.
- <head>: Contains meta-information like the title.
- <body>: Contains the visible content (headings, paragraphs, images, etc.).

3. Common HTML Tags:


1. Headings:

<h1>Main Heading</h1>
<h2>Subheading</h2>
<h3>Smaller Subheading</h3>

- <h1> to <h6>: Headings from largest (<h1>) to smallest (<h6>).

2. Paragraphs:

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

3. Links:

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

- href: Specifies the URL to link to.

4. Images:

<img src="image.jpg" alt="Image description">

- src: Specifies the image source (URL or file path).


- alt: Text that describes the image if it doesn't load.

5. Lists:
- Ordered List (numbered):

<ol>
<li>First item</li>
<li>Second item</li>
</ol>
- Unordered List (bulleted):

<ul>
<li>First item</li>
<li>Second item</li>
</ul>

4. Forms:
Forms allow users to input data.

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


<label for="name">Name:</label>
<input type="text" id="name" name="name">

<label for="email">Email:</label>
<input type="email" id="email" name="email">

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


</form>

- action: The URL where the form data is sent.


- method: POST sends the data to the server.
- <input>: Used for input fields like text, email, and submit buttons.

5. Div and Span:


Used for grouping elements.

- <div>: Block-level container.

<div>
<h1>Title</h1>
<p>This is inside a div.</p>
</div>

- <span>: Inline container for smaller sections of content.

<p>This is <span>important</span> text.</p>

6. Project Example - Simple Web Page:

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page using HTML.</p>

<h2>About Me</h2>
<p>I am learning HTML and this is a great start!</p>

<h2>My Hobbies</h2>
<ul>
<li>Reading</li>
<li>Coding</li>
<li>Gaming</li>
</ul>
<p>For more info, visit <a href="https://example.com">Example.com</a>.</p>
</body>
</html>

7. Practice Exercises:
1. Create a webpage with a heading and two paragraphs.
2. Add a link to your favorite website.
3. Create an image gallery using multiple <img> tags.
4. Make a form that asks for a name and email.

8. HTML Tables:

Tables are used to display data in a grid format.

<table border="1">
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
<tr>
<td>John</td>
<td>25</td>
<td>USA</td>
</tr>
<tr>
<td>Maria</td>
<td>30</td>
<td>Spain</td>
</tr>
</table>

9. HTML Semantic Elements:

Semantic HTML elements provide meaning to the structure of your web page, improving
accessibility and SEO.

- Header:

<header>
<h1>Welcome to My Website</h1>
<nav>
<a href="#home">Home</a>
<a href="#about">About</a>
<a href="#contact">Contact</a>
</nav>
</header>

- Article:

<article>
<h2>Article Title</h2>
<p>This is an article about HTML semantics.</p>
</article>

- Section:

<section>
<h2>Section Title</h2>
<p>This is a section of the page.</p>
</section>

- Footer:

<footer>
<p>Copyright &copy; 2024. All rights reserved.</p>
</footer>

10. Multimedia Elements:

You can embed multimedia like audio and video directly into HTML.

- Audio:

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

- Video:

<video width="320" height="240" controls>


<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>

11. Project Example - Personal Profile Page:

<!DOCTYPE html>
<html>
<head>
<title>John Doe's Profile</title>
</head>
<body>
<header>
<h1>John Doe</h1>
<nav>
<a href="#about">About</a> |
<a href="#skills">Skills</a> |
<a href="#contact">Contact</a>
</nav>
</header>

<section id="about">
<h2>About Me</h2>
<p>Hi! I am John, a web developer with a passion for building great
websites.</p>
</section>

<section id="skills">
<h2>My Skills</h2>
<ul>
<li>HTML & CSS</li>
<li>JavaScript</li>
<li>Web Design</li>
</ul>
</section>
<section id="contact">
<h2>Contact Me</h2>
<form action="/submit-profile" method="post">
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<input type="submit" value="Send">
</form>
</section>

<footer>
<p>Follow me on <a href="https://twitter.com/johndoe">Twitter</a>.</p>
</footer>
</body>
</html>

12. Project Example - Simple Blog Page:

<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
</head>
<body>
<header>
<h1>Welcome to My Blog</h1>
</header>

<article>
<h2>First Blog Post</h2>
<p>This is my first blog post. I love writing about technology and coding!</p>
</article>

<article>
<h2>Second Blog Post</h2>
<p>Today, I'll be sharing some tips on how to learn HTML faster.</p>
</article>

<footer>
<p>© 2024 My Blog. All rights reserved.</p>
</footer>
</body>
</html>

You might also like