HTML

Sridhar U

HTML – Text Formatting Elements

Tag

Description
<b> Defines bold text
<em> Defines emphasized text
<i> Defines italic text
<small> Defines smaller text
<strong> Defines important text
<sub> Defines subscripted text
<sup> Defines superscripted text
<ins> Defines inserted text
<del> Defines deleted text
<mark> Defines marked / highlighted text
Sridhar U

HTML – Styles with CSS

CSS stands for Cascading Style Sheets

Styling can be added to HTML elements in 3 ways:

  • Inline – using a style attribute in HTML elements
  • Internal – using a <style> element in the HTML <head> section
  • External – using one or more external CSS files

The most common way to add styling, is to keep the styles in separate CSS files. But, in this tutorial, we use internal styling, because it is easier to demonstrate, and easier for you to try it yourself.

 

Inline Styling (Inline CSS)

Inline styling is used to apply a unique style to a single HTML element:

Inline styling uses the style attribute.

This example changes the text color of the <h1> element to blue:

<h1 style="color:blue;">This is a Blue Heading</h1>

 

 

Internal Styling (Internal CSS)

Internal styling is used to define a style for one HTML page.

Internal styling is defined in the <head> section of an HTML page, within a <style> element:

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color:lightgrey;}
h1   {color:blue;}
p    {color:green;}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

External Styling (External CSS)

An external style sheet is used to define the style for many pages.

With an external style sheet, you can change the look of an entire web site by changing one file!

To use an external style sheet, add a link to it in the <head> section of the HTML page:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

An external style sheet can be written in any text editor. The file should not contain any html tags. The style sheet file must be saved with a .css extension.

Here is how the “styles.css” looks:

body {
    background-color: lightgrey;
}
h1 {
    color: blue;
}
p {
    color:green;
}

 

CSS Fonts

The CSS color property defines the text color to be used for the HTML element.

The CSS font-family property defines the font to be used for the HTML element.

The CSS font-size property defines the text size to be used for the HTML element.

 

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
    color: blue;
    font-family: verdana;
    font-size: 300%;
}
p  {
    color: red;
    font-family: courier;
    font-size: 160%;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>

 

The CSS Box Model

Every HTML element has a box around it, even if you cannot see it.

The CSS border property defines a visible border around an HTML element:

The CSS padding property defines a padding (space) inside the border:

The CSS margin property defines a margin (space) outside the border:

p {
     border: 1px solid black;
     padding: 10px;
     margin: 30px;
}

 

The id Attribute

All the examples above use CSS to style HTML elements in a general way.

To define a special style for one special element, first add an id attribute to the element:

 <p id="p01">I am different</p>

then define, different style for the (identified) element:

 p#p01 {
    color: blue;
}

 

The class Attribute

To define a style for a special type (class) of elements, add a class attribute to the element:

 <p class="error">I am different</p>

Now you can define a different style for all elements with the specified class:

 p.error {
    color: red;
}

 

Sridhar U

HTML – Styles

Setting the style of an HTML element, can be done with the style attribute.

The HTML style attribute has the following syntax:

style=”property:value;”

The property is a CSS property. The value is a CSS value.

HTML Background Color

The background-color property defines the background color for an HTML element:

This example sets the background for a page to light grey:

<body style="background-color:lightgrey;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>

 

HTML Text Color

The color property defines the text color for an HTML element:

<h1 style="color:blue;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>

 

HTML Fonts

The font-family property defines the font to be used for an HTML element:

 <h1 style="font-family:verdana;">This is a heading</h1>
<p style="font-family:courier;">This is a paragraph.</p>

 

HTML Text Size

The font-size property defines the text size for an HTML element:

<h1 style="font-size:300%;">This is a heading</h1>
<p style="font-size:160%;">This is a paragraph.</p>

 

HTML Text Alignment

The text-align property defines the horizontal text alignment for an HTML element:

