Quick Reference Study Notes for HTML 4.x (Advanced)

HTML Overview

HTML stands for Hypertext Markup Language. It is used to create web pages and make them functional. Web servers send the HTML documents to the Web browsers where it is rendered as multimedia web pages. HTML used along with CSS and Javascript can create a proper functional webpage.

Introduction to HTML
HTML is a markup language that uses HTML tags along with their attributes to create the web pages.

HTML tags :

HTML provides a large number of tags that are  written using angle brackets to use for different purposes. HTML tags are not case sensitive. Most tags must be opened with <> and closed with </> in order to function but some of the tags are optional to close also.

The basic syntax of a HTML webpage is :

<!DOCTYPE html>

<html>

<head>

<title>Page Title</title>

</head>

<body>

//Body of web page

</body>

</html>

All HTML documents must start with <!DOCTYPE html> that defines the document type.

<html> is the tag that specifies that this page contains the HTML.

<head> provides the information about the document.

<title> specifies the title of the page that will appear on the browser tab when opened.

<body> contains the main body of the web page that will contain all the text and data that a user want to render on the web page.

<body> can contain different html tags along with their attributes based on the user requirement like <h1>, <b> , <form> etc are the tags used for headings, make text bold, form etc.

Attributes :

Attributes are the properties of these tags to specify how these tags should behave on the web page like <table> tag has the attribute ‘border’ that specifies if the table should have a border around it or not.

 

HTML Forms

HTML forms are created using the <form> tag. It is used when we want to get the input from the user and submit that to somewhere. The basic syntax of creating a form is :

<form>

//form elements

</form>

Example:

<form action="mailto:you@yourdomain.com">

Name: <input name="Name" value="" size="10"><br>

Email: <input name="Email" value="" size="10"><br>

<center><input type="submit" value=”Submit”></center>

</form>

In this example, ‘action’ attribute of the form tag specifies the action to perform when user will submit the form by clicking form Submit button.

This is how it looks:

 

HTML Form Elements

HTML form elements contains various elements like input elements, submit buttons, dropdown elements etc. Some of these are:

<input>

<input> element is used to take the input from the user. It can be used in various ways depending on the attribute ‘type’. The ‘type’ attribute of the <input> element can have one of the values like text, email, password, submit, reset, radio etc.

  • Text:

The input type ‘text’ is used to input any text in the form field.

Example:

<input type=’text’ name=’username’>

This example is using input  type text to let the user input the username.

  • Password:

The input type password is used to input any password or the field value that we do not want to let the end user view in the form field.

Example:

<input type=’password’ name=’password’>

This example is using input type password to let the user input the username.

This is how it looks:

  • Email:

The input type email is used to input the email in the form field. Specifying this type to the input element helps in validation as well because browser itself handles the errors if the user try to input something else other than email in this field.

Example:

<input type=’email’ name=’user_email’>

This example is using input type email to let the user input the user email address. If the user will try to input something that is not in email format the browser will itself shows the error message and will not allow it to submit the form until user enters the correct field value. This is how it will show the error:

  • Submit:

The input type submit is used to submit the form.

Example:

<input type=’submit’ name=’submit’ value=’Submit’>

This example is using input type submit to let the user submit the form.

This is how it looks:

  • Reset:

The input type reset is used to reset the form field values to their default values. This

Example:

<input type=’reset’ name=’reset’ value=’Reset’>

This example is using input type submit to let the user submit the form.

This is how it looks:

  • Radio

The input type radio is used to let the user select any one of the given values in the form. This is required to give all the radio buttons a same name so that the form can consider all these radio buttons as a group from which user will select any one choice.

Example:

<input type="radio" name="qualification" value="matriculation" checked> Matriculation<br>

<input type="radio" name="qualification" value="graduate"> Graduate<br>

<input type="radio" name="qualification" value="post_graduate"> Post Graduate

This example is using input type radio to let the user select any one of these qualification in the form.

This is how it looks:

<select>

The <select> element is used to create a drop down.It has an another tag <option> that defines all the options that will display in the dropdown.

It has the following syntax:

<select>

<option>Option1</option>

<option>Option2</option>

<option>Option3</option>

</select>

We can create as many options as we need. The option tag has an attribute ‘value’ that defines the value of the option.

Example:

<select>

<option value=”example_value1”>Example Text1</option>

