Web authoring report

Terminology

Authoring
Multimedia authoring, which is also referred to as authoring software, is the
process in which a multimedia application is created. It refers to how the
final product is saved and how it is used. For example, if the product is being
used on a website, the product should be saved as an image and then HTML
coding.
Authoring consists of ordering, arranging and presenting information that is in the form of a
digital multimedia. It can combine text, audio as well as both still and moving images which
can consists of logos, main menu pages and index's’. The users of these products tend to
have more interaction.
Authoring can also be referred to as a programme such as dream weaver, where the user is
able to create a website by choosing a layout that is provided. It usually allows the user to
change the view from looking at the design and looking at the code that the software
provides.
Sites
A website appears on the internet when a domain name has been typed into a
search engine such as google. They usually consist of multiple pages that are
linked together and include features such as images, text and videos. A website
must have a hosting, meaning they must pay a certain amount of money in
order for their website to be displayed on a specific server, A server being a
computer that allows any websites to be saved on them due to them constantly being
online.
Websites are assessable to anyone around the world who has connection as long as they
type in the correct domain.

Uploading
Uploading is the process of data being loaded from one place to another. A common
example is seen when a photo or video is uploaded from a phone or computer on to a social
network site such as Facebook or Instagram. This would be a small scale of uploading. A
larger example would be when files or documents are uploaded to servers my businesses in
order for their customers to view them.
Depending on the internet connection the user has, the speed of uploading
will vary. For example, if the internet connection is strong then the file will
more than likely be uploaded faster than if the internet connection was weak. However, the
size of the file will also effect the speed in which the file is uploaded. If the file is large, then
a faster speed may be required in order for it to be uploaded successfully.
File transfer protocol
A file transfer protocol or FTP, is a programme or software that allows the user
to easily move files between computers as well as upload files from a computer
to a website server. If the user wanted to create multiple web pages, then an
FTP will be uploaded on to a hosting server without needing to access any extra
pages online. This can be done by logging into your hosting through the FTP
client programme. A user name, password as host will be asked for to make
sure that people cannot upload files onto anyone else’s website. Once the user has been
logged in their files will be available to view where they can either delete them, move them
and uploaded extra ones. There a multiple file transfer protocols that can be downloaded
from the internet. Most come with a free trial that allow the user to try and test the
software for a limited amount of time without buying the product.

Web pages
The basic coding will be need when a web page is being created, from there on it can be
changed to be made more advanced. The web page will need to be set in the appropriate
layout, using a heading, body, background colour, background image and a page title. Divs
can then be used to separate or alter them. For this to work correctly, they must be writing
in the correct way. For example, all open brackets must be closed. For HTML coding, the
various parts are represented by tags like H1 and P. however, these
are not displayed by browsers as they show the content rather than
the tags.
An example shows the typical layout for coding. The words that are
Highlighted in blue consists of the background colour, heading colour,
the alignment of the heading and the size of the font. These are the
codes that can be changed which alter how the web page appears.

Background colour
In order to change the colour of the background, the text between the brackets within the
'body' section of the coding must be changed to a colour that can be recognised. It is
important that the colour has been spelt correctly along with ensuring that all parts of
coding have been used, such as colons. It is also important that the closing bracket has been
used so that the software is able to recognise where the coding belongs. Rather than using
words, hexcodes can also be used. This is where letters and numbers are combined to
represent a colour, for example blue would be '#0000FF' Decimal codes can also be used
such as '(0.0255)' for blue. As seen on the example, I have changed the background colour
from 'lightblue' to 'pink' ensuring I have used the correct codes.

Heading colour
In the example, the heading colour has been changed from white to purple by changing the
text between the brackets in the H1 section. This particular section includes everything to
do with the heading. To change the colour of the heading, either hex code, decimal code or
words can be used. In this instance, I used words. As usual, you must ensure that the
bracket has been closed along with including all of the code such as colons.

Alignment
Alignment is where the text has been placed on the
website page e.g. centralized. When it comes to the
alignment of the heading, it can be changed in the 'H1'
section of the coding. For example, I have changed the
coding from 'centre' to 'left'.
Font
within CSS, there are two types of font families including, 'generic family' and 'font family'.
Generic family is a group of font families that share similar look e.g. 'serif', where as a font
family is a specific font such as as 'Arial'. If the name of the font family includes more than
one word then it should be put in quotation marks such as “Times New Roman”. This is seen
in the example below.

The font style can also be adjusted. This means that the text can either appear normal, italic
or oblique. When it comes to the size of the font, the value can be absolute or relative.
Absolute size is when the text has a specified size that does not allow the user to change the
size. However, this can be bad for accessibility reasons. Relative size is when the user is able
to change the text size in browsers.
Images
CCS can also be used to create image spirits which are a collection of images put into a
single image. They are used to help reduce the number of server requests as web pages
with lots of images can take a long time to load and generate multiple server requests. The
coding for an image consists of width, height and background as shown in the example.

