AryanSchoolTech: 2018

Wednesday, 4 July 2018

The Importance of Div Tag & Span Tag in HTML

Lets see why the Div tag is considered one of the most important tag while designing the web page layout.

DIV Tag: DIV tag is known as division tag. Div tag does sectional division in the HTML document, by enclosing with large section of HTML elements together in a group. So Div tag is also known as block-level element. Thus we can apply CSS to the whole section of elements by using Div tag. And updation or changes to the CSS script also becomes easy. Use of Div Tag makes the web page to look more presentive and with systematic block contents to avoid misinformation about the webpage or website. <div> is open tag and </div> is closing tag. It also supports Global and Events attributes.

Example:

DIV tag representation

SPAN Tag: SPAN tag makes style changes to small section of the tag's inline content whether it be a text or image content. So Span tag is also known as inline element. <span> is open tag and </span> is closing tag. It supports Global and Events attributes.

Sample Code:

<!DOCTYPE html>
<html>
<head>
<h1>Importance of DIV & Span Tags</h1>
</head>
<body>
<div id= header style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">
Welcome to <a href="https://aryanschooltech.blogspot.com/">AryanSchoolTech !</a><br>
<b>About Div Tag & Span Tag</b>
<div id= nav style="background-color:lime;border:1px solid pink;padding:20px;font-size:20px">navigation </div>
<div class=article style="display: table-cell;width:600px; background-color:orange; border:1px solid pink;padding:20px;font-size:20px">
About Div tag
<div id= section style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">HTML div element is used to wrap large sections of elements.
<img src="images.png" height="200" width="400">
</div>
</div>
<div class=a style="display: table-cell;width:700px;background-color:yellow; border:1px solid pink;padding:20px;font-size:20px">
About Span tag
<div id= section style="background-color:pink;border:1px solid pink;padding:20px;font-size:20px">HTML span element is used to wrap small portion of texts, image etc.
<p>This text has used span element to color the word <span style="color:blue;font-weight:bold;">blue</span> as a style.</p>
<img src="span.jpg" height="100" width="400">
</div>
</div>
<p>Thank You!</p>
</div>
</body>
</html>

OUTPUT:

Use of Div tag and span tag

Monday, 2 July 2018

Three Ways to Insert CSS in HTML document.

To make the CSS script writers or website developer feel comfortable about the inserting ways of CSS script in to HTML document. Each of the three ways of embedding CSS into HTML document has some kind of benefits and convinence. As many developers needs to work as per their client's requirements, so they need to keep in mind the changes/updation of CSS scripts and accordingly uses the particular CSS inserting way.
We can style and design the tags which are enclosed within the <html> tag of the HTML document.
The three ways for embedding CSS are:

External Style
Internal Style
Inline Style

1. External CSS:

External StyleSheet is another way to insert CSS script into the HTML document. In this way there is a insertion of link tag referencing to the source css file which is externally saved as .CSS file formate. The changes or updations made on to the external css file will perform it's effect on the website's HTML document as it has external link to .CSS. External CSS is prefered when there is need of global CSS change of the website. It is used only for global site change.

Code Sample:

Save as the below script by exstyle.css :

h1 {color:blue;}
img {
padding:1px;
border:1px solid #021a40;
background-color:#fffff;
}
h2 {color:red;}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}

Save as the below script by ExternalCSS.html:

<!DOCTYPE html>
<html>
<head><br />
<link rel="stylesheet" type="text/css" href="/Users/natas/OneDrive/Desktop/Desktop/DSJ/SchoolTech/extstyle.css" /><br />
</head>
<body bgcolor = "pink">
<h1 align= "center">Image tag demo</h1>
<img src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 align= "center">Link tag demo</h2>
<a href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>

OUTPUT:

Output for External Stylesheet (ExternalCSS.html)

2. Internal CSS:

Internal Stylesheet is another way to insert CSS script into the HTML document.
In this way the CSS script is inserted (internally) within the STYLE tags of HTML, in between the HTML head element. So even if the developer needs to change/update the script he will only make changes to the script content within the STYLE tags. The changes within the STYLE tags makes effects on the webpages's or site's presentation.

Code Sample:

Save as the below script by InternalCSS.html:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
h1 {color:blue;}
img {
padding:1px;
border:1px solid #021a40;
}
h2 {color:red;}
a:link, a:visited {
color: (internal value);
text-decoration: underline;
cursor: auto;
}
</style>
</head>
<body bgcolor = "pink">
<h1 align= "center">Image tag demo</h1>
<img src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 align= "center">Link tag demo</h2>
<a href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>

