Client Brief

Website Planning 

I created an electronic survey for my client to fill out, that would give me the best idea of what the client wanted and how they wanted their website to be, the survey that I created can be found here: E-Survey

Here is the response I received from my client:

Shortly after sending the survey I got a response from my client. My client had clearly answered my question, telling exactly what he wanted. He also sent me in a separate email he current website, which helped me a lot when it came to what content would need to be displayed on his website.
This is his current website: DJ Luke Shires



The client told me that he wanted a website primarily for promotion and booking purposes, some where that people could see pictures of previous events and book one  for themselves. From what he told me I created a checklist for the things that would need to be on the website:

• Information about the client
• A gallery page
• A page about his work in radio
• A booking page

These are the very basic things that will need to be on the website.

After I received this information from my client I then quickly went about creating an asset audit sheet. This is basically a sheet that shows all the information that will have on the website, where I got it from and any issues I had with it.  This sheet will help me when I come to making the website, as all I will be able to see where I am going to get my information from and will help with general organisation. 
The audit sheet is available here: Audit Sheet

Creating Tables

Creating Tables

In this lesson we created a table in HTML. Tables where very important in the layout of websites a few years ago. Nowadays layout is usually done in the CSS for the website. However we practised making a HTML table from scratch. 

This is the coding that I wrote for the table: 

As you can see the HTML code for the table is in green. This is what this code displayed:

As you can see table worked well. If I wanted more rows or cells I would add the tag <tr> for table row, or <td> for table data. 

I then learnt how to use '<div>' tags and how to use '<div>' ids. This is the CSS and the HTML that I used to do this, I have put a better explanation of div id and tags in the website.

Heres the code:

Here is what the page looked like:

15 Minute Test

15 Minute Test

1. Name two advantages of using CSS

one advantage of using CSS is that you dont have to individually change each HTML tag, instead you can create styles which can be applied to different bits of text, making then exactly the same. CSS also allows you to change many parts of a webpage by changing the style, this is rather than searching through the HTML and changing individual tags. There is also alot more choice when styling the website.

2. What does the <a> tag do?

This tag is written before a piece of text to make it into a hyperlink.

3. What does <a> stand for?

This stands for anchor.

4. Where is CSS placed in a HTML document?

The CSS is an external file linked to in the <head> of the HTML document.

5. How is CSS written?

6. How should elements be 'nested' in HTML?

Elements are nested by putting an opening tag such as <a> before a piece of text, then to finish the nest you put a closing tag, </a>. This nests the text and makes that tag take effect. They should also be first till last, so for example the first tag should be the last tag closed.

7. Why would you use XHTML?

Because it is a cleaner version of HTML. Every tag must be closed properly and everything must be nested properly. If not, it will not work correctly.

8. Name 2 rules of XHTML

Always use lowercase. Content must be 100% dramatically correct.

1.3

1.3

So far I have looked at a lot of HTML tags, some which I will eventually use on my webpage and some that aren't useful for what i am doing.

These are some HTML tags that I have found and their uses:

<b> - This tag means 'bold', putting this in front of some text will make it appear bold.

<h1> to <h6> -  This tag means 'heading',  if put in front of text it will make them look like a title. I have learnt that <h1> should be reserved only for the main heading of a website

<img src= - This codes for embedding an image. The name that comes after refers to the name of the source of the image.

<select> - This is a drop down list, which used to be coded for in Javascript unit HTML5 was realised. After <select> a tag called <option> must be used for each option in the drop down list.

<ul> - This code is for an un-ordered list, which is a navigation bar. These are usually seen at the top of webpages.

<video> - This is used for embedding a video file, this is new to html5.

I had a go at creating a very small website for a photography project which I did last year. For this website I obviously wanted  to have embedded images, I also wanted the website to be only HTML.

This is the coding that I came up with for my very simple website. This is my first attempt at website building and was done all on notepad.

As you can see, in my small website script I added CSS into the HTML. This is a bad idea if you are making a website with multiple pages, as it would mean you would have to type out the CSS script on each page. Usually the CSS is in a separate file, which you would link to in the head of the HTML script for each page.

In my CSS i have created a style division called '#FaceMe1', so anything with '<div id=FaceMe1>' will have a grey background with a 1px black border. So, if i put it around another piece of text it would look like this: 

 

And this is the coding that I used, I have highlighted the CSS:

The website can be found here: faceme.comxa.com