Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

HTML (HyperText Markup Language)


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

HTML (HyperText Markup Language)

  1. 1. HTML
  2. 2. • HTML is a document-layout and hyperlinkspecification language. It defines the syntax and placement of special, embedded directions that aren't displayed by the browser, but tell it how to display the contents of the document, including text, images, and other support media. The language also tells you how to make a document interactive through special hypertext links, which connect your document with other documents - on either your computer or someone else's, as well as with other Internet resources, like FTP
  3. 3. • BODY
  4. 4. The output looks like: UIUC University of Illinois at Urbana-Champaign is one of three campuses of the University of Illinois system UIC University of Illinois at Chicago is another campus UIS University of Illinois at Springfield is the newest campus in the system The <DT> and <DD> entries can contain multiple paragraphs (indicated by <P> paragraph tags), lists, or other definition information.
  5. 5. Nested Lists Lists can be nested. You can also have a number of paragraphs, each containing a nested list, in a single list item. Here is a sample nested list: <UL> <LI> A few New England states: <UL> <LI> Vermont <LI> New Hampshire <LI> Maine </UL> <LI> Two Midwestern states: <UL> <LI> Michigan <LI> Indiana </UL> </UL>
  6. 6. Image Maps Understanding How Image Maps Work Creating an image map involves three steps: creating the graphic, mapping the graphic for hot zones, and placing the correct information (along with the correct programs) on the Web server itself.. The Map Server Program When a user clicks an image map on a Web page, the browser determines the coordinates of the graphic (in pixels) that describe where the user clicked. The browser then passes these numbers to the map server program, along with the name of the file that contains the URLs that correspond to coordinates Defining Your Image Map Hot Zones As a designer, you are responsible for doing two things in the hot zone definition process. First, you need to define the hot zones to create the image map-that is, you need to decide what URL the coordinates will correspond to when the image map is clicked. Second, you need to create the map definition file that makes the hot zone information available to the Web server these coordinates.
  7. 7. <html><head></head><body> <map name=“ab” > <area shape=“circ” coords=“200,300,100” href=“a1.html” /> <area shape=“rect” coords=“300,400,200,100” href=“a2.html” /> </map> <img src=“a1.gif” usemap=“#ab” /> </body> </html>
  8. 8. Forms • • • • • An HTML form is part of a web page that includes area where readers can enter information to be sent back to you, the publisher of the web page. Creating a form Every form begins with a form tag that can be located anywhere in body of HTM document. The form tag has two main attributes: method: This attrbute can take two values: get and post. Post means to send the form entries as a document. Get submits the results as a part of URL header in the form of result query which is in the form of name-value pairs separated by & action: action attribute specifies the address to which to send the form data. The address can take two values: – Location of form processing script on a web server – mailto: followed by your email address. • • • • • • Various fields or elements of a form Textfield-one line text boxes Syntax: <input type=text name=“txt1” value=“” size=3 maxlength=5 /> Radio button- used when we want the user to select one of a limited number of choices. Syntax: <input type=“radio” name=“rd1” value=“male” />Male The name remains same for all radio buttons but value varies with the label it is representing.
  9. 9. • Checkboxes- checkboxes are used when we want the user to select more than one choice • Syntax: <input type=“checkbox” name=“chk1” value=“MCA” checked />MCA • When the form is submitted the values are submitted to server as name value pairs • Action buttons on form- Action buttons are special buttons that are included in form for submitting the form’s entries to server, for resetting the entries of the form and for initiating various events using language like javascript • Submit button- The submit button submits the entries of forms to the server • Syntax: <input type=“submit” name=“bt1” value=“submit” /> • Reset button- To reset or refill the form • Syntax: <input type=“reset” name=“bt2” value=“reset” /> • Custom image button- To include an image as a button in form • Syntax: <input type=image src=“a.gif” name=“bt3” align=“top” />
  10. 10. • • • • • • • • • • • • • Push buttons: Syntax :<input type=“button” name=“bt4” value=“abc” /> Hidden fields: to pass some hidden values Syntax:<input type=“hidden” name=“txt4” value=“” /> Textarea- Used for entering more than one line text( multiline text entry) Syntax: <textarea name=“” cols=“2” rows=“4”></textarea> Multichoice elements: used for drawing pulldown menus Syntax: <select name=“s1” multiple> <option value=“ ”> </option> <option value=“ “></option> </select> By default all options of select tag are unselected <option selected></option>
  11. 11. • Labels: The label tag is used to define the relationships between a form control such as a text input field and one or more text labels • <label>Name</label> • Password field: The password field is used to get password inputs from the user • <input type=“password” name=“ps” value=“” />
  12. 12. Frames A frame is a rectangular region within the browser window that displays a web page alongside other pages in other frames To create frames in a web page, a special kind of document is created called the frameset document. A frameset document is an HTML page that instructs the web browser to split its window into multiple frames and specifies which web page should be displayed in each frame. The frameset document does not contain a body tag. No tags that can be contained in a body tag can be written in a frameset tag. The frameset tag has two attributes : rows and cols rows: This attribute is used for creating horizontal frames. The height of frames is specified in pixels, percentage or as a proportion of the remaining space by using “*”. cols: This attribute is used for vertical frames and widths are specified as comma delimited list of sizes in pixels , percentage or proportion of remaining space by using “*”
  13. 13. • Frame Tag • Within the frameset tag, frame tag is included indicating the HTML document to be displayed in the frame. Frame tag has an attribute: • src: which gets the address of web page to be loaded in that frame • name: indicating the name of the frame. The name property is used to set the value of target property of anchor tag. The target property of the anchor tag can be: • _blank- loads link in the new unnamed window • _top-loads the link in entire browser window • _parent-loads the link over the parent frame if current frame is nested within other frames • _self- loads link into current frame replacing the document now being displayed in this frame. This is by default.
  14. 14. • Nested frames- By nesting one frameset within another, one can create rather complex frame layouts • <html><head></head> • <frameset rows=“43,*,43” > • <frameset cols=“43,*,43” > • <frame src=“a.html” /> • <frame src=“b.html” /> • <frame src=“c.html” /> • </frameset> • <frameset cols=“43,*,43” > • <frame src=“d.html” /> • <frame src=“e.html” /> • <frame src=“f.html” /> • </frameset>
  15. 15. • • • • • • <frameset cols=“43,*,43” > <frame src=“g.html” /> <frame src=“h.html” /> <frame src=“k.html” /> </frameset> </frameset></html>
  16. 16. • • • • • Other attributes taken by frameset tag are: Framespacing- specifies the spacing between the frames. Border-size in pixels Frameborder- to specify whether the frames contain the border or not. Takes value 1 or 0 for true or false respectively. Other attributes of frame tag are: Scrolling- display scroll bar or not . Gets the value yes or no Noresize-don’t allow this frame to be resized.