Scribd
Carica
6 visualizzazioni

HTML CSS

Html css notes

Caricato da

darklord451234
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
6 visualizzazioni

HTML CSS

Html css notes

Caricato da

darklord451234
Copyright
© © All Rights Reserved
Formati disponibili
Scarica in formato PDF, TXT o leggi online su Scribd
Sei sulla pagina 1/ 104

CS603 – Web

Engineering
PREPARED BY: DR. REEMA PATEL

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 1
HTML
• HTML (Hypertext Markup Language) is a plain-text, human-readable language that is used
for representing content on the Web

• HTML specifies how to structure the data


◦ but not (necessarily) how to display it

• The browser chooses how to display the content

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 2
HTML and HTTP
• When a browser makes a request for a document (e.g. first.html), the HTML will be returned in the
body of the response and displayed in the browser

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 3
Introduction
• Document contain elements
• Each element generally includes a start tag, some content, and an end tag

• HTML structure is hierarchical


• Elements may be nested, i.e. content of an element can be another element

<p> This is a paragraph </p>


Start Tag End Tag
Content

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 4
Important HTML Tags - <!DOCTYPE>
• NOT actually a tag, rather a declaration to the web browser of what version of html the
following document uses

• For HTML 5, doctype declaration is as follows:


◦ <!DOCTYPE html>

• This declaration must be the very first line of an html document

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 5
Important HTML Tags: <html>
• After the declaration, HTML pages must start with the <html> tag

• Often referred to as the root element because it can be considered the root of the tree-
like structure of elements in an HTML page

<!DOCTYPE html>

<html>

</html>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 6
Important HTML Tags: <head>
• Contains information about the document, not content
• Common elements included within <head> </head>:
◦ <title> - contains page title, displayed in browser’s title bar
◦ <link> - used to add CSS style-sheets and icon pages
◦ <meta> - used to specify metadata like page description and keywords
◦ <script> - used to add JavaScript code to the page

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 7
Important HTML Tags: <body>
• Appears directly beneath the head element
• Contains all web page content (images, text, etc)
• Most web pages have one single body element

<!DOCTYPE html>
<html>
<head> …. </head>

<body>
Hello!
</body>
</html>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 8
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>My First Web Page</title>
<meta name="Description" content="Learning about
HTML">
<meta name="keywords" content="html, web
development">
<link rel="stylesheet" type="text/css" href="/style.css">
<script src="code.js" type="text/javascript"></script>
</head>
<body>
Hello!
</body>
</html>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 9
Important HTML Tags: <p>
• Appears anywhere within the body to represent a paragraph of text expressing a single
thought
• Usually displayed with a vertical space before and after paragraph

<!DOCTYPE html>
<html>
<head>… </head>
<body>
<p>This is a paragraph within the p tag. The paragraph should be
surrounded with vertical white space before and after paragraph</p>
</body>
</html>

2/14/2024 10
DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT
HTML Content
• The HTML specifies the structure but not how the content will be displayed
• It is up to the browser to decide how to display the content

<!DOCTYPE html>
<html>
Out This is some text Some more text Some more
<body>
put: text
<p>This is some text

Some more text


Some more text
</p>
</body>
</html>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 11
Important HTML Tags: <h#>
• Referred to as section heading tags
• HTML supports 6 heading tags
• h1 - <h1> - used for most important titles (ex: title of entire webpage)
• h2 - <h2> - used for next important subheader
• h3 - <h3> .. <h6> - used for least important subheaders
• h4 - Magnitude of importance affects font size that will be displayed
• h5 - Can be used to divide content into readable subsections
• h6 - Browser determines font and size depending on header magnitude

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 12
Important HTML Tags: <h#>
<h1>This is Main Header</h1>
<p> This is the paragraph supporting main header</p>

<h2>This is the supporting header to main header </h2>


<p>paragraph supporting to subheader</p>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 13
Important HTML Tags: <b> and <i>
• <b> - indicates that the text should be bold
• <i> - indicated that the text should be italicized

• Similar tags are <strong> and <em>, respectively, which are meant to demonstrate that
the text is “important”

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 14
Important HTML Tags: <hr> and <br>
• Both tags are used to mark a break in the content
• <hr> represent more serious shift in content,
◦ Separate content by inserting a visible line between preceding and subsequent content