<h1 style="text-align:center;">Centered Heading</h1>
<p>This is a paragraph.</p>

 

Sridhar U

HTML Input Types

Input Type: text

<input type=”text”> defines a one-line input field for text input:

<form>
First name:<br>
<input type="text" name="firstname">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

 

Input Type: password

<form>
User name:<br>
<input type="text" name="username">
<br>
User password:<br>
<input type="password" name="psw">
</form>

 

Input Type: submit

<input type=”submit”> defines a button for submitting form input to a form-handler.

The form-handler is typically a server page with a script for processing input data.

The form-handler is specified in the form’s action attribute:

 <form action="action_page.php">
First name:<br>
<input type="text" name="firstname" value="Mickey">
<br>
Last name:<br>
<input type="text" name="lastname" value="Mouse">
<br><br>
<input type="submit" value="Submit">
</form>

 

Input Type: radio

<input type=”radio”> defines a radio button.

Radio buttons let a user select ONLY ONE of a limited number of choices:

 <form>
<input type="radio" name="sex" value="male" checked> Male
<br>
<input type="radio" name="sex" value="female"> Female
</form>

 

Input Type: checkbox

<input type=”checkbox”> defines a checkbox.

Checkboxes let a user select ZERO or MORE options of a limited number of choices.

 <form>
Chennai<br>
<input type="checkbox" name="city" value="Chennai">
<br>
Mumbai<br>
<input type="checkbox" name="city" value="Mumbai">
</form>

 

Input Type: button

 <input type="button"> defines a button:
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

 

Input Type: number

The <input type=”number”> is used for input fields that should contain a numeric value.

You can set restrictions on the numbers.

Depending on browser support, the restrictions can apply to the input field.

 <form>
  Quantity (between 1 and 5):
  <input type="number" name="quantity" min="1" max="5">
</form>

 

Input Restrictions

Here is a list of some common input restrictions (some are new in HTML5):

Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
value Specifies the default value for an input field
 <form>
  Quantity:
  <input type="number" name="points" min="0" max="100" step="10" value="30">
</form>

 

Input Type: date

The <input type=”date”> is used for input fields that should contain a date.

Depending on browser support, a date picker can show up in the input field.

 <form>
  Birthday:
  <input type="date" name="bday">
</form>
 <form>
  Enter a date before 1980-01-01:
  <input type="date" name="bday" max="1979-12-31"><br>
  Enter a date after 2000-01-01:
  <input type="date" name="bday" min="2000-01-02"><br>
</form>

 

Input Type: color

The <input type=”color”> is used for input fields that should contain a color.

Depending on browser support, a color picker can show up in the input field.

 <form>
  Select your favorite color:
  <input type="color" name="favcolor">
</form>

 

Input Type: range

The <input type=”range”> is used for input fields that should contain a value within a range.

Depending on browser support, the input field can be displayed as a slider control.

 <form>
  <input type="range" name="points" min="0" max="10">
</form>

 

Input Type: month

The <input type=”month”> allows the user to select a month and year.

Depending on browser support, a date picker can show up in the input field.

 <form>
  Birthday (month and year):
  <input type="month" name="bdaymonth">
</form>

 

Input Type: week

The <input type=”week”> allows the user to select a week and year.

Depending on browser support, a date picker can show up in the input field.

 <form>
  Select a week:
  <input type="week" name="week_year">
</form>

 

Input Type: time

The <input type=”time”> allows the user to select a time (no time zone).

Depending on browser support, a time picker can show up in the input field.

 <form>
  Select a time:
  <input type="time" name="usr_time">
</form>

 

Input Type: datetime

The <input type=”datetime”> allows the user to select a date and time (with time zone).

 <form>
  Birthday (date and time):
  <input type="datetime" name="bdaytime">
</form>

 

Input Type: datetime-local

 

The <input type=”datetime-local”> allows the user to select a date and time (no time zone).

