Category: html5

HTML5 – Overview ”; Previous Next HTML5 is the next major revision of the HTML standard superseding HTML 4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting content on the World Wide Web. HTML5 is a cooperation between the World Wide Web Consortium (W3C) and the Web Hypertext Application Technology Working Group (WHATWG). The new standard incorporates features like video playback and drag-and-drop that have been previously dependent on third-party browser plug-ins such as Adobe Flash, Microsoft Silverlight, and Google Gears. Browser Support The latest versions of Apple Safari, Google Chrome, Mozilla Firefox, and Opera all support many HTML5 features and Internet Explorer 9.0 will also have support for some HTML5 functionality. The mobile web browsers that come pre-installed on iPhones, iPads, and Android phones all have excellent support for HTML5. New Features HTML5 introduces a number of new elements and attributes that can help you in building modern websites. Here is a set of some of the most prominent features introduced in HTML5. New Semantic Elements − These are like <header>, <footer>, and <section>. Forms 2.0 − Improvements to HTML web forms where new attributes have been introduced for <input> tag. Persistent Local Storage − To achieve without resorting to third-party plugins. WebSocket − A next-generation bidirectional communication technology for web applications. Server-Sent Events − HTML5 introduces events which flow from web server to the web browsers and they are called Server-Sent Events (SSE). Canvas − This supports a two-dimensional drawing surface that you can program with JavaScript. Audio & Video − You can embed audio or video on your webpages without resorting to third-party plugins. Geolocation − Now visitors can choose to share their physical location with your web application. Microdata − This lets you create your own vocabularies beyond HTML5 and extend your web pages with custom semantics. Drag and drop − Drag and drop the items from one location to another location on the same webpage. Backward Compatibility HTML5 is designed, as much as possible, to be backward compatible with existing web browsers. Its new features have been built on existing features and allow you to provide fallback content for older browsers. It is suggested to detect support for individual HTML5 features using a few lines of JavaScript. If you are not familiar with any previous version of HTML, I would recommend that you go through our HTML Tutorial before exploring the features of HTML5. Print Page Previous Next Advertisements ”;

HTML – SVG ”; Previous Next HTML SVG (Scalable Vector Graphics) is used to define vector graphics in XML that can be embedded into HTML pages. SVG is different from normal images as it does not lose quality even after zooming it. XML is an abbreviation that stands for Extensible Markup Language and it is a data description language. It does not have any predefined tags hence; the users are required to define their own tags depending on the need. What is SVG? SVG stands for Scalable Vector Graphics. SVG helps us to draw any types of images using XML coding. Zooming a XML vector does not lose it”s quality It is mostly useful for vector-type diagrams like Pie charts, and two-dimensional graphs in an X, Y coordinate system. SVG became a W3C Recommendation on 14 January 2003. SVG (Scalable Vector Graphics) The PNG, GIF, and JPG files are bitmap graphics and SVG files are vector graphics. The main difference between these two is that bitmap graphics are made up of a grid of tiny pixels but, vector graphics are defined by coding hence vector graphics does not lose quality after zooming. Ways to use SVG in HTML? There are two ways of embedding the SVG files in HTML Using <img> tag Using <svg> tag Using <img> tag We can directly embed the SVG files inside our web page using the src attribute of <img> tag as shown below. We can pass either the path or an online link to the svg image. <img src = “yourfilename.svg”/> Using <svg> tag HTML allows embedding SVG directly using <svg>…</svg> tag which has the following syntax <svg> <!– code to create graphics –> </svg> Tags inside SVG Element There are some predefined SVG elements that are used to draw various shapes like circles, rectangles, lines and so on. They are as follows Tags Description <rect> Used to define a rectangle in vector graphics for given width and height as attribute. <circle> Used to define circle for given coordinates of top-left corner and radius as attribute. <ellipse> Used to define ellipse for given coordinates of top-left corner, length of major axis and length of minor axis as attribute. <line> Used to draw line for for given two coordinates as attribute <polyline> Used to define a polyline for given coordinates of series of connected points <polygon> Used to define a polygon for given coordinates that joins in straight line. The <svg> tag is the top level (root) element of the above mentioned tags. They are defined inside the svg element. Attributes of SVG Elements The following table contains a list of attributes of SVG Elements Attribute Description X The top-left x-axis coordinate. Y The top-left y-axis coordinate. width The width of rectangle figure. height The height of rectangle figure. rx The x-axis” roundness of ellipse. ry The y-axis” roundness of ellipse. style Indicate an inline style. Examples of HTML SVG Element Following are some examples that shows how to draw different graphical elements using SVG tag. Draw a Circle using HTML SVG Tag Following is the SVG example which would draw a circle using <circle> tag inside SVG element. Here cx is x coordinate of top-left corner of circle, cy is y coordinate of top-right corner of circle <!DOCTYPE html> <html> <head> <title>SVG-Circle</title> </head> <body> <h2>HTML SVG Circle</h2> <svg height=”500″ > <circle cx=”50″ cy=”50″ r=”50″ fill=”red” /> </svg> </body> </html> Draw a rectangle using HTML SVG Tag Following is the SVG example which would draw a rectangle using <rect> tag. We use height and width attributes to make a rectangle <!DOCTYPE html> <html> <head> <title>SVG Rectangle</title> </head> <body> <h2>HTML SVG Rectangle</h2> <svg height = “200”> <rect width = “300” height = “100” fill = “red” /> </svg> </body> </html> Draw a line using HTML SVG Tag Following is the SVG example which would draw a line using <line> tag for provided coordinates of two points(x1,y1, x2,y2). We can also use the style attribute which allows us to set additional style information like stroke and fill colors, width of the stroke, etc. <!DOCTYPE html> <html> <head> <title>SVG Line</title> </head> <body> <h2>HTML SVG Line</h2> <svg height=”200″> <line x1=”0″ y1=”0″ x2=”200″ y2=”100″ style=”stroke:red;stroke-width:2″/> </svg> </body> </html> Draw a Ellipse using HTML SVG Tag Following is the SVG example which would draw an ellipse using <ellipse> tag. Here cx and cy are coordinates of top-left corner of ellipse, rx is radius along x axis and ry is radius along y axis. <!DOCTYPE html> <html> <head> <title>SVG Ellipse</title> </head> <body> <h2>HTML SVG Ellipse</h2> <svg height=”200″> <ellipse cx=”100″ cy=”50″ rx=”100″ ry=”50″ fill=”red” /> </svg> </body> </html> Draw a Polygon using HTML SVG Tag Following is the SVG example which would draw a polygon using <polygon> tag. The points attribute defines the vertices of the polygon. Each pair of coordinates (x, y) specifies a vertex, and the polygon is drawn by connecting these vertices with straight lines. <!DOCTYPE html> <html> <head> <title>SVG</title> </head> <body> <h2>HTML SVG Polygon</h2> <svg height=”200″> <polygon points=”20,10, 300,20, 170,50, 130,70″ fill=”red” /> </svg>