Task 1 report: Unit 59

  • Web page construction includes text, colour, fonts, images, table’s hyperlinks, web language terminology and metadata.

Fonts: The fonts for the both websites are really simple but it is their main website so it needs to be readable and simple. The fonts vary from bold to normally depending on the background behind the text, also it vary’s from different colours but they normally use simple colours like black and white, this is mainly because if people are colour blind they will still be able to see the text clearly and not blurry. With the text colours it makes look really professional which is what a big company like EA and Valve need. The fonts are consistent on every page for both websites.

Colour schemes: The colour schemes are very different. In the EA website the colour scheme is mainly bright colours e.g on the very first page on this website are White and a little bit of black for the header background. Also the pictures of their main games that they have created which make the colour schemes bright and interesting. On the Valve page the colour schemes are dark colours. On the first page on this website the main colours are orange, black, brown and a little bit white which is the complete opposite of the EA website. The colour schemes on both websites are consistent and nicely laid out.

Images: The image quality on both websites are really high. The structure of the image layouts are neat and tidy so they have had thought on where they will be, they weren’t just placed randomly. They also have made it clear on what they want you look at first by having the main image being the biggest size, and then putting at the top or in the middle of the page. On the Valve website the images are presented as a slide show in the top of the screen. However on the EA website the image is at the top again but as a single image with an animated button in the middle. The images on both websites are responsive and load instantly when you load the website.


Tables are a way of laying out your website to make it easier for you to place images and just neatening out the image and button layout. They are also a good way to display things like bus times, train times and restaurant menus. In Dreamweaver you can code in tables to make it a lot easier for you to layout your website and make it look a lot more professional.


Hyper linksHyper links are a really good way to create short cuts to another page. Sometimes people use hyper links instead of just using an average button. They are mainly used to navigate around sites and sometimes takes you to external sites such as social media.

Metadata: This is a bunch of data that describes and gives information about other data. They are also a part of a HTML code that also constitutes the pages of your website that has been published. In YouTube you can have tags in the description, so if someone were to type in one word that was in the description then it would be one of the few videos that show up. These are meta tags where you put them in your code so that if someone puts those key words into google then it should show up on the first page based on your domain.


HTML: This stands for Hyper Text Markup language. If you type in <html> it tells the browser that this is html. This is also a tool that also lets you create web pages by coding. While you use html you will normally see a block of text which is surrounded by tags, which indicates the browser text/images on how they should appear.

Image result for html

XHTML: This stands for Extensible Hyper Text Markup Language, this is also used to design websites and webpages. This is a lot more strict then HTML and is normally based on XML and HTML. Different web browsers can display the web pages incorrectly. There is more then one way to do a poorly written HTML.

Image result for xhtml

  • Cascading style sheets

This is a style sheet language using to describe the presentation of a document written in an a markup language e.g html. This is often used to make the visual style and layouts of your website and web page. You can also change the colour, font and image size while using this code. This is really complex and difficult to learn because there is so much you have to do and one mistake will corrupt your code and you have to do it all again until you finally get it right. If you set the codes out nicely then it souldn’t be a problem to find the issue. A few examples of these codes are <html>, <body> and <xhtml>.


Image result for Cascading style sheets


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: