Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
53 views

Lab-01-Manual (Introduction To Basic HTML)

This lab manual introduces students to basic HTML and CSS concepts. It covers HTML tags, page structure, headings, paragraphs, lists, tables, forms and attributes. It also discusses CSS introduction, types including inline, internal and external styling, selectors and properties like color, margin and padding. The objective is for students to understand basic HTML content, create static web pages and enhance pages using CSS.

Uploaded by

ShaMIiii JuTT
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
53 views

Lab-01-Manual (Introduction To Basic HTML)

This lab manual introduces students to basic HTML and CSS concepts. It covers HTML tags, page structure, headings, paragraphs, lists, tables, forms and attributes. It also discusses CSS introduction, types including inline, internal and external styling, selectors and properties like color, margin and padding. The objective is for students to understand basic HTML content, create static web pages and enhance pages using CSS.

Uploaded by

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

GIFT School of Engineering

and Applied Sciences

Spring 2022

CS-244 Database Systems-Lab

Lab-1 Manual
Introduction to Basic HTML

v1
6-4-2022
Lab-1 Manual

Introduction to Lab:
This lab introduces students the purpose of the using front-end in Database Systems. The lab
discusses the basic HTML. The fundamental concepts of CSS are also introduced.
The main topics in this lab includes:
1. HTML Introduction
2. HTML Tags
3. HTML page structure
4. The <!DOCTYPE> Declaration
5. HTML Documents
6. HTML Headings
7. HTML Paragraphs
8. The HTML <pre> element
9. HTML Attributes
10. The href Attribute
11. HTML Lists
12. HTML Tables
13. HTML forms
14. CSS Introduction
15. CSS Types
16. CSS Inline Styling
17. CSS Internal Styling
18. CSS Selector
19. Class as a selector
20. Margin and Padding
21. CSS External Styling
22. Post Lab Assignment

Objective of this Lab:


At the end of this lab student should be able to:
Understand the basic HTML content
Understand how to create a static web page
Understand how to enhance a web page using CSS

Page 1 of 17
Lab-1 Manual

1. HTML Introduction
HTML
Html is the heart of web pages.
• HTML stands for Hyper Text Markup Language
• HTML elements are the building blocks of HTML pages
• HTML elements are represented by tags

A Simple HTML Document

2. HTML Tags

HTML tags are element names surrounded by angle brackets:

<tagname>content goes here...</tagname>


• HTML tags normally come in pairs like <p> and </p>
• The first tag in a pair is the start tag, the second tag is the end tag
• The end tag is written like the start tag, but with a forward slash inserted before the
tag name

Page 2 of 17
Lab-1 Manual

Web Browsers

The purpose of a web browser (Chrome, Edge, Firefox, Safari) is to read HTML documents and
display them.

The browser does not display the HTML tags, but uses them to determine how to display the
document:

Page 3 of 17
Lab-1 Manual

3. HTML Page Structure

Below is a visualization of an HTML page structure:

4. The <!DOCTYPE> Declaration

The <!DOCTYPE> declaration represents the document type, and helps browsers to display
web pages correctly.

It must only appear once, at the top of the page (before any HTML tags).

The <!DOCTYPE> declaration is not case sensitive.

5. HTML Documents

All HTML documents must start with a document type declaration: <!DOCTYPE html>.

The HTML document itself begins with <html> and ends with </html>.

The visible part of the HTML document is between <body> and </body>

6. HTML Headings
HTML contains 6 headings h1, h2, h3, h4, h5, h6
h1 is biggest heading

h6 is smallest heading

Page 4 of 17
Lab-1 Manual

<h1> defines the most important heading. <h6> defines the least important heading:

7. HTML Paragraphs

HTML paragraphs are defined with the <p> tag:

Page 5 of 17
Lab-1 Manual

8. The HTML <pre> Element

The HTML <pre> element defines preformatted text.

The text inside a <pre> element is displayed in a fixed-width font (usually Courier), and it
preserves both spaces and line breaks:

9. HTML Attributes
• All HTML elements can have attributes
• Attributes provide additional information about an element

Page 6 of 17
Lab-1 Manual

• Attributes are always specified in the start tag


• Attributes usually come in name/value pairs like: name="value"

10.The href Attribute

HTML links are defined with the <a> tag. The link address is specified in the href attribute:

Page 7 of 17
Lab-1 Manual

11.HTML Tables
Defining an HTML Table

An HTML table is defined with the <table> tag.

Each table row is defined with the <tr> tag. A table header is defined with the <th> tag. By
default, table headings are bold and centered. A table data/cell is defined with the <td> tag.

Page 8 of 17
Lab-1 Manual

