Styling the List

This is used to style the bullets and numbering in different ways as allowed by CSS. For example, to have a list with square style bullets, we use the following code.

<ul style=”list-style-type: square;”>

<li>one</li>

<li>two</li>

<li>three</li>

the output is as follows

Usage of an Image as a Bullet

We can use an image as a bullet too, by making the necessary changes in the code. For example, to have an image as a bullet, we can use the following code.

<ul style=”list-style-image: url(image.gif);”>

<li>one</li>

<li>two</li>

<li>three</li>

Positioning of the Bullets

CSS also provides a powerful feature of governing the placement of the bullets and how the text will be displayed around them. For instance, consider the following code segment and the associated output with it.

<ul style=”list-style-position: inside;”>

<li>one</li>

<li>two</li>

<li>three</li>

Combining it one the Go

You can also combine all the tags present into one tag and use it for your styling. Consider the code below and its output.

<ol style=”list-style: alpha inside none;”>

<li>one</li>

<li>two</li>

<li>three</li>

In this way, you can design your custom styled bullets and numbering using the powerful features of CSS.

1)Colors

2)Images

3)Watermarking

Background Colors

You can modify the background color of the whole document or any block-level element. The color can also be made to adjust with the background setting of the parent.

Consider the code below and the output for clear understanding of the syntax and usage.

<p style=”background-color : Red”>

This paragraph has a red background

</p>

Background Images

You can also put an image as the background behind any element, and these images would be visible like a watermark also. Consider the code and output below

<p style=”background-image : url(backgr.jpg);”>

This paragraph has a background image

</p>

Placement of Background Images

We can easily decide the position of the images in the background of a particular element. This placing can be done using the background position tag which defines the x and y coordinates of the image in background. Consider the code below.

<p style=”background-position : 250px 0px;background-image : url(backgr.jpg);”>

This paragraph has a background image

</p>

Creating a Watermark

Its very easy to create a Watermark in an page. There are 3 steps or attributes of CSS which are involved in it.

1)background image

2)background repeat

3)background attachment

The background image is used to select an image to be displayed in your page, the background repeat displays it only once and the attachment is used to turn it into a bookmark.

The following code can be used to create a watermark image as shown

<style>

<!–

body{

background-position : 100px 100px;

background-image : url(backgr.jpg);

background-repeat : no-repeat;

background-attachment : fixed;

}

//–>

</style>

Parts of the CSS box model

There are four parts

1)Margin

2)Border

3)Padding

4)Content

Margin is the periphery of the box. It is transparent and is projected like a sapce between various elements on the page. Margins can intermingle with one another, in such a way that one’s lower margin becomes the upper margin of another element, or right of one becomes left of another.

An example of the margin code gives the following output.

<p style=margin : 2em;”>

This paragraph has a 2em margin on all sides

</p> 

Border follows the margin, and it can be given a color or can be kept as transparent. It can be removed altogether, and when it is removed, it mixes with the padding of the box of the element.

An example of Border code has the following output.

<p style=border : 2em solid#c00;”>

This paragraph has a 2em solid red border

</p> 

Padding is the space which lies between the content of the box and its respective border. It follows the same color as the background of the box, and if it is set to 0, it becomes same as the content border.

An example of Padding code is given

<p style=padding : 2em;”>

This paragraph has a 2em top padding.

</p> 

Content is the basic element which is displayed inside the box. This can be anything which is present inside. The content has two elements, width and height.

The width, is the basic width of the element inside the box. The default value is 500px which can be modified by the code below.

<p style=”width : 700px;”>

The height, is the height of the box, and the default value it takes is again 500px. The code for modification is

<p style=”height : 700px;”>

A sample code gives the following output

<p style=”border : 2em solid #c00;width : 100px;height : 120px”>

This is a modified block size with different height and width from default.

</p>

The box model has few other considerations as well, which are the elements which influence the box style.

Block Level Elements are elements which create blocks or groups of text in a page. They can be paragraphs, backquotes, tables etc. They have certain directionality and can contain data, text and inline elements. They create boxes within the document.

Inline Elements are found in the text of HTML, and influence the textual properties. They can be strong and abbr tags, etc. They do not change the flow of the document, and influence the inline text.

This lays the foundation of the basic model that is followed by every document. However, the implementation of every above tag is browser specific, and can vary from browser to browser because of different styling.

The HTML Tag

<html> is the topmost tag in any HTML page because this is the tag which tells the browser that this page will be treated as an HTML page, and the whole formatting would be done based on the HTML text. It is a paired tag, and it requires a </html> to close and to tell the browser that all HTML data has finished after it. It is essentially the last tag of an HTML page.

The Head Tag

The <head> tag is used to display the head portion of the page. It may or may not be displayed to the user, depending on the browser settings. It houses many other tags like the heading tags from h1 to h6, <script> tag which tells the browser the presence of a script, <style> which is used for stylesheets and <title> which is the title of the web-page, and is displayed at the top most bar of the browser.

