Building Web Based Application using HTML

Size: px

Start display at page:

Download "Building Web Based Application using HTML"

Phillip Bishop
6 years ago
Views:

1 Introduction to Hypertext Building Web Based Application using HTML HTML: Hypertext Markup Language Hypertext links within and among Web documents connect one document to another Origins of HTML HTML is based on SGML (Standardized General Markup Language) A philosophical rule was that HTML should convey the structure of a hypertext document, but not the details of its presentation. Since then, HTML has evolved into a presentation language. What is HTML? HTML (Hypertext Markup Language) HTML standards are developed under the authority of the World Wide Web Consortium (W3C), headed by Tim Leehttp:// HTML is the set of "markup" symbols or codes inserted in a file intended for display on a World Wide Web browser. The markup tells the Web browser how to display a Web page's text, images, sound and video files for the user. The individual markup codes are referred to as elements (but many people also refer to them as tags). HTML HTML is easy to pick up. There are many good books as well as resources on-line Our goal is to teach you the basics so that you can pick up the rest on your own. HTML Documents HTML documents are text documents We use simple ASCII text files RK University MCA Dept. Mr. Sandip Kaswala Page 1

2 Html file extensions:.html or.htm You can create html documents using: Notepad in Windows and TextEdit (MAC OS X) You can also use HTML Editors HTML Editors HTML editors are called WYSIWYG What You See Is What You Get! Examples of HTML Editors: Dreamweaver Word Pad Notepad Pros Good for beginners You do not have to know much HTML to use editors It is easy to create complex tables, image maps, and use advanced functions such as Style Sheets and JavaScript Easy for design due to the WYSIWYG interface Cons They do not always generate clean HTML Add redundant tags Add their own tags They do not offer good graphic tools to manipulate images It can be hard to fix HTML tags since every time you open a document, code is added. HTML Document Structure HTML Document contains Text (content of the page) HTML uses the following file extensions or suffix:.html or.htm Embedded tags: provides instruction for the structure, and appearance of the content RK University MCA Dept. Mr. Sandip Kaswala Page 2

