Html

2. Introducing HTML  HTML stands for Hypertext Markup Language, and it is the most widely used language to write Web Pages. As its name suggests, HTML is a markup language. 1. Hypertext refers to the way in which Web pages (HTML documents) are linked together. When you click a link in a Web page, you are using hypertext. 2. Markup Language describes how HTML works. With a markup language, you simply "mark up" a text document with tags that tell a Web browser how to structure it to display.

3. Advantages of HTML  It requires a text editor. No special software is required to run HTML pages.  It is Platform Independent.  Errors are easy to track in HTML pages.  It is not a programming language; hence compilation of code is not required.  It does not require any expensive licenses to buy or upgrade.  Finding an Error is easy.

4. Disvantages of HTML  It cannot create Interactive web pages.  It cannot perform any calculations.  It cannot display parameters such as date.  Scripting languages like VBScript or Java Script are required to handle caculations,validations and events in HTML documents.  No separate debugger is provided.  Complex HTML code is hard to read and understand.  Syntax errors are not identified or displayed by HTML.

5. HTML Versions

6. HTML Basic Tags  The basic structure for all HTML documents is simple and should include the following minimum elements or tags:  <html> - The main container for HTML pages  <head> - The container for page header information  <title> - The title of the page  <body> - The main body of the page

7. The <html> Element:  The <html> element is the containing element for the whole HTML document. Each HTML document should have one <html> and each document should end with a closing </html> tag.  Following two elements appear as direct children of an <html> element:  <head>  <body>  As such, start and end HTML tags enclose all the other HTML tags you use to describe the Web page.

8. The <head> Element:  The <head> element is just a container for all other header elements. It should be the first thing to appear after the opening <html> tag.  Each <head> element should contain a <title> element indicating the title of the document The <title> Element:  You should specify a title for every page that you write inside the <title> element. This element is a child of the <head> element). It is used in several ways:  It displays at the very top of a browser window.  It is used as the default name for a bookmark in browsers such as IE and Netscape.

9.  Its is used by search engines that use its content to help index pages.  Therefore it is important to use a title that really describes the content of your site. The <title> element should contain only the text for the title and it may not contain any other elements. The <body> Element:  The <body> element appears after the <head> element and contains the part of the Web page that you actually see in the main browser window, which is sometimes referred to as body content.  A <body> element may contain anything from a couple of paragraphs under a heading to more complicated layouts containing forms and tables.

10. html - text  Text is the backbone of any web page. It plays an double role; it provides content for web surfers to enjoy as they skim through articles and articles of information, but it also gives Search Engines and Spiders keywords and meta data. It is because of text on web pages that we have a network of seemingly endless information available at our fingers. html - paragraph text  Any text containing more than a few lines (or sometimes even more) should exist inside of a paragraph tag <p>. This tag is reserved specifically for blocks of text, such as those you would expect to find inside your favourite novel.

11. html - headings 1:6  HTML has heading tags which can be used as headers or subheaders. By placing text inside of an <h1> heading tag, for example, the text displays bold and the size of the text increases to a 24pt font size. Heading tags are numbered 1 through 6, and they change size depending on which tag you choose, with 1 being the largest font size at 24pt, and 6 being the smallest font size at 8pt. html - line breaks  A line break is used in HTML text elements, and it is the equivalent of pressing Enter or Return on your keyboard. In short, a line break ends the line you are currently on and resumes on the next line. html - align attribute  If you wish to change the horizontal alignment of your elements, you may do so using the align attribute. It allows you to align things left, right, or center. By default, most elements are automatically aligned left, unless otherwise specified.

12. html - font size  Set the size of your font with size. The range of accepted values goes from 1 -- the smallest, to 7 -- the largest. The default size of a font is 3. html - font color  Set the color of your font with color. html - hypertext reference (href)  A Hypertext Reference (href) is an HTML attribute of an anchor (link) tag that requires a valid URL in order to properly direct a user to a different location. In other words, this Hypertext Reference is where users will navigate to if they do click on this link.

15. html - comments  Comments are a great asset to new developers and a great way to place little notes to yourself reminding yourself what pieces of code are doing what. Comments are also great ways to troubleshoot bugs and code errors, as they give you the ability to comment out lines of code one at a time to search for the exact line causing problems. html - lists  HTML lists appear in web browsers as bulleted lines of text. There are actually three different types of HTML lists, including unordered lists (bullets), ordered lists (numbers), and definition lists (think: dictionaries). Each list type utilizes its own unique list tag.

