Friday, 21 December 2018

               13part html
9333399663399993399CC3399FF
33CC0033CC3333CC6633CC9933CCCC33CCFF
33FF0033FF3333FF6633FF9933FFCC33FFFF
6600006600336600666600996600CC6600FF
6633006633336633666633996633CC6633FF
6666006666336666666666996666CC6666FF
6699006699336699666699996699CC6699FF
66CC0066CC3366CC6666CC9966CCCC66CCFF
66FF0066FF3366FF6666FF9966FFCC66FFFF
9900009900339900669900999900CC9900FF
9933009933339933669933999933CC9933FF
9966009966339966669966999966CC9966FF
9999009999339999669999999999CC9999FF
99CC0099CC3399CC6699CC9999CCCC99CCFF
99FF0099FF3399FF6699FF9999FFCC99FFFF
CC0000CC0033CC0066CC0099CC00CCCC00FF
CC3300CC3333CC3366CC3399CC33CCCC33FF
CC6600CC6633CC6666CC6699CC66CCCC66FF
CC9900CC9933CC9966CC9999CC99CCCC99FF
CCCC00CCCC33CCCC66CCCC99CCCCCCCCCCFF
CCFF00CCFF33CCFF66CCFF99CCFFCCCCFFFF
FF0000FF0033FF0066FF0099FF00CCFF00FF
FF3300FF3333FF3366FF3399FF33CCFF33FF
FF6600FF6633FF6666FF6699FF66CCFF66FF
FF9900FF9933FF9966FF9999FF99CCFF99FF
FFCC00FFCC33FFCC66FFCC99FFCCCCFFCCFF
FFFF00FFFF33FFFF66FFFF99FFFFCCFFFFFF

HTML - Fonts

Fonts play a very important role in making a website more user friendly and increasing content readability. Font face and color depends entirely on the computer and browser that is being used to view your page but you can use HTML <font> tag to add style, size, and color to the text on your website. You can use a <basefont> tag to set all of your text to the same size, face, and color.
The font tag is having three attributes called size, color, and face to customize your fonts. To change any of the font attributes at any time within your webpage, simply use the <font> tag. The text that follows will remain changed until you close with the </font> tag. You can change one or all of the font attributes within one <font> tag.
Note −The font and basefont tags are deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will explain font and basefont tags in detail.

Set Font Size

You can set content font size using size attribute. The range of accepted values is from 1(smallest) to 7(largest). The default size of a font is 3.

Example

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>
This will produce the following result −

Relative Font Size

You can specify how many sizes larger or how many sizes smaller than the preset font size should be. You can specify it like <font size = "+n"> or <font size = "−n">

Example

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>
This will produce the following result −

Setting Font Face

You can set font face using face attribute but be aware that if the user viewing the page doesn't have the font installed, they will not be able to see it. Instead user will see the default font face applicable to the user's computer.

Example

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>
This will produce the following result −
possible to specify two or more font face alternatives by listing the font face names, separated by a comma.
<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">
When your page is loaded, their browser will display the first font face available. If none of the given fonts are installed, then it will display the default font face Times New Roman.
Note − Check a complete list of HTML Standard Fonts.

Setting Font Color

You can set any font color you like using colorattribute. You can specify the color that you want by either the color name or hexadecimal code for that color.
Note − You can check a complete list of HTML Color Name with Codes.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
 
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
 
</html>
This will produce the following result −

The <basefont> Element

The <basefont> element is supposed to set a default font size, color, and typeface for any parts of the document that are not otherwise contained within a <font> tag. You can use the <font> elements to override the <basefont> settings.
The <basefont> tag also takes color, size and face attributes and it will support relative font setting by giving size a value of +1 for a size larger or −2 for two sizes smaller.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
 
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
 
</html>
This will produce the following result −
two sizes smaller.

Example

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
 
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
 
</html>
This will produce the following result −

HTML - Forms

HTML Forms are required, when you want to collect some data from the site visitor. For example, during user registration you would like to collect information such as name, email address, credit card, etc.
A form will take input from the site visitor and then will post it to a back-end application such as CGI, ASP Script or PHP script etc. The back-end application will perform required processing on the passed data based on defined business logic inside the application.
There are various form elements available like text fields, textarea fields, drop-down menus, radio buttons, checkboxes, etc.
The HTML <form> tag is used to create an HTML form and it has following syntax −
<form action = "Script URL" method = "GET|POST">
   form elements like input, textarea etc.
