HTML JavaScript
JavaScript makes HTML pages more dynamic and interactive.
Example
My First JavaScript
Click me to
display Date and Time
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>
A Taste of JavaScript
Here are some examples of what JavaScript can do:
Example
JavaScript can change content:
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
Example
JavaScript can change styles:
document.getElementById("demo").style.fontSize = "25px";
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.backgroundColor = "yellow";
Example
JavaScript can change attributes:
document.getElementById("image").src = "picture.gif";
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 Script Tags
|
Tag |
Description |
|
<script> |
Defines a client-side script |
|
<noscript> |
Defines an alternate content
for users that do not support client-side scripts |
HTML File Paths
A file path describes the location of a file in a web site's
folder structure.
File Path Examples
|
Path |
Description |
|
<img src="picture.jpg"> |
The "picture.jpg"
file is located in the same folder as the current page |
|
<img
src="images/picture.jpg"> |
The "picture.jpg"
file is located in the images folder in the current folder |
|
<img
src="/images/picture.jpg"> |
The "picture.jpg"
file is located in the images folder at the root of the current web |
|
<img
src="../picture.jpg"> |
The "picture.jpg"
file is located in the folder one level up from the current folder |
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://example.com/images/picture.jpg" alt="Image">
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="Image">
In the following example, the file path points to a file in the
images folder located in the current folder:
Example
<img src="images/picture.jpg" alt="Image">
In the following example, the file path points to a file in the
images folder located in the folder one level up from the current folder:
Example
<img src="../images/picture.jpg" alt="Image">
Best Practice
It is best practice to use relative file paths (if possible).
When using relative file paths, your web pages will not be bound
to your current base URL. All links will work on your own computer (localhost)
as well as on your current public domain and your future public domains.
HTML
- The Head Element
The HTML <head> element is a
container for the following elements: <title>, <style>, <meta>, <link>, <script>, and <base>.
The HTML <head> Element
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.
The <title> element:
- defines
a title in the browser toolbar
- provides
a title for the page when it is added to favorites
- displays
a title for the page in search engine-results
So, try to make the title as accurate and meaningful as possible!
A simple HTML document:
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: blue;}
h1 {color: red;}
p {color: blue;}
</style>
The HTML <link> Element
The <link> element defines the
relationship between the current document and an external resource.
The <link> tag is most often used to
link to external style sheets:
Example
<link rel="stylesheet" href="mystyle.css">
The HTML <meta> Element
The <meta> element is typically used
to specify the character set, page description, keywords, author of the document,
and viewport settings.
The metadata will not be displayed on the page, but is used by
browsers (how to display content or reload page), by search engines (keywords),
and other web services.
Examples
Define the character set used:
<meta charset="UTF-8">
Define keywords for search engines:
<meta name="keywords" content="HTML,
CSS, Freelancing">
Define a description of your web page:
<meta name="description" content="Free
tutorials">
Define the author of a page:
<meta name="author" content="M
Ahamed">
Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">
Setting the viewport to make your website look good on all
devices:
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
Example of <meta> tags:
Example
<meta charset="UTF-8">
<meta name="description" content="Free
tutorials">
<meta name="keywords" content="HTML,
CSS ">
<meta name="author" content="M
Ahamed">
Setting The Viewport
The viewport is the user's visible area of a web page. It varies
with the device - it will be smaller on a mobile phone than on a computer
screen.
You should include the following <meta> element
in all your web pages:
<meta name="viewport" content="width=device-width,
initial-scale=1.0">
This gives the browser instructions on how to control the page's
dimensions and scaling.
The width=device-width part sets the
width of the page to follow the screen-width of the device (which will vary
depending on the device).
The initial-scale=1.0 part sets the
initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the
same web page with the
viewport meta tag:
Tip: If you are browsing this page with a
phone or a tablet, you can click on the two links below to see the difference.
The HTML <script> Element
The <script> element is used to
define client-side JavaScripts.
The following JavaScript writes "Hello JavaScript!" into
an HTML element with id="demo":
Example
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello
JavaScript!";
}
</script>
The HTML <base> Element
The <base> element specifies the
base URL and/or target for all relative URLs in a page.
The <base> tag must have either an
href or a target attribute present, or both.
There can only be one single <base> element
in a document!
Example
Specify a default URL and a default target for all links on a
page:
<head>
<base href=" https://fixhubblog.blogspot.com/target="_blank">
</head>
<body>
<img src="images/img.gif" width="24" height="39" alt="Image
Name">
<a href="tags/tag_base.asp">HTML base Tag</a>
</body>
Chapter Summary
- The
<head>element is a container for metadata (data about data) - The
<head>element is placed between the<html>tag and the<body>tag - The
<title>element is required and it defines the title of the document - The
<style>element is used to define style information for a single document - The
<link>tag is most often used to link to external style sheets - The
<meta>element is typically used to specify the character set, page description, keywords, author of the document, and viewport settings - The
<script>element is used to define client-side JavaScripts - The
<base>element specifies the base URL and/or target for all relative URLs in a page
HTML head Elements
|
Tag |
Description |
|
<head> |
Defines information about the
document |
|
<title> |
Defines the title of a
document |
|
<base> |
Defines a default address or
a default target for all links on a page |
|
<link> |
Defines the relationship
between a document and an external resource |
|
<meta> |
Defines metadata about an
HTML document |
|
<script> |
Defines a client-side script |
|
<style> |
Defines style information for
a document |
