HTML and CSS - Create Simple Articles

By:, On:

We have used HTML and CSS already but we haven't been focusing on building something that looks good. In this tutorial we will start playing with HTML and CSS a little by building something from start to finish.

We will build a web page that looks like this:

result of the class on HTML and CSS

Step 1: Create an HTML File and Add Title Tag

Let's start off by defining our HTML document structure. Create a new file on your desktop and call it "article.html". Open it with your favorite editor and paste following code into it:


<!DOCTYPE html>


<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>

    </body>
</html>

As you might have noticed, we have used new a HTML tag inside the HEAD. If you open your page in Safari, you will see the title on the top of your browser window.

Step 2: Add Article Tag

Let's define boundaries for our article with the "article" HTML tag:

 


<!DOCTYPE html>


<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
        </article>
    </body>
</html>

The "article" tag behaves like a rubber band; it will stretch to contain all the contents. Let's leave it like that for now. Later, we will give it a style.

Step 3: Add Meta Information

Next, we want the meta information for the article. We want to know who wrote it and when was it published.


<!DOCTYPE html>


<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
            <p><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>
        </article>
    </body>
</html>

We use the "strong" tag to make parts of the line bold.

Step 4: Add Image

Next, we want to add the image and caption for the image. To make sure image and caption always stay together, we will put them inside the same DIV tag. DIV is a really flexible element. I like to think about it as a rubber band (article tag is a type of DIV tag). When there is nothing inside DIV, it will be invisible. The minute we put something inside the tag, it will stretch horizontally to 100% of the space in which it's sitting and vertically as much as necessary to accommodate the contents. Let's try:


<!DOCTYPE html>


<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
            <p><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>

            <div>
                <img src="http://peoplecancode-public.s3.amazonaws.com/cat.jpg">
                <span>Image source: The WEB</span>
            </div>

        </article>
    </body>
</html>

Sweet. We have inserted the image onto the page. Try saving and reloading the page, you should now see the handsome cat. Let's proceed and add one final HTML element: the text.


<!DOCTYPE html>


<html>
    <head>
        <title>
            Breaking News: Cat does not give a damn
        </title>
        <style type="text/css">

        </style>
    </head>
    <body>
        <article>
            <h1>Breaking News: Cat does not give a damn</h1>
            <p><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>

            <div>
                <img src="http://peoplecancode-public.s3.amazonaws.com/cat.jpg">
                <span>Image source: The WEB</span>
            </div>

            <p>
                This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text to low around it. I even decided to copy the previous paragraph. This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text to low around it.
            </p>
            <p>This paragraph will include the photo of a random cat that the author of this tutorial has found online. You can replace this text with any random text. The sole purpose of this copy is to fill the space and make sure that the image to the left has enough text fo low around it.</p>

        </article>
    </body>
</html>

Step 5: Style Font and Size

We are ready to go and start styling our document! First, we want to change the default font style to sans-serif. We can do that by specifying a style on the "body" HTML tag. This way, unless we say otherwise, sans-serif will be a default.


<style type="text/css">
    body { font-family: sans-serif; }
</style>

Try reloading your browser at this point. You will see that the website changed.

Next, we want to restore serif font for the H1 tag:


<style type="text/css">
    body { font-family: sans-serif; }
    h1 { font-family: serif; }
</style>

Step 6: Set Margin and Width

Also, we want to make sure the margin on the bottom of the H1 tag is set to 0 so that the meta info appears closer to the title:


<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
</style>

Next, we want to constrain the article width, so that it doesn't span the whole width of the browser window. We will do this by adding a class for the article directly:


<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
</style>

We also set left and right margins so that the article stays in the middle of our page. Now, we want to style the DIV tag that image sits in. We want it to be smaller and for the text to flow around it, just like in the mockup. Let's give this DIV a class and apply a style to this class:


<div class="image-wrapper">
    <img src="http://peoplecancode-public.s3.amazonaws.com/cat.jpg">
    <span>Image source: The WEB</span>
</div>

Step 7: Set Float Property


<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
</style>

The property "float" will make our image move to the left, and wrap the text around it from the right. We also use margins to push the text away from the DIV edge. Right now, you might see that the image goes outside the DIV itself. This is because the browser will use the image's original dimensions to render it. To make sure the image stays inside the boundaries, we will set its width to 100%.


<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }
</style>

Step 8: Edit Image

Great. Not much left. The image caption needs to be a little smaller and not as dark:


<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }

    .image-wrapper span {
        font-family: sans-serif;
        font-size: 10px;
        color: #ccc;
    }
</style>

Step 9: Edit Meta Information

Let's fix the meta info for the article. Since we used the "p" tag and the style we are going to give it should not affect the two paragraphs below, we will give it a class:


<article>
    <h1>Breaking News: Cat does not give a damn</h1>
    <p class="article-meta"><strong>Author:</strong> Bill Clinton, <strong>Published:</strong> Yesterday</p>
    ...
</article>


<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }

    .image-wrapper span {
        font-family: sans-serif;
        font-size: 10px;
        color: #ccc;
    }

    .article-meta {
        font-family: sans-serif;
        color: #aaa;
        font-size: 12px;
    }
</style>

Step 10: Edit Paragraphs

And finally, the paragraphs with the main content:


<style type="text/css">
    body { font-family: sans-serif; }
    h1 {
        font-family: serif;
        margin-bottom: 0;
    }
    article {
        width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    .image-wrapper {
        width: 200px;
        float: left;
        padding-right: 25px;
        padding-bottom: 10px;
    }
    .image-wrapper img {
        width: 100%;
    }

    .image-wrapper span {
        font-family: sans-serif;
        font-size: 10px;
        color: #ccc;
    }

    .article-meta {
        font-family: sans-serif;
        color: #aaa;
        font-size: 12px;
    }
    p {
        font-size: 14px;
    }
</style>

Feel free to change the font size.

Congratulations! You're done. Save the HTML and refresh it in your browser.

If you login you will be able to mark this tutorial as finished to track your progress



Comments

  • On: sameer wrote:

    Hey ,

    then style should start like

    if

    then style should start like

  • On: sameer wrote:

    If any suggestion needed please let me ping my email :sameersoft6@gmail.com

Comment

You can login to comment