</form>

Form Attributes

Apart from common attributes, following is a list of the most frequently used form attributes −
Sr.NoAttribute & Description
1
action
Backend script ready to process your passed data.
2
method
Method to be used to upload data. The most frequently used are GET and POST methods.
3
target
Specify the target window or frame where the result of the script will be displayed. It takes values like _blank, _self, _parent etc.
4
enctype
You can use the enctype attribute to specify how the browser encodes the data before it sends it to the server. Possible values are −
application/x-www-form-urlencoded − This is the standard method most forms use in simple scenarios.
mutlipart/form-data − This is used when you want to upload binary data in the form of files like image, word file etc.
Note − You can refer to Perl & CGI for a detail on how form data upload works.

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form −
  • Text Input Controls
  • Checkboxes Controls
  • Radio Box Controls
  • Select Box Controls
  • File Select boxes
  • Hidden Controls
  • Clickable Buttons
  • Submit and Reset Button

Text Input Controls

There are three types of text input used on forms −
  • Single-line text input controls − This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.
  • Password input controls − This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTMl <input> tag.
  • Multi-line text input controls − This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Single-line text input controls

This control is used for items that require only one line of user input, such as search boxes or names. They are created using HTML <input> tag.

Example

Here is a basic example of a single-line text input used to take first name and last name −
<!DOCTYPE html>
<html>

   <head>
      <title>Text Input Control</title>
   </head>
 
   <body>
      <form >
         First name: <input type = "text" name = "first_name" />
         <br>
         Last name: <input type = "text" name = "last_name" />
      </form>
   </body>
 
</html>
This will produce the following result −

Attributes

Following is the list of attributes for <input> tag for creating text field.
Sr.NoAttribute & Description
1
type
Indicates the type of input control and for text input control it will be set to text.
2
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
3
value
This can be used to provide an initial value inside the control.
4
size
Allows to specify the width of the text-input control in terms of characters.
5
maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Password input controls

This is also a single-line text input but it masks the character as soon as a user enters it. They are also created using HTML <input>tag but type attribute is set to password.

Example

Here is a basic example of a single-line password input used to take user password −
<!DOCTYPE html>
<html>

   <head>
      <title>Password Input Control</title>
   </head>
 
   <body>
      <form >
         User ID : <input type = "text" name = "user_id" />
         <br>
         Password: <input type = "password" name = "password" />
      </form>
   </body>
 
</html>
This will produce the following result −

Attributes

Following is the list of attributes for <input> tag for creating password field.
Sr.NoAttribute & Description
1
type
Indicates the type of input control and for password input control it will be set to password.
2
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
3
value
This can be used to provide an initial value inside the control.
4
size
Allows to specify the width of the text-input control in terms of characters.
5
maxlength
Allows to specify the maximum number of characters a user can enter into the text box.

Multiple-Line Text Input Controls

This is used when the user is required to give details that may be longer than a single sentence. Multi-line input controls are created using HTML <textarea> tag.

Example

Here is a basic example of a multi-line text input used to take item description −
<!DOCTYPE html>
<html>

   <head>
      <title>Multiple-Line Input Control</title>
   </head>
 
   <body>
      <form>
         Description : <br />
         <textarea rows = "5" cols = "50" name = "description">
            Enter description here...
         </textarea>
      </form>
   </body>
 
</html>
This will produce the following result −

Attributes

Following is the list of attributes for <textarea> tag.
Sr.NoAttribute & Description
1
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
2
rows
Indicates the number of rows of text area box.
3
cols
Indicates the number of columns of text area box

Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox..

Example

Here is an example HTML code for a form with two checkboxes −
<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
 
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
 
</html>
This will produce the following result −

Attributes

Following is the list of attributes for <checkbox> tag.
Sr.NoAttribute & Description
1
type
Indicates the type of input control and for checkbox input control it will be set to checkbox..
2
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
3
value
The value that will be used if the checkbox is selected.
4
checked
Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

Example

Here is example HTML code for a form with two radio buttons −
<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>
This will produce the following result −
2
rows
Indicates the number of rows of text area box.
3
cols
Indicates the number of columns of text area box

Checkbox Control

Checkboxes are used when more than one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to checkbox..

Example

