14th August 2018

HTML Web Page Tutorial #2

By josh HTML 0 Comments

Welcome back to part 2 of the HTML tutorial. Previously we began work on a simple html website. For the time being we only have 1 page. This tutorial we will create our contact page and and about page.

Firstly though, lets make our homepage a little more interesting. Right no we have nothing really on it, we have the website header with the menu, we also have a short sentance, but lets add a little bit of dummy content to this page to make it more appealing.

The below code is a basic table consisting of a table head and a table body.

<table>
    <thead>
        <tr>
            <th>Column Heading 1</th>
            <th>Column Heading 2</th>
            <th>Column Heading 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Row 1 Cell 1</td>
            <td>Row 1 Cell 2</td>
            <td>Row 1 Cell 3</td>
        </tr>
        <tr>
            <td>Row 2 Cell 1</td>
            <td>Row 2 Cell 2</td>
            <td>Row 2 Cell 3</td>
        </tr>
        <tr>
            <td>Row 3 Cell 1</td>
            <td>Row 3 Cell 2</td>
            <td>Row 3 Cell 3</td>
        </tr>
        <tr>
            <td>Row 4 Cell 1</td>
            <td>Row 4 Cell 2</td>
            <td>Row 4 Cell 3</td>
        </tr>
    </tbody>
</table>

<table>

<thead>

<tr>

<th>Column Heading 1</th>

<th>Column Heading 2</th>

<th>Column Heading 3</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

Copy this into your document and then reload your browser. You will see a standard table being displayed in the browser. Now its time to add some nice CSS rules to make this table look more appealing.

table,th,td{ 
    border: 1px solid black;
}
table{
    width:100%;
    border-collapse: collapse;
}
th, td{
    padding:10px;
    text-align: left;
}
th {
    background-color: #00461b;
    color:#fff;
}

table,th,td{

border: 1px solid black;

}

table{

width:100%;

border-collapse: collapse;

}

th, td{

padding:10px;

text-align: left;

}

th {

background-color: #00461b;

color:#fff;

}

The first CSS Rule adds a border to the table, table heading cells and table cells. The problem being that some of these border will double up creating an odd appearance. Fortunately there is a simple way to fix this. We add a border-collapse: collapse; rule to the table which squashes doubled up borders together to make it more presentable. The next CSS rule just adds some padding to the cells so the cell content isnt squashed right up the the edges, we also align the text-left as by default table head cells are aligned to the centre. The final CSS rule for now is to just add a background colour to the table head cells and then change the text colour to make it more readable.
Copy this CSS to your code, save and refresh. Looks a lot nicer now just from a few simple CSS rules. Have a play around with different border and colour rules and see what happens.

Next up lets add our new files. Starting with the about page. If you remember when we created our menu we called the file about.html. Go ahead and create that file alongside your home.html.

about.html

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Webpage Tutorial - About</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    
    <body>
        <div class="container">
            <header class="center">
                <h1>Webpage Tutorial</h1>
                <nav>
                    <ul>
                        <li><a href="/home.html">Home</a></li>
                        <li><a href="/about.html">About</a></li>
                        <li><a href="/contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <h2>About</h2>
            
        </div>
    </body>
    
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Webpage Tutorial - About</title>

</head>

<body>

<h1>Webpage Tutorial</h1>

<nav>

<ul>

<li><a href="/about.html">About</a></li>

<li><a href="/contact.html">Contact</a></li>

</ul>

</nav>

</header>

<h2>About</h2>

</div>

</body>

</html>

The about file contents written here are almost identical to the home template. All you need to change are the page title in the head of the file. Its typical to prefix a page title with the website name followed by the page name afterwards. This is just one popular convention but many websites use different techniques. The Website name and menu remain the same, then we add a secondary heading for the page name. In this case its About.

An about page is often a page that wont get read by most vistors and is only of interest to people seriously interested in you, your product or your service. Creating dummy content for an about page is very simple for this tutorial. I can use Lorem Ipsum which is a standard latin transcript used by web developers to add textual padding to pages to design the page before adding the actual content later on. So for the sake of this tutorial we will ustilise this. Of course feel free to add your own text. I’m also utilising a useful service called placeholder.com. These create dummy images that you can use to design a page layout without having to use actual images. Again perfect for this tutorial.

The below code is added to the content of the about.html You will notice i have used some inline CSS on the paragraph tags to help align the text to fill the space. I have also use the align attribute on the images. By using align left or align right we’re able to inform the browser to wrap text around the image, making it very presentable and magazine esque.

The next tutorial will move on to use forms when we create our contact page. Here are the final copies of the files so far in this tutorial.