• <br> - represent a single line break, inserts a blank line

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 15
Important HTML Tags: <div>
• Provides additional structure to web page
• Block-level container for organized content
• Often used for:
◦ Page headers and footers
◦ Menu or navigation bar
◦ Photo galleries
◦ Ads or outside media

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 16
Important HTML Tags: <div>
• When used together with CSS, the <div> element can be used to style blocks of content:
• <div style="background-color:black;color:white;padding:20px;">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United
Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</div>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 17
Important HTML Tags: <span>
• Inline container for organized content
• Similar to <div> tag but different in following ways:
◦ Block-levels elements (<div>) are designed to contain larger chunks of content designed to stand
alone as a unit
◦ Always start with a new line

◦ Inline elements <span> designed to contain smaller pieces of content,


◦ usually within a larger block of content
◦ Does not start with a new line

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 18
Important HTML Tags: <!--comments-->
• Text in the HTML that will not be rendered in the browser
• Often used for:
◦ Explaining the HTML or leaving notes for other programmers
◦ Temporarily removing HTML content

• Syntax:
◦ <!--comments-->

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 19
HTML symbols and special characters
HTML Entity Appearance
&nbsp; Non breaking space; allows for extra white spaces
between words
&lt; <
&gt; >
&amp; &
&copy; ©
&reg; ®

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 20
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 21
HTML Formatting and
Attributes

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 22
HTML Attributes
• Purpose of an attribute: provide additional information about a particular HTML element
• Always included within element’s start tag
• Usually comes in name/value pair:
◦ name=“value”
◦ Name – specifies the property of the element for which additional information is being provided
◦ Value – this is selected from set of possible values for given property

<p name=“value”>This is a paragraph with defined attribute


</p>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 23
Core Attributes: title
• Provides a suggested title for an element
• When user hovers over the element, a “tooltip” will appear at the cursor with suggested
title

<h1 title=‘Welcome!’> Title attribute </h1>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 24
Core Attributes: style
• Used to change the visual presentation of an element
• Value string will be include multiple key:value pairs (separated by semicolons)

<h1> This is a heading</h1>

<h1 title='Welcome!' style="color: red; text-transform: capitalize;


background-color: black; font-family: cursive;"> This is a heading
</h1>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 25
Other properties of “style” attribute
Property Description Some Value
background-color The color that appears red, black, yellow, #012345
behind the text
font-family Font used to render the text Verdana, courier, cursive
font-size Size of text; possibly relative 10px, 12pt, 200%
to default size
text-align Horizontal text alignment Left, right, center

Hello <span style="color: white; background-color: green; font-size:


50pt; font-family: fantasy;" >World!</span>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 26
<body>
<p style="color: green"> 1 is an odd number </p>
<p style="color: white; background-color: green;">2 is an even
number</p>
<p style="color: green"> 3 is an odd number </p>
<p style="color: white; background-color: green;">4 is an even
number</p>
<p style="color: green"> 5 is an odd number </p>
<p style="color: white; background-color: green;">6 is an even
number</p>
</body>c

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 27
Core Attributes: id and class
• Used to uniquely identify elements within an HTML document

• id:
◦ Provide ability to refer to specific element
◦ id must be unique
◦ Example: header, footer

• class:
◦ Provide ability to refer subgroups of elements within HTML document
◦ Does not have to be unique
◦ Example: comment, warning

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 28
<html>
<head>
<style type="text/css">
.odd{
color: blue;
}
.even{
color: white;
background-color: blue;
}
</style>
</head>
<body>
<p class="odd"> 1 is an odd number </p>
<p class="even">2 is an even number</p>
<p class="odd"> 3 is an odd number </p>
<p class="even">4 is an even number</p>
<p class="odd"> 5 is an odd number </p>
<p class="even">6 is an even number</p>
</body>
</html>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 29
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 30
CSS Syntax

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 31
What is CSS?
• Cascading Style Sheet (CSS) is a formatting language used to describe the appearance of
content in HTML file
• CSS has standardized specification defined by the World Wide Web Consortium (W3C)

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 32
Why CSS?
• HTML (“The Content”)
◦ What information does the page contain?
◦ What is the headings, body, etc.
◦ How is the information structure?

• CSS (“The Presentation”)


◦ What does the page look like?
◦ What color, formatting, text size, etc. should the various parts have?

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 33
How does CSS work?
1. The web browser receives the HTML page from the server via HTTP
2. HTML page can include CSS either in same file or with link to separate file
◦ If it’s separate file, the web browser will request that file separated via HTTP
3. When all HTML and CSS files are available, the browser will render the page

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 34
How does CSS work?
4. For each element in the HTML page, the web browser will display the content and use
the CSS to style it
5. Ideally, exactly one set of CSS style sheets will apply to any given element
6. If there are conflicting styles defined, complex rules determine which gets applied

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 35
How do we use CSS?
• Inline – use tag’s “style” attribute to specify appearance

