Workshop Webengineering Basics

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>
</body>
</html>
HTML Styles
<body style="background-color:powderblue;">
<h1>This is a heading</h1>
</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>
<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>

Workshop Webengineering Basics

Hochgeladen von

Dokumentinformationen

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Workshop Webengineering Basics

Hochgeladen von

Copyright:

Verfügbare Formate

University of Agriculture , Faisalabad

UAF_Sub Campus Burewala-Vehari

Department of Computer Science

Web Engineering Basics

Avenue: Computer Lab

Engr. Muhammad Shakeel

Fb: UAF_Burewala CS Soceity

HTML is the standard markup language for creating Web pages.

 HTML stands for Hyper Text Markup Language

 The <!DOCTYPE html> declaration defines this document to be HTML5

 CSS stands for Cascading Style Sheets

Why Use CSS?

CSS Solved a Big Problem

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.

HTML Formatting Elements

 <b> - Bold text

The <marquee> is a non-standard HTML tag which was used to create a

<h1 style="background-color:DodgerBlue;">Hello World</h1>

<h1 style="color:Tomato;">Hello World</h1>

<h1 style="border:2px solid Tomato;">Hello World</h1>

<a href="https://www.w3schools.com/html/">Visit our HTML tutorial</a>

<img src="img.jpg" style="width:500px;height:600px;">

JavaScript is a programming language that adds interactivity to your website

function functionOne() { alert('You clicked the top text'); }

function functionTwo() { alert('You clicked the bottom text'); }

<p><a href="#" onClick="functionOne();">Top Text</a></p>

<p><a href="javascript:functionTwo();">Bottom Text</a></p>

<h2>An Ordered HTML List</h2>

Das könnte Ihnen auch gefallen