Here is an example HTML code for a form with two checkboxes −
<!DOCTYPE html>
<html>

   <head>
      <title>Checkbox Control</title>
   </head>
 
   <body>
      <form>
         <input type = "checkbox" name = "maths" value = "on"> Maths
         <input type = "checkbox" name = "physics" value = "on"> Physics
      </form>
   </body>
 
</html>
This will produce the following result −

Attributes

Following is the list of attributes for <checkbox> tag.
Sr.NoAttribute & Description
1
type
Indicates the type of input control and for checkbox input control it will be set to checkbox..
2
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
3
value
The value that will be used if the checkbox is selected.
4
checked
Set to checked if you want to select it by default.

Radio Button Control

Radio buttons are used when out of many options, just one option is required to be selected. They are also created using HTML <input> tag but type attribute is set to radio.

Example

Here is example HTML code for a form with two radio buttons −
<!DOCTYPE html>
<html>

   <head>
      <title>Radio Box Control</title>
   </head>

   <body>
      <form>
         <input type = "radio" name = "subject" value = "maths"> Maths
         <input type = "radio" name = "subject" value = "physics"> Physics
      </form>
   </body>

</html>
This will produce the following result −

Attributes

Following is the list of attributes for radio button.
Sr.NoAttribute & Description
1
type
Indicates the type of input control and for checkbox input control it will be set to radio.
2
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
3
value
The value that will be used if the radio box is selected.
4
checked
Set to checked if you want to select it by default.

Select Box Control

A select box, also called drop down box which provides option to list down various options in the form of drop down list, from where a user can select one or more options.

Example

Here is example HTML code for a form with one drop down box
<!DOCTYPE html>
<html>

   <head>
      <title>Select Box Control</title>
   </head>
 
   <body>
      <form>
         <select name = "dropdown">
            <option value = "Maths" selected>Maths</option>
            <option value = "Physics">Physics</option>
         </select>
      </form>
   </body>
 
</html>
This will produce the following result −

Attributes

Following is the list of important attributes of <select> tag −
Sr.NoAttribute & Description
1
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
2
size
This can be used to present a scrolling list box.
3
multiple
If set to "multiple" then allows a user to select multiple items from the menu.
Following is the list of important attributes of <option> tag −
Sr.NoAttribute & Description
1
value
The value that will be used if an option in the select box box is selected.
2
selected
Specifies that this option should be the initially selected value when the page loads.
3
label
An alternative way of labeling options

File Upload Box

If you want to allow a user to upload a file to your web site, you will need to use a file upload box, also known as a file select box. This is also created using the <input> element but type attribute is set to file.

Example

Here is example HTML code for a form with one file upload box −
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <input type = "file" name = "fileupload" accept = "image/*" />
      </form>
   </body>
 
</html>
This will produce the following result −

Attributes

Following is the list of important attributes of file upload box −
Sr.NoAttribute & Description
1
name
Used to give a name to the control which is sent to the server to be recognized and get the value.
2
accept
Specifies the types of files that the server accepts.

Button Controls

There are various ways in HTML to create clickable buttons. You can also create a clickable button using <input>tag by setting its type attribute to button. The type attribute can take the following values −
Sr.NoType & Description
1
submit
This creates a button that automatically submits a form.
2
reset
This creates a button that automatically resets form controls to their initial values.
3
button
This creates a button that is used to trigger a client-side script when the user clicks that button.
4
image
This creates a clickable button but we can use an image as background of the button.

Example

Here is example HTML code for a form with three types of buttons −
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>
 
   <body>
      <form>
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
         <input type = "button" name = "ok" value = "OK" />
         <input type = "image" name = "imagebutton" src = "/html/images/logo.png" />
      </form>
   </body>
 
</html>
This will produce the following result −

Hidden Form Controls

Hidden form controls are used to hide data inside the page which later on can be pushed to the server. This control hides inside the code and does not appear on the actual page. For example, following hidden form is being used to keep current page number. When a user will click next page then the value of hidden control will be sent to the web server and there it will decide which page will be displayed next based on the passed current page.

Example

Here is example HTML code to show the usage of hidden control −
<!DOCTYPE html>
<html>

   <head>
      <title>File Upload Box</title>
   </head>

   <body>
      <form>
         <p>This is page 10</p>
         <input type = "hidden" name = "pagename" value = "10" />
         <input type = "submit" name = "submit" value = "Submit" />
         <input type = "reset" name = "reset"  value = "Reset" />
      </form>
   </body>
 
</html>
This will produce the following result −

HTML - Embed Multimedia

