HTML IFRAMES, HTML JAVASCRIPT, HTML FILE PATHS & HTML HEAD
Hello guys myself Harshith.G.B. Today we are going to continue our journey of learning HTML. Today we will be learning 4 more topics, that are :
HTML Iframes
HTML JavaScript
HTML file paths
HTML head
HTML Iframes
An HTML iframe is used to display a web page within a web page.
HTML Iframe syntax
The HTML <iframe> tag specifies an inline frame. An inline frame is used to embed another document within the current HTML document.
Syntax :
<iframe src="url" title="description"></iframe>
Tip: It is a good practice to always include a title attribute for the <iframe>. This is used by screen readers to read out what the content of the iframe is.
Iframe - Set height & width
Use the height and width attributes to specify the size of the iframe. The height and width are specified in pixels by default.
Example :
<iframe src="demo_iframe.htm" height="200" width="300" title="Iframe Example"></iframe>
Or you can add the style attribute and use the CSS height and width properties.
Example :
<iframe src="demo_iframe.htm" style="height:200px;width:300px;" title="Iframe Example"></iframe>
HTML JavaScript
JavaScript makes HTML pages more dynamic and interactive.
The HTML <script> tag
The HTML <script> tag is used to define a client-side script (JavaScript). The <script> element either contains script statements, or it points to an external script file through the src attribute. Common uses for JavaScript are image manipulation, form validation, and dynamic changes of content. To select an HTML element, JavaScript most often uses the document.getElementById() method. This JavaScript example writes "Hello JavaScript!" into an HTML element with id="demo".
Example :
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
The HTML <noscript> tag
The HTML <noscript> tag defines an alternate content to be displayed to users that have disabled scripts in their browser or have a browser that doesn't support scripts.
Example :
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
<noscript>Sorry, your browser does not support JavaScript!</noscript>
HTML file paths
A file path describes the location of a file in a web site's folder structure. File paths are used when linking to external files, like :
Web pages
Images
Style sheets
JavaScripts
Absolute file paths
An absolute file path is the full URL to a file.
Example :
<img src="https://www.w3schools.com/images/picture.jpg" alt="Mountain">
Relative file paths
A relative file path points to a file relative to the current page. In the following example, the file path points to a file in the images folder located at the root of the current web.
Example :
<img src="/images/picture.jpg" alt="Mountain">
HTML head
The HTML <head> element is a container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>. The <head> element is a container for metadata (data about data) and is placed between the <html> tag and the <body> tag. HTML metadata is data about the HTML document. Metadata is not displayed. Metadata typically define the document title, character set, styles, scripts, and other meta information.
The HTML <title> element
The <title> element defines the title of the document. The title must be text-only, and it is shown in the browser's title bar or in the page's tab. The <title> element is required in HTML documents! The content of a page title is very important for search engine optimization (SEO)! The page title is used by search engine algorithms to decide the order when listing pages in search results.
Example :
<!DOCTYPE html>
<html>
<head>
<title>A Meaningful Page Title</title>
</head>
<body>
The content of the document......
</body>
</html>
The HTML style element
The <style> element is used to define style information for a single HTML page.
Example :
<style>
body {background-color: powderblue;}
h1 {color: red;}
p {color: blue;}
</style>