16. html - unordered lists  An unordered list (<ul>) signifies to a web browser that all list items contained inside the <ul> tag should be rendered with a bullet preceding the text. The default bullet type for most web browsers is a full disc (black circle), but this can be adjusted using an HTML attribute called type. html - ordered lists  An ordered list is defined using the <ol> tag, and list items placed inside of an ordered list are preceded with numbers instead of bullets.  The numbering of an HTML list can be changed to letters or Roman Numerals by once again adjusting the type attribute.  <ol type="a"> <ol type="A"> <ol type="i"> <ol type="I">  The start attribute allows you to further customize an HTML ordered list by setting a new starting digit for the ordered list element.

17. ATTRIBUTES OF <BODY> TAG 1. Alink:The alink attribute specifies the color of an active link in a document (a link is activated when it is clicked). 2. Vlink:The vlink attribute specifies the color of visited links in a document. 3. Bgcolor:The bgcolor attribute specifies the background color of a document. 4. text :The text attribute specifies the color of the text in a document. 5. Style:The <style> tag is used to define style information for an HTML document. 6. Background: The background attribute specifies a background image for a document.

18. <div> Tag  The <div> tag defines a division or a section in an HTML document.  The <div> tag is used to group block-elements to format them with CSS.  Attributes 1. id  The id selector is used to specify a style for a single, unique element. The id selector uses the id attribute of the HTML element, and is defined with a "#". 2.Class  The class selector is used to specify a style for a group of elements. 3.Dir  The <dir> tag is used to list directory titles.

19. 4.Style  The <style> tag is used to define style information for an HTML document.  Inside the <style> element you specify how HTML elements should render in a browser.

20. 1.Centre Tag  The <center> tag is used to center-align text. 2.<s> Tag  It is used to display strike through text. 3.<big> Tag  Make text bigger than normal. 4.<small> Tag  Make text smaller than normal. 5 <pre> Tag  The <pre> tag defines preformatted text.  Text in a <pre> element is displayed in a fixed-width font (usually Courier), and it preserves both spaces and line breaks.

21. <HR>TAG  HR tag is used to draw Horizontal lines(rules) in your document.  Attributes of HR tag. 1. Align: The align attribute specifies the alignment of a horizontal line. It can have left/right/center values. 2. Width: The width attribute specifies the width of a horizontal line, in pixels or percent. 3. NOSHADE: Normally the line of HR is shaded, so that, it looks like a 3D line. But if no shade attribute is specified, the HR line will be a 2D-line,with blank colour. 4. Color: Set color to the line. 5. Size: This attribute specifies the thickness of the line.

22. <img> Tag  The <img> tag defines an image in an HTML page.  Attributes. 1. SRC:This defines the name of the image file. 2. Height and Width: These attributes specify the height and width of the image. 3. Border: This specifies the border of the image. 4. Hspace:The hspace attribute specifies the whitespace on left and right side of an image. 5. Vspace:The vspace attribute specifies the whitespace on top and bottom of an image. 6. Allign:This attribute describes how the image should be aligned with respect to the surrounding text.Vlaues are top,bottom,centre/middle,left and right.

23. 6. LOWSRC:This Attribute indicates the absolute or relative location of a low resolution version of an image. 7. ALT:The value of this attribute should be some text describing the image,

24. HTML Tables  A table is divided into rows (with the <tr> tag), and each row is divided into data cells (with the <td> tag). td stands for "table data," and holds the content of a data cell. A <td> tag can contain text, links, images, lists, forms, other tables, etc.  Tables are defined with the <table> tag. Tags used in Table. 1.<table>: Defines a table. 2. <th>:Defines a header cell in a table. 3. <tr>: Defines a row in a table. 4. <td>: Defines a cell in a table. 5. <caption>: Defines a table caption.

25. 6.<colgroup>: Specifies a group of one or more columns in a table for formatting. 7.<col>:Specifies column properties for each column within a <colgroup> element. 8. <thead>:Groups the header content in a table. 9. <tbody>:Groups the body content in a table. 10. <tfoot>:Groups the footer content in a table

26. Attributes 1. Align: This specifies the alignment of the table with respect to the browser window.values-left,right and corner. 2. Width: The width attribute specifies the width of a table. If the width attribute is not set, a table takes up the space it needs to display the table data. 3. Border: The border attribute specifies if a border should be displayed around the table cells or not. 4. Cellspacing:The cellspacing attribute specifies the space, in pixels, between cells. 5. Cellpadding:The cellpadding attribute specifies the space, in pixels, between the cell wall and the cell content. 6. Bgcolor:The bgcolor attribute specifies a background color of a table. 7. Bordercolor:Sets the color of the border of all table cells.

