revision:
The <object> tag defines a container for an external resource, which can be a web page, a picture, a media player, or a plug-in applic tion.
To embed a picture, it is better to use the <img> tag. To embed HTML, it is better to use the <iframe> tag. To embed video or audio, it is better to use the <video> and <audio> tags.
data ; value: URL ; specifies the URL of the resource to be used by the object.
form ; value: form_id; specifies which form the object belongs to.
height ; value: pixels; specifies the height of the object.
name ; value: name ; specifies a name for the object.
type ; value: media_type; specifies the media type of data specified in the data attribute.
typemustmatch ; value: true/false; specifies whether the type attribute and the actual content of the resource must match to be displayed.
usemap ; value: #mapname ; specifies the name of a client-side image map to be used with the object.
width ; value: pixels ; specifies the width of the object.
At least one of the "type" or "data" attributes has to be defined.
code:
<object class="example" data="../pics/1.jpg" width="300" height="200"></object>
code:
<object class="example" data="../pics/blog-20-12-05.pdf" width="600" height="500"></object>
code:
<object class="example" data="../pics/gif1.gif" width="300" height="200"></object>
The <ol> tag defines an ordered list, which can be numerical or alphabetical. The <li> tag is used to define each list item. Use CSS to style lists. For unordered list, use the <ul> tag. It's good practice to use "ol" where the steps in the list must be carried out in sequence.
reversed ; value: reversed; specifies that the list order should be reversed (9,8,7...). This Boolean attribute specifies that the list's items are in reverse order. Items will be numbered from high to low.
start ; value: number; specifies the start value of an ordered list. An integer to start counting from for the list items. Always an Arabic numeral (1, 2, 3, etc.), even when the numbering type is letters or Roman numerals. For example, to start numbering elements from the letter "d" or the Roman numeral "iv," use start="4".
type ; value: 1, A, a, I, i; specifies the kind of mark. Sets the numbering type: "a" for lowercase letters, "A" for uppercase letters, "i" for lowercase Roman numerals, "I" for uppercase Roman numerals, #1# for numbers (default). The specified type is used for the entire list unless a different type attribute is used on an enclosed <li> element.
Codes:
<ol style="margin-left:4vw;">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol style="margin-left:4vw;" start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Codes:
<style>
ol.a {list-style-type: armenian;}
ol.b {list-style-type: cjk-ideographic;}
ol.c {list-style-type: decimal;}
ol.d {list-style-type: decimal-leading-zero;}
ol.e {list-style-type: georgian;}
ol.f {list-style-type: hebrew;}
ol.g {list-style-type: hiragana;}
ol.h {list-style-type: hiragana-iroha;}
ol.i {list-style-type: katakana;}
ol.j {list-style-type: katakana-iroha;}
ol.k {list-style-type: lower-alpha;}
ol.l {list-style-type: lower-greek;}
ol.m {list-style-type: lower-latin;}
ol.n {list-style-type: lower-roman;}
ol.o {list-style-type: upper-alpha;}
ol.p {list-style-type: upper-latin;}
ol.q {list-style-type: upper-roman;}
ol.r {list-style-type: none;}
ol.s {list-style-type: inherit;}
</style>
<div>
<ol style="margin-left:4vw;" class="a">
<li>Armenian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="b">
<li>Cjk-ideographic type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="c">
<li>Decimal type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="d">
<li>Decimal-leading-zero type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="e">
<li>Georgian type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="f">
<li>Hebrew type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="g">
<li>Hiragana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="h">
<li>Hiragana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="i">
<li>Katakana type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="j">
<li>Katakana-iroha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="k">
<li>Lower-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="l">
<li>Lower-greek type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="m">
<li>Lower-latin type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="n">
<li>Lower-roman type</li>
<li>Tea</li>
<li>Coca Cola </li>
</ol>
<ol style="margin-left:4vw;" class="o">
<li>Upper-alpha type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="p">
<li>Upper-latin type</li>
<li>Tea</li>
<li>Coca Cola </li>
</ol>
<ol style="margin-left:4vw;" class="q">
<li>Upper-roman type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="r">
<li>None type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
<ol style="margin-left:4vw;" class="s">
<li>inherit type</li>
<li>Tea</li>
<li>Coca Cola</li>
</ol>
The <option> tag defines an option in a select list. <option> elements go inside a <select>, <optgroup>, or <datalist> element. The <option> tag can be used without any attributes, but you usually need the "value" attribute, which indicates what is sent to the server on form submission.
If you have a long list of options, you can group related options within the<optgroup> tag. The <optgroup> tag is used to group related options in a <select> element (drop-down list). The <optgroup> tag organizes a set of <option> tags into an option group with a group heading. The label value for the <optgroup> will appear as a gray heading. All of the grouped items will appear below the heading as an indented list of options.
By default, the first option in the <select> tag will appear as the selected item. The user can select another option in the dropdown list.
disabled ; value: disabled; specifies that an option should be disabled.
label ; value: text; specifies a shorter label for an option.
selected ; value: selected; specifies that an option should be pre-selected when the page loads.
value ; value: text; specifies the value to be sent to a server.
disabled ; value: disabled; specifies that an option-group should be disabled.
label ; value: text; specifies a shorter label for an option-group.
<optgroup>
<option value=" ">. . .</option>
<option value=" ">. . .</option>
<option value=" ">. . .</option>
. . . .
</optgroup>
example
code:
<div class="spec">
<label class="example" for="cars">Choose a car:</label>
<select id="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
</div>
coding:
<form action="#" method="get">
<label class="example" for="browser">Choose your browser from the list:</label>
<input list="browsers" name="browser" id="browser">
<datalist id="browsers">
<option value="Edge">
<option value="Firefox">
<option value="Chrome">
<option value="Opera">
<option value="Safari">
</datalist>
<input type="submit">
</form>
code:
<form class="example" action="#">
<label for="cars">Choose a car:</label>
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
<br>
<input type="submit" value="Submit">
</form>
coding:
<select class="example">
<option>Choose an option</option>
<option>Choose an option</option>
<option value="html">HTML</option>
<option value="java">JAVA</option>
<option value="C++">C++</option>
<option value="php">PHP</option>
<option value="perl">PERL</option>
</select>
<style>
select{width: 10vw; height: 3vw; color: black; background-color:lightgreen;}
</style>
code:
<div class="spec">
<label class="example" for="tutorial_choice">Tutorials: </label>
<select class="example" id="tutorial_choice">
<optgroup label="Web">
<option value="html">HTML</option>
<option value="css">CSS</option>
</optgroup>
<optgroup label="Database">
<option value="sql">SQL</option>
<option value="oracle">Oracle</option>
</optgroup>
</select>
</div>
The <output> tag is used to represent the result of a calculation (like one performed by a script).The <output> HTML element is a container element, into which a site or app can inject the results of a calculation or the outcome of a user action.
for; value: element_id; specifies the relationship between the result of the calculation, and the elements used in the calculation. A space-separated list of other elements' ids, indicating that those elements contributed input values to (or otherwise affected) the calculation.
form ; value: form_id; specifies which form the output element belongs to.
name ; value: name; specifies a name for the output element.
coding:
<form class="example" oninput="x.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="a" value="50">
+<input type="number" id="b" value="25">
=<output name="x" for="a b"></output>
</form>
coding:
<form class="example" oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="range" id="b" name="b" value="50" /> +
<input type="number" id="a" name="a" value="10" /> =
<output name="result" for="a b">60</output>
</form>
coding:
<form class="example" oninput="result.value = slider.value">
<input type="range" id="slider" value="25">
<br/><br />
The value is <output name="result" for="slider">25</output>
</form>
<form class="example" oninpvut="sumresult.value = parseInt(A.value)+ parseInt(B.value) + parseInt(C.value)">
<input type="number" name="A" value="50" /> +
<input type="range" name="B" value="0" /> +
<input type="number" name="C" value="30" />
<br>
Result: <output name="sumresult"></output>
</form>
<form class="example" oninput="n.value=parseInt(p.value)+parseInt(q.value)+parseInt(r.value)">0
<input type="range" id="p" value="25">100
+<input type="number" id="q" value="50">+<input type="number" id="r" value="50">
=<output name="n" for="p q r"></output>
</form>
code:
<form class="example" oninput = "sumresult.value = parseInt(z1.value)+parseInt(z2.value)+parseInt(z3.value)">
<input type = "range" name = "z1" value = "0" /> +
<input type = "number" name = "z2" value = "20" /> +
<input type = "number" name = "z3" value = "40" /><br />
The output is: <output name = "sumresult"></output>
</form>
<form class="example" onsubmit="return false" oninput="amount.value =
(principal.valueAsNumber * rate.valueAsNumber) / 100">
<fieldset>
<legend style="font-weight:bold;">Interest calculator</legend>
<label for="principal">Amount to invest: $</label>
<input type="number" min="0" id="principal" name="principal" value="1000">
<p class="spec"><label for="rate">Interest rate: </label>
<input type="range" min="0" max="20" id="rate" name="rate" value="0"
oninput="thisRate.value = rate.value">
<output name="thisRate" for="rate">0</output><span>%</span></p>
<p class="spec">Interest received: <strong>$<output name="amount"
for="principal rate">0</output></strong></p>
</fieldset>
</form>
<form class="example" onsubmit="return false" oninput="totalamount.value =
Math.round(principal.value * (Math.pow((1 + interest.value / 100), period.value)) * 100) / 100;">
<fieldset>
Principal:<input name="principal" id="principal" type="number">(currency)
<br />
Duration:<input name="period" id="period" type="number">(month/year)
<br />
Interest rate:<input name="interest" id="interest" type="number">(percentage)
<br />
Total amount: <output name="totalamount" id="totalamount" for="principal period
interest"></output>(currency)
</fieldset>
</form>