HTML (HyperText Markup Language) uses tags to define the structure and content of a
webpage. Here are some common examples:
Code
<!DOCTYPE html>
<html lang="en">
<head>
<title>My First HTML Page</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is my first HTML page.</p>
<img src="image.jpg" alt="Image description">
<a href="https://www.example.com">Visit Example</a>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
<ol>
<li>Step 1</li>
<li>Step 2</li>
</ol>
</body>
</html>
Explanation of some key tags:
<!DOCTYPE html>: Declares the document type as HTML5.
<html>: The root element of the HTML page.
<head>: Contains metadata about the document, like the title, character set, and viewport.
<title>: Sets the title that appears in the browser tab.
<meta>: Provides metadata about the document, such as character set and viewport.
<body>: Contains the visible page content.
<h1>: A level 1 heading.
<p>: Defines a paragraph.
<img>: Embeds an image.
<a>: Defines a hyperlink.
<ul>: Defines an unordered list.
<ol>: Defines an ordered list.
<li>: Defines a list item.
Additional examples:
<br>: Inserts a single line break.
<b>: Defines bold text.
<i>: Defines italic text.
<strong>: Defines important text, often displayed in bold.
<em>: Defines emphasized text, often displayed in italic.
<div>: Defines a division or section in a document.
<span>: Defines a section within a document.
<form>: Defines an HTML form for user input.
<input>: Defines an input element, like text boxes, checkboxes, radio buttons, etc.
<button>: Defines a button.
Q: What is CGI in html
Ans: CGI, or Common Gateway Interface, is a standard protocol that enables web servers to
interact with external programs to generate dynamic web content. It acts as a bridge, allowing web
servers to execute scripts (often called CGI scripts) and receive the output, which is then presented
as a web page. This allows for dynamic content, such as user-specific pages or results from
database queries, to be created on the fly.
CGI Scripts:
These are external programs, typically written in languages like Perl or Python, that process user
requests and generate HTML output.
Example:
A form on a web page might submit data to a CGI script. The script would then use the data to access
a database, perform calculations, or interact with other systems, and then return the result as an
HTML page.
CGI-Bin:
A directory on the web server, often named "cgi-bin," where CGI scripts are stored.
HTML Tags Chart
source: www.web-source.net
Tag Name Code Example Browser View
<!--This can be viewed in the HTML part of a
<!-- comment Nothing will show
document-->
<A HREF="http://www.yourdomain.com/">Visit
<A - anchor Visit Our Site
Our Site</A>
<B> bold <B>Example</B> Example
<BIG> big (text) <BIG>Example</BIG> Example
body of Contents of your
<BODY> <BODY>The content of your page</BODY>
document webpage
The contents of your
The contents of your page<BR>The contents of page
<BR> line break
your page The contents of your
page
<CENTER>This will center your This will center your
<CENTER> center
contents</CENTER> contents
<DL> Definition Term
<DT>Definition Term
definition Definition of the term
<DD>Definition of the term
<DD> descriptio
<DT>Definition Term Definition Term
n
<DD>Definition of the term
</DL> Definition of the term
<DL> Definition Term
<DT>Definition Term
definition <DD>Definition of the term Definition of the term
<DL>
list <DT>Definition Term Definition Term
<DD>Definition of the term
</DL> Definition of the term
<DL> Definition Term
<DT>Definition Term
definition <DD>Definition of the term Definition of the term
<DT>
term <DT>Definition Term Definition Term
<DD>Definition of the term
</DL> Definition of the term
This is an <EM>Example</EM> of using This is an Example of
<EM> emphasis
the emphasis tag using the emphasis tag
embed <EMBED src="yourfile.mid" width="100%"
<EMBED>
object height="60" align="center">
<EMBED> embed <EMBED src="yourfile.mid" autostart="true"
Music will begin playing
when your page is
hidden="false" loop="false">
loaded and will only play
object <noembed><bgsound src="yourfile.mid"
one time. A control panel
loop="1"></noembed>
will be displayed to
enable your visitors to
stop the music.
<FONT FACE="Times New
<FONT> font Example
Roman">Example</FONT>
<FONT FACE="Times New Roman"
<FONT> font Example
SIZE="4">Example</FONT>
<FONT FACE="Times New Roman" SIZE="+3"
<FONT> font Example
COLOR="#FF0000">Example</FONT>
<FORM action="mailto:[email protected]">
Name: <INPUT name="Name" value=""
size="10"><BR> Name:
<FORM> form Email: <INPUT name="Email" value="" Email:
size="10"><BR>
<CENTER><INPUT type="submit"></CENTER>
</FORM>
<H1> heading 1 <H1>Heading 1 Example</H1> Heading 1 Example
<H2> heading 2 <H2>Heading 2 Example</H2> Heading 2 Example
<H3> heading 3 <H3>Heading 3 Example</H3> Heading 3 Example
<H4> heading 4 <H4>Heading 4 Example</H4> Heading 4 Example
<H5> heading 5 <H5>Heading 5 Example</H5> Heading 5 Example
<H6> heading 6 <H6>Heading 6 Example</H6> Heading 6 Example
heading of <HEAD>Contains elements describing the
<HEAD> Nothing will show
document document</HEAD>
Contents of your
webpage
horizontal
<HR> <HR>
rule
Contents of your
webpage
<HR> horizontal <HR WIDTH="50%" SIZE="3"> Contents of your
rule
webpage
Contents of your
webpage
Contents of your
webpage
horizontal
<HR> <HR WIDTH="50%" SIZE="3" NOSHADE>
rule
Contents of your
webpage
Contents of your
webpage
<HR>
horizontal
(Internet <HR WIDTH="75%" COLOR="#FF0000" SIZE="4">
rule
Explorer)
Contents of your
webpage
Contents of your
webpage
<HR>
horizontal
(Internet <HR WIDTH="25%" COLOR="#6699FF" SIZE="6">
rule
Explorer)
Contents of your
webpage
hypertext <HTML><HEAD><META><TITLE>Title of your
Contents of your
<HTML> markup webpage</TITLE></HEAD><BODY>Webpage
webpage
language contents</BODY></HTML>
<I> italic <I>Example</I> Example
<IMG SRC="Earth.gif" WIDTH="41" HEIGHT="41"
<IMG> image
BORDER="0" ALT="a sentence about your site">
Example 1:
<FORM METHOD=post Example 1:
<INPUT> input field ACTION="/cgi-bin/example.cgi">
<INPUT type="text" size="10" maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
<INPUT> input field Example 2: Example 2:
(Internet
Explorer) <FORM METHOD=post
ACTION="/cgi-bin/example.cgi">
<INPUT type="text" STYLE="color: #FFFFFF; font-
family: Verdana; font-weight: bold; font-size:
12px; background-color: #72A4D2;" size="10"
maxlength="30">
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 3:
<FORM METHOD=post
ACTION="/cgi-bin/example.cgi">
<TABLE BORDER="0" CELLSPACING="0"
CELLPADDING="2"><TR><TD
<INPUT> input field Example 3:
BGCOLOR="#8463FF"><INPUT type="text"
size="10" MAXLENGTH="30"></TD><TD
BGCOLOR="#8463FF" VALIGN="Middle"> <INPUT
type="image" name="submit"
src="yourimage.gif"></TD></TR> </TABLE>
</FORM>
Example 4:
<FORM METHOD=post
ACTION="/cgi-bin/example.cgi">
Enter Your Comments:<BR> Example 4:
<INPUT> input field <TEXTAREA wrap="virtual" name="Comments"
rows=3 cols=20
MAXLENGTH=100></TEXTAREA><BR>
<INPUT type="Submit" VALUE="Submit">
<INPUT type="Reset" VALUE="Clear">
</FORM>
Example 5:
<FORM METHOD=post
ACTION="/cgi-bin/example.cgi">
<CENTER>
Select an option: Example 5:
<SELECT>
<OPTION >option 1 Select an option:
<INPUT> input field <OPTION SELECTED>option 2 option 1 option 2
<OPTION>option 3 option 3 option 4
<OPTION>option 4 option 5 option 6
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
<INPUT type="Submit"
VALUE="Submit"></CENTER>
</FORM>
Example 6:
<FORM METHOD=post
ACTION="/cgi-bin/example.cgi">
Select an option:<BR> Example 6:
<INPUT type="radio" name="option"> Option 1
<INPUT type="radio" name="option" CHECKED> Select an option:
Option 2 Option 1
<INPUT type="radio" name="option"> Option 3 Option 2
<BR> Option 3
<INPUT> input field
<BR>
Select an option:<BR> Select an option:
<INPUT type="checkbox" name="selection"> Selection 1
Selection 1 Selection 2
<INPUT type="checkbox" name="selection" Selection 3
CHECKED> Selection 2
<INPUT type="checkbox"
name="selection"> Selection 3
<INPUT type="Submit" VALUE="Submit">
</FORM>
Example 1:
Example 1:
<MENU> List item 1
<LI type="disc">List item 1
<LI type="circle">List item 2 o List item 2
<LI type="square">List item 3
List item 3
</MENU>
<LI> list item
Example 2: Example 2:
i. List item 1
<OL type="i">
<LI>List item 1 ii. List item 2
<LI>List item 2
<LI>List item 3 iii. List item 3
<LI>List item 4 iv. List item 4
</OL>
Visit our <A
<LINK> link HREF="http://www.yourdomain.com/">site</A Visit our site
>
<MARQUEE
<MARQUEE bgcolor="#CCCCCC" loop="-1"
> scrolling
scrollamount="2" width="100%">Example Example Marquee
(Internet text
Marquee</MARQUEE>
Explorer)
<MENU> menu <MENU> List item 1
<LI type="disc">List item 1
<LI type="circle">List item 2 o List item 2
<LI type="square">List item 3 List item 3
</MENU>
<META name="Description" content="Description
of your site">
<META> meta Nothing will show
<META name="keywords" content="keywords
describing your site">
<META HTTP-EQUIV="Refresh"
<META> meta CONTENT="4;URL=http://www.yourdomain.com/ Nothing will show
">
<META http-equiv="Pragma" content="no-
<META> meta Nothing will show
cache">
<META> meta <META name="rating" content="General"> Nothing will show
<META> meta <META name="ROBOTS" content="ALL"> Nothing will show
<META NAME="ROBOTS"
<META> meta Nothing will show
content="NOINDEX,FOLLOW">
Example 1:
Example 1:
<OL> 1. List item 1
<LI>List item 1
<LI>List item 2 2. List item 2
<LI>List item 3
3. List item 3
<LI>List item 4
ordered </OL> 4. List item 4
<OL>
list Example 2:
Example 2:
a. List item 1
<OL type="a">
<LI>List item 1 b. List item 2
<LI>List item 2
<LI>List item 3 c. List item 3
<LI>List item 4 d. List item 4
</OL>
<OPTION> listbox <FORM METHOD=post Select an option:
option ACTION="/cgi-bin/example.cgi"> option 1 option 2
<CENTER> option 3 option 4
Select an option: option 5 option 6
<SELECT>
<OPTION>option 1
<OPTION SELECTED>option 2
<OPTION>option 3
<OPTION>option 4
<OPTION>option 5
<OPTION>option 6
</SELECT><BR>
</CENTER>
</FORM>
This is an example displaying the use of the This is an example
paragraph tag. <P> This will create a line break displaying the use of the
and a space between lines. paragraph tag.
Attributes: This will create a line
break and a space
Example 1:<BR> between lines.
<BR>
<P align="left"> Attributes:
This is an example<BR>
displaying the use<BR> Example 1:
of the paragraph tag.<BR>
<BR> This is an example
<P> paragraph displaying the use
Example 2:<BR>
<BR> of the paragraph tag.
<P align="right"> Example 2:
This is an example<BR>
displaying the use<BR> This is an example
of the paragraph tag.<BR> displaying the use
<BR> of the paragraph tag.
Example 3:<BR>
<BR> Example 3:
<P align="center">
This is an example<BR> This is an example
displaying the use<BR> displaying the use
of the paragraph tag. of the paragraph tag.
small
<SMALL> <SMALL>Example</SMALL> Example
(text)
strong
<STRONG> <STRONG>Example</STRONG> Example
emphasis
Example 1:
Example 1:
Column 1 Column 2
<TABLE BORDER="4" CELLPADDING="2"
<TABLE> table CELLSPACING="2" WIDTH="100%">
<TR> Example 2:
<TD>Column 1</TD>
<TD>Column 2</TD> Column 1 Column 2
</TR>
</TABLE>
Example 2: (Internet Explorer)
<TABLE BORDER="2" BORDERCOLOR="#336699"
CELLPADDING="2" CELLSPACING="2"
WIDTH="100%">
<TR>
<TD>Column 1</TD>
<TD>Column 2</TD>
</TR>
</TABLE> Example 3:
Column 1 Column 2
Example 3:
Row 2 Row 2
<TABLE CELLPADDING="2" CELLSPACING="2"
WIDTH="100%">
<TR>
<TD BGCOLOR="#CCCCCC">Column 1</TD>
<TD BGCOLOR="#CCCCCC">Column 2</TD>
</TR>
<TR>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
</TABLE>
<TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TD> table data <TD>Column 1</TD>
<TD>Column 2</TD> Column 1 Column 2
</TR>
</TABLE>
<TH> table <DIV align="center"><TABLE> Column Column Column
header <TR> 1 2 3
<TH>Column 1</TH>
<TH>Column 2</TH> Row 2 Row 2 Row 2
<TH>Column 3</TH> Row 3 Row 3 Row 3
</TR>
<TR> Row 4 Row 4 Row 4
<TD>Row 2</TD>
<TD>Row 2</TD>
<TD>Row 2</TD>
</TR>
<TR>
<TD>Row 3</TD>
<TD>Row 3</TD>
<TD>Row 3</TD>
</TR>
<TR>
<TD>Row 4</TD>
<TD>Row 4</TD>
<TD>Row 4</TD>
</TR>
</TABLE>
</DIV>
Title of your webpage
document
<TITLE> <TITLE>Title of your webpage</TITLE> will be viewable in the
title
title bar.
<TABLE BORDER="2" CELLPADDING="2"
CELLSPACING="2" WIDTH="100%">
<TR>
<TR> table row <TD>Column 1</TD> Column 1 Column 2
<TD>Column 2</TD>
</TR>
</TABLE>
<TT> teletype <TT>Example</TT> Example
<U> underline <U>Example</U> Example
Example 1:<BR>
Example 1:
<BR>
<UL> List item 1
<LI>List item 1
<LI>List item 2 List item 2
</UL>
<BR> Example 2:
unordered Example 2:<BR>
<UL> List item 1
list <UL type="disc">
<LI>List item 1 List item 2
<LI>List item 2
<UL type="circle"> o List item
<LI>List item 3 3
<LI>List item 4
o List item
</UL>
4
</UL>