Sometimes you need to add music or video into your web page. The easiest way to add video or sound to your web site is to include the special HTML tag called <embed>. This tag causes the browser itself to include controls for the multimedia automatically provided browser supports <embed> tag and given media type.
You can also include a <noembed> tag for the browsers which don't recognize the <embed> tag. You could, for example, use <embed> to display a movie of your choice, and <noembed> to display a single JPG image if browser does not support <embed> tag.

Example

Here is a simple example to play an embedded midi file −
<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
 
   <body>
      <embed src = "/html/yourfile.mid" width = "100%" height = "60" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

The <embed> Tag Attributes

Following is the list of important attributes which can be used with <embed> tag.
Note −The align and autostartattributes deprecated in HTML5. Do not use these attributes.
Sr.NoAttribute & Description
1
align
Determines how to align the object. It can be set to either center, left or right.
2
autostart
This boolean attribute indicates if the media should start automatically. You can set it either true or false.
3
loop
Specifies if the sound should be played continuously (set loop to true), a certain number of times (a positive value) or not at all (false)
4
playcount
Specifies the number of times to play the sound. This is alternate option for loop if you are usiong IE.
5
hidden
Specifies if the multimedia object should be shown on the page. A false value means no and true values means yes.
6
width
Width of the object in pixels
7
height
Height of the object in pixels
8
name
A name used to reference the object.
9
src
URL of the object to be embedded.
10
volume
Controls volume of the sound. Can be from 0 (off) to 100 (full volume).

Supported Video Types

You can use various media types like Flash movies (.swf), AVI's (.avi), and MOV's (.mov) file types inside embed tag.
  • .swf files − are the file types created by Macromedia's Flash program.
  • .wmv files − are Microsoft's Window's Media Video file types.
  • .mov files − are Apple's Quick Time Movie format.
  • .mpeg files − are movie files created by the Moving Pictures Expert Group.
<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>

   <body>
      <embed src = "/html/yourfile.swf" width = "200" height = "200" >
         <noembed><img src = "yourimage.gif" alt = "Alternative Media" ></noembed>
      </embed>
   </body>

</html>

Background Audio



You can use HTML <bgsound> tag to play a soundtrack in the background of your webpage. This tag is supported by Internet Explorer only and most of the other browsers ignore this tag. It downloads and plays an audio file when the host document is first downloaded by the user and displayed. The background sound file also will replay whenever the user refreshes the browser.



Note − The bgsound tag is deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use HTML5 tag audio for adding sound. But still for learning purpose, this chapter will explain bgsound tag in detail.



This tag is having only two attributes loop and src. Both these attributes have same meaning as explained above.



Here is a simple example to play a small midi file −


<!DOCTYPE html>
<html>

   <head>
      <title>HTML embed Tag</title>
   </head>
 
   <body>
      <bgsound src = "/html/yourfile.mid">
         <noembed><img src = "yourimage.gif" ></noembed>
      </bgsound>
   </body>
 
</html>



This will produce the blank screen. This tag does not display any component and remains hidden.



Internet Explorer can also handle only three different sound format files − wav, the native format for PCs; au, the native format for most Unix workstations; and MIDI, a universal music-encoding scheme.



HTML Object tag



HTML 4 introduces the <object> element, which offers an all-purpose solution to generic object inclusion. The <object> element allows HTML authors to specify everything required by an object for its presentation by a user agent.



Here are a few examples −



Example - 1



You can embed an HTML document in an HTML document itself as follows −


<object data = "data/test.htm" type = "text/html" width = "300" height = "200">
   alt : <a href = "data/test.htm">test.htm</a>
</object>




Here alt attribute will come into picture if browser does not support object tag.



Example - 2



You can embed a PDF document in an HTML document as follows −


<object data = "data/test.pdf" type = "application/pdf" width = "300" height = "200">
   alt : <a href = "data/test.pdf">test.htm</a>
</object>




Example - 3



You can specify some parameters related to the document with the <param> tag. Here is an example to embed a wav file −


<object data = "data/test.wav" type = "audio/x-wav" width = "200" height = "20">
   <param name = "src" value = "data/test.wav">
   <param name = "autoplay" value = "false">
   <param name = "autoStart" value = "0">
   alt : <a href = "data/test.wav">test.wav</a>
</object>




Example - 4



You can add a flash document as follows −


