Scribd
Upload
2 views128 pages

Lab 1 (HTML and CSS)

This document serves as a tutorial for CSE 3100 Web Programming, focusing on HTML and CSS. It covers the basics of HTML structure, elements, attributes, and various HTML components such as links, images, tables, lists, and forms. Additionally, it explains the differences between class and id attributes, as well as the usage of form elements for user input.

Uploaded by

siambasher0009
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
2 views128 pages

Lab 1 (HTML and CSS)

This document serves as a tutorial for CSE 3100 Web Programming, focusing on HTML and CSS. It covers the basics of HTML structure, elements, attributes, and various HTML components such as links, images, tables, lists, and forms. Additionally, it explains the differences between class and id attributes, as well as the usage of form elements for user input.

Uploaded by

siambasher0009
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 128

CSE 3100 : Web Programming

Lab 1 Tutorial (HTML & CSS)

Subah Nawar Kazi Saeed Alam


Lecturer, Assistant Professor,
Dept of CSE, KUET Dept of CSE, KUET
Email: [email protected] Email: [email protected]
HTML Introduction

• HTML is the standard markup language for creating Web pages.


• HTML stands for Hyper Text Markup Language.
• HTML describes the structure of a Web page.
• HTML consists of a series of elements.
• HTML elements tell the browser how to display the content

13-Jan-24 2
A Simple HTML Document
<!DOCTYPE html>
• The <!DOCTYPE html> declaration defines that this
<html> document is an HTML5 document
<head> • The <html> element is the root element of an HTML page
<title>Page Title</title> • The <head> element contains meta information about the
HTML page
</head>
• The <title> element specifies a title for the HTML page
<body> (which is shown in the browser's title bar or in the page's
tab)
<h1>My First Heading</h1> • The <body> element defines the document's body, and is a
container for all the visible contents, such as headings,
<p>My first paragraph.</p>
paragraphs, images, hyperlinks, tables, lists, etc.
• The <h1> element defines a large heading
</body> • The <p> element defines a paragraph
</html>
13-Jan-24 3
What is an HTML Element?
An HTML element is defined by a start tag, some content, and an end
tag:

The HTML element is everything from the start tag to the end tag:

13-Jan-24 4
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:

13-Jan-24 5
HTML Page Structure
• Below is a visualization of an HTML page structure:

The content inside the


<body> section (the
white area) will be
displayed in a browser.
The content inside the
<title> element will be
shown in the browser's
title bar or in the page's
tab.
13-Jan-24 6
HTML History

13-Jan-24 7
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>.

13-Jan-24 8
HTML is Not Case Sensitive
• HTML tags are not case sensitive: <P> means the same as <p>.

13-Jan-24 9
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.
• The <!DOCTYPE> declaration for HTML5 is:

13-Jan-24 10
HTML Headings
• HTML headings are defined with the <h1> to <h6> tags.
• <h1> defines the most important heading. <h6> defines the least
important heading:

13-Jan-24 11
HTML Text Formatting
• HTML contains several elements for defining text with a special
meaning.

13-Jan-24 12
HTML Paragraphs
• HTML paragraphs are defined with the <p> tag:

13-Jan-24 13
Empty HTML Elements
• HTML elements with no content are called empty elements.
• The <br> tag defines a line break, and is an empty element without a
closing tag:

13-Jan-24 14
HTML Links
• HTML links are defined with the <a> tag:
• The link's destination is specified in the href attribute.
• Attributes are used to provide additional information about HTML
elements.
• You will learn more about attributes later.

13-Jan-24 15
HTML Images
• HTML images are defined with the <img> tag.
• The source file (src), alternative text (alt), width, and height are
provided as attributes:

13-Jan-24 16
HTML Attributes
HTML attributes provide additional information about HTML elements.

• All HTML elements can have attributes

• Attributes are always specified in the start tag

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

13-Jan-24 17
The href Attribute

