HTML5

HTML Tags and Their Use


What is Markup Language?

A Markup language provides a way to describe the structure of a web page. Specifying how text or graphics are displayed on the web page.

Types of web pages:-

  1.        Static
  2.            Dynamic

Static:- The static web pages are delivered to the users exactly as these are stored.
Dynamic:- In dynamic web pages the content is rendered at the time of request.


HTML Page Contains following structural Tags:-
  1.                   <!Doctype Html>
  2.            <Html>
  3.            <Head>
  4.            <Body>

<!Doctype Html>:- Provides an instruction to the browser about the version of the HTML.
<HTML>:- Specifies to the browser that a document is an HTML document.
<Head>:- Used to describe the header of the HTML document.
<Body>:- The <Body> tag sets the boundary for the content in HTML document.

Example:-
<!Doctype Html>
<HTML>
<HEAD>
-------Global settings using tags used within head section--------
</HEAD>
<body>
Contains the main content of the web page
</body>


Exploring the Head Tag:-
  1. Title
  2. Meta
  3. Base
  4. Style
  5. Link
  6. Script
  7. NoScript

Title:- Title tag defines the title of the document that appears in the title bar of the browser window.

<head>
<title> Write the title here</title>
</head>

Meta:- The <Meta> tag provides the additional information about the current document in the form of name and value pairs, such as the expiry date, author name and list of keywords.

<head>
<Meta name=”description” content = “HTML Content”>
<Meta name =”Keywords” content = “ Rahul, Sharma’s, Personal, Blog”>
<Meta name = “author” content = “Rahul Sharma”>
</head>

  1. Author:- Specifies the name of the author who has created the document.
  2. Description:- Specifies a short summary of the content of the web page.
  3. Keywords:- Specifies the keywords used in the web page.

<Base>:- The Base tag specifies a base URL or address of the related links on a page.

<head>
<Base href = “D:/images”>    /* Absolute path of the folder that contains all the image*/
</head>
<Body>
<img src = “imagename.jpg”>  /* Just specify the name of the image with their extension*/
</Body>

<Style>:- The style tag defines the style information associated with the HTML document.

<head>
<style type = “text/css”>
------Write CSS Code here----
</style>
</head>


<Link>:- The Link tag is used to establish the relationship of the current document with other documents in a website.

<head>
<Link type=”text/css” rel=”stylesheet” href=”style.css”> /* you can link your external stylesheet or css and javascript file in this way, style.css is the name of the file*/
For javascript
<link type=””text/javascript” href=”javascript.js”> /* javascript.js is the name of the file*/
</head>


<Script>:- Script tag specifies the client side script, such as javascript associated with the document.

<head>
<script type=”text/javascript”>
------javascript code here-----
</script>
</head>

<Noscript>:- Noscript tag displays an alternate content on the browsers on which the script have been disabled or on the browser that do not support the client side scripting.

<head>
<script type=”text/javascript”>
Alert(“Welcome to Rahul Sharma’s Blog”);
</script>
<noscript>
Your browser does not support scripts.
</noscript>
</head>

Exploring the Body Tag:-

Applyting Headings:-

<H1> To <H6>. <h1> being the biggest and <h6> being the smallest.

<!Doctype html>
<html>
<head>
</head>
<body>
<h1>Heading Tag Demo</h1>
<h2>Heading Tag Demo</h2>
<h3>Heading Tag Demo</h3>
<h4>Heading Tag Demo</h4>
<h5>Heading Tag Demo</h5>
<h6>Heading Tag Demo</h6>
</body>

</html>

<P> :-

The <p> tag adds a new paragraph in the HTML document. It specifies that there is a break in the content to begin a new paragraph.

<Details>:-

The details tag specifies the additional content that a user can view and hide as per the requirement.

<Summary>:-

Summary tag specifies a heading for the details tag.

<!Doctype html>
<html>
<head>
</head>
<body>
<p>Welcome to Rahul Sharma's Blog</p>
<Details>
<summary>Country Names</summary>
India<br>USA<br>BAN<br>UK
</details>
</body>
</html>

<Div>:-

The <div> tag is used to define a section in a document.

<Span>:-

The <span> tag enables you to group and apply styles to inline elements.

<!Doctype html>
<html>
<head>
</head>
<body>
<div>
<p>This is the<span style="color:red;"> demo</span> of div tag</p>
</div>
</body>

</html>

Formatting a web page:-

<B>:-

The <B> tag is used to make the text boldface.

<I>:-

The <I> tag is used to italicize the text.

<U>:-

The <u> tag is used to underline the text.


<LI>:-

The <LI> tag is used to create list.

Types of lists used in HTML:-

  1.        Ordered numbered list
  2.        Unordered or bulleted list
  3.         Definition list

Order List:-

An ordered list represents a set of items in a sequence or an order. The tag for the ordered list is <OL>.