<option value=”example_value2”>Example Text2</option>

<option value=”example_value3”>Example Text3</option>

</select>

Here, we are creating a dropdown with three options.

The options will show Example Text1, Example Text2, Example Text3 as the text in the dropdown options and value will be used for functionality purposes that what value we want to get if the user select the desired option.

This is how it will look like:

<select> attributes:

  • size

The size attribute of <select> tag helps to make more than one options visible on the screen. It has the syntax:

size=”no_of_options”

Example:

<select size=”2”>

<option value=”example_value1”>Example Text1</option>

<option value=”example_value2”>Example Text2</option>

<option value=”example_value3”>Example Text3</option>

</select>

This size=”2” will make two options visible on the screen. This will look like:

  • multiple

The multiple attribute of the <select> tag helps to allow users to select more than one options in the dropdown.

Example:

<select multiple>

<option value="example_value1">Example Text1</option>

<option value="example_value2">Example Text2</option>

<option value="example_value3">Example Text3</option>

</select>

This will look like:

Here, user is selecting two options in the <select> tag.

<button>

<button> tag is used to create clickable buttons in the HTML document.

It has the syntax:

<button type="button" onclick="onclick Event">Button Text</button>

We can use all the events like onclick etc on the button. The onclick event will execute the script written in it on click of this button. ‘Button Text’ will be any text that the user want to show on the button.

Example:

<button type="button" onclick="alert(‘I am clicked’);>Example Button</button>

This button has text ‘Example Button’ and on click of it we get an alert that ‘I am clicked’.

This is how it will look like:

 

HTML Frames

HTML frames are used to show various html documents in a single html document by loading

them in different sections. The browser window is divided into various frames (HTML documents).

The html frames uses <frameset> tag to specify all the frames to use. The frames are the html documents that we load in the parent document and these are given by the <frame> tag within <frameset> tag.

<frame> tag does not have an end tag. <frameset> has an attribute ‘cols’ that specifies the area which given frames will occupy.

Example:

<frameset cols="25%,50%,25%”>

<frame src="doc1.htm">

  <frame src="doc2.htm">

  <frame src="doc3.htm">

</frameset>

Here, in this example, we are loading three frames doc1.htm, doc2.htm, doc3.htm in a single window. The ‘cols’ attribute of frameset is specifying the width of these 3 documents that first document will occupy 25% of window size and so on.

This is how it looks:

 

HTML Tables

The HTML table is a set of rows and columns. It is created by <table> tag. We can create any no of rows and columns in a table.

The table headers are created by <th> tags. The rows are specified by <tr> and columns by <td> tags. The HTML tables also has <thead>, <tbody>, and <tfoot> elements that are used to specify header, body and footer of the table.

Example:

<table>

<tbody>

<tr>

<th>Name</th>

<th>RollNo</th>

</tr>

<tr>

<td>Example</td>

<td>01</td>

</tr>

</tbody>

</table>

This above is an example of the table with two columns and two rows. The first row is specifying the columns headings as Name, RollNo. The second column is showing the column data as Example and 01.

 

<table> attributes:

  • border

The border attribute provides the border to the table if set to 1 else no border.

Example: <table border=”1” id=”example”>

will provide the border around the ‘example’ table.

  • cellspacing

The cellspacing attribute provides the spacing between the cells of the table.

Example: <table cellspacing=”15”>

  • cellpadding

The cellpadding attribute provides the padding between the cells of the table.

Example: <table cellpadding="15">

  • bgcolor

The bgcolor attribute provides the background color to the table.

Example: <table bgcolor=”green”>

 

<td> / <th> attributes:

The <td> tag has various attributes like bgcolor, align, height, nowrap, rowspan, colspan etc.

  • colspan

The colspan attribute helps to span the number of columns into a single cell.

Example:

<table border=”1”>

<tr>

<th>RollNo</th>

<th>Name</th>

<th>Marks</th>

</tr>

<tr>

<td>01</td>

<td colspan=”2”>Data not available.</td>

</tr>

</table>

Here, <td colspan=”2”>Data not available.</td> is spanning two columns together to form a single cell which has text ‘Data not available.’.

  • rowspan

The rowspan attribute helps to span the number of rows into a single cell.

Example:

<table>

<tr>

<th>RollNo</th>

