1 / 29

Understanding Basics of HTML for Web Development

Learn essential HTML tags, attributes, and form usage for interactive web pages. Discover how to properly structure code and avoid common mistakes.

collinsrobert
Download Presentation

Understanding Basics of HTML for Web Development

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Basics of HTML (Hyper Text Markup Language)  HTML is used to render Web pages  Rendering may differ from a browser to another  It has no computation power and should include some Scripting language, like Java Script or VBScript to produce User interactive Rendering Pages  Despite several design tools, we should learn some basics of HTML to be good web developer. Saturday, January 4, 2020 sohamsengupta@yahoo.com 1

  2. Some basic tags of HTML  The MIME type is text/html (details on MIME later on)  Apart from <html>, <head>, <title>, <body>, and 6 heading tags like <h1>…<h6>, we have tags like <form>, <b>, <u>, <i>, <a>, <ul>, <ol>, <table>, <input>, <select> et al, to mention a few.  Not all these tags require closing, but it’s a good practice to close all tags when over.  Most of the tags have attributes, and it’s a common malpractice to avoid double/single quotes enclosing the attribute values. Saturday, January 4, 2020 sohamsengupta@yahoo.com 2

  3. Hey Man! Quotes Must!  For Example, <input type=“text” name=“fname” value=“Aditya Narayan”> is Okay. But, not the following one… <input type=text name=fname value=Aditya Narayan> In the second case, for some browsers shall truncate the part Narayan from the field. Saturday, January 4, 2020 sohamsengupta@yahoo.com 3

  4. Form Tag and its Importance  The main power of Web is how easily and fast it interacts with the server and processes the user inputs, and what transfers data from the client to the server is the <FORM> tag.  It defines mainly 2 attributes, though not mandatory but expected, are action and method. By default method is GET (details later)  The action contains the URL that the FORM is submitted to and transfers the user-input data to.  Form may contain some <input> field as shown in next slide, some <select> field, and a Submit Button or a Button leading to the Submit event. Saturday, January 4, 2020 sohamsengupta@yahoo.com 4

  5. Inside a <FORM> tag <html><head><title>Welcome to JISCE</title></head><body> <form action=http://myhost:myport/myURI><pre> Enter name: <input type=“text” name=“myName”> Enter ID: <input type=“text” name=“myId”> <select name=“mySkill”> <option value=“Java SE”>Java SE 1.4</option> <option value=“Java EE”>Java EE 1.4</option> <option value=“Java ME”>Java 2 ME </option></select> Gender <input type=“radio” name=“mySex” value=“Male”>Male <input type=“radio” name=“mySex” value=“Female”>Female Check if already registerd <input type=“checkbox” name=“regStatus” value=“regd”> <input type=“Submit” value=“Done”></pre> </form> </body> </html> View At the Code above rendered in IE 6 Saturday, January 4, 2020 sohamsengupta@yahoo.com 5

  6. Inside the <INPUT> tag  <INPUT> tags don’t need to be closed.  With this, we can take any text data, password, checkbox, radio button, Submit Button, Hidden Form Field, Any Button, A File to Upload etc.  The mandatory “type” attribute determines what the INPUT is going to render.  Example, <input type=“text” name=“fname”>  The name attribute is must, too. It lets the server fetch the data “fname” from the data entered here  More on these follows… Saturday, January 4, 2020 sohamsengupta@yahoo.com 6

  7. More on <INPUT> tag  <input type=“password” name=“pwd”>  <input type=“radio” name=“sex” value=“Male”> Male <input type=“radio” name=“sex” value=“Female”>Female  The above 2 radios must have same name else both can be selected at time that’s not desired  The value attribute must be present with radios and You have to render, too; else the user shall not see what’s for what option. The 2 need not be same. Saturday, January 4, 2020 sohamsengupta@yahoo.com 7

  8. <INPUT> tag…contd.  <input type=“checkbox” name=“skill” value=“Java SE”>Java SE <input type=“checkbox” name=“skill” value=“Java EE”>J2EE <input type=“checkbox” name=“skill” value=“Java ME”>J2ME  Check boxes with same name can be multi-checked at a single time. They must have values and the rendered text should be there to tell the user what’s what option and the value attribute may not be same as the text rendered. The server shall accept the value attribute’s values.  Here, the server shall consider the “Java EE” but not the rendered text J2EE. Saturday, January 4, 2020 sohamsengupta@yahoo.com 8

  9. <INPUT> tag… contd.  <input type=“hidden” name=“hdn1” value=“logged”> This shall not be rendered in the browser but are often required for Session tracking (details later)  <input type=“submit” value=“Done”>  <input type=“button” name=“btn1” value=“Click”>  <input type=“file” name=“upldFile”> shall open a File type input on browsing. Saturday, January 4, 2020 sohamsengupta@yahoo.com 9

  10. <select> Tag as Drop-down list  <select name=“skill”> <option value=“Java”>Java</option> <option value=“CPP”>C++</option> <option value=“C#”>C-Sharp</option> </select>  It should have a name, so to let the server retrieve the data skill from the form, after it’s submitted.  Also, Server shall get the value “CPP”, not “C- Sharp” Saturday, January 4, 2020 sohamsengupta@yahoo.com 10

  11. Java Script for Client Side Validation Sometimes, you can’t rest assured with the data that the user inputs through the client browsers as they have to pass several validation and conform to certain constraints. Like, the user may be required to fill up all the fields in the form and then submit. Also, the user may input some Alphabets where only numeric data is required. All these things must be taken care of by the server side program. But, better if we could check them at the client side, thus saving the time of a round-trip to the server. Scripting languages like JavaScript used. Saturday, January 4, 2020 sohamsengupta@yahoo.com 11

  12. A Simple Form validation with Java Script <script language=“JavaScript”> function chkForm(){ var msg=“”; if(document.forms[0].myName.value==“”){ msg+=“Name can’t be blank!\n”; } if(document.forms[0].myCity.value==“”){ msg+=“City can’t be blank!”; } if(msg==“”) return true; else{ alert(msg); return false; } } </script> Saturday, January 4, 2020 sohamsengupta@yahoo.com 12

  13. The HTML Code <body> <form action=“myURL” onsubmit=“return chkForm()”> Enter Name: <input type=“text” name=“myName”> <br>Enter City: <input type=“text” name=“myCity”> <input type=“submit” value=“Submit”> </form> </body> </html> FormValidation.html  onsubmit=“return chkForm()” Note the return keyword, without which it’d not work! Saturday, January 4, 2020 sohamsengupta@yahoo.com 13

  14. Brief history of JavaScript Netscape developed a scripting language called LiveScript Supported both client side and server side scripting Netscape Navigator 2 (support for java applets and LiveScript renamed as JavaScript1.1) Microsoft- JScript IE 3 1997 ECMA (European Computer Manufacturers Association) Standardized ECMA script Opera supporting JavaScript 1.1 W3C standardized DOM to access HTML and XML JavaScript 1.2 Saturday, January 4, 2020 sohamsengupta@yahoo.com 14

  15. Servlet files Programs executes on the server and sends the response JSP files HTML file HTML files JAVA SCRIPT Request Response Client Web Server Saturday, January 4, 2020 sohamsengupta@yahoo.com 15

  16. Uses • To create more interactive pages- client side validations etc. • To generate html dynamically. • Event handling • To enhance browser capabilities by giving it a better look – printing on status bar etc. • Interaction with embedded components like applets and active x controls. Language Features • Object based language:no object inheritance and subclassing. Object -based because it depends on built-in objects to function. • Semicolon, as separator for multiple statements in the same line. • Syntax similar to c++ and java • Case sensitive • Loosely typed • Platform independent • Interpreted Saturday, January 4, 2020 sohamsengupta@yahoo.com 16

  17. External Script JSfile.js <HTML> <HEAD> <BODY> <SCRIPT LANGUAGE=“JavaScript” SRC=“JSfile.js”> </SCRIPT> </BODY> </HTML> Inside head only declarations should be done. No write statements must appear inside head tag. <HTML><HEAD><TITLE>Hello</TITLE> <SCRIPT> document.write(“Hello java script”) </SCRIPT> </HEAD> <BODY></BODY> </HTML> document.write(“Hello”) Scripts inside body and head Incorrect Saturday, January 4, 2020 sohamsengupta@yahoo.com 17

  18. Java Script Data Type and Scope  Java Script is loosely typed and it supports Data Types like String, Date, Array etc. and totally objects.  A variable defined with keyword var inside a function is a local variable. Otherwise it has scope global to the entire HTML page.  We, however, must not indulge in the luxury of dealing with Language basics. Saturday, January 4, 2020 sohamsengupta@yahoo.com 18

  19. A Simple variable and function example <html><head></head> <script> age=90; function fun(){ age=26; alert("Age = "+age); } </script> <input type="button" value="Show Age" onclick="fun()"> <input type="button" value="Show Age12" onclick="sd()"> <script> function sd(){ alert("Age = "+age); } </script> <body> </body></html> See this execute Saturday, January 4, 2020 sohamsengupta@yahoo.com 19

  20. Continuation to The Code  Here age has global scope. Now if we modify the code as including function fun(){ var age=26; alert("Age = "+age); } we shall get different output.  If we omit the statement age=90; we get different situation. But if we associate a var with age, it’d be same.  After this example we not only got to learn about the scope of variables, but we proved that declaring a variable with var keyword doesn’t always localize it. Saturday, January 4, 2020 sohamsengupta@yahoo.com 20

  21. Event handling with Java Script  There’s nothing like consulting the documentation of Java Script. We shall learn to use Java Script with HTML with hands-on practice. Sometimes we shall need to embed Java Script in HTML and position elements dynamically. Some event-handlers: onclick, onkeyup, onkeypress, onkeydown, ondblclick, onchange, Following shall be some assignments we’d discuss. Saturday, January 4, 2020 sohamsengupta@yahoo.com 21

  22. Assignments on Java Script Event Handling-1  There’ll be a form having 2 text fields and a checkbox. The 2ndtext needs only numbers. So, Typing sans numeric shall not be allowed. Now, the checkbox if checked, on clicking the submit button, the browser will ask for confirmation whether to submit or not. If both the fields are not filled up, the form shall never be submitted. Saturday, January 4, 2020 sohamsengupta@yahoo.com 22

  23. Assignments on Java Script Event Handling-2,3  There should be a Hyper link that links to a page. As you make the mouse cursor go over the link, it’d change font color and size. As you mouse-out, it should be restored.  There should be a form that takes 2 text fields, name and Phone No. The Phone No. must be numeric. Also, there should be a checkbox asking for if there is an alternative phone Number to be provided, which, when checked, will display another text field taking only numbers and un-checking will make it disappear. Saturday, January 4, 2020 sohamsengupta@yahoo.com 23

  24. Assignments on Java Script Event Handling-4,5  There should be a text area, and you can type up to 100 characters. As you keep on typing, a text indicating how many characters more remain, shall be displayed continuously.  There should be 2 text fields taking two numbers. A button should be there disabled until both the text fields are filled up. However, if you delete any of the numbers, the button should become disabled again. Otherwise, clicking the button, the sum should be displayed. Saturday, January 4, 2020 sohamsengupta@yahoo.com 24

  25. Frames and Java Script: Assignment  There should be 2 frames on a page. The LHS frame should contain link to a page say 2.html, in various ways, to open in the same and parent frames, in a new window, and in the same window. The page 2.html, would have buttons to close the window in various ways.  You would need some knowledge on DHTML and Cascading Style Sheets (css) to solve some of the assignments. So, the next few slides follow… Saturday, January 4, 2020 sohamsengupta@yahoo.com 25

  26. Three ways to include style • Embedded style • Inline style • Linked styles Setting up style info- an example Microsoft way BODY { font: 12 pt Arial; color: navy; margin- left: 0.25in } H1 { font: 18 pt Arial; color: red } Saturday, January 4, 2020 sohamsengupta@yahoo.com 26

  27. Embedded style : <Style> tag <html><head> <style type="text/css"> BODY { font: 12 pt Arial; color: navy; margin-left: 0.25in} H1 { font: 18 pt Arial; color: red} </style> </head> <body> <h1>Dynamic Web Pages</h1> The need of dynamic web pages; an overview of DHTML, cascading style sheet, comparative studies of different technologies of dynamic page creation </body></html> Saturday, January 4, 2020 sohamsengupta@yahoo.com 27

  28. Inline style <table style="font: 12 pt Arial; color: green; font- weight: bold"> <tr><td>Name</td><td>Reg No. </td></tr> <tr><td>XXXX</td><td>55555</td></tr> </table> Saturday, January 4, 2020 sohamsengupta@yahoo.com 28

  29. Linked style • Linking to a style info in a separate file. BODY { font: 12 pt Arial; color: navy; margin-left: 0.25in} style.css H1 { font: 18 pt Arial; color: red} <html><head> <link rel=“stylesheet” href=“style.css”> </head> <body><h1>Dynamic Web Pages</h1> The need of dynamic web pages; an overview of DHTML,cascading style sheet, comparative studies of different technologies of dynamic page creation </body></html> Saturday, January 4, 2020 sohamsengupta@yahoo.com 29

More Related