Categories
HTML Web development

HTML video tag

HTML video tag

The HTML <video> tag is used to show a video on a website.

Use the <source> tag within <video> to play a video:

Example:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" controls>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

Note: The controls attribute adds video controls, like play, pause, and volume.

To start a video automatically, use the autoplay attribute:

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" autoplay>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

Add muted attribute after autoplay attribute to let your video start playing automatically (but muted):

<!DOCTYPE html> 
<html> 
<body> 

<video width="640" autoplay muted>
  <source src="https://videos.files.wordpress.com/lFj3lsG4/valentines-day-movie_dvd.mp4" type="video/mp4">
</video>

</body> 
</html>

Output:

There are 3 supported video formats for the <video> tag: MP4/MPEG 4 (video/mp4), WebM (video/webm), and Ogg (video/ogg).

Enjoy coding!

Categories
HTML Web development

HTML iframe tag

HTML iframe tag

The HTML <iframe> tag defines an inline frame. The inline frame is used to embed another document within the HTML document.

Syntax:

 <iframe src="url" title="description"></iframe> 

Example:

An <iframe> in its simplest use. Embedding another document within the current HTML document:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" title="lena design">
</iframe>

</body>
</html>

Output:

Attributes:

allowfullscreen (value- true/ false) – the <iframe> element can activate fullscreen mode by calling the requestFullscreen() method (true).

allowpaymentrequest (value- true/false) – can be allowed to invoke the Payment Request API (true).

height (value- px) – defines the height of an (default height is 150 px).

Syntax:

<iframe height="pixels"> 

Example:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" height="300" title="lena design">
</iframe>

</body>
</html>

Output:

An with a specified height of 300 px:

loading (value- eager, lazy) – defines whether a browser should load an iframe immediately or defer the loading of iframes until some conditions are met.

name (value- text) – defines the name of an <iframe>.

referrerpolicy (value- no-referrer/ no-referrer-when-downgrade/ origin/ origin-when-cross-origin/ same-origin/ strict-origin-when-cross-origin/ unsafe-url) – defines which referrer information to send when fetching the iframe.

sandbox (value- allow-forms/ allow-pointer-lock/ allow-popups/ allow-same-origin/ allow-scripts/ allow-top-navigation) – Enables an extra set of restrictions for the content in an <iframe>.

src (value- URL) – defines the address of the document to embed in the <iframe>.

srcdoc (value- HTML_code) – defines the HTML content of the page to show in the <iframe>.

width (value- px) – defines the width of an (default width is 300 px).

Syntax:

<iframe width="px"> 

Example:

<!DOCTYPE html>
<html>
<body>

<iframe src="https://www.lenastanley.com/" width="640" title="lena design">
</iframe>

</body>
</html>

Output:

An <iframe> with a specified width of 640 px:

You can add the style attribute and use the CSS height and width properties, and remove/add the <iframe> border:

<!DOCTYPE html>
<html>
<body>


<p>An iframe with a thick black borde</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:5px solid black;">
</iframe>

<p>An iframe with no borders:</p>
<iframe src="https://www.lenastanley.com/" width="100%" height="300" style="border:none;">
</iframe>

</body>
</html>

Output:

An iframe with a thick black border:

An iframe with no borders:

Enjoy coding!

Categories
HTML Web development

HTML title & meta tags

The HTML <title> tag and <meta> tag are bits of HTML code in the header of a website. They help search engines to understand the content on a web page.

HTML title tag and meta tag

The HTML <title> tag and <meta> tag always go inside the <head> element.

HTML <title> tag

The HTML <title> tag specifies the title of the document. The title of the document can be text-only. It is displayed in the browser’s title bar/ or in the page tab.

Note: The HTML <title> tag is required in all HTML documents and also you can not have more than one <title> element in an HTML document.

Example:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML title tag</title>
</head>

<body>
<h4>This is a heading.</h4>
<p>This is a paragraph.</p>
</body>
</html>

Output:

HTML title tag

This is a heading.

This is a paragraph.

HTML meta tag

The HTML <meta> tag specifies metadata (information about data) about an HTML document.

The metadata is used by browsers (how to display content or reload the page), search engines, and other web services.

Example:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
  <meta name="author" content="Web developer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

</body>
</html>

Attributes:

charset (value- charset_set) – defines the character encoding for the HTML document (UTF-8).

Syntax:

<meta charset="character_set"> 

Example:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
</head>

<body>
<h4>This is a heading.</h4>
<p>This is a paragraph.</p>
</body>

</html>

This is a heading.

This is a paragraph.

content (value- text) – defines the value associated with the http-equiv or name attribute.

Syntax:

<meta content="text"> 

Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
</head>
<body>

</body>
</html>