The <a> tag defines a hyperlink. The href attribute specifies the URL of
the page the link goes to:

• <a href="https://www.google.com">Visit Google</a>

13-Jan-24 18
The src Attribute

The <img> tag is used to embed an image in an HTML page.


The src attribute specifies the path to the image to be displayed:

• <img src="img_boy.jpg">

13-Jan-24 19
The width and height Attribute

• The <img> tag should also contain the width and height attributes,
which specifies the width and height of the image (in pixels):

• <img src="img_boy.jpg" width="500" height="600">

13-Jan-24 20
The alt Attribute

• The required alt attribute for the <img> tag specifies an alternate text
for an image, if the image for some reason cannot be displayed. This
can be due to slow connection, or an error in the src attribute, or if
the user uses a screen reader.

• <img src="img_boy.jpg" alt=”Boy with a jacket">

13-Jan-24 21
The style Attribute

• The style attribute is used to add styles to an element, such as color,


font, size, and more.

• <tagname style="property:value;">
• The property is a CSS property. The value is a CSS value.

• <p style="color:red;">This is a red paragraph.</p>

13-Jan-24 22
The title Attribute

• The title attribute defines some extra information about an element.


• The value of the title attribute will be displayed as a tooltip when you
mouse over the element:

• <p title="I'm a tooltip">This is a paragraph.</p>

13-Jan-24 23
HTML Tables
• HTML tables allow web developers to arrange data into rows and
columns.
• A table in HTML consists of table cells inside rows and columns

13-Jan-24 24
Table Cells
• Each table cell is defined by a <td> and a </td> tag.
• td stands for table data.
• Everything between <td> and </td> are the content of the table cell.

13-Jan-24 25
Table Rows
• Each table row starts with a <tr> and end with a </tr> tag.
• tr stands for table row.

13-Jan-24 26
Table Header
• Sometimes you want your cells to be headers, in those cases use
the <th> tag instead of the <td> tag.
• By default, the text in <th> elements are bold and centered, but you
can change that with CSS.

HW: Try Merging or Splitting Rows/Columns

13-Jan-24 27
HTML Lists
• HTML lists allow web developers to group a set of related items in
lists.

13-Jan-24 28
Unordered Lists
• The HTML <ul> tag defines an unordered (bulleted) list.
• An unordered list starts with the <ul> tag. Each list item starts with the <li> tag.
• The list items will be marked with bullets (small black circles) by default:

13-Jan-24 29
Unordered Lists

13-Jan-24 30
Ordered Lists
• The HTML <ol> tag defines an ordered list. An ordered list can be
numerical or alphabetical.
• An ordered list starts with the <ol> tag. Each list item starts with
the <li> tag.
• The list items will be marked with numbers by default:
• The type attribute of the <ol> tag, defines the type of the list item
marker:

13-Jan-24 31
Ordered Lists

13-Jan-24 32
Ordered Lists

13-Jan-24 33
Nested Lists
• Lists can be nested (list inside list):

13-Jan-24 34
HTML Block-level Elements
• A block-level element always starts on a new line, and the browsers
automatically add some space (a margin) before and after the
element.
• A block-level element always takes up the full width available
(stretches out to the left and right as far as it can).
• Two commonly used block elements are: <p> and <div>.
• The <p> element defines a paragraph in an HTML document.
• The <div> element defines a division or a section in an HTML
document.

13-Jan-24 35
HTML Block-level Elements

13-Jan-24 36
HTML Inline Elements

• An inline element does not start on a new line.

• An inline element only takes up as much width as necessary.

• This is a <span> element inside a paragraph.

13-Jan-24 37
HTML Inline Elements

13-Jan-24 38
The <div> Element

• The <div> element is often used as a container for other HTML


elements.

• The <div> element has no required attributes,


but style, class and id are common.

• When used together with CSS, the <div> element can be used to style
blocks of content:
13-Jan-24 39
The <div> Element