• Internal – create <style> elements in HTML and assigns to different tags and classes, etc.

• External – specify styling in a separate CSS file

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 36
Inline CSS as “style” attribute
• Include CSS within the element tag element as a “style” attribute
<h1 title='Welcome!' style="color: red; text-transform: capitalize;
background-color: black; font-family: cursive;"> This is a heading
</h1>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 37
Inline CSS as “style” attribute
• Advantages
◦ Easy to use
◦ Good for quick, one-off situations

• Disadvantages
◦ Mixing content and presentation – this should be avoided
◦ Hard to manage for large, complex pages

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 38
Internal CSS using <style> tag
• Include CSS within the head of the HTML using <style> elements
<head>
<style type="text/css"> CSS Selector - h1
h1 {
color: red;
text-transform: capitalize;
background-color: black;
font-family: cursive;

} property:value
</style>
</head>
<body>
<h1> This is a heading </h1>
</body>
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 39
Internal CSS using <style> tag
• Advantages:
◦ Separates content and presentation
◦ Easy to use
◦ If you want to apply the same style to all tags of a certain type (say <p>) , it is easier to do it with internal
CSS than inline CSS
◦ Good if you only have a limited amount of CSS in the page

• Disadvantages
◦ Hard to manage for large and complex pages
◦ Cannot use across multiple pages

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 40
External CSS
• Include CSS in a separate file and link the file in the head of the HTML page
Example.html
<head>
<link rel="stylesheet" type="text/css" href="sample.css">
</head>
<body>
<h1> This is a heading </h1>
</body>
h1 {
color: white;
text-transform:
capitalize;
Sample.css background-color:
green;
font-family: cursive;
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 41
External CSS
• Advantages
◦ Separates content and presentation
◦ Can include many different CSS pages with multiple <link> tags

• Disadvantages
◦ Lots of different files to manage (which might be overkill for smaller pages)

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 42
CSS selectors
Type of selector What’s in the CSS What does this What does the
file? selector apply to? HTML file contain?

Element selector h1 {color:red;} All <h1> elements <h1> … </h1>

Class selector .odd {…} All elements in <div class=“odd”>


class “odd” ….
</div>

Id selector #section1{…} Unique element <p id=“section1”>


with id “section1” …
</p>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 43
Class Selector

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 44
Id and Class Selector

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 45
Box Model (Block)

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 46
Margin Collapse

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 47
Margin Collapse

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 48
Box Model (Inline)

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 49
Box Model (Inline)

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 50
Relative Position

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 51
Absolute Position

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 52
Fixed Position

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 53
HTML Lists and Forms

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 54
Lists in HTML : <ol> and <ul>
• Lists can be either ordered or unordered
Ordered list: <ol> Unordered list: <ul>
1. January • Charles
2. February • Fred
3. March • Edward
4. April • Allen
<ol> <ul>
<li>January</li> <li>Charles</li>
<li>February</li> <li>Fred</li>
<li>March</li> <li>Edward</li>
<li>April</li> <li>Allen</li>
</ol> </ul>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 55
Unordered Lists - style
• Use CSS style properties to determine the style of bullet point used within the lists as
follows (inline CSS example)
<ul style="list-style: circle;" >
<li>Charles</li>
<li>Fred</li>
<li>Edward</li>
<li>Allen</li>
</ul> List-style-type : value Bullet view
disc Disc is the default value
circle This is the circle view
square This is the square view
none No bullets, just list items

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 56
Ordered Lists – style
• Use the type attribute of <ol> tag to select numbering of each item
<ol type=‘A’> Type View
<li>January</li> type = “1” 1. This is the default setting
<li>February</li> 2. For ordered lists
<li>March</li> type = “A” A. Items ordered with
<li>April</li> B. Uppercase letters
</ol> type = “a” a. Items ordered with
b. Lowercase letters
type = “I” I. Items ordered with
II. Uppercase Roman Numerals
type = “i” i. Items ordered with
ii. Lowercase Roman Numerals

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 57
Nested Lists
• List items can themselves include lists as well to produce a nested list effect

<ol type=‘A’>
<li>January</li>
<li>February</li>
<li>March</li>
<ul style="list-style: square;">
<li>One</li>
<li>Two</li>
</ul>
<li>April</li>
</ol>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 58
HTML Links, Images,
and Tables

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 59
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 60
Images in HTML : <img>
• <img> tag includes an image in HTML page
• Required attributes:
◦ src-specifies the link to the image to be included. Can be a relative or absolute path
◦ alt – text to include as image description in case image does not load, or additional information is
needed
• Other attributes:
◦ height, width – specified in pixels (e.g. 50px)
◦ title – tooltip text displayed when mouse hovers over image

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 61
Absolute Path vs. Relative Path
• <img src=“path/to/image”>
• Absolute Path – URL that can be accessed if provided to browser on its own
<img src="https://mtnweekly.com/wp-content/uploads/2014/06/Mountain-
Climbing-734x489.jpg" height="500px" width="700px" alt="Mountain Climbing
Image">

• Relative Path – path to a file included within local file system, relative to the HTML page
<img src="mountain_climb.jpg" height="500px" width="700px"
alt="Mountain Climbing Image">

<img src=“photos/mountain_climb.jpg" height="500px" width="700px"


alt="Mountain Climbing Image">
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 62
Links in HTML: <a>
• <a> tag used to include a link to another page/resource on Web
• Associated attributes:
◦ href (required) – specifies the location to which to navigate if link is clicked
◦ target – specifies where the link should be opened when clicked
◦ target=“_self” will open web page in same tab of browser - default
◦ targe=“_blank” will open web page in new tab of browser

• Similar to images, value of href attribute can either be a relative or absolute link
• Text of element will be displayed as clickable link

<a href="https://en.wikipedia.org/wiki/Main_Page" target="_blank">Wikipedia</a>


2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 63
Creating Bookmarks using Relative URLs
• Define an id attribute for the element for which you would like to create a bookmark

<h3 id="social_network">Social Networking Websites</h3>

• Create a link to serve as a bookmark


◦ From within same page:

<a href="#social_network">Jump to Social Network Section</a>

◦ From a different page:

<a href=“index.html#social_network">Jump to Social Network


Section</a>
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 64
Tables
<table border="1">
<tr>
<th>First Name</th>
<th>Last Name</th> •<table> - tag is used to define and
<th>Email Address</th> contain a table
</tr>
•<tr> - tag defines a table row
<tr>
<td>John</td> •<th> - tag defines table header (first
<td>Doe</td> row, titles)
<td>[email protected]</td> •<td> - tag defines table cell (“table
</tr> data”)
<tr>
<td>Jane</td>
<td>Doe</td>
<td>[email protected]</td>
</tr>
</table>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 65
Table CSS Properties
Property Description Sample Values
border Draws border around table, rows, or cell 1px solid black
Default is no border

padding Space between cell content and its 15px


borders
text-align Horizontal text alignment center, left, right
border-spacing Space between cells 2px

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 66
Merging Cells
• Use rowspan attribute to span multiple rows (merge vertically)

<table border="1px solid black">


<tr>
<td>Row A</td>
<td rowspan="2" width="100px">this td elements spans two rows</td>
</tr>
<tr>
<td>Row B</td>
</tr>
</table>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 67
Merging Cells
• Use colspan attribute to span multiple columns (merge horizontally)
<table border="1px solid black">
<tr>
<td>Column A</td>
<td>Column B</td>
</tr>
<tr>
<td colspan="2">this td elements spans two columns</td>
</tr>
</table>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 68
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 69
Forms
• Forms are used to retrieve information from user of a web page
• Enclose all form fields within <form> element

<form>
Full Name: <input type="text"
name="username">
<br>
Email Address: <input type="email"
name="email">
<br>
<input type="submit" value="Submit">
</form>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 70
Form: <input type=“value”>
• Use the type attribute of the input tag to provide more information on what type of data
to expect from the user
• Different types often allow different input formats that make data entry more convenient
for the user

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 71
<form>
Full Name: <input type="text" name="username"> <br>
Email Address: <input type="email" name="email"> <br>
Phone Number: <input type="tel" name="phoneNum"> <br>
Date of Birth: <input type="date" name="dob"> <br>
<input type="submit" value="Submit">
</form>
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 72
Form – Slider/Range input

<form>
Graduation Year: <input type="range" name="gradYr" min="1950"
max="2030"> <br>
<input type="submit" value="Submit">
</form>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 73
Form – Radio Button Input

<form>
Gender:
<input type="radio" name="genderOption" value="male"> Male
<input type="radio" name="genderOption" value="female"> Female
<input type="radio" name="genderOption" value="undisclosed">
Undisclosed
</form>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 74
Form – Checkbox Input

<form>
County Visited:
<input type="checkbox" name="raceOption" value="India"> India
<input type="checkbox" name="raceOption" value="Argentina"> Argentina
<input type="checkbox" name="raceOption" value="Belgium"> Belgium
<input type="checkbox" name="raceOption" value="China"> China
<input type="checkbox" name="raceOption" value="Denmark"> Denmark
<input type="checkbox" name="raceOption" value="other"> Other
</form>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 75
Form – color chooser

<form>
Favorite Color: <input type="color" name="favcolor">
</form>
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 76
Form – File Upload

<form>
File Upload: <input type="file" name="fileupload">
</form>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 77
Form – Buttons Input

<form>
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</form>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 78
Forms – Input Types
Type Form Field
button Clickable button
checkbox Checkbox options
color Color picker
date Date picker (Year, month, day)
email Email address field
file File select/browse for file uploading
hidden Hidden input field
image Allow image to serve as submit button
month Month and year control
time Time control

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 79
Forms – Input Types
Type Form Field
number Number format entry
password Masked characters for password entry
radio Radio button options
range Slider control to enter number as a range
reset Reset all form values to default values (button)
search Text field for searching
submit Submit button
tel Phone number input
text Plaintext field
url Field for URL

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 80
Responsive Web Design
with Bootstrap

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 81
Responsive Web Design

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 82
Responsive Web Design
• Responsive Web Design (RWD): approach to designing web pages in a way that takes all possible
devices into account

• Approach must be visually flexible to adapt to all potential screen sizes

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 83
Responsive Web Design

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 84
Responsive Web Design

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 85
Responsive Web Design

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 86
Responsive Web Design

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 87
Achieving RWD - Challenges
• How should we go about achieving RWD?

• Providing CSS for each platform is challenging as new devices become available

• Manual CSS implementation would take quite a bit of time and effort.

• <meta name="viewport" content="width=device-width, initial-scale=1">

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 88
Solution – automatic RWD
• Bootstrap – open source front-end development framework produced and maintained by
Twitter that aids in producing clean, responsive web pages and applications
◦ “mobile-first” CSS framework
◦ CSS with predefined tags for developers’ use
◦ Include UI components, layouts, and other tools
◦ developing responsive, mobile first projects on the web.

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 89
Bootstrap Grid System
• Grid System: Bootstrap’s solution to making the most of the space provided on a given
platform
◦ Includes between 1 and 12 columns depending on scale of device viewport
◦ Utilizes predefined classes to maximize web page layout options

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 90
Using Bootstrap
1. Begin with Basic HTML page

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
</head>
<body>
Content goes here…
</body>
</html>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 91
Using Bootstrap
1. Include Bootstrap in to your project
1. Include the following within the <head> section
2. See https://getbootstrap.com/docs/3.3/getting-started/ for most recent versions

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet”
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->


<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 92
Using Bootstrap
• Additional details: utilize “mobile-first” framework (Add within <head> section above
other tags)
<meta name="viewport" content="width=device-width, initial-
scale=1">

• Add content in the <body>


◦ Create a <div> using the “container” class

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 93
Bootstrap
• Once you have linked to a bootstrap.min.css file, you get a whole bunch of classes set up
for you, for free!

1. The “container” class is essential. Everything needs to be inside of it.


2. The “row” class is almost as important. Use it to specify groupings of columns.
3. Finally, there are a number of classes named with the pattern col-?-?

<div class="col-md-12">Some Content here.</div>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 94
Spans are indicated in units of 12ths

In bootstrap, the column spans always need to add up to 12

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 95
4 Sizes of Bootstrap Grid

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 96
Using Bootstrap Grid System
• Content is organized into rows: “horizontal group of columns”
• If no set width is specified, Bootstrap will automatically size all columns in a row so that
they are equally spaced
• Column classes allow user to indicate width of a column represented as columns out of 12
that should be used

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 97
<div class="container">
<div class="row">
<div class="col-md-3">This is the first piece of RWD content </div>
<div class="col-md-5">This is the second piece of RWD content
</div>
<div class="col-md-4">This is the third piece of RWD content </div>
</div>
</div>

<table width="100%" border="1">


<tr align="center">
<td>This is the first table cell</td>
<td>This is the second table cell</td>
<td>This is the third table cell</td>
</tr>
</table>

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 98
2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 99
Bootstrap Grid Example

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 100
Bootstrap Grid Example

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 101
Bootstrap Grid Example

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 102
Bootstrap Grid Example

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 103
Bootstrap Grid Example

2/14/2024 DR. REEMA PATEL, WEB ENGINEERING, B.TECH - III, 2022, IIIT SURAT 104

Potrebbero piacerti anche