Home.html

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Webpage Tutorial</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    
    <body>
        <div class="container">
            <header class="center">
                <h1>Webpage Tutorial</h1>
                <nav>
                    <ul>
                        <li><a href="/home.html">Home</a></li>
                        <li><a href="/about.html">About</a></li>
                        <li><a href="/contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
            
            <table class="hometable">
                <thead>
                    <tr>
                        <th>Column Heading 1</th>
                        <th>Column Heading 2</th>
                        <th>Column Heading 3</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Row 1 Cell 1</td>
                        <td>Row 1 Cell 2</td>
                        <td>Row 1 Cell 3</td>
                    </tr>
                    <tr>
                        <td>Row 2 Cell 1</td>
                        <td>Row 2 Cell 2</td>
                        <td>Row 2 Cell 3</td>
                    </tr>
                    <tr>
                        <td>Row 3 Cell 1</td>
                        <td>Row 3 Cell 2</td>
                        <td>Row 3 Cell 3</td>
                    </tr>
                    <tr>
                        <td>Row 4 Cell 1</td>
                        <td>Row 4 Cell 2</td>
                        <td>Row 4 Cell 3</td>
                    </tr>
                </tbody>
            </table>
    
        </div>
    </body>
    
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Webpage Tutorial</title>

</head>

<body>

<h1>Webpage Tutorial</h1>

<nav>

<ul>

<li><a href="/about.html">About</a></li>

<li><a href="/contact.html">Contact</a></li>

</ul>

</nav>

</header>

<thead>

<tr>

<th>Column Heading 1</th>

<th>Column Heading 2</th>

<th>Column Heading 3</th>

</tr>

</thead>

<tbody>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</tbody>

</table>

</div>

</body>

</html>

About.html

<!DOCTYPE html>
    <html>
    
    <head>
        <title>Webpage Tutorial - About</title>
        <link rel="stylesheet" type="text/css" href="stylesheet.css">
    </head>
    
    <body>
        <div class="container">
            <header class="center">
                <h1>Webpage Tutorial</h1>
                <nav>
                    <ul>
                        <li><a href="/home.html">Home</a></li>
                        <li><a href="/about.html">About</a></li>
                        <li><a href="/contact.html">Contact</a></li>
                    </ul>
                </nav>
            </header>
            <h2>About</h2>
            <p style="text-align:justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. In, fugiat ex unde velit, odio reprehenderit quas enim
perferendis magnam consequatur obcaecati, culpa reiciendis perspiciatis! Consectetur ratione perspiciatis nulla maiores minima.
            Praesentium, quam nobis assumenda blanditiis totam distinctio ratione sit autem, dignissimos saepe vitae consequatur unde? Accusantium, id,
laudantium odit perferendis itaque voluptatibus impedit ratione praesentium accusamus at eum placeat repellendus.
            Non facere cumque mollitia fugit, provident rem labore neque deserunt iusto porro, alias voluptate asperiores dolor officia recusandae quisquam
distinctio. Ad facere modi doloribus quas? Quos eum deserunt molestias voluptatem.
            Ullam dolores explicabo fuga repellendus natus modi, veniam blanditiis dolorem atque minima! Quaerat molestias nobis tenetur dicta! Sequi
perferendis repellat cum omnis quod. Pariatur, inventore architecto nostrum odio dicta nulla.
            Ipsum eum et aliquid amet vitae eveniet fugiat adipisci harum obcaecati vero unde quod velit ducimus, neque nihil facere eaque non accusantium
ex recusandae similique quos commodi laudantium. Doloribus, itaque!
            Adipisci repellat blanditiis qui soluta odit, commodi ad nemo eos tenetur voluptatibus dolore totam? Dolorem alias excepturi, eos possimus
impedit enim sint fuga vero natus sit aut hic. Totam, vel!<img src="http://via.placeholder.com/200x200" align="right" style="padding:5px">
            Quis earum quidem ratione. Blanditiis, doloremque voluptatem sapiente inventore eaque unde incidunt vel earum ipsum id non totam corrupti error
