INTRODUCTION HTML AND CODING22

 

INTRODUCTION HTML :-

HTML(HYPER TEXT MARKUP LANGUAGE) IS THE SCRIPTING LANGUAGE FOR CREATING WEB PAGES. IT IS DEVELOPED BY TIM BERNERS LEE. IN 1980 A MARKUP LANGUAGE WAS DEVELOPED TO CREATE DOCUMENTS, ALL THE WORD PROCESSORS ALLOW TO GIVE FORMATS TO THE TEXT. NOW IF SUCH DOCUMENTS NEED TO BE PUT ON THE WEB THEN THE DOCUMENTS NEEDS TO BE CONVERTED INTO HTML FORMAT WHICH THE BROWSER CAN UNDERSTAND. HTML IS THE LANGUAGE FOR DESIGNING WEB PAGES. HTML TAGS ARE THE HIDDEN KEYWORDS WITHIN WEB PAGES THAT DEFINE HOW YOUR WEB BROWSER MUST FORMAT .

What is HTML?

Okay, so this is the only bit of mandatory theory. In order to begin to write HTML, it helps if you know what you are writing.

HTML is the language in which most websites are written. HTML is used to create pages and make them functional.

The code used to make them visually appealing is known as CSS and we shall focus on this in a later tutorial. For now, we will focus on teaching you how to build rather than design.

The History of HTML

HTML was first created by Tim Berners-Lee, Robert Cailliau, and others starting in 1989. It stands for Hyper Text Markup Language.

Hypertext means that the document contains links that allow the reader to jump to other places in the document or to another document altogether. The latest version is known as HTML5.

A Markup Language is a way that computers speak to each other to control how text is processed and presented. To do this HTML uses two things: tags and attributes.

What are Tags and Attributes?

Tags and attributes are the basis of HTML.

They work together but perform different functions – it is worth investing 2 minutes in differentiating the two.

What Are HTML Tags?

Tags are used to mark up the start of an HTML element and they are usually enclosed in angle brackets. An example of a tag is: <h1>.

Most tags must be opened <h1> and closed </h1> in order to function.

What are HTML Attributes?

Attributes contain additional pieces of information. Attributes take the form of an opening tag and additional info is placed inside.

An example of an attribute is:

<img src="mydog.jpg" alt="A photo of my dog.">

In this instance, the image source (src) and the alt text (alt) are attributes of the <img> tag.

Golden Rules To Remember

1.   The vast majority of tags must be opened (<tag>) and closed (</tag>) with the element information such as a title or text resting between the tags.

2.   When using multiple tags, the tags must be closed in the order in which they were opened. For example:

<strong><em>This is really important!</em></strong>


SRC:- https://html.com/#ixzz7J40bQ8j3

Here, we have the following:

  • <!DOCTYPE html> — doctype. It is a required preamble. In the mists of time, when HTML was young (around 1991/92), doctypes were meant to act as links to a set of rules that the HTML page had to follow to be considered good HTML, which could mean automatic error checking and other useful things. However these days, they don't do much and are basically just needed to make sure your document behaves correctly. That's all you need to know for now.
  • <html></html> — the <html> element. This element wraps all the content on the entire page and is sometimes known as the root element.
  • <head></head> — the <head> element. This element acts as a container for all the stuff you want to include on the HTML page that isn't the content you are showing to your page's viewers. This includes things like keywords and a page description that you want to appear in search results, CSS to style our content, character set declarations, and more.
  • <meta charset="utf-8"> — This element sets the character set your document should use to UTF-8 which includes most characters from the vast majority of written languages. Essentially, it can now handle any textual content you might put on it. There is no reason not to set this and it can help avoid some problems later on.
  • <title></title> — the <title> element. This sets the title of your page, which is the title that appears in the browser tab the page is loaded in. It is also used to describe the page when you bookmark/favorite it.
  • <body></body> — the <body> element. This contains all the content that you want to show to web users when they visit your page, whether that's text, images, videos, games, playable audio tracks, or whatever else.

HTML Editors

1

Step 1: Open Notepad

2

Step 1: Open TextEdit (Mac) Open Finder > Applications > TextEdit. ...

3

Step 2: Write Some HTML. Write or copy the following HTML code into Notepad:

4

Step 3: Save the HTML Page. Save the file on your computer

5

Step 4: View the HTML Page in Your Browser.

 

 

 

BENEFITS OF HTML:-

 

HTML IS A SIMPLE BUT POWERFUL PROGRAMMING LANGUAGE

HTML DOCUMENTS ARE DEVICE INDEPENDENT(WORKS ON ANY PLATFORM)

LIMITATIONS OF HTML

HTML DOESNOT HAVE PROGRAMMING CAPABILITIES LIKE ANY OTHER LANGUAGE

IT IS DEPENDENT ON OTHER LANGUAGES LIKE JAVASCRIPT, PHP, PERL.

 

THERE ARE TWO TYPES OF TAG

 

EMPTY AND PAIRED

EMPTY TAGS ARE THOSE WHICH SHOULD BE OPEN BUT NOT NECESSARY TO CLOSE

PAIRED TAGS ARE THOSE WHICH SHOULD BE OPENED AND MUST BE CLOSE

 

<     >  ------------ </    >

 

·         MAKING OF WEB PAGES:-NOTE PAD OR WORD PAD

·         SAVE AS FILENAME    .HTML

·         TYPE :-ALL FILES

·         DISPLAY IN A WEB BROWSER:-CHROME, INTERNET EXPLORER, MOZILLA

 

TERMS RELATED TO WEB

 

1. WEB BROWSER: - IT IS A SOFTWARE IN WHICH WE CAN SEARCH ANY INFORMATION, THE MAIN ROLE OF BROWSER IS THAT ITS INTERPRETATED THE MARKUP LANGUAGE. SOME

 

BROWSERS ARE :

 

1. MICROSOFT INTERNET EXPLORER

2. NETSCAPE NAVIGATOR

3. MOSAIC  4. GOOGLE CHROME

 

