HTML Notes-5-12.pdf

resolution of the image gets decreased. This makes the image less clearer to view. The width and height aren’t strictly necessary but help to speed the display of your web page. Longdesc If the description is too long, you can even attach an html file, in another attribute,...

resolution of the image gets decreased. This makes the image less clearer to view. The width and height aren’t strictly necessary but help to speed the display of your web page. Longdesc If the description is too long, you can even attach an html file, in another attribute, called “longdesc”. This attribute is complementary to “alt” attribute, as shown: For example: Align You can use the “align” attribute to place the image on left or right side of the webpage. If the align attribute is set to left, the image floats to the left margin. If it is set to right, the image floats to the right margin. For example : The image will be flowed to the left side of the webpage and this text will therefore be placed on right side. In the above code, the paragraph tag helps in forming the paragraph to be displayed along with the image on the webpage. “alt” attribute describes the image when the image cannot be displayed by the browser. “height” and “width” attributes decide the area of the image on the web page and the “align” attribute defines the position of the image on the web page. Since the image is set to the left side, the text flows towards the right side. Know the Terms HTML – Hyper Text Mark-up Language Hypertext – The text that contains graphics and text Container tag – An HTML element requiring start as well as end tag ❑❑ CHAPTER-6 HTML ADVANCED-TABLES, LISTS & LINKS Topic- Lists and Links 1 Revision Notes HTML lists  Lists provide the information in a structured and easy to read format. The data item on the webpage can be catalogued or indexed. The index that is formed using numbers like 1,2,3,…, letters like a, b, c,... or symbols like →,circle, square, disc is called a List in HTML. These lists help in formatting the data and put them in a particular order. There are three types of lists that you can use in HTML.These are: UL - creates an unordered or bulleted list OL - creates an ordered or numbered list DL - creates a definition or glossary list Unordered list …. It classifies the data items that have equal importance i.e. none of the data items are ranked. They are identified by a symbol. It may be a  square, a o circle or a ⚫ disc. Ordered lists … It classifies the data items that do not have equal importance. All the data items are ranked. The ranking can be done using the numbers, the roman numerals or letters. Definition lists …. These are the list elements that have an array of tags. The list prepared by tag is similar to a dictionary. The other tags used with this tag are to defines the definition term and defines the definition of the list item. Inserting audio or video When you prepare a webpage, an audio or a moving picture makes the page impressive and pleasing. When you want to show the operations of your business, you can do so by inserting a movie. Both the audio and video can be inserted using a plug- in. A plug-in is a small computer program that extends the standard functionality of the browser. You can insert such plug-in using the tag. The embed tag acts as container to non-HTML resources. The element is used to insert audio. The tag defines a container for external (non-HT- ML) content. The non-HTML contents are the objects other than the text and the graphics used in HTML. They are sound effects, the video clips and moving pictures. If you want to insert a song at the background of the webpage, use the following code to embed a MP3 file in the webpage. The above code displays an audio player (of the dimensions as specified in the code) on one corner of the web page. The songs begin to play, the moment the webpage gets opened. However, the user can stop or pause the song whenever desired. If you want to place the audio player in the center, you can use the center element since it does not have another attribute to place it in center of the window. The “autoplay” attribute of specifies that the audio will start playing as soon as it is ready. The song inserted at the background of the webpage, use the following code to embed and auto play a MP3 file in the webpage. The above code displays an audio player on one corner of the web page and the songs begin to play automatically, the moment the webpage gets opened. Inserting video  A video file is recognized by the extension.mp4 or.avi. Inserting video using “preload” attribute This attribute was formerly known as “autobuffer ” and it was a boolean attribute as “controls”. none - does not buffer video file automatically. metadata - only buffers the metadata of video auto - buffer video file before it gets played. Use the following code to insert the video movie in the web- page, you can use the “preload” attribute with embed tag as shown below: LINKS An anchor element is used to create a hyperlink in a webpage. The word anchor has come from the function performed by anchor in a ship. As an anchor supports the ship when it reaches the shore, similarly, the linked document supports the text or the picture on the homepage. An anchor element consists of three parts. 1. The start tag containing the attribute like href (mandatory), target (optional), name (optional) 2. The text or the image to be hyperlinked 3. The end tag. The basic syntax of anchor tag is: text acting as hyperlink The attributes of anchor tag are href, name and target. To link to a named anchor, add a hash mark (#) to the end of the Uniform Resource Locator of the webpage followed by the name of the section. We can create an e-mail link on our webpage. The browser will read an e-mail link, using the value starting with “mailto:” rather than http://, with your e-mail address rather than a web address. The syntax is given below: Contact Us Know the Terms Definition lists – Lists showing definition and descriptions ( like a dictionary) Ordered lists – Indented lists having numbers or letters in front of every list item Unordered lists – Bulleted lists Topic-2 Tables  Revision Notes The data on the webpage can be represented in tabular form. In HTML, the format can be defined using tag. The tag arranges the data items on the web page in rows and columns. The structure of table is formed using the Table tag. The rows of the table are formed using the TR tag. The data in the cells of the rows are inserted using either the TH tag or the TD tag. The TH tag encloses the Header object and makes the data boldface and center aligned. The TD keeps the data in regular font and left aligned by default. The TH and TD tags are nested inside the TR tag and the TR tag in turn is nested within the TABLE tag. HTML Table Tags Ta Descripti g on It defines a table. It defines a row in a table. It defines a header cell in a table. It defines a cell in a table. It defines the table caption. It specifies a group of one or more columns in a table for formatting. It is used with element to specify column properties for each column. It is used to group the body content in a table. It is used to group the header content in a table.  It is used to group the footer content in a table. S.N Description Tags and Attributes Value o. s 1. Define Table 2. Table Border 3. Desired Width (in pixels) 4. Width Percent (percentage of page) 5. Table Row Alignment 7. Table Cell (must appear within table rows) Table Header (same as data, except 8. bold & centered) 9. Alignment 10. No Linebreaks 11. Desired Width (in pixels) 12. Width Percent (percentage of table) 13. Cell Color 14. Columns to Span 15. Rows to Span 16. Table Caption 17. Alignment ILLUSTRATION 1. Border : This attribute is used to insert the lines on four sides of the table. The inside lines show the rows and columns of the table and the outside lines display the dimensions of the table. This attribute takes the value as a number starting from 1 to any number.  Table headers: Name Telephone Bill Gates 555 77 854  Vertical headers: First Name: Bill Gates Telephone: 555 77 854 2. Align : The align attribute helps in placing the table on the webpage. If you want to place it in the center of the webpage, use the “center ” value, for right side use “right” and for the left side of the web page, use the value “left”. Table headers : Table headers: Name Telephone Bill Gates 555 77 854 3. Width :The width attribute helps in identifying the breadth of the table in comparison to the webpage. It accepts the value as a number (in pixels) or in  percentage (in proportion to the width of the webpage). 4. Border color: The colour of the lines inside and outside the table can also be changed using the “Border Color ” attribute. It accepts the value as name of the colour. If you omit this attribute, the colour of the table border is set to its default grey. Table Example: Name Telephone Bill Gates 555 77 854 5. Bgcolor : The background color of a table can be set using the attribute bgcolor. This attribute takes the name of the colour or hexadecimal number as value. 6. Background : If you want to place an image or a picture at the background of the table, you can do so using the background attribute. This attribute takes the value as the address or the path of the picture. The picture may be a bitmap or a graphic image. 7. Cellpadding : It is used to specify the space between the borders of cell and contents of the cell. 8. Cellpacing : It is used to set the distance between two cells. TD and TH element The TH element or tag helps in identifying a table header. Correspondingly, TD element or tag identifies the table data cell. The text inserted using the TH element is in boldface and cen- tred by default. Compared to this, TD element or the tag is aligned to the left and the text is in regular font. The attributes used with or tag are: Align, Colspan, Nowrap, Rowspan, Valign. Align: The align attribute is similar to that of table, except that it aligns the text inside the cell rather than the table. Valign : Valign takes the value top, middle, bottom to vertically align the text inside a cell. Nowrap: The Nowrap attribute does not allow the text to flow to the next line in the cell. If the sentence is wider than the width of the cell, nowrap will show the sentence in one straight line. Colspan: The colspan attribute helps in merging the columns of a row. This attribute is not used with table tag but with the or the tag. Rowspan :When the table’s cells span across more than one row, it is called rowspan If we want to give the table a nice sidebar, this attribute is used. The rowspan appears as merged cells. Caption The tag is used to provide a text to the table so as to explain the contents of the table. It is generally in bold, at center with respect to the table. ❑❑