<object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" id = "penguin" 
   codebase = "someplace/swflash.cab" width = "200" height = "300">
   
   <param name = "movie" value = "flash/penguin.swf" />
   <param name = "quality" value = "high" />
   <img src = "penguin.jpg" width = "200" height = "300" alt = "Penguin" />
</object>




Example - 5



You can add a java applet into HTML document as follows −


<object classid = "clsid:8ad9c840-044e-11d1-b3e9-00805f499d93" 
   width = "200" height = "200">
   <param name = "code" value = "applet.class">
</object>




The classid attribute identifies which version of Java Plug-in to use. You can use the optional codebase attribute to specify if and how to download the JRE.



HTML - Marquees



An HTML marquee is a scrolling piece of text displayed either horizontally across or vertically down your webpage depending on the settings. This is created by using HTML <marquees> tag.





Note − The <marquee> tag deprecated in HTML5. Do not use this element, instead you can use JavaScript and CSS to create such effects.





Syntax



A simple syntax to use HTML <marquee> tag is as follows −


<marquee attribute_name = "attribute_value"....more attributes>
   One or more lines or text message or image
</marquee>




The <marquee> Tag Attributes



Following is the list of important attributes which can be used with <marquee> tag.




Sr.NoAttribute & Description


1

width



This specifies the width of the marquee. This can be a value like 10 or 20% etc.




2

height



This specifies the height of the marquee. This can be a value like 10 or 20% etc.




3

direction



This specifies the direction in which marquee should scroll. This can be a value like up, down, left or right.




4

behavior



This specifies the type of scrolling of the marquee. This can have a value like scroll, slide and alternate.




5

scrolldelay



This specifies how long to delay between each jump. This will have a value like 10 etc.




6

scrollamount



This specifies the speed of marquee text. This can have a value like 10 etc.




7

loop



This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.




8

bgcolor



This specifies background color in terms of color name or color hex value.




9

hspace



This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.




10

vspace



This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.







Below are few examples to demonstrate the usage of marquee tag.



Examples - 1

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
 
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
 
</html>



This will produce the following result −




5

scrolldelay



This specifies how long to delay between each jump. This will have a value like 10 etc.




6

scrollamount



This specifies the speed of marquee text. This can have a value like 10 etc.




7

loop



This specifies how many times to loop. The default value is INFINITE, which means that the marquee loops endlessly.




8

bgcolor



This specifies background color in terms of color name or color hex value.




9

hspace



This specifies horizontal space around the marquee. This can be a value like 10 or 20% etc.




10

vspace



This specifies vertical space around the marquee. This can be a value like 10 or 20% etc.







Below are few examples to demonstrate the usage of marquee tag.



Examples - 1

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
 
   <body>
      <marquee>This is basic example of marquee</marquee>
   </body>
 
</html>



This will produce the following result −



Examples - 2

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
 
   <body>
      <marquee width = "50%">This example will take only 50% width</marquee>
   </body>
 
</html>



This will produce the following result −



Examples - 3

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>

   <body>
      <marquee direction = "right">This text will scroll from left to right</marquee>
   </body>
 
</html>



This will produce the following result −



Examples - 4

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML marquee Tag</title>
   </head>
 
   <body>
      <marquee direction = "up">This text will scroll from bottom to up</marquee>
   </body>
 
</html>



This will produce the following result −



HTML - Header



We have learnt that a typical HTML document will have following structure −


Document declaration tag 
<html>
   
   <head>
      Document header related tags
   </head>

   <body>
      Document body related tags
   </body>
   
</html>



This chapter will give a little more detail about header part which is represented by HTML <head> tag. The <head> tag is a container of various important tags like <title>, <meta>, <link>, <base>, <style>, <script>, and <noscript> tags.



The HTML <title> Tag



The HTML <title> tag is used for specifying the title of the HTML document. Following is an example to give a title to an HTML document −

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Title Tag Example</title>
   </head>

   <body>
      <p>Hello, World!</p>
   </body>

</html>



This will produce the following result −



The HTML <meta> Tag



The HTML <meta> tag is used to provide metadata about the HTML document which includes information about page expiry, page author, list of keywords, page description etc.



