telnet
telnet google.com 80
Trying 172.217.9.206...
Connected to google.com.
Escape character is '^]'.
GET / HTTP/1.0
HTTP/1.0 200 OK
Date: Wed, 18 Oct 2017 17:47:11 GMT
Expires: -1
Cache-Control: private, max-age=0
Content-Type: text/html; charset=ISO-8859-1
P3P: CP="This is not a P3P policy! See g.co/p3phelp for more info."
Server: gws
X-XSS-Protection: 1; mode=block
X-Frame-Options: SAMEORIGIN
Set-Cookie: 1P_JAR=2017-10-18-17; expires=Wed, 25-Oct-2017 17:47:11 GMT; path=/; domain=.google.com
Set-Cookie: NID=114=eBuvPeznELacI04cEvZN4bITyJWjchMh7IeLTctwGNzxw8C6P02hMSzR_7TGW9YBLnERNGvpb3KGVOVSAHhoDCGu9BSy--gFRyqygPNLF65GcWAo2kZke6-8CW-N7dD0; expires=Thu, 19-Apr-2018 17:47:11 GMT; path=/; domain=.google.com; HttpOnly
Accept-Ranges: none
Vary: Accept-Encoding
<!doctype html><html itemscope="" itemtype="http://schema.org/WebPage" lang="en"><head><meta content="Search the world's information, including webpages, images, videos and more. Google has many special features to help you find exactly what you're looking for." name="description"><meta content="noodp" name="robots"><meta content="text/html; charset=UTF-8" http-equiv="Content-Type"><meta content="/images/branding/googleg/1x/googleg_standard_color_128dp.png" itemprop="image"><title>Google</title><script>(function(){window.google={kEI:'n5PnWeLxIIHmmAHF2a-wDw',kEXPI:'201806,1352821,1352960,1353383,1353606,1354277,1354401,1354916,1355217,1355324,1355735,1355801,1355820,1355892,3700289,3700439,3700440,3700476,4029815,4031109,4043492,4045841,4048346,4063965,4072775,4076999,4081038,4081164,4092182,4093169,4095910,4097153,4097469,4098733,4098740,4098752,4100121,4100128,4102237,4102827,4103475,4104258,4104414,4107914,4109316,4109489,4110656,4111590,4113217,4114597,4115290,4115697,4116724,4116731,4116926,4116927,4116935,4117328,4117980,4118226,4118437,4118798,4119032,4119034,4119036,4119272,4119283,4119740,4120215,4120415,4120660,4121035,4121175,4121518,4122707,4123364,4124090,4124173,4124411,4124497,4124850,4125837,4125961,4126200,4127473,4127744,4127775,4127776,4127890,4127989,4128586,4128875,4128899,4129520,4129555,4129633,4130363,4130412,4130413,4130783,4131073,4131247,4131285,4131834,4132420,4132566,4132820,4132953,4133090,4133114,4133245,4133416,4133509,4133562,4134268,4134946,4135088,4135249,4135300,4135576,4135646,4135648,4135747,4135953,4135968,4136204,4136221,4136222,4136272,4136398,4136546,4136561,10200083,19003868,19003881,19003900,19003901,19003907,19003909,19003910,19003913,19003927',authuser:0,kscs:'c9c918f0_n5PnWeLxIIHmmAHF2a-wDw',u:'c9c918f0',kGL:'US'};google.kHL='en';})()
.....
<tag>Content</tag>
<tag> <!-- also written as <tag/> -->
<tag att1=val1 att2=val2>content</tag>
<tag boolean1=boolean1 boolean2>content</tag>
<html>
- Contains all the HTML on the page<head>
- Contains a lot of meta-data about the page as well as information about styling and JavaScript<body>
- Contains the content displayed by the web-browser%%html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
A very simple page
</body>
</html>
<body>
and <head>
tags%%html
<!DOCTYPE html>
<html lang="en" dir="rtl">
<head>
</head>
<body>
A very simple page
</body>
</html>
<head>
tag contains many pieces of information that help search engines as well as being the most common place other files are "included"<title>
- Defines the title of the page, commonly displayed at the top of a window or tab<meta>
- Used to define numerous different attributes about the page, such as viewport, character-set, and description<link>
- Used to link style sheets<script>
- Used to include JavaScript, or write it in the document itself%%html
<!DOCTYPE html>
<head>
<title>A simple document</title>
<meta charset="utf-8">
</head>
<body>
Simple
</body>
<p>
, sets off a block of text as a paragraph<h[1-6]>
, <h1>
is the highest, should only be one on the page%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>This is a paragraph</p><p>This is too is runs longer than a This is too is runs longer than This is too is runs longer This is too is runs longerThis is too is runs longer than a than a than a a line is </p>
<p> What
happens now?</p>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<h1>H1 is good for the title of your page</h1>
<h2>H2 is less important, good for subtitles, or sections</h2>
<h3>H3 might be a subsection</h3>
<h4>H4 is often the size of paragraph text</h4>
<p>Paragraph text for reference</p>
<h5>H5 is not very common</h5>
<h6>H6 is even less common</h6>
</body>
</html>
<pre>
tag is used<code>
tagclass
attribute with a value of language-X
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p> _______
..-'` ````---.
.' ___ .'````.'SS'.
/ ..-SS####'. /SSHH##'.
| .'SSSHHHH##|/#/#HH#H####'.
/ .'SSHHHHH####/||#/: \SHH#####\
/ /SSHHHHH#####/!||;`___|SSHH###\
-..__ /SSSHHH######. \SSSHH###\
`.'-.''--._SHHH#####.' '.SH####/
'. ``'- '/SH####`/_ `|H##/
| '. /SSHH###|`'==. .=='/\H|
| `'-.|SHHHH##/\__\/ /\//|~|/
| |S#|/HHH##/ |`` |
| \H' |H#.'` \ |
| ''`| - /
| /H\ .---- /
| |H#/'. ` /
| \| | '.. /
| ^~DLF /| ''..______.'
\ //\__ _..-. |
\ || ```` \ |_
\ _.-| \| |_
_\_.-' `'''''-. | `--.
''`` \ `''-; \ /
\ .-'| ````.' -
| .' `--'''''-.. |/
| .' \|
|.'
</p>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<pre> _______
..-'` ````---.
.' ___ .'````.'SS'.
/ ..-SS####'. /SSHH##'.
| .'SSSHHHH##|/#/#HH#H####'.
/ .'SSHHHHH####/||#/: \SHH#####\
/ /SSHHHHH#####/!||;`___|SSHH###\
-..__ /SSSHHH######. \SSSHH###\
`.'-.''--._SHHH#####.' '.SH####/
'. ``'- '/SH####`/_ `|H##/
| '. /SSHH###|`'==. .=='/\H|
| `'-.|SHHHH##/\__\/ /\//|~|/
| |S#|/HHH##/ |`` |
| \H' |H#.'` \ |
| ''`| - /
| /H\ .---- /
| |H#/'. ` /
| \| | '.. /
| ^~DLF /| ''..______.'
\ //\__ _..-. |
\ || ```` \ |_
\ _.-| \| |_
_\_.-' `'''''-. | `--.
''`` \ `''-; \ /
\ .-'| ````.' -
| .' `--'''''-.. |/
| .' \|
|.'
</pre>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<pre>
<code class="language-bash">
#!/bin/bash
echo "Hello Word"
</code>
</pre>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<pre>
<samp>linuxserver2.cs.umbc.edu[105]</samp><kbd>pwd</kbd>
<samp>/home/csee1/bwilk1/www/331</samp>
</pre>
</body>
</html>
<p>
tag<ol>
<li>
tag%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>How to make grilled cheese :</p>
<ol>
<li>Butter two pieces of bread on one side</li>
<li>Place them on a griddle, butter side down</li>
<li>Put cheese on top of one</li>
<li>When cheese begins to melt, place
one slice of bread on top of the other, butter sides out</li>
<li>Grill until golden brown</li>
</ol>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>The top grossing Broadway shows of all time are :</p>
<ol reversed="reversed">
<li>Chicago (1996 Revival)</li>
<li>Mamma Mia!</li>
<li>The Phantom of the Opera</li>
<li>Wicked</li>
<li>The Lion King</li>
</ol>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>So far we have talked about :</p>
<ol>
<li>Paragraphs</li>
<li>Headers</li>
<li>Pre-formatted text</li>
<li>Lists
<ol>
<li>Ordered Lists</li>
<li>Unordered Lists</li>
<li>Description Lists</li>
</ol>
</li>
</ol>
</body>
</html>
<p>
tag<ul>
<li>
tag<dl>
<dt>
and <dd>
tags %%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>Some famous sports teams are: </p>
<ul>
<li>Real Madrid</li>
<li>The Yankees</li>
<li>The Lakers</li>
<li>The Patriots</li>
<li>Ohio State Buckeyes</li>
</ul>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>Places people live: </p>
<ul>
<li>Maryland
<ul>
<li>Baltimore</li>
<li>Frederick</li>
<li>Gaithersburg</li>
<li>Columbia</li>
</ul>
</li>
<li>Pennsylvania
<ul>
<li>Philadelphia</li>
<li>Pittsburgh</li>
</ul>
</li>
<li>Virginia</li>
<li>Washington, DC</li>
</ul>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<ul>
<li>Real Madrid</li>
<li>The Yankees</li>
<li>The Lakers</li>
<li>The Patriots</li>
<li>Ohio State Buckeyes</li>
</ul>
</body>
</html>
<img>
tag, which has no closing tagsrc
attribute to the URL of the imagealt
attribute as well, which should describe the imagetitle
attribute is optional, and is meant to be a short bit of text about the image%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d0/Chesapeakebayretriever01-l.jpg"
alt="A cheasapeake bay retriever standing on some cleared earth,
holding a tennis ball in it's mouth">
</body>
</html>
<a>
tag, for anchor, is used to provide links to external pages, or to another location on the same pagehref
attribute determines where the link goes totarget
attribute determines how the link opens <a>
tag can contain either images or text inside of it%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<a href="umbc.edu">UMBC (doesn't work)</a>
<a href="http://umbc.edu">UMBC</a>
<a href="Lecture13.ipynb" target="_blank">Tuesday's lecture</a>
<a href="mailto:bwilk1@umb.edu">Email Me</a>
</body>
</html>
<em>
Emphasizes text, usually displayed as italics, but should not be used ONLY for that purpose<strong>
Emphasizes text even more strongly, usually displayed at bold text, should not be used only for that purpose<sup>
and <sub>
indicate super- and subscripts respectively<del>
is presented as a strike through, but has a meaning of deleted text%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p>This text might have
<em>emphasis, like a rising intonation</em>
when read aloud</p>
<p>This text has even <strong>more
emphasis, like a sterm talking to,
or yelling</strong></p>
<p>Superscripts are good for dates,
like October 19<sup>th</sup></p>
<p>Subscripts are good for simple
math expressions, like x<sub>1</sub></p>
<p>Only use delete to keep track
of <del>are</del> changes, or make
a change obvious</p>
</body>
</html>
<table>
tag<tr>
tag<td>
tag<thead>
<tbody>
<tfoot>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<table>
<tr>
<td>Name</td>
<td>Date of Birth</td>
</tr>
<tr>
<td>George Washington</td>
<td>February 22, 1732</td>
</tr>
<tr>
<td>John Adams</td>
<td>October 30, 1735</td>
</tr>
<tr>
<td>Thomas Jefferson</td>
<td>April 13, 1743</td>
</tr>
</table>
</body>
</html>
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<table>
<thead>
<tr>
<th>Name</th>
<th>Date of Birth</th>
</tr>
</thead>
<tbody>
<tr>
<td>George Washington</td>
<td>February 22, 1732</td>
</tr>
<tr>
<td>John Adams</td>
<td>October 30, 1735</td>
</tr>
<tr>
<td>Thomas Jefferson</td>
<td>April 13, 1743</td>
</tr>
</tbody>
</table>
</body>
</html>
<form>
tagaction
attribute indicates where the form information should be sent method
attribute indicates how it should be sentGET
puts the values in the URLPOST
puts the values in the HTTP header input
tagtype
attribute indicates the type of inputtext
password
radio
checkbox
submit
name
attribute is what is used when submitting the data to form a key-value pairlabel
- which is used to link a label to a input fieldtextarea
which creates a larger text box than just a single lineselect
creates drop down option menuoption
tag%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<form action="./" method="GET">
<label for="user_name">User Name:
<input type="text" name="user_name" id="user_name"/></label>
<label for="email">Email:</label>
<input type="email" name="mail" id="email"/>
<label for="on"><input type="radio" name="on_off" id="on"/>ON</label>
<label for="off"><input type="radio" name="on_off" id="off"/>OFF</label>
<label for="check1"><input type="checkbox" name="checks[]" id="check1">Option 1</label>
<label for="check2"><input type="checkbox" name="checks[]" id="check2">Option 2</label>
<label for="check3"><input type="checkbox" name="checks[]" id="check3">Option 3</label>
<label for="check4"><input type="checkbox" name="checks[]" id="check4">Option 4</label>
<label for"year">Select year:</label>
<select name="year" id="year">
<option>Freshman</option>
<option>Sophmore</option>
<option>Junior</option>
<option>Senior</option>
</select>
<label for="essay">Write your essay here:</label>
<textarea name="essay" id="essay" rows=5 cols=80>Default</textarea>
<input type="submit" value="Send it In!"/>
</form>
</body>
</html>
div
tag is used to group elements at a block level, and commonly holds many elements, like p
tags and ol
tagsspan
tag is an inline tag often used to mark up sections of text that need to be styled a certain waydiv
and span
have no greater meaning then group these things together, and other new tags should be used when appropriate%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<form action="./" method="GET">
<div>
<label for="user_name">User Name:</label>
<input type="text" name="user_name" id="user_name"/>
</div>
<div>
<label for="email">Email:</label>
<input type="email" name="mail" id="email"/>
</div>
<div>
<label for="on"><input type="radio" name="on_off" id="on"/>ON</label>
<label for="off"><input type="radio" name="on_off" id="off"/>OFF</label>
</div>
<div>
<label for="check1"><input type="checkbox" name="checks[]" id="check1">Option 1</label>
<label for="check2"><input type="checkbox" name="checks[]" id="check2">Option 2</label>
<label for="check3"><input type="checkbox" name="checks[]" id="check3">Option 3</label>
<label for="check4"><input type="checkbox" name="checks[]" id="check4">Option 4</label>
</div>
<div>
<label for"year">Select year:</label>
<select name="year" id="year">
<option>Freshman</option>
<option>Sophmore</option>
<option>Junior</option>
<option>Senior</option>
</select>
</div>
<div>
<p><label for="essay">Write your essay here:</label></p>
<textarea name="essay" id="essay" rows=5 cols=80></textarea>
<input type="submit" value="Send it In!"/>
</div>
<input type="submit" value="Send it In!"/>
</form>
</body>
</html>
&CHAR;
%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<p> Some common HTML entities are </p>
<table>
<thead>
<tr>
<th>Character Entity</th>
<th>Result</th>
</tr>
</thead>
<tbody>
<tr>
<td><pre>&lt;</pre></td>
<td><</td>
</tr>
<tr>
<td><pre>&gt;</pre></td>
<td>></td>
</tr>
<tr>
<td><pre>&amp;</pre></td>
<td>&</td>
</tr>
</tbody>
</table>
<p>A full table can be found at
<a href="https://dev.w3.org/html5/html-author/charref">The official W3C reference site</a></p>
</body>
</html>
article
and section
article
article
's in them%%html
<!DOCTYPE html>
<html lang="en">
<head></head>
<body>
<article>
<h1>This might be the title of the article</h1>
<section>
<h2>This is my first main section</h2>
<p>I will write some text</p>
<p>And even more text</p>
</section>
<section>
<h2>The next section</h2>
<p>This is the next part of my article</p>
</section>
</article>
</body>
</html>
header
and footer
are the type of information that might be repeated on every page of a siteaside
is not always related to the main article, or could be meant to provide extra information, like a glossarynav
element is used to group navigation elements, a
tags or otherwisesrc
attributecontrols
attribute must be present%%html
<audio controls
src="https://upload.wikimedia.org/wikipedia/commons/a/a4/Washington_Post.ogg"></audio>
<audio
controls src="https://upload.wikimedia.org/wikipedia/commons/0/04/Pyotr_Ilyich_Tchaikovsky_-_1812_overture.ogg"></audio>
<audio
controls src="https://upload.wikimedia.org/wikipedia/commons/0/04/Pyotr_Ilyich_Tchaikovsky_-_1812_overture.ogg#t=00:15:34"></audio>
%%html
<video controls
src="https://upload.wikimedia.org/wikipedia/commons/1/10/Panoramic_view_of_the_Eiffel_Tower_taken_from_the_outside.ogv"></video>
%%html
<video controls
src="https://upload.wikimedia.org/wikipedia/commons/3/37/Front_loading_garbage_truck_loading_a_dumpster.webm"></video>
%%html
<video controls width="640" height="360"
src="https://upload.wikimedia.org/wikipedia/commons/3/37/Front_loading_garbage_truck_loading_a_dumpster.webm"></video>
<p color="gray" border="1px solid black">Text</p>
selector {property1: value1; property: value2;}
<style>
tag, which is usually in the <head>
tag%%html
<!DOCTYPE html>
<html>
<head>
<style>
p {background-color:gray}
</style>
</head>
<body>
<div class="main">
<p>I am a paragraph inside a div! <span>I am a span inside a paragraph, inside a div</span></p>
</div>
<p id="alone" class="main">I am a paragraph not in a div</p>
<p lang="es">Soy un párrafo en español</p>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
p#alone {border:3px solid black}
</style>
</head>
<body>
<div class="main">
<p>I am a paragraph inside a div! <span>I am a span inside a paragraph, inside a div</span></p>
</div>
<p id="alone" class="main">I am a paragraph not in a div</p>
<p lang="es">Soy un párrafo en español</p>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
.main {border:3px solid blue}
</style>
</head>
<body>
<div class="main">
<p lang="en">I am a paragraph inside a div! <span>I am a span inside a paragraph, inside a div</span></p>
</div>
<p class="main">I am a paragraph not in a div</p>
<p lang="es">Soy un párrafo en español</p>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
:lang(es) {border:3px solid red}
</style>
</head>
<body>
<div class="main">
<p>I am a paragraph inside a div! <span>I am a span inside a paragraph, inside a div</span></p>
</div>
<p id="alone" class="main">I am a paragraph not in a div</p>
<p lang="es">Soy un párrafo en español</p>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
a:hover{border:3px dashed gray}
input:disabled{background-color: white} /*Don't do this*/
input:checked{width:2rem}
</style>
</head>
<body>
<a href="">This is a link to nowhere</a>
<form>
<div>
<input type="text" disabled value="You can't change me"/>
</div>
<div>
<input type="text" value="You can change me"/>
</div>
<label ><input type="checkbox">I am a checkbox</label>
</form>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
p.psuedo-examples{background-color:white}
p.psuedo-examples::first-letter{font-size:2rem;}
p.psuedo-examples::first-line{font-weight:900;}
</style>
</head>
<body>
<p class="psuedo-examples">I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. </p>
<p class="psuedo-examples">I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. I am, a very very long paragraph.
I am, a very very long paragraph. I am, a very very long paragraph. </p>
</body>
</html>
div p
div
as an ancestor%%html
<!DOCTYPE html>
<html>
<head>
<style>
p{background-color:white}
div span {font-family:monospace;}
div > span {font-size:2rem;}
span + span {color:gray}
</style>
</head>
<body>
<div>
<span>I am span 1</span>
<span>I am span 2</span>
<span>I am span 3</span>
<p><span>I am span 4</span></p>
</div>
<span>Shouldn't change</span>
</body>
</html>
div {border:3px solid black;}
div {border-width:3px; border-style:solid; border-color:black;}
%%html
<!DOCTYPE html>
<html>
<head>
<style>
div#text-examples{font-family:"Ubuntu",sans-serif;
font-size:2rem;
color:#444444;
font-weight:800;
font-style:italic;
text-transform:uppercase;
line-height:2.3rem;}
</style>
</head>
<body>
<div id="text-examples">
Text Text Text Text Text Text Text Text Text Text Text Text Text Text
Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
p{line-height:1.25em;}
p#ex1{font-size:20pt;}
p#ex2{font-size:20px;}
p#ex3{font-size:10mm;}
p#ex4{font-size:2em;}
p#ex5{font-size:5vh;}
p#ex6{font-size:3vw;}
p#ex7{font-size:2em;}
p#ex8{font-size:2em;}
p#ex9{font-size:2rem;}
p#ex10{font-size:2rem;}
</style>
</head>
<body>
<p id="ex1">Example 1</p>
<p id="ex2">Example 2</p>
<p id="ex3">Example 3</p>
<p id="ex4">Example 4</p>
<p id="ex5">Example 5</p>
<p id="ex6">Example 6</p>
<div id="ex7">
<p id="ex8">Example 8</p>
</div>
<div id="ex9">
<p id="ex10">Example 10</p>
</div>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
div#f1{float:left; width:50%;}
div#f2{float:left; width:50%;}
div#f3{float:right; width:50%;}
div#f4{float:right; width:50%;}
div#f5{float:left; width:25%;}
div#f6{float:left; width:25%;}
div#f7{float:right; width:30%;}
div#f8{float:right; width:25%;}
</style>
</head>
<body>
<div id="f1">
Float 1
</div>
<div id="f2">
Float 2
</div>
<div id="f3">
Float 3
</div>
<div id="f4">
Float 4
</div>
<div id="f5">
Float 5
</div>
<div id="f6">
Float 6
</div>
<div id="f7">
Float 7
</div>
<div id="f8">
Float 8
</div>
</body>
</html>
%%html
<!DOCTYPE html>
<html>
<head>
<style>
div#box1{margin:20px;background-color:red;}
div#box2{margin:40px auto; width:50%; background-color:blue}
div#box3{background-color:gray;padding:20px}
</style>
</head>
<body>
<div id='box1'>
Box1
</div>
<div id='box2'>
Box2
</div>
<div id='box3'>
Box3
</div>
</body>
</html>
box-sizing
property allows you to change from the standard box-model to another model