WEB AUTHORING REPORT:

TERMINOLOGY:

Authoring: Authoring is when the assets (such as videos, pictures

and text) are put together as a collective to create a multimedia
product. This can be anything from a poster to a website. The word
authoring can refer to how the product ends up being saved and
the use it will have. Depending on what it is will depend on how it
gets saved as not everything will have the same save file. A
website would need HTML coding whereas something like a PowerPoint presentation will
have the option to stay in this format. Authoring can also mean a type of software or
programme, such as Dreamweaver, where websites can be created and where a HTML
code is given to the user. Sites like these usually give the user the option to either look at how
the actual website will look, so the design side of it all, or the more technical side, with the
coding.

Sites: Websites can either be a collection of different pages or

just a singular page that appears online with its domain name
and can be found by either typing in the exact domain name
or by coming up as a suggestion after something is searched
for in a search engine. They can contain images, text, videos,
or sound or a selection of them all. Hosting is where a website owner will pay a set amount of
money to the owner of the server so that their website can be saved, this is a vital part of
owning a website. A server is a basic computer used to save websites to as they are
constantly online. This then allows the websites saved to the servers to always be found when
the address is searched for.

Uploading: This term refers to the process of loading

data from one place to another. An everyday
example of this would be with social media. Posting an
image onto a social media site from your phone is
uploading it as it has loaded from your phone onto the site. It doesn’t just have to be images
though, it can also be videos and files. This is quite a small-scale example; a larger scale
example would be when businesses upload lots of files onto a server for their customers to
see. The time it takes for something to be uploaded can vary depending on the connection,
the size of the image or file and what is being used to upload. For example, a smaller file
would upload quicker than a larger file however using a newer model of computer, for
example, would decrease the time it takes to upload a file. Having a stronger wifi
connection would also help.

File Transfer Protocol (FTP): File transfer protocol is a software used

for transferring files. It can be used to transfer the files between
computers but it’s mainly used for uploading files from a computer
onto a websites server. This means that web pages can be created on a computer and
easily uploaded straight to the server without any other sites needed. However, this can only
be done if you log into the host via the file transfer protocol client programme as this ensures
that only the people with access can upload to the sites. After logging in this is where they
can see the files that are already there and they can edit them, delete them, add to them or
even just move them around. There are many different FTP clients which all work in a similar
way and most of them are even free to use but not all of them. The ones that do charge
tend to offer out a free trial of the software so that the user can see if that particular one is
the one that they want to use and buy.

WEB PAGE:

When creating a webpage, the basic coding will be needed first and then it is
from here that it can be changed. It will also need to be set out in the
appropriate way using the head, body, background colour, background image
and page title. These can then be altered and separated by divs. It has to be set
up in the correct way making sure that any opening brackets are always closed
off otherwise it won’t be read properly and it won’t work. When it comes to the
HTML coding, the various parts are represented by tags such as ‘H1’ and ‘P’ and
although these are shown in the coding they are not displayed by browsers. The
browsers show the content rather than the tags.

For example:

The blue text in the brackets in the coding is what can be changed. It involves the
background colour, the heading colour, how the heading is aligned, which font family is
used and the size of the font used. Each one can be changed and it alters the design. For
example:
 Background Colour:

When changing the

background colour,
you need to change
the text in between the
brackets within the
‘body’ section of the
coding. This part has to
be changed to a
colour that will be recognised for example when I tried the
example on the w3schools website I tried the colour ‘peach’
and it did not recognise it so it chose white instead. Also, when
writing the colour, you have to make sure you spell it correctly
and keep all the other parts of the coding in there such as the
colons and semi colons. The closing bracket is also important as
then the site can recognise which part of the coding belongs to
which part of the design. So, in the example the original colour
was ‘lightblue’ and I changed it to purple by deleting that text and adding my own. There
are also other ways to write the colour for example using an hexcode instead for example
blue would be ‘#0000FF’. There is also a decimal code that can be used and again for blue it
would be ‘(0,0,255)’.

Heading Colour:

When changing
the heading
colour, you need
to change the text
in between the
brackets in the
‘h1’ section which
includes
everything to do
with the heading.
In the example,
there are only two parts of the heading that can be
changed in the coding and one of those is the heading
colour. To change this, it is similar to the background
colour as you can choose which colour you want it to be
however it has to be one that will be recognised. I
changed it from white to pink. This can either be done with
words, the hex code or the decimal code. You also have
to make sure that the colour is written in the correct
section and that the colons and semi colons are correct too and that the brackets enclose
all of the coding for the heading.
 Alignment:

