Unit 3 Advanced HTML 5 PDF

Document Details

Marwadi Education Foundation Group of Institutions, Rajkot

Tags

html5 programming html tags web development web design

Summary

This document contains notes on advanced HTML5 topics, including HTML tags like TABLE and FRAMESET, and form elements such as INPUT, TEXTAREA, AUDIO, VIDEO, and SVG.

Full Transcript

Unit-3 Advanced HTML 5 Marwadi Education Foundation Group Of Institutions, Rajkot TABLE TAG The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, use the TH tag to define row or column headings, and use the TD tag t...

Unit-3 Advanced HTML 5 Marwadi Education Foundation Group Of Institutions, Rajkot TABLE TAG The TABLE tag defines a table. Inside the TABLE tag, use the TR tag to define rows in the table, use the TH tag to define row or column headings, and use the TD tag to defile table cells. TABLE TAG Syntax TABLE TAG ALIGN Specifies the horizontal placement of the table. LEFT aligns the table on the left (the default). RIGHT aligns the table on the right. CENTER aligns the table in the center. BGCOLOR="color" Sets the color of the background for the table. This color can be overridden by a BGCOLOR tag in the TH, TR or TD tags. TABLE TAG BORDER=”value” Indicates the thickness, in pixels, of the border to draw around the table. Give the value as an integer. A value of 0 means the table has no border. You can also supply the BORDER attribute without specifying a value for it to indicate that the table has a border of the default thickness. CELLPADDING=”value" Determines the amount of space, in pixels, between the border of a cell and the contents or the cell. The default is 1. CELLSPACING=”value” Determines of space, in pixels, between individual cells in a table. The default is 2. TABLE TAG HEIGHT="height" Specifies the height of the table. The default is the optimal height determined by the contents of each cell. WIDTH="width" Defines the width of the table. The default is the optimal width determined by the contents of each cell. HSPACE=”horizMargin” Specifies the distance between the left and right edges of the table and any surrounding content. VSPACE=”vertMargin” Specifies the distance between the top and bottom edges of the table and any surrounding content. TABLE TAG CAPTION (table caption) The CAPTION tag defines a caption for a table. Place the CAPTION tag within the TABLE tag but not inside the TDortheTR tags, which indicate table cells and table rows respectively. TR (table row) The TR tag specifies a table row. Use the TR tag inside a TABLE tag. The TR tag can contain tags, which indicate table headings, and TD tags, which indicate able cells. TD (table data) The TD tag specifies text in a cell in a table. Use the TD tag inside a TR tag inside a TABLE tag. TABLE TAG COLSPAN=”value” Indicates the number of columns the cell spans. Give the number as an integer, ROWSPAN=”value” Indicates the number of rows the cell spans. Give the number as an integer. TH (table heading) The TH tag specifies a table cell whose contents are usually displayed in a bolder font than those of regular table cells. The intent of the TH tag is that you use it for column or row headings. FRAMESET TAG The FRAMESET tag defines n set of frames that appear in a web browser window. The FRAMESET tag contains one or more FRAME tags that each describes a frame. An HTML document that contains a FRAMESET tag cannot contain a BODY. A frameset can specify that its frames laid out in rows or columns. FRAMESET TAG INPUT (input element in a form) INPUT TYPE="SUBMIT" When a user clicks a submit button, the form is submitted, which means that the ACTION specified for the form is invoked. Syntax R&B BLUE textToDisplay TEXTAREA (text field on a form) COLS=”columns" Defines the width (number of characters per line) the text area can accommodate without scrolling. NAME-"name" Specifies the name of the text area element. This value is the name portion of the name/value pair sent to server when the form is submitted. ROWS="rows" Defines the number of lines (number of rows) the text area can accommodate. without scrolling. TEXTAREA (text field on a form) Example For faster response, include a full description of your problem, and tell us what hardware configuration you are using. Also include your registration number. AUDIO The HTML5 element specifies a standard way to embed audio in a web page. To play an audio file in HTML, use the element: The controls attribute adds audio controls, like play, pause, and volume. The element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format. AUDIO The text between the and tags will only be displayed in browsers that do not support the element. VIDEO The HTML5 element specifies a standard way to embed a video in a web page. To show a video in HTML, use the element: Your browser does not support the video tag. VIDEO The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes. If height and width are not set, the page might flicker while the video loads. The element allows you to specify alternative video files which the browser may choose from. The browser will use the first recognized format. The text between the and tags will only be displayed in browsers that do not support the element. CANVAS The HTML element is used to draw graphics, on the fly, via JavaScript. The element is only a container for graphics. You must use JavaScript to actually draw the graphics. Canvas has several methods for drawing paths, boxes, circles, text, and adding images. A canvas is a rectangular area on an HTML page. By default, a canvas has no border and no content. The markup looks like this: CANVAS Note: Always specify an id attribute (to be referred to in a script), and a width and height attribute to define the size of the canvas. To add a border, use the style attribute. Here is an example of a basic, empty canvas: CANVAS Your browser does not support the HTML5 canvas tag. var c = document.getElementById("myCanvas"); var ctx = c.getContext(“2d"); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); CANVAS Your browser does not support the HTML5 canvas tag. var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.font = "30px Arial"; ctx.fillText("Hello World",10,50); SVG SVG stands for Scalable Vector Graphics SVG is used to define graphics for the Web The HTML element is a container for SVG graphics. SVG has several methods for drawing paths, boxes, circles, text, and graphic images.

Use Quizgecko on...
Browser
Browser