Scribd
Upload
18 views

Web Design and Internet Programming Lab Manual (2)

This document serves as a manual for a web design and internet programming lab focused on client-side development, specifically HTML. It covers the basic structure of HTML documents, essential HTML elements, attributes, and various examples including forms, CSS styling, and layout techniques. The document provides step-by-step instructions for creating HTML documents and examples of inline, internal, and external CSS, along with practical applications for forms.

Uploaded by

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

Web Design and Internet Programming Lab Manual (2)

This document serves as a manual for a web design and internet programming lab focused on client-side development, specifically HTML. It covers the basic structure of HTML documents, essential HTML elements, attributes, and various examples including forms, CSS styling, and layout techniques. The document provides step-by-step instructions for creating HTML documents and examples of inline, internal, and external CSS, along with practical applications for forms.

Uploaded by

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

WEB DESIGN AND INTERNET PROGRAMMING LAB

MANUAL
Client-side development (front-end)
Lab 1. HTML (Hypertext Markup Language): Defines the structure of the webpage

 understand the steps and basic HTML document structure


 understand the steps and basic HTML elements <head>, <body><html><p>
 understand the steps and basic HTML headings <h1>up to <h6>
Tools for HTML page Development:
Text Editor/IDE: To write the code.
 Sublime Text – Another lightweight text editor.
 Not pad
Web Browser: For testing the website and inspecting front-end code.
o Popular options:
 Google Chrome
 Mozilla Firefox
 Microsoft Edge
A. Instruction How can we create simple html document

Simple steps to create a basic HTML document:


1. Open notepad or another text editor.
2. at the top of the page type
3. Add the opening header tag
4. on the next line type
5. Go to next line and type closing header tag
6. Go to next line and type opening body tag
7. Go to next line and type closing body tag
8. Finally, go to next line and type
9. In the file menu, choose save as.
10. In the save as type option box, choose all files.
11. Name the file filename.html
12. Click saves.
Code : <DOCTYP html>

<html>

<head>

<itle >

My first html page

</title>

</head>

<body>

<>me to
<p>this is my first html document I created </p></html>

AITS, TATI...
HTML document structure: An HTML document starts and ends with and
Tags. These tags tell the browser that the entire document is composed in HTML.
Inside these two tags the document is split into 2 sections:
1. The <head> ……</head> elements contain information about the
document such as title of the document etc.
2. The <body>…. </body>Elements contains the real content of the
document that you see on your screen.

ATTRIBUTES:

B. An attribute is used to define the characteristics of an element and is placed inside the
element’s opening tag. All attributes are made up of parts: a name and a value. -The name
is the property you want to set. -The value is what you want the value of the property to
be.

Example :< body bgcolor=” green”>


<!DOCTYP html>
<html>
<head>
<title>HTML program </title>
</head>
<body bgcolor="pink">
<font color="red"><marquee direction="left">
Welcome to BDU</marquee></font>
</body>
</html>
C. formatting element (sub,sup)
<Doctyp html>
<html>
<head>
<title>formating</title>
</head>
<body>
<header style="background-color: lightblue;"><marquee
direction="left"><h2>we can format our content this way</marquee></h2></header>
<p>the formula of water</p>
<h2 align="center">H<sub>2</sub>O</h2>
<p>equation</p>
<h2>a<sup>2</sup>+b<sup>2</sup>=c<sup>2</sup></h2>
</body>

</html>

D.table list css


<! DOCTYP html>
<html>
<head>
<title>table list css and main</title>
<link rel="stylesheet"type="text/css" href="external.css">
</head>
<body>

<header>
<marquee direction="right"><h1>Welcome to My HTML Lab</h1></marquee>
</header>

<main>
<section>
<h2 class="section-title" style="background-color: lightgrey;">1.
Introduction</h2>
<p>This is a simple HTML page used to demonstrate basic elements of HTML.
We will show headings, paragraphs, links, images, lists, and tables in this practical.</p>
</section>

<section>
<h2 class="section-title">2. Basic HTML Elements</h2>
<p>This is a <strong>paragraph</strong> element. You can make text
<em>italic</em> or <u>underline</u> as needed.</p>
<p>Visit <a href="https://www.w3schools.com" target="_blank">W3Schools</a>
for more information on HTML.</p>
</section>

<section>
<h2 class="section-title">3. Images</h2>
<p>Here’s an example of an image:</p>
<img src="https://www.example.com/sample-image.jpg" alt="Sample Image"
width="300">
</section>

<section>
<h2 class="section-title">4. Unordered List</h2>
<ul>
<li>HTML Basics</li>
<li>CSS Styling</li>
<li>JavaScript Basics</li>
</ul>
</section>