<th>Name</th>

<th>Marks</th>

</tr>

<tr>

<td>01</td>

<td>Example1</td>

<td rowspan="2">58</td>

</tr>

<tr>

<td>02</td>

<td>Example2</td>

</tr>

</table>

 

Here,  <td rowspan="2">58</td>

is spanning two rows together to form a single cell which has Marks ’58’.


 

HTML Page Links

The html document can contain various links that may redirect to another website, page or certain section of same document. These html links are created by the <a> tag.

<a> tag has attributes like target, href etc.

  • href

It stands for Hypertext Reference.The href attribute of this tag specified the URL where the user will redirect on clicking the link.

  • target

The target attribute specifying the location to open the given URL. It can have values from -

_blank - to open the link in a new tab or window.

_self -   to open the link in same tab or window.

_parent -   to open the link in the parent frame.

_top - to open the link in the full body of the document.

 

The syntax for creating a link is:

<a href="redirect_url">Clickable Text</a>

Here, href is the attribute of <a> tag that specifies the url where user will redirect to, on clicking this link.

Example:

<a href=”www.redirectURL.com”>Link to another website</a>

On the html document, it will look like :

  • A link can be any valid html element like image, div etc.

Example:

<a href="#table_section8"><img src="https:www.imageurl.com"/></a>

 

  • We can also set the link to point to the another section of the same html document. We just need to pass the id of the section in the href attribute of the <a> tag.

Example:

<a href="#table2">Table2</a><br>

This example is creating a link to the table having id ‘table2’ on the same html document.


 

Page Styling

The html page does not have any styling until specified.There are three ways to provide styling to the HTML document-

  • Inline styling

Inline styling is the way to give style to each element of html document separately. It is given by the ‘style’ attribute that can be used with any html tag.

It is written as:

style=”property:value;”

Style is the attribute and we provide desired style to it as key value pair.

Example:

<div style='background-color:red;border:3px solid;text-align:center;height:35px;'>

Any Text

</div>

This above code is creating a div of height 35px. The div will get background color as red , 3px border and the text will be centered align. We are writing a text ‘Any Text’ in it.

This is how it will look:

We can provide any styling as key value pair in style attribute separated by ;(semicolon). As in this above example, background-color:red is a style that has background-color as key and red as value of the background-color.


 

  • Internal styling

Internal styling is the styling that can be added to the html document through <style> tag that is written in the <head> section of html document.

It has syntax:

<style></style>

<style> tag can contain any number of styling which can be provided to more than one tag of the document together. The html document elements are recognised through the class name or the unique id given to them. Classes are specified by .(dot) and id are specified by #(hash).

Example:

<head>

<style>

.container_div{

        border: 1px solid;

        padding-left: 12px;

    }

    #example1{

        background-color:grey;

    }

</style>

</head>

<body>

<div class="container_div" id="example1">

    Example Div1

  </div>

<div class="container_div" id="example2">

      Example Div2

  </div>

</body>

Here, we have 2 divs example1, example2. We are providing styling to both of them through class ‘container_div’ as it is in both the divs. But to give styling to particular ‘example1’ div we are specifying styling through the id ‘example1’.

This will look like:

  • External styling

The external styling is the way to provide styling to one or more html documents together through CSS i.e Cascading Style sheets.

Cascading style sheets are the stylesheets that includes all the styling that we need to add to our html document. We just need to include the CSS file to the html document where we want that styling to apply. In this way we can use a single style sheet in more than one html document.

The CSS files are saved with extension .css.

Example: example_stylesheet.css

.container_div{

       border: 1px solid;

       padding-left: 12px;

}

#example1{

       background-color:grey;

}

In the html document we will just include this CSS through link tag.

<html>

   <head>

       <link rel="stylesheet" type="text/css" href="example_stylesheet.css">

   </head>

   <body>

<div class="container_div" id="example1">

    Example Div1

  </div>

<div class="container_div" id="example2">

      Example Div2

  </div>

</body>

This example will also work like the example for internal styling. The only difference is that we have not added the styling internally to the document. We separated the styling in the CSS file and included that CSS file in the document.


*NOTE : "This study material is collected from multiple sources to make a quick refresh course available to students."
 

This website uses cookies to improve user experience. By using our website you consent to all cookies in accordance with our Cookie Policy. More info. I Agree