完成项目会有以下的效果。
JSP第二十课：Mvc+Mysql+Servlect+Jsp实现在浏览器上对数据库的增删改查。
MVC全名是Model View Controller，
是 @@1模型(model)
@@2－视图(view)
@@3－控制器(controller)的缩写，
一种软件设计典范，
用一种业务逻辑、数据、界面显示分离的方法组织代码，
将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，
不需要重新编写业务逻辑。
MVC被独特的发展起来用于映射传统
的输入、处理和输出功能在一个逻辑
的图形化用户界面的结构中。
第一部分去分析MVC的两张图。
NO.one
如果我要在浏览器查找数据库的所有的数据，我改如何操作呢？
首先我们来分析上面的流程图。
第一步。首先你要在jsp中建立一张表格。用于显示数据库的所有数据。
第二步。当你运行项目时。你要想到一个问题。数据是在数据库中，而你的目标是要将数据库的数据在浏览器中显示。首先你要思考用什么方式存放数据。你可以用四大域，也可以用实体类。
第三步：进行流程分解。
@1项目运行经过的是过滤器，过滤器设置编码格式。
response.setContentType("text/html"); response.setCharacterEncoding("UTF-8"); request.setCharacterEncoding("UTF-8"); chain.doFilter(request, response);
@2项目从过滤器出来后经过的是控制器，控制器接到用户发来的查询命令，而控制器完成不了。
于是控制器发送命令发给业务逻辑层中的接口，定义一个查询的方法。接口中定义的方法，要在实体类中实现。
所以逻辑层的接口将查询的命令发送给，业务逻辑层的实体类。而业务逻辑层完成不了查询任务。
于是，业务逻辑层的实体类将任务发送给数据反问层的接口。而数据反问层的接口实现不了查询这个要求。
在此之前你要将数据库连接好。
于是数据访问层的接口发送给数据访问层的实体类进行数据的查询工作。开始连接数据库。一般来说定义一个工具类用于连接数据库和关闭数据库。
String sql="select * from tb_student2"; return DBUtil.jt.queryForList(sql);
最后:查询的结果要进行。
@1数据库的数据查询完毕返回到数据访问层的实体类，数据访问层的实体类将结果返回到数据访问层的接口。
@2数据访问层接口将结果返回给逻辑层的实体类。
@3逻辑层的实体类将结果返回到逻辑层的接口。
@4逻辑层的接口结果返回给控制器。
@5控制器将查询的数据库的数据储存起来返回给浏览器。
//将从数据库中查询出来的数据存储至request session.setAttribute("students", oList); //请求转发跳转页面 request.getRequestDispatcher("index.jsp").forward(request, response);
NO.two
如果我在数据库增加一条或者几十条数据数据，我要求在浏览器中显示，我该如何去操作呢？
@1进行流程分解。（本人以删除一条数据为例）
用户在数据库中删除了一条数据。数据库将删除一条书籍信息返回给数据访问的实体类。数据访问实体类将删除一条数据信息返回给数据访问接口。
@2数据访问层接口将结果返回给逻辑层的实体类。
@3逻辑层的实体类将结果返回到逻辑层的接口。
@4逻辑层的接口结果返回给控制器。
@5控制器将删除一条数据信息返给浏览器。
@6浏览器进行查下操作，核对浏览器中的数据是否删除。
接下来的两个问题留给你们自行思考？
如果我在数据库增，删，改，查，任何一条或者几十条数据数据，我要求在浏览器中显示，我该如何去操作呢？
如果我在浏览器中的表格中增，删，改，查，任何一条或者几十条数据数据，我要求在数据库中显示，我该如何去操作呢？
代码实操。
增
上面是数据库的表单。
上面是项目构造图
上面是表格
上面是我增加的四条数据我们到数据库中看一下。
删我删除1001043这一条数据。
改。我修改最后2条数据，和第一条数据。
实现代码综合区。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> textarea{ resize: none; outline: none; cursor: pointer; /*cursor: cell; cursor: crosshair;*/ } input{ color: #00BFFF; color: lightcoral; } </style> </head> <body> <form action="AA.htmll" method="get"> 用户名：<input type="text" autofocus="autofocus" placeholder="请输入用户名" name="usename" multiple="multiple"><br> </label> 用户手机号：<input type="text" value="请输入用户手机号" autocomplete="off" autofocus="autofocus" name="telepon00000000 enum"/><br> 用户QQ号：<input type="text" value="请输入用户QQ号" multiple="multiple" autofocus="autofocus"/><br> 用微信号：<input type="text" value="请输入用户微信号" autofocus="autofocus"/><br> 用户身份证：<input type="text" placeholder="请输入用户身份证号"/><br> <label for="password">密码:</label><input type="password" value="请输入密码"/><br> 性别：<input type="radio" name="sex"/>男<input type="radio" name="sex"/>女<br> 爱好：<input type="checkbox" checked="checked" >打游戏<input type="checkbox" >readingbook<input type="checkbox" >sleep<br> <input type="button" value="点击注册" /><br> <input type="color" value="输入你的色彩"/><br> <input type="date" /><br> <input type="datetime" autocomplete="off" /><br> <input type="datetime-local" autocomplete="off" /><br> <input type="email" /><br> 上传头像:<input type="file" / autocomplete="off" ><br> <input type="hidden" /><br> <input type="image" src="img/img/bn (1).jpg"/ width="100px"><br> <input type="month" /><br> <input type="number" autocomplete="off" /><br> <input type="radio" /><br> <input type="range" /><br> <input type="search" autocomplete="off" /><br> <input type="week" /><br> <input type="url" /><br> <input type="time" /><br> <input type="submit" /><br> <input type="reset" autocomplete="off" /><br> 手机号：<input type="tel" autocomplete="off" /><br> 搜索 <input type="search" /><br> 留言表单：<textarea name="" rows="" cols=""></textarea> <hr> <!--下拉表--> <select name="" multiple="multiple" size="4" required="required" > <option>1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> </select> </form> <h1><a href="AA.html" >返回顶部</a></h1> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>增加学生信息</title> </head> <body> <div align="center"> <h3>增加学生信息</h3> <form action="AddStudentServlect" method="post" > 姓名:<input type="text" name="name"> 年龄:<input type="number" name="age"> 性别:<input type="number" name="sex"> <input type="submit" value="增加学生信息"> </form> <img src="img/MVC三层架够图.png" style="height: 500px;width: 900px"> <img src="img/MVC三层架够图二.png" style="height: 500px;width: 900px"> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> </div> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table{ width:600px; /* 表格边框 border:1 solid #007108;*/ /* 边框重叠 border-collapse:collapse;*/ border-radius:20px; background-color: lightcoral;/* 表格背景色 padding:5px;*/ text-align:center; } th{background-color:#00a40c; /* 行名称背景色 */ color:#FFF;/* 行名称文字颜色 border-color:#030;*/ padding:5px; border-radius:20px; } td{ border-bottom:1px dashed #817865; border-radius:20px; } </style> </head> <body> <table id="list" border="0"> <caption><h2>我的购物车</h2></caption> <tr> <th><label><input id="all" type="checkbox" onclick="all_check()" />全选</label></th> <th>商品</th> <th>描述</th> <th>单价（元）</th> <th>数量</th> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" value="234"/></td> <td width="80"><img src="img/MVC三层架够图.png" style="height: 100px;width: 300px"></td> <td width="170" align="left"><a>新款春装韩版长款两件套连衣裙女名媛欧根纱长袖裙套装长裙</a></td> <td>699</td> <td>1</td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td width="80"><img src="img/MVC三层架够图.png" style="height: 100px;width: 300px"></td> <td width="170" align="left">新款女装夏修身高腰长款连衣裙女雪纺短袖裙名媛粉色收腰长裙</td> <td>399</td> <td>1</td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td width="80"><img src="img/MVC三层架够图.png" style="height: 100px;width: 300px"></td> <td width="170" align="left">新款棉麻衬衫女短袖白色衬衣亚麻纯色百搭宽松上衣</td> <td>268</td> <td>2</td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td width="80"><img src="img/MVC三层架够图.png" style="height: 100px;width: 300px"></td> <td width="170" align="left">新款棉麻衬衫女短袖白色衬衣亚麻纯色百搭宽松上衣</td> <td>268</td> <td>2</td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td width="80"><img src="img/MVC三层架够图.png" style="height: 100px;width: 300px"></td> <td width="170" align="left">新款棉麻衬衫女短袖白色衬衣亚麻纯色百搭宽松上衣</td> <td>268</td> <td>2</td> </tr> <tr> <td><input name="ic" type="checkbox" onclick="single_check()" /></td> <td width="80"><img src="img/MVC三层架够图.png" style="height: 100px;width: 300px"></td> <td width="170" align="left">新款棉麻衬衫女短袖白色衬衣亚麻纯色百搭宽松上衣</td> <td>268</td> <td>2</td> </tr> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> <tr> <td colspan="4"><span onclick="removeRow()">删除选中</span> </td><td><b>结算</b></td> </tr> </table> <script> function all_check() { var oInput= document.getElementsByName("ic"); for(i=0;i<oInput.length;i++) if(document.getElementById("all").checked==true) { oInput[i].checked=true; // alert(oInput[i].value); } else oInput[i].checked=false; } function single_check() { var oInput= document.getElementsByName("ic"); var j=0; for(i=0;i<oInput.length;i++) if(oInput[i].checked==true) j++; if( j==oInput.length) document.getElementById("all").checked=true; else document.getElementById("all").checked=false; } function removeRow(){ var cheObj=document.getElementsByName("ic"); var taObj=document.getElementById("list"); if(confirm("确定要删除么？")) for(var k=0;k<cheObj.length;k++){ if(cheObj[k].checked){ taObj.deleteRow(k+1); k=-1; } } } var taObj=document.getElementById("list"); for(var k=0;k<taObj.rows.length;k++){ taObj.rows[k].onmouseover=function (){ this.style.backgroundColor="#ddd"; } taObj.rows[k].onmouseout=function (){ this.style.backgroundColor="#d9ffdc"; } } </script> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>学生信息对话列表</title> <style type="text/css"> *{ /* background: linear-gradient(to right,red,pink,blue); */ background:white font-size:30px; font-weight: bold; } input{ color: white; font-weight: bold; padding-bottom:10px; padding-top: 5px; padding-left:10px; padding-right:10px; border-width: 0px; } .in1{ background-color: green; } .in2{ background-color: black; } .in3{ background-color: red; } </style> </head> <body> <!-- 使用表格展示从数据库中获取的所有学生信息 --> <div align="center"> <table border="2" style="width: 800px;text-align: center;border-collapse: collapse;"> <caption>学生信息列表</caption> <tr> <th>学号</th> <th>姓名</th> <th>年龄</th> <th>性别</th> <th>操作</th> </tr> <c:forEach items="${students}" var="stu" varStatus="v"> <tr> <td>${stu.id}</td> <td>${stu.name}</td> <td>${stu.age}</td> <td>${stu.sex}</td> <td> <a href="addstudent.jsp"><input type="button" value="增加" class="in1"></a> <a href="UpdateStudent.jsp?index=${v.count-1 }"><input type="button" value="修改" class="in2"></a> <a href="DeleteStudent?id=${stu.id }"><input type="button" value="删除" class="in3"></a> </td> </tr> </c:forEach> </table> </div> <img src="img/MVC三层架够图.png" style="height: 500px;width: 900px"> <img src="img/MVC三层架够图二.png" style="height: 500px;width: 900px"> <h3 style="color:white; background: black;"> MVC全名是Model View Controller，<br> 是 @@1模型(model)<br> @@2－视图(view)<br> @@3－控制器(controller)的缩写，<br> 一种软件设计典范，<br> 用一种业务逻辑、数据、界面显示分离的方法组织代码，<br> 将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，<br> 不需要重新编写业务逻辑。<br> MVC被独特的发展起来用于映射传统<br> 的输入、处理和输出功能在一个逻辑<br> 的图形化用户界面的结构中。<br> </h3> <h1><a href=" index.jsp" >返回顶部</a></h1> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> *{ text-align: center; align-content: center; margin: 30px; font-size: 30px; font-weight: 700; font-family: "微软雅黑"; padding: 2px; color: black; /* background: linear-gradient(to right,red,pink,blue); */ } article{ } </style> <title>登录页面</title> </head> <body> <article> <h1>欢迎来到2021年个人学生信息管理登录界面</h1> <form action="ServlectDengLuLogic" method="post"> 用户名:<input type="text" name="user" id="text" maxlength="8"><br> QQ号：<input type='text' name='qq'><br> 密码:<input type='password' name='psd'><br> <input type='checkbox' value='flase' checked='checked' name='ispsd'>记住密码 <input type='checkbox' value='true' name='islogin'>自动登录<br> <input type='submit' value='登录'><br> </form> </article> <h1><a href=" Login.jsp" >返回界面</a></h1> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style type="text/css"> * { margin: 0; padding: 0; background: white; /* background: linear-gradient(to right,red,pink,blue); */ } li { list-style: none; } left { width: 480px; float: left; } .header { width: 1040px; height: 100px; float: right; } .top { float: right; } .main { width: 500px; margin: 0 auto; } .one h1 { font-size: 46px; font-weight: 400; margin-bottom: 20px; } .two { font-size: 20px; color: #333333; margin-bottom: 64px; float: left; } .there { float: right; margin-bottom: 64px; } .there a { font-size: 28px; text-decoration: none; color: #359eff; } .there a:hover { color: #094683; } .input-outer input { height: 50px; width: 200px; margin-bottom: 40px; border-radius: 10px; border: 1px solid #c1c1c1; color: #c1c1c1; font-size: 20px; } .input-outer span, .input-phone span { font-size: 25px; text-align: center; line-height: 50px; color: #333333; } .input-type select { margin: auto; height: 50px; border-radius: 10px; border: 1px solid #c1c1c1; font-size: 20px; float: left; } .input-phone input { height: 50px; width: 200px; border-radius: 10px; border: 1px solid #c1c1c1; font-size: 20px; margin-left: 20px; } .input-qq input { height: 50px; width: 200px; border-radius: 10px; border: 1px solid #c1c1c1; font-size: 20px; margin-left: 20px; } .input-home input { height: 50px; width: 200px; border-radius: 10px; border: 1px solid #c1c1c1; font-size: 20px; margin-left: 20px; } .input-sex input{ height: 50px; width: 200px; border-radius: 10px; border: 1px solid #c1c1c1; font-size: 20px; margin-left: 20px; } .six p { color: #c1c1c1; font-size: 14px; } .sub input { align-content: center; text-align: center; height: 50px; width: 200px; margin: 40px 0; font-size: 20px; color: #ffffff; background-color: #3588ff; border: 1px solid #c1c1c1; border-radius: 10px; } .type-radio span { align-content: center; text-align: center; font-size: 14px; color: #c1c1c1; } .footer { align-content: center; text-align: center; margin: 40px 0; text-align: center; color: #c1c1c1; } h1{ /* text-shadow: 5px 5px 5px red; */ color: red; } #code_input{ height: 50px; width: 200px; } </style> <title>注册页面</title> </head> <body> <h1 style="background: black; color: red; font-weight: 900; text-align: center;">欢迎来到2021年个人学生注册界面</h1> <div style="align-content: center; text-align: center;"> <article style="text-align: center; align-content: center; text-align: center;"> <form action="ServlectZhuCe" method="post" > <div class="input-outer"> 用户名: <input type="text" name="user" id="text" maxlength="8" placeholder="请输入用户姓名" > </div> <div class="input-sex"> 输入性别 男:<input type="radio" name="sex" id="" value="1" checked="checked" placeholder="请输入用户性别" /> 女:<input type="radio" name="sex" id="" value="0" checked="checked" /> </div> <div class="input-qq"> QQ号: <input type="text" name="qq" maxlength="11" minlength="11"> </div> <div class="input-outer"> 密码: <input type="password" name="psd" id="password" maxlength="16"> </div> <div class="input-phone"> 手机号: <input type="text" name="sj" maxlength="11" minlength="11" > </div> <div class="input-home"> 家庭地址: <input type="text" name="home" maxlength="11" minlength="11" > </div> <div class="six"> <p>可通过手机号找回密码</p> </div> <div id="v_container" style="width: 200px;height: 100px; background: cyan; text-align: center; margin: auto;"></div> <input type="text" id="code_input" value="" placeholder="请输入图形验证码" height="200px" text-align: center; /> <button id="my_button" >验证</button> <div class="sub"> <input type="submit" value="立即注册"> </div> </form> </article> </div> <div class="type-radio"> <input type="radio" checked><span style="text-align: center;">同意开通QQ空间</span> <br> <input type="radio" checked><span style="text-align: center;">我已阅读并同意相关服务条款和隐私政策开始进行登录QQ页面</span> </div> <footer> <h1>这是QQ的注册页面</h1> </footer> <img src="img/MVC三层架够图.png" style="height: 500px;width: 900px"> <img src="img/MVC三层架够图二.png" style="height: 500px;width: 900px"> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> <h1><a href=" Register.jsp" >返回顶部</a></h1> <script src="gVerify.js"></script> <script> var verifyCode = new GVerify("v_container"); document.getElementById("my_button").onclick = function(){ var res = verifyCode.validate(document.getElementById("code_input").value); if(res){ alert("验证正确"); }else{ alert("验证码错误"); } } </script> </body> </html>
<!DOCTYPE html> <html> <meta charset="UTF-8"> <body> <style> *{ color: #FF3333; background: #c3c3c3; font-size: 30px; } </style> <h22>JavaScript getTime()</h22> <p>JavaScript 中的内部时钟从 1970 年 1 月 1 日午夜开始计算。</p> <p>getTime() 函数返回从那时起的毫秒数：</p> <p id="demo"></p> <script> var d = new Date(); document.getElementById("demo").innerHTML = d.getTime(); </script> <hr> <h22>JavaScript getFullYear()</h22> <p>getFullYear() 方法返回日期的完整年：</p> <p id="demo1"></p> <script> var d = new Date(); document.getElementById("demo1").innerHTML = d.getFullYear(); </script> <hr> <h22>JavaScript getMonth()</h22> <p>getMonth（）方法以 0 到 11 之间的数字返回日期的月份。</p> <p>要获得正确的月份，您必须添加 1：</p> <p id="demo2"></p> <script> var d = new Date(); document.getElementById("demo2").innerHTML = d.getMonth() + 1; </script> <hr> <h22>JavaScript getDate()</h22> <p>getDate() 方法以数字（1-31）返回日期的日：</p> <p id="demo3"></p> <script> var d = new Date(); document.getElementById("demo3").innerHTML = d.getDate(); </script> <hr> <h22>JavaScript getHours()</h22> <p>getHours() 方法以数字（0-23）返回日期的小时：</p> <p id="demo4"></p> <script> var d = new Date(); document.getElementById("demo4").innerHTML = d.getHours(); </script> <hr> <h22>JavaScript getMinutes()</h22> <p>getMinutes() 方法以数字（0-59）返回日期的分钟：</p> <p id="demo5"></p> <script> var d = new Date(); document.getElementById("demo5").innerHTML = d.getMinutes(); </script> <hr> <h22>JavaScript getSeconds()</h22> <p>getSeconds() 方法以数字（0-59）返回日期的秒：</p> <p id="demo6"></p> <script> var d = new Date(); document.getElementById("demo6").innerHTML = d.getSeconds(); </script> <hr> <h22>JavaScript getMilliseconds()</h22> <p>getMilliseconds() 方法以数字（0-999）的形式返回日期的毫秒数：</p> <p id="demo7"></p> <script> var d = new Date(); document.getElementById("demo7").innerHTML = d.getMilliseconds(); </script> <hr> <h22>JavaScript getDay()</h22> <p>getDay() 方法将周名作为数字返回：</p> <p id="demo8"></p> <script> var d = new Date(); document.getElementById("demo8").innerHTML = d.getDay(); </script> <hr> <h22>JavaScript getDay()</h22> <p>getDay() 方法将周名作为数字返回：</p> <p>您可以使用数组来显示星期的名称：</p> <p id="demo9"></p> <script> var d = new Date(); var days = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"]; document.getElementById("demo9").innerHTML = days[d.getDay()]; </script> <hr> <!--<h12>getUTCDate() 等于 getDate()，但返回 UTC 日期 getUTCDay() 等于 getDay()，但返回 UTC 日 getUTCFullYear() 等于 getFullYear()，但返回 UTC 年 getUTCHours() 等于 getHours()，但返回 UTC 小时 getUTCMilliseconds() 等于 getMilliseconds()，但返回 UTC 毫秒 getUTCMinutes() 等于 getMinutes()，但返回 UTC 分 getUTCMonth() 等于 getMonth()，但返回 UTC 月 getUTCSeconds() 等于 getSeconds()，但返回 UTC 秒 </h12>--> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>修改学生</title> </head> <body> <div align="center"> <h3>更新学生信息</h3> <!-- 通过主页上发送过来的下标 index --> <!-- 获取session对象中的集合 --> <form action="UpdateStudentServlet" method="post"> <!-- 将学号隐藏在修改的表单页面上 --> <input type="hidden" value="${students[param.index].id }" name="id"> 姓名:<input type="text" value="${students[param.index].name }" name="name"><br> 年龄:<input type="number" value="${students[param.index].age }" name="age"><br> <input type="submit" value="更新"> </form> </div> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> <h1><a href=" UpdateStudent.jsp" >返回顶部</a></h1> </body> </html>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <style type="text/css"> *{ /* background: linear-gradient(to right,red,pink,blue); */ } </style> </head> <body> <h1 style="background: black; color: red; text-align: center;">欢迎来到学生信息管理注册登录界面</h1> <hr> <h1><a href="Register.jsp" >点击这里进行学生信息注册页面</a></h1> <hr> <h1><a href="HomeServletBook" >点击这里进入学生图书管理页面</a></h1> <hr> <h1><a href=" AA.html" >点击这里进入一些html5的回顾</a></h1> <h1><a href="TIime.html">当前的获取方式</a></h1> <h1><a href=" ZhuCe.jsp" >返回顶部</a></h1> <h1><a href=" ZhuCe.jsp" >返回界面</a></h1> <img src="img/MVC三层架够图.png" style="height: 500px;width: 900px"> <img src="img/MVC三层架够图二.png" style="height: 500px;width: 900px"> </body> </html>
