Unit 8: Web Development with HTML, CSS and JavaScript — Long Questions

Process of creating websites and web applications is called Web development. It means using various programming languages and tools to design, build, and maintain websites.

Why Learn Web Development?

Web development is a valuable skill for several reasons:

• Digital Literacy: When you learn web development, you find out how websites are made. You learn about HTML, which is like the skeleton of a web page, CSS, which makes the web page look nice, and JavaScript, which makes the web page interactive. This helps you understand how the internet works.

• Career Opportunities: Opens up a wide range of job prospects in the growing IT industry. Web developers can get many different kinds of jobs. You can become a web developer, web designer, and more. Many companies need web developers to create and maintain their websites. This means you can find good jobs in many places.

• Problem-Solving: When you build a website, you solve many problems. For example, if a website is slow, you figure out why and fix it. This helps you think logically and solve problems better.

• Creativity: Allows you to create visually appealing and interactive websites. Web development lets you be creative. You can design websites with cool layouts, colors, and interactive features. (For example, you can create a personal blog or a portfolio to show your artwork, making your own unique website.

• Entrepreneurship: With web development skills, you can start your own online business. For example, if you make crafts, you can build a website to sell them. Or, you can create a new web service, like a fun app, and share it with the world.

Web development involves creating websites and web applications. It has three main components:

1. Front-End Development
2. Back-End Development
3. Full-Stack Development

1. Front-End Development: This focuses on what users see and interact with on a website. The following fundamentals are used to design interactive Front-ends:

• HTML structures the content on web pages, like headings, paragraphs, Images, and links.

• CSS styles the content on web pages, changing colors, fonts, and layout to enhance the appearance.

• JavaScript adds interactivity to web pages, making them dynamic and engaging. It allows features such as forms, animations, and games.

2. Back-End Development: This manages the behind-the-scenes functionality of a website, including servers, databases, and application logic. Key back-end technologies are:

• Web Servers are computers that store and deliver web pages to users when they enter a URL

• Databases store and manage data, like user information, product details, and website content.

• Back-end Programming Languages like PHP, Python, and Ruby handle tasks such as processing forms, and managing user logins.

3. Full-Stack Development

In the case of login system, a full-stack developer will create the User Interface (UI) for front-end and handle user authentication and database interaction for back-end.

Example Login System

A login system is a common feature in web development, allowing users to access their accounts on a website. This example will illustrate the roles of front-end and back-end development, as well as the concept of full-stack development.

HTML is the standard language used to create web pages. Think of HTML as the building blocks of a website. Just like LEGO pieces come together to build a structure, HTML tags come together to build a web page.

History of HTML

HTML was created by Tim Berners-Lee in 1991. It was designed to make sharing of information on the internet easy. Over the years, HTML has gone through many changes and improvements to make it more powerful and easier to use.

• HTML 1.0 (1991): The very first version of HTML. It was simple and had basic features to create text and links.

• HTML 2.0 (1995): Introduced more tags and features, allowing for creating more complex web pages.

• HTML 3.2 (1997): Added new tags for creating tables, scripts, and applets.

• HTML 4.0 (1997): Brought major improvements, including support for multimedia elements like images and videos.

• HTML 4.01 (1999): Minor improvements in version 4.0

• HTML 5 (2014): The latest version of HTML. It includes new elements for better multimedia support, graphics, and more interactive web pages.

To start creating websites, you need a few basic tools and environments:

1. Text Editor: This is where you write your HTML code. Popular text editors include Notepad++, Sublime Text, and Visual Studio Code.

2. Web Browser: You will use this to view and test your HTML files. Common web browsers are Google Chrome, Mozilla Firefox, and Microsoft Edge.

Start with a simple text editor and a web browser. Once you are comfortable with HTML, you can explore more advanced tools.

To create a basic HTML application that displays "a message" on a web page, follow these simple steps:

1. Open your text editor, You can use Notepad, Notepad++, Sublime Text, or any other text editor.

2. Write the following HTML code into your text editor.

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page. I am learning HTML in the 9th class!</p>
</body>
</html>

3. Save your file with a html extension, for example, My_first_website.html.

Viewing the HTML File

1. Open Your Web browser (Google Chrome, Mozilla Firefox, and others)

2. Double-click on your file named My_first_website.html.

3. You should see the text welcome to my website displayed on the web page as shown in figure.

A structured HTML document is easier to read and understand. Properly nested and well-organized elements help developers and browsers interpret the content correctly. This organization ensures that the web page displays as intended.

Every HTML document has a basic structure where:

• <!DOCTYPE html>: This line tells the browser that this is an HTML5 document.

• <html>: This is the root element of an HTML page.

• <head>: This section contains meta-information about the HTML document like the title.

• <title>: This sets the title of the web page, which appears in the browser tab.

• <body>: This section contains the content of the web page that you see in the browser.

• <h1>: This defines a large heading.

• <p>: This defines a paragraph.

HTML Tags

Elements that make up an HTML document are called tags. A web page's structure and content are defined by them. On the basis of structure, HTML tags are categorized into two types:

1. Paired tags: Comes in pairs an opening Tag and closing Tag i.e <p>...</p>.

2. Unpaired Tags: Do not need closing Tags. They are also known as self-closing Tags i.e., <img>, <br>.

Content in HTML is the main information on a web page that users read and interact with. It includes text, images, videos, links, and other elements that convey the purpose and message of the page. This makes it easier for people to find your site.

Headings

Headings in HTML, ranging from <h1> to <h6>, are used to define the structure and hierarchy of content on a web page.

Importance of Headings

1. Organizing Content Headings helps organize the content into sections and subsections, making it easier for users to read and understand. <h1> is typically used for the main title of the page, while <h2> to <h6> are used for subheadings in decreasing order of importance.

2. Search Engine Optimization (SEO): Search engines use headings to understand the structure and main topics of a web page. Proper use of headings can improve the page's SEO, helping it rank higher in search results.

3. Consistent Formatting: Using standard heading tags ensures consistent formatting across different browsers and devices.

Example Here is an example of how different heading levels can be used to organize content in a hierarchical structure:

<!DOCTYPE html>
<html>
<head>
<title>Importance of Headings in HTML</title>
</head>
<body>
<h1>Main Title (h1) </h1>
<p>This is the main title of the page. </p>
<h2>Subheading 1 (h2)</h2>
<p>This is a subheading under the main title. </p>
<h3>Subheading 2 (h3)</h3>
<p>This is a subheading under Subheading 1. </p>
</body>
</html>

1. Paragraphs

Paragraphs in HTML are used to organize and separate text into readable sections. Each paragraph creates a block of text with space above and below it, making the content easier to read. Paragraphs starts with the <p> tag and it ends with </p>

2. Links

Links in HTML are used to connect one web page to another. They allow you to click on words or images to go to different parts of the same web page or to other web pages on the internet. Links are created using the <a> tag.

<a href="https://www.example.com"> Visit Example.com</a>
<a href="mailto: example@example.com">Send Email</a>

3. Images

Images are important in HTML because they make web pages more attractive and engaging. Additionally, using images helps with branding, as logos and specific visuals make it easier for users to recognize a brand. Images are added using the <img> tag.

<img src="image.jpg" alt="A description ll of the _{__} image">

4. Lists

Lists improve readability by breaking complex ideas into simpler parts, allowing users to scan for details easily. Overall, lists make the content more organized and accessible for everyone. You can create ordered (numbered) and unordered (bulleted) lists.

5. Unordered List

An unordered list is the list of items that are not numbered in a specific order and are typically represented by bullets.

<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

Output can be given side by
Result

• Item 1
• Item 2
• Item 3

6. Ordered List

An ordered list is the list of items that are numbered in a specific order.

<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item </li>
</ol>

Output can be given side by
Result

1. First item
2. Second item
3. Third item

Tables in HTML are used to display data in a structured format, allowing for easy comparison and organization of information. A table is created using the <table> tag, which contains rows defined by <tr> (table row) tags, and each row consists of cells represented by <td> (table data) tags. Additionally, headings for the table can be added using <th> (table header) tags to provide context for the data.

Example

<table>
</tr>
<th>Name</th>
<th>Age</th>
</tr>
<tr>
<td>Pro. Faisal Zia</td>
<td>29</td>
</tr>
<tr>
<td> Pro. Jawad Manzoor</td>
<td>28</td>
</tr>
</table>

HTML Comments

In HTML, comments can be extremely useful for:

● Explaining the purpose of a specific section of code
● Leaving reminders for future edits
● Temporarily disabling code for testing purposes

Syntax of HTML Comments

HTML comments begin with <!-- and end with -->. Any text placed within these markers will be treated as a comment and will not be rendered by the browser.

<!-- This is a comment -->

Q.10 Briefly describe Cascading Style Sheets (CSS) with its basic structure.

Ans. Styling with Cascading Style Sheets (CSS) is very important for improving the visual appearance of webpages and improving user experience. CSS allows web developers to control the colors, fonts, layout, and overall design of HTML elements, separating the content from the presentation.) CSS offers various properties and selectors to apply styles to specific elements, enabling responsive design sign that automatically adjusts to different screen sizes and devices.

