HTML - Iframes
Using <iframe> tag we can define an inline frame in HTML. This tag is used to display a separate document, including scrollbars and borders.
The src tag to define URL of page, other sites or object.
Actually <a> attribute is used to specify the URL of the document that occupies the inline frame.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Iframes Example</title>
</head>
<body>
<p>Document of rakesh4ittech.in</p>
<iframe src = "https://www.rakesh4ittech.in/" width = "555" height = "200">
</iframe>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>HTML Iframes Example</title> </head> <body> <p>Document of rakesh4ittech.in</p> <iframe src = "https://www.rakesh4ittech.in/" width = "555" height = "200"> </iframe> </body> </html>
Output
Iframe Attributes
| Sr.No | Attribute & Description |
|---|---|
| 1 | src This attribute is used to give the file name that should be loaded in the frame. Its value can be any URL. |
| 2 | name This attribute allows us to give a name to a frame. It is used to indicate which frame a document should be loaded into. |
| 3 | frameborder This attribute specifies whether or not the borders of that frame are shown; it overrides the value given in the frameborder attribute on the <frameset> tag if one is given, and this can take values either 1 (yes) or 0 (no). |
| 4 | marginwidth This attribute allows us to specify the width of the space between the left and right of the frame's borders and the frame's content. The value is given in pixels. |
| 5 | marginheight This attribute allows us to specify the height of the space between the top and bottom of the frame's borders and its contents. The value is given in pixels. |
| 6 | height This attribute specifies the height of <iframe>. |
| 7 | scrolling This attribute controls the appearance of the scrollbars that appear on the frame. This takes values either "yes", "no" or "auto". |
| 8 | longdesc This attribute allows you to provide a link to another page containing a long description of the contents of the frame. |
| 9 | width This attribute specifies the width of <iframe>. |
HTML - Meta Tags
The <meta> tag is used to provide information name/value pairs describing properties of the HTML document. We can add metadata to our web pages by placing <meta> tags inside the header of the document (<head> and </head>) tags.
Specifying Keywords
We can use tag to specify keywords which are used by the search engines while indexing our webpage for searching purpose.Document Description
We can use tag to give a short description about the document. This can be also used by various search engines while indexing our webpage.Example
<!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name = "keywords" content = "HTML, Meta Tags, Iframes" /> <meta name = "description" content = "Learning about Meta Tags Iframes, ." /> </head> <body> <p>HTML Tutorials</p> </body> </html>
Viewport Element
The browser's viewport is the area of the window in which web content can be seen. The viewport is a short tag that is included in the head of HTML document that tells the browser how the page should be rendered.
Actually viewport does not have the same size, it varies with the variation in screen size of the devices on which the website is visible. For a laptop, the viewport has a larger size as compared to a smartphone or tablet.
A mobile-optimized site contains like the following statement:
<meta name="viewport" content="width=device-width, initial-scale=1">
Viewport Attributes
| Property | Description |
|---|---|
| width | The width of the virtual viewport of the device. |
| device-width | The physical width of the device’s screen. |
| height | The height of the “virtual viewport” of the device. |
| device-height | The physical height of the device’s screen. |
| initial-scale | The initial zoom when visiting the page. 1.0 does not zoom. |
| minimum-scale | The minimum amount the visitor can zoom on the page. 1.0 does not zoom. |
| maximum-scale | The maximum amount the visitor can zoom on the page. 1.0 does not zoom. |
| user-scalable | Allows the device to zoom in and out. Values are yes or no. |
HTML Symbol Entities
An HTML entity is a piece of text that begins with an ampersand ( & ) and ends with a semicolon ( ; ). It is used to display reserved characters and invisible characters. Entity names are case sensitive.
Some Useful Character Entities
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking space | |   | |
| < | less than | < | < |
| > | greater than | > | > |
| & | ampersand | & | & |
| ☎ | Black telephone symbol | ☎ | ☎ |
| ' | single quotation mark (apostrophe) | ' | ' |
| ¢ | cent | ¢ | ¢ |
| £ | pound | £ | £ |
| ¥ | yen | ¥ | ¥ |
| € | euro | € | € |
| © | copyright | © | © |
| ® | registered trademark | ® | ® |
0 Comments