lkarch/lkarch.org
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
lkarch.org/tools/mathisfun/www.mathsisfun.com/geometry/area.html
Lucas Kent e39465ad2f Changes to be committed: 
new file:   Files/flashplayer_32_sa.exe
	new file:   favicon.ico
	new file:   globe.gif
	new file:   imgs/download.png
	new file:   imgs/zuck.jpg
	new file:   index.html
	new file:   other.ico
	new file:   script.js
	new file:   site.webmanifest
	new file:   sitemap.html
	new file:   styles/backround.css
	new file:   styles/border.css
	new file:   styles/fonts/Titillium_Web/OFL.txt
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Black.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Bold.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-BoldItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-ExtraLight.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-ExtraLightItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Italic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Light.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-LightItalic.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-Regular.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-SemiBold.ttf
	new file:   styles/fonts/Titillium_Web/TitilliumWeb-SemiBoldItalic.ttf
	new file:   styles/fonts/webfontkit-20221027-163353/generator_config.txt
	new file:   styles/fonts/webfontkit-20221027-163353/specimen_files/grid_12-825-55-15.css
	new file:   styles/fonts/webfontkit-20221027-163353/specimen_files/specimen_stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-163353/stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-demo.html
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff
	new file:   styles/fonts/webfontkit-20221027-163353/titilliumweb-extralight-webfont.woff2
	new file:   styles/fonts/webfontkit-20221027-165950/generator_config.txt
	new file:   styles/fonts/webfontkit-20221027-165950/specimen_files/grid_12-825-55-15.css
	new file:   styles/fonts/webfontkit-20221027-165950/specimen_files/specimen_stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-165950/stylesheet.css
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-demo.html
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff
	new file:   styles/fonts/webfontkit-20221027-165950/titilliumweb-bold-webfont.woff2
	new file:   styles/style.css
	new file:   tools/2048/.gitignore
	new file:   tools/2048/.jshintrc
	new file:   tools/2048/CONTRIBUTING.md
	new file:   tools/2048/LICENSE.txt
	new file:   tools/2048/README.md
	new file:   tools/2048/Rakefile
	new file:   tools/2048/favicon.ico
	new file:   tools/2048/index.html
	new file:   tools/2048/js/animframe_polyfill.js
	new file:   tools/2048/js/application.js
	new file:   tools/2048/js/bind_polyfill.js
	new file:   tools/2048/js/classlist_polyfill.js
	new file:   tools/2048/js/game_manager.js
	new file:   tools/2048/js/grid.js
	new file:   tools/2048/js/html_actuator.js
	new file:   tools/2048/js/keyboard_input_manager.js
	new file:   tools/2048/js/local_storage_manager.js
	new file:   tools/2048/js/tile.js
    new file:   tools/2048/meta/apple-touch-icon.png
	new file:   tools/webretro/cores/neocd_libretro.js
	new file:   tools/webretro/cores/neocd_libretro.wasm
	new file:   tools/webretro/cores/nestopia_libretro.js
	new file:   tools/webretro/cores/nestopia_libretro.wasm
	new file:   tools/webretro/cores/o2em_libretro.js
	new file:   tools/webretro/cores/o2em_libretro.wasm
	new file:   tools/webretro/cores/opera_libretro.js
	new file:   tools/webretro/cores/opera_libretro.wasm
2022-11-02 08:40:01 -04:00

