My First HTML Project (Pirple.com Course)

Recently i have joined a HTML/CSS course from Pirple.com, and from the html lesson, i get to know about html is like a skeleton the basic fundamental of a website. Apart from that, i also learned how to build a simple website by using html tags that learned from the lessons. For instance, i know how to :

  • create a ordered / unordered lists (for recipe, menu, materials and so on)
  • insert an image inside an website
  • insert a hyper reference into a word or image to link other pages.

My First HTML Project

After i finished my html lesson, i was assigned to complete a html project with other html tags that have not covered in lesson. The main duties of the project is create a simple website about my favorite book / story, so i decided to choose my favorite story which is the movie produced by Marvel studio Captain America: The First Avenger.

From the website that i have build, i have using 6 html tags that have not covered in lesson which is:

  • Marquee – a moving text
  • iframe – used to embed another document within the current HTML document
  • Blockquote – specifies a section that is quoted from another source
  • hr – defines a thematic break
  • center – center all texts or media
  • input –  collect user input

Beside that, instead of the default white background color, i decided to choose powderblue as my background color, more suit with Captain America styling.

Here is my website HTML code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Captain America</title>
</head>
<body style="background-color:powderblue;">

<!-- Start of Header -->
<head> 
    <center>
        <h1>My Favourite Story</h1>
    </center>
</head>
<hr>
<!-- End of Header -->

    
<!-- Start of Main Content -->
<p>   
    I'm very sure about most of you guys must have a favourite superhero character regardless of your ages or your gender. But sometimes there is someone who are stopping us from watching this kind of fiction story, and suggest us go consume other more valuable contains. Maybe they never watch and read about all the superhero movie or comic book, but one thing for sure that "Superheroes" necessary that giving a bad impact, instead they are providing a good positive influence to us. Why I said so? Here I’m going to introduce you one of my favourite Superhero Character "Captain America" and the reason of Captain America Story giving us a good influence.
</p> 
    
<h2><marquee>Who Is Captain America?</marquee></h2>

<hr>


<center>
    <img src="https://www.denofgeek.com/wp-content/uploads/2019/03/captain-america-first-avenger-main.jpg?resize=768%2C432" alt="Captain America"/>
</center>
<br>
<p>
    <a href="https://en.wikipedia.org/wiki/Captain_America">Captain America</a> is a superhero came from an American Comic Book published by Marvel Comics. Captain America is created by cartoonists Joe Simon and Jack Kirby. Recipient of the Super-Soldier serum, World War II hero Steve Rogers fights for American ideals as one of the world’s mightiest heroes and the leader of the Avengers.Even though Captain America character fisrt appeared in Captian america Comics, the fisrt time i know him is through the movie produced by the marvel studios which is <strong>Captain America: The First Avenger.</strong>
</p>
    
<center>
    <h2>Lesson That I From Captain America Character !</h2>
</center>
<hr>

<!-- Ordered List -->
  <p>
  <ol>
      <li>Positional Power Vs Personal Power</li>
      
<!-- Unordered List -->
      
            <ul>
                <br>
                <li>Captain America never rely on his title to commend other, instead he leading others by using his own personal power. </li>
                <li>After Captain America frozen for decades, he had lost his positional power, because he are no longer recognize by the new generation world.</li>
                <li>However, due to his convictions and the strong core value inside his body, he was asked by others to lead them for the mission.</li>
            </ul>
      
<!-- End of Unordered List -->

    <br>
    <li>Be A Level V Leader</li>  
    <br>

<!-- Unordered List -->

        <ul>
            <li>From the book <i>Good to Great</i> has tld that Level V Leader are combining the extreme humility with incredible willpower.</li>
            <li>Even though he constanly saving the world several times, he still focused on the greater goal, not himself</li>
        </ul>
      
<!-- End of Unordered List -->

    <br>
    <li>Protect the team</li>
    <br>
      
<!-- Unordered List -->

      
    <ul>
      <li>In Captain America: Civil War, Cap stands by a former friend who has been brainwashed into becoming a villain.</li>
      <li>He refuses to give up on his childhood friend and eventually is able to bring him onto his own team.</li>
    </ul>
      
<!-- End of Unordered List -->
      
  </ol>
    
<!-- End of Ordered List -->
  <br>
    
Here is a quote from Captain America: The First Avenger:

<blockquote>
    Why Someone Weak? Because weak man knows the value of <strong>STRENGTH</strong>, the value of <strong>POWER</strong>.
</blockquote>


<center>
      <h2>My Favourite Scence In Captain America: The First Avenger</h2>
</center>
    
    <hr>
  
<p>
One of my favourite scenes in the movie Captain America: The First Avenger was the time he performing his daily soldier training routine conducted by officer Peggy Carter. While Cap performing his training, the colonel was arguing with the scientist in choosing on who are going to run the super soldier serum test (a serum that can boost up a person physical strength). In order to make sure his decision was right, the colonel throw a dummy grenade on the ground and hoping that the soldier he chooses has enough guts to preventing the grenade explode. But unfortunately, Cap was the one who are covering the dummy grenade from harming others.
</p>
    
<p>
    <center>
        <iframe width="900" height="500" src="https://www.youtube.com/embed/_bW-pxp_U9k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
        </iframe>
    </center>
</p>

<center>
    
<h2>Tell Me About You Favoruite Superheroes From Avengers Movie!</h2>
    

Click on one of the text labels to choose your favourite Superheroes!

    <form action="/action_page.php">
        <input type="checkbox" id="Avengers" name="Avengers" value="Captain America">
        <label for="vehicle1">Captain America</label><br>
        <input type="checkbox" id="Avengers" name="Avengers" value="Iron Man">
        <label for="vehicle2">Iron Man</label><br>
        <input type="checkbox" id="Avengers" name="Avengers" value="Thor">
        <label for="vehicle2">Thor</label><br>
        <input type="checkbox" id="Avengers" name="Avengers" value="Spider Man">
        <label for="vehicle2">Spider Man</label><br>
        <input type="checkbox" id="Avengers" name="Avengers" value="Hulk">
        <label for="vehicle3">Hulk</label><br><br>
        <input type="submit" value="Submit">
</form>
</center>

<!-- End of Main Content -->

</body>
</html>

    

And here is my Website Video :

Finally,

I want thank to Pirple.com providing this platform for me to learned about coding skill, even though i just started my learning journey, but i believe a giant leaps are just a bunch of baby step strung together ! Have Great Day !

Leave a Reply