How to code with HTML
Welcome to HTML Basics and Advanced Tutorial
HTML (HyperText Markup Language) is the standard language for creating web pages.
1. Basic HTML Structure
Every HTML document starts with a declaration and is followed by the document structure:
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a paragraph.</p>
</body>
</html>
Explanation:
- <!DOCTYPE html> - This declaration defines the document type and version (HTML5).
- <html> - The root element of an HTML page.
- <head> - Contains meta-information about the HTML document (like title).
- <title> - Sets the title of the page, shown in the browser's title bar or tab.
- <body> - Contains the content of the HTML document, like text, images, links, etc.
2. Headings
Headings are defined with <h1> to <h6> tags:
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
Explanation:
- <h1> - Defines the most important heading.
- <h2> - Defines a less important heading.
- <h3> - Defines an even less important heading.
3. Paragraphs
Paragraphs are defined with the <p> tag:
4. Links
Links are defined with the <a> tag:
Explanation:
- <a> - Defines a hyperlink.
- href - Attribute specifying the URL of the page the link goes to.
5. Images
Images are defined with the <img> tag:
Explanation:
- <img> - Defines an image.
- src - Attribute specifying the path to the image.
- alt - Attribute providing an alternative text for the image.
6. Lists
There are two types of lists: ordered and unordered:
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
Explanation:
- <ul> - Defines an unordered list.
- <ol> - Defines an ordered list.
- <li> - Defines a list item.
7. Tables
Tables are defined with the <table> tag:
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
</tr>
</table>
Explanation:
- <table> - Defines a table.
- <tr> - Defines a table row.
- <th> - Defines a table header.
- <td> - Defines a table cell.
8. Forms
Forms are used to collect user input:
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<br>
<input type="submit" value="Submit">
</form>
Explanation:
- <form> - Defines a form.
- <label> - Defines a label for an input element.
- <input> - Defines an input field.
- type - Attribute specifying the type of input (text, submit, etc.).
Conclusion
HTML is the foundation of web development. Once you understand the basics, you can build more complex websites by combining these elements.
Advanced HTML Concepts
1. Semantic HTML
Semantic HTML introduces meaning to the web page rather than just presentation:
<h1>Website Title</h1>
</header>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#about">About</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</nav>
<article>
<h2>Article Title</h2>
<p>This is an article.</p>
</article>
<footer>
<p>© 2024 My Website</p>
</footer>
Explanation:
- <header> - Represents introductory content.
- <nav> - Defines a set of navigation links.
- <article> - Represents a self-contained composition.
- <footer> - Represents footer content.
2. HTML5 Multimedia
HTML5 introduces multimedia elements like audio and video:
<source src="audio.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Explanation:
- <audio> - Defines sound content.
- <video> - Defines a video or movie.
- <source> - Specifies multiple media resources for media elements.
3. Forms with Advanced Input Types
HTML5 introduced new input types for forms:
<label for="email">Email:</label>
<input type="email" id="email" name="email">
<br>
<label for="date">Date:</label>
<input type="date" id="date" name="date">
<br>
<input type="submit" value="Submit">
</form>
Explanation:
- type="email" - Specifies that the input field should contain an email address.
- type="date" - Specifies that the input field should contain a date.
4. Canvas for Drawing Graphics
The <canvas> element is used to draw graphics via scripting (usually JavaScript):
<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.fillStyle = "#FF0000";
ctx.fillRect(0, 0, 150, 75);
</script>
Explanation:
- <canvas> - Defines a graphic area.
- getContext("2d") - Returns a drawing context on the canvas.
- fillRect() - Draws a filled rectangle.
5. SVG for Vector Graphics
SVG (Scalable Vector Graphics) is used to define vector-based graphics:
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
</svg>
Explanation:
- <svg> - Defines an SVG container.
- <circle> - Defines a circle.
- cx, cy - Attributes defining the center of the circle.
- r - Attribute defining the radius of the circle.
6. Web Storage
Web storage provides a way to store data locally within the user's browser:
localStorage.setItem("name", "John Doe");
document.getElementById("demo").innerHTML = localStorage.getItem("name");
</script>
<p id="demo"></p>
Explanation:
- localStorage.setItem() - Stores data with no expiration date.
- localStorage.getItem() - Retrieves the value of the specified key.
7. Responsive Web Design
Responsive web design makes web pages look good on all devices:
<style>
body {
font-family: Arial, sans-serif;
}
.container {
width: 100%;
margin: 0 auto;
}
@media (min-width: 600px) {
.container {
width: 80%;
}
}
</style>
Explanation:
- meta name="viewport" - Ensures proper rendering and touch zooming on mobile devices.
- @media - Specifies different styles for different media types/devices.
- width: 100% - Makes the container full-width on small screens.
- width: 80% - Sets the container to 80% width on larger screens.
Comments
Post a Comment