Following are few of the important usages of <meta> tag inside an HTML document −

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Meta Tag Example</title>

      <!-- Provide list of keywords -->
      <meta name = "keywords" content = "C, C++, Java, PHP, Perl, Python">

      <!-- Provide description of the page -->
      <meta name = "description" content = "Simply Easy Learning by Tutorials Point">

      <!-- Author information -->
      <meta name = "author" content = "Tutorials Point">

      <!-- Page content type -->
      <meta http-equiv = "content-type" content = "text/html; charset = UTF-8">

      <!-- Page refreshing delay -->
      <meta http-equiv = "refresh" content = "30">

      <!-- Page expiry -->
      <meta http-equiv = "expires" content = "Wed, 21 June 2006 14:25:27 GMT">

      <!-- Tag to tell robots not to index the content of a page -->
      <meta name = "robots" content = "noindex, nofollow">

   </head>

   <body>
      <p>Hello, World!</p>
   </body>
 
</html>



This will produce the following result −



The HTML <base> Tag



The HTML <base> tag is used for specifying the base URL for all relative URLs in a page, which means all the other URLs will be concatenated into base URL while locating for the given item.



For example, all the given pages and images will be searched after prefixing the given URLs with base URL http://www.tutorialspoint.com/ directory −

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML Base Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
   </head>

   <body>
      <img src = "/images/logo.png" alt = "Logo Image"/>
      <a href = "/html/index.htm" title = "HTML Tutorial"/>HTML Tutorial</a> 
   </body>

</html>



This will produce the following result −



But if you change base URL to something else, for example, if base URL is http://www.tutorialspoint.com/home then image and other given links will become like http://www.tutorialspoint.com/home/images/logo.png and http://www.tutorialspoint.com/html/index.htm



The HTML <link> Tag



The HTML <link> tag is used to specify relationships between the current document and external resource. Following is an example to link an external style sheet file available in css sub-directory within web root −

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML link Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      <link rel = "stylesheet" type = "text/css" href = "/css/style.css">
   </head>
 
   <body>
      <p>Hello, World!</p>
   </body>
 
</html>



This will produce the following result −



The HTML <style> Tag



The HTML <style> tag is used to specify style sheet for the current HTML document. Following is an example to define few style sheet rules inside <style> tag −

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML style Tag Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <style type = "text/css">
         .myclass {
            background-color: #aaa;
            padding: 10px;
         }
      </style>
   </head>
 
   <body>
      <p class = "myclass">Hello, World!</p>
   </body>

</html>



This will produce the following result −



Note − To learn about how Cascading Style Sheet works, kindly check a separate tutorial available at css



The HTML <script> Tag



The HTML <script> tag is used to include either external script file or to define internal script for the HTML document. Following is an example where we are using JavaScript to define a simple JavaScript function −

 Live Demo
<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>



This will produce the following result, where you can try to click on the given button −



Note − To learn about how JavaScript works, kindly check a separate tutorial available at javascript







Note − To learn about how Cascading Style Sheet works, kindly check a separate tutorial available at css



The HTML <script> Tag



The HTML <script> tag is used to include either external script file or to define internal script for the HTML document. Following is an example where we are using JavaScript to define a simple JavaScript function −



<!DOCTYPE html>
<html>

   <head>
      <title>HTML script Tag Example</title>
      <base href = "http://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "OK"  />
   </body>

</html>



This will produce the following result, where you can try to click on the given button −







Note − To learn about how JavaScript works, kindly check a separate tutorial available at javascript



HTML - Style Sheet



Cascading Style Sheets (CSS) describe how documents are presented on screens, in print, or perhaps how they are pronounced. W3C has actively promoted the use of style sheets on the Web since the consortium was founded in 1994.



Cascading Style Sheets (CSS) provide easy and effective alternatives to specify various attributes for the HTML tags. Using CSS, you can specify a number of style properties for a given HTML element. Each property has a name and a value, separated by a colon (:). Each property declaration is separated by a semi-colon (;).



Example



First let's consider an example of HTML document which makes use of <font> tag and associated attributes to specify text color and font size −





Note − The font tag deprecated and it is supposed to be removed in a future version of HTML. So they should not be used rather, it's suggested to use CSS styles to manipulate your fonts. But still for learning purpose, this chapter will work with an example using the font tag.





<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>
 
   <body>
      <p><font color = "green" size = "5">Hello, World!</font></p>
   </body>

</html>



We can re-write above example with the help of Style Sheet as follows −



<!DOCTYPE html>
<html>

   <head>
      <title>HTML CSS</title>
   </head>

   <body>
      <p style = "color:green; font-size:24px;" >Hello, World!</p>
   </body>

</html>



This will produce the following result −







