You are on page 1of 5

Report 1 - Basic HTML & CSS

Emerson Raniere
2014 January 20


Table of Contents

Introduction ........................................................................ 1
Task 1....................................................................................2
Overview of the design...................................................2.1
How the design was implemented..................................2.2
About the implemented...................................................2.3
Task 2....................................................................................3
Overview of the design...................................................3.1
How the design was implemented..................................3.2
About the implemented...................................................3.3
Adding CSS style............................................................3.4



1 Introduction

This report comes up to introduce some basic elements in HTML and CSS. By
using this elements, anyone might create a simple webpage that any browser can identify.
Also, this report is divided in two tasks giving easily path to the reader find what is
looking for.
The codes written by the author are indented and cleaned with some necessary
comments to make easy comprehension while the reader reads. The tags used are since
the first HTML version such as <div>, <span>, and <table> and others by HTML5 such
as <figure>, <header>, and <footer> that gives properly semantic on the webpage.
Indeed, this semantic is quite important not only supports the author to help people who
uses screen readers but also the webpage is linked to SEO, Search Engine Optimisation,
that improves the webpage content for placement on the Search Engines.



2 Task 1

The purpose in this task is create a basic webpage using images, entities and
nested tables.


2.1 Overview of the design

Figure 1 is a wireframe of
the webpage task 1 that is formed
by three divisions. The header
contains the owner of the web page
and respectively its logo. The body
contains the main content of the
webpage that gives the reader the
information that he or she are
looking for. Even though there is
no content in the footer, I created it
to give semantic to the webpage. In
addition, this space is used to show
the copyright information and who
developed the webpage.


2.2 How the design was implemented

The design was implemented using HTML tags to create the wireframe. Also, all
HTML5 that appears in the source has the purpose to give semantic on the webpage.
By using <header> within <body>, there is a <table> which one table row <tr>
appeared with three table data <td> that contain the data displayed in the screen. In
addition, there are two hyperlinks <a href> linked with two images.
In the body, there are four <table>, first one nested, that create the main content
of webpage and the buttons in the bottom that it will be used to send the information to
database. Most of fields have tags to make the data bold and italic. There are two <hr>
that show a line in which the main content is. Also, there are some entities that the HTML
reads as data such as &nbsp; &gt; and &lt;.
In the footer, there is the <footer> tag that shows the end of the page; however,
there is only <br> tag that used to break the line

.
2.3 About the implementation

I already knew most of the tags used in HTML because I studied before. In the
beginning I used HTML4; however, I realized that I could change to HTML5
specially because the idea that the new tags give semantic that Search Engines seek. I
did several changes in the code trying to write in the best way.


3 Task 2

The purpose in this task is rewrite the previous task adding new tags that help to
create the stylesheet of the webpage giving beauty properly.


3.1 Overview of the design

Figure 2 is a wireframe of
the webpage task 2 that is formed
by three divisions; however, the
body is splitted up in three new
fields. These three new fields helps
the programmer to identify easily
the content in which each field it is.
The header and footer have the
same idea that the task 1 mentioned
before which are the owner of the
webpage and copyrights
respectively.




3.2 How the design was implemented

The implementation is the same as the task 1; however, I added <div> and
<span> tags.
The <header> has the <span> tag within the <td> middle tag. The <span> does
not have any semantic influence, but helps to build the CSS style.
Each new field created in task 2 is the <div> tag with class attribute that also
helps to build the CSS style.
All the tags mentioned and developed in task 1 such as <table>, <a href>, and
<header> are the exactly the same; however, I took off the <br> tag in the <footer> tag
because I used CSS style to have the line break.


3.3 About the implementation

This implementation was easier than the task 1 due to the fact that I already had
the mainframe of the webpage; therefore, I just needed to create some <div> and <span>
tags.


3.4 Adding CSS style

Figure 3 is the CSS wireframe style
of the webpage. The idea is develop codes
separately which the HTML shows only
data and CSS is used to write the style of the
webpage. Although there are these two
codes, the CSS is embedded what is not
recommended to do.
The background of the body
including the <header> and <footer> tags
are gray. Also, the three <div> tags within
the body have a different background as the
figure 3 shows.
The .wrapper class has the width with 960px and the margin with 0 auto as
attribute. Both attributes is used to set up the all page in the middle on any web browser.
Instead of the task 1 when I used the <br> tag to break the line, on task 2 the
<footer> tag has margin-bottom with 10% as attribute that represents the same.
All the <table> tags have width 100% as attribute that is related to the .wrapper
class.
The .header-logo class have attributes that give style to the information such as
bold, italic and font-color red while .header-logo-color class within the <span> tag has
font-color blue. Due to the fact that the .header-logo-color is deeper, the color blue
prevailed.

You might also like