2. WEB PORTAL :-WE GET INFORMATION ABOUT ALL OVER THE WORLD FOR EG REDIFF.MAIL, YAHOO.COM

 

3. PROTOCOLS :- SOME RULES AND REGULATION USED TO WORK ON INTERNET IS CALLED PROTOCOL

 

HTTP – HYPER TEXT TRANSFER PROTOCOL

FTP-FILE TRANSFER PROTOCOL

TCP-TRANSMISSION CONTROL PROTOCOL

IP-INTERNET PROTOCOL

 

4. URL-UNIFORM RESOURCE LOCATOR (IT IS AN ADDRESS OF WEB PAGE)

 

5. HOME PAGE- FIRST PAGE OF WEB SITE

 

6. WEBSITE IS OF TWO TYPES : STATIC AND DYNAMIC

 

WORLD WIDE WEB [WWW]

 

·        WEB IS A NETWORK OF COMPUTERS ALL OVER THE WORLD.

·        PROTOCOL MEANS RULES AND REGULATIONS

·        HTTP STANDS FOR HYPER TEXT TRANSFER PROTOCOL

·        TCP    STANDS FOR TRAMISSION CONTROL PROTOCOL

·        IP STANDS FOR INTERNET PROTOCOL

·        FTP STANDS FOR FILE TRANSFER PROTOCOL

·        ALL THE COMPUTERS USE A COMMUNICATION STANDS CALLED HTTP

·        WEB INFORMATION IS STAND IN HTML DOCUMENTS CALLED WEB PAGES.

·        WEB PAGES ARE FILES STORED ON COMPUTERS CALLED WEB SERVERS.

·        WEB BROWSER IS TO READ HTML DOCUMENTS AND DISPLAYS THEM AS WEB PAGES.

·        POPULAR WEB BROWSER ARE:- INTERNET EXPLORER, GOOGLE CHROME, MOZILLA FIREFOX, OPERA ETC

·        HTML STANDS FOR HYPER TEXT MARK UP LANGUAGE

ADVANTAGES OF HTML- EVERY BROWSER SUPPORTS HTML LANGUAGE

DISADVANTAGES- IT CAN CREATE ONLY STATIC WEB PAGES OR PLAIN PAGES.

HTML TAGS:-

IT MEANS HTML COMMANDS. TAGS ARE STARTING TAG < ..>-------------- </.> ENDING TAGS.

 

 

 

SAVING YOUR HTML

 

SAVE YOUR HTML FILE AS MYPAGE.HTML IN ANY HARD DISK DRIVE D:\, C:\, E:\ ETC.

 

RUN YOUR HTML PROGRAME:-

 

WITH THE HELP OF ANY BROWSERLIKE INTERNET EXPLORER, MOZILLA, OPERA, CHROME.

MAKING OF HTML PROGRAME IN NOTE PAD

 

NEW WEB PAGE CREATION:-

 

GRAPHICS AND TEXT :-PHOTO, LOGO, ANIMATE GRAPHICS

TEXT EDITOR:-NOTE PAD

 

SAVE ASTEST.HTML

 

Basic HTML tags

These are the other tags that HTML commonly uses in documents. They are not required but when used are very effective in creating professional effective websites.

HTML ELEMENTS: BASIC HTML TAGS SHOULD BE ADDED TO EVERY WEB PAGES OF A WEB SITE.

 

HTML TAGS:- <HTML>………….</HTML>

HEAD TAGS:-<HEAD>…………</HEAD>

TITLE TAGS:-<TITLE>………..</TITLE>

BODY TAGS:-<BODY>………..</BODY>

MAKING OF WEB PAGES:-NOTE PAD OR WORD PAD

SAVE AS FILENAME.HTML

TYPE :-ALL FILES

DISPLAY IN A WEB BROWSER:-CHROME, INTERNET EXPLORER, MOZILLA

·         BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>1

·         FONT TAGS:-<FONT COLOR=”RED”>…. </FONT>

·         <BODY BGCOLOR=”RED”>

·         <BODY TEXT=”YELLOW”>

·         <BODY TEXT=”YELLOW” BGCOLOR=”PINK”>

·         SECTION TAGS (HEADINGS) :-<H1>…………..</H1> HEADING 1 TO HEADING 6

·         BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>

·         FONT TAGS:-<FONT COLOR=”RED”>…. </FONT>

·         <BODY BGCOLOR=”RED”>

·         <BODY TEXT=”YELLOW”>

·         <BODY TEXT=”YELLOW” BGCOLOR=”PINK”

OTHER ELEMENTS:-

·         <I>…..ITALIC…</I>

·         <B>..BOLD..</B>

·         <U>..UNDERLINE..</U>

·         <STRIKE>COMPUTER </STRIKE>

<SUP>…</SUP>

·         10<SUP>2 </SUP>

<SUB>….</SUB>

·         H<SUB>2</SUB>O = H2O

·         <STRIKE>COMPUTER </STRIKE>

TABLES:-

·         BORDER=ADD BORDER TO A TABLE

·         TH=HEADINGS TO COLUMN

·         TR= CREATE ROWS

·         TD= TABLE DATAS CELL DATA

·         CELL PADDING= SPACING BETWEEN EDGES OF CELL AND ITS DATA

·         CELL SPACING= SPACING BETWEEN CELLS

·         ALIGN= HORIZONTAL ALIGN OF EACH CELL

·         VALIGN=VERTICAL ALIGN

·         ROW SPAN=SPAN CELL OR HEADING ACROSS

·         COLSAPAN=SPAN CELL OR HEADING ACROSS COLUMNS

LIST :-

ORDER LIST (OL)

·         <OL>

·         <LI> COST </LI>

·         <LI> COMPNANY </LI>

·         <LI>ITEM </LI>

·         </OL>

UN ORDER LIST (UL)

·         <UL>

·         <LI> COST </LI>

·         <LI> COMPNANY </LI>

·         <LI>ITEM </LI>

·         </UL>

DEFINATION LIST:- (DL)

·         DT (CREATE ITEMS)

