Basics Of HTML And CSS - Part 1

N Vinodh
Oct 21, 2015
5k
0
0
Article

HMTL stands for hypertext markup language useful for developing web pages.

Using HTML we can add paragraphs, headings, images into web pages.

Basic Structure

<!DOCTYPE html>
<html> ----------------------------------- <html> Start tag
<head>-------------------------------<head > tag contains scripts and stylesheets
<title></tilte>--------------------- <title> tag display the tilte of the page
</head>
<body>
_________________________ <body> Contains main content appears on the webpage
</body>
</html>-------------------------------------<html> End tag

Let us see the basic HTML tags used for creating a web page.

Heading Tag

Heading tags are defined with <h1> to <h6>.

Example:

<html>
<head>
<title></title>
</head>
<body>
<h1>Welcome to csharpcorner</h1>
<h2>Welcome to csharpcorner</h2>
<h3>Welcome to csharpcorner</h3>
<h4>Welcome to csharpcorner</h4>
<h5>Welcome to csharpcorner</h5>
<h6>Welcome to csharpcorner</h6>
</html>

Output

Heading Tag

Paragraph Tag:

Paragraph tags are defined with <p></p>.

Example

<Html>
<Head>
<Title>
</title>
</head>
<Body>
<p>Welcome to csharpcorner</p>
<p>Welcome author</p>
<p>N.Vinodh</p>
</body>
</html>

Output

Paragraph Tag

Image Tag

Image tags are defined with <img></img>.

Image tags are useful for displaying images.

Example:

<Html>
<Head>
<Title>
</title>
</head>
<Body> <img src="images\ccorner.png" alt="logo" /> </body>
</html>

You can also adjust the height and width of the image inside the image tag

<img src="images\ccorner.png" alt="logo" height="200" width="200" />

Output

Image Tag

Table Tag

Tables are defined with <table></table>.

<tr></tr> tags contains table rows
<td></td> tags contains table data

Example

<html>
<head>
<title></title>
</head>
<body>
<table border="1">
<tr>
<td> Vinodh</td>
<td> Arun</td>
</tr>
<tr>
<td>Bill</td>
<td>Tom</td>
</tr>
</table>
</body>
</html>

Output

Table Tag

List tag

Ordered list
Unordered list

Unordered list

Unordered lists are defined with <ul></ul> tag.

Example:

<html>
<head>
<title></title>
</head>
<body>
<ul>
<li>Article</li>
<li>Blogs</li>
<li>News</li>
</ul>
</body>
</html>

Output

Un-Ordered list

Ordered list

Ordered lists are defined with <ol></ol> tag.

Order the list by numbers.

Example

<html>
<head>
<title></title>
</head>
<body>
<ol>
<li>Article</li>
<li>Blogs</li>
<li>News</li>
</ol>
</body>
</html>

Output

Ordered list

Description lists

Description lists are defined with <dl></dl> tag.

<dt></dt> Stands for description term
<dd></dd> Stands for description data

Example