You can use CSS in three ways in your HTML document −


    

  • 
External Style Sheet − Define style sheet rules in a separate .css file and then include that file in your HTML document using HTML <link> tag.
    

    • 

  • 
Internal Style Sheet − Define style sheet rules in header section of the HTML document using <style> tag.
    

    • 

  • 
Inline Style Sheet − Define style sheet rules directly along-with the HTML elements using style attribute.
    

    • 




Let's see all the three cases one by one with the help of suitable examples.



External Style Sheet



If you need to use your style sheet to various pages, then its always recommended to define a common style sheet in a separate file. A cascading style sheet file will have extension as .css and it will be included in HTML files using <link> tag.



Example



Consider we define a style sheet file style.csswhich has following rules −


.red {
   color: red;
}
.thick {
   font-size:20px;
}
.green {
   color:green;
}



Here we defined three CSS rules which will be applicable to three different classes defined for the HTML tags. I suggest you should not bother about how these rules are being defined because you will learn them while studying CSS. Now let's make use of the above external CSS file in our following HTML document −



<!DOCTYPE html>
<html>

   <head>
      <title>HTML External CSS</title>
      <link rel = "stylesheet" type = "text/css" href = "/html/style.css">
   </head>

   <body>
      <p class = "red">This is red</p>
      <p class = "thick">This is thick</p>
      <p class = "green">This is green</p>
      <p class = "thick green">This is thick and green</p>
   </body>

</html>



This will produce the following result −







Internal Style Sheet



If you want to apply Style Sheet rules to a single document only, then you can include those rules in header section of the HTML document using <style> tag.



Rules defined in internal style sheet overrides the rules defined in an external CSS file.



Example



Let's re-write above example once again, but here we will write style sheet rules in the same HTML document using <style> tag −



<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Internal CSS</title> 
      
      <style type = "text/css"> 
         .red { 
            color: red; 
         } 
         .thick{ 
            font-size:20px; 
         } 
         .green { 
            color:green; 
         } 
      </style> 
   </head>
 
   <body> 
      <p class = "red">This is red</p>  
      <p class = "thick">This is thick</p>  
      <p class = "green">This is green</p>  
      <p class = "thick green">This is thick and green</p> 
   </body>
 
</html>



This will produce the following result −







Inline Style Sheet



You can apply style sheet rules directly to any HTML element using style attribute of the relevant tag. This should be done only when you are interested to make a particular change in any HTML element only.



Rules defined inline with the element overrides the rules defined in an external CSS file as well as the rules defined in <style> element.



Example



Let's re-write above example once again, but here we will write style sheet rules along with the HTML elements using style attribute of those elements.



<!DOCTYPE html> 
<html>
 
   <head> 
      <title>HTML Inline CSS</title> 
   </head>
 
   <body> 
      <p style = "color:red;">This is red</p>  
      <p style = "font-size:20px;">This is thick</p>  
      <p style = "color:green;">This is green</p>  
      <p style = "color:green;font-size:20px;">This is thick and green</p> 
   </body>
 
</html> 



This will produce the following result −







HTML - JavaScript



A script is a small piece of program that can add interactivity to your website. For example, a script could generate a pop-up alert box message, or provide a dropdown menu. This script could be written using JavaScript or VBScript.



You can write various small functions, called event handlers using any of the scripting language and then you can trigger those functions using HTML attributes.



Now-a-days, only JavaScript and associated frameworks are being used by most of the web developers, VBScript is not even supported by various major browsers.



You can keep JavaScript code in a separate file and then include it wherever it's needed, or you can define functionality inside HTML document itself. Let's see both the cases one by one with suitable examples.



External JavaScript



If you are going to define a functionality which will be used in various HTML documents then it's better to keep that functionality in a separate JavaScript file and then include that file in your HTML documents. A JavaScript file will have extension as .js and it will be included in HTML files using <script> tag.



Example



Consider we define a small function using JavaScript in script.js which has following code −


function Hello() {
   alert("Hello, World");
}




Now let's make use of the above external JavaScript file in our following HTML document −



<!DOCTYPE html>
<html>

   <head>
      <title>Javascript External Script</title>
      <script src = "/html/script.js" type = "text/javascript"/></script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>



This will produce the following result, where you can try to click on the given button −







Internal Script



You can write your script code directly into your HTML document. Usually we keep script code in header of the document using <script> tag, otherwise there is no restriction and you can put your source code anywhere in the document but inside <script> tag.