·         DD (DISPLAY DEFINATION

·         EXAMPLE:-

·         <DL>

·         <DT> COST <DD> HOW MUCH?

·         </DL>

DEFINATION LIST:- (DL)

·         DT (CREATE ITEMS)

·         DD (DISPLAY DEFINATION

EXAMPLE:-

·         <DL>

·         <DT> COST <DD> HOW MUCH?

·         </DL>

 

 

Open tag

Close tag

Description

Example

<p>

</p>

This tag allows you to create paragraphs

My name is Fred.
I live in Medway

<h1>

</h1>

This is the largest heading

Heading 1

<h2>

</h2>

This is second biggest heading

Heading 2

<h3>

</h3>

This is the next heading

Heading 3

<h4>

</h4>

This is another heading

Heading 4

<h5>

</h5>

This is the second smallest heading

Heading 5

<h6>

</h6>

This is the smallest heading

Heading 6

<hr >

n/a

This is a horizontal line. You can use width and size attributes

<b>

</b>

This makes text bold

Bold text

<i>

</i>

This makes text italic

Italic text

<br />

n/a

This tag allows you to insert line breaks

abc
def

 

BASIC SKELETON OF HTML:-

<HTML>

<HEAD>

·         <MARQUEE> SCROLLING TEXT </MARQUEE>

<TITLE>WEB PAGES </TITLE>

</HEAD>

<BODY>

I AM LEARNING HTML8

</BODY>

</HTML>

 

LAB. ACTIVITY NO:-1.

<HTML>

<HEAD>

<TITLE>MOVING </TITLE>

</HEAD>

<BODY>

·         <MARQUEE BEHAVIOR=”ALTERNATE”BGCOLOR=”RED”WIDTH=”50%”HEIGHT=”100%”DIRECTION=”DOWN”>SCROLLING TEXT </MARQUEE>

·         <OL TYPE=”CIRCLE” OR”DIAMOND”>

<LI>I AM LEARNING HTML8

</BODY>

</HTML>

LAB. ACTIVITY NO:-2.

<HTML>

<HEAD>

<TITLE> TEST PAGE</TITLE>

</HEAD>

<BODY>

<A HREF="….."> GOTO PAGES </A> [ THIS COMMAND IS USED FOR  LINKING THE FILE]

<H1> HTML</HTML> </H1>

<H2> HTML</HTML></H2>

<H3> HTML</HTML></H3>

<H4> HTML</HTML></H4>

<H5> HTML</HTML></H5>

<H6> HTML</HTML></H6>

<P> AFTER LEARING HTML, I WILL MAKE MY WEB PAGE</P>

</BODY>

</HTML>

LAB. ACTIVITY NO:-3.

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE>JS BIN</TITLE>

</HEAD>

<BODY>

<A HREF=" D:\HTML">…..</A>

<P>HTML TUTORIAL</P>

<P>PYTHON TUTORIAL</P>

<P>PHP TUTORIAL</P>

</BODY>

</HTML>

 

LAB. ACTIVITY NO:-4.

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> TEST PAGE</TITLE>

</HEAD>

<BODY>

<B> BOLD TEXT </B> <BR>

<STRONG>STRONG TEXT</STRONG><BR>

<U>UNDERLINE</U><BR>

<BIG>BIG TEXT</BIG><BR>

<SMALL>SMALL TEXT</SMALL><BR>

<EM>EMPHASIZED TEXT</EM><BR>

</BODY>

</HTML>

LAB. ACTIVITY NO:-5.

<HTML>

<HEAD>

<TITLE> TEST PAGE </TITLE>

</HEAD>

<IMG SRC=" "WIDTH="55" HEIGHT="40">

<BODY>

<H1> HTML</H1>

<P> AFTER LEARING HTML, I WILL MAKE MY WEB PAGE</P>

</BODY>

</HTML>

 

 

LAB. ACTIVITY NO:-6.

 

<!DOCTYPE HTML>

<HTML>

<HEAD>

<TITLE> TEST PAGE</TITLE>

</HEAD>

<BODY>

</BODY>

<H1 ALIGN=”LEFT”> HEADING 1<H1>

<H2 ALIGN=”RIGHT”> HEADING 2<H2>

<H3 ALIGN=”CENTRE”> HEADING3 <H3>

</BODY>

</HTML>

<HTML>

<HEAD>

<TITLE> BULLET</TITLE>

</HEAD>

<BODY>

<H4> NUMBERED LIST: </H4>

<OL>

<LI>ONE</LI>

<LI>TWO</LI>

<LI>THREE</LI>

</OL>

</BODY>

</HTML>

BULLET:-

<HTML>

<HEAD>

<TITLE> BULLET</TITLE>

</HEAD>

<BODY>

<UL TYPE=”CIRCLE”>

<LI>ONE</LI>

<LI>TWO</LI>

<LI>THREE</LI>

<UL TYPE=”DISC”>

<L1> ONE</LI>

<LI> TWO</LI>

<LI> THREE</LI>

<UL TYPE=”SQUARE”>

<L1>ONE</LI>

<LI>TWO</LI>

<LI>THREE</LI>

</UL>

</BODY>

</HTML>

LAB. ACTIVITY NO:-7.

<TABLE BORDER=”2” WIDTH=”100%” HEIGHT=”100%” CELLPADDING=”20” CELLSPACING=”4”

<TR>

<TH COLSPAN=3>HTML PRESS</TH>

TH ROWSPAN=4>HTML PRESS </TH>

</TR>

<TR>

<TH> BOOK NAME </TH>

<TH> AUTHOR </TH>

<TH>PRICE</TH>

</TR>

<TD>BASIC COMPUTER </TD>

<TD> R GUPTA</TD>

<TD> RS.199/- </TD>

</TR>

</TABLE>

 

LAB. ACTIVITY NO:-8

<HTML>

<HEAD>

</HEAD>

<FRAMESET ROWS=”50%,50%”>

<FRAME SRC=””>

</FRAME>

</HTML>

</body>

</html>

 

LAB. ACTIVITY NO:-9

 

<HTML>

<HEAD>

<TITLE>FORM</TITLE>

<BODY>

<H1 ALIGN="CENTER">EXECUTIVE FORM</H1>

<FORM METHOD="POST">

<P><STRONG>NAME:</STRONG><INPUT TYPE+"TEXT"NAME=THE NAME"></P></P>

<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">

<INPUT TYPE="RESET" VALUE="CLEAR FORM"></P>

</FORM>

<HR>

</BODY>

</HTML>

LAB. ACTIVITY NO:-10

 

<html>

   <head>

      <title>HTML frame Tag</title>

   </head>

      <FRAMESET COLS="20%,80%">

      <FRAME src=left.html>

      <FRAME src=right.html>

      </FRAMESET> 

      <BODY>This is the left frame</BODY>

      <BODY BGCOLOR="blue" TEXT="white">This is the right frame with a blue background and white text.</BODY>

      <BODY>

      This is the left frame <P>

      <a href="red.html">red</a> <br>

      </BODY>

      <BODY bgcolor="red" text="white">

      This is the right frame

      </BODY>

      <FRAMESET COLS = "20%,80%">

      <FRAME src = "left.html"   name="left" >

      </FRAMESET>

      </BODY> 

</html>

LAB. ACTIVITY NO:-11

 

<HTML>

<HEAD>

<TITLE>FORM</TITLE>

<BODY>

<H1 ALIGN="CENTER">EXECUTIVE FORM</H1>

<FORM METHOD="POST" ACTION="HTTP://WWW.MCP.COM">

<P><STRONG>NAME:</STRONG><INPUT TYPE+"TEXT"NAME=THE NAME"></P></P>

<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">

<INPUT TYPE="RESET" VALUE="CLEAR FORM"></P></FORM><HR>

</BODY>

</HTML>

LAB. ACTIVITY NO:-12

 

<HTML>

<HEAD>

<TITLE> JOB APPLICATION </TITLE>

</HEAD>

<BODY>

<H1 ALIGN="CENTER"> FOR THE POST OF COMPUTER</H1>

<HR>

<FORM METHOD="POST">

<P>NAME:<INPUT TYPE=TEXT"NAME=THENAME"></P>

<P>GENDER:

<INPUT CHECKED TYPE="RADIO" NAME=THEGENDER" VALUE="MALE">MALE

<INPUT CHECKED TYPE="RADIO" NAME=THEGENDER" VALUE="FEMALE">FEMALE

</FORM>

<HR>

</BODY>

</HTML>

 

 

 

Solutions

 

1.

<html>

<head>

<title>Education details</title>

</head>

 

<body>

<h1 align="center" style="color:blue">EDUCATION DETAILS</h1><br><br>

<table border="1" background="gray" cellspacing="5" cellpadding="5">

<th>SNo</th>

<th>Course</th>

<th>Board/University</th>

<th>School/College</th>

<th>Year of Passing</th>

<th>Percentage</th>

<tr>

<td>1</td>

<td>10</td>

<td>ICSE</td>

<td>DPS</td>

<td>2008</td>

<td>90</td>

</tr>

<tr>

<td>2</td>

<td>12</td>

<td>ICSE</td>

<td>DPS</td>

<td>2010</td>

<td>95</td>

</tr>

</table>

</body>

</html>

 

2.  <html>

<head>

<title>RESUME | JOHN DOE</title>

</head>

<body>

<!-- BEGIN DIV FOR OVERALL BOX -->

<div id="resume">

<!-- THIS DIV CENTERS OUR HEADING -->

 

<h1>John Doe</h1>

<h2>4242 Ghila Road</h2>

<h2>Tucson, AZ 85701</h2>

<br />

<!-- END CENTERING DIV -->

</div>

 

<h2>Profile</h2>

<p>

Desires a resident position in the Bastyr University Acupuncture and Oriental Medicine Residency Program. Able to be effective in a practice of any size.

Draw on experience with a range of patient issues, including additional work in women and children’s care. Interested in health education for homeless. Strong desire to contribute to the success of a program through an ability to initiate and maintain relationships. Creative developer and presenter of educational information.

</p>

<br />

<h2>Education</h2>

<h3>Masters of Acupuncture and Oriental Medicine,

<br />

Graduating June 2003</h3>

<p>

Bastyr University, Kenmore, WA 1999

</p>

<ul>

<li>

Completing an accredited program of coursework and supervised

practice

in Acupuncture and Oriental Medicine. Extensive exposure to issues involving

women and children.

</li>

</ul>

<h3>Research Project</h3>

<ul>

<li>

Assisted the primary investigator in a double blind, randomized controlled

trail conducted at the Bastyr Center for Natural Health that evaluated

the

effectiveness of Chinese herbs towards the control of Diabetes

Mellitus in

post-menopausal women. Co-authored the research report that has

been

submitted for publication to the Journal of Traditional Chinese

Medicine.

</li>

</ul>

<h3>Bachelor of Science, Zoology</h3>

<p>

Miami University, Oxford, OH 1991 - 1995

</p>

<ul>

<li>

Participated in a community service project to increase citizen participation

in a clean up campaign.

</li>

<li>

Served as project leader in a fund raising project sponsored by the

University

Student Council towards helping homeless youths’ return back to

school.

</li>

</ul>

<br />

<h2>Related Experience</h2>

<h3>Bastyr University, Kenmore, WA 1999-present</h3>

<p>

Teaching Assistant

</p>

<ul>

<li>

 

</li>

<li>

 

</li>

</ul>

Assists professor in the Anatomy & Physiology class.

 

 

Answers questions and demonstrate as needed.

<h3>Kenmore Youth Ministry, Kenmore, WA 2000-2001</h3>

<p>

Camp Group Leader

</p>

<ul>

<li>

 

</li>

<li> helping

</li>

</ul>

Participated in community youth group activities.

 

 

Developed activity programs now utilized by the youth ministry in children improve reading skills.

<h3>Franciscan Care Center Nursing Home,

<br />

Seattle, WA 1999 - 2000 </h3>

<p>

Volunteer Recreation Worker

</p>

<ul>

<li>

 

 

</li>

<li>

 

</li>

</ul>

Provided social support to patients by reading to them, writing letters, and visiting with them.

 

 

Formed friendships which enriched lives of patients

 

<!-- THIS DIV CENTERS OUR LINKS -->

<div id="bottom">

<p>

<a href="index.html">RESUME HOME</a> | <a href="#">SIMPLE RESUME</a> | <a href="resume.html">COMPLEX RESUME</a> | <a href="code.html" target="_blank">SEE HTML</a> | <a href="resume.css" target="_blank">SEE CSS</a>

</p>

</div>

<!-- END CENTERING LINKS -->

 

<!-- END DIV FOR OVERALL BOX -->

</div>

</body>

</html>

 

3.     <html>

<head>

<title>Gargi's Page</title>

</head>

<body bgcolor="gray">

<font size="8">

<a href="about_us.html">ABOUT US</a>&nbsp;&nbsp;

 

<a href="biography.html">OUR SERVICES</a>&nbsp;&nbsp;

<a href="contact_us.html">CONTACT US</a></font>

</body>

</html>

 

 

4.            <div id="login_form">

<form name="f1" method="post" action="profile.html" id="f1">

<table>

<tr>

<td class="f1_label">User Name :</td><td><input type="text" name="username" value="" />

</td>

</tr>

<tr>

<td class="f1_label">Password :</td><td><input type="password" name="password" value="" />

</td>

</tr>

<tr>

<td>

<input type="submit" name="login" value="Log In" style="font- size:18px; " />

</td>

</tr>

</table>

</form>

</div>

 

5.              <html>

<head>

<script type="text/javascript" src="validate.js"></script>

</head>

<body>

<form action="#" name="StudentRegistration" onsubmit="return(validate());">

 

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2">

 

<tr>

<td colspan=2>

<center><font size=4><b>Student Registration Form</b></font></center>

</td>

</tr>

 

<tr>

<td>Name</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>

 

<tr>

<td>Father Name</td>

<td><input type="text" name="fathername" id="fathername" size="30"></td>

</tr>

<tr>

<td>Postal Address</td>

<td><input type="text" name="paddress" id="paddress" size="30"></td>

</tr>

 

<tr>

<td>Personal Address</td>

<td><input type="text" name="personaladdress" id="personaladdress" size="30"></td>

</tr>

 

<tr>

<td>Sex</td>

<td><input type="radio" name="sex" value="male" size="10">Male

<input type="radio" name="sex" value="Female" size="10">Female</td>

</tr>

 

<tr>

<td>City</td>

<td><select name="City">

<option value="-1" selected>select..</option>

<option value="New Delhi">NEW DELHI</option>

<option value="Mumbai">MUMBAI</option>

<option value="Goa">GOA</option>

<option value="Patna">PATNA</option>

</select></td>

</tr>

 

<tr>

<td>Course</td>

<td><select name="Course">

<option value="-1" selected>select..</option>

<option value="B.Tech">B.TECH</option>

<option   value="MCA">MCA</option>

<option   value="MBA">MBA</option>

<option value="BCA">BCA</option>

</select></td>

</tr>

 

<tr>

<td>District</td>

<td><select name="District">

<option  value="-1"  selected>select..</option>

<option   value="Nalanda">NALANDA</option>

<option value="UP">UP</option>

<option value="Goa">GOA</option>

<option value="Patna">PATNA</option>

</select></td>

 

</tr>

 

<tr>

<td>State</td>

<td><select Name="State">

<option value="-1" selected>select..</option>

<option value="New Delhi">NEW DELHI</option>

<option value="Mumbai">MUMBAI</option>

<option value="Goa">GOA</option>

<option value="Bihar">BIHAR</option>

</select></td>

</tr>

<tr>

<td>PinCode</td>

<td><input type="text" name="pincode" id="pincode" size="30"></td>

 

</tr>

<tr>

<td>EmailId</td>

<td><input type="text" name="emailid" id="emailid" size="30"></td>

</tr>

 

<tr>

<td>DOB</td>

<td><input type="text" name="dob" id="dob" size="30"></td>

</tr>

 

<tr>

<td>MobileNo</td>

<td><input type="text" name="mobileno" id="mobileno" size="30"></td>

</tr>

<tr>

<td><input type="reset"></td>

<td colspan="2"><input type="submit" value="Submit Form" /></td>

</tr>

</table>

</form>

</body>

</html>

6.

 

 

<html>

<head>

<title>Institute of Engineering</title>

</head>

<body>

<ul>

<li><a href="http://my.wm.edu">myWM</a></li>

<li><a href="http://directory.wm.edu/people/">Directory</a></li>

<li><a href="http://events.wm.edu">Events</a></li>

<li><a href="/about/visiting">Visit</a></li>

<li class="last-side-tactical"><a href="/atoz" id="wm- az">W&amp;M A-Z</a></li>

</ul>

</nav>

<nav id="side_top_nav">

<ul>

<li ><a href="/about" id="about" title="About William &#38; Mary">About</a></li>

<li ><a href="/academics" id="academics" title="InstituteAcademics">Academics</a></li>

<li ><a href="/admission" id="admission" title="InstituteAdmission &#38; Aid">Admission &#38; Aid</a></li>

<li ><a href="/research" id="research" title="InstituteResearch">Research</a></li>

<li ><a href="/campuslife" id="campus" title="InstituteCampus Life">Campus Life</a></li>

<li ><a href="/news" id="news_events" title="InstituteNews">News</a></li>

<li><a href="http://www.tribeathletics.com/" id="athletics" title="InstituteAthletics">Athletics</a></li>

<li><a href="http://www.wmalumni.com/" id="alumni" title="InstituteAlumni">Alumni</a></li>

<li><a href="/giving" id="giving" title="InstituteGiving">Giving</a></li>

</ul>

</nav>

</div>

 

<header id="main-header"><div id="topbar"><a class="action_left icon-font" href="#" id="menu_btn">&#xe9bd;</a><a class="mobile-header-logo" href="index.php"><img alt="William and Mary" id="top_mark" src="img/wm_wordmark_single_line_green.png"/></a><a class="action_right icon-font" href="#" id="search_btn">&#xe986;</a></div>

<div id="desktop_header">

 

 

 

<nav id="tactical_nav">

<ul>

<li>

<a href="http://my.wm.edu">myWM</a>

</li>

<li>

<a href="http://directory.wm.edu/people/">Directory</a>

</li>

<li>

<a href="http://events.wm.edu">Events</a>

</li>

<li>

<a href="/about/visiting">Visit</a>

</li>

<li>

<a href="/atoz" id="wm-az">W&amp;M A-Z</a>

</li>

</ul>

< 

</nav>

 

<nav id="global_nav"><ul><li><a href="/about" id="about" >About</a>

</li><li><a href="/academics" id="academics" >Academics</a>

</li><li><a href="/admission" id="admission" >Admission &amp; Aid</a>

</li><li><a href="/research" id="research" >Research</a>

</li><li><a href="/campuslife" id="campus" >Campus life</a>

</li><li><a href="/news" id="news_events" >News</a>

</li><li><a href="http://www.tribeathletics.com/" id="athletics">Athletics</a>

</li><li><a href="http://www.wmalumni.com/" id="alumni">Alumni</a>

</li><li><a href="/giving" id="giving" >Giving</a>

</li></ul>

</nav>

 

</div>

<!-- end desktop_header -->

</header>

<!-- end main_header -->

 

 

 

 

<nav class="footer_col" id="audience_links">

<a href="/alumnigateway">Alumni</a>

<a href="/currentstudents">Current Students</a>

<a href="/employers">Employers</a>

<a href="/facultystaff">Faculty &amp; Staff</a>

<a href="/parentsandfamilies">Parents &amp; Families</a>

<a href="/friends">Friends &amp; Neighbors</a>

</nav>

<nav class="footer_col" id="additional_links">

<a href="http://swem.wm.edu">Library</a>

<a href="/offices/hr/careers">Careers at W&amp;M</a>

<a href="/offices/compliance/policies">Policies</a>

<a href="/about/administration/emergency">Emergency Information</a>

<a href="/aboutthissite">About this Site</a>

</nav>

<div id="contact_info">

<a href="/" class="wordmark">

<img alt="The College of William and Mary" id="footer_mark" src="/img/wm_wordmark_single_line_white.png"/>

</a>

<p>Williamsburg, VA

<br/>

<a href="/contactus" class="contact-us">Contact Us</a> All Rights Reserved &#169;

<span id="footercopyyear"></span>

</p>

</div>

</div>

</footer>

 

<div></div>

</body>

</html>

 

 

7.

 

<html>

<head>

<title> My First Page </title>

</head>

<body>

<UL type='A'>

<LI>Red

<LI>Blue

<LI>Green

<LI>White

</UL><br>

 

<OL type='square'>

<LI>Red

<LI>Blue

<LI>Green

<LI>White

</OL><br>

 

<dl>

<dt>Red</dt>

<dd>Red color has the highest wavelength.</dd>

<dt>Violet</dt>

<dd>Violet color has the shortest wavelength.</dd>

</body>

</html>

 

8.

 

<html>

<FRAMESET Rows = "30%,*" >

<Frame Src="head.html" >

<FRAMESET Cols = "25%,*">

<Frame Src="navigation.html" >

<Frame Src="content.html" >

</FRAMESET>

</FRAMESET>

</html>

 

 

9.

<!DOCTYPE html>

<html>

 

<body>

<h1 style="color:blue" align="center">This is a Blue Heading</h1>

<p style="color:red">This is a red paragraph with inline css</p>

 

</body>

</html>

 

10.

 

<!DOCTYPE html>

<html>

<head>

<style> h1 {

color:blue;

font-family:verdana; font-size:300%;

}

p { color:red;

font-family:courier; font-size:160%;

}

</style>

</head>

<body>

 

<h1>This is a heading</h1>

<p>This is a paragraph.</p>

 

</body>

</html>

 

11.

Css

 

#para1 { color: red;

text-align: center; font-family:courier;

}

 

h1{

color:blue; font-size:200%; text-align:right;

background-color: #6495ed;

}

 

#para {

color: green;

text-align: center; font-size:500%;

}

 

