To display an HTML page correctly, a web browser must know the character set used in the page. This is specified in the <meta> tag.
The ASCII Character Set uses the values from 0 to 31 (and 127) for control characters, the values from 32 to 126 for letters, digits, and symbols. It does not use the values from 128 to 255.
The ANSI Character Set (Windows-1252) is identical to ASCII for the values from 0 to 127. ANSI has a proprietary set of characters for the values from 128 to 159. It is identical to UTF-8 for the values from 160 to 255.
The ISO-8859-1 Character Setis identical to ASCII for the values from 0 to 127. It does not use the values from 128 to 159 and is identical to UTF-8 for the values from 160 to 255.
The UTF-8 Character Set is identical to ASCII for the values from 0 to 127. It does not use the values from 128 to 159 and is identical to both ANSI and 8859-1 for the values from 160 to 255. UTF-8 continues from the value 256 with more than 10 000 different characters.
syntax
<meta charset="character_set">
Charset attribute in <meta> tag specifies the character encoding for the HTML document.
<script charset="character_set">
Charset attribute in the script element specifies the character encoding used in an external script.
The HTML5 specification encourages web developers to use the UTF-8 character set!
When present, it specifies that an <input> element should be pre-selected (checked) when the page loads. The checked attribute can be used with <input type="checkbox"> and <input type="radio">. The checked attribute can also be set after the page load, with a JavaScript.
syntax
<input type = "checkbox | radio" checked />
<input type = "checkbox | radio" checked="checked" />
The checked attribute indicates that the input element is checked, i.e. selected. Clicking the element will toggle, i.e. check or uncheck, the item.
some examples
example
codes:
<form style="margin-left:5vw;" ction="/action_page.php" method="get">
<input type="checkbox" name="vehicle1" value="Bike">
<label for="vehicle1"> I have a bike</label><br>
<input type="checkbox" name="vehicle2" value="Car">
<label for="vehicle2"> I have a car</label><br>
<input type="checkbox" name="vehicle3" value="Boat" checked>
<label for="vehicle3"> I have a boat</label><br><br>
<input type="submit" value="Submit">
</form>
It specifies a URL to a document that explains the quote, or why the text was inserted/changed.
The <cite> HTML element must include the title of the referenced work. The reference may be in an abbreviated form according to context-appropriate conventions related to citation metadata. The cite attribute can be used on the following elements: <blockquote>, <del>, <ins>, <q>.
The cite attribute has no visual effect in ordinary web browsers, but can be used by screen readers. URL contains the value i.e URL which specifies the source of the quotation. Possible values are: absolute URL (i.e. it points to another website) or relative URL (i.e. it points to a file within a website).
some examples
example
Here is a quote from WWF's website:
For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
codes:
<p class="spec" style="margin-left:5vw;">Here is a quote from WWF's website:</p>
<blockquote style="margin-left:5vw;" cite="http://www.worldwildlife.org/who/index.html">
For 50 years, WWF has been protecting the future of nature. The world's leading conservation
organization, WWF works in 100 countries and is supported by 1.2 million members in the United
States and close to 5 million globally.
</blockquote>
example
WWF's goal is to:
Build a future where people live in harmony with nature.
We hope they succeed.
codes:
<p class="spec" >WWF's goal is to:
<q cite="http://www.wwf.org">Build a future where people live in harmony with nature.</q>
We hope they succeed.
</p>
"class" attribute: specifies one or more class names for an element
The class attribute is mostly used to point to a class in a style sheet. However, it can also be used by JavaScript (via the HTML DOM) to make changes to HTML elements with a specified class. It can be used on any HTML element.s The class name is case sensitive! Name of a class can be used with multiple elements in an HTML document.
syntax
<element class="classname">
classname specifies one or more class names for an element. To specify multiple classes, separate the class names with a space, e.g. <span class="left important">. This allows to combine several CSS classes for one HTML element. Naming rules are as follows: must begin with a letter A-Z or a-z, and can be followed by: letters (A-Za-z), digits (0-9), hyphens ("-"), and underscores ("_")
some examples
example
Header 4
A paragraph.
Note that this is an important paragraph. :)
codes:
<h4 class="intro" style="margin-left:3vw;">Header 4</h4>
<p class="spec">A paragraph.</p>
<p class="important spec">Note that this is an important paragraph. :)</p>
<style>
h4.intro {color: blue;}
p.important {color: green;}
</style>
The HTML <textarea> cols attribute is used to tell the browser how many average-width characters should fit on a single line i.e the number of columns to display. The size of a text area can also be set by the CSS height and width properties.
syntax
<textarea cols="number">
number specifies the width of the text area (in average character width). Default value is 20.
Why do you want go for the Editor Job Profile? (100 words)
What are your weaknesses? (50 words)
codes:
<h4 style="margin-left:3vw;" >Interview Questions</h4>
<p class="spec">Why do you want go for the Editor Job Profile? (100 words)</p>
<textarea style="margin-left:3vw;"rows="6" cols="70">Write the answer in 100 words only... </textarea>
<p class="spec">What are your weaknesses? (50 words)</p>
<textarea style="margin-left:3vw;"rows="4" cols="70"> Write the answer in 50 words only...</textarea>
"colspan" attribute : defines the number of columns a table cell should span.
The colspan attribute can be used on the following elements: <td> and <th>. It allows the single table cell to span the width of more than one cell or column.
syntax
<td/th colspan="number">
number specifies the number of columns a cell should span. The number must be an integer. Note: colspan="0" tells the browser to span the cell to the last column of the column group (colgroup).
The content attribute gives the value associated with the "http-equiv" or "name" attribute.The content attribute can be used on the "meta" element and is used to set the meta information in an HTML document. This can be the information for the description or the keywords, for name attribute.
syntax
<meta content="text">
It contains the values of the text, which specify the content of the meta information
some examples
example
codes:
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
</head>
example
codes:
<head>
<meta name="description" content="Learn for free">
</head>
"contenteditable" attribute: specifies whether content is editable or not.
When the contenteditable attribute is not set on an element, the element will inherit it from its parent. The element will be editable if its parent is editable. You can use this attribute on any HTML element. The contenteditable attribute does not have an effect on disabled elements.
syntax
<element contenteditable="true | false">
The contenteditable attribute specifies that an element is editable in-line. Clicking on the element places the text in edit mode. The attribute is mainly an instance of a Global Attribute and it can be used in any HTML elements. This attribute contains two value: either true or false. If the attribute value is true or empty then the content is editable and if the attribute value is false the content is not editable.
some examples
example
This is a paragraph. It is editable. Try to change this text.
This is a paragraph. It is not editable. Try to change this text.
HTML codes:
<p class="spec" contenteditable="true">This is a paragraph. It is editable.
Try to change this text.</p>
<p class="spec" contenteditable="false">This is a paragraph. It is not editable.
Try to change this text.</p>
example
Edit this content to add your own quote
-- Write your own name here
HTML codes:
<blockquote contenteditable="">
<p class="spec">Edit this content to add your own quote</p>
</blockquote>
<cite style="margin-left:5vw;" contenteditable="true">--
Write your own name here</cite>
"controls" attribute: boolean attribute for the audio/video controls.
When present, it specifies that audio/video controls should be displayed. The controls attribute can be used on the <audio> and <video> elements.
Controls should include: play, pause, seeking, volume, fullscreen toggle (for video only), captions/subtitles (for video only, when available), and track (for video only, when available)
syntax
<element controls>
some examples
example
Click on the play button to play a sound:
HTML codes:
<audio style="margin-left:3vw;" controls>
<source src="../pics/horse.wav" type="audio/wav">
<source src="../pics/horse.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
example
HTML codes:
<video style="margin-left:3vw;" width="320" height="240" controls>
<source src="../pics/Wuzhen-20-10_02.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
"coords" attribute : specifies the coordinates of an area.
It is used with areas in an image map. The coords attribute is used together with the "shape attribute" to specify the size, shape, and placement of an area. The coordinates of the top-left corner of an area are 0,0.
syntax
<area coords="value">
x1, y1, x2, y2 : specifies the coordinates of the top-left and bottom-right corner of the rectangle (shape="rect")
x, y, radius: specifies the coordinates of the circle center and the radius (shape="circle")
x1, y1, x2, y2, .., xn, yn: specifies the coordinates of the edges of the polygon. If the first and last coordinate pairs are not the same, the browser will add the last coordinate pair to close the polygon (shape="poly")
some examples
example
HTML codes:
<img src="../pics/computer-map.png" alt="Computer" usemap="#computermap">
<map name="computermap">
<area shape="rect" coords="253,142,16,2" alt="screen"
href="javascript:alert('screen was clicked');">
<area shape="rect" coords="262,218,0,156" alt="keyboard"
href="javascript:alert('keyboard was clicked');">
<area shape="circle" coords="267,234,22" alt="mouse"
href="javascript:alert('mouse was clicked');">
</map>