OUTPUT:

Output for Internal Stylesheet (InternalCSS.html)

3. Inline CSS:

Inline CSS is another way of embedding CSS into HTML document. In this the CSS script is added inline with the specific HTML tags. Individual tag is styled by using style attribute within the HTML tags. It's use is convinent only then, when there isn't need of reusing the tag style for each webpage of a site and when there is need of individual tag style for every web page.

Code Sample:

Save as the below script by InlineCSS.html:

<!DOCTYPE html>
<html>
<head>
</head>
<body bgcolor = "pink">
<h1 style="color:blue" align= "center">Image tag demo</h1>
<img style="padding:1px;border:1px solid #021a40" src="logo.jpeg" alt="My logo" height="400px" width="600px"></img>
<h2 style="color:red" align= "center">Link tag demo</h2>
<a style="color: (internal value);text-decoration: underline;cursor: auto" href="https://aryanschooltech.blogspot.com/" target="_blank">Visit to my website</a>
</body>
</html>

OUTPUT:

Output for Inline Stylesheet (InlineCSS.html)

The best and common way is to use External CSS link ie. to keep the whole CSS in a separate folder to avoid confusion between the CSS scripts and the HTML code. Also to make global changes and updations in the CSS file to have effective design to whole website at a time. It reduces the style scripting time for each and every web page of a website.

Introduction to CSS

Well, before moving to the Introduction of CSS; I would recommend to just refer the previously written article named as "About JavaScript & CSS3 in HTML" .
CSS is Cascading Style Sheets. I've simplified the meaning and the importance of CSS by giving an actress example. Like about the looking and dressing of an "xyz" actress in her normal days and how the looking and dressing sense changes while attending some celebrations or programs. This is just an analogy to show how simple the HTML structure is before adding CSS and the changes occur to the webpage or website after adding CSS into the HTML document. CSS properties gives refreshing look to the web page. CSS code includes selectors , properties and it's value. Selectors are nothing but the Html tags on which the CSS Styling is done. Properties can be height,width,size,color,style,margin etc. Values are like 400px for height ,400px for width,green for color,etc. CSS has control over font- size,style,color of the selectors . It also controls the website's layout designs and other effects as there is variations in the screen size or Laptop,mobile and other displays. There are three ways to insert CSS into the HTML, do check this article "Three Ways to Insert CSS in HTML document".

HTML vs CSS + HTML

Invention of CSS3:

IT was invented by Håkon Wium Lie on October 10, 1994, he formed CSS3 working group to look after and maintain the CSS documents known as specifications; the group is named as W3C.

W3C members ratified the specification officially and they called it as recommendations. Because the W3C ie. World Wide Web Consortium can't takeover the control they only can recommend about the working of Internet and how it can evovle its structure or design.

About CSS Versions:

CSS1 ie. the level 1 CSS, this version came out in December 1996. It is the official recommendation of the W3C; describes about a simple visual formatting model to all HTML tags.
CSS2 ie next version level of CSS, which came out in May 1998. This version became the W3C recommendation which decribes about the additional features on CSS1 with having support media-specific style sheets e.g. downloadable fonts,printers and aural devices, element positioning and tables.
CSS3 built on older CSS versions, came out in June 1999 ans become the W3C recommendation. This version divided the recommendation into documents and are declared as modules which futher extends it's fetures in CSS2 version.

CSS3 Modules:

Includes new extended module features along with the old moldule specifications.
They are Selectors, Box model, Image Values and Replaced Content,Text Effects,2D/3D Transformations,Backgrounds and Borders,Animations,Multiple Column Layout,User Interface.

Advantages of CSS:

Easy to learn: Easy to understand and easy to learn the CSS language even by a 10th grade school going kid or by a non tech guy.
Pages load faster: Once you wirte a CSS rule for a specific tag then you can reoccur the CSS style for the same HTML element to several different web pages. This behaviour of CSS of reoccurrence of the similar style formate for other webpag's tags when the tags are defined once earlier; leads to load the pages faster as the codesize is less.
Saves time: Apply CSS on each HTML tag, so as to use it in several web pages. You can write CSS once and can reuse the sheet on multiple HTML web pages of a website.Thus it helps to save your time.
Superior styles to HTML:CSS has wider arrays of attributes to design and represent to give the best look to a website. CSS attributes are much better than the HTML attributes in about styling the webpages.
Easy mantainance: When there is need to make global change to a website, then just change/update the CSS rule for various HTML tags. THus it is easy to mantain the CSS design of website.
Multiple Device compatibility: The same CSS code along with the HTML document becomes valid and best for content optimizing, when the website run through several different displays or screen sizes. Different versions of a website can be presented for handheld devices such as PDAs and cell phones or for printing.
Platform Independence: The CSS script can run over various latest browsers and is not a platform specific.
Global Web Standards:Now HTML attributes are deprecated so it is recommended to use CSS. Thus using CSS in all the HTML pages to make them compatible to future browsers.
Offline Browsing: The speciality of CSS that it can store automatically the web applications in the catche. Can view the sites offline and also loads the page quickly.

