Editing Tumblr Post Appearance, How to custom tumblr post with html Options

[Deargfolt]

Hi guys!

I've checked the forum topics a bit and there doesn't seem to be an answer to my problem yet so here we go:

I'm a bit new to the whole html thing on tumblr and I was wondering if anyone knwe how to custom posts on tumblr.
In fact, I would like to edit the appearance of my tumblr post according to the theme I'm working on.
The problem is that I have no idea how to do that, and after checking a hundred various websites, I still have no solution.
Anyway here's my html (sorry if it's messy and incomplete but as I said, I'm completely new to this):


<section id="posts" class="content clearfix {block:HideTitle}{block:HideDescription}no-title-desc {/block:HideDescription}{/block:HideTitle}{block:HideHeaderImage}no-image {/block:HideHeaderImage} {block:ShowAvatar}avatar-style-{AvatarShape}{/block:ShowAvatar} {block:HideAvatar}avatar-hidden{/block:HideAvatar} {block:IfNotCollapseNavigation}exposed-nav{/block:IfNotCollapseNavigation}">

<div data-page-id="{CurrentPage}">
{block:Posts inlineMediaWidth="400" inlineNestedMediaWidth="700" width="700"}
<div id="contents" class="{block:Text}text {/block:Text}{block:Photoset}photoset {/block:Photoset}{block:Photo}photo {/block:Photo}{block:RebloggedFrom}reblogged {/block:RebloggedFrom}{block:Quote}quote {/block:Quote}{block:Link}link {/block:Link}{block:Chat}chat {/block:Chat}{block:Audio}audio {/block:Audio}{block:Video}video {/block:Video}{block:Answer}answer {/block:Answer}{block:Date}not-page post-{PostID}{/block:Date} {block:PermalinkPage} active exposed{/block:PermalinkPage}" {block:Date}data-post-id="post_{PostID}"{/block:Date}>
<div class="post-wrapper clearfix">
{block:RebloggedFrom}
<header class="reblog-header">
<a class="reblog-link" href="{ReblogParentURL}"><i class="icon-reblog"></i>{ReblogParentName}</a>
</header>
{/block:RebloggedFrom}
<section class="post">
{block:Text}
<div class="post-content">
{block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
{block:Body}
<div class="body-text">
{Body}
</div>
{/block:Body}
</div>
{/block:Text}

{block:Photo}
<figure class="post-content {block:Caption} with-caption{/block:Caption}" data-photo-width="{PhotoWidth-HighRes}">
<div class="photo-wrapper">
<div class="photo-wrapper-inner">
{LinkOpenTag}<img src="{PhotoURL-HighRes}" alt="{PhotoAlt}" width="{PhotoWidth-400}" height="{PhotoHeight-HighRes}">{LinkCloseTag}
</div>
</div>
{block:Caption}
<figcaption class="caption">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Photo}

{block:Photoset}
<figure class="post-content photoset {block:Caption}with-caption{/block:Caption}">
{Photoset}
{block:Caption}
<figcaption class="caption">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Photoset}

{block:Quote}
<div class="post-content">
<blockquote class="{Length}">
{Quote}
</blockquote>
{block:Source}
<div class="source">{Source}</div>
{/block:Source}
</div>
{/block:Quote}


{block:Link}
<div class="post-content{block:Description} with-caption{/block:Description}{block:Thumbnail} with-thumbnail{/block:Thumbnail}">
<div class="link-wrapper">
<a {Target} href="{URL}" class="link">
{block:Thumbnail}
<div class="link-thumbnail"><img src="{Thumbnail-HighRes}" alt="" /></div>
{/block:Thumbnail}
<div class="link-text-wrapper clearfix">
<div class="link-text">
{block:Host}
<div class="link-host">{Host}</div>
{/block:Host}
<h2 class="link-title">{Name}</h2>
{block:Excerpt}
<div class="link-excerpt">{Excerpt}</div>
{/block:Excerpt}
{block:Author}
<div class="link-author">{Author}</div>
{/block:Author}
</div>
</div>
</a>
</div>
{block:Description}
<div class="caption">
{Description}
</div>
{/block:Description}
</div>
{/block:Link}


{block:Chat}
<div class="post-content">
{block:Title}<h2 class="title"><a href="{Permalink}">{Title}</a></h2>{/block:Title}
<ul class="conversation">
{block:Lines}
<li class="chat-{Alt}">{block:Label}<span class="label">{Label}</span>{/block:Label} {Line}</li>
{/block:Lines}
</ul>
</div>
{/block:Chat}


{block:Audio}
<div class="post-content {block:Caption}with-caption{/block:Caption}">
<div class="audio_container">
{block:AudioEmbed}
{AudioEmbed color="white"}
{/block:AudioEmbed}
</div>
{block:Caption}
<div class="caption">
{Caption}
</div>
{/block:Caption}
</div>
{/block:Audio}


