Chapter 2 HTML Full
Uploaded by
eyibeltal3939Chapter 2 HTML Full
Uploaded by
eyibeltal3939CHAPTER 2: HTML
What is HTML? HTML Images
HTML Document structure HTML Tables
HTML Tags HTML Colors
HTML Attributes HTML Fonts
HTML Comments HTML Lists
HTML Frames
HTML Formatting
HTML Forms
HTML Links
2
HTML stands for Hypertext Markup Language.
It is the most widely used language to write Web Pages.
It refers to the way in which Web pages (HTML
documents) are linked together.
The link available on a webpage is called Hypertext.
It is a Markup Language (used to "mark-up" a text
document with tags).
An HTML file must have an „htm‟ or „html‟ file
extension.
So when you save an HTML file, you can use either the
.htm or the .html extension.
3
An HTML file can be created using a simple text editor
(Notepad and notepad++.)
Example: Creating a simple web page
Start Notepad.
Type in the following text
<!DOCTYPE html>
<html>
<head>
<title>This is document title</title>
</head>
<body>
<h1>This is a heading</h1>
<p>Document content goes here.....</p>
</body>
</html>
Save the file as "firstpage.html" on desktop.
Double click the saved file, the browser will display the page.
4
A typical HTML document will have the following
structure: Document declaration tag
<html>
<head>
Document header related tags
</head>
<body>
Document body related tags
</body>
</html>
The <!DOCTYPE> Declaration:
The <!DOCTYPE> declaration tag is used by the web
browser to understand the version of the HTML used in
the document and the Current version of HTML is 5.
5
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
(closing) tag.
For example, <html> has its closing tag</html> and
<body> tag has its closing tag </body> etc.
The text between the start and end tags is the element content
HTML tags are not case sensitive, <b> means the same as
<B>
6
The above example(firstpage.html) of HTML document uses the
following tags:
Tag Description
<!DOCTYPE...> This tag defines the document type and HTML version.
<html> This tag encloses the complete HTML document and
mainly comprises of document header which is
represented by <head>...</head> and document body
which is represented by <body>...</body> tags.
<head> This tag represents the document's header which can keep
other HTML tags like <title>, <link> etc.
<title> The <title> tag is used inside the <head> tag to mention
the document title.
<body> This tag represents the document's body which keeps
other HTML tags like <h1>, <div>, <p> etc.
<h1> This tag represents the heading.
<p> This tag represents a paragraph.
7
Heading Tags:
Any document starts with a heading.
HTML also has six levels of headings, which use the elements
<h1>, <h2>, <h3>, <h4>, <h5>, and <h6>.
While displaying any heading, browser adds one line before
and one line after that heading.
Example: <!DOCTYPE html>
<html>
<head> <title>Heading Example</title> </head>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
8
Paragraph Tag:
The <p> tag offers a way to structure your text into different
paragraphs.
Each paragraph of text should go in between an opening <p>
and a closing </p> tag.
Example:
<!DOCTYPE html>
<html>
<head> <title>Paragraph Example</title>
</head>
<body>
<p>Here is a first paragraph of text.</p>
<p>Here is a second paragraph of text.</p>
<p>Here is a third paragraph of text.</p>
</body>
</html>
9
Line Break Tag:
Whenever you use the <br /> element, anything
following it starts from the next line.
The <br /> tag has a space between the characters br and
the forward slash.
If you omit this space, older browsers will have trouble
rendering the line break.
Example:
<!DOCTYPE html>
<html>
<head> <title>Line Break Example</title> </head>
<body>
<p>Hello<br /> You delivered your assignment on time.<br />
Thanks<br />
student</p>
</body>
</html>
10
Centering Content:
You can use <center> tag to put any content in the center
of the page or any table cell.
Example:
<!DOCTYPE html>
<html>
<head> <title>Centring Content Example</title>
</head>
<body>
<p>This text is not in the center.</p>
<center>
<p>This text is in the center.</p>
</center>
</body>
</html>
11
Horizontal Lines:
Horizontal lines are used to visually break-up sections of a
document.
The <hr> tag creates a line from the current position in the
document to the right margin and breaks the line accordingly.
Example:
<!DOCTYPE html>
<html>
<head> <title>Horizontal Line Example</title>
</head>
<body>
<p>This is paragraph one and should be on top</p>
<hr />
<p>This is paragraph two and should be at
bottom</p>
</body>
</html>
12
Preserve Formatting:
We can make our text to follow the exact format of how it is
written in the HTML document using preformatted tag <pre>.
Any text between the opening <pre> tag and the closing </pre>
tag will preserve the formatting of the source document.
Example: <!DOCTYPE html>
<html>
<head><title>Preserve Formatting
Example</title> </head>
<body>
<pre>
function testFunction( strText ){
alert (strText)
}
</pre>
</body>
</html>
13
Nonbreaking Spaces:
Suppose you want to use the phrase " CS 4th year. "
Here, you would not want a browser to split the " CS, 4th " and
"year" across two lines:
In cases, where you do not want the client browser to break
text, you should use a nonbreaking space entity instead
of a normal space.
Example:
<!DOCTYPE html>
<html>
<head> <title>Nonbreaking Spaces Example</title>
</head>
<body>
<p>An example of this technique appears in the text
"CS 4th year."</p>
</body>
</html>
14
An attribute is used to define the characteristics of an HTML
element.
It is placed inside the element's opening tag.
All attributes are made up of two 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
set and always put within quotations.
name=“value”
For example: <p align="left">This is left aligned</p>
<p align="center">This is center aligned</p>
<p align="right">This is right aligned</p>
15
Core Attributes
The four core attributes that can be used on the majority of
HTML elements (although not all) are:
Id, Title, Class and Style Attributes.
The Id Attribute:
The id attribute of an HTML tag can be used to uniquely
identify any element within an HTML page.
Reasons to use Id attributes:
It is possible to identify the element and its content using its
unique identifier.
We can distinguish two elements with the same name on the
webpage using their unique Id.
Example: <p id="html">This para explains what is HTML</p>
<p id="css">This para explains what is Cascading Style Sheet</p>
16
Title Attribute:
The title attribute gives a suggested title for the element.
Example: <h3 title="Hello HTML!">Titled Heading Tag Example</h3>
The class Attribute:
The class attribute is used to associate an element with a style sheet, and
specifies the class of element.
The value of the attribute may also be a space-separated list of class
names.
For example: class="className1 className2 className3"
The style Attribute:
The style attribute allows you to specify Cascading Style Sheet (CSS)
rules within the element.
Example:<p style="font-family:arial; color:#FF0000;">Some text...</p>
17
Comment is a piece of code which is ignored by any web browser
Comments help you and others understand your code and
increases code readability.
HTML comments are placed in between <!-- ... --> tags.
So, any content placed with-in <!-- ... --> tags will be treated as
comment.
Example: <!DOCTYPE html>
<html>
<head> <!-- Document Header Starts -->
<title>This is document title</title>
</head> <!-- Document Header Ends -->
<body>
<p>Document content goes here.....</p>
</body>
</html>
18
Valid and Invalid comments:
Comments do not nest which means a comment cannot be put inside
another comment.
You must also make sure that there are no spaces in the start-of-
comment string.
Example for Invalid comments:
< !-- This is not a valid comment -->
Multiline Comments:
You can comment multiple lines by the special beginning tag <!--
and ending tag --> placed before the first line and end of the last line
Example: <!--
This is a multiline comment and it can
span through as many as lines you like.
-->
19
Bold Text: Anything that appears within <b>...</b>
element, is displayed in bold.
Example: <p>The following word uses a <b>bold</b>
typeface.</p>
Italic Text: Anything that appears within <i>...</i> element
is displayed in italicized.
Example: <p>The following word uses a
<i>italicized</i> typeface.</p>
Underlined Text: Anything that appears within <u>...</u>
element, is displayed with underline
Example: <p>The following word uses a
<u>underlined</u> typeface.</p>
20
Strike Text: Anything that appears within <strike>...</strike>
element is displayed with strikethrough, which is a thin line
through the text.
Example: <p>The following word uses a
<strike>strikethrough</strike> typeface.</p>
Monospaced Font : it is used to make all letters to have the
same width.
Any font that appears within <tt>...</tt> element is written in
monospaced font.
Example: <p>The following word uses a
<tt>monospaced</tt> typeface.</p>
Superscript Text: The content of a <sup>...</sup> element is
written in superscript.
Example: <p>The following word uses a
<sup>superscript</sup> typeface.</p>
21
Subscript Text: The content of a <sub>...</sub> element
is written in subscript.
Example:<p>The following word uses a <sub>
subscript</sub> typeface.</p>
Inserted Text : Anything that appears within
<ins>...</ins> element is displayed as inserted text.
Example: <p>I want to drink <del>cola</del>
<ins>wine</ins></p>
Larger Text: The content of the <big>...</big> element
is displayed one font size larger than the rest of the text
surrounding it.
Example: <p>The following word uses a <big>big</big>
typeface.</p>
22
Smaller Text: The content of the <small>...</small>
element is displayed one font size smaller than the rest of the
text surrounding it.
Example: <p>The following word uses a
<small>small</small> typeface.</p>
Grouping Content: The <div> and <span> elements allow
you to group together several elements to create sections or
subsections of a page.
Example: <div id="menu" align="middle">
<a href="/index.htm">HOME</a>|
<a href="/about/contact_us.htm">CONTACT</a>|
<a href="/about/index.htm">ABOUT</a>
</div>
<div id="content" align="left" bgcolor="white">
<h5>Content Articles</h5>
<p>Actual content goes here.....</p>
</div>
23
Creating links to documents(web pages):
HTML uses the <a> (anchor) tag to create a link to another
document.
An anchor can point to any resource on the Web: an HTML
page, an image, a sound file, a movie, etc.
Syntax: <a href="url">Text to be displayed</a>.
The <a> tag is used to create an anchor to link,
the href attribute is used to address the document to link to, and
the words between the open and close of the anchor tag will be
displayed as a hyperlink.
Example: <a href="http://faraday.ee.emu.edu.tr/eee111">Visit
EEE 111</a>
24
The Target Attribute:
With the target attribute, you can define where the linked document will be
opened.
The line below will open the document in a new browser window:
<a href="http://faraday.ee.emu.edu.tr/eee111" target="_blank">
Visit EEE 111</a>
The Anchor Tag and the Name Attribute:
The name attribute is used to create a named anchor.
When using named anchors we can create links that can jump directly into a
specific section on a page.
Example: <a href="#down">Bottom of the page</a>
To link directly to the "down" section, add a # sign and the name of the anchor
to the end of a URL, like this:
<a href="http://faraday.ee.emu.edu.tr/eee111#down">Jump
to down section</a>
25
Images are very important to beautify as well as to depict
many complex concepts in simple way on your web page.
Insert Image
You can insert any image in your web page by using
<img> tag.
Syntax: <img src="Image URL" ... attributes-list/>
Example:
<img src="test.png" alt="Test Image"/>
You can use PNG, JPEG or GIF image file.
make sure you specify correct image file name in src attribute.
Image name is always case sensitive.
The alt attribute is a mandatory attribute
26
Set Image Location:
When we insert images in our web page, we have to put the correct
path or directory of image location.
Example: let's keep HTML file test.htm in our home directory and create a
subdirectory images inside the home directory where we will keep our image
test.png.
<img src="images/test.png" alt="Test Image"/>
Set Image Width/Height :
You can set image width and height based on your requirement
using width and height attributes (it can be in terms of pixels or percentages)
Example: <img src="test.png" alt="Test Image"
width="150" height="100"/>
27
Set Image Border:
By default, image will have a border around it, you can
specify border thickness in terms of pixels using border
attribute.
A thickness of 0 means, no border around the picture.
Example: <img src="test.png" alt="Test Image"
border="3"/>
Set Image Alignment:
By default, image will align at the left side of the page, but
you can use align attribute to set it in the center or right.
Example: <img src="test.png" alt="Test Image"
border="3" align="right"/>
28
The HTML tables are used to arrange data like text, images,
links, other tables, etc. into rows and columns of cells.
The HTML tables are created using the <table> tag in which
the <tr> tag is used to create table rows and <td> tag is used to
create data cells.
Example:
<!DOCTYPE html>
<html>
<head> <title>HTML Tables</title>
</head>
<body>
<table border="1">
<tr> <td>Row 1, Column 1</td> <td>Row 1, Column 2</td> </tr>
<tr> <td>Row 2, Column 1</td> <td>Row 2, Column 2</td> </tr>
</table>
</body>
</html>
29
Table Heading:
Table heading can be defined using <th> tag.
Example:
<table border="1">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Ramesh Raman</td> <td>5000</td> </tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td>
</tr>
</table>
30
Cellpadding and Cellspacing Attributes:
The cellspacing attribute defines the width of the border
cellpadding represents the distance between cell borders and
the content within a cell.
Example:
<table border="1" cellpadding="5"
cellspacing="5">
<tr> <th>Name</th> <th>Salary</th> </tr>
<tr> <td>Ramesh Raman</td> <td>5000</td> </tr>
<tr> <td>Shabbir Hussein</td> <td>7000</td>
</tr>
</table>
31
Colspan and Rowspan Attributes :
colspan: is used to to merge two or more columns into a
single column.
rowspan: it is used to merge two or more rows.
Example:
<table border="1">
<tr> <th>Column 1</th> <th>Column 2</th>
<th>Column 3</th> </tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1
Cell 2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell
3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
32
Tables Backgrounds:
You can set table background using one of the following two
ways:
bgcolor attribute - You can set background color for whole table or just
for one cell.
bordercolor attribute-You can set border color.
Example:
<table border="1" bordercolor="green" bgcolor="yellow">
<tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th>
</tr>
<tr><td rowspan="2">Row 1 Cell 1</td><td>Row 1 Cell
2</td><td>Row 1 Cell 3</td></tr>
<tr><td>Row 2 Cell 2</td><td>Row 2 Cell 3</td></tr>
<tr><td colspan="3">Row 3 Cell 1</td></tr>
</table>
33
Table Height and Width:
You can set a table width and height using width and height
attributes.
You can specify table width or height in terms of pixels or in terms
of percentage of available screen area.
Example:
<table border="1" width="400" height="150">
<tr> <td>Row 1, Column 1</td> <td>Row 1,
Column 2</td> </tr>
<tr> <td>Row 2, Column 1</td> <td>Row 2,
Column 2</td> </tr>
</table>
34
Colors are very important to give a good look and feel to your
website.
You can specify colors on page level using <body> tag or you
can set colors for individual tags using bgcolor attribute.
The <body> tag has following attributes which can be used to
set different colors:
bgcolor - sets a color for the background of the page.
text - sets a color for the body text.
alink - sets a color for active links or selected links.
link - sets a color for linked text.
vlink - sets a color for visited links - that is, for linked text that you
have already clicked on.
35
HTML Color Coding Methods:
There are three different methods to set colors in your web
page:
Color names - You can specify color names directly like
green, blue or red
Example: <body text="blue" bgcolor="green">
Hex codes -A six-digit code representing the amount of
red(RR), green(GG), and blue(BB).
Each hexadecimal code will be preceded by a pound or
hash sign #.
Example: <body text="#0000FF"
bgcolor="#00FF00">
36
Color decimal or percentage values:
This value is specified using the rgb() property.
This property takes three values, one each for red, green,
and blue.
The value can be an integer between 0 and 255 or a
percentage.
Example:
<body text="rgb(0,0,255)" bgcolor="rgb(0,255,0)">
37
You can use a <basefont> tag to set all of your text to the
same size, face, and color.
You can set content font size using size attribute
You can set font face using face attribute .
You can set any font color you like using color attribute
Example:
<font size="1">Font size="1"</font><br />
<font face="Times New Roman" size="5">Times New
Roman</font><br />
<font color="red">this text is red</font>
38
<ul> - An unordered list.
An unordered list is a collection of related items that have no
special order or sequence.
Example:
<ul>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ul>
<ol> - An ordered list.
This will use different schemes of numbers to list your items.
Example:
<ol>
<li>Beetroot</li>
<li>Ginger</li>
<li>Potato</li>
<li>Radish</li>
</ol>
39
<dl> - A definition list.
This arranges your items in the same way as they are arranged in
a dictionary.
Example:
<dl>
<dt><b>HTML</b></dt>
<dd>This stands for Hyper Text Markup
Language</dd>
<dt><b>HTTP</b></dt>
<dd>This stands for Hyper Text Transfer
Protocol</dd>
</dl>
40
HTML frames are used to divide your browser window into
multiple sections.
A collection of frames in the browser window is known as
a frameset.
Problems when we use frames:
Size of computer screen(screen resolution) may not match
with frame size
Browser may not support frame technology
Some smaller devices cannot cope with frames
41
Creating Frames:
To use frames on a page we use <frameset> tag instead of
<body> tag.
The rows attribute of <frameset> tag defines horizontal frames
and cols attribute defines vertical frames.
Example:
<frameset cols="25%,50%,25%">
<frame name="left" src="/html/top_frame.htm" />
<frame name="center" src="/html/main_frame.htm" />
<frame name="right" src="/html/bottom_frame.htm" />
<noframes>
<body>
Your browser does not support frames.
</body>
</noframes>
</frameset>
42
The <frameset> Tag Attributes
Attribute Description
cols Specifies columns in the frameset and the size of each column.
rows it is used to specify the rows in the frameset.
border specifies the width of the border of each frame in pixels.
frameborder specifies a three-dimensional border should be displayed between frames..
framespacing specifies the amount of space between frames in a frameset
The <frame> Tag Attributes
Attribute Description
src This attribute is used to give the file name that should be loaded in the frame.
name This attribute allows you to give a name to a frame.
frameborder specifies whether or not the borders of that frame are shown
marginwidth specify the width of the space between the left and right of the frame's borders and the frame's
content.
marginheight specify the height of the space between the top and bottom of the frame's borders and its
contents.
noresize prevents a user from being able to resize the frame.
scrolling controls the appearance of the scrollbars that appear on the frame.
longdesc provide a link to another page containing a long description of the contents of the frame.
43
HTML Forms are used to collect some data
A form will take input from the site visitor and then will post it to a
back-end application.
The HTML <form> tag is used to create an HTML form
Syntax:
<form action="Script URL" method="GET|POST">
form elements like input, textarea etc.
</form>
Form Attributes:
o action: Backend script ready to process your passed data.
o method: Method to be used to upload data.
o target: Specify the target window where the result of the script will be displayed
o enctype: specify how the browser encodes the data before it sends it to the server.
44
HTML Form controls:There are different types of form controls that you
can use to collect data.
Text Input Controls:
There are three types of text input used on forms:
Single-line text input controls:- This control is used for items that
require only one line of user input.
Example:
<form >
First name: <input type="text" name="first_name"/>
<br>
Last name: <input type="text" name="last_name"/>
</form>
NB: Text input controls have the following attributes:-Type, name, value,
size and maxlength
45
Password Input controls: a single-line text input that masks the
character as soon as a user enters it.
Example:
<form >
User ID :<input type="text" name="user_id"/>
<br>
Password: <input type="password" name="password"/>
</form>
Multiple-Line Text Input Controls:-is used for longer
sentences(details) and is created using HTML <textarea> tag.
Example:
<form>
Description: <br />
<textarea rows="5" cols="50“ name="description">
Enter description here...
</textarea>
</form>
46
Checkbox Control:-
It is used when more than one option is required to be selected.
Example
<form>
<input type="checkbox" name="maths" value="on"> Maths
<input type="checkbox" name="physics" value="on"> physics
</form>
NB: Checkbox Controls have the following attributes: type, name, value, checked.
Radio Button Control:-it is used when out of many options, just one
option is required to be selected.
Example
<form>
<input type="radio" name="subject" value="maths"> Maths
<input type="radio" name="subject" value="physics"> Physics
</form>
NB: Checkbox Controls have the following attributes: type, name, value, checked
47
Select Box Control:
A select box, also called drop down box which provides option
to list down various options in the form of drop down list, from
where a user can select one or more options
Example:
<form>
<select name="dropdown">
<option value="Maths" selected>Maths</option>
<option value="Physics">Physics</option>
</select>
</form>
Attributes of <select> tag are: name, size and multiple
Attributes of <option> tag are : value, selected and label
48
File Upload Box: it is used to allow a user to upload a file by
setting its input type attribute to file.
Example:
form>
<input type="file" name="fileupload" accept="image/*"/>
</form>
NB: the attributes for file upload box are:
Name: Used to give a name to the control
Accept: Specifies the types of files that the server accepts.
49
Button Controls: it is used to create clickable buttons by
setting its type attribute to button.
The type attribute can take the following values: submit,
reset, button, image
Example:
<form>
<input type="submit" name="submit" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" name="ok" value="OK" />
<input type="image" name="imagebutton"
src="/html/images/logo.png" />
</form>
50
Grouping Form Data with <fieldset> tag:
The <fieldset> element is used to group related data in a form.
The <legend> element defines a caption for the <fieldset>
element.
Example:
<form action="/action_page.php">
<fieldset>
<legend>Personal information:</legend>
First name:<br><input type="text"
name="firstname" value="IP"> <br>
Last name:<br><input type="text" name="lastname"
value="course">
<br><br>
<input type="submit" value="Submit">
</fieldset>
</form>
51
Input Type Color:
The <input type="color"> is used for input fields that should
contain a color.
Example
<form> Select your favorite color: <input
type="color" name="favcolor"> </form>
Input Type Date:
The <input type="date"> is used for input fields that should
contain a date.
Example:
<form>
Birthday:<input type="date" name="bday">
</form>
52
Input Type Datetime-local :
The <input type="datetime-local"> specifies a date and time input
field, with no time zone.
Example:
<form> Birthday (date and time): <input type="datetime-
local" name="bdaytime"> </form>
Input Type Email:
The <input type="email"> is used for input fields that should
contain an e-mail address.
Example:
<form> E-mail:<input type="email" name="email"> </form>
Input Type Month:
The <input type="month"> allows the user to select a month and
year.
Example: <form> Birthday (month and year): <input type="month"
name="bdaymonth"> </form>
53
Input Type Number:
The <input type="number"> defines a numeric input field.
Example :
<form>
Quantity (between 1 and 5): <input
type="number" name="quantity" min="1"
max="5"> </form>
Input Type Range:
The <input type="range"> defines a control for entering a number
whose exact value is not important (like a slider control).
Default range is 0 to 100
Example :
<form> <input type="range" name="points"
min="0" max="10"> </form>
54
Input Type Search:
The <input type="search"> is used for search.
Example:
<form> Search Google:<input
type="search"
name="googlesearch"></form>
Input Type tel:
The <input type="tel"> is used for input fields that should contain
a telephone number.
The tel type is currently supported only in Safari 8 browser.
Example:
<form> Telephone: <input type="tel"
name="usrtel"> </form>
55
Input Type Time:
The <input type="time"> allows the user to select a time (no time
zone).
Example:
<form> Select a time:<input type="time"
name="usr_time"> </form>
Input Type Url
The <input type="url"> is used for input fields that should contain a
URL address.
Example:
<form> Add your homepage: <input type="url"
name="homepage"> </form>
Input Type Week
The <input type="week"> allows the user to select a week and year.
Example:
<form> Select a week: <input type="week"
name="week_year"> </form>
56
Some of HTML input Attributes:
Attribute Description
disabled Specifies that an input field should be disabled
max Specifies the maximum value for an input field
maxlength Specifies the maximum number of character for an input field
min Specifies the minimum value for an input field
pattern Specifies a regular expression to check the input value against
readonly Specifies that an input field is read only (cannot be changed)
required Specifies that an input field is required (must be filled out)
size Specifies the width (in characters) of an input field
step Specifies the legal number intervals for an input field
Value Specifies the default value for an input field
placeholder Specifies a hint that describes the expected value of an input
field
57
Questions?
58