<section>
<h2 class="section-title">5. Table Example</h2>
<table>
<tr>
<th>Name</th>
<th>Age</th>
<th>City</th>
</tr>
<tr>
<td>John Doe</td>
<td>25</td>
<td>New York</td>
</tr>
<tr>
<td>Jane Smith</td>
<td>30</td>
<td>London</td>
</tr>
<tr>
<td>Michael Johnson</td>
<td>35</td>
<td>Paris</td>
</tr>
</table>
</section>
</main>

</body>
</html>

Div and Span Example


<! DOCTYPE html>
<html>
<head>
<title> Div and Span Example </title>
</head>
<body>
<div id="menu" align="middle">
<a href="/index.html">HOME</a>|
<a href="/about/contact_us.html">CONTACT</a>|
<a href="/about/index.html">ABOUT</a>|
<a href="/about/dept_info.html">DEPARTEMENT</a>
</div>
<div id="content" align="right" bgcolor="green">
<h3>Content Articles</h3>
<P> Actual Content goes here......</p>
the above is the output of the div tag example<hr />
</div>
<div id="Content" align="left" bgcolor="red">
<a href="DEPARTEMENT.html">about departmentes</a>
<a href="sectiones.html">about defferwnt sactiones</a>
</div>
<P> here is the span example output<hr./></p>
<p>This is the example of <span style="color:green">span tag</span> and the <span
style="color:red"> div tag</span> along with CSS</p>
</body>
</html>

1. Inline CSS
Inline CSS is applied directly within an HTML element using the style attribute.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Inline CSS Example</title>
</head>
<body>
<h1 style="color: blue; text-align: center;">This is a Heading with Inline CSS</h1>
<p style="font-size: 20px; color: green;">This paragraph has inline styling.</p>
</body>
</html>

2. Internal CSS
Internal CSS is placed within the <style> tag inside the <head> section of the HTML document.
html
Copy code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Internal CSS Example</title>
<style>
body {
background-color: lightgray;
}
h1 {
color: darkblue;
text-align: center;
}
p{
font-size: 18px;
color: darkgreen;
}
</style>
</head>
<body>
<h1>This is a Heading with Internal CSS</h1>
<p>This paragraph has internal CSS styling.</p>
</body>
</html>

3. External CSS
External CSS is defined in a separate .css file, and that file is linked to the HTML document
using the <link> tag in the <head> section.
/* styles.css */
body {
background-color: #f4f4f4;
}
h1 {
color: purple;
text-align: center;
}
p{
font-size: 16px;
color: orange;
}
Link
<html>
<head>
<title>
</title>
<link rln=”stylesheet” type=”text/css”href=”style.css”>
</head>
<body>
</body>
</html>

HTML Forms: Explanation and Example


HTML forms are used to collect user input on a webpage, typically through text fields,
checkboxes, radio buttons, and more. The data entered in the form can then be sent to a server for
processing, such as saving it to a database or sending it via email.
Key Elements of an HTML Form:
1. <form> tag: This element defines the form. It can have various attributes, including:
o action: The URL to which the form data will be sent.
o method: The HTTP method (usually GET or POST) used to send form data.
2. <input> tag: This is the most common element used within forms to capture various
types of data, like text, passwords, and checkboxes.
3. <textarea> tag: Used for multi-line input, such as a message or comment.
4. <button> or <input type="submit">: Used to submit the form data.
5. <label> tag: Defines a label for an <input> element, improving accessibility and
usability.
Common Input Types:
 text: For single-line text input.
 password: For password fields (characters are hidden).
 checkbox: For checkboxes, allowing multiple options.
 radio: For selecting one option from a group of choices.
 submit: A button to submit the form.

Example of an HTML Form:


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML Form Example</title>
</head>
<body>

<h1>Contact Us</h1>

<!-- Form starts here -->


<form action="/submit_form" method="POST">
<label for="fname">First Name:</label>
<input type="text" id="fname" name="firstname" required><br><br>
<label for="lname">Last Name:</label>
<input type="text" id="lname" name="lastname" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>

<label for="message">Message:</label><br>
<textarea id="message" name="message" rows="4" cols="50"
required></textarea><br><br>

<label for="newsletter">Subscribe to Newsletter:</label>


<input type="checkbox" id="newsletter" name="newsletter"><br><br>

<button type="submit">Submit</button>
</form>

</body>
</html>
Explanation of the Code:
 <form> tag: The form uses POST as the method to submit the data to the server at the
URL /submit_form.
 <label> tag: Each input field has a corresponding label to help users understand what
