HTML Colors and Fonts - SwatiMaurya08/html-notes GitHub Wiki

HTML Colors

Colors are very important to give a good look and feel to your website. You can specify colors on page level using <body> tag or you can set colors for individual tags using bgcolor attribute.

The <body> tag has following attributes which can be used to set different colors βˆ’

  1. bgcolor βˆ’ sets a color for the background of the page.

  2. text βˆ’ sets a color for the body text.

  3. alink βˆ’ sets a color for active links or selected links.

  4. link βˆ’ sets a color for linked text.

  5. vlink βˆ’ sets a color for visited links βˆ’ that is, for linked text that you have already clicked on.

HTML Color Coding Methods

There are following three different methods to set colors in your web page βˆ’

  1. Color names βˆ’ You can specify color names directly like green, blue or red.

  2. Hex codes βˆ’ A six-digit code representing the amount of red, green, and blue that makes up the color.

  3. Color decimal or percentage values βˆ’ This value is specified using the rgb( ) property.

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.

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

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.

Setting Font Color

You can set any font color you like using color attribute. You can specify the color that you want by either the color name or hexadecimal code for that color.

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.

HTML Forms

The HTML

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>

HTML Form Controls

There are different types of form controls that you can use to collect data using HTML form βˆ’

  1. Text Input Controls
  2. Checkboxes Controls
  3. Radio Box Controls
  4. Select Box Controls
  5. File Select boxes
  6. Hidden Controls
  7. Clickable Buttons
  8. Submit and Reset Button

Text Input Controls

There are three types of text input used on forms βˆ’

  1. 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.

  2. 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.

  3. 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.

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.

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.

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

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.

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.

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.

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.

  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.

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.

The <input type="hidden"> defines a hidden input field.

A hidden field let web developers include data that cannot be seen or modified by users when a form is submitted.

A hidden field often stores what database record that needs to be updated when the form is submitted.

⚠️ **GitHub.com Fallback** ⚠️