The HTML document is divided into two major parts: HEAD: contains information about the document: Title of the page (which appears at the top of the browser

Contains the actual content of the document This is the part that will be displayed in the browser window Sample HTML Document HTML Tags All HTML tags are made up

3 The HTML document is divided into two major parts: HEAD: contains information about the document: Title of the page (which appears at the top of the browser window) Meta tags: used to describe the content (used by Search engines) JavaScript and Style sheets generally require statements in the document Head BODY: Contains the actual content of the document This is the part that will be displayed in the browser window Sample HTML Document HTML Tags All HTML tags are made up of a tag name and sometimes they are followed by an optional list of attributes which all appear between angle brackets < > RK University MCA Dept. Mr. Sandip Kaswala Page 3

4 Nothing within the brackets will be displayed by the browser (unless the HTML is incorrectly written and the browser interprets the tags as part of the content) Attributes are properties that extend or refine the tag s functions Basic Syntax Most (but not all!) HTML tags have a start tag and an end tag: <H1>Hello, world!</h1> Basic Document Structure header: information about the page, e.g. the title. body: the actual content of the page. document starts with <HTML> and ends with </HTML> HTML Tags Standalone tags There are a few HTML tags which do not use an end tag and are used for standalone elements on the page: <img> to display an image <BR> Line break <HR> header Attributes <body bgcolor= khaki text= # link= blue vlink= brown alink= black > Attributes are added within a tag to extend a tag s action. You can add multiple attributes within a single tag. Attributes belong after the tag name; each attribute should be separated by one or more spaces. Most attributes take values, which follow an equal sign = after the attribute s name. Values are limited to 1024 characters in length. This is Information which the browser will ignore: Tabs multiple spaces will appear as a single space Example: RK University MCA Dept. Mr. Sandip Kaswala Page 4

5 Hello, How are you? The browser will ignore the blanks and new line: Hello, How are you? <P> V/S. <BR> Tags <BR>: Break <P>: Paragraph tag. Creates more space than a BR tag. <HR>: Creates a Horizontal Rule Paragraph Tag <P> Leaves one empty line after the tag Multiple <P> tags with no intervening text is interpreted as redundant by all browsers and will display a single <P> tag Line break <BR> This tag breaks the line and starts text at a new line. It will not add an empty line like the paragraph tag Multiple <br> tags will display multiple line breaks Comments  Browser will NOT display text in between   I. E. uses the following tag as a comment: <comment> this a comment </comment> Headings: <h1>.. <h6> You can create Headlines of various sizes on your page Headlines appear as bold letters An empty line will also follow the headlines. Used for titles H1 is the largest font and h6 is the smallest heading RK University MCA Dept. Mr. Sandip Kaswala Page 5

6 Headings need an end tag </h1> Font Tags to specify color, font type and size <FONT FACE=ARIAL SIZE=6> <B>The Curse of Xanadu</B> </FONT> <FONT FACE=ARIAL SIZE=3> by By Gary Wolf, <I>Wired Magazine</I> </FONT> Font tags: face: Arial, Courier, etc. size: e.g. 3, 6 color: e.g. RED, GREEN, etc. Text format tags Bold: <b> some text </b> or <strong> Italic <I> some text </I> or <em> <HR> (Horizontal Rule) Displays horizontal line in the browser window. The line fills the window from left to the right margins. It s useful to separate sections of your document You can use attributes with <hr> such as <hr width= 70% > Lists Lists are used to organize items in the browser window: Unordered list: Bulleted list (most popular), list items with no particular order Ordered list: Numbered list Lists HTML supports two types of Lists: Ordered Lists (OL): e.g. 1,2,3 UnOrdered Lists (UL): e.g. bullets. Basic Syntax: <UL> <LI>Item 1 RK University MCA Dept. Mr. Sandip Kaswala Page 6

7 <LI>Item 2 </UL> Unordered list: Unordered list: Bulleted list (most popular), lists items with no particular order Fruit <UL> <LI> Banana <LI>Grape </UL> Ordered list: Numbered list: Fruit <ol> <LI> Banana <LI>Grape </OL> Hyperlinks (Anchor Tag): Hyperlinks are used for linking: within the same page (Named tags) To another page in your web site (Relative Link or local link) To another page outside your web site (Absolute or remote link) Link Hyper Links: are highlighted and underlined text. When you click on it, it takes you to another page on the web. <A command= target >highlighted text</a> Absolute Link: These are links to another page outside of your web site. These links specify the entire URL of the page: <A HREF= >RKUNIVERSITY</A> RKUNIVERSITY RK University MCA Dept. Mr. Sandip Kaswala Page 7

8 Relative Link: These are links to another page in your site so you do not have to specify the entire URL. <A HREF= index.html >Go back to main page</a> Go back to main page Targeted Links A tag includes a target attribute. If you specify target= _blank, a new browser window will be opened. <A HREF= target="_blank > RKU</A> More on this when we get to frames... Link: You can someone at: <a href= abc@gmail.com >Send to ABCD..</A> HTML Tables Tables represent a simple mechanism for creating rows and columns of data. This is a great tool for laying out the content of any web page, especially when you omit the border by using: border = 0 Tables are very widely used and supported by all common browsers. Tables use a very simple tag structure. Backgrounds Use < body bgcolor = > for a background color with a hex version of a web-safe color: <body bgcolor = ccffff > For a tiled background using an image file: <BODY background="backgroundpicture.gif"> HTML Tables Tables provide a means of organizing the layout of data A table is divided into rows and columns: these specify the cells of the table Cells can contain text, images, links, other tables... Tables can also be used for organizing the layout of the web page itself. RK University MCA Dept. Mr. Sandip Kaswala Page 8

9 Tables tags starts with 1. <TABLE> tag, then 1. <TR> defines table rows. Each <TR> represents one row in the table. The number of rows is determined by the number of <TR> 2. <TD> Table data or <TH> Table Header can follow the <TR> tag The number of cells in each row is determined by the number of <TH> (Table Header) and/or <TD> (Table data) tags contained within that row. <TH> text will be in bold, and centered 2. <table> Basic Tag Structure: <TABLE> <TR > <TH>Ticker</TH> <TH>Price</TH> </TR> <TR> <TD>MSFT</TD> <TD>71 1/16</TD> </TR> <TR> <TD>KO</TD> <TD>46 15/16</TD> </TR> </TABLE> RK University MCA Dept. Mr. Sandip Kaswala Page 9

10 Row and Columns RK University MCA Dept. Mr. Sandip Kaswala Page 10

11 Align and Width attributes Building Web Based Application using HTML Page formatting RK University MCA Dept. Mr. Sandip Kaswala Page 11

12 Frames and Framesets A frameset partitions a web browser window so that multiple web documents can be displayed simultaneously. Example application: To maintain a permanently visible directory of links within your site, while also displaying one or more selected documents from the site. otherwise the directory of links must appear on every page, and this scrolls up with the page Note: framesets can cause problems for bookmarking and for "screen readers" (for visually-impaired users) Framesets <html> <head><title>frames 1</title></head> <frameset cols="140,*"> <frame name="navf" src="navigation.html"> <frame name="mainf" src="intro.html"> </frameset> </html> The frameset element replaces the body element frameset has attributes cols or rows, defined in terms of pixels, percentage(%) or unspecified (*) this splits the window into two or more columns or rows RK University MCA Dept. Mr. Sandip Kaswala Page 12

13 Frame attributes The name attribute uniquely identifies the frame. It may be used as the target in an anchor (<a>) element The src attribute specifies the web page to be placed in the frame initially (it may subsequently be overwritten) The scrolling attribute ("auto", "yes", "no") specifies whether the frame is to have scroll bars The frameborder attribute ("0", "1") specifies whether the frame is to have a border navigation.html The anchor tag has a target attribute takes the name of the frame used to display the information All anchors below are targeted to the "mainf" frame RK University MCA Dept. Mr. Sandip Kaswala Page 13

14 <html><head><title>navigation Bar</title></head> <body><center> <a href="course.html" target="mainf">html Course</a><br><br> <a href="paragraph.html" target="mainf">paragraphs</a><br> <a href="headings.html" target="mainf">headings</a><br> <a href="ulists.html" target="mainf">unordered lists</a><br> <a href="olists.html" target="mainf">ordered lists</a><br> <a href="nlists.html" target="mainf">nested lists</a><br> <a href="intro.html" target="mainf">home</a><br> </center></body> </html> intro.html A simple document which is initially placed in the "mainf" frame This is replaced when a user clicks on a link in the "navf" frame <html> <head><title>internet Computing</title></head> <body> <h2>welcome to the HTML Course</h2> <p> <h4>please select the subject of...</h4> </p> </body> </html> RK University MCA Dept. Mr. Sandip Kaswala Page 14

Nested framesets Building Web Based Application using HTML <html> <head><title>frames 2</title></head> <frameset cols="140,*"> <frame name="navf" src="navigation.

15 Nested framesets Building Web Based Application using HTML <html> <head><title>frames 2</title></head> <frameset cols="140,*"> <frame name="navf" src="navigation.html"> <frameset rows="30%,70%"> <frame name="upperf" src="intro.html"> <frame name="lowerf" src="course.html"> </frameset> </frameset> </html> No frames Some browsers cannot process frames. Alternative content should be provided using the noframes element RK University MCA Dept. Mr. Sandip Kaswala Page 15

16 <html> <head><title>frames 1</title></head> <frameset cols="140,*"> <frame name="navf" src="navigation.html"> <frame name="mainf" src="intro.html"> </frameset> <noframes> <body> Something here for browsers not supporting frames </body> </noframes> </html> What is Forms Forms are a way to collect information from web users and transmit it back to web server. The form is an HTML element that displays fields which user can enter information and then click a button to submit it. <form> and </form> tags are used to create a form. action attribute provides URL or location of the server-side script that will process the data. You can also send the data to an address by inserting action= mailto:web@mmu.edu.my <input> tags are added to create the fields for the users to enter information. RK University MCA Dept. Mr. Sandip Kaswala Page 16

17 Elements in Forms text checkbox radio (buttons) select (options) textarea password button submit reset hidden file image RK University MCA Dept. Mr. Sandip Kaswala Page 17

18 The method and action attributes The method attribute specifies the way that form data is sent to the server program GET appends the data to the URL POST sends the data separately The action attribute specifies a server program (e.g. a perl program.pl extension) that processes the form data Can also send an action= mailto:d.p.cosker@.. <body> <form method="post" action=" "> <h2>tell us what you think</h2>  </form> </body> Textbox The type attribute specifies the type of user input The name attribute gives an identifier to the input data The size attribute specifies the length of the input field <form> <h2>tell us what you think</h2> Name <input name="name" type="text" size="20"><br> Address <input name="address" type="text" size="30"> </form> RK University MCA Dept. Mr. Sandip Kaswala Page 18

19 size attribute determine the length of the textbox. maxlength attribute the maximum number of character can be typed in a textbox. <input type= text name= Username size= 25 maxlength= 10 > Password box Similar to textbox except that the characters is not revealed and replaced with asterisks. <input type= password name= Username size= 25 maxlength= 10 > Submit/Reset Buttons Submit button is required. Form data will be transmitted to the server when submit button is clicked. The value attribute will determine the label on the buttons. Reset button will clear all form. <input type="submit" value="submit This Form > <input type="reset" value="clear Form and Start Over > RK University MCA Dept. Mr. Sandip Kaswala Page 19

20 Creating a Login Form Building Web Based Application using HTML <form action= > Username : <input type = "text" name = "Username" size= 15 maxlength= 10 ><br> Password : <input type = "password" name = "Password" size= 15 maxlength= 10 ><br> <input type = "submit" value= Login > <input type = "reset" value= Reset > </form> Example (Login form) Checkboxes Allows the user to click on a box to toggle a value to either yes or no. <input type = "checkbox" name= mailist value= yes checked>i m interested to join the mailing list RK University MCA Dept. Mr. Sandip Kaswala Page 20

21 Sometimes, there will a group of checkboxes. In this case, you will have all there checkboxes using the same value in the name attribute. Grocery Checklist <form action = ""> <input type = "checkbox" name ="groceries" value = "milk" checked> Milk <input type = "checkbox" name ="groceries" value = "bread" > Bread <input type = "checkbox" name = "groceries" value= "eggs" > Eggs </form> Radio Buttons Provide mutually exclusive selection value Only one button may be pressed Pressing an alternate button in a radio button group will automatically remove the previous selection RK University MCA Dept. Mr. Sandip Kaswala Page 21

22 What Type of Computer do you have? <form action = ""> <input type="radio" name="computer-type" value="pentium" checked>pentium <input type ="radio" name ="Computer-Type" value ="486DX">486 DX <input type ="radio" name ="Computer-Type value ="486SX">486 SX </form> Text Area Fields <p>comments: <br> <form action= > <textarea name="comments" rows="10" cols="70"> This is text that can be defaulted into the text area field </textarea> </p> </form> RK University MCA Dept. Mr. Sandip Kaswala Page 22

Combo Boxes Building Web Based Application using HTML Provides efficient way to choose a value from a list of valid values Similar to Radio Buttons The input element: type="submit/reset"

23 Combo Boxes Building Web Based Application using HTML Provides efficient way to choose a value from a list of valid values Similar to Radio Buttons The input element: type="submit/reset" type="submit" clicking this button sends the form data to the program (URL) specified in the action attribute of the form type="reset" clicking this button clears all data entered so far Thank you<br> <input type="submit" name="send" value="send"> <input type="reset" name="clear" value="clear"><br> RK University MCA Dept. Mr. Sandip Kaswala Page 23

A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension

A HTML document has two sections 1) HEAD section and 2) BODY section A HTML file is saved with.html or.htm extension HTML Website is a collection of web pages on a particular topic, or of a organization, individual, etc. It is stored on a computer on Internet called Web Server, WWW stands for World Wide Web, also called