13-Jan-24 40
The <span> Element

• The <span> element is an inline container used to mark up a part of a


text, or a part of a document.

• The <span> element has no required attributes,


but style, class and id are common.

• When used together with CSS, the <span> element can be used to
style parts of the text:
13-Jan-24 41
The <span> Element

13-Jan-24 42
HTML Classes
• The HTML class attribute is used to specify a class for an HTML
element.
• Multiple HTML elements can share the same class.
• The class attribute is often used to point to a class name in a style
sheet. It can also be used by a JavaScript to access and manipulate
elements with the specific class name.
• The class name is case sensitive!
• The class attribute can be used on any HTML element.

13-Jan-24 43
HTML Class Syntax
• To create a class; write a period (.) character, followed by a class name. Then,
define the CSS properties within curly braces {}:

[explained later in CSS]

• In the following example we have three <div> elements with a class attribute with
the value of "city". All of the three <div> elements will be styled equally according
to the .city style definition in the head section:

13-Jan-24 44
HTML Class Syntax

13-Jan-24 45
HTML id Attribute
• The HTML id attribute is used to specify a unique id for an HTML
element.
• You cannot have more than one element with the same id in an HTML
document.
• The id attribute is used to point to a specific style declaration in a
style sheet. It is also used by JavaScript to access and manipulate the
element with the specific id.
• The id name is case sensitive!
• The id name must contain at least one character, cannot start with a
number, and must not contain whitespaces (spaces, tabs, etc.).
13-Jan-24 46
HTML id Syntax