Thursday, 28 June 2018

Frames, Audio/Video,Lists & Table tags with their attributes

Frames Tag and its attributes:

<frame> Defines a window frame in a frameset. Doesn't supported in HTML5.

frameborder 01 Specifies whether or not to display a border around a frame

longdesc URL A page which contains a long description of the content of a frame

marginheight pixels Specifies the top and bottom margins of a frame

marginwidth pixels Specifies the left and right margins of a frame

name text Specifies the name of a frame

noresize noresize A frame is not resizable

scrolling yes no auto Whether or not to display scrollbars in a frame

src URL States the URL of the document to show

<frameset> Defines a set of frames.Not supported in HTML5.

cols pixels% * Specifies the number and size of columns in a frameset

rows pixels% * Specifies the number and size of rows in a frameset

<noframes> Defines an alternate content for users that do not support frames

<iframe> Supported in HTML5. Defines an inline frame

align left right top middle bottom This attribute not supported in HTML5. States the alignment of an <iframe> according to surrounding elements
frameborder 1 0 Not supported in HTML5. Specifies whether or not to display a border around an <iframe>
height pixels Specifies the height of an <iframe>
longdesc URL Not supported in HTML5. States a page that contains a long description of the content of an <iframe>
marginheight pixels Not supported in HTML5. Specifies the top and bottom margins of the content of an <iframe>
marginwidth pixels Not supported in HTML5. Specifies the left and right margins of the content of an <iframe>
name text Specifies the name of an <iframe>
sandbox allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation Enable an extra set of restrictions for the content in an <iframe>tag
scrolling yes no auto Not supported in HTML5. States whether to display or not the scrollbars in an <iframe> tag
src URL Specifies the address of the document to embed in the <iframe>
srcdoc HTML_code The HTML content of the page to show in the <iframe>tag
width pixels Specifies the width of an <iframe>

Audio/VideoTag and its attributes:

<audio> Defines sound content

autoplay autoplay States that the audio will start playing when it is ready
controls controls States that audio controls should be displayed (such as a play/pause button etc)
loop loop Defines that the audio will start over again, every time it is finished
muted muted The audio output should be muted.
preload auto metadata none States the audio should be loaded when the page loads as per the author's thinking.
src URL States the URL of the audio file

<source> Defines multiple media resources for media elements (<video>, <audio> and <picture>)

src URL Required when <source> is used in <audio> and <video>. Specifies the URL of the media file
srcset URL Required when <source> is used in <picture>. Specifies the URL of the image to use in different situations
media media_query Accepts any valid media query that would normally be defined in a CSS
sizes Specifies image sizes for different page layouts
type MIME-type Specifies the MIME-type of the resource

<track> Defines text tracks for media elements (<video> and <audio>)

default default The track is to be enabled if the user's preferences do not indicate that another track would be more appropriate
kind captions chapters descriptions metadata subtitles Shows the kind of text track
label text Specifies the title of the text track
src URL Required. Specifies the URL of the track file
srclang language_code Specifies the language of the track text data (required if kind="subtitles")

<video> Defines a video or movie

autoplay autoplay States that the video will start playing as soon as it is ready
controls controls States that video controls should be displayed (as play/pause button etc).
height pixels Set the height of the video player in the video tag.
loop loop It means that if the video every time finishes it will start over again.
muted muted The audio output of the video should be muted
poster URL States an image to be shown while the video is downloading, or until the user hits the play button
preload auto metadata none Shows the video should be loaded when the page loads as per the authour thinkings
src URL Specifies the URL of the video file.
width pixels To set the video player's width.

List Tag and its attributes:

<ul> Defines an unordered list. Not supported in HTML5.

compact compact That the list to be render smaller than normal.

type disc square circle Specifies the kind of marker to use in the list

<ol> Defines an ordered list

compact compact Not supported in HTML5. States that the list to be rendered smaller than normal.

reversed reversed Specifies that the list order should be descending.

start number Specifies the start value of an ordered list

type 1 A a I i Specifies the kind of marker to use in the list