Depending on browser support, a date picker can show up in the input field.

 <form>
  Birthday (date and time):
  <input type="datetime-local" name="bdaytime">
</form>

 

Input Type: email

The <input type=”email”> is used for input fields that should contain an e-mail address.

Depending on browser support, the e-mail address can be automatically validated when submitted.

Some smartphones recognize the email type, and adds “.com” to the keyboard to match email input.

 <form>
  E-mail:
  <input type="email" name="email">
</form>

 

Input Type: search

The <input type=”search”> is used for search fields (a search field behaves like a regular text field).

 <form>
  Search Google:
  <input type="search" name="googlesearch">
</form>

 

Input Type: tel

The <input type=”tel”> is used for input fields that should contain a telephone number.

The tel type is currently supported only in Safari 8.

 <form>
  Telephone:
  <input type="tel" name="usrtel">
</form>

 

Input Type: url

The <input type=”url”> is used for input fields that should contain a URL address.

Depending on browser support, the url field can be automatically validated when submitted.

Some smartphones recognize the url type, and adds “.com” to the keyboard to match url input.

 <form>
  Add your homepage:
  <input type="url" name="homepage">
</form>

 

Sridhar U

HTML – Input Attributes

The value Attribute

The value attribute specifies the initial value for an input field:

<form action="">
First name:<br>
<input type="text" name="firstname" value="John">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

The readonly Attribute

The readonly attribute specifies that the input field is read only (cannot be changed):

 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" readonly>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

The disabled Attribute

The disabled attribute specifies that the input field is disabled.

A disabled element is un-usable and un-clickable.

Disabled elements will not be submitted.

 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" disabled>
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

The disabled attribute does not need a value. It is the same as writing disabled=”disabled”.

The size Attribute

The size attribute specifies the size (in characters) for the input field:

 <form action="">
First name:<br>
<input type="text" name="firstname" value="John" size="40">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

The maxlength Attribute

The maxlength attribute specifies the maximum allowed length for the input field:

 <form action="">
First name:<br>
<input type="text" name="firstname" maxlength="10">
<br>
Last name:<br>
<input type="text" name="lastname">
</form>

With a maxlength attribute, the input control will not accept more than the allowed number of characters.

The attribute does not provide any feedback. If you want to alert the user, you must write JavaScript code.

The autocomplete Attribute

The autocomplete attribute specifies whether a form or input field should have autocomplete on or off.

When autocomplete is on, the browser automatically complete values based on values that the user has entered before.

Tip: It is possible to have autocomplete “on” for the form, and “off” for specific input fields, or vice versa.

The autocomplete attribute works with <form> and the following <input> types: text, search, url, tel, email, password, datepickers, range, and color.

 <form action="action_page.php" autocomplete="on">
  First name:<input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  E-mail: <input type="email" name="email" autocomplete="off"><br>
  <input type="submit">
</form>

The novalidate Attribute

The novalidate attribute is a <form> attribute.

When present, novalidate specifies that form data should not be validated when submitted.

 <form action="action_page.php" novalidate>
  E-mail: <input type="email" name="user_email">
  <input type="submit">
</form>

The autofocus Attribute

The autofocus attribute is a boolean attribute.

When present, it specifies that an <input> element should automatically get focus when the page loads.

 First name:<input type="text" name="fname" autofocus>

The form Attribute

The form attribute specifies one or more forms an <input> element belongs to.

Tip: To refer to more than one form, use a space-separated list of form ids.

  <form action="action_page.php" id="form1">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
</form>
Last name: <input type="text" name="lname" form="form1">

The formaction Attribute

The formaction attribute specifies the URL of a file that will process the input control when the form is submitted.

The formaction attribute overrides the action attribute of the <form> element.

The formaction attribute is used with type=”submit” and type=”image”.

 <form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formaction="demo_admin.asp"
  value="Submit as admin">
</form>