Example



<!DOCTYPE html>
<html>

   <head>
      <title>JavaScript Internal Script</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function Hello() {
            alert("Hello, World");
         }
      </script>
   </head>

   <body>
      <input type = "button" onclick = "Hello();" name = "ok" value = "Click Me" />
   </body>

</html>



This will produce the following result, where you can try to click on the given button −







Event Handlers



Event handlers are nothing but simply defined functions which can be called against any mouse or keyboard event. You can define your business logic inside your event handler which can vary from a single to 1000s of line code.



Following example explains how to write an event handler. Let's write one simple function EventHandler() in the header of the document. We will call this function when any user brings mouse over a paragraph.



<!DOCTYPE html>
<html>

   <head>
      <title>Event Handlers Example</title>
      <base href = "https://www.tutorialspoint.com/" />
      
      <script type = "text/JavaScript">
         function EventHandler() {
            alert("I'm event handler!!");
         }
      </script>
   </head>

   <body>
      <p onmouseover = "EventHandler();">Bring your mouse here to see an alert</p>
   </body>

</html>



Now This will produce the following result. Bring your mouse over this line and see the result −







Hide Scripts from Older Browsers



Although most (if not all) browsers these days support JavaScript, but still some older browsers don't. If a browser doesn't support JavaScript, instead of running your script, it would display the code to the user. To prevent this, you can simply place HTML comments around the script as shown below.


JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>



The <noscript> Element



You can also provide alternative info to the users whose browsers don't support scripts and for those users who have disabled script option their browsers. You can do this using the <noscript> tag.


JavaScript Example:
<script type = "text/JavaScript">
   <!--
      document.write("Hello JavaScript!");
   //-->
</script>

<noscript>Your browser does not support JavaScript!</noscript>

VBScript Example:
<script type = "text/vbscript">
   <!--
      document.write("Hello VBScript!")
   '-->
</script>

<noscript>Your browser does not support VBScript!</noscript>



Default Scripting Language



There may be a situation when you will include multiple script files and ultimately using multiple <script> tags. You can specify a default scripting language for all your script tags. This saves you from specifying the language every time you use a script tag within the page. Below is the example −


<meta http-equiv = "Content-Script-Type" content = "text/JavaScript" />



Note that you can still override the default by specifying a language within the script tag.



HTML - Layouts



A webpage layout is very important to give better look to your website. It takes considerable time to design a website's layout with great look and feel.



Now-a-days, all modern websites are using CSS and JavaScript based framework to come up with responsive and dynamic websites but you can create a good layout using simple HTML tables or division tags in combination with other formatting tags. This chapter will give you few examples on how to create a simple but working layout for your webpage using pure HTML and its attributes.



HTML Layout - Using Tables



The simplest and most popular way of creating layouts is using HTML <table> tag. These tables are arranged in columns and rows, so you can utilize these rows and columns in whatever way you like.



Example



For example, the following HTML layout example is achieved using a table with 3 rows and 2 columns but the header and footer column spans both columns using the colspan attribute −



<!DOCTYPE html>
<html>

   <head>
      <title>HTML Layout using Tables</title>
   </head>

   <body>
      <table width = "100%" border = "0">
         
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <h1>This is Web Page Main title</h1>
            </td>
         </tr>
         <tr valign = "top">
            <td bgcolor = "#aaa" width = "50">
               <b>Main Menu</b><br />
               HTML<br />
               PHP<br />
               PERL...
            </td>
            
            <td bgcolor = "#eee" width = "100" height = "200">
               Technical and Managerial Tutorials
            </td>
         </tr>
         <tr>
            <td colspan = "2" bgcolor = "#b5dcb3">
               <center>
                  Copyright © 2007 Tutorialspoint.com
               </center>
            </td>
         </tr>
         
      </table>
   </body>

</html>
at

No comments:

Post a Comment

Please reply through a comment. My website are very simple and achieve to goal.

Subscribe to: Post Comments (Atom)

Featured Post

  • (no title)
    C++ Exception Handling part 2 An exception is a problem that arises during the execution of a program. A C++ exception is a response to...
  • (no title)
    C++ Templates part 5 Templates are the foundation of generic programming, which involves writing code in a way that is independent of a...
  • (no title)
    C++ advance C++ Files and Streams part1 So far, we have been using the  iostream  standard library, which provides  cin  and  cout  me...