<li> Defines a list item

type 1 A a I i disc square circle Not supported in HTML5. Defines which kind of bullet point will be used

value number Specifies the value of a list item. The list items will increment from that specified number (only for <ol> lists)

<dir> Not supported in HTML5. Use <ul> instead.Defines a directory list. Not supported in HTML 5

compact compact Specifies that the list should render smaller than normal

<dl> Defines a description list. Supports global and event attributes.

<dt> Defines a term/name in a description list. Supports global and event attributes.

<dd> Gives a description of a term/name in a description list. Supports global and event attributes.

Table Tag and its attributes:

<table> Defines a table. Doesn't supported in HTML5.

align left center right It aligns the table according to surrounding text.
bgcolor rgb(x,x,x) #xxxxxx colorname Defines the table's background color.
border 1 0 It defines whether or not the table is being used for layout purposes
cellpadding pixels Specifies the space between the cell wall and the cell content
cellspacing pixels Specifies the space between cells
frame void above below hsides lhs rhs vsides box . Specifies which parts of the outside borders that should be visible
rules none groups rows cols all States which parts of the inside borders that should be visible
summary text Specifies a summary of the content of a table
width pixels % Specifies the width of a table

<caption> Defines a table caption. Not supported in HTML5.

align left right top bottom Defines the alignment of the caption

<th> Defines a header cell in a table. Not supported in HTML5.

abbr text Supports in HTML5. Indicates an abbreviated version of the header cell 's content.
align left right center justify char Aligns the header cell's content.
axis category_name Categorizes header cells
bgcolor rgb(x,x,x) #xxxxxx colorname States the background color of a header cell
char character Aligns the content in a header cell to a character
charoff number Sets the no.of characters that the content will be aligned from the character specified.
colspan number Supports in HTML5. Defines the number of columns a header cell should span
headers header_id Supports in HTML5. Specifies one or more header cells a cell is related to
height pixels % Sets the header cell's height.
nowrap nowrap Specifies that the content inside a header cell should not wrap
rowspan number Supports in HTML5.Specifies the number of rows a header cell should span
scope col colgroup row rowgroup Supports in HTML5. States whether a header cell is a header for a row, column, or group of columns or rows.
sorted reversed number reversednumber numberreversed Supports in HTML5. Which defines the sort direction of a column
valign top middle bottom baseline Vertical aligns the content in a header cell
width pixels % Specifies the width of a header cell

<tr> Defines a row in a table. Not supported in HTML5.

align right left center justify Aligns the table row's contents.
bgcolor rgb(x,x,x) #xxxxxx colorname States a background color for a table row
char character Aligns the content in a table row to a character
charoff number Can sets the number of characters the content will be aligned from the character.
valign top middle bottom baseline Vertical aligns the content in a table row

<td> Defines a cell in a table. Not supported in HTML5.

abbr text Indicates an abbreviated version of cell's content.
align left right center justify char That aligns the cell content.
axis category_name Categorizes cells
bgcolor rgb(x,x,x) #xxxxxx colorname The cell's background color
char character Supports in HTML5. Aligns the content in a cell to a character.
charoff number Sets the number of characters and the content will be aligned from the character.
colspan number Supports in HTML5. States the number of columns a cell should span
headers header_id Supports in HTML5. Specifies one or more header cells which are related.
height pixels % Sets the height of a cell
nowrap nowrap Supports in HTML5. Specifies that it should not wrap the content inside a cell.
rowspan number Supports in HTML5. Sets the number of rows a cell should span.
scope col colgroup row rowgroup Association of header cells and data cells in a table.
valign top middle bottom baseline Vertical aligns the content in a cell
width pixels % Specifies the width of a cell

<thead> Groups the header content in a table. Not supported in HTML5.

align right left center justify char Aligns the content inside the <thead> element
char character Aligns the content inside the <thead> element to a character
charoff number The no. of characters and the tfoot tag's content will be aligned from the character.
valign top middle bottom baseline Vertical aligns the content inside the <thead> element

<tbody> Groups the body content in a table. Not supported in HTML5.

align right left center justify char Aligns the content inside the <tbody> element
char character Aligns the content inside the <tbody> element to a character
charoff number Sets the number of characters and the content inside the <tbody> tag will be aligned.
valign top middle bottom baseline Vertical aligns the content inside the <tbody> element

<tfoot> Groups the footer content in a table. Not supported in HTML5.

align right left center justify char Aligns the content inside the <tfoot> element
char character Aligns the content inside the <tfoot> element to a character
charoff number The number of characters and the content inside the tfoot tag will be aligned from the character.
valign top middle bottom baseline Vertical aligns the content inside the <tfoot> element

