Jump to content
Community Announcements, Giveaways & More!

Free DIY Website

Goggwell

By Goggwell
in Coding Center

 Share

4 posts in this topic

Recommended Posts

Goggwell Newbie

Goggwell 17.6k
  •   iPod Touch 
  •   1.0.0

    • Posted
    Posted

    Hey guys!


    As most of you know, HTML5 is the most commonly used coding language for building a website. Not only is it the most common, but it is the most versatile and easiest to use!


     


    To show you how easy it is, I have created a website template for you guys to use. It's a very simple template, designed to show people your 'About Me'!


     


    Here's a picture of what the website looks like:


     


    2luxe1c.png


     


     


     


    It's a pretty simple website, don't you think?


    Here's the code for it:



    
<!DOCTYPE html>
    
<head>

    
    <style>
    
        body {
    
            text-align: center;
    
            background: url("http://p1.pichost.me/i/51/1750928.jpg");
    
            background-size: cover;
    
            background-position: center center;
    
            background-repeat: no-repeat;
    
            background-attachment: fixed;
    
            color: white;
    
            font-family: Helvetica;
    
        }

    
        p {
    
            font-size: 24px;
    
        }

    
        input {
    
            border: 0;
    
            padding: 12px;
    
            font-size: 18px;
    
        }

    
        input[type="submit"] {
    
            background: #2c3e50;
    
            color: #ecf0f1;
    
        }

    
    </style>
    
</head>

    
<body>


    
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">
    
<p>Hi! I am learning how to make my very own web page! I really like blueberry muffins and long walks on the beach.</p>
    
<input type="email" placeholder="Email">
    
<input type="submit">

    
</body>

    Now, this code may seem a bit difficult to understand for all you newbies out there, so let me walk you through it.


     


    I'll skim through the code really fast.


    The background image comes from this part of the code:



    
<style>
    
        body {
    
            text-align: center;
    
            background: url("http://p1.pichost.me/i/51/1750928.jpg");
    
            background-size: cover;
    
            background-position: center center;
    
            background-repeat: no-repeat;
    
            background-attachment: fixed;
    
            color: white;
    
            font-family: Helvetica;
    
        }

    See the part where it says 'background: url("http://p1.pichost.me/i/51/1750928.jpg");'?


    That's the link to the picture you are seeing in the background.


     


    You can change the picture to your liking. The coding below it simply adjusts the image to fit the background.


     


     


    The same rule applies with the picture in the middle.


    It comes from this part of the code:



    
<img src="https://codecademy-content.s3.amazonaws.com/courses/web-beginner-en-3pc6w/images/avatar.jpg" height="250" width="250">

    This part is below <body> and above <p> in the code. Once again, you can change the link. The part where it says 'height' and 'width' are just functions that adjust the picture, so you want the original picture to be a square.


     


    <p> means paragraph. Judging by the part that comes after it, you can guess that <p> is the part below the picture.


     


    You can also change the picture to a title.


     


    Just delete the picture code and add this:


    <h1>


     


    After <h1> just write down the title of your site and then add </h1>


    There's also <h2> <h3> all the way up to <h6>


     


     


    You'll be a master in no time!


     


     


     


     Share
    Go to topic listing
    ×
    ×
    • Create New...

    Important Information

    We would like to place cookies on your device to help make this website better. The website cannot give you the best user experience without cookies. You can accept or decline our cookies. You may also adjust your cookie settings. Privacy Policy - Guidelines