Knowledge

3rd part html basic

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 −

Specify alternate font faces

A visitor will only be able to see your font if they have that font installed on their computer. So, it is 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

Live Demo

<!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

Live Demo

<!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 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.No	Attribute & 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 −

Live Demo

<!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.No	Attribute & 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 −

Live Demo

<!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.No	Attribute & 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 −

Live Demo

<!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.No	Attribute & 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 −

Live Demo

<!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.No	Attribute & 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 −

Live Demo

<!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.No	Attribute & 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

Live Demo

<!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.No	Attribute & 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.No	Attribute & 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 −

Live Demo

<!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.No	Attribute & 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.No	Type & 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 −

Live Demo

<!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 −

Live Demo

<!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>


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.No Attribute & 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.


 Live Demo<!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>

This will produce the following result −

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.


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.No Attribute & 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 −



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>

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>

Sr.No	Attribute & 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).

Sr.No	Attribute & 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.

Friday, 21 December 2018

Set Font Size

Example

Relative Font Size

Example

Setting Font Face

Example

Specify alternate font faces

Setting Font Color

Example

The <basefont> Element

Example

Form Attributes

HTML Form Controls

Text Input Controls

Single-line text input controls

Example

Attributes

Password input controls

Example

Attributes

Multiple-Line Text Input Controls

Example

Attributes

Checkbox Control

Example

Attributes

Radio Button Control

Example

Attributes

Select Box Control

Example

Attributes

File Upload Box

Example

Attributes

Button Controls

Example

Hidden Form Controls

Example

Example

The <embed> Tag Attributes

Supported Video Types

Background Audio

HTML Object tag

Example - 1

Example - 2

Example - 3

Example - 4

Example - 5

Syntax

The <marquee> Tag Attributes

Examples - 1

Examples - 2

Examples - 3

Examples - 4

The HTML <title> Tag

The HTML <meta> Tag

The HTML <base> Tag

The HTML <link> Tag

The HTML <style> Tag

The HTML <script> Tag

No comments:

Post a Comment

Featured Post