Web Engineering

RABIA ASLAM KHAN

A Web Page, Step by Step

 Step 1: Start with content.

 Step 2: Give the document structure.
 Step 3: Identify text elements.
 Step 4: Add an image.
 Step 5: Change the page appearance with a style sheet.
Give the document structure

 You’ll learn about HTML element syntax and the elements that give a document its
structure.

<element name> Content here </element name>

<h1> Lahore Garrison University </h1>

HTML Tags

<element name> Tag

<b> Defines bold text
<br> Defines a single line break
<button> Defines a clickable button
<cite> Defines the title of a work
<dialog> Defines a dialog box or window
<div> Define a section in a document.
<h1> to <h6> Defines HTML headings
HTML Tags

<element name> Tag

<img> Insert image
<input> Input field
<form> Form design
HTML Attributes

 All HTML elements can have attributes

 Attributes provide additional information about an element
 Attributes are always specified in the start tag
 Attributes usually come in name/value pairs like: name="value"
Example

 <a href="https://www.lgu.edu.pk">Visit LGU</a>

 <h2>Spectacular Mountain</h2>

 <img src=“sample.jpg" alt=“sample View" style="width:304px;height:228px;">

Example

 <form action=“ ">
  Firstname: <input type="text" name="fname"><br>
  Last name: <input type="text" name="lname"><br>
  <input type="submit" value="Submit">
</form>