Scribd
Upload
11 views

LAB 1-HTML and CSS Fundamentals

Uploaded by

taufeeq2.mustafa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
11 views

LAB 1-HTML and CSS Fundamentals

Uploaded by

taufeeq2.mustafa
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 8

LAB#01 HTML and CSS Fundamentals SSUET/QR/114

Lab # 1

HTML and CSS Fundamentals

OBJECTIVE

To get familiar with HTML, and CSS fundamentals.

THEORY

HTML (Hypertext markup language) is used to structure the document. It provides many
elements(called TAGS) for different purposes like creating the title of the document, adding
headings, creating paragraphs, positioning elements, adding content, etc.

Introduction to basic HTML elements.

1. What is HTML?

A series of tags that are integrated into a text document.


These look like:
• <code>formatted text</code>
• <code> begins the formatting tag.
• </code> ends the formatting tag.

These tags are then read by a Browser, which translates the tags into the formatting that
they represent.

2. What are Tags?

• HTML tags are used to mark-up HTML elements.


• HTML tags are surrounded by the two characters < and >.
• The surrounding characters are called angle brackets.
• HTML tags normally come in pairs like <b> and </b>.
• The first tag in a pair is the start tag; the second tag is the end tag.
• The text between the start and end tags is the element content.
• HTML tags are not case sensitive; <b> means the same as <B>

3. Structure Tags in HTML

• HTML Tag: <HTML> </HTML>


These tags begin and end an HTML document.

SWE-315L Web Engineering


LAB#01 HTML and CSS Fundamentals SSUET/QR/114

• HEAD Tag: <HEAD> </HEAD>


These tags are at the beginning of the document. Important information is stored in between these tags
including title, meta-data, styles, and programming scripts.

• TITLE Tag: <TITLE> </TITLE>


These tags are in-between the HEAD tags and contain the text that appears in the title of the Web page.

• BODY Tag: <BODY> </BODY>


These tags define the document's body. It contains all the contents of an HTML document, such as
headings, paragraphs, images, hyperlinks, tables, lists, etc.

4. Block Level tags


4.1 HTML Headings
• Headings are defined with the <h1> to <h6> tags.
• Where <h1> defines the largest headings and <h6> defines the smallest headings.

4.2 HTML Paragraphs


Paragraphs are defined with the <p> tag.
4.3 HTML Line Breaks

Use the <\br>tag if you want a line break (a new line) without starting a new paragraph.

4.4 Horizontal Rule

The <hr> element is used for horizontal rules that act as dividers between sections.

Sample Program
<!DOCTYPE html>
<html>
<head>
<title>Lab#1 HTML and CSS Fundamentals</title>
</head>
<body>
<div class="wrapper">
<div class="header">
<h1>Welcome to Sir Syed University of Engineering and
Technology</h1>
<h2>Best faculty available in the country</h2>
</div>
<div class="content">
<div class="content-block introduction">
SWE-315L Web Engineering
LAB#01 HTML and CSS Fundamentals SSUET/QR/114

<h3>Introduction</h3>
<p class="welcome">

Sir Syed University of Engineering and


Technology, founded in 1993, is one of the best universities operating in Pakistan
and is known for its outstanding contribution
towards polishing the students as to be ready for serving
in the IT industry and at the same time focus on the
new and emerging technology to be at the disposal
of the students acquiring the expertise to be used in
the IT sector.
</p>
</div>
<div class="content-block faculty">
<h3>Faculty</h3>
<table>
<thead>
<th>Name</th>
<th>Qualification</th>
<th>Year of Joining</th>
<th>Visiting Hours</th>
</thead>
<tbody>
<tr>
<td>Teacher1</td>
<td>phD</td>
<td>2015</td>
<td>08:00AM - 01:00PM</td>
</tr>
<tr>
<td>Teacher2</td>
<td>phD</td>
<td>2010</td>
<td>09:30AM - 02:30PM</td>
</tr>
<tr>
<td>Teacher3</td>
<td>Masters</td>
<td>2012</td>
<td>10:00AM - 03:00PM</td>
</tr>
</tbody>
</table>
</div>
<div class="content-block courses">
<h3>Courses</h3>

SWE-315L Web Engineering


LAB#01 HTML and CSS Fundamentals SSUET/QR/114

<ul>
<li><a href="JS.html">Javascript</a></li>
<li><a href="HTML.html">HTML</a></li>
<li><a href="CSS.html">CSS</a></li>
<li><a href="SW.html">Service
Workers</a></li>
</ul>
</div>
</div>
</div>
</body>
</html>