p{

border:1px solid black; padding:10px; margin:30px;

background-color: #e0ffff;

}

 

body {

 

background-image:url("bird.jpeg");

 

}

 

div{

text-decoration:overline; font-size:200%;

}

 

 

 

Html code

 

<!DOCTYPE html>

<html>

<head>

<link rel="stylesheet" href="mystyle.css">

</head>

<body>

 

<h1>This is a heading</h1>

<p id="para">This is a green paragraph.</p>

<p id="para1">This is a red paragraph.</p>

 

<p>This is some paragraph.</p>

 

<div>html is a markup language. it stands for hypertext mark up language. it is used to create web pages. html has a very simple syntax. html uses tags for formatting and for placing objects. html is interpreted by the browser. it is case-insensitive.</div>

 

</body>

</html>

 

12.

 

<html>

<head>

<title>

 

Greetings </title>

</head>

<body>

<script language="JavaScript">

firstName = prompt("Please enter your name", ""); document.write("Hello " +

 

firstName + ", welcome to my Web page.");

</script>

<p> This is my web page... </p>

</body>

</html>

 

 

13.

 

<html>

<head>

<script type="text/javascript" src="validate.js"></script>

</head>

<body>

<form action="#" name="StudentRegistration" onsubmit="return(validate());">

 