12.HTML Forms
Form is used to collect user information.
We create HTML form by the following tag:
<form>
.
.
</form>
Inside of a form there are form elements like Name, Email, Date of birth, Password, Gender,
Buttons.
To take above mentioned user information we use form elements inside form tag.

Form Input Elements


<input type=”text”> One line text input field
<input type=”password”> Password field
<input type=”submit”> Submit button
<input type=”reset”> Reset button
<input type=”email”> Input field
<input type=”radio”> Radio button
Select only one option
<input type=”checkbox”> Checkbox field
Select multiple options
<input type=”button”> Button
<input type=”color”> Color field
<input type=”date”> Date field
<input type=”file”> File input field
<input type=”month”> Input field for month and year
<input type=”number”> Number input
<input type=”range”> Slider for selecting range
<input type=”tel”> Telephone number
<input type=”url”> Input URL

Apart from Input element, there are other form elements as well.
Each form element has a tag, name, value.
name is used to identify form elements. If there is no name for a form element then the data
of that element is not passed to server.
The user input is value of form element. We can also define initial value using attribute
value.

Task:
Let’s create a simple form for sign up to a website for Employees.
Sign up form
This form will contain following information:
• Username
• Email
• Password

Page 9 of 17
Lab-1 Manual

• Confirm Password
• Phone Number
• Gender
• Favorite Color
• Hire Date
• Timestamp
• Upload your Certificates
• Checkbox
• Submit
• Reset

Page 10 of 17
Lab-1 Manual

There are other attributes for


form elements also:

autocomplete Autocomplete for inputs is on or off


autofocus Autofocus on input when page loads
min and max Min and max value for input
multiple Multiple selection is enabled
placeholder Placeholder value can be specified for
input
required Input is required to submit form
step Specifies number intervals
size Size of input field (in characters)
read-only Input value cannot be changed
disabled Input field is disabled
checked Default value for radio
list Points to data list elements containing
predefined options to select.

13.CSS Introduction

Page 11 of 17
Lab-1 Manual

What is CSS?
• CSS stands for Cascading Style Sheets
• CSS describes how HTML elements are to be displayed on screen, paper, or
in other media
• CSS saves a lot of work. It can control the layout of multiple web pages all at
once
• External stylesheets are stored in CSS files
14.CSS Types
We can apply CSS styles in three different ways:
1. Inline Styling:
We write the CSS properties inside HTML tags by using style attribute.
2. Internal Styling:
The CSS properties for HTML elements are defined at the top of page by
creating separate tag of style <style></style>
3. External Styling:
The CSS properties for HTML elements are defined in separate file with
extension .css
15.CSS Selectors:
In CSS, selectors are used to select elements for styling.
You can have following selectors:

HTML elements e.g. p selects all paragraph elements in page.

id selects an element with the specific id.


class selects group of elements having same
class.
Note: We can assign multiple classes to an HTML element but id is unique. An HTML
element will have only one unique id.
In above example we used HTML element as selector.

ID as Selector:
we can define id for HTML elements using id attribute.
1. Create a new Paragraph and define its id:
<p id=”p2”> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia
deserunt mollit anim id est laborum. </p>
2. In CSS to call id we use selector as:

#idname
3. Define style for Paragraph as:

Page 12 of 17
Lab-1 Manual

#p2{
text-align: left;
font-weight: bold;
border: dotted;
background-color: slateblue;
font-family: tahoma;
}

16.Class as Selector:
We define class for HTML elements using class attribute.
Many HTML elements can have one class.
Defining CSS styling for a class applies style to all elements having that class.
1. Create a new Paragraph and give a class name as:

<p class=”text”>This is Paragraph 3</p>


2. Create a heading and give it same class name:

<h1 class=”text”>Welcome to my Company</h1>


3. Define CSS style inside style tag for the class:

Style for a class is defined as:


.classname
<style>
.text{
text-align: center;
background-color: yellow;
font-weight: bold;

Page 13 of 17
Lab-1 Manual

}</style>

17.Margin and Padding


Margin is space created around HTML element, outside of defined border.
Padding is space created around Element’s content inside the defined border.

18.CSS External Styling


In external Styling, you define CSS styles in a separate file with .css extension and link that
file to .html file.
1. Create a New Webpage with .html extension “form.html”

2. Create a Sign Up form as created above:


3. Save the html Webpage.

4. Create a new file with .css extension “style.css”

5. Write style for HTML elements in “form.html” as:

Page 14 of 17
Lab-1 Manual

Page 15 of 17
Lab-1 Manual

Page 16 of 17
Lab-1 Manual

22. Post Lab Assignment


1. Create a new html file named as
checkout.html
2. Create the following checkout form in that
html file
3. Now create a separate CSS and style this
checkout form using all the attributes
discussed above under the heading of CSS.
4. Submit the Checkout.html and style.css
files.

The End

Page 17 of 17

You might also like