Foundation of Website Designing

When we are started that time we need some basic layout structure for website design.

Use basic HTML Structure.

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link href="style.css" rel="stylesheet"></head><body> <h1 id="header" style="color: rgb(77, 179, 171); background-color: yellow;">Welcome My Page</h1> <h2>Sample Page | New Line</h2> <h3 id="header3">Other Header</h3> <h4 class="header3">Sample Header</h4></body></html>
Code language: HTML, XML (xml)

Only HTML Makes Sklliton But CSS makes styles for website page.

When we are use CSS that time we can use inline CSS

<meta charset="utf-8"><h1 id="header" style="color: rgb(77, 179, 171); background-color: yellow;">Welcome My Page</h1>
Code language: HTML, XML (xml)

Also we can be used on-page CSS using style tag. See the next sample.

<meta charset="utf-8"><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style><strong> </strong>/* Element Selecror */h2{ color: brown; } /* ID Selecror */#header3{ color: blue; } /* Class Selecror */.header3{ color:green; } </style><strong> </strong></head> <body> <h1 id="header" style="color: rgb(77, 179, 171); background-color: yellow;">Welcome My Page</h1> <h2>Sample Page | New Line</h2> <h3 id="header3">Other Header</h3> <h4 class="header3">Sample Header</h4> </body> </html>
Code language: HTML, XML (xml)

Also we can used External CSS or Embeded CSS

Index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <strong><link href="style.css" rel="stylesheet"></strong> </head> <body> <h1 id="header" style="color: rgb(77, 179, 171); background-color: yellow;">Welcome My Page</h1> <h2>Sample Page | New Line</h2> <h3 id="header3">Other Header</h3> <h4 class="header3">Sample Header</h4> </body> </html>
Code language: HTML, XML (xml)

style.css

/* Element Selecror */ h2{ color: brown; } /* ID Selecror */ #header3{ color: blue; } /* Class Selecror */ .header3{ color:green; }
Code language: CSS (css)

It is the Basic Foundation of Website Template Design. But You will wanted learn about HTML and CSS Code Learning form W3Scools.com.

HTML Learning Link:

CSS Learning Link

Also For Website Design we need learn About

JavaScript Learning Link