The output of this code is show below

<html>

<head>

<title>This is the Title of the page</title>

</head>

</html>

The Body Tag

The <body> tag encloses all the HTML data and information and the major portion of the Webpage. With the <body> tag, you can make changes in the color of the background, text color, link color, active and visited both. This tag is where all the activity takes place.

The output of code is shown below

<body>

The body text goes here.

</body>

A complete Web page, with body, title, head, and HTML tags can be shown as below.

The Paragraph Tag

The paragraph tag, given by <p> , is used for making paragraphs in your text. Its an open tag, which means that the </p> tag is not required. They basically indicate where a new paragraph starts by inserting a blank between successive text. Consecutive <p> tags are ignored by the browser, and each <p> pair should have some text between them for actual count.

<p>

This is a test on the paragraph tags in HTML

<p>

The tags are working perfectly.

The above code gives the following output.

The Break Line Tag

The break line tag, <br>, is used to start afresh from the next line. This tag is also unpaired , it does not require </br> tag. A couple of <br> can be used to insert blank lines into the Webpage.

This is a test<br>Its working fine

The above code gives the following output.

The Quotations Tag

The <blockquote> is used as the quotation tag, and it is paired, it requires a closing tag. It indents the quotes a few spaces and a couple of these indent them in summation, as per the browser setting.

The sample code below gives the following output

<blockquote>This is a test</blockquote>

<blockquote><blockquote>Its working fine</blockquote></blockquote>

These tags will let you carry out the basic document defining tasks as demonstrated very easily.

We can divide the whole Website into headings, and there are a total of 6, starting from h1 to h6. The main heading, which is also the largest, is h1, and all others are subheadings.

Text can be modified using Bold and Italics effects as per your requirement. Usually, these are used to divide and make the Web document presentable, and its used to highlight important stuff.

HEADINGS

There are 6 headings in total, and they can be coded in the following form as shown.

After saving it as an HTML file, it would give the output in the Web-Browser as displayed.

Headings automatically include paragraph and break tags, which makes them easy to use. However, it is advisable to use them in order, and as per you browser interprets them.

Bold and Italic effects on Text

Bold tags are used to make your text as bold. You can use <strong> and </strong> tags for making the text bold. The effect of the following statement is shown below

<strong>Bold Text</strong>

For italicizing the text, you can use <em> </em> tags, and the effect of the tag is shown,

<em>Italicized Text</em>

The tags have been combined to generate a Bold + Italic output in above.

Lets get started with the basics of HTML with Notepad

STEP 1

Go to Start > Programs > Accessories > Notepad, to start the application.

An alternate way to start the Notepad is

Start > Run > Notepad

When Notepad initially loads, it should look like this

STEP 2

After notepad has started, you need to give your HTML code into the window. The notepad can be used to create complex and simple types of pages, and it would be very easy once u learn the language.

A few drawbacks of Notepad are clearly visible here. It does not support tag completion and verification like other HTML editors. But then, you can’t expect everything from a free editor.

STEP 3

The final step requires you to save your work. First-timers usually mess up this step, and land up naming a file as .htm.txt format, which is essentially a text file. What you have to do is, save the file with an HTML extension. After clicking on Save As, and selecting the location for saving the file, you should select All Files from the drop down menu, and should name the file as xxx.html

Here is how it should look…

That should be good enough to get you started for the time, so go get it tiger!

This tutorial is the property of http://www.Elegant-Templates.com
Copying and publishing any article from our site is strictly NOT allowed

1- Learn a little bit of HTML – There are plenty of WYSIWYG or “What You See Is What You Get” HTML editors, but there are a lot more capabilities out there that you will only discover if you take the plunge and learn some HTML on your own.

- Learning HTML can be one of the greatest investments that you ever make when it comes to designing and developing a website. There are many great places to learn HTML, including HTML Goodies and HTML Tutorial

- Learning CSS is another important part of designing and developing a website, as they can assist tremendously when it comes to controlling your website’s layout, images and colors. The w3schools website I mentioned before is a great place for learning CSS as well.

2. Try to stick to a single template for your website design. Use a website template to create your first website. You can either buy a free commercial template or have one designed for you. There are also plenty of opportunities for finding free website templates that are easy to customize.

- Table-based website design templates are great for anyone who is still learning how to work with HTML, as all the formatting is pretty stable and cannot easily be messed with.

- Utilize open-source content management solutions to create your website. Wordpress, located at WordPress.com » Get a Free Blog Here and Joomla, located at Joomla! are both great choices for website design and management.

- You do not need an understanding of HTML or CSS to create a website using either of these utilities, but it does pay off to know them anyway. These content management solutions have simple admin backend utilities which make it simple to add and remove content, and to completely customize every part of the website. So if you are looking for a fast and simple way to get a website up, this may be the process for you.

Still, learning HTML and CSS are an important part of making a website function properly, so once you have a basic website up, start brushing up on your web design skills.