<table cellpadding="2" width="20%" bgcolor="99FFFF" align="center" cellspacing="2">

 

<tr>

<td colspan=2>

<center><font size=4><b>Student Registration Form</b></font></center>

</td>

</tr>

 

<tr>

<td>Name</td>

<td><input type=text name=textnames id="textname" size="30"></td>

</tr>

 

<tr>

<td>Father Name</td>

<td><input type="text" name="fathername" id="fathername" size="30"></td>

</tr>

<tr>

<td>Postal Address</td>

<td><input type="text" name="paddress" id="paddress" size="30"></td>

</tr>

 

<tr>

<td>Personal Address</td>

<td><input type="text" name="personaladdress" id="personaladdress" size="30"></td>

</tr>

 

<tr>

<td>Sex</td>

<td><input type="radio" name="sex" value="male" size="10">Male

<input type="radio" name="sex" value="Female" size="10">Female</td>

</tr>

 

<tr>

<td>City</td>

<td><select name="City">

<option value="-1" selected>select..</option>

<option value="New Delhi">NEW DELHI</option>

<option value="Mumbai">MUMBAI</option>

<option value="Goa">GOA</option>

<option value="Patna">PATNA</option>

</select></td>

</tr>

 

<tr>

<td>Course</td>

<td><select name="Course">

