What we need to design a simple Website??
The Answer is HTML and CSS.
There are many Web technologies that are used to create a website like Asp.net with C#, Asp.net MVC, JQuery, BootStrap, Angular js etc. etc.
In all these technologies designing part remains in the hand of HTML and CSS. These technologies are used for providing the functionality and more user friendly behavior.
Now lets start our journey of creating Website. So first we need to learn some HTML and CSS.
Lets begin with HTML.So what we need to create a website. A notepad.
Let's begin with newer version of HTML that is HTML 5.
So if your website is built using HTML you can migrate to HTML 5 very easily.
Simple steps to migrate to HTML5
How old html look like, lets take an example of html 4.01
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>HTML Example</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link type="text/css" rel="stylesheet" href="style.css">
<script type="text/javascript" src="javascript.js"></script>
</head>
<body>
<p> this is html 4.01</p>
</body>
</html>
</body>
</html>
Now for moving to HTML5 we just need to make the following changes.
1. Change doctype
2. Change meta tag
3. We don’t need type Attribute for style and script.
<!Doctype Html>
<Html>
<Head>
<Title>HTML Example</title>
<Meta charset=UTF-8">
<link rel="stylesheet" href="style.css">
<script src="javascript.js"></script>
</head>
<body>
<link rel="stylesheet" href="style.css">
<script src="javascript.js"></script>
</head>
<body>
<p> this is html 5</p>
</body>
</html>
</body>
</html>
Doctype for HTML5 is very simple and now we don’t have to remember large doctype as in previous versions.
To upgrade this for HTML5, we just need to remove the type attribute. Why?
Because CSS has been declared the standard, and default, style for HTML5.
Because CSS has been declared the standard, and default, style for HTML5.
Meta tag is also shortened.
Lets start some HTML5
Step 1: right click and select new text document.
Step 2: Write the following code:
<html>
<head><title="begin HTML"></head>
<body>
<font color="blue">Let's begin HTML</font>
</body>
</html>
Step 3: save with .html extension now browse the file created with . html extension.
 |
| HTML Begins |
in the above example HTML defines html document which contains head and body.
head contains title and other basic information of the page.
body defines the page content
font is used to set the color of the text
HTML contains element which has attributes.
Attributes means properties of that element.
In the above example font is element and it's attribute is color.
Different HTML Elements are:
1. Heading <H1> to <H6>
2. Paragraph <P>
3. Image < img>
4. hyperlink <a>
5. Division <div>
and there Attributes will be :
1. <img src="image1.jpg" width="10px" height="10px">
2. <a href="http://webtechomaster.blogspot.com">click here</a>
Another example containing above element:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>HTML Elements</title>
</head>
<body>
<div>
<h1>Heading 1</h1>
<h1>Heading 2</h1>
<h1>Heading 3</h1>
<h1>Heading 4</h1>
<h1>Heading 5</h1>
<h1>Heading 6</h1>
<p>This is Paragraph</p>
<a href="http://webtechomaster.blogspot.com">click here</a>
<img src="Movies.jpg" width="50" height="50">
</div>
</body>
</html>
 |
| HTML elements and Attributes |
Posts
0 comments:
Post a Comment