What is HTML Stylesheet?
In the latest versions of HTML (HTML 4.0), defining and displaying the content are treated as two different processess. Since many of the formatting tags and attributes are deprecated (not supported) in the recent versions of html, it is decided that html can handle only the defining part of the content. That is whether it is a heading or paragraph or table or something else.
The displaying part is taken care by CSS (Cascading style sheets) which handles formatting and appearance of the web site. The sheet which contains the styles to control the appearance is generally known as stylesheet.
Integration of Styles with HTML
Though the displaying part is not written with HTML, it is necessary to integrate with it for greater usability. There are 3 great ways to achieve it:
- External Style Sheet – It is a separate file that contains all the styles and saved with “.css” file extension. It is then linked with html file using the <link> tag in the head section.
Eg: <link href=”sample.css” type=”text/css” rel=”stylesheet>.
Here an exernal css file name “sample” is linked using the attribute “href”. The main advantage of external style sheet is it can be linked to as many as html files. And the change we implement in single sheet will affect all the linked html files. So maintenance is simplified by using external style sheet. - Internal Style Sheet – Instead of maintaing a separate style sheet, the css can be written within the html document in the head section.
Eg: <style type=”text/css”>CSS coding goes here….</style>
The internal style sheet can only be accessed by the particular html document. It cannot be referenced to any other document. - Inline Style – Inline styles are nothing but adding css properties to an html tag using an html attribute “style”
Eg: <h1 style=”color:#ff0000”>Heading1</h1>
In this sample, “color:#ff0000” is a css property which sets the color of h1 to red. To add more than one property semicolon; can be used between two properties.
Eg: <h1 style=”color:#ff0000;margin:5px”>Heading1</h1>
Here margin is an another css property which sets margin for h1 tag and the margin value is 5px (pixel).
Pixel (px) is a unit of measurement with regards to CSS. As we use Km to measure distance, Kg to measure weight, we use px to measure in web designing. We also use pt (point), em, % (percentage) other than px. Why are they used and what’s the difference between them? It will be discusses in out next lesson units of measurements.
What is HTML Image?
So far, we have seen how to add, format and align texts in a web page. But web page is not complete with mere texts. It gets important to add relevant images not only to make our page attractive, also to make our visitors understand things easily. Because we know that images keeps things simple rather than texts. Ok, can we create images using HTML? No, since HTML is not a graphic tool. But we can show an existing image in our page using
<img src=”source/destination of the image file” />
Where to use HTML Image?
- Images can be used anywhere within the body. Images can be seen in the browser where the <img> tag is actually placed. For eg: if you place an <img> tag before a paragraph, the image would be displayed before the paragraph. If you want the paragraph to be displayed first, then you have to change the <img> tag next to the paragraph tag.
- Images can also be used as background. But there is no HTML tag to display it as background. Instead you can do it with the help of an attribute “background” to any of the block level element.
E.g.: <body background=”stripes .gif”> - Though there are no restrictions for the usage of images, it should be used cautiously because loading of images takes more time. A Web page which uses more number of images may take more time to load which would make visitors to leave the site before they load.
How to use HTML Image?
Attributes besides Id, Class used along with the <img> tag are:
- src: The source attribute is very important one to set the location of the image file. The browser would not display any image if you leave this blank or don’t include this attribute. You can give either local path(../smiley.gif) or global path (http://www.styledesign.com/images/smiley.gif”).
- alt: The alt attribute is “alternate text” for an image. It can be any text which describes the image well. The browsers display the alt texts before the images get loaded and this makes the users to understand the nature of the content even if they are not loaded. It is not an error if you don’t include alt attribute or leave it blank. But it’s a good practice to improve the quality of our web page.
- align: The align attribute is used to position the image as required. Values used for this attribute are: left, middle, right – used to left, center and right alignment of the image respectively
top, bottom – similarly used for vertical alignment of the image. Alignment of image with relative to the text besides can also be done using texttop, absmiddle, absbottom, baseline which keeps the text top of the image, middle of the image, bottom of the image respectively. - Width and Height: These attributes are used to specify the width and height of the image to be displayed.
Example:
<html>
<head>
<title>Example for HTML image</title>
</head>
<body background=”body-stripes.jpg”>
<p><img alt=”example image” src=”example.gif”> This is an example for image before text</p>
<p>This is an example for <img width=”80” height=”80” alt=”example image” src=”example.gif”< image within the text</p>
<p>This is an example for image after the text <img width=”40” height=”40” alt=”example image” src=”example.gif”></p>
<p>This is an example for where the text <img align=”bottom” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the bottom of image. Bottom alignment is default alignment.</p>
<p> This is an example for where the text <img align=”middle” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the middle of image.</p>
<p>This is an example for where the text <img align=”top” width=”40” height=”40” alt=”example image” src=”example.gif”>lies at the top of image. </p>
</body>
</html>
Next we can discuss about how to make the image clickable. We can also see about image mapping.
What is HTML Link?
Now we are going to learn a very important tag which is used to link web pages. As we know websites are collection of web pages, the pages are to be interlinked for easy navigation of information.
You may think that it would be either tag (or) tag for linking pages. But it is not the case here. We use anchor <a> tag. The attribute href=”url” along with <a> tag is used for linking.
Where to use HTML Links
HTML links (or) hyperlinks are commonly used for 4 main purpose. They are internal, local, global and mailto.
- Internal: Link that navigate to the different content of the same page. (For eg: A link which says ‘top’ would take to the top of the same page).
- Local: Link that navigates to the other pages of the same website. (Eg. Link for ‘Contact us’ page from ‘About us’ page)
- Global: Link that take us to other domain / website.
- mailto: This is used to link email address. Clicking on the link would enable us to send email.
How to use HTML Links?
- Attribute ‘href’ is very important where the destination url is given.
- The ‘target’ attribute defines the browser whether to open the linked page in a separate window or in the current window itself.
- In email (or) mailto link, we can also define Subject and body of the mail besides giving email address.
Example
<body>
<h1> <a name=”top”>Top of the Page</a></h1>
<a href=”#bottom”>Go to Bottom</a>
<p>This is the first paragraph</p>
<br/><br/>
<h1> <a name=”bottom”>Bottom of the Page</a></h1>
<p>This is the second paragraph</p>
<a href=”#top”>Go to Top</a>
</body>
In this example, you will first see ‘Top of the page. When you click the link ‘Go to Bottom’, you will be taken down. Again when you click ‘Go to Top’, you will be navigated to the top of the page. This is a simple example for navigating within a page. Here ‘name’ attribute is used for naming the block. The same name is used with ‘#name’ to link that block.
<body>
Next tutorial will be on <a href=”http://webdeveloperguide.wordpress.com/about/”>About us</a>
</body>
In this sample, link is used to navigate to the About us page of our blog.
<body>
<a href=”http://www.google.co.in/>Google</a>
</body>
Link here takes you to the google homepage from the existing page.
<a href=”mailto:yourmailid@mail.com”>My email id</a> – This link has only your email id
<a href=”mailto:yourfriend@gmail.com?cc=yourfriend1@gmail.com&bcc=yourfriend2@gmail.com&subject=Welcome%20email&body=You%20are%20welcome%20to%20styledesign.com”>Send mail!</a> – Click this link to get the clear picture than explanation. %20 is used instead of spaces between words to ensure that the browsers display the text properly.
Example for Target Attributes:
Four target attributes that exist in the present world are: _blank, _self, _parent, _top. Their uses can be seen here with simple examples.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_blank”>Webdevloperguide</a> – opens our homepage in a new browwer window.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_self”>Webdeveloperguide</a> – opens our homepage in the current browser window. The current page cannot be viewed if you click the link. Anyhow you can come back by clicking ‘Go back’ button in your browser window.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_parent”>Webdeveloperguide</a> – opens new page into a frame that is superior to this page. It can be tested only if we use html frames which can be seen in our upcoming tutorial.
- <a href=”http://webdeveloperguide.wordpress.com/” target=”_top”>Webdeveloperguide</a> – Opens new page into the current broswer window, cancelling the exisiting open frames. It also deals with html frames. But don’t confuse with href=”#top” with target=”_top”, where the former one deals with the destination.
Next is Html Images.
What is HTML Attributes?
Attributes are like enhancers which spices up or customizes an html element. Attributes must be included in the starting tag of an element.
Where to use HTML Attributes?
If suppose you would like to add some background color to your webpage. This can be easily done by adding an attribute bgcolor to element as: . This is how we can enhance the look and feel of our website using html attributes.
List of HTML Attributes
| Attribute Name | Options / Value | Function of the Attribute |
| align | left, center, right | Used for Horizontal alignment of the content within the given tag |
| valign | top, middle, bottom | Used for Vertical alignment |
| bgcolor | color name(black, blue), RGB Values (rgb(250,250,250), Hexadecimal value (#000000) | Adds a background color for the element |
| background | url(“imgsrc.gif”) | Adds a background image |
| width | numeric value in px(pixels) or %(percentage) or pt(point) or em (for e.g.:width=50% or width=500px) | Assigns the horizontal length for the given element within the browser window |
| height | numeric value in px(pixels) or %(percentage) or pt(point) or em (for e.g.:width=50% or width=500px) | Assigns the vertical length for the element within the browser window |
| title | user defined text | It is a user defined text mainly used for SEO purpose. The text given will be shown as popup in the browser window on mouse hover of the element. |
| id | User defined name | The name given will be unique for the element and cannot be reused for the other elements. Mainly used for writing styles for the id name |
| class | User defined name | This is similar to id, but the only difference is class name is not unique. A class name can be used for any number of times. |
How to use HTML Attributes?
- Attributes must be given in the starting tag of html with Attribute name=”options/value”.
- Each attribute differs in its function, so the value should be assigned correctly.
- Attribute values should always be enclosed in quotes. Double quotes are used more commonly though single quotes are also accepted.
- Some attributes would not work for certain html tags. Those things with the reason can be seen in detail while learning each element.
- More than one attribute can also be assigned.
Example:
<head>
<title>Example for HTML Attributes</title>
</head>
<body bgcolor=”yellow” color=”black” width=”950px”>
<h1 align=”center”>HTML Attributes</h1>
<img alt=”smiley” width=”32” height=”32” src=http://www.iconarchive.com/icons/icontexto/emoticons/icontexto-emoticons-03-32×32.png/>
</body>
</html>
Next we are about to look html links through which the web pages are linked to each other.
What is HTML Text Formatting?
Text formats like bold, italics, underline, what are all the text formats possible in simple word document are also possible in html document. There is a big list of formatting tags in html. Anyhow we can learn and remember some basic formatting tags instead of confusing with the big list.
List of Basic Text Formatting Tags
| Tags | Description |
| <b> , <strong> | Used to make text as bold |
| <i> , <em> | To make italic text |
| <u> | To make text underlined |
| <sub> | To make subscripted text (Eg: O2, here 2 is subscripted) |
| <sup> | To make superscripted text (Eg: (a+b)2, here 2 is superscripted) |
| <code> | Defines computer code text |
| <address> | Defines an address element |
Where to use?
- The above formatting tags can be used to format only few words in a document. To format an entire paragraph or document, it is better to use style sheets rather than the above tags.
- It can be used where it is actually required. What I try to say is, if the text is necessarily want to be bold, then <b> can be used. Likewise, if some address is to be displayed, <address> tag can be used.
How to use?
- The formatting tags are paired tags, i.e., it has both start and end tag. So the text which is to be formatted to be given inside the tag. (E.g. <i>I want this text as italic</i>)
- More than one formatting tag can be also be used for the same texts. But make sure that the inner tag must end first before the outer tag ends.
I would like to explain this using an example
<b><i>This is a italic and bold text</i></b>
In this, I have used both bold and italic formatting tags for the same text. Here, <i> tag which lies inner to the <b> tag must to be closed first </i> and then the closing tag for </b> follows.
<b><i>This is an italic and bold text</b></i>
It’s a bad format though the browser renders it correctly. - Usage of two tags of same format would not show any big difference. (using both <b> and <strong> to the same text will not show any difference)
- Attributes like align, bgcolor, width and height cannot be declared. But class and id can be used within.
Example
<head>
<title>Example for text formatting tags</title>
<body>
<b>This is a bold text</b>
<strong>This is a strong text</strong>
<i>This is an italic text</i>
<em>This is an emphasized text</em>
<u>This is a underlined text</u>
<sub>This is a subscripted text</sub>
<sup>This is a superscripted text</sup>
<code>This is a computer code text</code>
<address>This is an address text</address>
</body>
</html>
Next lesson deals with the html attributes. List of html attributes, where and how to use html attributes can be seen in detail.
What is HTML Line Break?
A line space after text can be given using <br> (or) <br />. It does not have a close tag like </br> as we have in other tags. So it is called a Single tag. However self closing <br /> can be used in some cases.
Where to use?
- Html Line Break can be used to give a break after some texts. Since the break given using “Enter key” while typing the text will not be accepted by the browser. It would treat it as continuous texts.
- It cannot have any attributes. But we can give “Class” for CSS.
- We cannot increase the height of a line space. In case if we need more space another
tag can be used. - This tag is also known as empty tag since no content can be given within this tag. Generally, empty tags have no closing tag.
Example:
<head>
<title>The page for HTML Line Break</title>
<body>
HTML is easy to learn <br />
It can be used to create web pages <br />
It is also fun to learn html <br />
So Welcome to html tutorial once again
</body>
</html>
What is HTML Horizontal Rule?
The <hr> (or) <hr /> tag is used to draw a horizontal line. This tag also has no end tag. So it can be used as self closed.
Where to use?
- It can be used to separate the major sections in a document.
- It can also be used for underlining the headings of an article.
- <hr/> is also empty tag (content cannot be given inside).
How to use?
- Generally the line is drawn to the full width of the page. However it can be controlled by specifying the width using the attribute width=”50%” (or) width=”50px” as per the requirement.
- Default alignment is center. It can also be altered using the align attribute to left or right.
- Moreover the line is not full black in color as default. Some shades appear below and make it look with dark grey color. It can be changed using noshade within the tag.
Example
<head>
<title>The page for HTML Horizontal Rule</title>
<body>
<h1 align=”center”>HTML tutorial</h1>
<hr noshade width=”300px” align=”center” />
HTML is easy to learn<br />
It can be used to create web pages<br />
It is also fun to learn html<br />
<hr align=”left” />
So Welcome to html tutorial once again
</body>
</html>
In our next tutorial we can see about html formatting tags that are used to format texts in our page.
What is HTML paragraph?
An HTML paragraph is similar to a paragraph in an article or newspaper. Some texts which can be considered as a paragraph can be given inside <p>tag and its closing </p>
Where to use HTML Paragraph?
- HTML paragraphs can be used wherever a line break is needed after the texts end.
- It can be majorly used whenever some continuous texts which can be shown as small paragraphs.
How to use HTML Paragraph?
- <p> tag is also a block element which automatically gives a line break before and after. So it can be used when the actual need is there.
- Closing tag </p> is necessary even though some browsers work will without this.
- Attributes like bgcolor, width or height cannot be assigned to html paragraph.
- It accepts only align=”left (or) center (or) right (or) justify”, id, class.
Example
<head>
<title>HTML Paragraph Tutorial</title>
</head>
<body>
<h1>This is the main heading</h1>
<p align=”left”>This is a left aligned paragraph</p>
<p align=”center”>This is a center aligned paragraph</p>
<p align=”right”>This is a right aligned paragraph</p>
<p align=”justify”>This is a justified paragraph. Justified text is text in which all the printed lines in a paragraph (except the final line) are made the same length by the adjustment of spacing between words.</p>
</body>
</html>
Next tutorial will be on line breaks and horizontal rule.
Source : webdeveloperguide[dot]wordpress[dot]com
0 comments:
Post a Comment