27. 8. height: The height attribute specifies the height of a cell. 9 Align :The align attribute specifies the horizontal alignment of the content in a cell. 10.Rowspan: This will merge the current cell with a specified number of its adjacent cells on the same column. 11.Colspan: This will merge the adjacent cell with a specified number of its adjacent cells on the same column. 12.Embedding tables:  Two or more tables can be inserted within each other in a single web page i.e<Table>can be nested within another table tag. This is known as embedding of Tables.

28. MARQUE TAG  The markuee Tag is used to display a scrolling text message within a document.  Attributes: 1)BEHAVIOR: Indicates type of scrolling ,Values are scroll/alternate/slide. 2) DIRECTION: This attribute specifies scrolling direction of the MARQUEE text. The values are Left: This scrolls the text from right to left. Right: This scrolls the text from left to Right. 3) SCROLLAMOUNT: Indicates how far(in numbers of pixels)marquee text shifts between redraws. 4) SCROLLDELAY: Indicates how often(in million seconds)the marquee text redraws. Increase the value of i.e n.slow the scrolling action.

29. HTML Frame  Frame divides browser window into several parts through which we can see more than one web page at a time. Multiple scrollable sections can be created using frames. Each HTML document is called a ‘frame’ and each frame is independent of others. Frame page ac be hyperlinked.  The <frame> tag defines one particular window (frame) within a <frameset>.  Each <frame> in a <frameset> can have different attributes, such as border, scrolling, the ability to resize, etc.

30. Attributes 1.src:The src attribute specifies the location of the document. 2.Frameborder:The frame border attribute specifies whether or not to display a border around a frame.

31. 3.Marginwidth :The margin width attribute specifies the width between the content and the left and right sides of the frame, in pixels. 4. Marginheight:The marginheight attribute specifies the height between the content and the top and bottom of the frame, in pixels. 5. noresize: The noresize attribute specifies that a <frame> element cannot be resized by the user. By default, each <frame> in a <frameset> can be resized by dragging the border between the frames. However, this attribute locks the size of a frame. 6. name: It is used to assign the name to the frame for targeting and linking purpose . 7. scrolling: The scrolling attribute specifies whether or not to display scrollbars in a <frame>. By default, scrollbars appear in a <frame> if the content is larger than the <frame>.

33. a. Row Attribute:  This rows attribute divides the screen into Horizontal frames. b. Cols Attribute  The Cols attribute divides the browser divides the browser window into vertical frames depending upon the width defined. c) Nested Frames  You can nest a <frameset>tag within another <frameset>tag.

34. Linking frame or Target attribute  Linking is one advantages of using frame. In linking there is menu/links on the left side of browser and the content is displayed on the right side while clicking on links.

35. iframe  The <iframe> tag specifies an inline frame.  An inline frame is used to embed another document within the current HTML document.  Attributes: 1. src: The src attribute specifies the address of the document to embed in the <iframe>.

36. Image Mapping  Image Mapping is a single graphic image that consist of number of “hyperlinks” incorporated within an image. The specific area mapped within an image are known as hotspots. Each hotspot is a link. This regions are clickable.  Image format which can be used is either JPEG or GIF.  MAP file is a text file that contains the information of an Image and the mapped areas of an image. These areas can be rectangles,circles,or polygons defined in an image and are done by specifying screen coordinates in pixels.  They are of two types 1. Client side image Map. 2. Server side Image Map.

37. Client side image Map.  Client side image maps are not dependent on server. They are executed on client machine from web browser itself. Since all information for a client-side image map is loaded along with the image, it executes more quickly than server-side image map.  In order to mention that image map is client side, use USEMAP attribute of the <ing>,<map>and <area>tags are used to define hotspot in am image. The <map> tag ha s name attribute which is referenced within the <img>tag with USEMAP attribute.  For specifying the areas of the hotspot, the <area>tag is used within<map>tag.  The attributes of<area> tag are as follows 1. Shape-specifies as Rectangle, circle and polygon. 2. Coords-specifies coordinates for rectangle, circle and polygon. 3. Alt-specifies alternate text given to hotspot.

38. 4.Href:specifies path of html file or URL of website. RECTANGLE(RECT):This requires the upper left and right bottom(X,Y)coordinates. <area shape=“rect” coords=“22,37,123,97”alt=“rectangle” href=“page1.html> CIRCLE(CIRCLE):This requires the coordinates of center point and radius(in pixels). <area shape=“circle” coords=“406,38,30”alt=“circle” href=“page2.html> POLYGON(POLY):This requires 3 or more pair of coordinates to form ploygon. <area shape=“poly” coords=“48,169,142,234,50,248”alt=“circle” href=“page3.html>