Basic Structure of CSS

The basic structure of CSS is essential for applying styles to HTML elements effectively. CSS is composed of rules that consist of selectors and declarations. Selectors specify which HTML elements the styles will apply to, while declarations define the specific styles to be applied, including properties and their corresponding values. A typical CSS rule follows this format:

selector {property: value;
}

For example, a simple CSS rule can change the color and size of all headings on a web page:

h1{
color: red;
font-size: 24px;
}

In this example, the CSS rule targets all <h1>' elements, setting their text color to red and font size to 24 pixels.

Styling with Cascading Style Sheets (CSS) is very important for improving the visual appearance of webpages and improving user experience. CSS allows web developers to control the colors, fonts, layout, and overall design of HTML elements, separating the content from the presentation.) CSS offers various properties and selectors to apply styles to specific elements, enabling responsive design sign that automatically adjusts to different screen sizes and devices.

Basic Structure of CSS

The basic structure of CSS is essential for applying styles to HTML elements effectively. CSS is composed of rules that consist of selectors and declarations. Selectors specify which HTML elements the styles will apply to, while declarations define the specific styles to be applied, including properties and their corresponding values. A typical CSS rule follows this format:

selector {property: value;
}

For example, a simple CSS rule can change the color and size of all headings on a web page:

h1{
color: red;
font-size: 24px;
}