<col> Defines column properties for each column within a <colgroup> tag. Not supported in HTML5.

align left right center justify char Specifies the alignment of the content related to a <col> element
char character Specifies the alignment of the content related to a <col> element to a character
charoff number The number of characters the content will be aligned from the character specified by the char attribute
span number Supports in HTML5. Also defines the number of columns a <col> element should span
valign top middle bottom baseline States the vertical alignment of the content related to a <col>tag
width % pixels relative_length Specifies the width of a <col> element

<colgroup> States a group of one or more columns in a table for formatting. Not supported in HTML5.

align left right center justify char To align the content in a column group
char character Aligns the column group's content to a character
charoff number That which sets the number of characters so the content will be aligned from the character.
span number Supports in HTML5. States the number of columns a column group should span
valign top middle bottom baseline Vertical aligns the content in a column group
width pixels % relative_length Specifies the width of a column group

Wednesday, 27 June 2018

HTML Forms & Inputs Tags with their Attributes.

Forms & Inputs Tags with Attributes:

<form> Defines an HTML form for user input. Supports global and event attributes.

Attributes:

accept file_type Not supported in HTML5. Defines a comma-separated list of file types that the server accepts (which can be submitted through the file upload)
accept-charset character_set Defines the character encodings that are to be used for the form submission
action URL Specifies where to send the form-data when a form is submitted
autocomplete on off Specifies whether a form should have autocomplete on or off
enctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (only for method="post")
method get post Specifies the HTTP method to use when sending form-data
name text Specifies the name of a form
novalidate novalidate Defines the form that should not be validated when submitted
target _blank _self _parent _top States that where to display the response which is received after submitting the form

<input> Defines an input control. Supports global and event attributes.

Attributes:

accept file_extension audio/* video/* image/* media_type Specifies the types of files that the server accepts (only for type="file")
align left right top middle bottom Not supported in HTML5. States the alignment of an image input (only for type="image")
alt text Specifies an alternate text for images (only for type="image")
autocomplete on off States whether an <input> tag should have autocomplete enabled
autofocus autofocus Specifies that an <input> element should automatically get focus when the page loads
checked checked States that an <input> element should be pre-selected when the page loads (only for type="checkbox" or type="radio")
dirname inputname.dir Specifies that the text direction will be submitted
disabled disabled Specifies that an <input> element should be disabled
form form_id Specifies one or more forms the <input> element belongs to
formaction URL States the URL of the file that will process the input control when the form is submitted (only for type="submit" and type="image")
formenctype application/x-www-form-urlencoded multipart/form-data text/plain Specifies how the form-data should be encoded when submitting it to the server (for type="submit" and type="image")
formmethod get post Defines the HTTP method for sending data to the action URL (only for type="submit" and type="image")
formnovalidate formnovalidate Defines that form elements should not be validated when submitted
formtarget _blank _self _parent _top framename Defines where to display the response that is received after submitting the form (only for type="submit" and type="image")
height pixels Specifies the height of an <input> element (only for type="image")
list datalist_id Refers to a <datalist> element that contains pre-defined options for an <input> element
max number date Specifies the maximum value for an <input> element
maxlength number Specifies the maximum number of characters allowed in an <input> element
min number date States a minimum value for an <input> tag
multiple multiple Specifies that a user can enter more than one value in an <input> element
name text Specifies the name of an <input> element
pattern regexp Specifies a regular expression that an <input> element's value is checked against
placeholder text Defines a short hint that describes the expected value of an <input> tag
readonly readonly Specifies that an input field is read-only
required required States that an input field must be filled out before submitting the form
size number States the width, in characters, of an <input> tag
src URL States the URL of the image to use as a submit button (only for type="image")
step number Specifies the legal number intervals for an input field
type button checkbox color date datetime-local email file hidden image month number password radio range reset search submit tel text time url week States the type <input> tag to display
value text Specifies the value of an <input> element
width pixels Specifies the width of an <input> element (only for type="image")

<textarea> Defines a multiline input control (text area). Supports global and event attributes.

Attributes:

autofocus autofocus Specifies that a text area should automatically get focus when the page loads
cols number Specifies the visible width of a text area
dirname textareaname.dir Specifies that the text direction of the textarea will be submitted
disabled disabled Specifies that a text area should be disabled
form form_id Specifies one or more forms the text area belongs to
maxlength number Specifies the maximum number of characters allowed in the text area
name text Specifies a name for a text area
placeholder text Specifies a short hint that describes the expected value of a text area
readonly readonly Specifies that a text area should be read-only
required required Specifies that a text area is required/must be filled out
rows number Specifies the visible number of lines in a text area
wrap hard soft States how the text in a text area is to be wrapped when submitted in a form

<button> Defines a clickable button. Supports global and event attributes.

Attributes:

autofocus autofocus States that a button should automatically get focus when the page loads
disabled disabled Specifies that a button should be disabled
form form_id States that one or more forms the button belongs to
formaction URL Specifies where to send the form-data when a form is submitted. Only for type="submit"
formenctype application/x-www-form-urlencoded multipart/form-data text/plain States how form-data should be encoded before sending it to a server. For type="submit"
formmethod get post Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
formnovalidate formnovalidate Defines that the form-data should not be validated on submission. Only for type="submit"
formtarget _blank _self _parent _top framename Specifies where to display the response after submitting the form. Only for type="submit"
name name Specifies a name for the button
type button reset submit Specifies the type of button
value text Specifies an initial value for the button

<select> Defines a drop-down list. Supports global and event attributes.

Attributes:

autofocus autofocus Specifies that the drop-down list should automatically get focus when the page loads
disabled disabled States that a drop-down list should be disabled
form form_id Defines one or more forms the select field belongs to
multiple multiple States that multiple options can be selected at once
name name Defines a name for the drop-down list
required required States that the user is required to select a value before submitting the form
size number Defines the number of visible options in a drop-down list

<optgroup> Defines a group of related options in a drop-down list. Supports global and event attributes.

Attributes:

disabled disabled Specifies that an option-group should be disabled
label text Defines a label for an option-group

<option> Defines an option in a drop-down list. Supports global and event attributes.

Attributes:

disabled disabled Specifies that an option should be disabled
label text Specifies a shorter label for an option
selected selected Specifies that an option should be pre-selected when the page loads
value text Specifies the value to be sent to a server

<label> Defines a label for an <input> element. Supports global and event attributes.

Attributes:

for element_id Specifies which form element a label is bound to
form form_id States that one or more forms the label belongs to

<fieldset> Groups related elements in a form. Supports global and event attributes.

Attributes:

disabled disabled Defines that a group of related form elements should be disabled
form form_id Specifies one or more forms the fieldset belongs to
name text States a name for the fieldset

<legend> Defines a caption for a <fieldset> element. Supports global and event attributes.

Attributes:

align top bottom left right Not supported in HTML5.Specifies the alignment of the caption

<datalist> Specifies a list of pre-defined options for input controls

<output> Defines the result of a calculation. Supports global and event attributes.

Attributes:

for element_id States that the relationship between the result of the calculation, and the elements used in the calculation
form form_id States one or more forms to which the output element belongs to
name name Specifies a name for the output element

Sample Form code: (Save sample form as formcode.html)

<html>
<body>
<form style="background-color:orange">
<fieldset>
<legend>
Admission Form
</legend>
Enter your First Name:
<input name="firstname" placeholder="First Name" type="text">
<br><br>
Enter your Last Name:
<input name="firstname" placeholder="Last Name" type="text">
<br><br>
Enter your Date Of Birth:
<input name="firstname" type="date">
<br><br>
Enter your Password:
<input type="password" placeholder="password" >
<br><br>
Choose Your gender:
<input type="radio" name="sex" value="male" > Male
<input type="radio" name="sex" value="male" > Female
<br><br>
Cource<br>
<input type="checkbox" name="cource" value="html" > HTML<br>
<input type="checkbox" name="cource" value="html" > CSS<br>
<input type="checkbox" name="cource" value="html" > BOOTSTRAP<br>
<input type="checkbox" name="cource" value="html" > PHP
<p>The select element defines a drop-down list:</p>
<br><br>
Address
<br>
<textarea rows="4" cols="50">

</textarea>
<br>

Select Car
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat">Fiat</option>
<option value="audi">Audi</option>
</select>
<br><br>

<input type="submit">
<button type="button" onclick="alert ('Your Form Sumbit ')">Save</button>
<button type="reset">Cancel</button>
</fieldset>
</form>
</body>
</html>

OUTPUT :

Tuesday, 26 June 2018

HTML Global Event Attributes

Events triggers the actions with the help of mouse click like we have in JavaScript. To define events action in HTML we have Global Event Attributes that are added to any HTML elements(tags).

In HTML we have several Events that are:

Window Events: Window Events Attributes are used to trigger the events for windows objects. Supported to only HTML Tag: <body>
Attributes:
onafterprint script Script to be run after the document is printed
<element onafterprint="script">
The script to be run on onafterprint

onbeforeprint script Script to be run before the document is printed
<element onbeforeprint="script">
The script to be run on onbeforeprint

onbeforeunload script Script to be run when the document is about to be unloaded
<element onbeforeunload="script">
The script to be run on onbeforeunload

onerror script Script to be run when an error occurs
<element onerror="script">
The script to be run on onerror

onhashchange script Script to be run when there has been changes to the anchor part of the a URL
<element onhashchange="script">
The script to be run on onhashchange

onload script Fires after the page is finished loading
<element onload="script">
The script to be run on onload

onmessage script Script to be run when the message is triggered

onoffline script Script to be run when the browser starts to work offline
<element onoffline="script">
The script to be run on onoffline

ononline script Script to be run when the browser starts to work online
<element ononline="script">
The script to be run on ononline

onpagehide script Script to be run when a user navigates away from a page

onpageshow script Script to be run when a user navigates to a page
<element onpageshow="script">
The script to be run on onpageshow

onpopstate script Script to be run when the window's history changes

onresize script Fires when the browser window is resized
<element onresize="script">
The script to be run on onresize

onstorage script Script to be run when a Web Storage area is updated

onunload script Fires once a page has unloaded (or the browser window has been closed)
<element onunload="script">
The script to be run on onunload

Form Events:
Attributes:
onblur script Fires the moment that the element loses focus
<element onblur="script">
The script to be run on onblur

Supports all HTML tags:	EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

onchange script Fires the moment when the value of the element is changed
<element onchange="script">
script The script to be run on onchange

Supports HTML tags:	<input type="checkbox">, <input type="file">, <input type="password">, <input type="radio">, <input type="range">, <input type="search">, <input type="text">, <select> and <textarea>

oncontextmenu script Script to be run when a context menu is triggered
<element oncontextmenu="script">
The script to be run on oncontextmenu

onfocus script Fires the moment when the element gets focus
<element onfocus="script">
The script to be run on onfocus

Supports all HTML tags:	EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

oninput script Script to be run when an element gets user input
<element oninput="script">
The script to be run on oninput

Supported HTML tags:	<input type="password">, <input type="search">, <input type="text"> and <textarea>

oninvalid script Script to be run when an element is invalid
<element oninvalid="script">
The script to be run on oninvalid

Supported HTML tags:	<input>

onreset script Fires when the Reset button in a form is clicked
<element onreset="script">
The script to be run on onreset

Supported HTML tags:	<form>

onsearch script Fires when the user writes something in a search field (for <input="search">)
<element onsearch="script">
The script to be run on onsearch

Supported HTML tags:	<input type="search">

onselect script Fires after some text has been selected in an element
<element onselect="script">
The script to be run on onselect

Supported HTML tags:	<input type="file">, <input type="password">, <input type="text">, and <textarea>

onsubmit script Fires when a form is submitted
<element onsubmit="script">
The script to be run on onsubmit

Supported HTML tags:	<form>

Keyboard Events:

Supports all HTML tags:	EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

onkeydown script Fires when a user is pressing a key
<element onkeydown="script">
The script to be run on onkeydown

onkeypress script Fires when a user presses a key
<element onkeypress="script">
script The script to be run on onkeypress

onkeyup script Fires when a user releases a key
<element onkeyup="script">
script The script to be run on onkeyup

Mouse Events:

Supports all HTML tags:	EXCEPT: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, and <title>

onclick script Fires on a mouse click on the element
<element  onclick="script">
The script to be run on onclick

ondblclick   script Fires on a mouse double-click on the element
<element ondblclick="script">
The script to be run on ondblclick

onmousemove script Fires when the mouse pointer is moving while it is over an element
<element  onmousemove="script">
The script to be run on onmousemove

onmousedown script Fires when a mouse button is pressed down on an element
<element onmousedown="script">
The script to be run on onmousedown

onmouseout script Fires when the mouse pointer moves out of an element
<element onmouseout="script">
The script to be run on onmouseout

onmouseover script Fires when the mouse pointer moves over an element
<element onmouseover="script">
The script to be run on onmouseover

onmouseup script Fires when a mouse button is released over an element
<element onmouseup="script">
The script to be run on onmouseup

onmousewheel script Deprecated. Use the onwheel attribute instead
<element onmousewheel="script">
The script to be run on onmousewheel

onwheel script Fires when the mouse wheel rolls up or down over an element
<element onwheel="script">
The script to be run on onwheel
Supports all HTML Tags

Drag Events: Supported all HTML Tags
ondrag script Script to be run when an element is dragged
<element ondrag="script">
The script to be run on ondrag

ondragend script Script to be run at the end of a drag operation
<element ondragend="script">
The script to be run on ondragend

ondragenter script Script to be run when an element has been dragged to a valid drop target
<element ondragenter="script">
The script to be run on ondragenter

ondragleave script Script to be run when an element leaves a valid drop target
<element ondragleave="script">
The script to be run on ondragleave

ondragover script Script to be run when an element is being dragged over a valid drop target
<element ondragover="script">
The script to be run on ondragover

ondragstart script Script to be run at the start of a drag operation
<element ondragstart="script">
The script to be run on ondragstart

ondrop script Script to be run when dragged element is being dropped
<element ondrop="script">
The script to be run on ondrop

onscroll script Script to be run when an element's scrollbar is being scrolled
<element onscroll="script">
The script to be run on onscroll

Supported HTML tags:	<address>, <blockquote>, <body>, <caption>, <center>, <dd>, <dir>, <div>, <dl>, <dt>, <fieldset>, <form>, <h1> to <h6>, <html>, <li>, <menu>, <object>, <ol>, <p>, <pre>, <select>, <tbody>, <textarea>, <tfoot>, <thead>, <ul>

Clipboard Events: Supported all HTML Tags
oncopy script Fires when the user copies the content of an element
<element oncopy="script">
The script to be run on oncopy

oncut script Fires when the user cuts the content of an element
<element oncut="script">
The script to be run on oncut

onpaste script Fires when the user pastes some content in an element
<element onpaste="script">
The script to be run on onpaste

Media Events: Media events triggers the media audio,video,images and gets supported with all HTML tags but commonly with <audio>, <embed>, <img>, <object>, and <video>

onabort script Script to be run on abort
oncanplay script Script to be run when a file is ready to start playing (when it has buffered enough to begin)
oncanplaythrough script Script to be run when a file can be played all the way to the end without pausing for buffering
oncuechange script Script to be run when the cue changes in a <track> element
ondurationchange script Script to be run when the length of the media changes
onemptied script Script to be run when something bad happens and the file is suddenly unavailable (like unexpectedly disconnects)
onended script Script to be run when the media has reach the end (a useful event for messages like "thanks for listening")
onerror script Script to be run when an error occurs when the file is being loaded
onloadeddata script Script to be run when media data is loaded
onloadedmetadata script Script to be run when meta data (like dimensions and duration) are loaded
onloadstart script Script to be run just as the file begins to load before anything is actually loaded
onpause script Script to be run when the media is paused either by the user or programmatically
onplay   script Script to be run when the media is ready to start playing
onplaying   script Script to be run when the media actually has started playing
onprogress script Script to be run when the browser is in the process of getting the media data
onratechange script Script to be run each time the playback rate changes (like when a user switches to a slow motion or fast forward mode)
onseeked script Script to be run when the seeking attribute is set to false indicating that seeking has ended
onseeking script Script to be run when the seeking attribute is set to true indicating that seeking is active
onstalled script Script to be run when the browser is unable to fetch the media data for whatever reason
onsuspend script Script to be run when fetching the media data is stopped before it is completely loaded for whatever reason
ontimeupdate  script Script to be run when the playing position has changed (like when the user fast forwards to a different point in the media)
onvolumechange   script Script to be run each time the volume is changed which (includes setting the volume to "mute")
onwaiting script Script to be run when the media has paused but is expected to resume (like when the media pauses to buffer more data)

Misc Events:
ontoggle script Fires when the user opens or closes the <details> element

Supported HTML tag:	<details>

Topics

Wednesday, 4 July 2018

The Importance of Div Tag & Span Tag in HTML

Monday, 2 July 2018

Three Ways to Insert CSS in HTML document.

1. External CSS:

Code Sample:

2. Internal CSS:

Code Sample:

3. Inline CSS:

Code Sample:

Introduction to CSS

Invention of CSS3:

About CSS Versions:

CSS3 Modules:

Advantages of CSS:

Thursday, 28 June 2018

Frames, Audio/Video,Lists & Table tags with their attributes

Frames Tag and its attributes:

Audio/VideoTag and its attributes:

List Tag and its attributes:

Table Tag and its attributes:

Wednesday, 27 June 2018

HTML Forms & Inputs Tags with their Attributes.

Forms & Inputs Tags with Attributes:

Sample Form code: (Save sample form as formcode.html)

OUTPUT :

Tuesday, 26 June 2018

HTML Global Event Attributes

Recent Blog

About Me