Unordered List:-

An unordered list represents a set of related items that do not need to follow a specific order. The tag used for unordered list is <UL> tag.

Definition List:-

A definition list is used when one or more terms and their definitions are to be included in an HTML document. The definition list is represented by the <DL> tag. It contains two other tags <DT> and <DD>.

<DT>:- Stands for Data Term.

<DD>:- stands for Data Definition.

<BR>:-

The <br> tag is used to insert a single line break.

<HR>:-


The <HR> tag adds a horizontal rule in a web page. A rule is a straight line. The <HR> tag is an empty tag.


<!Doctype html>
<html>
<head>
</head>
<body>
<p>Welcome to Rahul Sharma's Blog</p>
<p><b><i><u>This is the formatting of a web page</u></i></b></p>
<ol type="i">
<li>India</li>
<li>USA</li>
<li>UK</li>
</ul>
<DL>
<DT>HTML</DT>
<DD>Hyper Text Markup Language</DD>
</DL>
<HR>
</body>

</html>

Types of TAG:-

        Paired Tag
         Empty Tag

Paired Tag:- Needs to be closed.
For e.g:- <HTML></HTML>, <P></p> etc.

Empty Tag:- No need to be closed.
For e.g:- <HR>

Inserting Image :-

<img src=”path of the image here” height=”200” width=”300” alt=”alternate text for image”>

Alt:-


The alt attribute is used to specify an alternate text for an image. This text is displayed if the image cannot be displayed on the browser.

Adding Navigation Links:-

<a href=”name of the html page you want to navigate”> Text to display the user here</a>

Href:-

The href attribute specifies the url of the documents that opens on clicking the Hyperlink.

Adding Multimedia Components:-

  1. <Audio>
  2. <Video>

<Audio>:- Used to add an audio file on web page.



<Audio src=”path of the audio file” autoplay=”autoplay” controls=”controls” loop=”loop”></audio>

<Video>:- Used to add video file on web page.

<video src=”Path of the video file” autoplay=”autoplay” controls=”controls” loop=”loop” height=”300” width=”400”></video>


Measuring Data and Displaying Progress Bar:-

<METER>:-

The <Meter> tag specifies a scalar measurement within a known range. It is also known as gauge. It can be used to display disk usage.

<Meter value=”4” min=”0” max=”10”></Meter>

Attributes:-





<Progress>:-

The <Progress> tag is used to display a progress of a task.

Attributes:-

Max:-Specifies the amount of work a task requires.
Value:-Specifies the amount of task that has been completed.


<Progress value=”12” max=”100”></Progress>


Identifying Semantic Tags:-
  1. <HGROUP>
  2. <ARTICLE>
  3. <ASIDE>
  4. <HEADER>
  5. <FOOTER>
  6. <NAV>
  7. <FIGURE>


<HGROUP>:-

Consider a situation where you need to group related headings and sub titles together.
For example:-

<HGROUP>
<h1>Book Your Hotel</h1>
<h2>Rating of the hotels</h2>
</HGROUP>

<ARTICLE>:-

The <ARTICLE> tag defines an independent or a self contained content. It is mostly used to specify independent entry for a blog or a magazines.
For example:-


<ASIDE>:-

The <Aside> tag specifies the content other than the main tag, such as a note or a tip. However, it should related to the main content.
For example:-


<HEADER>:-

The <Header> tag is used to group introductory headings or navigational links. You can use multiple <Header> tags in your documents.
For example:-


<FOOTER>:-

The <Footer> tag is used to represent footer for a web page or a section of a web page.
For example:-


<NAV>:-

The <nav> tag enables you to group links created by using the <A> tag in such a way that looks more semantic and structured. All the major navigational links are generally grouped inside the <nav> tag.
For example:-


<FIGURE>:-


The <Figure> tag is used to specify the self-contained content, such as images, Diagrams, Photos and code and associated caption with it. 



Chapter-2
Working with Tables and Frames



Table:-

Tables are used for structuring and displaying complex information in a structured format on a web page. Tables are used in web pages to enhance the readability by presenting information in a structured way.


The table is divided into the following logical sections:-

  1. Body
  2. Header
  3. Footer

Specifying Table Body:-

The table body contains data arranged in rows. Each row further comprises one or multiple columns. The rows of the body of a table can be grouped by using the <TBody> Tag. You can use more than one <TBODY> tag inside the table.

Creating Rows:-

For adding rows to a table, the <TR> tag is used. The contents of a row are placed between the <tr> and </tr> container tags.


Creating Columns:-

For adding columns to a row, the <td> tag is used. The <td> tag specifies the content of the columns. The content is enclosed within the <td> and </td> container tags.




Combining Multiple rows and columns into a single cell

Colspan:-



Rowspan:-





Creating Heading for the table column:-

