References Objectives At the end of the lesson, you should be able to: • Understand the meaning and usage of meta data • Know the application of cookies in website design • understand the meaning and application of comments in design. • Understand the concept of graphics and its references •understand table and how to create one. Meta Data HTML lets you specify metadata - additional important information about a document in a variety of ways. The META elements can be used to include name/value pairs describing properties of the HTML document, such as author, expiry date, a list of keywords, document author etc. The <meta> tag is used to provide such additional information. This tag is an empty element and so does not have a closing tag but it carries information within its attributes. Adding Meta tags to your documents You can add metadata to your web pages by placing <meta> tags inside the header of the document which is represented by <head> and </head> tags. A meta tag can have following attributes in addition to core attributes: Keyword • You can use <meta> tag to specify important keywords related to the document and later these keywords are used by the search engines while indexing your webpage for searching purpose. • The following is an example, where we are adding HTML, Meta Tags, Metadata as important keywords about the document. Description • You can use <meta> tag to give a short description about the document. This again can be used by various search engines while indexing your webpage for searching purpose. Last Update • You can use <meta> tag to give information about when last time the document was updated. This information can be used by various web browsers while refreshing your webpage. Auto Refreshing • A <meta> tag can be used to specify a duration after which your web page will keep refreshing automatically. Redirecting a page • You can use <meta> tag to redirect your page to any other webpage. You can also specify a duration if you want to redirect the page after a certain number of seconds. • An example below shows redirecting current page to another page after 5 seconds. If you want to redirect page immediately then do not specify content attribute. <!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> <meta name="description" content="Learning about Meta Tags." /> <meta name="revised" content="Tutorialspoint, 3/10/2016" /> <meta http-equiv="refresh" content="5; url=http://www.tutorialspoint.com" /> </head> <body> <p>Hello HTML5!</p> </body> </html> Cookies Cookies are data, stored in small text files on your computer and it is exchanged between web browser and web server to keep track of various information based on your web application need.
You can use <meta> tag to store cookies on client
side and later this information can be used by the Web Server to track a site visitor. Example • If you do not include the expiration date and time, the cookie is considered a session cookie and will be deleted when the user exits the browser. <!DOCTYPE html> <html> <head> <title>Meta Tags Example</title> <meta name="keywords" content="HTML, Meta Tags, Metadata" /> <meta name="description" content="Learning about Meta Tags." /> <meta name="revised" content="Tutorialspoint, 3/7/2014" /> <meta http-equiv="cookie" content="userid=xyz; expires=Wednesday, 08-Aug-15 23:59:59 GMT;" /> </head> <body> <p>Hello HTML5!</p> </body> </html> Comments Comment is a piece of code which is ignored by any web browser. It is a good practice to add comments into your HTML code, especially in complex documents, to indicate sections of a document, and any other notes to anyone looking at the code. Single Comment -HTML comments are placed in between <!-- ... --> tags. So, any content placed with-in <!-- ... --> tags will be treated as comment and will be completely ignored by the browser. Multiple comments- <!– Beginning
end comments... -->
Graphic Extensions Types of Web Graphics File There are three types of graphic files: Graphics Interchange Format (GIF), PNG and Joint Photographic Experts Group (JPEG). • GIFs are compressed graphics that tend to lose less image clarity than JPEGs. GIFs are particularly well suited for images that have smaller colour palettes (256 colours or fewer). • JPEG format is widely being used by web designers as it can be viewed in most new graphical browsers without the help of any special application. JPEG has the advantage of viewing images that have more colours (up to 16.7 million).JPEGs are a little flexible than GIFs, that is high rate of compression results in slightly lower image quality. JPEG files are usually smaller and easily transmittable over the Internet more quickly. Working with Web Graphics Web graphics can be obtained in different ways: a. Creating graphics in a graphics application and saved as GIFs or JPEG. b. Downloading public-domain graphics such as the Internet or public-domain clipart collections (that are available on CDROM). c. Using scanned photographs. Existing photographs can be scanned into digital form for use on the site. d. Using digital cameras to snap pictures that can be downloaded directly from the camera to your computer. e. Using the camcoda of your laptop to snap and save into your document. Images • <img src="Image URL" ... attributes-list/> • This is an empty tag as explained in previous note. • Image Reference C:/documents/web/practice C:/documents
The cellspacing attribute defines the width of the
border, while cellpadding represents the distance between cell borders and the content within a cell. <!DOCTYPE html> </tr> <html> <tr> <head> <td>Samson Ramah </td> <title>HTML Table <td>5000</td> Cellpadding</title> </tr> </head> <tr> <td>Daniel Elbah</td> <body> <td>7000</td> <table border="1" </tr> cellpadding="5" </table> cellspacing="5"> </body> <tr> </html> <th>Name</th> <th>Salary</th> Output Colspan, Rowspan, background color, border color, caption, Height & Width Colspan attribute is used to merge two or more columns into a single column. Similarly, you can use rowspan if you want to merge two or more rows. The background color gives color to your table background while the border color provides color to your table border. bgcolor attribute - You can set background color for whole table or just for one cell background attribute - You can set background image for whole table or just for one cell. Border color: You can also set border color. <!DOCTYPE html> <html> <head> <title>HTML Table Colspan/Rowspan & Others</title> </head> <body> <table border="1" bordercolor="green" bgcolor="yellow” background=“test.jpg” width="400" height="150“ > <caption>This is the caption</caption> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell 2</td><td>Row 1 Cell 3</td></tr> <tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr> <tr><td colspan="3">Row 3 Cell 1</td></tr> </table> </body> </html> Practical 2 Use the appropriate tags and produce a typical table as seen below.