The width and height defines the portion of the image that is desired where as the
background defines the background image and its position (left 0px, top 0px)

Tables
CCS can be used to help improve a HTML table. The table boarders can be adjusted by the
use of the boarder property. For example, ' r <table>, <th>, and <td> elements:' would be
used to create a black boarder.
The width and height of the boarder can be defined by the width and height properties,
which is seen below. In this paticular example, the width of the table is set to 100%, and the
height of the <th> elements to 50px.

The alignment of the table can also be adjusted. The text alignment property sets the
horizontal alignment (like left, right, or center) of the content in <th> or <td>. By default, the
content of <th> elements are center-aligned and the content of <td> elements are left-
aligned. The vertical align property sets the vertical alignment (like top, bottom, or middle)
of the content in <th> or <td>. By default, the vertical alignment of the content in a table is
middle (for both <th> and <td> elements).

Hyper-links

A hyperlink, also known as a link, is a reference to data that the reader can
directly follow either by clicking, tapping, or hovering. A hyperlink points to
a whole document or to a specific element within a document. Hypertext is
text with hyperlinks. The text that is linked from is called anchor text. A
software system that is used for viewing and creating hypertext is a
hypertext system, and to create a hyperlink is to hyperlink. The document containing a
hyperlink is known as its source document. For example, in an online reference work such as
Wikipedia, many words and terms in the text are hyperlinked to definitions of those terms.

language and terminology

Meta-data

meta data is data that provides information about other data". Three distinct types of
metadata exist: descriptive metadata,structural metadata, and administrative metadata.

Descriptive metadata describes a resource for purposes such as discovery and

identification. It can include elements such as title, abstract, author, and keywords.
Structural metadata is metadata about containers of data and indicates how compound
objects are put together, for example, how pages are ordered to form chapters. It describes
the types, versions, relationships and other characteristics of digital materials.
Administrative metadata provides information to help manage a resource, such as when
and how it was created, file type and other technical information, and who can access it.

HTML

HTML, or hyper text mark up language is the standard mark-up language for creating Web
pages. Using mark-ups, HTML describes the structure of Web pages. The elements, which
are represented by tags, are the building blocks of HTML pages. They label parts of content
such as the 'heading' or 'paragraph'. Browsers do not display the HTML tags, but use them
to render the content of the page. A simple HTML document will look something similar to
this;

HTML tags usually come n pairs such as <p> and </p>. The first tag in a pair is the start tag,
which can also be known as an opening tag. The second tag is the end tag or closing tag. The
end tag is written like the start tag, but with a forward slash inserted before the tag name.

The purpose of a web browser such as Chrome, Firefox or Safari, is to read HTML documents
and display them. The browser does not display the HTML tags, but uses them to determine
how to display the document.

XHTML

XHTML, standing for Extensible Hyper Text Mark-up Language, is almost identical to HTML,
however, is stricter than HTML. It is defined as an XML application and is supported by all
major browsers. HTML documents are well-formed and may therefore be parsed using
standard XML parsers, unlike HTML, which requires a lenient HTML-specific parser.

The Most Important Differences from HTML include;

Document Structure

XHTML DOCTYPE is mandatory

The xmlns attribute in <html> is mandatory

<html>, <head>, <title>, and <body> are mandatory

XHTML Elements
XHTML elements must be properly nested
XHTML elements must always be closed
XHTML elements must be in lower case
XHTML documents must have one root element

Where as only some elements must be properly nested for HTML, all elements must be
properly nested within each other for XTML. This is seen in the example below.

XTML elements and attribute names must also be written in lower case. The attribute
values must be quoted and cannot be minimised.

Cascading style sheets

A cascading style sheet or CSS is a style sheet language that is used for
describing the presentation of a document written in a mark-up
language.
CCS provides web developers with a standard way to define, apply and
manage sets of style characteristics. It does this by through a technical
model created on a hierarchical scope of effect separation of style from
content, and a well-defined set of published standards.

Cascading, in cascading style sheets is how property values are used in the context of
parent/child hierarchy of the Web document. “Child elements either inherit or override
property values bound to their parent elements.” A style sheet is the “encapsulation of
style rules” in a centralized location, this could be the head section of the HTML document
or in a separate linked file. The Web browser will then read these styles and will apply the
specified formatting rules before displaying the content.
CSS describes how HTML elements are to be displayed on screen, paper, or in other media.
It can save a lot of work and can control the layout of multiple web pages all at once.
CSS can be added to HTML elements in 3 ways:
•Inline - by using the style attribute in HTML elements
•Internal - by using a <style> element in the <head> section
•External - by using an external CSS file
 Sources

https://www.w3schools.com/html/html_css.asp

https://en.wikipedia.org/wiki/HTML

https://en.wikipedia.org/wiki/Cascading_Style_Sheets