html figures

Html figures and their attributes

HTML figures are used to embed images, videos, or other types of media within an HTML document. They are typically used to include illustrations, diagrams, or photographs that are related to the content of the document.

The <figure> tag is used to define a container for the media, and the <img> tag is used to define the actual media element.

Attributes of the <figure> tag include:

class: specifies a class name for the element

id: specifies a unique id for the element

style: specifies an inline CSS style for the element

title: provides additional information about the element

Attributes of the <img> tag include:

src: specifies the URL of the image

alt: provides alternative text for the image in case the image cannot be displayed

width and height: specify the dimensions of the image

style: specifies an inline CSS style for the element

title: provides additional information about the element

Here is an example of using the <figure> and <img> tags to embed an image in an HTML document:

<figure>
<img src="image.jpg"
alt="image" 
width="300" height=
"200">
<figcaption>my image
</figcaption>
</figure>

In this example, the <img> tag is used to define the image element and the src attribute is used to specify the URL of the image. The alt attribute provides alternative text for the image, and the width and height attributes specify the dimensions of the image. The <figcaption> is used to provide a caption for the image

Note that the <figcaption> is optional and can be used to provide a caption for the image.

Read More

html pre element

The HTML <pre> element is used to define preformatted text. Text within an <pre> element is displayed in a fixed-width font, and whitespace characters such as spaces and line breaks are honored. 

This allows the text to maintain its original formattings, such as multiple spaces or line breaks.

The <pre> element is often used to display code snippets or other text that should retain its original formatting.

Example:

<pre>
This is a preformatted
text block.
White space is preserved.
</pre>

It also has a default CSS styling, it has a monospace font, a white background, and the text is wrapped.

You can also use the white-space property to control how the text is displayed, such as using white-space: pre-line; to wrap text but still honor line breaks.

Read More

useful html character entities

Here are some commonly used HTML character entities:

&lt; : less-than sign (<)

&gt; : greater-than sign (>)

&amp; : ampersand (&)

