Lab 01 manual
Introduction to Web Engineering
Web Engineering is the application of systematic and quantifiable approaches (concepts methods,
techniques tools) to cost ‐ effective requirements analysis, design, implementation, testing,
operation, and maintenance of high quality Web applications.
Technologies to be studied
• HTML5
• CSS3
• JAVASCTIPY
• Bootstrap5
• React js
• Asp.Net
• Add.net
• MVC
• EF
• Api
Tools – IDEs
Visual studio
TYPES OF WEBSITES
When we type a certain URL in a browser search bar, the browser
requests the page from the Web server and the Web server returns the
required web page and its content to the browser. Now, it differs how the
server returns the information required in the case of static and dynamic
websites.
Static websites Dynamic websites
Content of Web pages cannot be change at runtime. Content of Web pages can be changed.
No interaction with database possible. Interaction with database is possible
Cheaper Development costs. More Development costs
HTML, CSS, JavaScript is used for developing the Server-side languages such as PHP,
website. Node.js are used.
Web structure
Website structure refers to the organizational design of a website's pages.
Creating a website structure involves organizing and classifying content to
create a layout that's understandable, accessible, and predictable. Navigation
should be intuitive so users can find what they’re looking for on any page
without much effort. A clear and well-structured website allows users and
search engines to easily find and understand the information they need. It is
important to structure your individual website pages or blog posts in a way
that makes it easy for users to find what they are looking for, find similar
content and understand where they are on your website. Breadcrumb trails,
tags, and contextual site links are used to structure information architecture
on individual pages. Take care of the headers that you put on individual pages.
Make sure that they follow the right order, for example, the title of the blog
post is H1 and that they all have metadata. Metadata are important part of UX,
too. You don’t want to confuse users what your site is about
install VS Code including extension
• Visit the site https://code.visualstudio.com/download
• Then choose based on your computer windows types supporting VS-Code.
• Add extension according to your requirement
WHAT IS HTML?
HTML stands for Hypertext Markup Language. It is the standard language used
to create and structure content on the web. It tells the web browser how to
display text, links, images, and other forms of multimedia on a webpage. HTML
sets up the basic structure of a website.
HTML Page Structure
HTML has essential building-block elements (i.e. doctype declaration,
HTML, head, title, and body elements) upon which all web pages are
created.
• The <!DOCTYPE html> declaration defines that this document is an
HTML5
• document
• The <html> element is the root element of an HTML page
• The <head> element contains meta information about the HTML page
• The <title> element specifies a title for the HTML page (which is shown
in
• the browser's title bar or in the page's tab)
• The <body> element defines the document's body, and is a container for
all
• the visible contents, such as headings, paragraphs, images, hyperlinks,
• tables, lists, etc.
• The <h1> element defines a large heading
• The <p> element defines a paragraph
HTML History:
Since the early days of the World Wide Web, there have been many versions of HTML:
Web Browsers
The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them correctly. A browser does not display the HTML tags, but uses them to determine how
to display the document.
HTML Tags
HTML has two types of tags: container tags (e.g., <h1></h1>, <p></p>) and standalone tags
(e.g., <img>, <input>)
HTML Heading
HTML Paragraph
Link Addressing
• Absolute address
• Relative address
HTML List
INTRODUCTION OF CSS
CSS stands for Cascading Style Sheets. It is a stylesheet language used to style and enhance website
presentation.
CSS is one of the main three components of a webpage along with HTML and JavaScript.
HTML adds Structure to a Webpage, JavaScript adds logic to it and CSS makes it visually appealing or
stylish. It controls the layout of a web page i.e. how HTML elements will be displayed on a webpage.
CSS was released (in 1996), 3 years after HTML (in 1993). The main idea behind its use is, it allows
the separation of content (HTML) from presentation (CSS). This makes websites easier to maintain
and more flexible.
There are three different ways to add CSS styles to an HTML document.
Inline CSS
Use the style attribute on the HTML element to add styles to the web page. It is used for small
projects.
Internal CSS
Place the CSS styles within a <style> tag inside the HTML file, usually inside the <head> section.
. External CSS
Create a separate CSS file with a .CSS extension and link this file to your HTML file using the <link>
tag.
CSS SELECTORS:
CSS selectors are used to select the content you want to style. Selectors are the part of CSS
rule set. CSS selectors select HTML elements according to its id, class, type, attribute etc.
There are several different types of selectors in CSS.
1. CSS Element Selector
2. CSS Id Selector #
3. CSS Class Selector .
4. CSS Universal Selector *
5. CSS Group Selector used with , commas
CSS Box Model: [Padding Vs Margin];
Positions
The position CSS property sets how an element is positioned in a document. The top, right, bottom,
and left properties determine the final location of positioned elements.
There are five different position values:
• static.
• relative.
• fixed.
• absolute.
• sticky
Flex container
The flexible box layout module (usually referred to as flexbox) is a one-dimensional layout model for
distributing space between items and includes numerous alignment capabilities.
When we describe flexbox as being one-dimensional we are describing the fact that flexbox deals
with layout in one dimension at a time — either as a row or as a column.
Main properties of flex
Display: flex;
Justify-content: center;
Align-item: center;
Flex-wrap:wrap;
Task1
Create a document using HTML tags based on the provided sample.
Task2
Task3
Create a navigation menu with nested dropdowns.
• Include a mega menu section for one of the dropdowns.
• Use CSS to style the dropdown with smooth animations.
Task4
Using position Create a card or box with multiple overlapping layers, ensuring the third layer is
displayed as the top priority.
Task5
Create a web page that display the below table;
Task6
Create a layout using flex container according to given sample
Task7
Create a webpage that display your basic CV, using the tags which you learn in this lab.
Task8
Create a grid layout using flex container according to given sample
Task9
Create a webpage for kitchen appliances that includes a navbar with links for logo, home,
appliances, brands, and contact. Each link should lead to related content, such as images, text, and
descriptions, and the page should also feature a footer.
given sample are:
Task10
Using an HTML table, create a cart layout for products based on the task mentioned above
