HTML Beginners (part 2)
Meta tags <meta>
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.
Document Description
<meta name = "description" content = "Learning about Meta Tags." />Document Revision Date
<meta name = "revised" content = "Tutorialspoint, 3/7/2014" />Document Refreshing
<meta http-equiv = "refresh" content = "5" />Page Redirection
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.
<meta http-equiv = "refresh" content = "5; url = http://www.tutorialspoint.com" />Setting Cookies
<meta http-equiv = "cookie" content = "userid = xyz; expires = Wednesday, 08-Aug-15 23:59:59 GMT;" />Setting Author Name
<meta name = "author" content = "Mahnaz Mohtashim" />Specify Character Set
<meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8" />Comments
HTML-Images
<img src = "Image URL" ... attributes-list/>
This is how we insert an image.
Set Image Width/Height
<img src = "/html/images/test.png" alt = "Test Image" width = "150" height = "100"/>Set Image Border
<img src = "/html/images/test.png" alt = "Test Image" border = "3"/>
Set Image Alignment
<img src = "/html/images/test.png" alt = "Test Image" border = "3" align = "right"/>
HTML — Tables
Table Heading
Cellpadding and Cellspacing Attributes
There are two attributes called cellpadding and cellspacing which you will use to adjust the white space in your table cells.
The cellspacing attribute defines space between table cells, while cellpadding represents the distance between cell borders and the content within a cell.
Colspan and Rowspan Attributes
colspan attribute — — — — — — — — if you want to merge two or more columns into a single column.
rowspan — if you want to merge two or more rows.
Tables Backgrounds
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.
<table border = "1" bordercolor = "green" background = "/images/test.png">
Table Height and Width
Table Caption
Table Header, Body, and Footer
<thead> − to create a separate table header.
<tbody> − to indicate the main body of the table.
<tfoot> − to create a separate table footer.
Nested Tables
HTML — Lists
HTML Unordered Lists
HTML Definition Lists
HTML and XHTML supports a list style which is called definition lists where entries are listed like in a dictionary or encyclopedia.
The definition list is the ideal way to present a glossary, list of terms, or other name/value list.
HTML — Text Links
<a href = "Document URL" ... attributes-list>Link Text</a>
The target Attribute
Use of Base Path
When you link HTML documents related to the same website.
it is not required to give a complete URL for every link.
You can get rid of it if you use <base> tag in your HTML document header.
This tag is used to give a base path for all the links.
Linking to a Page Section
You can create a link to a particular section of a given webpage by using name attribute.
First create a link to the place where you want to reach with-in a webpage and name it using <a…> tag as follows
<h1>HTML Text Links <a name = "top"></a></h1>Second step is to create a hyperlink to link the document and place where you want to reach
<a href = "/html/html_text_links.htm#top">Go to the Top</a>Setting Link Colors
Download Links
You can create text link to make your PDF, or DOC or ZIP files downloadable.
File Download Dialog Box
Sometimes it is desired that you want to give an option where a user will click a link and it will pop up a “File Download” box to the user instead of displaying actual content.
Image Links
It’s simple to use an image as hyperlink.
Mouse-Sensitive Images
You can create different links on the single image based on different coordinates available on the image. Once different links are attached to different coordinates, we can click different parts of the image to open target documents. Such mouse-sensitive images are known as image maps.
There are two ways to create image maps −
Server-side image maps - This is achieved by ismap attribute of the <img> tag.
requires access to a server and related image-map processing applications.
Client-side image maps-This is created with the usemap attribute of the <img> tag, along with corresponding <map> and <area> tags.
Server-Side Image Maps
Here you simply put your image inside a hyper link and use ismap attribute.
when the user clicks some place within the image, the browser passes the coordinates of the mouse pointer along with the URL specified in the <a> tag to the web server.
Client-Side Image Maps
Client side image maps are enabled by the usemap attribute of the <img /> tag and defined by special <map> and <area> extension tags.
Except it carries an extra attribute called usemap.
The <area> tag inside the map tag, specifies the shape and the coordinates to define the boundaries of each clickable hotspot available on the image.
HTML — Email Links
It is not difficult to put an HTML email link on your webpage but it can cause unnecessary spamming problem for your email account.
HTML Email Tag
HTML <a> tag provides you option to specify an email address to send an email.
While using <a> tag as an email tag, you will use mailto: email address along with href attribute.
<a href = "mailto: abc@example.com">Send Email</a>Default Settings
You can specify a default email subject and email body along with your email address.
<a href = "mailto:abc@example.com?subject = Feedback&body = Message">
Send Feedback
</a>HTML — Frames
Html frames are used to divide your browser window in to multiple sections.
Here specially multiple sections can load seperate parts of the HTML document.
A collection of frames in the browser window is known as a frameset.
The window is divided into frames in a similar way the tables are organized: into rows and columns.
Disadvantages of Frames
To use frames on a page we use <frameset> tag instead of <body> tag.
The <frameset> tag defines, how to divide the window into frames.
The rows attribute of <frameset> tag defines horizontal frames and cols attribute defines vertical frames.
Each frame is indicated by <frame> tag and it defines which HTML document shall open into the frame.
Browser Support for Frames
If a user is using any old browser or any browser, which does not support frames then <noframes> element should be displayed to the user.
HTML — Iframes
You can define an inline frame with HTML tag <iframe>.
The <iframe> tag is not somehow related to <frameset> tag.
The <iframe> tag defines a rectangular region within the document in which the browser can display a separate document, including scrollbars and borders.
HTML — Blocks
Block elements
Block elements appear on the screen as if they have a line break before and after them. For example, the <p>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <ul>, <ol>, <dl>, <pre>, <hr />, <blockquote>, and <address> elements are all block level elements.
Inline Elements
The <b>, <i>, <u>, <em>, <strong>, <sup>, <sub>, <big>, <small>, <li>, <ins>, <del>, <code>, <cite>, <dfn>, <kbd>, and <var> elements are all inline elements.
Grouping HTML Elements
(i) <div> tag and (ii) <span> tag