Subtotal ₹0.00
HTML and CSS Tutorial for Beginners
What is HTML?
HTML stands for Hyper Text Markup Language and is used to create webpages. HTML is part of front-end technologies.
Widely used browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Opera and Safari are compatible with HTML tags for display on the browser screen.
A HTML document contains codes like headings <h1> to <h6>, paragraphs <p>, Order List <ol>, Unorder list <ul>, Division <div>, Tables, etc.
What are HTML Tags?
HTML tags are the hidden keywords within a web page that define how your web browser must format and display the content.
- HTML tags are written inside open angular bracket (<) and closing angular bracket (>)
- 95% of the tags in HTML have both open tag and closing tag
- The tags are pre-defined
Given below is a basic HTML document containing all the essential tags. You may copy the code below & paste it into your editor and save it as example.html to create your own web page.
Structure of HTML Page
<html>
<head>
<title>Welcome</title>
</head>
<body>
<p>Welcome to HTML</p>
</body>
</html>
What is CSS?
CSS Stands for Cascading Style Sheet and is used to make a webpage look more attractive by using CSS Properties. You can also control layout of the page by using CSS properties.
Some of the properties of CSS:
- Font-size:12pts;
- Color: red;
- Background color: green;
- Text-align: center;
Combination of HTML and CSS
If you want to design attractive looking pages for a website or an application you have to work with both HTML and CSS.
There are three types of CSS
- Inline CSS :
Inline CSS method is used to define CSS properties inside a HTML tag. Let us now try to add a background and color style to one paragraph tag.
Example :
<p style=”color: red; background:red;>Welcome to India</a>
- Internal CSS :
Internal CSS method is used to define CSS properties in between <style > </style> tag. Here is an example of internal styles.
Example :
<Style>
P
{
color:red;
text-align:center;
}
</style>
- External CSS :
External CSS files are kept separately and are called or linked from the required page. Following is the syntax followed for linking an external style sheet.
Example :
<link href=”style.css” rel=”stylesheet”>
How to Create and Execute an HTML Page?
Step 1 :
You may use any text editor for writing HTML and CSS code (Ex: Notepad, Notepad++, DreamWeaver, etc.)
Step 2 :
You may save the file with .html or .htm format (Recommended.html)
Step 3 :
A HTML file can execute or run using any browser (Ex: Google Chrome, Mozilla Firefox, etc.)
Step 4 :
You can get the output in the Browser Window.
Front-end website development is often represented as a 3-legged stool. They are as follows :
- HTML for the structure of a site
- CSS for the visual styles
- Javascript for behaviors
Comments are closed