Text alignment
is the
placement of
the text on the
page, for
example
whether it is
central or to the left etc. For the heading alignment, this is
again found in the ‘h1’ part of the coding within the brackets
and can be changed by writing where you want the text to be
aligned. From the example I changed it from ‘centre’ to ‘right’
and then when I ran the example that’s where it moved to. This
is good for covering the whole page sop instead of having all
the text in the middle you could have in along the sides as well.

Font:

For the font there are two types that it can be, it can either
be the generic family such as ‘serif’ or ‘monospace’. These
are a set of fonts that all look similar. It can also be a
specific font family such as ‘ariel’. Using a font family gives
the server a better chance of finding a font that it supports
as it has other ones to fall back on. To do this you have to
start off with the font that you would like but end it with a
font family so that it can try and find something similar. For example: ‘font-family: "Times
New Roman", Times, serif’. The font style can also be changed for example, to italic.
When it comes to changing the size, it can either be changed to absolute size or relative size.
Relative is easier for the user as the size will change with the browser, with absolute, it won’t. If
no font size is specified then 16px will automatically be chosen, it can be changed by
adding to the font details how big or small you want it, on the example I chose 20px.
 Within the
coding, images,
videos, tables
and hyperlinks
can be added.
For example, a hyperlink for a button can be added
with different scripting. To add a table, first of all it
has to be set up with the correct tag which looks like
this: <table>. Each part of the table is then set up
with a different tag for example the rows are <tr> and a data cell is <td>. For example:

</tr>
<tr>
<td>Jill</td>
<td>Smith</td>
<td>50</td>.

For a link to be added it needs to be set up with a <a> tag. A hyperlink can either be a link to
an image, another page or another document. It must be set up with a closing tag at the
end so that it is clear where the link ends. For example: <a href="url">link text</a>.

Images are used to add design and detail to the webpage and are defined with a <img>
tag. The coding for an image looks like this: <img src="pulpitrock.jpg" alt="Mountain View">
The ‘src’ part of the coding is the link to the image and the ‘alt’ attribute is there to describe
what the image looks like incase for some reason the user can’t see the image.

METADATA

Metadata is basically data that gives information about other data. For example, author,
date created, date modified, etc. This makes it easier to find certain documents if there is a
lot of data to be dealing with. Metadata is also used to describe the contents of a web
page in something called ‘webtags’. These basically sum up the whole page into tags and
these are used to decide what websites come up when the user searches for something.
These can be changed by the creator of the website so by adding more keywords into the
metatags make their website much more likely to come up when the user searches for
something. As this became more popular, matatags became less reliable as people were
changing them just to make their website more popular. Metadata can be created
manually, this way makes it much more accurate and personal however it can be created
by automated information processing which shows only the basic information such as file
size.

HTML:

HTML is hypertext mark-up language and XHTML is an extended version of this. XHTML is
basically identical to HTML however it is stricter. It is supported by all of the major browsers the
same as HTML is. The main differences are that HTML is a document file format whereas
XHTML is a markup language. When it comes to the coding for HTML it is much more flexible
whereas XHTML is more restrictive. The elements of HTML are made up of three main
components; element tags, the data within the tags and the graphic content whereas
XHTML documents only have one main element and everything must be contained within
quotation marks. The elements in XHTML always be closed, in lower case and properly
nested. If not then it will not be recognised. An example of it being properly nested is:
<b><i>This text is bold and italic</i></b>.

HTML can be converted to XHTML by adding ‘<!DOCTYPE>’ to the first line of every page,
changing all the element names to lowercase and making sure that all of the empty
elements are closed. An xmlns element must also be added to the html element of every
page.

CSS:

Cascading style sheet is used to describe the presentation of documents in markup

language. It is most often used to set up the visual aspects of a web page such as the
background colour, font, text colour and font size. It is used to separate the presentation
from the content so that both can be seen and edited but are never combined. This
improves the accessibility and control that can be had over the aspects. CSS works by being
read by the browser and then it formats the HTML document depending on the information
on the style sheet. It can be added either by an external sheet, and internal sheet or an inline
style. Inline sheets are used by adding the style attribute to the relevant element. An external
sheet can be written in any text editor and should not contain any html tags. Internal sheets
are defined within the <style> element inside the head section of the html page, for
example:

<head>
<style>
body {
background-color: linen;
}

h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>