Codecademy で HTML と CSS のコースを修了し、Python を勉強したいと思っています。
その前に、HTML と CSS のスキルを練習するためだけに、これから学ぶことについての小さな Web サイトを作成したいと思います。
HTML ファイルの下にコンテンツを追加できず、その理由がわからないため、問題が発生しています。
HTMLは次のとおりです（http://pastebin.com/br4W1YGLにもあります）：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Python</title>
</head>
<body>
<div class="texto">
<h2>Welcome to the Flying Circus</h2>
<p>Python is a powerful, flexible programming language you can use in web/Internet development, to write
desktop graphical user interfaces (GUIs), create games, and much more. Python is:</p>
<ul>
<li><strong>High-level</strong>, meaning reading and writing Python is really easy—it looks a lot like regular English!</li>
<li><strong>Interpreted</strong>, meaning you don't need a compiler to write and run Python! You can write it here at Codecademy
or even on your own computer (many are shipped with the Python interpreter built in—we'll get to the interpreter later in this lesson).</li>
<li><strong>Object-oriented</strong>, meaning it allows users to manipulate data structures called <strong>objects</strong> in order to build and execute programs.
We'll learn more about objects later.</li>
<li><strong>Fun to use</strong>. Python is named after Monty Python's Flying Circus, and example code and tutorials
often refer to the show and include jokes in order to make learning the language more interesting.</li>
</ul>
<p>This course assumes no previous knowledge of Python in particular or programming/computer science in general.</p>
<div id="instrucoes">
<h4>INSTRUCTIONS</h4>
<p>Ready to learn Python? Click Save & Submit Code to continue!</p>
</div>
<div id="hint">
<h4>Hint</h4>
<p>If the loading bar fills but doesn't fade away, try refreshing the page.</p>
</div>
</div>
<a id="voltar" href="#">[ voltar ]</a>
<div class="codigo">
print "Welcome to Python!"
</div>
<p>oi<p>
</body>
</html>
CSS ( http://pastebin.com/48XvxedE ):
html, body, form, fieldset, legend {
margin: 0;
padding: 0;
}
h1, h2, h3, h4, h5, h6, p {
margin-top: 0;
}
fieldset,img {
border: 0;
}
legend{
color: #000;
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
caption, th, td {
text-align: left;
vertical-align: top;
font-weight: normal;
}
input, textarea, select {
font-size: 110%;
line-height: 1.1;
}
abbr, acronym {
border-bottom: .1em dotted;
cursor: help;
}
/*o meu código começa aqui, o código acima é um reset*/
/*fonte do reset: http://www.maxdesign.com.au/articles/css-reset/ */
html {
width: 1300px;
margin: 0 auto;
font-family: sans-serif;
font-size: 0.95em;
color: #424242;
background-color: #FFFFFF;
}
body {
}
.texto {
position: absolute;
top: 20px;
width: 550px;
}
#instrucoes {
background-color: #FAFAFA;
width: 536px;
padding: 5px;
color: #585858;
border: 2px solid #D8D8D8;
}
#hint {
background-color: #FAFAFA;
width: 536px;
padding: 5px;
color: #585858;
border: 2px solid #D8D8D8;
margin: 10px 0 0 0;
}
.codigo {
position: absolute;
left: 630px;
top: 65px;
padding: 10px;
width: 676px;
height: 420px;
background-color: #e6efc2;
color: #264409;
border: 2px solid #c6d880;
font-family: mono;
font-weight: bold;
font-size: 0.85em;
}
#voltar {
position: absolute;
left: 1275px;
top: 25px;
color: #585858;
}
a:link {text-decoration: none;}
a:visited {text-decoration: none;}
a:hover {background-color: #F2F2F2; }
a:active {text-decoration: none;}
hr {
border: 0;
width: 100%;
color: #D8D8D8;
background-color: #D8D8D8;
height: 2px;
}
ここに私の jsFiddle があります: http://jsfiddle.net/MBMf2/
段落を追加できない理由を知っている人はいますか?