Web engineering

Lecture 2
Markup Languages
Presented by: Usman Shafique
Today’s Lecture
• Web engineering process framework
• Best practices of web engineering
• Web 2.0 vs web 3.0
• HTML Tables
• Other tags
Web engineering Process Framework
Communication Planning

Web Engineering
Modeling
process framework

Deployment
Construction
 Best practices of Web Engineering
1. Take the time to understand
requirements, even if the details 5. Review models for consistency and
are not clear quality

2. Describe how users will interact 6. Use tools and technology that help to
through WebApp construct WebApp

3. Develop a project plan, even if it is 7. Don’t reinvent when you can reuse
very brief
8. Don’t rely on users to find bug, test the
4. Design a good model, what you WebApp before available to users
are going to build
https://flatworldbusiness.wordpress.com/flat-education/previously/web-1-0-vs-
web-2-0-vs-web-3-0-a-bird-eye-on-the-definition/
Text formatting in HTML
• Text formatting tags modify the text between the opening tag and the
closing tag
• Ex. <b>Hello</b> makes “Hello” bold
Miscellaneous Tags
Example of Miscellaneous Tags
Block and Inline Elements
• Block elements add a line break before and after them
• <div> is a block element
• Other block elements are <table>, <hr>, headings, lists, <p> and etc.

• Inline elements don’t break the text before and after them
• <span> is an inline element
• Most HTML elements are inline, e.g. <a>
Div Tag
Span Tag
HTML Table
• Tables represent tabular data
• A table consists of one or several rows
• Each row has one or more columns

• Tables comprised of several core tags: <table></table>: begin /

end the table
<tr></tr>: create a table row
<td></td>: create tabular data (cell)
HTML Table
 HTML Table example
<table cellspacing="0" cellpadding="5">
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture1.ppt">Lecture 1</a></td>
</tr>
<tr>
<td><img src="ppt.gif"></td>
<td><a href="lecture2.ppt">Lecture 2</a></td>
</tr>
<tr>
<td><img src="zip.gif"></td>
<td><a href="lecture2-demos.zip">
Lecture 2 - Demos</a></td>
</tr>
</table>
 Nested table
• <table>
<tr>
<td>First cell in first table. The cell to the right
has the second table in it.</td>
<td>

<table>
<tr><td>nested table</td></tr>
<tr><td>nested table</td></tr>
</table>

</td>
</tr>
</table>
Difference b/w cellspacing and cellpadding
Example (cellspacing and cellpadding)
Rowspan and Colspan
Example (Rowspan and Colspan)
Examples
• Write Html table code for it!
Examples
Write Html table code for it!
Tables are bad for Layout?
• Tables Are Tricky (colspan , rowspan)
• Tables are Inflexible
• Nested Tables Load More Slowly than CSS for the Same Design
• Tables Can Hurt Search Engine Optmization
• Tables Don't Always Print Well
• Tables for Layout Can Affect Your Job Prospects
Fieldset and Lagend
• The <fieldset> tag is used to group related elements in a form.
• The <legend> tag defines a caption for the <fieldset> element.
Iframe
• The <iframe> tag specifies an inline frame.
• An inline frame is used to embed another document within the
current HTML document.
• E.g
• <iframe src="http://www.w3schools.com"></iframe>
Iframe Example
Marque
The HTML <marquee> tag is used for scrolling piece of text or
image displayed either
horizontally across or vertically down your web site page
depending on the settings.
e.g
<marquee>This is basic example of marquee</marquee>
<marquee direction="up">The direction of text will be from
bottom to top.</marquee>
 Project Work
Assignment # 1
Finding Similarities and Differences
1. Design of WebApp (i.e. Layout)
2. User Interface (user friendly or not)
3. Images are attractive for a user (i.e. background image, banner,
profile picture, etc.)
4. Read the comments, if available (that could be Likes, Number of
Subscription's, etc.)
5. Details or descriptions on each web page (information is valuable
for a concerned user or not)