Scribd
Upload
3 views

Lab 01 manual

The Lab 01 manual introduces Web Engineering, focusing on systematic approaches for developing high-quality web applications using technologies like HTML5, CSS3, and JavaScript. It distinguishes between static and dynamic websites, outlines website structure, and provides an overview of HTML and CSS, including their roles and basic elements. The manual concludes with a series of tasks aimed at applying learned concepts through practical web development exercises.

Uploaded by

k224802
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Lab 01 manual

The Lab 01 manual introduces Web Engineering, focusing on systematic approaches for developing high-quality web applications using technologies like HTML5, CSS3, and JavaScript. It distinguishes between static and dynamic websites, outlines website structure, and provides an overview of HTML and CSS, including their roles and basic elements. The manual concludes with a series of tasks aimed at applying learned concepts through practical web development exercises.

Uploaded by

k224802
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 16

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

You might also like