39. Server side image Map.  When a server side image map is displayed on the browser ,the program that executes the link is placed on the server. The browser activates program on the server by sending x and y coordinates of the position where the hyperlink k is created. On receiving these coordinates the program on the server looks at the map file for close match to these coordinates and then loads the file that is closest to this range.

40. HTML Forms HTML forms are used to pass data to a server. The <form> tag is used to create an HTML form for user input. The <form> element can contain one or more of the following form elements: <input> <label> <textarea> <button> <select> <option> <optgroup> <fieldset>

41. The Input Element and Text Field  The <input> element is used to select user information.  An <input> element can vary in many ways, depending on the type attribute. An <input> element can be of type text field, checkbox, password, radio button, submit button, and more. Text Fields  <input type="text"> defines a one-line input field that a user can enter . Password Field  <input type="password"> defines a password field.

42. Radio Buttons  <input type="radio"> defines a radio button. Radio buttons let a user select ONLY ONE of a limited number of choices. Checkboxes  <input type="checkbox"> defines a checkbox. Checkboxes let a user select ZERO or MORE options of a limited number of choices. Submit Button  <input type="submit"> defines a submit button.  A submit button is used to send form data to a server. The data is sent to the page specified in the form's action attribute. The file defined in the action attribute usually does something with the received input.

43. RESET BUTTON  The Reset Button usually used along with SUBMIT button resets the value of the form to its original states. Button  It is used for clicking and activating a function. It does not submit data in the form. Select tag<select>  The <select> element is used to create a drop-down list.  The <option> tags inside the <select> element define the available options in the list. Attributes: 1. Name: The name attribute specifies the name for a drop-down list. The name attribute is used to reference elements in a JavaScript, or to reference form data after a form is submitted.

44. 2. SIZE: Allows to specify the number of list items to be displayed at one time eg.size=value. 3. MULTIPLE: It is used to select more than one selection from the same list. Text Area tag  The <textarea>-----</textarea>is used to create multiline textbox or large editable area .It is useful in those forms who you want detailed feedback with multiline entries. Attributes: 1. Name:”text” attribute sets the name of the textarea to the script on the server when the form is submitted. 2. Cols=“number:”specifies the width of the text entry area as rows. 3. Rows=“number:”specifies the height of the text entry as rows.

45. <input type =“file”>  This attribute is used for uploading the files. Inserting Sound and Video Inserting audio and video increases the effectiveness of web pages. Formats 1. WAV format developed by Microsoft and IBM.I t is audio standard for window platform. 2. AIFF(Audio Interchange File Format)was developed by Apple and is mainly used MAC platform. 3. Ra(Real Audio Format)is a lower quality audio, but loads much more quickly due to file size which is much smaller WAV,AIFF format.

46. 4. .MPEG/.MPG(Moving Pictures Experts Group):format does not occupy space and gives vey good sound quality. 5. .AU(Audio):is a Sun Microsystems format. It is for UNIX platform. 6. .MIDI(Musical Instrument Digital Interface):format is basically music industries standard format that uses very less disk space than that of WAV formats. This format is used for instrumental music. Linking an Audio/Midi files:  Hyperlink the audio files format that would like to use in web page. Using <A> anchor tag. <bgsound>  This tag is used to specify a background sound for a web page and to define it's attributes.

47. Attributes: 1. <bgsound src="">  This attribute is used to define what the source of the sound is. Insert the file name and file path if necessary here. 2. <bgsound loop="">  The loop attribute is used to define how many times the sound will repeat itself. Between the quotes specify how many times you want the sound to repeat. Setting loop to "infinite" or "-1" will cause the sound to repeat indefinitely. Embed Tag  This tag is used to insert audio as well as video both.

48. Attributes: 1. SRC: Specify the name of audio or video file that is embeded in HTML page. 2. Autostart=“true/false” True values plays the music when page is loaded .Using “false” as a value will mean that the sound will have to play when the user user clicks on the play button. 3. Hidden=“true/false”False value shows the console(Default) where as true value hide the console so you can only listen the audio or video. 4. Voulme:Sets the volume of music.1 to 100,50 being the default value. 5. Width:Specifies the width of console. 6. Height:Specifies the height of console. 7. Controls=“consoles/small consoles” Value Console gives the complete console with play, stop and pause button and small consoles displays play and stop button.

Html

Html

Recomendados

Más contenido relacionado

Was ist angesagt?

Was ist angesagt?(20)

Similar a Html

Similar a Html(20)

Último

Último(20)

Html