<option value="-1" selected>select..</option>

<option value="B.Tech">B.TECH</option>

<option   value="MCA">MCA</option>

<option   value="MBA">MBA</option>

<option value="BCA">BCA</option>

</select></td>

</tr>

 

<tr>

<td>District</td>

<td><select name="District">

<option  value="-1"  selected>select..</option>

<option   value="Nalanda">NALANDA</option>

<option value="UP">UP</option>

<option value="Goa">GOA</option>

<option value="Patna">PATNA</option>

</select></td>

 

</tr>

 

<tr>

<td>State</td>

<td><select Name="State">

<option value="-1" selected>select..</option>

<option value="New Delhi">NEW DELHI</option>

<option value="Mumbai">MUMBAI</option>

<option value="Goa">GOA</option>

<option value="Bihar">BIHAR</option>

</select></td>

</tr>

<tr>

<td>PinCode</td>

<td><input type="text" name="pincode" id="pincode" size="30"></td>

 

</tr>

<tr>

<td>EmailId</td>

<td><input type="text" name="emailid" id="emailid" size="30"></td>

</tr>

 

<tr>

<td>DOB</td>

<td><input type="text" name="dob" id="dob" size="30"></td>

</tr>

 

<tr>

<td>MobileNo</td>

<td><input type="text" name="mobileno" id="mobileno" size="30"></td>

