Engr. Muhammad Raees: Spring 2019

WEB DESIGN AND DEVELOPMENT
LECTURE 03
Spring 2019
Engr. Muhammad Raees

raees.se@must.edu.pk
Department of Software Engineering, MUST. Mirpur AJ&K 1

OUTLINE
▪ The HTML

INTRODUCTION TO HTML
▪ HTML – Hyper-Text Markup Language – The Language of Web
Pages on the World Wide Web
▪ It defines the structure of webpages and determines how data is
displayed online
▪ Is directly interpreted by the browser
▪ Hypertext:
▪ Allows for non-linear linking to other documents
▪ Markup Language:
▪ Content is “marked up” or tagged to tell the browser how to display it
▪ HTML was created in 1991 by Tim Berners-Lee at CERN in
Switzerland
▪ 1995- HTML 2
▪ 1997- HTML 3.2 developed and standardized exclusively by the
W3C
▪ 1999 – HTML 4.1 extends HTML with mechanisms for style
sheets, scripting, frames etc.
▪ HTML5
▪ HTML is not case-sensitive, spaces will appear as a single space, blank
and new lines are ignored
▪ <!-- comments -- >
▪ The entire web page is enclosed within <HTML> and </HTML>
▪ Within these tags two distinct sections are created head and body
▪ Head: <HEAD>
<TITLE> …… </TITLE>
</HEAD>
. Body: indicate the start and end of main body of textual information
<BODY>
</BODY>
TEXT
▪ <P>….. </p>: starts a new paragraph
▪ Align (left, right, center and justify)
▪ <BR>: gives an one line break

▪ <H1 to H6> ….. </H1 to H6>: headings
▪ <HR>: draws horizontal line
▪ ALIGN (LEFT,CENTER,RIGHT)
▪ SIZE=2
▪ WIDTH=100%
▪ color
▪ Text Styles:
▪ <B> …. </B> , <I> …. </I>, <U> …. </U>
6
LISTS
▪ Un-ordered Lists:
▪ Starting Tag <UL>, Ending Tag </UL>
▪ List Items <LI>
▪ Type (FILLROUND, SQUARE)
▪ Ordered Lists:
▪ Starting Tag <OL>, Ending Tag </OL>
▪ List Items <LI>
▪ Type (“1”, “A”, ‘”a”, ”I”, ”i”)
▪ Start (Alerts the numbering Sequence)
▪ Value (Changes the number sequence in the middle of an ordered list)
▪ Definition Lists:
▪ Starting Tag<DL>
▪ Ending Tag </DL>
▪ Definition Term <DT>
▪ Definition Description <DD>
7
LINKS
▪ The crux of HTML is its capability to reference countless other
pieces of information easily on the internet
▪ Internal link
▪ External link
▪ Internal links work through website directory
▪ Absolute links
▪ Relative links
8
TABLES
▪ Tables display information in rows and columns
▪ Tables are commonly used to display all manner of data (even
page structure in past) that fits in a grid such as train
schedules, television listings, financial reports etc.
▪ <table> … </table>
▪ <tr> … </tr> the row and <td> … </td> cell
▪ <th> … </th> heading row
▪ Table body and Table header
▪ Table footer and Table summary
▪ Caption
▪ spanning
9
IMAGES
• <img> tag is used to add images to web pages
• SRC attribute
• Alt attribute
• Image link
• Image maps allow you to add multiple links to the same
image
• Each of these clickable areas is known as a hotspot
• Defining a map:
• <map name=“map name”>
• <area shape=“link-shape” coords=“coordinates of link area”
href=“page-reference”>
• </map>
10
VIDEO AND AUDIO
• The <video> and <audio> tag is used to add a video and
audio to a web page
• The src attribute
• Auto-play
• Controls
• Height (video)
• Loop
11
FORMS
▪ Forms provide a means of submitting information from the
client to the server
▪ Form tag
▪ Common Form Attributes:
▪ action - gives the URL of the application that is to receive and process
the forms data
▪ method - sets the HTTP method that the browser uses to send the
form's data to the server for processing; Either POST or GET
▪ name – name of the form
12
FORM INPUT
▪ Textbox
▪ Password Field
▪ Hidden Field
▪ Checkbox
▪ Radio Button
▪ Text Area
▪ Select List
▪ Submit Button
▪ Reset Button
▪ And many more
13
SUBMITTING
▪ Submit and Reset Buttons
<INPUT TYPE=“SUBMIT” VALUE=“SAVE”>

<INPUT TYPE=“RESET” VALUE=“RESET”>

FORM ELEMENT ATTRIBUTES
▪ Specific Designed Input fields, plus attributes
▪ Required
▪ Placeholder
▪ Pattern {Regular Expression}
▪ Disabled
▪ Read only
▪ Auto complete
▪ Data List
▪ Tags for email, number, date, colour, file etc.

WEB FORM
▪ Requests can be displayed in browsers such as Internet
Explorer (press F12 key). The information displayed is as
follows.
▪ URL: The address of the website of the resource.
▪ Method: The HTTP method. (GET, POST, HEAD, PUT, DELETE etc.)
▪ Received: The bytes received.
▪ Time: Time is taken to process the request.
16
WEB FORMS
▪ HTTP methods are some verb keywords which correspond to
the request being sent to the server. There are many request
methods, however, some of commonly used are listed below.
▪ GET: GET request is used to get resource from web-server. The
resource can be any type of file (i.e. a webpage).
▪ HEAD: HEAD method is very similar to the GET method. However, in
the HEAD method, the server does not return a response message.
▪ POST: Data is posted to the web server to perform some operations
on it.
▪ PUT: PUT sends data to the web server to add new data on the web
server.
▪ DELETE: DELETE is used to delete a resource from the web server.
17
PAGE ELEMENTS
▪ The header
▪ The section
▪ The article
▪ The footer
▪ The navigation
▪ The aside
▪ The address

THANK YOU
▪ Reading and Practice

Engr. Muhammad Raees: Spring 2019

Uploaded by

Document Information

Original Title

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

Engr. Muhammad Raees: Spring 2019

Uploaded by

Copyright:

Available Formats

WEB DESIGN AND DEVELOPMENT

Engr. Muhammad Raees

Department of Software Engineering, MUST. Mirpur AJ&K 1

Department of Software Engineering, MUST. Mirpur AJ&K 2

▪ <BR>: gives an one line break

<INPUT TYPE=“SUBMIT” VALUE=“SAVE”>

Department of Software Engineering, MUST. Mirpur AJ&K 14

Department of Software Engineering, MUST. Mirpur AJ&K 15

Department of Software Engineering, MUST. Mirpur AJ&K 18

Department of Software Engineering, MUST. Mirpur AJ&K 19

You might also like