&quot; : double quotation mark (")

&apos; : single quotation mark (')

&nbsp; : non-breaking space

&copy; : copyright symbol

&reg; : registered trademark symbol

&hellip; : horizontal ellipsis (...)

&trade; : trade mark symbol

&mdash; : em dash (—)

&ndash; : en dash (–)

&lsquo; : left single quotation mark (‘)

&rsquo; : right single quotation mark (’)

&ldquo; : left double quotation mark (“)

&rdquo; : right double quotation mark (”)

These entities can be used in place of special characters in HTML code to ensure that the characters are displayed correctly in web browsers.

Read More

html youtube videos

To embed a YouTube video in an HTML webpage, you can use the <iframe> element. 

The src attribute should be set to the URL of the video on YouTube, and the width and height attributes can be set to specify the size of the video player.

<iframe width="560" height="315" 
src="https://www.youtube.com/embed/
VIDEO_ID"
frameborder="0" allow="accelerometer;
autoplay; 
clipboard-write; encrypted-media; 
gyroscope; picture-in-picture" 
allowfullscreen></iframe>

You can change the "VIDEO_ID" in the src to the id of the video you want to embed.

Additionally, you can also add some extra attributes like title and frameborder to configure the video player.

<iframe width="560" height="315"
src="https://www.youtube.com/embed/
VIDEO_ID"
frameborder="0" title="Video Title" 
allowfullscreen></iframe>

You can also use the youtube video link and wrap it into the iframe tag for embedding the video.

<iframe width="560" height="315"
src="https://www.youtube.com/watch?
v=VIDEO_ID"
frameborder="0" allowfullscreen>
</iframe>

There are several attributes that can be used with the <iframe> element to customize the appearance and behavior of the embedded video. Some commonly used attributes include:

src: The URL of the video to be embedded. This is required for the video to be displayed.

width and height: The width and height of the video player, in pixels.

frameborder: The width of the border around the video player, in pixels. A value of "0" will remove the border.

allowfullscreen: Allows the video to be played in fullscreen mode.

title: Title of the video

id: unique id for the iframe

class: class name for the iframe

sandbox : Enables an extra set of restrictions for the content in the iframe.

seamless : Indicates that the iframe should be displayed as if it is a part of the containing document, rather than being isolated in a separate browsing context.

srcdoc : The HTML content of the page to show in the iframe.

name : The name of the iframe.

Please note that some of these attributes might not be supported in some older browsers.

Read More

html iframe

An iframe (short for "inline frame") is an HTML element 

that allows you to embed another HTML document within the current one.

 The embedded document is treated as a separate entity and can be styled and interacted with independently of the parent document.

Syntax:

<iframe src="URL">
</iframe>

Attributes:

src: the URL of the document to be embedded

width and height: the width and height of the frame, in pixels

frameborder: the width of the border around the frame, in pixels

name: a name for the frame, used for linking and targeting

sandbox: a security feature that restricts the actions of the embedded content

Example:

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

It is also possible to include content within the iframe element instead of a src attribute, this is called "inline frame"

<iframe>
<!-- Content here -->
</iframe>

It is important to note that some websites may not allow their content to be embedded in an iframe due to security reasons.

Read More

html videos

The HTML <video> element is used to embed video content in an HTML document. 

It is a container element that can contain one or more <source> elements, each of which specifies a different video file to be played by the browser. 

The browser will choose the first file that it is able to play.

The <video> element has several attributes that can be used to control the behavior of the video, including:

src: This attribute specifies the URL of the video file to be played.

autoplay: This attribute, when set to "autoplay", causes the video to start playing as soon as it is loaded.

controls: This attribute, when set to "controls", displays the browser's built-in video controls (such as play/pause, volume, etc.)

loop: This attribute, when set to "loop", causes the video to start again from the beginning when it reaches the end.

preload: This attribute specifies whether the browser should start loading the video as soon as the page loads. The possible values are "none", "metadata", and "auto".

width and height: These attributes specify the dimensions of the video in pixels.

poster: This attribute specifies an image to be displayed before the video starts playing.

Additionally, the <video> element supports a variety of events, such as onplay, onpause, and onended, which can be used to create custom behavior when the video starts, stops or ends.

Examples:

<video src="myvideo.mp4" 
controls></video>
<video autoplay loop>
<source src="myvideo.mp4" 
type="video/mp4">
<source src="myvideo.webm" 
type="video/webm">
Your browser does not support the 
video tag.
</video>

In the first example, the video will be embedded in the page and the controls will be displayed. In the second example, the video will play automatically and loop and the browser will choose the first file it can play.

Read More

html audios

About HTML audio and its attributes

HTML audio is used to embed audio files on web pages. 

The <audio> element is used to define an audio player. 

The source of the audio file is specified using the src attribute.

Here is a basic example of how to use the <audio> element:

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

Here are some common attributes of the <audio> element:

src: The URL of the audio file to be played.

controls: If present, this attribute displays audio controls (play/pause, volume, etc.) in the browser.

autoplay: If present, the audio will start playing automatically as soon as the page loads.

loop: If present, the audio will play repeatedly.

muted: If present, the audio will be muted by default.

preload: Specifies whether the audio file should be loaded when the page loads. The options are "none", "metadata", and "auto".

poster: An image to be shown while the audio is loading.

Here is an example of how to use some of these attributes:

<audio src="example.mp3" controls 
autoplay
loop muted preload="auto"></audio>

This will create an audio player with controls, that will play automatically, will loop, and will be muted by default, and the audio file will be loaded automatically when the page loads.

You can also use <source> element inside the <audio> element to specify the source of audio in different formats, like this:

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

This will ensure that the browser will play the first supported format of the audio file.

Note: Be aware of browser compatibility, not all the attributes will work in all browsers.

The controls attribute is used to display audio controls in the browser. 

The controls typically include a play/pause button, a volume control, and a progress bar. 

When the controls attribute is present, the browser will automatically display these controls, allowing the user to control the playback of the audio file.

Here's an example of how to use the controls attribute:

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

When the controls attribute is not used, the browser will not display any controls for the audio player. In this case, you can use JavaScript to create custom controls for the audio player.

Additionally, you can also customize the look and feel of the controls by applying CSS styles to the <audio> element.

It is worth noting that not all browsers implement the same set of controls and their layout, so it's best practice to test your audio player in multiple browsers to ensure that it works as expected.

Read More