http-equiv (value- content-security-policy/ content-type/ default-style/ refresh) – provides an HTTP header for the information/value of the content attribute

Syntax:

<meta http-equiv="content-security-policy|content-type|default-style|refresh">

Example:

Refresh document every 45 seconds:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="refresh" content="45">
</head>
<body>

<h4>This is aheading.</h4>
<p>This is a paragraph.</p>

</body>
</html>

name (value- application-name/ author/ description/ generator/ keywords/ viewport) – defines a name for the metadata.

Syntax:

<meta name="value"> 

Example:

<!DOCTYPE html>
<html>
<head>
  <meta name="description" content="Web development">
  <meta name="keywords" content="HTML,CSS,JavaScript,jQuery">
  <meta name="author" content="Web developer">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<h4>This is a heading.</h4>
<p>This is a paragraph.</p>

</body>
</html>

Attribute values:

application-name – defines the name of the Web application that the page represents.

author – defines the name of the author of the document.

 <meta name="author" content="Web Developer"> 

description – defines a description of the page.

 <meta name="description" content="Web development"> 

generator – defines one of the software packages used to generate the document.

keywords – define a comma-separated list of keywords.

viewport – controls the viewport (the user’s visible area of a web page).

<meta name="viewport" content="width=device-width, initial-scale=1.0">

The viewport varies with the device (will be smaller on a mobile phone than on a computer screen).

An HTML viewport element gives the browser instructions on how to control the page’s dimensions and scaling.

Enjoy coding!

Categories
HTML Web development

HTML datalist tag

The HTML <datalist> tag defines a list of pre-defined options for an <input> element.

HTML datalist tag

The HTML <datalist> element provides “autocomplete” function for <input> elements. Users will see a drop-down list of pre-defined choices as they input data.

The HTML <datalist> tag’s id attribute must be the same as the <input> element’s list attribute (to link them together).

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" method="get">
  <label for="webDev">Choose an option:</label>
  <input list="web-dev" name="web-dev" id="webDev">
  <datalist id="web-dev">
    <option value="HTML"></option>
    <option value="CSS"></option>
    <option value="JavaScript"></option>
    <option value="jQuery"></option>
    <option value="Java"></option>
  </datalist>
  <input type="submit">
</form>

</body>
</html>

Output:

Enjoy coding!

Categories
HTML Web development

HTML form tag

HTML form tag

The HTML <from> tag is creating an HTML form for user input. The HTML form is collecting user input. The user inputs are usually sent to a server for processing.

<form>
.
form elements
.
</form>

The HTML <from> tag can contain the following form elements:

<button> – specifies a clickable button.

<datalist> – defines a list of pre-defined options for input controls.

<fieldset> – groups related elements in a form.

<input> – specifies an input control.

<label> – specifies a label for an <input> element.

<legend> – specifies a caption for a <fieldset> element.

<optgroup> – specifies a group of related options in a drop-down list.

<option> – specifies options in a drop-down list.

<output> – specifies the result of a calculation.

<textarea> – specifies a multiline text area.

<select> – specifies a drop-down list.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
 <fieldset>
  <legend>Details:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="appointment">Appointment:</label>
  <input type="date" id="appointment" name="appointment">
  <input type="submit" value="Submit"><br><br>
 </fieldset>
</form>

</body>
</html>

Output:

Details:







Attributes:

accept-charset (value- character_set) -defines the character encodings for the form submission.

Syntax:

 <form accept-charset="character_set"> 

Example:

<!DOCTYPE html>
<html>
<body>

<form action="" accept-charset="utf-8">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:



Attribute values:

character-set – A space-separated list of one or more character encodings that are to be used for the form submission (UTF-8, ISO-8859-1).

action (value- URL) – defines where to send the form data when a form is submitted.

Syntax:

<form action="URL"> 

Example:

<!DOCTYPE html>
<html>
<body>

<form action="https://lenadesign.org/">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name" name="last-name"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:





Attribute values:

URL – an absolute URL – points to another website (like action=”http://www.example-example.com/example.html&#8221;), a relative URL – points to a file within a website (like action=”example-example.html”).

autocomplete (value- on/off) – defines whether a form should have autocompleted on or off.

Syntax:

<form autocomplete="on|off"> 

Example:

<!DOCTYPE html>
<html>
<body>
    
<p>Fill in and submit the form, then reload the page, start to fill in the form again - and see how autocomplete works.</p>

<form action="" method="get" autocomplete="on">
  <label for="name">Name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="email">Email:</label>
  <input type="text" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output:

Fill in and submit the form, then reload the page, start to fill in the form again – and see how autocomplete works:





Attribute values:

on (default) – the browser will automatically complete values based on values that the user has entered before.

off – the user must enter a value into each field for every use.

enctype (value- application/x-www-form-urlencoded,multipart/form-data, text/plain) – defines how the form-data should be encoded when submitting it to the server.

Syntax:

<form enctype="value"> 

Note: The enctype attribute can be used only for method=”post”.

Example:

<!DOCTYPE html>
<html>
<body>
    
<form action="/" method="post" enctype="multipart/form-data">
  <label for="name">First name:</label>
  <input type="text" id="name" name="name"><br><br>
  <label for="lastname">Last name:</label>
  <input type="text" id="lastname" name="lastname"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:





Attribute values:

application/x-www-form-urlencoded (default) – all characters are encoded before sent.

multipart/form-data – necessary value if the user will upload a file through the form.

text/plain – sends data without any encoding.

method (value- get/post) – defines the HTTP method to use when sending form-data.

Syntax:

<form method="get|post"> 

Example:

<!DOCTYPE html>
<html>
<body>
    
<form action="" method="get" target="_blank">
  <label for="firstName">First name:</label>
  <input type="text" id="firstName" name="firstM=Name"><br><br>
  <label for="lasrName">Last name:</label>
  <input type="text" id="lastName" name="lastName"><br><br>
  <input type="submit" value="Submit">
</form>

</body>
</html>

Output:





Attribute values:

get(default) – appends the form-data to the URL in name/value pairs: URL?name=value&name=value.

post – sends the form data as an HTTP post-transaction.

name (value- text) – defines the name of a form.

Syntax:

<form name="text"> 

Example:

<!DOCTYPE html>
<html>
<head>
<script>
function formSubmit() {
    document.forms["my-form"].submit();
}
</script>
</head>
<body>

<h1>The form name attribute</h1>

<form name="my-form" action="" method="get">
  <label for="name-first">First name:</label>
  <input type="text" id="name-first" name="name-first"><br><br>
  <label for="name-last">Last name:</label>
  <input type="text" id="name-last" name="name-last"><br><br>
  <input type="button" onclick="formSubmit()" value="Send">
</form>

</body>
</html>

Output:





Attribute values:

text– defines the name of a form.

novalidate (value- novalidate) – defines that the form should not be validated when submitted.

Syntax:

<form novalidate> 

Example:

<!DOCTYPE html>
<html>
<head>
</head>
<body>

<form action="" novalidate>
  <label for="email">Enter your email:</label>
  <input type="email" id="email" name="email"><br><br>
  <input type="submit">
</form>

</body>
</html>

Output:



rel (value- external/ help/ license/ next/ nofollow/ noopener/ noreferrer/ opener/ prev/ search) – defines the relationship between a linked resource and the current document.

Syntax:

<form rel="value"> 

Attribute values:

external – defines that the referenced document is not a part of the current site.

help – links to a help document.

license – links to copyright information for the document.

next– the next document in a selection.

nofollow– links to an unendorsed document (like paid links).

noreferrer – defines that the browser should not send an HTTP referrer header if the user follows the hyperlink.

prev – the previous document in a selection.

search – links to a search tool for the document.

target (value- _blank/ _self/ _parent/ _top) – defines where to display the response that is received after submitting the form.

Syntax:

<form target="_blank|_self|_parent|_top"> 

Example:

<!DOCTYPE html>
<html>
<body>

<form action="https://lenadesign.org/" method="get" target="_blank">
  <label for="first-name">First name:</label>
  <input type="text" id="first-name" name="first-name"><br><br>
  <label for="last-name">Last name:</label>
  <input type="text" id="last-name" name="last-name"><br><br>
  <input type="submit" value="Send">
</form>

</body>
</html>

Output:





Attribute values:

_blank – the response is displayed in a new window or tab.

_self (default) – the response is displayed in the same frame.

_parent – the response is displayed in the parent frame.

_top – the response is displayed in the full body of the window.

Enjoy coding!

Categories
HTML Web development

HTML progress tag

HTML progress tag

The HTML <progress> tag expresses the completion progress of a task.

Example:

<!DOCTYPE html>
<html>
<body>

<label for="file">Downloading progress:</label>
<progress id="file" value="38" max="100"> 38% </progress>

</body>
</html>

Output:

38%

Attributes:

max (value- number) -defines how much work the task requires in total, the default value is 1.

value (value- number) – defines how much of the task has been completed.

Note: The HTML <progress> tag is not suitable for expressing a gauge (e.g. disk space usage or relevance of a query result). To express a gauge, use the HTML <meter> tag.

Enjoy coding!

Categories
HTML Web development

HTML meter tag

HTML meter tag

HTML <meter> tag

The HTML <meter> tag specifies a scalar measurement within a known range or a fractional value.

The HTML <meter> tag is used to display a gauge like disk usage, the relevance of a query result, etc.

Example:

<!DOCTYPE html>
<html>
<body>

<label for="disk_c">Disk usage C:</label>
<meter id="disk_c" value="8" min="0" max="10">8 out of 10</meter><br>

<label for="disk_d">Disk usage D:</label>
<meter id="disk_d" value="0.3">30%</meter>

</body>
</html>

Output:

8 out of 10
30%

Attributes:

form (value- form_id) – defines which form the <meter> element belongs to.

height (value- number) – defines the range that is considered to be a high value.

low (value- number) – defines the range that is considered to be a low value.

max (value- number) – defines the maximum value of the range.

min (value- number) – defines the minimum value of the range.

optimum (value- number) – defines what value is the optimal value for the gauge.

value (value- number) – defines the current value of the gauge.

Note: The HTML <meter> tag shouldn’t be used to indicate progress (as in a progress bar). For progress bars, use the <progress> tag.

Enjoy coding!

Categories
HTML Web development

HTML fieldset tag & legend tag

HTML Fieldset tag and legend tag

The HTML <fieldset> tag sets the related elements into group in a form.

The <fieldset> tag draws a box around the related group of elements.

The HTML <legend> tag specifies a caption for the <fieldset> element.

Example:

<!DOCTYPE html>
<html>
<body>

<form action="">
 <fieldset>
  <legend>Details:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="appointment">Appointment:</label>
  <input type="date" id="appointment" name="appointment"><br><br>
 </fieldset>
</form>

</body>
</html>

Output:

Details:







Example2 (Using the CSS to style <fieldset> tag and <legend> tag):

<!DOCTYPE html>
<html>
<head>
<style>
fieldset {
  background-color: #e9c46a;
  border: 3px solid #264653;
}

legend {
  background-color: #264653;
  color: white;
  padding: 5px 10px;
}

input {
  margin: 5px;
}
</style>
</head>
<body>

<form action="">
 <fieldset>
  <legend>Details:</legend>
  <label for="fname">First name:</label>
  <input type="text" id="fname" name="fname"><br><br>
  <label for="lname">Last name:</label>
  <input type="text" id="lname" name="lname"><br><br>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email"><br><br>
  <label for="appointment">Appointment:</label>
  <input type="date" id="appointment" name="appointment"><br><br>
 </fieldset>
</form>

</body>
</html>

Output:

Details:







Attributes (<fieldset> tag):

disabled (value- disabled) – defines that a group of related form elements is disabled.

form (value- form_id) – defines which form the fieldset belongs to.

name (value- text) – defines a name for the fieldset.

Enjoy coding!

Categories
HTML Web development

HTML label tag

HTML label tag

The HTML <label> tag specifies a label for following elements:

<input type=”checkbox”>

<input type=”color”>

<input type=”date”>

<input type=”datetime-local”>

<input type=”email”>

<input type=”file”>

<input type=”month”>

<input type=”number”>

<input type=”password”>

<input type=”radio”>

<input type=”range”>

<input type=”search”>

<input type=”tel”>

<input type=”text”>

<input type=”time”>

<input type=”url”>

<input type=”week”>

<meter>

<progress>

<select>

<textarea>

Example:

<!DOCTYPE html>
<html>
<body>
<div><h3>How many cats do you have?</h3>
  <input type="checkbox" id="one" name="one" value="one">
  <label for="one"> One</label><br>   
  <input type="checkbox" id="vehicle2" name="two" value="two">
  <label for="two"> Two</label><br>     
  <input type="checkbox" id="two" name="three" value="three">
  <label for="three"> Three</label><br>
  <input type="checkbox" id="other" name="other" value="other">
  <label for="other"> Other</label><br>
 
</div>
</body>
</html>

Output:

How many cats do you have?





Note: The for attribute of must be equal to the id attribute of the related elements to link them together.

Attributes:

for (value- element_id) – defines the id of the form element the label should be bound to.

form (value- form_id) – defines which form the label belongs to.

Enjoy coding!

Categories
HTML Web development

HTML output tag

HTML Output tag

The HTML <output> tag is used to represent the result of a calculation performed by a script or user’s interaction with an HTML form element.

Example:

<!DOCTYPE html>
<html>
<body>

<form oninput="calc.value=parseInt(first.value)+parseInt(second.value)">
<input type="range" id="first" value="50">
+<input type="number" id="second" value="20">
=<output name="calc" for="first second"></output>
</form>

</body>
</html>

Output:

+ =

for (value- element_id) – defines the relationship between the result of the calculation, and the elements used in the calculation.

form (value- form_id) – defines which form the output element belongs to

name (value- name) – defines a name for the output element.

Enjoy coding!