• The syntax for id is: write a hash character (#), followed by an id


name. Then, define the CSS properties within curly braces {}.

• In the following example we have an <h1> element that points to the


id name "myHeader". This <h1> element will be styled according to
the #myHeader style definition in the head section:

13-Jan-24 47
HTML id Syntax

13-Jan-24 48
Difference Between Class and ID
• A class name can be used by multiple HTML elements, while an id
name must only be used by one HTML element within the page:

13-Jan-24 49
HTML Forms
• An HTML form is used to collect user input. The user input is most
often sent to a server for processing.
• The <form> element is a container for different types of input
elements, such as: text fields, checkboxes, radio buttons, submit
buttons, etc.

13-Jan-24 50
HTML Form Elements
• The HTML <form> element can contain one or more of the following
form elements:

13-Jan-24 51
The <input> Element
• The HTML <input> element is the most used form element.
• An <input> element can be displayed in many ways, depending on
the type attribute.

13-Jan-24 52
HTML Input Types
• Here are the different input types you can use in HTML:

13-Jan-24 53
Input Type Text
• <input type="text"> defines a single-line text input field:

13-Jan-24 54
Input Type Password
• <input type="password"> defines a password field:

13-Jan-24 55
Input Type Submit
• <input type="submit"> defines a button for submitting form data to
a form-handler.

13-Jan-24 56
Input Type Radio
• <input type="radio"> defines a radio button.

13-Jan-24 57
Input Type Checkbox
• <input type="checkbox"> defines a checkbox.

13-Jan-24 58
Input Type Button
• <input type="button"> defines a button:

13-Jan-24 59
The <label> Element
• The <label> element defines a label for several form elements.
• The <label> element is useful for screen-reader users, because the
screen-reader will read out loud the label when the user focus on the
input element.
• The <label> element also help users who have difficulty clicking on
very small regions (such as radio buttons or checkboxes) - because
when the user clicks the text within the <label> element, it toggles
the radio button/checkbox.
• The for attribute of the <label> tag should be equal to the id attribute
of the <input> element to bind them together.

13-Jan-24 60
The <select> Element
• The <select> element defines a drop-down list:

13-Jan-24 61
The <option> Element

• The <option> elements defines an option that can be selected.


• By default, the first item in the drop-down list is selected.
• To define a pre-selected option, add the selected attribute to the
option:

13-Jan-24 62
The <textarea> Element

• The <textarea> element defines a multi-line input field (a text area):


• The rows attribute specifies the visible number of lines in a text area.
• The cols attribute specifies the visible width of a text area.

13-Jan-24 63
The <button> Element
• The <button> element defines a clickable button:

13-Jan-24 64
The <fieldset> and <legend> Element
• The <fieldset> element is used to group related data in a form.
• The <legend> element defines a caption for the <fieldset> element.

13-Jan-24 65
The <output> Element
• The <output> element represents the result of a calculation (like one performed
by a script (here php (will be shown in later labs)).

13-Jan-24 66
HTML Form Attribute

• The Action Attribute

• The Target Attribute

• The Method Attribute

13-Jan-24 67
The Action Attribute

• The action attribute defines the action to be performed when the


form is submitted.
• Usually, the form data is sent to a file on the server when the user
clicks on the submit button.
• In the example below, the form data is sent to a file called
"action_page.php". This file contains a server-side script that handles
the form data:

13-Jan-24 68
The Action Attribute

13-Jan-24 69
The Target Attribute

• The target attribute specifies where to display the response that is


received after submitting the form.
• The target attribute can have one of the following values:

13-Jan-24 70
The Target Attribute

13-Jan-24 71
The Method Attribute

• The method attribute specifies the HTTP method to be used when


submitting the form data.

• The form-data can be sent as URL variables (with method="get") or as


HTTP post transaction (with method="post").

• The default HTTP method when submitting form data is GET.

13-Jan-24 72
The Method Attribute (GET)

13-Jan-24 73
The Method Attribute (POST)

13-Jan-24 74
Reference
• https://www.w3schools.com/

13-Jan-24 75
CSS Introduction
• CSS is the language we use to style a Web page.
• 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.

13-Jan-24 76
Why use CSS?
• CSS is used to define styles for your web pages, including the design, layout
and variations in display for different devices and screen sizes.
• HTML was NEVER intended to contain tags for formatting a web page!

• HTML was created to describe the content of a web page.

• CSS Saves a Lot of Work!


• The style definitions are normally saved in external .css files.

• With an external stylesheet file, you can change the look of an entire website by
changing just one file!
13-Jan-24 77
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.

13-Jan-24 78
CSS Example

13-Jan-24 79
Example Explained
• p is a selector in CSS (it points to the HTML element you want to style:
<p>).

• color is a property, and red is the property value.

• text-align is a property, and center is the property value.

13-Jan-24 80
CSS Selectors
CSS selectors are used to "find" (or select) the HTML elements you
want to style.
We can divide CSS selectors into five categories:
• Simple selectors (select elements based on name, id, class)
• Combinator selectors (select elements based on a specific relationship
between them)
• Pseudo-class selectors (select elements based on a certain state)
• Pseudo-elements selectors (select and style a part of an element)
• Attribute selectors (select elements based on an attribute or attribute
value)
13-Jan-24
*Click on each of them for examples 81
The CSS Element Selector
• The element selector selects HTML elements based on the element
name.
• Here, all <p> elements on the page will be center-aligned, with a red
text color:

13-Jan-24 82
The CSS id Selector
• The id selector uses the id attribute of an HTML element to select a
specific element.

• The id of an element is unique within a page, so the id selector is used


to select one unique element!

• To select an element with a specific id, write a hash (#) character,


followed by the id of the element.

13-Jan-24 83
The CSS id Selector
• The CSS rule below will be applied to the HTML element with
id="para1":

13-Jan-24 84
The CSS class Selector
• The class selector selects HTML
elements with a specific class
attribute.
• To select elements with a specific
class, write a period (.) character,
followed by the class name.
• In this example all HTML
elements with class="center" will
be red and center-aligned:

13-Jan-24 85
The CSS Universal Selector
• The universal selector (*) selects all HTML elements on the page.
• The CSS rule below will affect every HTML element on the page:

13-Jan-24 86
The CSS Grouping Selector
• The grouping selector selects all the HTML elements with the same style
definitions.
• Look at the following CSS code (the h1, h2, and p elements have the same
style definitions):

13-Jan-24 87
The CSS Grouping Selector
• It will be better to group the selectors, to minimize the code.
• To group selectors, separate each selector with a comma.

13-Jan-24 88
How to add CSS?

Three Ways to Insert CSS


• External CSS
• Internal CSS
• Inline CSS

13-Jan-24 89
How to add CSS?

Three Ways to Insert CSS


• External CSS
• Internal CSS
• Inline CSS

13-Jan-24 90
How to add CSS?

Three Ways to Insert CSS


• External CSS
• Internal CSS
• Inline CSS

13-Jan-24 91
CSS Box Model
• All HTML elements can be considered as boxes.
• In CSS, the term "box model" is used when talking about design and
layout.
• The CSS box model is essentially a box that wraps around every HTML
element. It consists of: margins, borders, padding, and the actual
content. The image below illustrates the box model:

13-Jan-24 92
CSS Box Model

13-Jan-24 93
CSS Borders
• The CSS border properties allow you to specify the style, width, and
color of an element's border.

13-Jan-24 94
Border Width
• The border-width property can have from one to four values (for the
top border, right border, bottom border, and the left border):

13-Jan-24 95
CSS Border – Shorthand Property

13-Jan-24 96
CSS Margins
• The CSS margin properties are used to create space around elements,
outside of any defined borders.
• With CSS, you have full control over the margins. There are properties
for setting the margin for each side of an element (top, right, bottom,
and left).

13-Jan-24 97
CSS Margin – Shorthand Property

13-Jan-24 98
CSS Padding
• The CSS padding properties are used to generate space around an
element's content, inside of any defined borders.
• With CSS, you have full control over the padding. There are properties
for setting the padding for each side of an element (top, right,
bottom, and left).

13-Jan-24 99
Padding – Shorthand Property

13-Jan-24 100
CSS Text : Text Color
• The color property is used
to set the color of the
text. The color is specified
by:
• a color name - like "red"
• a HEX value - like
"#ff0000"
• an RGB value - like
"rgb(255,0,0)"

13-Jan-24 101
CSS Text : Text Alignment
• The text-align property is used to
set the horizontal alignment of a
text.
• A text can be left or right aligned,
centered, or justified.
• The following example shows
center aligned, and left and right
aligned text (left alignment is
default if text direction is left-to-
right, and right alignment is default
if text direction is right-to-left):

13-Jan-24 102
CSS Fonts
• In CSS there are five generic font families:
• Serif fonts have a small stroke at the edges of each
letter. They create a sense of formality and elegance.
• Sans-serif fonts have clean lines (no small strokes
attached). They create a modern and minimalistic
look.
• Monospace fonts - here all the letters have the same
fixed width. They create a mechanical look.
• Cursive fonts imitate human handwriting.
• Fantasy fonts are decorative/playful fonts.

13-Jan-24 103
Google Fonts
• If you do not want to use any of the standard fonts in HTML, you can
use Google Fonts.
• Google Fonts are free to use, and have more than 1000 fonts to
choose from.

13-Jan-24 104
CSS Icons
• The simplest way to add an icon to your HTML page, is with an icon
library, such as Font Awesome.

• Add the name of the specified icon class to any inline HTML element
(like <i> or <span>).

• All the icons in the icon libraries below, are scalable vectors that can
be customized with CSS (size, color, shadow, etc.)

13-Jan-24 105
Font Awesome Icons
• To use the Font Awesome icons, go to fontawesome.com, sign in, and
get a code to add in the <head> section of your HTML page:

13-Jan-24 106
CSS Links
• Links can be styled with any CSS property (e.g. color, font-
family, background, etc.).
• In addition, links can be styled differently depending on
what state they are in.
• The four links states are:
• a:link - a normal, unvisited link
• a:visited - a link the user has visited
• a:hover - a link when the user mouses over it
• a:active - a link the moment it is clicked

13-Jan-24 107
CSS Link Example

13-Jan-24 108
CSS Lists
• In HTML, there are two main types of lists:
• unordered lists (<ul>) - the list items are marked with bullets
• ordered lists (<ol>) - the list items are marked with numbers or letters
• The CSS list properties allow you to:
• Set different list item markers for ordered lists
• Set different list item markers for unordered lists
• Set an image as the list item marker
• Add background colors to lists and list items

13-Jan-24 109
Different List Item Markers
• The list-style-
type property
specifies the type of
list item marker.
• The following example
shows some of the
available list item
markers:

13-Jan-24 110
CSS Tables
• The look of an HTML table can be greatly improved with CSS:

13-Jan-24 111
Table Borders
• To specify table borders in CSS, use the border property.
• The example below specifies a solid border for <table>, <th>, and
<td> elements:

13-Jan-24 112
Table Size
• The width and height of a table are defined by
the width and height properties.
• The example below sets the width of the table to 100%, and the
height of the <th> elements to 70px:

13-Jan-24 113
Table Alignment : Horizontal
• The text-align property sets the horizontal alignment (like left, right,
or center) of the content in <th> or <td>.
• By default, the content of <th> elements are center-aligned and the
content of <td> elements are left-aligned.
• To center-align the content of <td> elements as well, use text-align:
center:

13-Jan-24 114
Table Alignment : Vertical
• The vertical-align property sets the vertical alignment (like top,
bottom, or middle) of the content in <th> or <td>.
• By default, the vertical alignment of the content in a table is middle
(for both <th> and <td> elements).
• The following example sets the vertical text alignment to bottom for
<td> elements:

13-Jan-24 115
CSS Table Style : Table Padding
• To control the space between the border and the content in a table,
use the padding property on <td> and <th> elements:

13-Jan-24 116
CSS Table Style : Horizontal Dividers
• Add the border-bottom property to <th> and <td> for horizontal
dividers:

13-Jan-24 117
CSS Table Style : Hoverable Table
• Use the :hover selector on <tr> to highlight table rows on mouse over:

13-Jan-24 118
CSS Table Style : Stripped Table
• For zebra-striped tables, use the nth-child() selector and add
a background-color to all even (or odd) table rows:

13-Jan-24 119
CSS Layout - The z-index Property
• When elements are
positioned, they can overlap
other elements.
• The z-index property
specifies the stack order of
an element (which element
should be placed in front of,
or behind, the others).
• An element can have a
positive or negative stack
order:
13-Jan-24 120
CSS Layout – float
• The CSS float property specifies how an element should float.

Float Property:
• Left - The element floats to the left of its container.
• Right - The element floats to the right of its container.
• None - The element does not float (will be displayed just where it occurs in the text).
• Inherit - The element inherits the float value of its parent.

13-Jan-24 121
Example – float: right
• The following example specifies that an image should float to
the right in a text:

13-Jan-24 122
Example – float: left
• The following example specifies that an image should float to
the left in a text:

13-Jan-24 123
CSS Opacity
• The opacity property specifies the opacity/transparency of an
element.
• The opacity property can take a value from 0.0 - 1.0. The lower value,
the more transparent:

13-Jan-24 124
CSS Navigation Bars
• A navigation bar needs standard HTML as a base.
• In our examples we will build the navigation bar from a standard
HTML list.
• A navigation bar is basically a list of links, so using the <ul> and <li>
elements makes perfect sense:

13-Jan-24 125
CSS Dropdowns

13-Jan-24 126
Reference
• https://www.w3schools.com/

13-Jan-24 127
Thank You!!!

13-Jan-24 128

You might also like