In this example, the CSS rule targets all <h1>' elements, setting their text color to red and font size to 24 pixels.

Integrating CSS with HTML is essential for styling web pages and it can be done in three primary ways: inline, internal, and external styles.

1. Inline Styles: This method involves adding CSS directly to individual HTML elements using the style attribute. For example, <h1 style="color: blue;">Hello World</h1> changes the color of the heading to blue. While easy for quick changes, inline styles can make the code cluttered and less maintainable.

2. Internal Styles: CSS can also be included in the <head> section of an HTML document using the <style> tag. This method allows you to define styles for the entire page without affecting others.

For instance

<style>h1 {
color: yellow;
}
</style>

3. External Styles: The most efficient method for larger project is to use an external CSS file which is linked to the HTML document with the <link> tag in the <head> section. The keeps the HTML clean and allows for easy updates across multiple pages.

For Example <link rel="stylesheet" href="styles.css">

CSS is a language used to style web pages. One of the fun that you can do with CSS is to change the background of a web page or elements on it. Here are a few ways you can style backgrounds of a web page with CSS:

• Background Color: You can change the background color of a web page or any HTML element using the background-color property. For example, if you want a blue background, you can write:

body
{background-color: blue;
}

• Background Image: You can set an image as the background of a web page using the background-image property. For example, font family issue as the background, you can write:

body {
background-image: url("your-image.jpg");
}

• Background Repeat: Sometimes, the background image is small, and you want it to repeat across the page. You can use the background-repeat property to do this. For example: body {
background-image: url("your-image.jpg"); background-repeat: repeat;
}

• Background Position: You can position the background image exactly where you want it using the background-position property. For example, to center the image, you can write:

