Академический Документы
Профессиональный Документы
Культура Документы
Dated:28-08-2018
Presented By:
Web: www.uaf-cms.weebly.com
Email: uaf.shakeel@gmail.com
What is HTML?
What is CSS?
CSS is used to define styles for your web pages, including the design, layout and
variations in display for different devices and screen sizes.
HTML was NEVER intended to contain tags for formatting a web page!
HTML was created to describe the content of a web page, like:
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
When tags like <font>, and color attributes were added to the HTML 3.2
specification, it started a nightmare for web developers. Development of large
websites, where fonts and color information were added to every single page,
became a long and expensive process.
To solve this problem, the World Wide Web Consortium (W3C) created CSS.
With an external stylesheet file, you can change the look of an entire website by
changing just one file!
Sample Code
<html>
<head>
<title>Page Title</title>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
HTML Styles
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
<button>Click me</button>
It was used to make the text/image scroll horizontally across or vertically down
the web page.
<!DOCTYPE html>
<html>
<body>
<marquee>A scrolling text created with HTML Marquee
element.</marquee>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<marquee direction="down"> A scrolling text created with HTML Marquee
element.</marquee>
</body>
</html>
Background Color
Text Color
Border Color
HTML Images
HTML Tables
<table style="width:100%">
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
<td>94</td>
</tr>
</table>
JavaScript in HTML
<head>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
HTML Lists
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
Assignment
<html>
<head>
<title>Page Title</title>
<script type="text/javascript">
function functionOne(frm){
if (frm.First_Name.value == "") {
alert('First name is required.');
frm.First_Name.focus();
}
}
</script>
</head>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
<table border="0">
<tr>
<td style="width: 50%">
<label name="First_Name"><b>First name *</b></label><br />
<input name="First_Name" id="First_Name" type="text"
style="width: 260px" />
</td>
</tr>
<tr>
<td style="width: 50%">
<input onClick="functionOne(this);" type="button" value="Send
Application" />
</td>
</tr>
</table>
</body>
</html>