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

253 lines
9.2 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/area.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 00:37:17 GMT -->
<head>
<meta charset="UTF-8">
<!-- #BeginEditable "doctitle" -->
<title>Area of Circle, Triangle, Square, Rectangle, Parallelogram, Trapezium, Ellipse and Sector</title>
<script language="JavaScript" type="text/javascript">reSpell=[["meter","metre"]];</script>
<!-- #EndEditable -->
<meta name="keywords" content="math, maths, mathematics, school, homework, education">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
<meta name="HandheldFriendly" content="true">
<meta name="referrer" content="always">
<link rel="preload" href="images/style/font-champ-bold.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="style4.css" as="style">
<link rel="preload" href="main4.js" as="script">
<link rel="stylesheet" href="style4.css">
<script src="main4.js" defer></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-29771508-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-29771508-1');
</script>
</head>
<body id="bodybg">
<div id="stt"></div>
<div id="adTop"></div>
<header>
<div id="hdr"></div>
<div id="tran"></div>
<div id="adHide"></div>
<div id="cookOK"></div>
</header>
<div class="mid">
<nav>
<div id="menuWide" class="menu"></div>
<div id="logo"><a href="index.html"><img src="images/style/logo.svg" alt="Math is Fun"></a></div>
<div id="search" role="search"></div>
<div id="linkto"></div>
<div id="menuSlim" class="menu"></div>
<div id="menuTiny" class="menu"></div>
</nav>
<div id="extra"></div>
<article id="content" role="main">
<!-- #BeginEditable "Body" -->
<h1 class="center">Area of Plane Shapes</h1>
<p class="center"><i>Area is the size of a surface!<br>
Learn more about <a href="geometry/area.html">Area</a>, or try the <a href="area-calculation-tool.html">Area Calculator</a>.</i></p>
<style>
.boxa {
text-align: center;
display: inline-block;
vertical-align:bottom;
border-radius: 17px;
border: 2px solid hsla(240,100%,70%,10%);
margin: 0 20px 25px 0;
width: 320px;
}
.imga { background-color:white; float:left; margin: 0px 0px 0px 0px; border-radius: 15px; }
</style>
<div class="center">
<div class="boxa bgb1">
<div class="imga">
<a href="triangle.html"><img src="geometry/images/area/triangle2.gif" alt="triangle base height" height="90" width="100" ></a>
</div>
<a href="triangle.html">Triangle</a><br>
<span class="large">Area = ½ × b × h</span><br>
b = base<br>
h = vertical height
</div>
<div class="boxa bgb1">
<div class="imga">
<a href="geometry/square.html"><img src="geometry/images/area/squar2.gif" alt="square" height="90" width="100" ></a>
</div>
<a href="geometry/square.html">Square</a><br>
<span class="large">Area = a<sup>2</sup></span><br>
a = length of side
</div>
<div class="boxa bgb1">
<div class="imga">
<a href="geometry/rectangle.html"><img src="geometry/images/area/rectangle.gif" alt="rectangle" height="90" width="100" ></a>
</div>
<a href="geometry/rectangle.html">Rectangle</a><br>
<span class="large">Area = w × h</span><br>
w = width<br>
h = height
</div>
<div class="boxa bgb1">
<div class="imga">
<a href="geometry/parallelogram.html"><img src="geometry/images/area/parallel.gif" alt="parallelogram" height="90" width="100" ></a>
</div>
<a href="geometry/parallelogram.html">Parallelogram</a><br>
<span class="large">Area = b × h</span><br>
b = base<br>
h = vertical height
</div>
<div class="boxa bgb1">
<div class="imga">
<a href="geometry/trapezoid.html"><img src="geometry/images/area/trap.gif" alt="trapezoid" height="90" width="100" ></a>
</div>
<a href="geometry/trapezoid.html">Trapezoid (US)</a><br>
<a href="geometry/trapezoid.html">Trapezium (UK)</a><br>
<span class="large">Area = ½(a+b) × h</span><br>
h = vertical height
</div>
<div class="boxa bgb1">
<div class="imga">
<a href="geometry/circle-area.html"><img src="geometry/images/area/circle.gif" alt="circle" height="90" width="100" ></a>
</div>
<a href="geometry/circle-area.html">Circle</a> <br>
<span class="large">Area = </span><span class="times">π</span><span class="large"> × r<sup>2</sup></span><br>
r = radius
</div>
<div class="boxa bgb1">
<div class="imga">
<a href="geometry/ellipse.html"><img src="geometry/images/area/ellipse.gif" alt="ellipse" height="90" width="100" ></a>
</div>
<a href="geometry/ellipse.html">Ellipse</a><br>
<span class="large">Area = </span><span class="times">π</span><span class="large">ab</span><br>
</div>
<div class="boxa bgb1">
<div class="imga">
<a href="geometry/circle-sector-segment.html"><img src="geometry/images/area/sector.gif" alt="sector" height="90" width="100" ></a>
</div>
<a href="geometry/circle-sector-segment.html">Sector</a><br>
<span class="large">Area = ½ × r<sup>2</sup> × θ </span><br>
r = radius<br>
θ = angle in <b>radians</b>
</div>
</div>
<div class="center">
<img src="geometry/images/altitude.svg" alt="altitude" height="75" width="113" ><br>
Note: <b>h</b> is at <a href="rightangle.html">right angles</a> to <b>b</b>
</div>
<p>&nbsp;</p>
<div class="example">
<h3>Example: What is the area of this rectangle?</h3>
<p class="center"><img src="geometry/images/area-rectangle.svg" alt="Area Rectangle" height="111" width="163" ></p>
<p>The formula is:</p>
<p class="center"><span class="larger">Area = w × h</span><br>
w = width<br>
h = height</p>
<p>We know <b>w = 5</b> and <b>h = 3</b>, so:</p>
<p class="center larger">Area = 5 × 3 = <b>15</b></p>
</div>
<div class="example">
<h3>Example: What is the area of this circle?</h3>
<p class="center"><img src="geometry/images/circle-area-ex.svg" alt="circle radius 3" height="119" width="119" ></p>
<p class="center">Radius = r = 3</p>
<table style="border: 0; margin:auto;">
<tbody>
<tr>
<td style="text-align:right;"><span class="larger">Area</span></td>
<td>&nbsp;</td>
<td><span class="larger">= <span class="times">π</span> × r<sup>2</sup></span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><span class="larger">= <span class="times">π</span> × 3<sup>2</sup></span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><span class="larger">= <span class="times">π</span> × (3 × 3)</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><span class="larger">= 3.14159... × 9</span></td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><span class="larger">= <b>28.27</b> (to 2 decimal places)</span></td>
</tr>
</tbody></table>
</div>
<div class="example">
<h3>Example: What is the area of this triangle?</h3>
<p class="center"><img src="geometry/images/triangle-area-example.svg" alt="Triangle base=20, height=12" height="135" width="217" ></p>
<p class="center">Height = h = 12</p>
<p class="center">Base = b = 20</p>
<p class="center larger">Area = ½ × b × h = ½ × 20 × 12 = <b>120</b></p>
</div>
<p>&nbsp;</p>
<p>A harder example:</p>
<div class="example">
<h3>Example: Sam cuts grass at $0.10 per square meter</h3>
<h3>How much does Sam earn cutting this area:</h3>
<p class="center"><img src="geometry/images/area-grass.svg" alt="area grass" height="118" width="205" ></p>
<p>Let's break the area into two parts:</p>
<p class="center"><img src="geometry/images/area-grass2.svg" alt="area grass in parts" height="118" width="205" ></p>
<p>Part A is a square:</p>
<div class="so">Area of A = a<sup>2</sup> = 20m × 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 = ½b × h = ½ × 20m × 14m = 140m<sup>2</sup></div>
<p>So the total area is:</p>
<div class="so">Area = Area of A + Area of B = 400m<sup>2</sup> + 140m<sup>2</sup> = 540m<sup>2</sup></div>
<p>&nbsp;</p>
<p>Sam earns $0.10 per square meter</p>
<div class="so">Sam earns = $0.10 × 540m<sup>2</sup> = $54</div>
</div>
<p>&nbsp;</p>
<div class="questions">1754, 1755, 1756, 1757, 1758, 1759, 1760, 1761, 3250, 3251</div>
<div class="related">
<a href="area-calculation-tool.html">Area Calculation Tool</a>
<a href="geometry/area.html">Area</a>
<a href="geometry/area-irregular-polygons.html">Area of Irregular Polygons</a>
<a href="geometry/index.html">Geometry Index</a>
</div>
<!-- #EndEditable -->
</article>
<div id="adend" class="centerfull noprint"></div>
<footer id="footer" class="centerfull noprint"></footer>
<div id="copyrt">Copyright &copy; 2021 MathsIsFun.com</div>
</div>
</body>
<!-- #EndTemplate -->
<!-- Mirrored from www.mathsisfun.com/area.html by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 29 Oct 2022 00:37:20 GMT -->
</html>