HTML and Css

Structure of the HTML
<!Doctype html>
<html>
<head>
<title>Galwin Technologies</title>
</head>
<body>
</body>
</html>
<!Doctype html>
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css" />
<style>
h4{
color:yellow;
background:black;
width:300px;
</style>
</head>
<body>
<a class="ece" href="list.html">list</a>

<h1>heading</h1>
<h2>heading</h2>
<h3>heading</h3>
<h4>heading</h4>
<h5>heading</h5>
<h6>heading</h6>
<h4>heading</h4>

<p align="justify">Your basic sitemap has been created and submitted. You'll need to
come back regularly to resubmit, or Google may mark your site as inactive.Your basic sitemap has been
created and submitted. You'll need to come back regularly to resubmit, or Google may mark your site as
inactive.
Your basic sitemap has been created and submitted. You'll need to come back regularly
to resubmit, or Google may mark your site as inactive.
</p>
<div style="height:400px;width:300px;background:green">
<p align="justify">Your basic sitemap has been created and submitted. You'll need to
come back regularly to resubmit, or Google may mark your site as inactive.Your basic sitemap has been
created and submitted. You'll need to come back regularly to resubmit, or Google may mark your site as
inactive.
Your basic sitemap has been created and submitted. You'll need to come back regularly
to resubmit, or Google may mark your site as inactive.
</p>
</div>

<b>Google may mark your site as inactive</b><br><br><br><br>
<i>Google may mark your site as inactive</i><br>
<u id="utag" class="ece">Google may mark your site as inactive</u><br>
<strike>Google may mark your site as

inactive</strike><br>
H<sub>2</sub>o 
2<sup>10</sup> 
>
<
©
®
A
Z
<h4>heading</h4>
<h4 style="background:yellow">heading</h4>

<hr style="width:400px">
<hr>
<pre>
tamil - 98
English - 100
</pre>

<ul type="circle"> 
<li>html</li>
<li>css</li>
<li>js</li>
<li>bootstrap</li>
<li>php</li>
</ul>
<ol type="1" start="1001">
<li>html</li>
<li>css</li>
<li>js</li>
<li>bootstrap</li>
<li>php</li>
</ol>
<dl>

<dt> 
HTML
</dt>
<dd> 
Hyper Markup Language
</dd>
<dt>
css
</dt>
<dd>
Cascading Stylesheet
</dd>
</dl>
<a class="ece" href="basic.html">basic html</a><br><br><br>
<a id="ref" href="basic.html">basic html</a><br><br><br>
<a class="ece" href="flower/lists.html">Lists web page</a>
<img class="img_first" src="b2.jpg" />
<img src="flowr/banner-1.jpg" alt="nature" />

<a target="_blank" href="basic.html">
<img src="b2.jpg" />
</a>
Table
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<td rowspan="3">html</td>
<td colspan="3">php</td>
</tr>
<tr>
<td>java</td>
<td>bootstrap</td>
<td>js</td>
</tr>
<tr>
<td>python</td>
<td>c</td>
<td>c++</td>
</tr>
</table>
<p align="justify">Your basic sitemap has been created and submitted. You'll need to come back
regularly to resubmit, or Google may mark your site as inactive.Your basic sitemap has been created and
submitted. You'll need to come back regularly to resubmit, or Google may mark your site as inactive.
</p>
<iframe src="basic.html" scrolling="no" height="400" width="300"></iframe>
<marquee direction="right" scrollamount="30" onmouseover="this.stop()" onmouseout="this.start()">
<h3>This is the marquee tag</h3>
<h3>This is the marquee tag</h3>
</marquee>
<object>
<embed src="" width="300" height="200">
</embed>
</object>
<h3>marquee tag This is the <span style="color:red">marquee tag</span></h3>
Form
<form >
<h1><i class="fa fa-facebook-official" aria-hidden="true"></i> application form</h1>
<h2>For admission</h2>
<label>Name: </label>
<input type="text" name="username" placeholder="Enter your Name"><BR><BR>
<label>Password: </label>
<input type="password" name="password"><BR><BR>

<label>DOB: </label>
<input type="date" name="dob"><BR><BR>
<label>Time: </label>
<input type="time" name="time"><BR><BR>
<label>Email: </label>
<input type="email" name="email" required><BR><BR>
<label>Languages: </label>
<input type="checkbox" name="ta" value="tamil" >Tamil
<input type="checkbox" name="eng" value="Engish" >Engish
<input type="checkbox" name="hindi" value="hindi" >hindi
<BR><BR>
<label>Gender: </label>
<input type="radio" name="gender" value="male" >MAlE
<input type="radio" name="gender" value="female" >FEMAlE
<input type="radio" name="gender" value="other" >other<BR><BR>
<label>country: </label>
<select name="country" >
<option value="">-- Select -- </option>
<option value="India">India</option>
<option value="Russia">Russia</option>
<option value="Pakistan">Pakistan</option>
</select><BR><BR>
<label>Photo: </label>
<input type="file" name="photo"><BR><BR>
<label>Trichy: </label>
<textarea rows="5" col="40" name="address">
</textarea><BR><BR>
<input type="submit" name="reg" value="Submit your Form">
<button type="submit" name="btn">click here</button>
<input type="reset" name="reset" value="Reset your Form">
</form>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!
1d3918.7328463871227!2d78.69251831462304!3d10.831744992284019!2m3!1f0!2f0!3f0!3m2!1i1024!
2i768!4f13.1!3m3!1m2!1s0x3baaf5b105690a8d%3A0x49eb2041bf7f863d!2sGalwin%20Technology
%20-%20CSE%2C%20EEE%2C%20ECE%2C%20IT%20Final%20Year%20Engineering%20Project
%20Center%20in%20Trichy!5e0!3m2!1sen!2sin!4v1613126805285!5m2!1sen!2sin"
width="300" height="250" frameborder="0" style="border:0;" allowfullscreen="" aria-

hidden="false" tabindex="0"></iframe>
<iframe width="560" height="315" src="https://www.youtube.com/embed/UB1O30fR-
EE" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
picture-in-picture" allowfullscreen></iframe>
</body>
</html>
Layout:
<!Doctype html>
<html>
<head>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="wrapper">
<header>
<div class="logo">
</div>
<div class="company_name">
</div>
</header>
<nav>
</nav>
<section>
</section>
<footer>
</footer>
</div>
</body>
</html>
CSS – Cascading stylesheet
CSS defines the layout and appearence of the webpage.
used to avoid redundancy.
it saves lot of works.
Comment line in css
/*............*/
Syntax:
selector
property-name1:value;
property-name2:value;
Example:
h2
color:green;
}
Types of placing a stylesheet
Inline stylesheet
Internal stylesheet
External stylesheet
Inline stylesheet:
Style used to define the single HTML tag only.
Example:
<h2 style="color:green">heading1</h2>
<h2>heading</h2>
Internal stylesheet:
style used to define the tags within single HTML page only.
Example
<head>
<title>....</title>
<style type="text/css">
h2{
color:green;
</style>
</head>
External stylesheet:
Style used to define the tags in each and every HTML page in
a website.
style saved as external file.
eg:style.css
It should be linked with every html page in the header

section as follows.
<head>
<title>...</title>
<link href="style.css" rel="stylesheet"

type="text/css" />
</head>
Style.css
body
background:#80808052;
color:blue;
font-family:arial;
margin:0;
padding:0;
h1,h2
color:black;
text-align:center;
text-decoration:overline;
text-transform:capitalize;
text-shadow:2px 2px 3px green;
/* x y size color */
letter-spacing:10px;
font-weight:normal;
font-style:italic;
background:yellow;
padding:20px;
margin:20px;
h1:hover{
background:white;
color:blue;
p{
word-spacing:20px;
line-height:2em;
text-indent:80px;
ul{
list-style:none;
background:orange;
ul li
height:50px;
margin:20px;
width:100px;
ul li:hover{
background:white;
color:black;
dl dt{
color:green;
dl dd{
background:black;
color:white;
padding:10px;
width:200px;
a{
color:yellow;
text-decoration:none;
background:black;
a.ece{
color:green;
background:white;
margin-top:10px;
.ece:hover
background:blue;
.img_first{
width:331px;
height:331px;
border: 11px groove green; /* solid,dotted,dashed,inset,outset,groove,ridge */
}
.img_first:hover{
border-radius:180px;
opacity:0.8;
#utag{
font-size:40px;
input[type="text"]
background:pink;
input[type="password"]
background:#0080001c;
width:200px;
height:40px;
select{
font-size:30px;
@media only screen and (max-width: 600px) {
select{
font-size:15px;
textarea {
width:400px;
height:200px;
input[type="submit"]{
background:blue;
color:white;
padding:20px 40px 60px 40px;
/* top right bottom left */
margin-left: 50px;
Layout.css
body{
color:black;
font-family:arial;
margin:0;
padding:0;
.wrapper{
width:1024px;
height:768px;
background:;
margin:0 auto;
header{
width:1024px;
height:150px;
background-image:url(banner-1.jpg);
float:left;
.logo{
width:224px;
height:150px;
background:;
float:left;
.company_name{
width:800px;
height:150px;
background:;
float:left;
nav{
width:1024px;
height:50px;
background:gray;
float:left;
section{
width:1024px;
height:528px;
background:red;
float:left;
footer
width:1024px;
height:40px;
background:blue;
float:left;

HTML and Css

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

HTML and Css

Uploaded by

Copyright:

Available Formats

Structure of the HTML

<link href="css/style.css" rel="stylesheet" type="text/css" />

<b>Google may mark your site as inactive</b><br><br><br><br>

<i>Google may mark your site as inactive</i><br>

<u id="utag" class="ece">Google may mark your site as inactive</u><br>

<strike>Google may mark your site as

H<sub>2</sub>o

2<sup>10</sup>

<ul type="circle">

<ol type="1" start="1001">

<dl>

<dd>

Hyper Markup Language

<a class="ece" href="basic.html">basic html</a><br><br><br>

<a id="ref" href="basic.html">basic html</a><br><br><br>

<a class="ece" href="basic.html">basic html</a><br><br><br>

<a class="ece" href="basic.html">basic html</a><br><br><br>

<a class="ece" href="flower/lists.html">Lists web page</a>

<img class="img_first" src="b2.jpg" />

<img src="flowr/banner-1.jpg" alt="nature" />

<img src="b2.jpg" />

<iframe src="basic.html" scrolling="no" height="400" width="300"></iframe>

<marquee direction="right" scrollamount="30" onmouseover="this.stop()" onmouseout="this.start()">

<h3>This is the marquee tag</h3>

<h3>This is the marquee tag</h3>

<embed src="" width="300" height="200">

<h3>marquee tag This is the <span style="color:red">marquee tag</span></h3>

<h1><i class="fa fa-facebook-official" aria-hidden="true"></i> application form</h1>

<input type="text" name="username" placeholder="Enter your Name"><BR><BR>

<input type="password" name="password"><BR><BR>

<input type="date" name="dob"><BR><BR>

<input type="time" name="time"><BR><BR>

<input type="email" name="email" required><BR><BR>

<input type="checkbox" name="ta" value="tamil" >Tamil

<input type="checkbox" name="eng" value="Engish" >Engish

<input type="checkbox" name="hindi" value="hindi" >hindi

<input type="radio" name="gender" value="male" >MAlE

<input type="radio" name="gender" value="female" >FEMAlE

<input type="radio" name="gender" value="other" >other<BR><BR>

<select name="country" >

<option value="">-- Select -- </option>

<input type="file" name="photo"><BR><BR>

<textarea rows="5" col="40" name="address">

<input type="submit" name="reg" value="Submit your Form">

<button type="submit" name="btn">click here</button>

<input type="reset" name="reset" value="Reset your Form">

width="300" height="250" frameborder="0" style="border:0;" allowfullscreen="" aria-

<link href="css/layout.css" rel="stylesheet" type="text/css" />

used to avoid redundancy.

it saves lot of works.

Comment line in css

Style used to define the single HTML tag only.

style saved as external file.

It should be linked with every html page in the header

<link href="style.css" rel="stylesheet"

text-shadow:2px 2px 3px green;

border: 11px groove green; /* solid,dotted,dashed,inset,outset,groove,ridge */

@media only screen and (max-width: 600px) {

padding:20px 40px 60px 40px;

/* top right bottom left */

You might also like