Text and Media Elements

Module 2: Text and Media Elements

Headings, paragraphs, lists, and images:

In this lesson, we will be learning about the basics of creating structured content using HTML. We will cover how to create headings, paragraphs, lists, and how to add images to a webpage.

First, let's start with headings. HTML has six different heading levels, from h1 to h6. The h1 tag is the most important heading, and h6 is the least important.

To create a heading, you simply use the heading tag followed by the text you want to use for the heading. For example, to create an h1 heading, you would use the following code:

Code:

<h1>Heading 1</h1>

You can also create subheadings using the h2, h3, h4, h5, and h6 tags.

Code:

<h2>Heading 2</h2>

<h3>Heading 3</h3>

<h4>Heading 4</h4>

<h5>Heading 5</h5>

<h6>Heading 6</h6>

Next, let's move on to creating paragraphs. To create a paragraph, you use the <p> tag.

Code:

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

We also have Lists in HTML, you can create an unordered list using the <ul> tag and each list item is created using the <li> tag.

Code:

<ul>

   <li>List item 1</li>

   <li>List item 2</li>

   <li>List item 3</li>

</ul>

You can also create an ordered list using the <ol> tag, and each list item is created using the <li> tag.

Code:

<ol>

   <li>List item 1</li>

   <li>List item 2</li>

   <li>List item 3</li>

</ol>

Finally, let's talk about adding images to a webpage. To add an image to a webpage, you use the <img> tag. The <img> tag requires two attributes: src and alt. The src attribute specifies the URL of the image file, and the alt attribute specifies alternative text to be displayed if the image cannot be displayed.

Code:

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

That's it for this lesson! With these basic building blocks, you can create structured and organized content for your website.

Link and Anchors:

In this lesson, we will be learning about creating links and anchors using HTML. Links are an essential part of any webpage as they allow users to navigate between pages on your website or to other websites.

The most basic way to create a link in HTML is to use the anchor tag <a>. The anchor tag is used to create a hyperlink to another webpage.

The anchor tag requires the href attribute, which specifies the URL of the page you want to link to. For example, to create a link to Google, you would use the following code:

Code:

<a href="https://www.google.com">Visit Google</a>

This will display the text "Visit Google" on the webpage and when clicked will redirect to the google website.

You can also use the anchor tag to create links to other pages within your website. For example, to create a link to a page called "about.html" located in the same directory as the current page, you would use the following code:

Code:

<a href="about.html">About Us</a>

Anchors are used to create links within the same webpage. This is useful when you have a long webpage and want to create a table of contents or a navigation menu that jumps to different sections of the page.

Anchors are defined using the <a> tag with the name attribute. Here's an example of how to create an anchor:

Code:

<a name="top"></a>

To create a link to the anchor, you would use the following code:

Code:

<a href="#top">Back to top</a>

In this example, the link "Back to top" will take the user to the location on the page where the anchor "top" is placed.

It's also possible to create links that open in a new browser tab or window using the target attribute. For example:

Code:

<a href="https://www.example.com" target="_blank">Open in new tab</a>

This will open the link "https://www.example.com" in a new browser tab or window when clicked.

That's it for this lesson! With the knowledge of creating links and anchors, you can create navigation menus and tables of contents for your website, as well as linking to other websites and specific locations within your own website.

Audio and video:

In this lesson, we will be learning about adding audio and video to a webpage using HTML. HTML5 provides new tags for embedding multimedia into web pages, including <audio> and <video>.

To add an audio file to a webpage, you use the <audio> tag. The <audio> tag requires the src attribute, which specifies the URL of the audio file.

Code:

<audio src="audio.mp3"></audio>

You can also use the controls attribute to add playback controls, like play and pause button, volume control and seeking feature.

Code:

<audio src="audio.mp3" controls></audio>

Similarly, to add a video file to a webpage, you use the <video> tag. The <video> tag also requires the src attribute, which specifies the URL of the video file.

Code:

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

You can also use the controls attribute to add playback controls, like play and pause button, volume control and seeking feature.

Code:

<video src="video.mp4" controls></video>

Additionally, you can also use the <source> tag inside the <audio> and <video> tag to specify different source files for different browsers.

Code:

<video controls>

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

   <source src="movie.ogg" type="video/ogg">

   Your browser does not support the video tag.

</video>

This allows you to specify different video formats for different browsers, ensuring that the video can be played on any browser.

You can also use the width and height attributes to specify the dimensions of the video.

Code:

<video src="video.mp4" controls width="640" height="480"></video>

That's it for this lesson! With the knowledge of <audio> and <video> tags, you can easily add multimedia to your web pages, providing a more engaging and interactive experience for your users.

Iframes:

In this lesson, we will be learning about using iframes in HTML. An iframe is an HTML element that allows you to embed another HTML document within the current document.

To create an iframe, you use the <iframe> tag. The <iframe> tag requires the src attribute, which specifies the URL of the page you want to embed. You can also use the width and height attributes to specify the dimensions of the iframe. Here's an example of how to create an iframe:

Code:

<iframe src="https://www.example.com" width="800" height="600"></iframe>

This will embed the webpage "https://www.example.com" within the current webpage and will have width of 800 pixels and height of 600 pixels.

You can also use the sandbox attribute to apply some restriction to the iframe content such as disallow form submission, scripts execution and more. For example:

Code:

<iframe src="https://www.example.com" width="800" height="600" sandbox></iframe>

You can also use the allow attribute to enable specific permissions such as form submission, scripts execution and more. For example:

Code:

<iframe src="https://www.example.com" width="800" height="600" sandbox allow="scripts"></iframe>

It's also possible to control the appearance of the iframe using CSS. For example, you can use the border property to add a border around the iframe, or the padding property to add space between the iframe and the surrounding content.

Code:

iframe {

   border: 1px solid black;

   padding: 10px;

}

That's it for this lesson! With the knowledge of iframes, you can easily embed other webpages and external content within your own webpage, providing a more dynamic and interactive experience for your users.