quidem labore illo recusandae natus. Explicabo ratione fuga ipsa neque.
            Alias laborum odio quia, doloremque error numquam quae sit saepe eos ad iste eveniet non perspiciatis libero quasi ratione suscipit! Possimus id nobis maiores non, sunt reprehenderit temporibus placeat odit?
            Blanditiis iste praesentium fuga, dolor laudantium a rem illum debitis aliquid sint beatae consectetur libero deleniti facilis velit, quis laboriosam nesciunt id mollitia molestias. Dolores labore ab eius quam? Sed!
            Aut perspiciatis placeat, minus est veritatis recusandae inventore ab eveniet omnis cupiditate molestiae tempore nihil consectetur corporis aperiam voluptatem eaque iste. Repudiandae nulla consequuntur ea cupiditate deserunt perferendis rem minus.</p>
            
            <p style="text-align:justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias beatae, aut porro modi rem, rerum soluta facere dolore obcaecati ipsa consequatur magni corrupti nulla temporibus optio. Est, perferendis! Facere, similique.
            Dicta officia soluta numquam sequi placeat unde quos facilis porro magni incidunt, voluptate id quisquam obcaecati repudiandae alias corrupti nam error eos libero voluptas tempora fugiat quam. Rem, dolore velit!
            Distinctio id, placeat atque debitis voluptate iusto veniam beatae quas tempora officiis qui magni perspiciatis labore! Ratione illum commodi fugit deserunt nobis molestiae. Quod corrupti facilis fuga repellat aut omnis?<img src="http://via.placeholder.com/200x200" align="left" style="padding:5px">
            Ratione tenetur sint in maiores eaque nisi? Eligendi debitis laboriosam repellendus modi, alias reiciendis reprehenderit tempora ratione eos! Porro tenetur eius labore iste. Quo assumenda earum, itaque aliquam illum ut.
            Recusandae, accusamus. Consequuntur culpa officiis quas, non reprehenderit nesciunt omnis suscipit doloremque repellendus voluptatibus sit inventore alias? Delectus harum eius repellat impedit fugit, magni tempore laboriosam quidem, officiis, rerum itaque.
            Veritatis eius dolorem quasi! Architecto voluptatum, velit nisi repellat natus eum vitae placeat doloremque commodi deserunt, magni adipisci eligendi ullam. Autem accusamus quae veritatis consectetur tenetur dolores aliquid architecto quaerat?
            Exercitationem, laudantium perspiciatis. Temporibus, ea? Quo ad blanditiis obcaecati nemo laboriosam odit, esse iusto fugiat tempore eos dolore? Maiores in perspiciatis animi aut iste illum, quis magni vitae optio impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit.
Quo illum esse et eligendi? Esse fuga sed sequi, quidem hic ipsa repudiandae ducimus fugiat explicabo nihil. Culpa aliquid vitae repellendus repellat.Quasi voluptates rerum quo consequatur quis, dignissimos laborum vero impedit veritatis ipsa fugiat, adipisci fugit numquam corporis eius minus quas
omnis repellendus, dolores illo vitae tempora aperiam ducimus. Sed, ipsam.</p>
        </div>
    </body>
    
    </html>

<!DOCTYPE html>

<html>

<head>

<title>Webpage Tutorial - About</title>

</head>

<body>

<h1>Webpage Tutorial</h1>

<nav>

<ul>

<li><a href="/about.html">About</a></li>

<li><a href="/contact.html">Contact</a></li>

</ul>

</nav>

</header>

<h2>About</h2>

<p style="text-align:justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. In, fugiat ex unde velit, odio reprehenderit quas enim

perferendis magnam consequatur obcaecati, culpa reiciendis perspiciatis! Consectetur ratione perspiciatis nulla maiores minima.

Praesentium, quam nobis assumenda blanditiis totam distinctio ratione sit autem, dignissimos saepe vitae consequatur unde? Accusantium, id,

laudantium odit perferendis itaque voluptatibus impedit ratione praesentium accusamus at eum placeat repellendus.

Non facere cumque mollitia fugit, provident rem labore neque deserunt iusto porro, alias voluptate asperiores dolor officia recusandae quisquam

distinctio. Ad facere modi doloribus quas? Quos eum deserunt molestias voluptatem.

Ullam dolores explicabo fuga repellendus natus modi, veniam blanditiis dolorem atque minima! Quaerat molestias nobis tenetur dicta! Sequi

perferendis repellat cum omnis quod. Pariatur, inventore architecto nostrum odio dicta nulla.

Ipsum eum et aliquid amet vitae eveniet fugiat adipisci harum obcaecati vero unde quod velit ducimus, neque nihil facere eaque non accusantium

ex recusandae similique quos commodi laudantium. Doloribus, itaque!

Adipisci repellat blanditiis qui soluta odit, commodi ad nemo eos tenetur voluptatibus dolore totam? Dolorem alias excepturi, eos possimus

impedit enim sint fuga vero natus sit aut hic. Totam, vel!<img src="http://via.placeholder.com/200x200" align="right" style="padding:5px">

Quis earum quidem ratione. Blanditiis, doloremque voluptatem sapiente inventore eaque unde incidunt vel earum ipsum id non totam corrupti error