body {background-image: url("your-image.jpg"); background-position: center;
}

• Background Size: You can control the size of the background image using the background-size property. For example, to cover the entire page with the background image, you can write;

body{
background-image:url("your-image.jpg"); background-size: cover;
}

Using these properties, you can create colorful and appealing background for web pages.

Creating layouts and organizing content on a web page is an important part of web design. CSS helps you arrange different parts of your web page in an organized way. Here are some basic methods to create layouts and organize content:

• Divs and Sections: HTML elements like <div> and <section> are used to group content together. You can then use CSS to style and position them.

For example <div class = "container">
<section class = "header"> This is the header</section>
<section class = "footer"> This is the footer</section>
</div>

• CSS Grid: The CSS Grid Layout is a powerful tool for creating complex layouts. It allows you to arrange items into rows and columns. For example:

container{
Display:grid;
Grid-template-column: auto auto;
grid-gap: 10px;
}
.item
{Padding: 20px;
Background-color:lightgrey;
}

• CSS Flexbox: Flexbox is another layout tool that helps in arranging items in a flexible and responsive way. It is useful for aligning items in a row or column.

For Example
.container
{ display:flex;
Justify-content: space-between;
}
.item
{
padding: 20px;
background-color:lightgrey;
}

• Positioning: CSS positioning properties like position, top, left, right, and bottom allow you to place elements exactly where you want them on the webpage.