193 lines
10 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html lang="en"><!-- #BeginTemplate "../Templates/Main.dwt" --><!-- DW6 -->
<!-- Mirrored from www.mathsisfun.com/geometry/area.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 00:30:24 GMT -->
<head>
<!-- #BeginEditable "doctitle" -->
<title>What is Area?</title>
<script language="JavaScript" type="text/javascript">reSpell=[["meters","metres"]];</script>
<meta name="Description" content="Math explained in easy language, plus puzzles, games, quizzes, worksheets and a forum. For K-12 kids, teachers and parents." />
<!-- #EndEditable -->
<meta name="keywords" content="math, maths, mathematics, school, homework, education">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="HandheldFriendly" content="true">
<meta http-equiv="pics-label" content='(PICS-1.1 "http://www.classify.org/safesurf/" L gen true for "http://www.mathsisfun.com" r (SS~~000 1))'>
<link rel="stylesheet" type="text/css" href="../style3.css" />
<script src="../main3.js" type="text/javascript"></script>
</head>
<body id="bodybg">
<div class="bg">
<div id="stt"></div>
<div id="hdr"></div>
<div id="logo"><a href="../index.html"><img src="../images/style/logo.svg" alt="Math is Fun" /></a></div>
<div id="gtran"><script type="text/javascript">document.write(getTrans());</script></div>
<div id="gplus"><script type="text/javascript">document.write(getGPlus());</script></div>
<div id="adTopOuter" class="centerfull noprint">
<div id="adTop">
<script type="text/javascript">document.write(getAdTop());</script>
</div>
</div>
<div id="adHide">
<div id="showAds1"><a href="javascript:showAds()">Show Ads</a></div>
<div id="hideAds1"><a href="javascript:hideAds()">Hide Ads</a><br>
<a href="../about-ads.html">About Ads</a></div>
</div>
<div id="menuWide" class="menu">
<script type="text/javascript">document.write(getMenu(0));</script>
</div>
<div id="linkto">
<div id="linktort"><script type="text/javascript">document.write(getLinks());</script></div>
</div>
<div id="search" role="search"><script type="text/javascript">document.write(getSearch());</script></div>
<div id="menuSlim" class="menu">
<script type="text/javascript">document.write(getMenu(1));</script>
</div>
<div id="menuTiny" class="menu">
<script type="text/javascript">document.write(getMenu(2));</script>
</div>
<div id="extra"></div>
</div>
<div id="content" role="main"><!-- #BeginEditable "Body" -->
<h1 align="center">What is Area?</h1>
<p align="center" class="larger"><i>Area is the size of a surface!</i></p>
<div class="example">
<h3>Example:</h3>
<p>These shapes all have the same area of 9:</p>
<p align="center"><img src="images/area-same.svg" alt="same area of 9" /></p>
</div>
<p style="float:left; margin: 0 10px 5px 0;"><img src="images/area-paint.gif" width="171" height="117" alt="area paint" /></p>
<p>&nbsp;</p>
<p>It helps to imagine <b>how much paint</b> would cover the shape. </p>
<div style="clear:both"></div>
<h2>Area of Simple Shapes</h2>
<p>There are special formulas for certain shapes:</p>
<div class="example">
<h3>Example: What is the area of this rectangle?</h3>
<p align="center"><img src="images/area-rectangle.gif" alt="Area Count" width="170" height="116" /></p>
<p>The formula is:</p>
<p align="center"><span class="larger">Area = w &times; h</span><br />
w = width<br />
h = height</p>
<p>The width is 5, and the height is 3, so we know <b>w = 5</b> and <b>h = 3</b>:</p>
<p align="center" class="larger">Area = 5 &times; 3 = <b>15</b></p>
</div>
<p>Learn more at <a href="../area.html">Area of Plane Shapes</a>.</p>
<h2>Area by Counting Squares</h2>
<p>We can also put the shape on a grid and count the number of squares: </p>
<p align="center"><img src="images/area-count-a.gif" alt="Area Count" width="214" height="161" /><br />
<span class="larger">The rectangle has an area of <b>15</b></span></p>
<p align="center">Example: When each square is <b>1 meter</b> on a side, then the area is <b>15 m<sup>2</sup></b> (15 square meters)</p>
<h2>Square Meter vs Meter Square</h2>
<p>The basic unit of area in the metric system is the <b>square meter</b>, which is a square that has 1 meter on each side:</p>
<p class="center"><img src="../measure/images/square-m.svg" alt="1 Square Meter" /><br />
<span class="larger"> 1 square meter</span></p>
<p>Be careful to say &quot;square meters&quot; not &quot;meters squared&quot;:</p>
<p class="center"><img src="../measure/images/square-m-vs-m-square.svg" alt="3 Square Meters vs 3 meters squared" /></p>
<p>There are also &quot;square mm&quot;, &quot;square cm&quot; etc, learn more at <a href="../measure/metric-area.html">Metric Area</a>.</p>
<p class="center"><img src="../measure/images/square-cm.jpg" width="200" height="120" alt="square cm" /></p>
<h2>Approximate Area by Counting Squares</h2>
<p>Sometimes the squares don't match the shape exactly, but we can get an &quot;approximate&quot; answer. </p>
<h4>One way is:</h4>
<ul>
<li><b>more</b> than half a square counts as <b>1</b></li>
<li><b>less</b> than half a square counts as <b>0</b></li>
</ul>
<p>Like this:</p>
<p align="center"><img src="images/area-count-b.gif" alt="Area Count" width="205" height="167" /><span class="larger"><br />
This pentagon has an area of <b>approximately 17</b></span></p>
<h4>&nbsp;</h4>
<h4>Or we can count one square when the <b>areas seem to add up</b>. </h4>
<p>Example: Here the area marked &quot;<b>4</b>&quot; seems equal to about 1 whole square (also for &quot;<b>8</b>&quot;):</p>
<p align="center"><img src="images/area-count-c.gif" alt="Area Count" width="175" height="146" /><span class="larger"><br />
This circle has an area of <b>approximately 14</b></span></p>
<h4>&nbsp;</h4>
<h4>But using a formula (when possible) is best:</h4>
<div class="example">
<h3>Example: The circle has a radius of 2.1 meters:</h3>
<p align="center"><img src="images/area-circle.gif" width="123" height="121" alt="area circle 2.1 radius" /></p>
<p>The formula is:</p>
<p align="center"><span class="larger">Area = </span><span class="times">&pi;</span><span class="larger"> &times; r<sup>2</sup></span> </p>
<p>Where:</p>
<ul>
<li><span class="times">&pi;</span> = the <a href="../numbers/pi.html">number pi</a> (3.1416...)</li>
<li> r = radius</li>
</ul>
<p>The radius is <b>2.1m</b>, so:</p>
<div class="tbl">
<div class="row"><span class="left">Area =</span><span class="right"> 3.1416... × (2.1m)<sup>2</sup></span></div>
<div class="row"><span class="left">=</span><span class="right"> 3.1416... × (2.1m × 2.1m)</span></div>
<div class="row"><span class="left">=</span><span class="right"> 13.854... m<sup>2</sup></span></div>
</div>
<p>So the circle has an area of <b>13.85 square meters</b> (to 2 decimal places)</p>
</div>
<h2>Area of Difficult Shapes</h2>
<p>We can sometimes break a shape up into two or more simpler shapes:</p>
<div class="example">
<h3>Example: What is the area of this Shape?</h3>
<p align="center"><img src="images/area-grass.gif" width="210" height="126" alt="area grass" /></p>
<p>Let's break the area into two parts:</p>
<p class="center"><img src="images/area-grass2.gif" width="210" height="123" alt="area grass zone A and B" /></p>
<p>Part A is a square:</p>
<div class="so">Area of A = a<sup>2</sup> = 20m &times; 20m = 400m<sup>2</sup></div>
<p>Part B is a triangle. Viewed sideways it has a base of 20m and a height of 14m.</p>
<div class="so">Area of B = &frac12;b &times; h = &frac12; &times; 20m &times; 14m = 140m<sup>2</sup></div>
<p>So the total area is:</p>
<div>
<p class="so">Area = Area of A + Area of B </p>
<p class="so">Area = 400m<sup>2</sup> + 140m<sup>2</sup> </p>
<p class="so">Area = 540m<sup>2</sup></p>
</div>
</div>
<h2>Area by Adding Up Triangles</h2>
<div class="center80">
<p> We can also break up a shape into <a href="../triangle.html">triangles</a>:
</p>
<p align="center">
<img src="images/area-3-triangles.gif" width="176" height="126" alt="area 3 triangles" /></p>
<p align="center">&nbsp;</p>
<p>
Then measure the base (<b>b</b>) and height (<b>h</b>) of each triangle:</p>
<p align="center">
<img src="images/area-3-triangles-b.gif" width="306" height="148" alt="area 3 triangles with base and height" /></p>
<p align="center">&nbsp;</p>
<p>Then calculate each area
(using <span class="larger">Area = &frac12;b &times; h</span>) and add them all up.</p>
</div>
<p>&nbsp;</p>
<p style="float:right; margin: 0 0 5px 10px;"><a href="area-polygon-drawing.html"><img src="images/area-irregular-polygon2.gif" width="295" height="258" border="0" alt="area irregular polygon" /></a></p>
<h2>Area by Coordinates</h2>
<p>When we know the coordinates of each corner point we can use the <a href="area-irregular-polygons.html">Area of Irregular Polygons</a> method.</p>
<p>There is an <a href="area-polygon-drawing.html">Area of a Polygon by Drawing Tool</a> that can help too.</p>
<div style="clear:both"></div>
<p>&nbsp;</p>
<div class="questions">
<script type="text/javascript">getQ(774, 3245, 775, 776, 2161, 2162, 3246, 3247, 3248, 3249);</script>&nbsp;
</div>
<div class="activity"> <a href="../activity/garden-area.html">Garden Area Activity</a></div>
<div class="related"><a href="../area.html">Area of Plane Shapes</a><a href="index.html">Geometry Index</a></div>
<!-- #EndEditable --></div>
<div id="adend" class="centerfull noprint">
<script type="text/javascript">document.write(getAdEnd());</script>
</div>
<div id="footer" class="centerfull noprint">
<script type="text/javascript">document.write(getFooter());</script>
</div>
<div id="copyrt">
Copyright &copy; 2017 MathsIsFun.com
</div>
<script type="text/javascript">document.write(getBodyEnd());</script>
</body>
<!-- #EndTemplate -->
<!-- Mirrored from www.mathsisfun.com/geometry/area.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 00:30:31 GMT -->
</html>
Reference in New Issue View Git Blame Copy Permalink