PRACTICAL 1 Introduction To HTML. Create A Basic HTML File
PRACTICAL 1Introduction to HTML. Create a basic HTML fileHyper Text Markup Language is a set of logical codes (markup) in parentheses that constitute theappearance of a web document and the information it contains. It is a language for creating staticweb pages. It specifies how the contents are to be presented on the web page. HTML is not a casesensitive language so; HTML and html both are same.HTML is a text document with formatting codes and this document has the suffix “.html” or “.htm”.Basic HTML DocumentAn element called HTML surrounds the whole document. This element contains two sub-elements,HEAD and BODY. These elements are required to form any HTML document. Html Head Title The First Page /title /head Body Hello World /body /html Just write down above code in the notepad editor and save this file with the extension of .html or.htm and then double click on that file you will get output on the default web browser.OUTPUTINTERNET TECHNOLOGY1
Following are more sub tags of Head HTML HEAD has sub-elements that define header material: TITLE document title. The title of your document is what appears in a web browser’sFavourite or Bookmark list. Search engines on the Internet use the document’s title for indexingpurposes. /TITLE BASE can be used to record the document's location in the form of a URL. /BASE ISINDEX indicates to the browser that the document is an indexdocument. This is used onlyif the document is on a server that does indexing. /ISINDEX LINK indicates a relationship between this document and some other object on the Web. /LINK META provides information such as the page’s keywords and description that appears in HTTPheaders. /META SCRIPT contains either JAVA Script or VB Script /SCRIPT STYLE contains information used by cascading style sheets /STYLE /HEAD BODY the remaining HTML elements are contained within these tags. /BODY /HTML INTERNET TECHNOLOGY2
PRACTICAL 2Create a static webpage using table tags of HTML html body TABLE BORDER "1" CELLPADDING "2" CAPTION ALIGN "Top" b Specification Table with Hoursand Marks CAPTION TR TH ROWSPAN "2" Unit No. /TH TH ROWSPAN "2" Unit Title /TH TH ROWSPAN "2" Teaching Hours /TH TH Colspan "4" Distribution of Theory Marks /TH /TR TR TD R Level /TD TD U Level /TD TD A Level /TD TD Total Marks /TD /TR TR TD center I /TD TD Introduction to Internet Technology /TD TD center 2 /TD TD center 4 /TD TD center 4 /TD TD center 0 /TD TD center 8 /TD /TR TR TD center II /TD TD Basics of HTML & CSS /TD TD center 6 /TD TD center 0 /TD TD center 2 /TD TD center 6 /TD TD center 8 /TD /TR TR TD center III /TD TD Active Server Pages 3.0 /TD TD center 6 /TD TD center 4 /TD TD center 8 /TD TD center 0 /TD TD center 12 /TD /TR TR TD center IV /TD TD Server Side Coding with VBScript and XML /TD TD center 8 /TD TD center 2 /TD TD center 4 /TD TD center 8 /TD INTERNET TECHNOLOGY3
TD center 14 /TD /TR TR TD center V /TD TD ASP Objects & Components /TD TD center 10 /TD TD center 4 /TD TD center 4 /TD TD center 6 /TD TD center 14 /TD /TR TR TD center VI /TD TD Accessing database with ASP & ADO /TD TD center 10 /TD TD center 4 /TD TD center 4 /TD TD center 6 /TD TD center 14 /TD /tr TR TD /TD TD center b Total /TD TD center b 42 /TD TD center b 18 /TD TD center b 26 /TD TD center b 26 /TD TD center b 70 /TD /tr /TABLE /body /html OUTPUTINTERNET TECHNOLOGY4
PRACTICAL 3Create a static web page which defines all text formatting tags of HTML in tabular format html body center table border 1 caption align "top" font size " 2" color "red" TextFormatting Tags /font /caption tr th HTML Tag /th th Output /th /tr tr td normal text /td td hello world /td /tr tr td Font & its attributes /td td FONT SIZE " 2" COLOR "#RRGGBB" hello world /FONT /td /tr tr td <B> /td td B Bold /B /td /tr tr td <I> /td td I Italic /I /td /tr tr td <U> /td td U Underline /U /td /tr tr td <EM> /td td EM Emphasis /EM /td /tr tr td <STRONG> /td td STRONG STRONG /STRONG /td /tr tr td <TELETYPE> /td td TT TELETYPE /TT /td /tr tr td <CITE> /td td CITE Citation /CITE /td /tr tr td <STRIKE> /td td STRIKE strike-through text /STRIKE /td /tr INTERNET TECHNOLOGY5
tr td <BIG> /td td BIG text in a big font /BIG /td /tr tr td <SMALL> /td td SMALL text in a small font SMALL /td /tr tr td <SUB> /td td a SUB b /SUB /td /tr tr td <SUP> /td td a SUP b /SUP /td /tr /table /body /html OUTPUTINTERNET TECHNOLOGY6
PRACTICAL 4Create webpage using list tags of HTML html body b HTML List: Ordered, Unordered & Definition List /b hr Following is the list of proposed student activities like: OL type 1 li Develop programs related with unit vice topics incomputer laboratory. /li li Develop any module of to be useful in real lifeapplication. /li li Multimedia presentation of module developed bystudents. /li /OL hr List of Software/Learning Websites UL li u ASP Tutorial - W3Schools /u br a href http://www.w3schools.com/asp/ www.w3schools.com/asp /a /li li u Classic ASP Tutorials & Articles - Web Wiz /u br a href "http://www.webwiz.co.uk" www.webwiz.co.uk Knowledgebase /a /li li u HTML Tutorial - W3Schools /u br a href "http://www.w3schools.com/html/" www.w3schools.com/html /a /li li u CSS Tutorial /u br a href "http://www.csstutorial.net/" www.csstutorial.net /a /li li u VBScript Tutorial - Tutorials Point /u br ahref "http://www.tutorialspoint.com/vbscript/index.htm" www.tutorialspoint.com/vbscript/index.htm /a /li li u ADO Tutorial - W3Schools /u br a href "http://www.w3schools.com/ADO/default.asp" www.w3schools.com/ADO/default.asp /a /li /UL hr DL DT HTML /DT DD Hyper Text Markup Language /DD DT XML /DT DD eXtensible Markup Language /DD /DL /body /html INTERNET TECHNOLOGY7
OUTPUTINTERNET TECHNOLOGY8
PRACTICAL 5Create webpage to include image using HTML tag html body background "Desert.jpg" center img src "dns.gif" /body /html INTERNET TECHNOLOGY9
PRACTICAL 6Create employee registration webpage using HTML form objects html body Center img src "employee icon.png" height 52 width 52 Font size " 3" color red Employee Registration Form /font form method post action "prac.html" table tr td /td td input type radio name initial checked Mr. input type radio name initial Mrs. input type radio name initial Ms. /td /tr tr td First Name /td td input type text name fn placeholder "First Name" /td /tr tr td Last Name /td td input type text name ln placeholder "Last Name" /td /tr tr td Mail Address1 /td td input type text name add1 /td /tr tr td Mail Address2 /td td input type text name add2 /td /tr tr td City /td td input type text name ct /td /tr tr td State /td td select name state option value "Gujarat" Gujarat option value "Maharastra" Maharastra option value "Karnataka" Karnataka option value "Delhi" Delhi /select /td /tr tr td Zip /td td input type text name zp /td /tr tr td Upload Photo /td td input type file name photo /td /tr tr td E-Mail /td td input type text name email size 30 /td /tr tr td Mobile /td td input type text name mob placeholder " 91" /td /tr tr td Languages known /td td input type checkbox name lk value Gujaratichecked Gujarati /td INTERNET TECHNOLOGY10
/tr tr td /td td input type checkbox name lk value Hindichecked Hindi /td /tr tr td /td td input type checkbox name lk value Englishchecked English /td /tr tr td /td td input type checkbox name lk value Marathi Marathi /td /tr tr td Additional Information /td td textarea name add rows 3 cols 20 placeholder "Optional"wrap /textarea /td /tr tr td /td td input type submit value submit input type resetvalue reset /td /table /form /body /html OUTPUTINTERNET TECHNOLOGY11
PRACTICAL 7Apply style sheet in Web page. [inline, embedded and linked] ackground-image:url("sheet.jpg");} stylesheet.html html head link rel "stylesheet" type "text/css" href "ext.css" style 0ffff;}div{background-color:#b0c4de;} /style /head body h2 Internal, External & Inline Style! /h1 div Text inside a div element. p paragraph background color /p still in the div element. /div p style "color:red;margin-left:20px;" Hello world. /p /body /html INTERNET TECHNOLOGY12
OUTPUTINTERNET TECHNOLOGY13
PRACTIAL 8Introduction to IIS. Installation of IIS server in windows 7.Unlike normal HTML pages, you cannot view Active Server Pages without running a web-server. Totest your own pages, you should save your pages in a directory mapped as a virtual directory, andthen use your web-browser to view the page.At this point, you should have a good idea of what ASP is and how it functions in conjunction with aWeb server. It’s time to configure your Web server to work with ASP.Depending on the type of Windows operating system you are using (NT, 2000, Xp, win-7), youalready have a Web server available for your use, but it might not be loaded or configured on yourmachine.Installing Internet Information Server in Windows 7By default, IIS 7 is not installed on Windows 7. You can install IIS by clicking Windows Features inAdvanced Options under Programs in Control Panel. Following are the steps to install IIS1. Click Start and then click Control Panel.2. In Control Panel, click Programs and then click Turn Windows features on or off.Figure: Turn Windows features on or off under Programs and Features3. In the Windows Features dialog box, click Internet Information Services and then click OK.Select ASP and other features (if required) from Application Development Features.4. After Step 3, installation of IIS with various features will begin. For confirmation of IISinstallation type localhost or http://localhost in web browser.INTERNET TECHNOLOGY14
Figure: Application Development FeaturesFigure: IIS Home pageConfirming IIS Installation and Managing IISAlthough we’ll talk much more about working with our Web server when we begin the discussion onmanipulating Web page files, there are a few things you can look at now to get a better idea of howIIS functions on your machineINTERNET TECHNOLOGY15
1. Open the Windows Explorer, and navigate to your C: drive. Find the directory inetpub and select it2. Think of the inetpub directory as your central location for storing, manipulating, and displayingyour Web pages via IIS. As you begin to develop Web pages, you will become quite familiar with theinetpub directories, as well as its sub directories.3. Aside from the creation of the inetpub directory, take a look at the tools used to administer IIS onyour computer.4. To manage web server select Administrative Tools by clicking Start menu, Settings, Control Panel.For Windows 7 user Select System and Security in Control Panel5. Select Internet Information Services Manager. It will display Internet Information Services windowon your screen.Figure: IIS ManagerINTERNET TECHNOLOGY16
PRACTICAL 9Create a simple xml file and also create dynamic web page in which XML tags used Simple XML file: name.xml Name First Sachin /First Last Tendulkar /Last /Name XML with ASP: name.aspTo generate an XML response from the server - simply write the following code and save it as anASP file on the web server. %response.ContentType "text/xml"response.Write(" ?xml version '1.0' encoding 'ISO-8859-'? ")response.Write(" Name ")response.Write(" First Sachin /First ")response.Write(" Last Tendulkar /Last ")response.Write(" /Name ")% INTERNET TECHNOLOGY17
PRACTICAL 10Create a dynamic web page which displays a message “Welcome to ASP” using VBScript html body %response.Write("Welcome to ASP")response.Write(" br ")response.Write("HTML")% b ASP /b %response.Write(" br ")response.Write("XML")% /body /html OUTPUTINTERNET TECHNOLOGY18
PRACTICAL 11Create a dynamic web page which generates student grade sheet using VBScriptIn this practical, three files have been created. Note that here external style sheet "table.css" is usedin marksheet.asp file.marksheet.html %@ language vbscript % % option explicit % Html body form method post action "marksheet.asp" b center font color red size 4 Enter Following Detail /font /b hr table border 1 align center tr td Student Name /td td input type text name sn placeholder "FullName" / /td /tr tr td Enrollment No. /td td input type text name en placeholder " EnrollmentNumber " / /td /tr tr td Institute /td td input type text name inst size 30 placeholder "College Name" / /td /tr /table table border 1 align center CAPTION ALIGN "BOTTOM" *marks less than 70 CAPTION tr th Subject Name /td th Marks /td /tr tr td INFORMATION COMMUNICATIONTECHNOLOGY /td td input type text name ict size 7 /td /tr tr td OBJECT ORIENTED PROGRAMMING /td td input type text name oop size 7 /td /tr tr td FUNDAMENTALS OF SOFTWAREDEVELOPMENT /td td input type text name fosd size 7 /td /tr tr INTERNET TECHNOLOGY19
td INTERNET TECHNOLOGY /td td input type text name it size 7 /td /tr tr td DATA MANAGEMENT /td td input type text name dm size 7 /td /tr tr td /td td input type submit value submit /td /tr /table /form /body /html marksheet.asp html head TITLE Grade Sheet /TITLE LINK REL "STYLESHEET" HREF "table.css" /head % dim total, a, b, c, d, e, name, no, per, cla request ("ict")b request ("oop")c request ("fosd")d request ("it")e request ("dm")name request("sn")no request("en")cl request("inst")% % total a 0 b c 0 d 0 e 0 f % h1 GUJARAT TECHNOLOGICAL UNIVERSITY /h1 p Name : % name % br Enrollment Number : % no% br Institute : % cl% /p hr table border 1 align center tr th Subject Name /th th Subject Code /th th Marks /th /tr tr td INFORMATION COMMUNICATION TECHNOLOGY /td td 3341601 /td td % a% /td /tr tr td OBJECT ORIENTED PROGRAMMING /td td 3341602 /td td % b% /td INTERNET TECHNOLOGY20
/tr tr td FUNDAMENTALS OF SOFTWARE DEVELOPMENT /td td 3341603 /td td % c% /td /tr tr td INTERNET TECHNOLOGY /td td 3341604 /td td % d% /td /tr tr td DATA MANAGEMENT /td td 3341605 /td td % e% /td /tr tr td colspan 2 align right b Total /b /td td % total% /td /tr /table center Hr b % per (total * 100)\350response.write "Percentage "response.write per% /b Hr % if per 70 thenresponse.write "Congratulations You got First Classwith Distinction"Elseif per 60 and per 70 thenresponse.write "Congratulations You got First Class"Elseif per 50 and per 60 thenresponse.write "You got Second Class"Elseif per 35 and per 50 thenresponse.write "You got Pass Class"Elseresponse.write "Sorry you are Fail"End if% table.csstable, td, th{border:1px solid reen;color:white;}INTERNET TECHNOLOGY21
h1{text-shadow: 5px 5px 5px outline-color:red;font-family:"Times New :bold;}INTERNET TECHNOLOGY22
PRACTICAL 12Create a dynamic web page which prints Fibonacci series from 1 to 10 in VBScript html body center % dim a,b,c,ia 0b 1for i 1 to 10c a bresponse.write bresponse.write " br/ "a bb cnext% /center /body /html OUTPUTINTERNET TECHNOLOGY23
PRACTICAL 13Create a dynamic web page which displays factorial of a number in VBScriptfact.html html body head title Factorial /title /head form method post action fact.asp table tr td Enter number /td td input type text name no /td /tr tr td /td td input type submit value ok /td /tr /form /body /html fact.asp html body center Factorial of %dim a,b,cb request("no")c 1for a 1 to bc c*anextresponse.write bresponse.write " is "response.write c% /center /body /html INTERNET TECHNOLOGY24
PRACTICAL 14Create a dynamic web page which displays arithmetic operations [addition, subtraction,division, multiplication and modulus] using HTML Frameframe.asp Html frameset rows "50%, 50 %" frame src "Form.asp" name "que" frame src "Answer.asp" name "ans" /frameset /html Form.asp %@ language vbscript % % option explicit % Html body form method post action "answer.asp" target "ans" b center u font color red size 4 Arithmetic Operations /font /u /b /center br br br table align center border 0 tr td b Enter First Number: /td td input type text name n1placeholdder "First Number" /td /tr tr td b Enter Second Number: /td td input type text name n2placeholdder "Second Number" / /td /tr tr td b Select Your Choice: /td td select name opr option value "Addition" Addition option value "Subtraction" Subtraction option value "Division" Division option value "Multiplication" Multiplication option value "Modulus" Modulus /select /td /tr /table Br center input type submit value "submit" /center /form /body /html Answer.asp html body % dim a, b, ca request ("n1")INTERNET TECHNOLOGY25
b request ("n2")c request ("opr")response.write " "response.write " br "% center font color red size 4 %Select case cCase "Addition"response.write "Addition of "response.write aresponse.write " & "response.write bresponse.write " is "response.write (a 0 b)Case "Subtraction"response.write "Substraction of "response.write aresponse.write " & "response.write bresponse.write " is "response.write (a - b)Case "Division"response.write "Division of "response.write aresponse.write " & "response.write bresponse.write " is "response.write (a / b)Case "Multiplication"response.write "Multiplication of "response.write aresponse.write " & "response.write bresponse.write " is "response.write (a * b)Case "Modulus"response.write "Modulus of e.writeresponse.writea" & "b" is "(a mod b)End select% /font /center /body /html INTERNET TECHNOLOGY26
PRACTICAL 15Write a script which differentiates Request.Querystring and Request.FormRequest.QueryString Example: html body form method get action "output1.asp" Enter First Name: input type text name fname br Enter Last Name: input type text name lname br input type submit value "submit" /form /body /html output1.asp %dim fn, lnfn request.querystring("fname")ln .writeresponse.writeresponse.write"Welcome"fn" "ln% Request.Form Example: html body form method post action "output2.asp" Enter First Name: input type text name fname br Enter Last Name: input type text name lname br input type submit value "submit" /form /body /html output2.asp %dim fn, lnfn request.form("fname")ln esponse.writeresponse.write"Welcome"fn" "ln% INTERNET TECHNOLOGY27
PRACTICAL 16Write a suitable scripts which show properties of Response object [Buffer, Expires andExpiresAbsolute]1. Response.Buffer Example %@ language vbscript % % option explicit % % response.Buffer true % Html body b font color red size 3 Response. Buffer Example /font /b Br % dim i, jresponse.write "It is now:"response.write nowresponse.write " br "For i 1 to 50000000j i 1Nextresponse.write "It is now:"response.write now% /body /html OUTPUTResponse. Buffer ExampleIt is now:23-12-2013 22:41:44It is now:23-12-2013 22:41:522. Response.Expires Example %@ language vbscript % % option explicit % % response.Buffer true % % response.expires 2% Html body b font color red size 3 Response. Buffer Example /font /b Br % dim i, jresponse.write "It is now:"response.write nowresponse.write "
INTERNET TECHNOLOGY 1 PRACTICAL 1 Introduction to HTML. Create a basic HTML file Hyper Text Markup Language is a set of logical codes (markup) in parentheses that constitute the appearance of a web document and the information it contains. It is a language for creating static web pages.
Intro to HTML / CSS Rachel Starry UrsinusCollege, Tech Play Day May 31, 2018 * HTML Hyper Text Markup Language * HTML is the standard language for creating web pages. What is HTML? HTML Version Year HTML 1991 HTML 2.0 1995 HTML 3.2 1997 HTML 4.01 1999 HTML5 2014 * "HyperText" uses hyperlinks: these allow you
History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simple HTML 2.0 - 1995 - Some interesting layout features - abused CSS 1 - 1996 HTML 3.2 - 1997 HTML 4.0 - 1997 - Layout moving toward CSS CSS Level 2 - 1998 HTML 4.01 - 1999 - What we use today HTML has evolved a *lot* over the years - as computers and networks have gotten faster.
History of HTML / CSS HTML 1.0 - 1993 - The Good Old Days - life was simple HTML 2.0 - 1995 - Some interesting layout features - abused CSS 1 - 1996 HTML 3.2 - 1997 HTML 4.0 - 1997 - Layout moving toward CSS CSS Level 2 - 1998 HTML 4.01 - 1999 - What we use today HTML has evolved a *lot* over the years - as computers and networks have gotten faster.
HTML i About the Tutorial HTML stands for Hyper Text Markup Language, which is the most widely used language on Web to develop web pages. HTML was created by Berners-Lee in late 1991 but "HTML 2.0" was the first standard HTML specification which was published in 1995. HTML 4.01 was a major version of HTML and it was published in late 1999.
3.2 W3C: HTML 3.2 Specification 1997-01-14 4.0 W3C: HTML 4.0 Specification 1998-04-24 4.01 W3C: HTML 4.01 Specification 1999-12-24 5 WHATWG: HTML Living Standard 2014-10-28 5.1 W3C: HTML 5.1 Specification 2016-11-01 Examples Hello World Introduction HTML (Hypertext Markup Language) uses a markup system composed of elements which represent .
Unit B: Getting Started with HTML . Objectives Assess the history of HTML Compare HTML and XHTML Create an HTML document Set up the document head and body Add Web page text HTML 5 and CSS 3 - Illustrated Complete 2 . Objectives (continued) Preview your Web page Implement one-sided tags
New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Learn the history of the Web and HTML Describe HTML standards and specifications Understand HTML elements and markup tags Create the basic structure of an HTML file Insert an HTML comment Work with block-level elements
HTML Timeline 1991 HTML first publicly described in a CERN document called "HTML Tags" 1993 Formally defined by IETF 1995 HTML 2.0 defined by IETF 1997 HTML 3.2 published as a Recommendation by W3C 1997 HTML 4.0 published as a Recommendation by W3C 2000 XHTML 1.0 published as a Recommendation by W3C 2001 XHTML 1.1 published as a Recommendation by W3C