{block:Video}
<figure class="post-content {block:Caption}with-caption{/block:Caption}">
<div class="video-wrapper">
{Video-700}
</div>
{block:Caption}
<figcaption class="caption">
{Caption}
</figcaption>
{/block:Caption}
</figure>
{/block:Video}

{block:Answer}
<div class="post-content">
<div class="note-item note-item-asker">
<div class="text">
<p class="asker"><strong>{Asker}</strong> asked:</p>
<div class="asker-question">
{Question}
</div>
</div>
<div class="avatar">
<img class="asker-avatar" src="{AskerPortraitURL-96}" alt="">
</div>
</div>

{block:Answerer}
<div class="note-item note-item-answerer">
<div class="text">
<p class="answerer"><strong>{Answerer}</strong> answered:</p>
<div class="answerer-answer">
{Answer}
</div>
</div>
<div class="avatar">
<img class="answerer-avatar" src="{AnswererPortraitURL-96}" alt="">
</div>
</div>
{/block:Answerer}

<div class="replies">
{Replies}
</div>
</div>
{/block:Answer}

<section class="inline-meta post-extra{block:RebloggedFrom} has-reblog{/block:RebloggedFrom}{block:ContentSource} has-source{/block:ContentSource}{block:HasTags} has-tags{/block:HasTags}">
{block:RebloggedFrom}
<a class="meta-item reblog-link" href="{ReblogParentURL}"><i class="icon-reblog"></i>{ReblogParentName}</a>
{/block:RebloggedFrom}
{block:ContentSource}
<a class="meta-item source-link" href="{SourceURL}">{lang:Source}: {SourceTitle}</a>
{/block:ContentSource}
{block:HasTags}
{block:Tags}
<a class="meta-item tag-link" href="{TagURL}">{Tag}</a>
{/block:Tags}
{/block:HasTags}
</section>

</section>

{block:Date}
<section class="panel">
<footer class="post-footer">
<section class="inline-meta date-notes">
<div class="date-note-wrapper">
{block:NoteCount}
<a href="{Permalink}#notes" class="meta-item post-notes">{NoteCountWithLabel}</a>
{/block:NoteCount}
<a href="{Permalink}" title="{TimeAgo}" class="meta-item post-date">{ShortMonth} {DayOfMonth}{DayOfMonthSuffix}, {Year}</a>
</div>
</section>

<section class="post-controls">
<div class="controls-wrapper">
<div class="control share-control">
<nav class="pop">
<a href="#" class="share selector icon-export"></a>
<div class="pop-menu share-menu south" id="share_{PostID}">
<ul>
<li class="open-in-app"><a href="#" class="share-item open-in-app" data-post="{PostID}">Open in app</a></li>
<li><a href="http://facebook.com/sharer.php?u={URLEncodedPermalink}&t={URLEncodedTitle}" class="share-item facebook" target="_blank">Facebook</a></li>
<li><a href="https://twitter.com/intent/tweet?text={URLEncodedTweetSummary}" class="share-item twitter" target="_blank">Tweet</a></li>
{block:Photo}
<li><a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={PhotoURL-500}" class="share-item pinterest" target="_blank">Pinterest</a></li>
{/block:Photo}
{block:Video}{block:VideoThumbnail}
<li><a href="//www.pinterest.com/pin/create/button/?url={URLEncodedPermalink}&media={VideoThumbnailURL}&is_video=true" class="share-item pinterest" target="_blank">Pinterest</a></li>
{/block:VideoThumbnail}{/block:Video}
<li><a href="mailto:?subject={URLEncodedShareString}&body={URLEncodedMailSummary}" class="share-item mail">Mail</a></li>
<li><a href="{Permalink}/embed" class="share-item permalink">Embed</a></li>
<li><a href="{Permalink}" class="share-item permalink">{lang:Permalink} <i class="icon-arrow_carrot_right"></i></a></li>
</ul>
</div>
</nav>
</div>
<div class="control reblog-control">{ReblogButton size="21" color="black"}</div>
<div class="control like-control">{LikeButton size="20" color="black"}</div>
</div>
</section>
</footer>
</section>
{/block:Date}
{block:PermalinkPage}

{block:PostNotes}
<section id="notes" class="notes-wrapper clearfix">
{PostNotes-64}
</section>
{/block:PostNotes}

{block:Date}

{block:IfDisqusShortname}
<section class="comments">
<div id="disqus_thread"></div>
<script type="text/javascript">
(function() {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://{text:Disqus Shortname}.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
})();
</script>
<noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript={text:Disqus Shortname}">comments powered by Disqus.</a></noscript>
<a href="http://disqus.com" class="dsq-brlink">blog comments powered by <span class="logo-disqus">Disqus</span></a>
</section>
{/block:IfDisqusShortname}

{/block:Date}

{/block:PermalinkPage}
</div>
</article>
{/block:Posts}

I hope it's not polluting the forum and also that someone will be able to help me.
Thanks in advance!