For example
box
{ position:absolute;
Top:50px;
Left:100px;
Width:200px;
Height:100px;
Background-color:lightblue;

• Margins and Padding: Margins and padding are used to create space around and inside elements. Margins create space outside the element, while padding creates space inside the element.

For example
.box
{
margin:20px;
Padding:10px;
Background-color:lightgrey;
}

CSS animations and transitions can make your web pages more engaging by adding movement and effects.

Adding Animations

CSS allows you to add animations to your web page to make it more interactive. Animations can change the way elements look or move over a period of time. Here are some basic steps to create animations with CSS:

• Define Keyframes

Key frames are used to specify the start and end points of an animation, as well as any intermediate steps.

For example

@keyframes example {
From {background-color:red;} to {background-color: yellow;}
}

This keyframe animation changes the background color from red to yellow.

• Apply the Animation: To apply the animation to an element, use the animation property.

For example

.animated-box
{
width: 100px;
height: 100px
background-color: red;
animation-name: example;
animation-duration:4s;
}

This will change the background color of the box change from red to yellow for four seconds.

• Loop and timing: You can also set how many times the animation should repeat and its timing function.

For example

Animated-box{
Animation-interaction-count: infinite;/*Animation will repeat*/-animation-timing-function:linear;
*|Animation will progress at a constant speed*/

CSS allows you to add transitions to a web page to make changes between styles smooth and visually appealing. Transitions can change properties like color, size, or position gradually, Here are some basic steps to create transitions with CSS:

• Set the initial style: First, define the initial style for the element you went to animate.

For example
.box{
width: 100px;
height: 100px;
background-color: red;
transition: background-color 2s, width 2s;
}

This sets the initial size and color of the box, and specifies that changes to the background color and width should transition over 2 seconds.

• Define the Hover State: Next, define the styles for the element when it is hovered over.

For example
.box:hover{
background-color: yellow; width: 200px;
}

This will change the background color to yellow and double the width of the box when the mouse hovers over it.

Java-Script is a programming language that is used to make websites interactive and engaging. It allows developers to create things like animations, games, and responsive features that react when you click buttons or move your mouse. For example, when you see a pop-up message on a web page or when an image changes when you hover over it, that's JavaScript at work.

Execution of JavaScript in a flowchart.

Basic Syntax and Examples

<!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>
</head>
<body>
<h1>Welcome to JavaScript</h1>
<script>
alert("Hello,9th Class Students!");
</script>
</body>
</html>

In JavaScript, you can store data using variables. A variable is like a container that holds information which can be using and manipulated in your code.

Declaring Variable

To declare a variable in JavaScript, you use the var, let, or const keyword. Here's an example using var:

<script>
var name = "Pro. Faisal Zia";
var age = 29;
alert("Name:" + name + , "Age:" + age);
</script>

Dry Run Example

Let's dry-run the above script to understand how it works step-by-step:
1. Declare variables: name = "Pro. Faisal Zia-"; and age = 29;
2. Display alert: alert("Name: " +name+", Age: "+age);
This will result in an alert box showing: Name: Athar, Age: 15,

Data Types

Variables can store different types of data. Here are some common data types in JavaScript

1. String
A sequence of characters used for text.
var name = " Pro. Faisal Zia"; //String

2. Number
Represents both integer and floating-point number.
var age = 29;//Number

3. Boolean
Represents true or false values.
var is Student = true; // Boolean

4. Array
A collection of values stored in a single variable. var scores = [90, 85, 88]; //Array

Q.18 What is function? Describe its types.

Functions allow you to reuse code and perform specific tasks. They are like mini-programs that you can run whenever you need them. Let's learn how to create and use functions in JavaScript.

Simple Function

Here's an example of a simple function that displays a greeting message:

<script>
function greet() {
alert("Hello, Student!");
}
greet(); //This calls the function to execute
</script>

In this example

• The function greet() declares a function named greet.
• alert("Hello, Student!"); is the code that runs when the function is called.
• greet(); calls the function, displaying the alert message.

Function with Parameters

Sometimes, you want your function to do something with input values. You can achieve this using parameters.

Function with Multiple Parameters

You can also create functions that take multiple parameters. Here's an example:

<script>
function addNumbers (a,b) {
var sum = a + b;
alert("The sum is:" + sum);
}
addNambers(5, 3); // This calls the function with the parameters 5 and 3
</script>

In this example

• The function addNumber(a, b) declares a function that takes two parameters, a and b.
• var sum = a + b; calculates the sum of a and b.
• alert("The sum is: ' + sum); displays the result of the addition.
• addNumbers(5, 3); calls the function with the arguments 5 and 3, resulting in the alert message "The sum is: 8''.

JavaScript allows you to make your web page interactive by handling events and user input. An event is an action that occurs when a user interacts with a webpage, like clicking a button or pressing a key.

HTML Events

HTML events are actions that occur in the browser, often triggered by user interactions. Events can be used to make web pages interactive by executing JavaScript code when a specific event occurs.

Common HTML Events

Here are some common events' you might encounter:

• Onclick: Triggered when an element is clicked.
• Onload: Triggered when a page or an image has finished loading.
• Onmouseover: Triggered when the mouse pointer moves over an element.
• Onmouseout: Triggered when the mouse pointer moves out of an element.
• Onkeyup: Triggered when a key is released on the keyboard.

Managing Events and User Interactions with JavaScript

Let us learn how to manage events and user interactions step-by-step.

Event Handlers

An event handler is a function that runs when a specific event occurs. You can attach event handlers to HTML elements to make them respond to user actions.

Example Button Click Event

Here's an example of how to handle a button-click event:

<!DOCTYPE html>
<html>
<head>
<title>Button Click Event</title>
<script>
function showMessage() {
alert("Button was clicked!");
</script>
</head>
<body>
<button onclick = "showMessage()">Click Me!</button>
</body>
</html>

In this section, we will learn how to make web pages interactive by developing simple programs and forms. We will also learn how to integrate JavaScript with HTML to add interactive functionality.

Developing Simple Programs and Form

Forms allow users to input data, which can be processed using JavaScript. Here is an example of a simple form that takes user's name and displays a greeting message.

Example Simple Form

Create an "index.html" file with the following content:

<!DOCTYPE html>
<html>
<head>
<title>interactive Form </title>
<script>
Function greetUser() {
var name = document.getElementByld('name').value;
alert("Hello," + name + "!");
}
</script>
</head>
<body>
<h1> Welcome!</h1>
<form>
<label for= "name">Enter Your name:</label>
<input type = "text" id="name" name="name">
<button type= "button" onclick= "greetUser()">Submit</button>

Add the following content to your index.html file:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial- scale=1.0">
<title>Change Background Color</title>
<script src="script.js"></script>
</head>
<body>
<h1>Welcome to the Color Changer!</h1>
<button onclick="changeColor()"> Change Background Color</button>
</body>
</html>

Add the following content to your script.js file:

function change Color() {
document.body.style.backgroundColor = "lightblue";
}

Testing and debugging are important steps in web development. They help you find and fix errors in your code to ensure your web pages work correctly.

Debugging Techniques

Debugging is the process of finding and fixing issues in your code. Here are some common debugging techniques:

1.Using Browser Developer Tools

Most web browsers have built-in developer tools that help you debug your code. For example, you can use the console to see error messages and set break points to pause your code and examine its behaviour.

<script>
console.log("This is a debug message");
var x = 10;
console.log("The value of x is: " + x);

2. Reading Error Messages

When something goes wrong, your browser will usually display an error message. Reading these messages carefully can help you understand what went wrong and how to fix it.

3. Checking Your Code

Go through your code line by line to check for common issues like missing semi colons, unmatched braces, or incorrect variable names.

Identifying and Fix in Common issues:

Here are some common issues in web development and how to fix them:

1. Broken Links: Make sure all your links point to the correct URLs. Double-check the paths to your files.

2. Incorrect HTML Structure: Ensure your HTML tags are properly nested and closed.

HTML CSS JavaScript

HTML is the standard language used to create web pages. CSS allows web developers to control the colours, fonts, layout, and overall design of HTML elements, separating the content from the presentation.) Java-Script is a programming language that is used to make websites interactive and engaging. It allows developers to create things like animations, games, and responsive features that react when you click buttons or move your mouse. For example, when you see a pop-up message on a web page or when an image changes when you hover over it, that's JavaScript at work. Execution of JavaScript in a flowchart.

To create a basic HTML application that displays "a message" on a web page, follow these simple steps:

1. Open your text editor, You can use Notepad, Notepad++, Sublime Text, or any other text editor.

2. Write the following HTML code into your text editor.

3. Save your file with a html extension, for example, My_first_website.html. Styling Ways

Inline Styles
Internal Styles
External Styles Example when you see a pop-up message on a web page or when an image changes when you hover over it, that's JavaScript at work.

Execution of JavaScript in a flowchart.

Syntax <!DOCTYPE html>
<html>
<head>
<title>JavaScript Example</title>

Example

<!DOCTYPE html>

<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is my first web page. I am learning HTML in the 9th class! </p>
</body>
</html> h1{
color: red;
font-size: 24px;
}
In this example, the CSS rule targets all <h1>' elements, setting their text color to red and font size to 24 pixels. </head>
<body>
<h1>Welcome to JavaScript</h1>
<script>
alert("Hello,9th Class Students!");
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Basic HTML Page</title>
</head>
<body>
<!-- Header Section -->
<h1>UNIQUE GROUP OF INSTITUTIONS</h1>
<!-- Paragraph Section -->
<p>This is a basic HTML page that includes a header, a paragraph, an image, and a hyperlink.</p>
<!-- Image Section -->
<img src='https://via.placeholder.com/150" alt="Placeholder Image">
<!-- Hyperlink Section -->
<a href="https://www.example.com" target="_blank"> UNIQUE GROUP OF INSTITUTIONS </a>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Styled Table</title>
<style>
table {
width: 80%;
margin: 20px auto;
border-collapse: collapse;
border: 2px solid #ddd;
}

th {
background-color: #4CAF50;
color: white;
padding: 12px;
text-align: left;
}

td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}

tr:hover {
background-color: #f1f1f1;
}

caption {
font-size: 24px;
font-weight: bold;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h2>Sample Styled Table</h2>
<!-- Table structure -->
<table>
<caption>Employee Information</caption>
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Department</th>
</tr>
</thead>
<tbody>
<tr>
<td>Prof. Faisal Zia</td>
<td>Manager</td>
<td>HR</td>
</tr>
<tr>
<td>Prof.Jawad Manzoor</td>
<td>Developer</td>
<td>IT</td>
</tr>
<tr>
<td>Prof.Sajid Muhammad</td>
<td>Designer</td>
<td>Marketing</td>
</tr>
</tbody>
</table>
</body>
</html>