quidem labore illo recusandae natus. Explicabo ratione fuga ipsa neque.

Alias laborum odio quia, doloremque error numquam quae sit saepe eos ad iste eveniet non perspiciatis libero quasi ratione suscipit! Possimus id nobis maiores non, sunt reprehenderit temporibus placeat odit?

Blanditiis iste praesentium fuga, dolor laudantium a rem illum debitis aliquid sint beatae consectetur libero deleniti facilis velit, quis laboriosam nesciunt id mollitia molestias. Dolores labore ab eius quam? Sed!

Aut perspiciatis placeat, minus est veritatis recusandae inventore ab eveniet omnis cupiditate molestiae tempore nihil consectetur corporis aperiam voluptatem eaque iste. Repudiandae nulla consequuntur ea cupiditate deserunt perferendis rem minus.</p>

<p style="text-align:justify">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias beatae, aut porro modi rem, rerum soluta facere dolore obcaecati ipsa consequatur magni corrupti nulla temporibus optio. Est, perferendis! Facere, similique.

Dicta officia soluta numquam sequi placeat unde quos facilis porro magni incidunt, voluptate id quisquam obcaecati repudiandae alias corrupti nam error eos libero voluptas tempora fugiat quam. Rem, dolore velit!

Distinctio id, placeat atque debitis voluptate iusto veniam beatae quas tempora officiis qui magni perspiciatis labore! Ratione illum commodi fugit deserunt nobis molestiae. Quod corrupti facilis fuga repellat aut omnis?<img src="http://via.placeholder.com/200x200" align="left" style="padding:5px">

Ratione tenetur sint in maiores eaque nisi? Eligendi debitis laboriosam repellendus modi, alias reiciendis reprehenderit tempora ratione eos! Porro tenetur eius labore iste. Quo assumenda earum, itaque aliquam illum ut.

Recusandae, accusamus. Consequuntur culpa officiis quas, non reprehenderit nesciunt omnis suscipit doloremque repellendus voluptatibus sit inventore alias? Delectus harum eius repellat impedit fugit, magni tempore laboriosam quidem, officiis, rerum itaque.

Veritatis eius dolorem quasi! Architecto voluptatum, velit nisi repellat natus eum vitae placeat doloremque commodi deserunt, magni adipisci eligendi ullam. Autem accusamus quae veritatis consectetur tenetur dolores aliquid architecto quaerat?

Exercitationem, laudantium perspiciatis. Temporibus, ea? Quo ad blanditiis obcaecati nemo laboriosam odit, esse iusto fugiat tempore eos dolore? Maiores in perspiciatis animi aut iste illum, quis magni vitae optio impedit? Lorem ipsum dolor, sit amet consectetur adipisicing elit.

Quo illum esse et eligendi? Esse fuga sed sequi, quidem hic ipsa repudiandae ducimus fugiat explicabo nihil. Culpa aliquid vitae repellendus repellat.Quasi voluptates rerum quo consequatur quis, dignissimos laborum vero impedit veritatis ipsa fugiat, adipisci fugit numquam corporis eius minus quas

omnis repellendus, dolores illo vitae tempora aperiam ducimus. Sed, ipsam.</p>

</div>

</body>

</html>

Stylesheet.css

*{
    padding:0;
    margin:0;
}

.container{
  margin: 0 auto;
  width:1200px;  
}

.center{
    text-align:center;
}
nav{
    margin:10px 0;
}

nav ul{
    list-style: none;
}

nav ul li{
    display:inline;
    padding:5px;
    font-size:20px;
}
nav ul li a{
    text-decoration:none;
    color:#7d7d7d;
}

nav ul li a:hover{
    text-decoration:underline;
    color:#4e4e4e;
}


table,th,td{ 
    border: 1px solid black;
}
table{
    width:100%;
    border-collapse: collapse;
}
th, td{
    padding:10px;
    text-align: left;
}
th {
    background-color: #00461b;
    color:#fff;
}

padding:0;

margin:0;

}

.container{

margin: 0 auto;

width:1200px;

}

.center{

text-align:center;

}

nav{

margin:10px 0;

}

nav ul{

list-style: none;

}

nav ul li{

display:inline;

padding:5px;

font-size:20px;

}

nav ul li a{

text-decoration:none;

color:#7d7d7d;

}

nav ul li a:hover{

text-decoration:underline;

color:#4e4e4e;

}

table,th,td{

border: 1px solid black;

}

table{

width:100%;

border-collapse: collapse;

}

th, td{

padding:10px;

text-align: left;

}

th {

background-color: #00461b;

color:#fff;

}

about.html

Home.html

About.html

Stylesheet.css

Related Posts

Add a Comment