revision:
The <p> tag defines a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields. Browsers automatically add a single blank line before and after each <p> element.
Paragraphs are "block-level" elements, and notably will automatically close if another block-level element is parsed before the closing </p> tag. Use CSS to style paragraphs.
This is a paragraph.
This is a paragraph.
This is a paragraph.
Codes:
<p class="spec">This is a paragraph.</p>
<p class="spec">This is a paragraph.</p>
<p class="spec">This is a paragraph.</p>
This paragraph contains a lot of lines in the source code, but the browser ignores it.
This paragraph contains a lot of spaces in the source code, but the browser ignores it.
The number of lines in a paragraph depends on the size of your browser window. If you resize the browser window, the number of lines in this paragraph will change.
Codes:
<p class="spec">
This paragraph
contains a lot of lines
in the source code,
but the browser
ignores it.
</p>
<p class="spec">
This paragraph
contains a lot of spaces
in the source code,
but the browser
ignores it.
</p>
<p class="spec">
The number of lines in a paragraph depends on the size of your browser window.
If you resize the browser window, the number of lines in this paragraph will
change.
</p>
The <param> tag is used to define parameters for an <object> element. We can use more than one <param> tag within an <object> element in any order, but each tag must contain "name" and "value" attribute and should be placed at the start of the content. The <param> tag controls the behaviour of the <object> element using a different pair of the "name" of value attributes, such as autoplay, controller, etc.
name ; value: text ; specifies the name of a parameter.
value ; value: text; specifies the value of a parameter.
<object>
<param name=" " value=" ">
<param name=" " value=" ">
</object>
code:
<object class="example" data="../pics/horse.wav">
<param name="autoplay" value="true">
</object>
coding:
<object class="example" data="../pics/peacock.wav">
<param name="autoplay" value="true">
</object>
The <picture> tag gives web developers more flexibility in specifying image resources. The most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport.
The <picture> element contains two tags: one or more <source> tags and one <img> tag.
The browser will look for the first "source" element where the media query matches the current viewport width, and then it will display the proper image (specified in the srcset attribute).
The "img" element is required as the last child of the <picture> element, as a fallback option, if none of the source tags matches.
The <picture> element works "similar" to <video> and <audio>. You set up different sources, and the first source that fits the preferences is the one being used.
Codes:
<picture style="margin-left: 4vw;">
<source media="(min-width:650px)" srcset="../pics/img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="../pics/img_white_flower.jpg">
<img src="../pics/img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Codes:
<picture style="margin-left: 4vw;">
<source srcset="../pics/1.jpg" media="(min-width: 800px)" width="300" height="auto">
<img src="../pics/car2.jpg" alt="" width="200" height="auto" />
</picture>
The <pre> tag defines preformatted text. Text in a <pre> element is displayed in a fixed-width font, and the text preserves both spaces and line breaks. The text will be displayed exactly as written in the HTML source code.
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
Codes:
<pre>
Text in a pre element
is displayed in a fixed-width
font, and it preserves
both spaces and
line breaks
</pre>
This is a standard pre. It will use as much space as it needs.
This is a pre with a fixed width. It will use as much space as specified.
Codes:
<h4>Standard pre</h4>
<pre>This is a standard pre. It will use as much space as it needs.</pre>
<h4>Fixed width pre</h4>
<div style="width:200px;overflow:auto;margin-left:1vw;">
<pre>This is a pre with a fixed width. It will use as much space as specified.</pre>
</div>
The <progress> tag represents the completion progress of a task, typically displayed as a progress bar. Always add the <label> tag for best accessibility practices.
The <progress> tag is used in conjunction with JavaScript to display the progress of a task. Dynamically changing values of the progress bar must be defined with the scripts (JavaScript). The <progress> tag is not suitable for representing a gauge (e.g. disk space usage or relevance of a query result). To represent a gauge, use the <meter> tag instead.
A <progress> tag cannot be nested inside another <progress> tag.
max ; value: number; specifies how much work the task requires in total. The "max" attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
value ; value: number; specifies how much of the task has been completed. It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted. If there is no "value"S attribute, the progress bar is indeterminate; this indicates that an activity is ongoing with no indication of how long it is expected to take.
Unlike the <meter> element, the "minimum value" is always 0, and the "min attribute" is not allowed for the <progress> element.
code:
<div class="spec">
<label class="example" for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>
</div>
example
code:
<progress class="example"></progress>
code:
<script>
var gvalue=1;
function abc(){
var progressExample = document.getElementById ('progress-javascript-example');
setInterval (function ()
{
if(gvalue<100){
gvalue++;
progressExample.value =gvalue;
}
abc();
}, 1000);
}
</script>
<progress class="example" id="progress-javascript-example" min="1" max="100"></progress>
<br/><br/>
<button class="example" onclick="abc()">click me</button>
Determininate progress bar:
Indetermininate progress bar:
code:
<div class="spec">
<p class="example">Determininate progress bar:
<progress value="750" max="1000">
<span id="downloadProgress">25</span>%
</progress>
</p>
<p class="example">Indetermininate progress bar:
<progress max="1000">
<span id="downloadProgress">25</span>%
</progress>
</p>
</div>