myGully.com - HTML-Seite äquivalent auf blogger.com übertragen? Geht das ?

Hallo myGully Community,

also vorab ich bin noch ziemlich neu im Webdesign.

Ich habe mir eine Seite lokal auf dem Computer erstellt.
Ganz viel mit HTML rumgebastelt.

SO nun möchte ich sie erstmals kostenlos ins Netz stellen mittels blogger.com...

Nur meine Frage ist jetzt:

Wenn ich lokal eine HTML-Seite erstelle und sie in z.B. Firefox ausführe, dann sieht sie genau so aus wie ich sie haben will.

Aber wenn ich sie auf blogger.com erstelle (ich kopier den ganzen HTML-Code nur), dann sieht sie nicht so aus wie ich sie haben will.

Bsp.:
SO sieht meine .html Datei aus

Code:

<!doctype html public "-//W3C//DTD XHTML 1.0 Transitional//EN"

 "http://www.w3.org/tr/xhtml11/dtd/xhtml11-transitional.dtd>



<html>

<head>

<title> This is the title </title>

        <style type="text/css">

                h4 {text-align:center;}

        </style>

</head>



<body>

<!-- Standardzeug

Zeilenumbruch:        <br/>

Kommentar:                <!-- ......- ->

Trennlinie:                <hr/>

Fett machen:        <strong>......</strong>

Paragraph:                <p>........</p>



<!-- Allgemeines-->

<h1>Best Website Ever!</h1>

<p>This is 1. paragraph</p>



<h2> This is second header</h2>

This is the body. <br/>Next Line<br/><br/>

<hr/>

<!-- Link einfügen-->

<h3> Internet-Link </h3>

<a href="http://google.de">Google Link</a><br/>

<a href="http://google.de" title="Standard Search Engine">Google Link mit Title</a><br/><br/>

<hr/>

<!-- Marker setzen-->

<h3> Verweise </h3>

<a name="option1">Ich bin Option1</a><br/>

<!-- zum Marker navigieren-->

<a href="#option1">Gehe zu Option1</a><br/><br/>

<hr/>

<!-- Bild-->

<h3> Bild </h3>

NUR ein Bild:

<img src="http://media.moddb.com/images/members/1/256/255741/mage-50x50.gif"/><br/>

<img src="http://media.moddb.com/images/members/1/256/255741/mage-50x50.gif" height="100"/><br/>

<!-- Bild verlinken-->

Bild mit Verlinkung:

<a href="http://google.de"><img src="http://media.moddb.com/images/members/1/256/255741/mage-50x50.gif"/></a><br/><br/>

<hr/>

<!-- Liste-->

<h3> Liste </h3>

mit normalen Aufführungszeichen<br/>

<ul>

        <li>erstes Element</li>

        <li>zweites Element</li>

</ul>

mit Nummerierung

<ol>

        <li>erstes Element</li>

        <li>zweites Element</li>

</ol><br/>

<hr/>



<!-- CSS-->

<h3> CSS </h3>

Im Head steht:<br/>

        style type="text/css"<br/>

                patze {color:blue;

                                font-family:arial;

                                }<br/>

        /style<br/><br/>



<patze> hallo ich benutze hier das patze-Tag </patze><br/>

<h4>Ich bin im Center</h4>





</body>



</html>

In Firefox:

In Blogger:

Ich möchte meine Seite genau so haben wie sie in Firefox dargestellt wird....ohne diesen ganzen Schnick-Schnack, was ich rot markiert habe.

Geht das ?

Ich hoffe Ich habe mein Anliegen verständlich erklärt.
Hoffe auf hilfreiche Antworten^^