</tr>

<tr>

<td><input type="reset"></td>

<td colspan="2"><input type="submit" value="Submit Form" /></td>

</tr>

</table>

</form>

</body>

</html>

Javascript

 

 

 

function validate()

{

if( document.StudentRegistration.textnames.value == "" )

{

alert( "Please provide your Name!" ); document.StudentRegistration.textnames.focus() ; return false;

}

if( document.StudentRegistration.fathername.value == "" )

{

alert( "Please provide your Father Name!" ); document.StudentRegistration.fathername.focus() ; return false;

}

 

if( document.StudentRegistration.paddress.value == "" )

{

alert( "Please provide your Postal Address!" ); document.StudentRegistration.paddress.focus() ; return false;

}

if( document.StudentRegistration.personaladdress.value == "" )

{

alert( "Please provide your Personal Address!" ); document.StudentRegistration.personaladdress.focus() ; return false;

}

if ( ( StudentRegistration.sex[0].checked == false ) && ( StudentRegistration.sex[1].checked == false ) )

{

alert ( "Please choose your Gender: Male or Female" ); return false;

}

if( document.StudentRegistration.City.value == "-1" )

{

alert( "Please provide your City!" ); document.StudentRegistration.City.focus() ;

return false;

}

if( document.StudentRegistration.Course.value == "-1" )

{

alert( "Please provide your Course!" );

 

return false;

}

if( document.StudentRegistration.District.value == "-1" )

{

alert( "Please provide your Select District!" );

 

return false;

}

if( document.StudentRegistration.State.value == "-1" )

{

alert( "Please provide your Select State!" );

 

return false;

}

if( document.StudentRegistration.pincode.value == "" || isNaN( document.StudentRegistration.pincode.value) || document.StudentRegistration.pincode.value.length != 6 )

{

alert( "Please provide a pincode in the format ######." ); document.StudentRegistration.pincode.focus() ;

return false;

}

var email = document.StudentRegistration.emailid.value; atpos = email.indexOf("@");

dotpos = email.lastIndexOf(".");

if (email == "" || atpos < 1 || ( dotpos - atpos < 2 ))

{

alert("Please enter correct email ID") document.StudentRegistration.emailid.focus() ; return false;

}

if( document.StudentRegistration.dob.value == "" )

{

alert( "Please provide your DOB!" );

document.StudentRegistration.dob.focus() ; return false;

}

if( document.StudentRegistration.mobileno.value == "" || isNaN( document.StudentRegistration.mobileno.value) ||

document.StudentRegistration.mobileno.value.length != 10 )

{

alert( "Please provide a Mobile No in the format 123." ); document.StudentRegistration.mobileno.focus() ; return false;

}

return( true );

}

 

 

14.

 

<!DOCTYPE html>

<html>

<head>

<title>PHP insertion</title>

<link href="css/insert.css" rel="stylesheet">

</head>

<body>

<div class="maindiv">

<!--HTML Form -->

<div class="form_div">

<div class="title">

<h2>Insert Data In Database Using PHP.</h2>

</div>

<form action="insert.php" method="post">

<!-- Method can be set as POST for hiding values in URL-->

<h2>Form</h2>

<label>Name:</label>

<input class="input" name="name" type="text" value="">

<label>Email:</label>

<input class="input" name="email" type="text" value="">

<label>Contact:</label>

<input class="input" name="contact" type="text" value="">

<label>Address:</label>

<textarea cols="25" name="address" rows="5"></textarea><br>

<input class="submit" name="submit" type="submit" value="Insert">

</form>

</div>

</div>

</body>

</html>

 

 

 

<?php

$connection = mysql_connect("localhost", "root", ""); // Establishing Connection with Server

$db = mysql_select_db("colleges", $connection); // Selecting Database from Server

