HTML Tags HTML tags are used to mark-up HTML elements. HTML tags are surrounded by the two characters < and >. The surrounding characters are called angle brackets HTML tags are not case sensitive, <b> means the same as <B> HTML Element A pair of tags and the content these include are known as an element All attributes are made up of two parts, the attribute s name and its value, separated by an equal sign. Values should be held within double quotation marks. <html> This tag encloses the complete HTML document and mainly comprises of document header which is represented by <head>...</head> and document body which is represented by <body>...</body> tags. <html> <head> <title>website</title> </head> <body> <p>here is a first paragraph of text.</p> </body> </html> <head> The < head > element contains information about the document, which is not displayed within the main page itself. For example, it might contain a title and a description of the page, or instructions on where a browser can find CSS rules that explain how the document should look. < head > < title >P opular Websites: Google < /title > < /head > <title> The <title> tag is used inside the <head> tag to mention the document title. < title >Wer Websites Name < /title > <body> This tag referred to as the body of the page, this contains the information we actually see in the main browser window. It consists of the opening < body > tag, closing < /body > tag, and everything in between.
<body> <p>here is a first paragraph of text.</p> </body> Basic Text Formatting, Presentational Elements,Phrase Elements Headings XHTML offers six levels of headings, which use the elements <h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.browsers display the < h1 > element as the largest of the six and < h6 > as the smallest <h1 >Basic Text Formatting < /h1 > <h2 >Whitespace and Flow < /h2 > Paragraph Tag The <p> tag offers a way to structure wer text into different paragraphs. The < p > element can carry all the universal attributes such as align, class, id, style, title. < p > Here is a paragraph of text. < /p > Line Breaks The <br> tag is used when we want to start a new line, but don't want to start a new paragraph. The <br> tag forces a line break wherever we place it. Paragraph one <b r /> Paragraph three < br / > Preformatted Text Any text between the opening < pre > tag and the closing < /pre > tag will preserve the formatting of the source document. We should be aware, however, that most browsers would display this text in a moonscape font by default.the most common uses of the < pre > element are to represent computer source code. < pre > function testfunction(strtext){ alert (strtext) } < /pre > align Attribute The align Attribute (Deprecated) The align attribute indicates whether the heading appears to the left, center, or right of the page (the default is the left). It can take the three value. < h1 align= left >L eft-aligned Heading < /h1 < h1 align= center >Centered Heading < /h1 > < h1 align= right >R ight-aligned Heading < /h1 >
HTML Lists In HTML, there are two main types of lists: unordered lists (<ul>) - the list items are marked with bullets ordered lists (<ol>) - the list items are marked with numbers or letters HTML Images <img> Tag Images are added to a site using the < img > element, which has to carry at least two attributes: the src & alt attribute. < img src= logo.jpg alt= logo / > Attributes :- 1.src stands for "source." It's telling the browser where to go to find the image. 2.alt stands for "alternate text". It provides a description of the image. This tells the browser that if it can't find the image, then just display this text. It also tells anyone who can't view wer image what the image is about. 3.width stands for just that, the width of the image in pixels. It can range from 1 pixel to, well, just about any number, but generally will be less than the width of the web browser.
4.height stands for, as we might guess, the height of the image in pixels. Again, the height can be just about anything, but generally will be less than the height of the web browser. 5. border A border is a line that can appear around an image or other element. By default, images do not have borders < img src= images/logo.jpg alt= Logo border= 2 /> 6. longdesc The longdesc attribute is used to indicate the URL of a document (or part of a document) containing a description for the image in more detail. longdesc=../accessibility/profit_graphs.html 7. hspace and vspac The hspace and vspace attributes can be used to control the amount of white space around an image. it could create a gap between an image and text that flows around it. < img src= images/logo.jpg alt= Logo hspace= 10 vspace= 14 /> Supports:- GIF: Graphics Interchange Format (pronounced either gif or jif ) JPEG: Joint Photographic Experts Group Format (pronounced jay peg ) PNG: Portable Network Graphics (pronounced pee en gee or ping ) Image map It is usually interface technique in which a user click anywhere inside of image. An location of click affects outcome of click. Image maps allow we to make certain areas of an image into links. There are two types:- a)ismap(server side image map) b)usemap(client side Image map) a)server-side Image Maps(Ismap):- With server - side images, the < img > element sits inside an < a > element just like any image that is a link. But the < img > element carries a special ismap attribute, which tells the browser to send the server x,y coordinates representing what part of the image the user s mouse was on when he or she clicked the image map. Then a script on the server is used to determine which page the user should be sent to, based on the coordinates fed to it.
b)client-side Image Maps Client side image maps are generally more popular. With a client side image map, we can specify a list of areas that will be used as the links. This gives the user the chance to see immediately if where they are about to click is somewhere useful, as opposed to the server-side image map where they must wait for the reply from the server to tell them. There are four types of these areas; rectangles, circles, polygons and default. Client - Side Image Maps Using < map > and < area > The < map > element usually follows directly after the < img > element. It needs to carry only the name attribute to identify itself. < area > elements that actually define the clickable hotspots Attribute 1. shape The value of the shape attribute actually affects how the browser will use the coordinates specified in the cords attribute, and is therefore required. If we do not specify a shape attribute, the default value is a rectangle. 2. coords The cords attribute specifies the area that is the clickable hotspot A rectangle contains four coordinates. The first two coordinates represent the top left of the rectangle, and the second two the bottom right. A circle contains three coordinates; the first two are the center of the circle, while the third is the radius in pixels. A polygon contains two coordinates for each point of the polygon. So a triangle would contain six coordinates, a pentagon would contain ten, and so on. We do not need to specify the first coordinates again at the end because the shape is automatically closed. 3. href The href attribute works just like the href attribute for an < a > element; its value is the URL of the page we want to load when the user clicks that part of the image. 4. usemap The value of the usemap attribute begins with a pound or hash sign, followed by the value of the name attribute on the < map > element it uses. <img src="usemap.jpg" width="500px" height="400px" alt="cycle" usemap="#cyclemap"> <map name="cyclemap"> <area shape="rect" coords="150,42,215,65" alt="seat" href="seat.jpg"> <area shape="circle" coords="385,249,6" alt="hub" href="hub.jpg"> </map>
Forms and Form Controls 1. <form> element The HTML <form> element defines a form that is used to collect user input 2. action Attribute The action attribute specifies the URL of a file that will process the input control when the form is submitted. <form action=" "> Last name: <input type="text" name="lname"><br> 3. method Attribute The method attribute defines the HTTP method for sending form-data to the action URL. <form method="get"> Last name: <input type="text" name="lname"><br> 4. <onsubmit> Attribute This attribute fires when a form is submitted. <form onsubmit submit= validate() > 5. <onreset> Attribute It executes when the reset is clicked. <form onreset="reset()"> Enter name: <input type="text"> <input type="reset"> 6. enctype Attribute The formenctype attribute specifies how the form data should be encoded when submitted (only for forms with method="post"). The formenctype attribute is used with type="submit" and type="image". <form " method="post"> <input type="submit" formenctype="multipart/form-data" value="submit as Multipart/form-data">
7. accept-charset Attribute The accept-charset attribute specifies the character encodings that are to be used for the form submission. <form accept-charset="iso-8859-1"> Last name: <input type="text" name="lname"><br> 8. accept Attribute The accept attribute specifies the types of files that the server accepts (that can be submitted through a file upload). Note: The accept attribute can only be used with <input type="file">. <form > <input type="file" name="pic" accept="image/jpeg"> <input type="submit"> 9. target Attribute The target attribute specifies where to open the linked document: In case of form,the target attribute specifies a name or a keyword that indicates where to display the response that is received after submitting the form. Syntax <a target="_blank _self _parent _top framename"> <form method="get" target="_blank"> Last name: <input type="text" name="lname"><br> <input type="submit" value="submit"> Attribute Values Value Description _blank Opens the linked document in a new window or tab _self Opens the linked document in the same frame as it was clicked (this is default) _parent Opens the linked document in the parent frame _top Opens the linked document in the full body of the window Framename Opens the linked document in a named frame
10. autofocus attribute The autofocus attribute specifies that the input field should automatically get focus when the page loads. <form > First name: <input type="text" name="fname" autofocus><br> Last name: <input type="text" name="lname"><br> 11. <textarea> tag The <textarea> tag defines a multi-line text input control. Attribute:- Rows & cols <textarea rows="4" cols="50"> </textarea> Creating Labels for Controls and the <label> Element 1. Fieldset & Legend elements The <fieldset> tag is used to group related elements in a form.it draws a box around the related elements. The legend tag defines a caption for the fieldset element. <form> <fieldset> <legend>personal Information :</legend> Name: <input type="text"><br> Email: <input type="text"><br> Phone: <input type="number"> </fieldset> 2. tabindex attribute The tabindex attribute specifies the tab order of an element (when the "tab" button is used for navigating). <a href="https://facebook.com/" tabindex="2">facebook</a> <a href="http://www.google.com/" tabindex="1">google</a> <a href="http://www.microsoft.com/" tabindex="3">microsoft</a>
3. accesskey attribute The accesskey attribute specifies a shortcut key to activate/focus an element. Internet Explorer [Alt] + accesskey Chrome [Alt] + accesskey Firefox [Alt] [Shift] + accesskey <a href="https://google.com" accesskey="g">google</a><br> <a href= www.facebook.com accesskey= f">facebook</a> 4. disabled attribute The disabled attribute specifies that the input field is disabled. <form "> Last name: <input type="text" name="lname" disabled><br> <input type="submit" value="submit"> Tip: Disabled <input> elements in a form will not be submitted. 5. readonly attribute The readonly attribute specifies that the input field is read only (cannot be changed): <form Name: <input type="text" name="fname" readonly> 6. Sending Form Data to the Server
Example <form action="/action_page.php" method="get"> <fieldset> <legend>personal information:</legend> First name: <input type="text" name="firstname"><br> Last name: <input type="text" name="lastname"> <br> E-mail: <input type="email" name="email"> password: <input type="password" ><br> Gender: <input type="radio" name="gender" value="male" checked> Male <input type="radio" name="gender" value="female"> Female<br> Vehicles<input type="checkbox" name="vehicle1" value="bike"> I have a bike<br> <input type="checkbox" name="vehicle2" value="car"> I have a car<br> <textarea rows="10" cols="30"> </textarea> <input type="submit" value="submit"> <input type="reset"> </fieldset>