HTML

Introduction to HTML

HTML stands fro Hyper Text Markup Language.
HTML provides various elements/tags to design Web page.
Each content on HTML Web page is the visual representation of the HTML tags.
Web browsers interpret the HTML tags/elements and render them on Web page.
HTML pages can be saved with either html or htm extension.

Sample HTML Code

<!DOCTYPE html>

<html>

   <head>

      <title>Sample page</title>

   </head>

   <body>

      <h1>Heading</h1>

      <p>This is paragraph.</p>

   </body>

</html>

Description

The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph

HTML Elements/Tags

HTML tags are used design/create web pages
Each tag has start and end point. Ex: <h1>Heading</h1>
Tag can have start tag and end tag or few tags can be closed within using forward slash / Ex: <input />
Tags can have multiple attributes
Attributes describes look and feel of the tag when it is rendered in the Web browser

Heading

To put heading in HTML document, heading tag is used. there are six versions of heading tag from <h1> to <h6>. The font size of heading text cab be controlled by providing desired number to heading i.e. 1,2,3,4,5,6. <h1> represents the maximum font size and <h2> is lesser than <h1> and so on till. Below are heading tags in decreasing order of size:

h1 > h2 > h3 > h4 > h5 > h6

Paragraph

A paragraph in HTML is marked up using <p> All the statements in the paragraph tags are grouped no matter they have new line in between. All test will be displayed as one paragraph.

<p>I am leaning paragraph in HTML.</p>

Irrespective of giving while spaces and new line in your paragraph. Every thing will be removed by the browser while rendering the HTML page. In order to put new line in the paragraph either new paragraph needs to be added or line break tag can be used.

Line break

Line break tag is represented as <br>. It does not has ending tag. Tags which does not require end tags are known as empty tags.

<p>I am leaning <br> paragraph <br> in HTML.</p>

Preformatted

Preformatted tag preserves the white spaces and new line breaks in the text. It is represnted as <pre>.

<pre>

  I am learning HTML.

  I am learning HTML tags.

  I prefer Preformatted tag if I have to write poem.

</pre>

Images

Image tag is marked up as <img> tag in HTML. It is a empty tag, it has attributes but no ending tag. Below is the syntax of how to use image tag:

<img src="url" alt="some_text" style="width:width;height:height;">

Example:

<img src="resources/images/profile-picture.jpg"

     alt="My Picture"

     style="width:250px;height:250px;">

src - src attribute specifies the web address of the images
alt - alt attributes specifies the alternate text for an images in case if image is not available of browser is not able to load because of slow connection.
style - style attribute specifies the height and width of the image in pixel(px). Putting px is optional.
width & height - these attribute are also available for <img> and can be used as altermative to style.
- <img src="url" alt="some_text" width="250" height="250">

Table

An HTML table is defined with the <table> tag. Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By default, table headings are bold and centered. A table data/cell is defined with the <td> tag. A caption can also be added for a table by using <caption> tag.

<table style="width:100%">

  <caption>Monthly savings</caption>

  <tr>

    <th>Month</th>

    <th>Savings</th>

  </tr>

  <tr>

    <td>January</td>

    <td>$100</td>

  </tr>

  <tr>

    <td>February</td>

    <td>$50</td>

  </tr>

</table>

Form

Form is represented as <form> An HTML form contains form elements. Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

<!DOCTYPE html>

<html>

<body>

<form action="/login.jsp">

  <label>User Name: </lable>

  <input type="text" name="userName" value="" placeholder="Enter user name">

  <br>

  <label>Password: </lable>

  <input type="password" name="password" value=""  placeholder="Enter password">

  <br>

  <input type="submit" value="Login">

</form>

<p>On clicking "Submit" button, the form-data will be sent to login.jsp page.</p>

</body>

</html>

Form Elements

There are various form elements those can be used to collect the data from user.

<input> Element

Input element is used to capture the data. There are various type of input elements. Input tag is empty tag so no end tag is required.

<input type="text" name="userName">
<input type="password" name="password">
<input type="radio" name="gender">
<input type="checkbox" name="languages">
<input type="submit" value="Login">
<input type="reset" value="Clear">
<input type="button" onclick="alert('Hello World!')" value="Click Me!">

<select> Element

Select element is used to define drop-down list. It has multiple options. To list options <option> tag is used. The <option> elements defines an option that can be selected. By default, the first item in the drop-down list is selected. To define a pre-selected option, add the selected attribute to the option:

<select name="country">

  <option value="India" selected>India</option>

  <option value="USA">USA</option>

  <option value="UK">UK</option>

  <option value="Australia">Australia</option>

</select>

<textarea> Element

The rows attribute specifies the visible number of lines in a text area. The cols attribute specifies the visible width of a text area.

<textarea name="message" rows="10" cols="30">

Text area provides sufficient area to write something. For example you can take customer feedback in textarea field of any testimonial can also be taken in textarea.

</textarea>

<button> Element

The <button> element defines a clickable button.

<button type="button" onclick="alert('Hello World!')">Click Me!</button>

The Registration page

<form action="register.jsp">

  <input type="text" name="name" placeholder="Enter Name"><br>

  <input type="password" name="password" placeholder="Enter Password"><br>

  <input type="email" name="email" placeholder="Enter Email"><br>

  <input type="number" name="mobile" placeholder="Enter Mobile Number"><br>

  <input type="radio" name="gender" value="Male">&nbsp;Male&nbsp;

  <input type="radio" name="gender" value="Female">&nbsp;Female<br>

  <input type="checkbox" name="lang" value="Java">&nbsp;Java

  <input type="checkbox" name="lang" value="C++">&nbsp;C++

  <input type="checkbox" name="lang" value="C">&nbsp;C<br>

  <select name="country">

   <option value="India" selected>India</option>

   <option value="USA">USA</option>

   <option value="UK">UK</option>

   <option value="Australia">Australia</option>

  </select><br>

  <input type="submit" value="Register">

 </form>

Google Sites

Report abuse