CSS (Cascading stylesheet) is used to beautify and style the document. The purpose of
CSS is to enhance the look and feel of the document so that it is neat, and easier to read. It does
so by adding some styling rules to the elements.

Using CSS, you can control the color of the text, the style of fonts, the spacing between
paragraphs, how columns are sized and laid out, what background images or colors are used,
layout designs, variations in display for different devices and screen sizes as well as a variety of
other effects.

CSS Syntax:

A CSS rule consists of a selector and a declaration block.

• The selector points to the HTML element you want to style.


• The declaration block contains one or more declarations separated by semicolons.
• Each declaration includes a CSS property name and a value, separated by a colon.
• Multiple CSS declarations are separated with semicolons, and declaration blocks are
surrounded by curly braces.

Sample program
SWE-315L Web Engineering
LAB#01 HTML and CSS Fundamentals SSUET/QR/114

*{
margin: 0;
border: 0;
padding: 0;
}

#uni-pic {
border: 1px black solid;
width: 100%;
height: 100%;
float: left;
}

.wrapper {
font-family: arial, sans-serif;
height: 600px;
width: 90%;
margin: 0 auto;
}

.content .faculty {
clear: left;
}

.content table {
color: blue;
}

p{
color: green;
text-align: center;
}

CSS can be added to HTML documents in 3 ways:


• Inline - by using the style attribute inside HTML elements.
• Internal - by using a <style> element in the <head> section.
• External - by using a <link> element to link to an external CSS file.

➢ Inline CSS

Inline styles look and operate much like CSS, with a few differences. Inline styles directly affect
the tag they are written in, without the use of selectors. An inline CSS uses the style attribute of
an HTML element.
Example:
SWE-315L Web Engineering
LAB#01 HTML and CSS Fundamentals SSUET/QR/114

• <h1 style= “color:blue”>Welcome to Sir Syed University of Engineering and


Technology</h1>

• <p style= “color:red”>


Sir Syed University of Engineering and Technology, founded in 1993, is one of the best
universities operating in Pakistan and is known for its outstanding contribution towards
polishing the students to be ready for serving in the IT industry and at the same time focus
on the new and emerging technology to be at the disposal of the students acquiring the
expertise to be used in the IT sector.
</p>

➢ Inpage/Internal CSS

• An internal stylesheet holds the CSS code for the webpage in the head section of the
particular file.
• This makes it easy to apply styles like classes or ids in order to reuse the code.
• The downside of using an internal stylesheet is that changes to the internal stylesheet only
affect the page the code is inserted into.

Example

<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1{color: blue;}
p {color: red;}
</style>
</head>
<body>

<h1>LAB#1 HTML & CSS</h1>


<p>In this lab you will study the fundamentals of HTML and CSS.</p>

</body>
</html>

➢ External CSS

SWE-315L Web Engineering


LAB#01 HTML and CSS Fundamentals SSUET/QR/114

• An external style sheet is used to define the style for many HTML pages.
• To use an external style sheet, add a link to it in the <head> section of each HTML page.
• You can name your stylesheet whatever you like and link to as many as you like.
• You can simply link to it in your head section and every edit you make to the "style.css"
sheet will be globally changed throughout the site.
Below is what the code looks like:
<link rel= “stylesheet” href =“style.css” />

Example
lab1.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>

<h1>Lab#1 HTM and CSS </h1>


<p>In lab #1, you will study the basics of HTML and CSS. The ways of using CSS in HTML document will
be elaborated as well. </p>

</body>
</html>

style.css
body {
background-color: green;
}
h1 {
color: blue;
}
p{
color: red;
}

LAB TASK

SWE-315L Web Engineering


LAB#01 HTML and CSS Fundamentals SSUET/QR/114

Task#1

Create a website that at minimum satisfies the following requirements:

• It should include different HTML elements e.g. headings, paragraph(s), lists, images,
text hyperlinks, image hyperlinks, bookmarks, image maps, tables, text formatting,
forms, etc.

• It should include appropriate and rich content such as short biography, education and
training courses, projects that you have a major role in it, summer training, skills, and
useful web links, contacts, etc.

• Be consistent in all styles and make it user-friendly with an appealing layout.

• You can use any style of CSS like Inline CSS, External CSS, or Inpage CSS.

Task#2:

Use HTML and CSS to create your own personal resume, using the following example as a
template.

• The text in the page title should be rendered in small caps.


• The page title and the text of section headers should be dark blue.
• The resume should have a title running across the top (with dark blue bars above and
below).
• The content area should be to the left and the sidebar (contact info) should be to the right.
• Use div and span elements with id and class attributes to specify the body of the HTML
document.
• All visual styling should be done separately in CSS rules.

SWE-315L Web Engineering

You might also like