To create the headings for the table column you can use the <th> tag. The <th> tag displays the heading in bold and is centrally aligned.



Specifying Table Footer:-




Specifying the Table Caption:-




Web Form

To create a Form on the web page you need to use <Form> Tag. The <Form> tag helps you define a form. It has an opening <Form> tag and closing </Form> tag.

The Form tag supports the following attributes:-
  1. Name
  2. ID
  3. Action
  4. Method
  5. Autocomplete
  6. Novalidate
  7. Target


Name:-  

The name attribute is used to specify a unique name for a form. It is used to uniquely identify a form in the get and post methods at the time of form submission.


Id:-  

The Id attribute is used to specify a unique Id for a form element on a web page. The Id attribute should be unique in the entire HTML document.

Action:- 

The action attribute specifies the URL of the page to which the contents of the form are submitted. If this attribute is missing, the URL of the document itself is assumed as the location for the form submission.


Method:-

 The method attribute is used to specify the format in which the data will be submitted to file or the URL specified in the action attribute.

It can take either of the following values:-

  1. Get
  2. Post


Get:- 

The get value appends the form data to the URL of the form as the name value pair at the time of form submission. Since the data is appended to the URL, it is always visible to the users. The size of data that can be submitted using the get method is limited to only 3000 characters.


Post:-

 The post value does not append the form data to the URL of the form when it is submitted. Therefore the data is not shown in the URL and offers a secure way of submitting the data. Also, a large amount of data can be sent using the post method.

Autocomplete:-

 The autocomplete attribute is used to specify whether a form should have the autocomplete feature on or off. If it is on, the browser automatically completes the values in the fields based on the values that the user has entered before.

Novalidate:- 

The novalidate attribute specifies that the data in the form should not be validated by the browser at the time of data submission. It is an empty attribute that does not contain any value.

Target:-

 The target attribute is used to specify the name of the frame or the window in which the response obtained after submitting the form needs to be displayed.

The target attribute can have one of the following values:-

_blank:- 
Specifies that the response should be displayed in a new frame or window.
_self:-   
Specifies that the response should be displayed in the same frame.
_parent:- 
Specifies that the response should be displayed in the parent frame or window.
_top:- 
Specifies that the response should be displayed in the full body of the window.
Frame_name:-
Specifies that the response should be displayed in the specified frame.

Exploring Form Elements:-
  1. <Input>
  2. <Select>
  3. <Label>
  4. <Fieldset>
  5. <Textarea>
  6. <Datalist>
  7. <Keygen>
  8. <Output>
  9. <Button>


<Input>:- 

The <input> tag is used to create input fields inside a form. These fields are used to accept input from users. Input fields are of various types, such as textbox, radio button or check box. The <input> tag has some important attributes such as type, value, name , ID, autocomplete, autofocus, form, required, pattern, placeholder.

Defining the type attribute:-

The type attribute has the following values:-

Text:-
create a single line editable text field. When the value of type attribute is text, two additional attributes size and maxlength can also be specified.

<input type=”text” name”fname” size=”20” maxlength=”20”>


Password:- 

Creates a password field, which will not display the characters being typed by the user.

Radio:- 

Creates a radio button, which lets the user select one of the options from a set of given options.
When the value of the type attribute is radio, an additional attribute  checked ca also be specified. The checked attribute is used to specify that the radio button appears pre-selected when the page loads.

Checkbox:- 

create a check box which lets the user select one or more options from a set of given options.

Submit:- 

Creates a submit button, which submits the form data to the location specified in the action attribute of the form. When the value of type attribute is submit some additional attributes , such as formaction, formmethod, formtarget and formnovalidate  can also be specified.

Formaction:- 

It is used to specify a URL where the form data would be submitted when the submit button is clicked. The URL specified in the formaction attribute of the submit button overrides the URL specified in the action attribute of the <Form> tag.


Formmethod:- 

It is used to specify the method, such as get and post, using which the form data will be sent to the file or URL specified in the action attribute of the form. The value specified for the formmethod attribute of the submit button overrides the value of the method attribute of the <Form> tag.

Formtarget:-

 It is used to specify the name of the frame or the window in which the response would be displayed when the form is submitted.

Formnovalidate:-

 Every form is validated by default, unless you use the novalidate attribute with the <Form> tag.

Reset:- 

Creates a reset button, which clears the values entered by a user in the form field.


Adds a field that is used to enter the url of a website. The value in this field is automatically validated for correctness when the form is submitted.

Email:- 

Creates a field in an HTML form to accept the email address from the users.

Range:-

 Creates a slider control to enter a numeric value within a range. The default range of the slider is 0 to 100. When the value of the type attribute is range, additional attributes such as min,max,value and step can also be specified. Min for minimum value, Max for maximum value, value attributes for current value within the range field.

<input type=”range” max=”50” min=”10” step=”5” value=”10”>