information is required.
 <input type="text">: Two text input fields for the first and last names.
 <input type="email">: An input field for the email address that validates the email
format.
 <textarea>: A larger text area for the user to write a message.
 <input type="checkbox">: A checkbox for subscribing to a newsletter.
 <button>: A submit button to send the form data when clicked.
How It Works:
1. The user fills in their information in the form fields.
2. When the "Submit" button is clicked, the form data is sent to the server (in this case, to
/submit form using the POST method).
3. The server processes the data (e.g., storing it in a database, sending an email) and may
provide a response, such as a confirmation message or redirecting the user to another
page.
This basic form structure can be expanded with additional input types and functionality, such as
file uploads, date pickers, or more complex validation.
Form can be modified using css using html div or eatch elements as a target to css or simply by
othr html elemente like table

Example modified using css using html div


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Styled Form with CSS</title>
<style>
/* General body styling */
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}

/* Form container styling */


.form-container {
width: 100%;
max-width: 400px;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Header */
.form-container h1 {
text-align: center;
margin-bottom: 20px;
font-size: 24px;
color: #333;
}

/* Form group styling */


.form-group {
margin-bottom: 15px;
}

.form-group label {
display: block;
margin-bottom: 5px;
font-size: 14px;
color: #555;
}

.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 14px;
box-sizing: border-box;
}

.form-group textarea {
resize: none;
height: 80px;
}

/* Button styling */
.form-group button {
width: 100%;
padding: 10px;
background-color: #007bff;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}

.form-group button:hover {
background-color: #0056b3;
}
</style>
</head>
<body>
<div class="form-container">
<h1>Contact Us</h1>
<form action="#" method="post">
<!-- Name Field -->
<div class="form-group">
<label for="name">Full Name:</label>
<input type="text" id="name" name="name" placeholder="Enter your full name"
required>
</div>
<!-- Email Field -->
<div class="form-group">
<label for="email">Email Address:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"
required>
</div>
<!-- Subject Field -->
<div class="form-group">
<label for="subject">Subject:</label>
<input type="text" id="subject" name="subject" placeholder="Enter the subject"
required>
</div>
<!-- Message Field -->
<div class="form-group">
<label for="message">Message:</label>
<textarea id="message" name="message" placeholder="Write your message"
required></textarea>
</div>
<! -- Submit Button -->
<div class="form-group">
<button type="submit">Submit</button>
</div>
</form>
</div>
</body>
</html>
Explanation
 Responsive Design: The form is centered and scales well on different screen sizes.
 Modern Styling: Uses a clean and minimalistic CSS design with box shadows, rounded
corners, and a hover effect on the button.
 Semantic Structure: Labels and inputs are properly associated using for and id.
 Custom Layout with Divs: All elements are grouped and styled using div for layout control.

Example
using table to create well indented form
</head>
<body>
<form method="post" action="apply-now.php">
<input name="subject" type="hidden" value="Class" />
<fieldset style="width:300px"><legend>Personal Details</legend>
<table>
<tr>
<td><label for="fname">First Name</label></td>
<td><input type="text" name="fname" id="fname" /></td>
</tr>
<tr>
<td><label for="lname">Last Name</label></td>
<td><input type="text" name="lname" id="lname" /></td>
</tr>

<tr>
<td><label for="degree">Degree</label></td>
<td><select name="degree" id="degree">
<option value="BA">cs</option>
<option value="BS">SE</option>
<option value="MBA"
selected="selected">IT</option>
</select></td>
</tr>
<tr>
<td>Student ID</td>
<td><input type="text" name="s" /></td>
</tr>
<tr>
<td><label for="degree">Degree</label></td>
<td><select name="degree" id="degree">
<option value="BA">cs</option>
<option value="BS">SE</option>
<option value="MBA"
selected="selected">IT</option>
</select></td>
</tr>
<tr>
<td>Student ID</td>
<td><input type="text" name="s" /></td>
</tr>
<tr>
<td>Password</td>
<td><input type="Password" placeholder="Enter Password"
name="s" /></td>
</tr>
<tr>
<td>Gender:</td>
<td>
<input name="gender" type="radio" id="gm" value="m" />
<label for="gm">Male</label>
<input name="gender" type="radio" id="gf" value="f" />
<label for="gf">Female</label></td>
</tr>
<tr>
<label for="email">your email </label>
<input type="email" id="email">
</tr>
<td></td>
<td><button type="submit">send</button> <input type="reset" value="clear">
</td>
</tr>
</fieldset>
</form><br><br><br><br>

</body>
</html>

You might also like