Learn HTML: Advanced Concepts - Part 2
11. Embedding Content with Iframes
An <iframe> (inline frame) is used to embed another webpage inside the current page. This is useful for embedding videos, maps, or external content.
Here's an example of an iframe embedding a YouTube video:
<iframe width="560" height="315"
src="https://www.youtube.com/embed/your-video-id"
title="YouTube video"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
Attributes used with iframes:
src: The URL of the content to be embedded.widthandheight: Dimensions of the iframe.allowfullscreen: Allows the embedded video to be viewed in fullscreen mode.
12. HTML Entities
HTML entities are special codes used to display reserved characters like <, >, &, and others.
Some commonly used HTML entities:
<!-- Display less-than and greater-than symbols -->
< for <
> for >
<!-- Display ampersand -->
& for &
<!-- Non-breaking space -->
for a space that won't break
13. Introduction to CSS (Cascading Style Sheets)
CSS is used to style HTML elements and make the webpage look better. You can apply CSS in three ways: inline, internal, or external.
Example of adding internal CSS:
<style>
body {
background-color: #f4f4f4;
font-family: Arial, sans-serif;
}
h1 {
color: #333;
}
p {
font-size: 16px;
line-height: 1.5;
}
</style>
CSS allows you to control many aspects of the design, such as:
- Color:
color(text color) andbackground-color(background color) - Font:
font-family,font-size, andfont-weight - Layout:
margin,padding, andborder
14. Introduction to JavaScript in HTML
JavaScript allows you to make your webpage interactive. You can add JavaScript directly into HTML using the <script> tag.
Here's an example of how to use JavaScript to display an alert message when a button is clicked:
<button onclick="showMessage()">Click Me</button>
<script>
function showMessage() {
alert("Hello, this is a JavaScript alert!");
}
</script>
JavaScript allows you to:
- Manipulate HTML content dynamically
- React to user interactions (clicks, form submissions, etc.)
- Fetch and display data dynamically (AJAX)
15. Meta Tags
Meta tags provide metadata about the HTML document, which is not displayed on the page but is used by search engines and browsers. Meta tags are placed inside the <head> section of the HTML document.
Common meta tags:
<meta charset="UTF-8">
<meta name="description" content="Learn HTML with this tutorial">
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="author" content="Your Name">
16. Responsive Design with Media Queries
Responsive design ensures that your webpage looks good on all devices (desktops, tablets, and mobile phones). Media queries are used to apply different styles based on the screen size.
Example of a simple media query:
<style>
body {
background-color: lightblue;
}
@media only screen and (max-width: 600px) {
body {
background-color: lightgreen;
}
}
</style>
This example changes the background color based on the device width:
- For devices wider than 600px: light blue background.
- For devices 600px or smaller: light green background.
17. Adding a Favicon
A favicon is a small icon displayed in the browser tab for a webpage. To add a favicon, use the following code inside the <head> section:
<link rel="icon" type="image/png" href="favicon.png">
18. Accessibility in HTML
Accessibility ensures that websites can be used by people with disabilities. Some accessibility practices in HTML include:
- Using descriptive
altattributes for images. - Providing keyboard navigation for forms and buttons.
- Using semantic HTML for better screen reader support.
Example of an accessible image:
<img src="image.jpg" alt="A scenic mountain view">