Date:- 

Is used to define a date field in an HTML form. It allows a user to select a date.

Time:- 

Is used to define a time field in an HTML form. It allows a user to select  time.

Number:- 

Is used to create an input field for entering a numeric value.


Is used to accept a telephone number from the user.

Image:-

 is used to specify an image to be used as a submit button. When the value of a type attribute as image, some additional attributes such as height, width, alt and src can also be specified.

Height and width:- Specify the height and width for the image.
Alt:- use to display an alternative text if image not displayed.
Src:- Specify the URL or address of the image.

Some attributes list:-
  1. Value
  2. Name
  3. ID
  4. Autocomplete
  5. Autofocus
  6. Required
  7. Pattern
  8. Placeholder


<Select>:-

The select tag is a container tag. It creates a drop down list on the form. It has the following 

attributes:-

Multiple:- Is used to allows the user to select more than one value from the drop down list by using the ctrl key.

Name:- Is used to specify the name of the selection list  that will be used at the time of submitting the form.

Size:- Is used to specify the number of visible items in the drop down list.

Autofocus:- Is used to ensure the focus is on the drop down list when the page loads.

Form:- Is used to specify the name of one or more forms to which the <select> tag belongs.

Defining the <Option> tag:-
It is always used within the <select> tag and cannot be used as a standalone tag. It is used to create a list of options in the drop down list and has the following attributes:-

Selected:- Is used to indicate that a particular option comes pre-selected when the page loads in the browser.
Value:- Is used to indicate the value of the option to be sent on the form submission when that option is selected by the user.
Disabled:- Is used to indicate that an option should be disabled when the page loads.

Defining <OPTGROUP> tag:-

The <OPTGROUP> tag is used to group the related options in one group. It is generally used when you have a long list of options and you want to group the related options in one to make it simpler.

Attributes:-

Disabled:- Is used to indicate that an option group should be shown disabled when the page loads.
Label:- Is used to specify a label for the option group .

<LABEL>:-
The <label> tag is used to define a table for the input fields. You can also define a label for the output tag.

Attributes:-
For:- Is used to bind the <label> tag with the input field and should have the same value as the ID attribute of the input field.
From:- Is used to specify the name of one or more forms to which the <label> tag belongs.

<FIELDSET>:-

The <FIELDSET> tag is used to combine and group related fields in a form. It creates a box around the selected field. You can also define the description for the fieldset by using the <Legend> tag. The <legend> tag is used to define the caption for the fieldset tag.

Attributes:-
Disabled:- The disabled attribute is used to indicate that a group of fields should be shown disabled when the page loads.

Form:- The form attribute is used to specify the name of one or more forms to which the <fieldset> tag belongs.

Name:- The name attribute is used to specify the name for the fieldset.

<TEXTAREA>:-

The <textarea> tag creates a field in which user can enter a large amount of text.

Attributes:-

Rows:-The rows attribute helps to set the number of rows of text that will be visible without scrolling up or down in the field.

Cols:- The cols attribute helps to set the number of columns of text that will be visible without scrolling right or left in the field.

<DATALIST>:-

The <DATALIST> tag is used to create a list of pre-defined options for an input field. It is used to provide an autocomplete feature on input fields so that the user can view the drop down list of pre- defined options whenever they input data.

<KEYGEN>:-

The <KEYGEN> tag is used to specify a key pair generated field in a form. Whenever the form is submitted, the private and public keys are generated, where the private key is stored locally, and public key is sent to the server. As a public key is stored in the server it can be used to authenticate a user in the future.

Attributes:-

Autofocus:- Is used to specify that the <KEYGEN> tag automatically gets the focus when a web page loads.

Disabled:- Is used to indicate that a <KEYGEN> tag should be shown disabled when page loads.

Name:- Used to specify a name for the <KEYGEN> tag.

Keytype:- Is used to specify the security algorithm of the key. It accepts the name of the various security algorithms, such as rsa, dsa, andec as its value.

Form:- Is used to specify the name of one or more forms to which the <KEYGEN> tag belongs.

<OUTPUT>:-

The <OUTPUT> tag is used to represent the result of a calculation.

Attributes:-

For:- Is used to specify the relationship between the input fields used and result generated for the calculation.

Form:- Is used to specify the name of one or more forms to which the <OUTPUT> tag belongs.

Name:- Is used to specify the name for the  <OUTPUT> tag.

<Button>:-

The <Button> tag is used to create a button. However unlike, input type submit you can specify text or an image within the button by using the <p> or <img> tags.

Attributes:-
  1. Type:- values are button, submit and reset.
  2. Name
  3. Form
  4. Autofocus
  5. Disabled















No comments:

Post a Comment

Insert, Delete, Update Using Entity Framework and LINQ in ASP.NET 1> Create Database First 2> Create Table 3> Add ADO...