The formenctype Attribute

The formenctype attribute specifies how the form-data should be encoded when submitting it to the server (only for forms with method=”post”).

The formenctype attribute overrides the enctype attribute of the <form> element.

The formenctype attribute is used with type=”submit” and type=”image”.

 <form action="demo_post_enctype.asp" method="post">
  First name: <input type="text" name="fname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formenctype="multipart/form-data"
  value="Submit as Multipart/form-data">
</form>

The formmethod Attribute

The formmethod attribute defines the HTTP method for sending form-data to the action URL.

The formmethod attribute overrides the method attribute of the <form> element.

The formmethod attribute can be used with type=”submit” and type=”image”.

 <form action="action_page.php" method="get">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
  <input type="submit" formmethod="post" formaction="demo_post.asp"
  value="Submit using POST">
</form>

The formnovalidate Attribute

The novalidate attribute is a boolean attribute.

When present, it specifies that the <input> element should not be validated when submitted.

The formnovalidate attribute overrides the novalidate attribute of the <form> element.

The formnovalidate attribute can be used with type=”submit”.

 <form action="action_page.php">
  E-mail: <input type="email" name="userid"><br>
  <input type="submit" value="Submit"><br>
  <input type="submit" formnovalidate value="Submit without validation">
</form>

The formtarget Attribute

The formtarget attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form.

The formtarget attribute overrides the target attribute of the <form> element.

The formtarget attribute can be used with type=”submit” and type=”image”.

 <form action="action_page.php">
  First name: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit as normal">
  <input type="submit" formtarget="_blank"
  value="Submit to a new window">
</form>

The height and width Attributes

The height and width attributes specify the height and width of an <input> element.

The height and width attributes are only used with <input type=”image”>.

  <input type=”image” src=”img_submit.gif” alt=”Submit” width=”48″ height=”48″>

The list Attribute

The list attribute refers to a <datalist> element that contains pre-defined options for an <input> element.

 <input list="browsers">
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

The min and max Attributes

The min and max attributes specify the minimum and maximum value for an <input> element.

The min and max attributes work with the following input types: number, range, date, datetime, datetime-local, month, time and week.

 Enter a date before 1980-01-01:
<input type="date" name="bday" max="1979-12-31">
Enter a date after 2000-01-01:
<input type="date" name="bday" min="2000-01-02">
Quantity (between 1 and 5):
<input type="number" name="quantity" min="1" max="5">

The multiple Attribute

The multiple attribute is a boolean attribute.

When present, it specifies that the user is allowed to enter more than one value in the <input> element.

The multiple attribute works with the following input types: email, and file.

 Select images: <input type="file" name="img" multiple>

The pattern Attribute

The pattern attribute specifies a regular expression that the <input> element’s value is checked against.

The pattern attribute works with the following input types: text, search, url, tel, email, and password.

  Country code: <input type=”text” name=”country_code” pattern=”[A-Za-z]{3}” title=”Three letter country code”>

The placeholder Attribute

The placeholder attribute specifies a hint that describes the expected value of an input field (a sample value or a short description of the format).

The hint is displayed in the input field before the user enters a value.

The placeholder attribute works with the following input types: text, search, url, tel, email, and password.

 <input type="text" name="fname" placeholder="First name">

The required Attribute

The required attribute is a boolean attribute.

When present, it specifies that an input field must be filled out before submitting the form.

The required attribute works with the following input types: text, search, url, tel, email, password, date pickers, number, checkbox, radio, and file.

 Username: <input type="text" name="usrname" required>

The step Attribute

The step attribute specifies the legal number intervals for an <input> element.

Example: if step=”3″, legal numbers could be -3, 0, 3, 6, etc.

Tip: The step attribute can be used together with the max and min attributes to create a range of legal values.

The step attribute works with the following input types: number, range, date, datetime, datetime-local, month, time and week.

 <input type="number" name="points" step="3">