Quick Contact

    Introduction To HTML

    HTML- stands for Hyper Text Markup Language used to create web pages. It is used to specify how a text and graphics will appear on a page.

    HTML- consists of an element and tags.

    HTML- HTML page is actually stored on the computer locally that is hosting a website and the page is sent to your browser.

    HTML- it is saved with .html extension.

    Structure of HTML

    An HTML document can be optionally starts with an <!DOCTYPE> declaration. It is a good practise to use this declaration which is an instruction to the web browser in which version of HTML the page is written in. It is not case sensitive. It is declared before <html> tag and it does not require a closing tag.

    An HTML document consists of two main parts:

    1. head- It contains title of the web page.
    2. Body- It contains content of the web page.

    Now let us see the following illustration of HTML structure

    <!DOCTYPE html> tells about version of HTML page

    <html>

    <head>

    <title>title of the webpage…</title>

    <head> tag contains information about the web. </head>

    <body>content of the webpage…</body>

    </html> tags shows starting and ending of a page.

    Block Level and Inline Elements

    An HTML document comprises of elements. An element in html consists of starting and ending end tag with some content in between. Elements can be divided into two levels in HTML.

    Block level
    • Block level elements starts with a new line.
    • It appears in the body of the HTML page.
    • It covers full width of the HTML page.
    • It can contain other block level as well as inline level elements in it.
    • It can go from one line to multiple lines and has a line break before and after an element.

    Some examples of block level elements are- div <div> tag, ordered list <ol> tag, and unordered list <ul> tag etc.

    Inline level
    • Inline level elements do not start with a new line.
    • It also appears in the body of the HTML page.
    • It do not covers full width of the HTML page.
    • It cannot contain block level elements inside it.
    • It do not have a line break.

    Some examples of inline level elements are- anchor <a> tag, span <span> tag, and image <img> tag etc.

    Attributes & Values
    • The attributes and values complement each other.
    • An HTML element can have attributes.
    • Attributes are always mentioned with opening tag.
    • Attributes provides additional information related to an element.
    • Value always appear after attributes and placed inside (“”) inverted commas.
    Following are some of the examples of attributes along with values
    • The style Attribute- this attribute is used to specify color, font, size etc of an element. <p style=”color:black”>It is a textbook</p>
    • The src Attribute- this attribute is used to specify location of an image. <img src=”image_abc.png” width= “450” height=”550”> In the above example there are size attribute too. Both width and height of an image depicts its size.
    • The action Attribute- this attribute is used inside a form tag which tells a browser to send the form data to a form-handling PHP page etc.
    Comments tag

    An HTML Comments starts with

    It is used to insert comment inside an HTML document.

    HTML comments are visible to anyone that views its page source code but are not visible in a browser.

    It is a good practice to use comment as they make your code easier to understand to other developer who views your page source code.

    Example

    Types of Tags

    An HTML structure in every HTML document consists of images, text, hyperlinks etc. All of these comes under different category of tags. HTML tags begin with a less than (<) character and end with a greater than (>) character.

    Let us discuss some of the HTML tags below:

    Image Tag

    An <img> tag is used to display an image in an HTML page. The <img> tag comprises of two required attributes: src and alt. The src attribute provides the location of an image and alt attributes is used for an alternative text that is used to display in case there is no image. It tag does not contain any end tag.

    Example

    Link Tags (Text & Image)

    An <a> tag used to hyperlink a text or an image in an HTML document. An anchor tag allows you to hyperlink a page to another, you can also use an anchor tag in an image. An anchor tag has an end tag too. The most important attribute which is associated with an <a> tag is href which indicates to a link destination. Also, by default a visited hyperlink will appear in red color, unvisited hyperlink will appear as underline and blue color.

    Example

    Marquee Tag

    The <marquee> tag is used display a scrolling piece of text either horizontally or vertically in the browser depending on its setting done in an HTML page source code. This tag has many attributes such as width, direction, height, behaviour etc. Also, it is strictly prohibited to use this tag in HTML5, instead it is recommended to use CSS or JavaScript.

    Example

    List Tag (Ordered & Unordered)

    An HTML document consists of two types of list i.e., Ordered and Unordered list. An ordered list starts with the <ol> tag and by default it uses number show a list. Inside it each item starts with the <li> tag. An unordered list starts with the <ul> tag and by default it uses bullet (·) symbol for a list.

    Let us have a look at both examples

    Example

    Example

    Table Tag

    A <table> tag in an HTML document is used to create a HTML table. This tag consists of <tr>, <th>, and <td> elements where <tr> refers to a table row, <th> refers to a table heading, and <td> refers to table data in a particular HTML table.

    Now, look at the example below

    Example

    Form Tags

    The <form> tag is a block of elements used to create an interactive session where a user can fill up their personal details and send it to a web server. The sever then send the submitted data to database, process the information and send back required information to the user. A form holds information in various fields like textbox, checkboxes, radio buttons and many more.

    Example

    Audio, Video Tags

    The audio and video tags come under the category of HTML media. Before HTML5 came into use, the audio and video could only be played in a browser using a plug-in (like flash). However, HTML5 has allowed audio and video to be embedded in current browsers very effectively and quickly.

    Three formats that audio tag supports are:

    • mp3
    • ogg
    • wav
    Example

    Three formats that video tag supports are:

    • mp4
    • webm
    • ogg
    Example

    DIV Tag

    The <div> tag is used define a section in an HTML document. It is used as a container for other html elements. It is used to group a large section of html elements together and apply CSS to them. The <div> tag is used with blocklevel elements.

    Example

    HTML Forms

    An HTML form contains form elements.

    Form elements are different types of input elements, like text fields, checkboxes, radio buttons, submit buttons, and more.

    An example of form is given below:

    Example

    The <input> Element

    The <input> element is the most important form element.

    The <input> element can be displayed in several ways, depending on the type attribute.

    Here are some examples:

    Type Description
    <input type=”text”> Defines a one-line text input field
    <input type=”radio”> Defines a radio button (for selecting one of many choices)
    <input type=”submit”> Defines a submit button (for submitting the form)
    Radio Button Input

    defines a radio button.

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

    Example

    The Submit Button

    <input type=”submit”> defines a button for submitting the form data 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:

    Example

    The Target Attribute

    The target attribute specifies if the submitted result will open in a new browser tab, a frame, or in the current window.

    The default value is “_self” which means the form will be submitted in the current window. To make the form result open in a new browser tab, use the value “_blank”:

    Example

    <form action=”/action_page.php” target=”_blank”>

    There are two ways the browser client can send information to the web server.

    • The GET Method
    • The POST Method
    The GET Method

    The GET method sends the encoded user information appended to the page request. The page and the encoded information are separated by the ? character.

    http://www.test.com/index.htm?name1=value1&name2=value2

    The features of GET method of forms are given below:

    • The GET method produces a long string that appears in your server logs, in the browser’s Location: box.
    • The GET method is restricted to send upto 1024 characters only.
    • Never use GET method if you have password or other sensitive information to be sent to the server.
    • GET can’t be used to send binary data, like images or word documents, to the server.
    • The data sent by GET method can be accessed using QUERY_STRING environment variable.
    • The PHP provides $_GET associative array to access all the sent information using GET method.
    An program of GET methods is:

    The POST Method

    The POST method transfers information via HTTP headers. The information is encoded as described in case of GET method and put into a header called QUERY_STRING.

    The features of POST method are:

    • The POST method does not have any restriction on data size to be sent.
    • The POST method can be used to send ASCII as well as binary data.
    • The data sent by POST method goes through HTTP header so security depends on HTTP protocol. By using Secure HTTP you can make sure that your information is secure.
    • The PHP provides $_POST associative array to access all the sent information using POST method.

    Try out following example by putting the source code in test.php script.

    Summary

    The points below summarize the topics discussed:

    • An element in html consists of starting and ending end tag with some content in between.
    • An HTML Comments starts with
    • An HTML document consists of two types of list i.e., Ordered and Unordered list.
    • A form holds information in various fields like textbox, checkboxes, radio buttons and many more.
    • Before HTML5 came into use, the audio and video could only be played in a browser using a plug-in (like flash).

     

     

     

    Copyright 1999- Ducat Creative, All rights reserved.