University of Agriculture , Faisalabad
UAF_Sub Campus Burewala-Vehari
Department of Computer Science
Web Engineering Basics
Avenue: Computer Lab
Dated:28-08-2018
Presented By:
Engr. Muhammad Shakeel
Fb: UAF_Burewala CS Soceity
Web: www.uaf-cms.weebly.com
Email: uaf.shakeel@gmail.com
What is HTML?
HTML is the standard markup language for creating Web pages.
HTML stands for Hyper Text Markup Language
HTML describes the structure of Web pages using markup
HTML elements are the building blocks of HTML pages
HTML elements are represented by tags
HTML tags label pieces of content such as "heading", "paragraph", "table",
and so on
Browsers do not display the HTML tags, but use them to render the
content of the page
The <!DOCTYPE html> declaration defines this document to be HTML5
The <html> element is the root element of an HTML page
The <head> element contains meta information about the document
The <title> element specifies a title for the document
The <body> element contains the visible page content
The <h1> element defines a large heading
The <p> element defines a paragraph
What is CSS?
CSS stands for Cascading Style Sheets
CSS describes how HTML elements are to be displayed on screen, paper,
or in other media
CSS saves a lot of work. It can control the layout of multiple web pages all
at once
External stylesheets are stored in CSS files
Why Use 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.
CSS Solved a Big Problem
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.
CSS removed the style formatting from the HTML page!
CSS Saves a Lot of Work!
The style definitions are normally saved in external .css files.
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>
HTML Formatting Elements
<b> - Bold text
<strong> - Important text
<i> - Italic text
<em> - Emphasized text
<mark> - Marked text
<small> - Small text
<del> - Deleted text
<ins> - Inserted text
<sub> - Subscript text
<sup> - Superscript text
HTML <marquee> Tag
The <marquee> is a non-standard HTML tag which was used to create a
scrolling text or an image.
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
<h1 style="background-color:DodgerBlue;">Hello World</h1>
<p style="background-color:Tomato;">Lorem ipsum...</p>
Text Color
<h1 style="color:Tomato;">Hello World</h1>
<p style="color:DodgerBlue;">Lorem ipsum...</p>
<p style="color:MediumSeaGreen;">Ut wisi enim...</p>
Border Color
<h1 style="border:2px solid Tomato;">Hello World</h1>
<h1 style="border:2px solid DodgerBlue;">Hello World</h1>
<h1 style="border:2px solid Violet;">Hello World</h1>
HTML Links - Hyperlinks
<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>
HTML Images
<img src="img.jpg" style="width:500px;height:600px;">
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
JavaScript is a programming language that adds interactivity to your website
(for example: games, responses when buttons are pressed or data entered in
forms, dynamic styling, animation). This article helps you get started with this
exciting language and gives you an idea of what is possible.
<html>
<head>
<script type="text/javascript">
function functionOne() { alert('You clicked the top text'); }
function functionTwo() { alert('You clicked the bottom text'); }
</script>
</head>
<body>
<p><a href="#" onClick="functionOne();">Top Text</a></p>
<p><a href="javascript:functionTwo();">Bottom Text</a></p>
</body>
</html>
HTML Lists
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
<h2>An Ordered HTML List</h2>
<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>