if(isset($_POST['submit'])){ // Fetching variables of the form which travels in URL

$name = $_POST['name'];

$email = $_POST['email'];

$contact = $_POST['contact'];

$address = $_POST['address']; if($name !=''||$email !=''){

//Insert Query of SQL

$query = mysql_query("insert into students(student_name, student_email, student_contact, student_address) values ('$name', '$email', '$contact', '$address')");

echo "<br/><br/><span>Data Inserted successfully...!!</span>";

}

else{

echo "<p>Insertion Failed <br/> Some Fields are Blank.   !!</p>";

}

}

mysql_close($connection); // Closing Connection with Server

?>

 

 

15.

 

<html>

<head>

<title>Browser Information</title>

</head>

<body>

<h1>Browser Information</h1>

<hr>

<p>

The <b>navigator</b> object contains the following information about the browser you are using.

</p>

<ul>

<script LANGUAGE="JavaScript" type="text/javascript"> document.write("<li><b>Code Name:</b> " + navigator.appCodeName); document.write("<li><b>App Name:</b> " + navigator.appName); document.write("<li><b>App Version:</b> " + navigator.appVersion); document.write("<li><b>User Agent:</b> " + navigator.userAgent); document.write("<li><b>Language:</b> " + navigator.language); document.write("<li><b>Platform:</b> " + navigator.platform);

</script>

</ul>

<hr>

</body>

</html>

 

 

16.

 

import java.applet.*; import java.awt.*;

 

public class Shapes extends Applet{ int x=300,y=100,r=50;

public void paint(Graphics g){ g.drawLine(30,300,200,10); g.drawOval(x-r,y-r,100,100); g.drawRect(400,50,200,100);

}

}

 

 

17.

 

 

<?xml-stylesheet href="classic.css"?>

<ARTICLE>

<HEADLINE>A Fairytale</HEADLINE>

<AUTHOR>John Brown</AUTHOR>

<PARA>

Once upon a time, in a kingdom called Pansia lived a brave King. He loved to play

<INSTRUMENT>flute</INSTRUMENT>

One fine day he called his ministers to hear him play the instrument.

</PARA>

</ARTICLE>

 

 

 

ARTICLE {

font-family: serif;

background: white; color: #003

} AUTHOR {

font-size: large; margin: 1em 0

} HEADLINE {

font-size: x-large; margin-bottom: 1em

} PARA {

text-indent: 1em; text-align: justify

} INSTRUMENT {

font-style: italic

}

 

 

18.

 

 

<?xml-stylesheet href="classic.css"?>

<ARTICLE>

<HEADLINE>A Fairytale</HEADLINE>

<AUTHOR>John Brown</AUTHOR>

<PARA>

Once upon a time, in a kingdom called Pansia lived a brave King. He loved to play

<INSTRUMENT>flute</INSTRUMENT>

One fine day he called his ministers to hear him play the instrument.

</PARA>

</ARTICLE>

 

 

19.

 

<html>

 

<head>

<title>PHP Form Validation</title>

</head>

 

<body>

<?php

 

// define variables and set to empty values

$name = $email = $gender = $comment = $website = "";

 

if ($_SERVER["REQUEST_METHOD"] == "POST") {

$name  = test_input($_POST["name"]);

$email  = test_input($_POST["email"]);

$website = test_input($_POST["website"]);

$comment = test_input($_POST["comment"]);

$gender = test_input($_POST["gender"]);

}

 

function test_input($data) {

$data = trim($data);

$data = stripslashes($data);

$data = htmlspecialchars($data); return $data;

}

?>

 

<h2>Tutorials Point Absolute classes registration </h2>

 

<form method="post" action="/php/php_form_introduction.htm">

<table>

<tr>

<td>Name:</td>

<td><input type="text" name="name"></td>

</tr>

 

<tr>

<td>E-mail:</td>

<td> <input type="text" name="email"></td>

</tr>

 

<tr>

<td>Specific Time:</td>

<td> <input type="text" name="website"></td>

</tr>

 

<tr>

<td>Class details:</td>

<td><textarea name="comment" rows="5" cols="40"></textarea></td>

</tr>

 

<tr>

<td>Gender:</td>

<td>

<input type="radio" name="gender" value="female">Female

<input type="radio" name="gender" value="male">Male

</td>

</tr>

 

<tr>

<td>

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

</td>

</tr>

</table>

</form>

 

<?php

echo "<h2>Your Given details are as :</h2>"; echo $name;

echo "<br>";

 

echo $email; echo "<br>";

 

echo $website; echo "<br>";

 

echo $comment; echo "<br>";

 

echo $gender;

?>

 

</body>

</html>

 

<HTML>

<HEAD>

<TITLE>FORM</TITLE>

<BODY>

<H1 ALIGN="CENTER">EXECUTIVE FORM</H1>

<FORM METHOD="POST">

<P><STRONG>NAME:</STRONG><INPUT TYPE+"TEXT"NAME=THE NAME"></P></P>

<P><INPUT TYPE="SUBMIT" VALUE="SUBMIT">

<INPUT TYPE="RESET" VALUE="CLEAR FORM"></P>

</FORM>

<HR>

</BODY>

</HTML>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Comments

Post a Comment

Popular posts from this blog

HTML_PRINT22

Image
BASIC HTML TAGS HTML ELEMENTS: BASIC HTML TAGS SHOULD BE ADDED TO EVERY WEB PAGES OF A WEB SITE. HTML TAGS:- <HTML>………….</HTML> HEAD TAGS:-<HEAD>…………</HEAD> TITLE TAGS:-<TITLE>………..</TITLE> BODY TAGS:-<BODY>………..</BODY>    BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>1          FONT TAGS:-<FONT COLOR=”RED”>…. </FONT>          <BODY BGCOLOR=”RED”>          <BODY TEXT=”YELLOW”>          <BODY TEXT=”YELLOW” BGCOLOR=”PINK”>    SECTION TAGS (HEADINGS) :-<H1>…………..</H1> HEADING 1 TO HEADING 6    BLOCK ORIENTED ELEMENTS (PARAGRAPH) :- <P>…………….</P>          FONT TAGS:-      < FONT COLO...
Read more