Web Authoring

Terminology
Authoring
Authoring when used in computing is the process of composing a courseware, web page, or a
multimedia application (presentation) with text, sound, still and video pictures, and animation.
Authoring is the use of different assets used together to create a piece of multimedia work, so that
they all come together to make a final product, such as a poster or a slideshow. Authoring refers to
how the final product is saved and used. For example, a website will need to be saved as different
images and then in something that is called HTML coding. Yet a slideshow could be saved and
formatted as a slideshow for a website, which is a save format available in the file save menu in
PowerPoint.
An example of authoring software is Dreamweaver. On Dreamweaver, the
user is able to create and design a website by dragging pictures etc. And by
editing html. The user is able to look at both html and the website design
at the same time as well as just coding or just the website design. This can
also be achieved on the website, Weebly. On the website,
the user can edit the website by dragging and dropping
different assets from a large variety of a list of different
assets on the left. The user is also able to edit html of
their website on Weebly.
Dreamweaver
Adobe Dreamweaver is an application that web designers and
developers can use to create websites and applications to be
used across multiple targets such as browsers, devices, and
tablets. Dreamweaver can be used be both experienced web
designers and novices in web authoring. Dreamweaver uses a
WYSIWYG interface which stands for What You See Is What
You Get, this means that one is able to create a website visually
and be able to see the results on ones computer monitor as they work. Dreamweaver lets the user
create Bootstrap documents and also allows the user to edit existing web pages created using
Bootstrap. Bootstrap is the most popular, free, HTML, CSS, and JavaScript framework for developing
responsive, mobile-first websites. The framework includes responsive CSS and HTML templates for
buttons, tables, navigation, image carousels, and other elements that you can use on the users web
page.
Sites
A site is a collection of web pages (documents that are accessed through the internet). A web page
is what you see on the screen when you type in a web address, click on a link, or put a query in a
search engine. A web page can contain any type of information, and can include text, colour,
graphics, animation and sound.

All websites have a home page, which should be used to introduce the user as to what website
offers in terms of information or other services. From a websites home page,
the user should be able to click on link to reach other sections of the website. A
website can consist of just one page, or of tens of thousands of
pages, it all depends on what the site owner is trying to
accomplish. For example, the website Wikipedia has 37,873,125
and is still growing, whereas the KITKAT Android website only has
one page.

An example of a website structure should always start with

the websites home page/ index page. This is the page that
the website user will normaly be directed to first before any
of the other pages and so this page is usually the most
important since it is what all users will see first and should be
asthetically pleasing so that the user wishes to view more of
the site. From the home page the user should then be able to
navigate around the rest of the website through hyperinks which should be clearly displayed
on all pages of a website.
Uploading
Uploading is the transmission of a file from one computer system to
another, usually a larger computer system; it can also be to a bulletin
board service, a mainframe, or a network. For example, if the user used a
personal computer to log on to a network and they wanted to send files
across the network, they must upload the files from their PC to the
network. From a network users point-of-view, to upload a file is to send
it to another computer, which is set up to receive it. People who share images with others on
bulletin board services (BBS) upload files to the BBS.
In short, from the ordinary workstation or small computer user's point-of-view, to upload is to send
a file.
File transfer protocol (FTP)
The File Transfer Protocol (FTP) I a standard internet protocol for transmitting files between
computers on the internet over TCP/IP connections.
FTP is a client-server protocol that relies on two communications channels between client and
server: a command channel for controlling the conversation and a data channel: for transmitting file
content. Clients initiate conversations with servers by requesting to download a file. Using FTP, a
client can upload, download, delete, rename, move and copy files on a server. A user typically needs
to log on to the FTP server, although some servers make some or all of
their content available without login, also known as anonymous FTP.
FTP sessions work in two different ways: passive or active modes. In
passive mode, the server uses the command channel to send the client
the information it needs to open a data channel. Because passive mode
has the client initiating all connections, it works well across firewalls and
Network Address Translation (NAT) gateways. In active mode, after a
client initiates a session through a command channel request, the server
initiates a data connection back to the client and begins transferring
data.

Web Page
A web page is a document commonly written in HyperText Markup Language (HTML), which is
accessible through the internet or other networks using a browser. The way the user accesses a web
page is by entering a URL address. A web page may consist of text, graphics and hyperlinks to other
web pages and files. Web pages can consist of several elements including CSS, images, and
JavaScript. These can be viewed by viewing the source code of a web page.
Although the body of a web page is created using HTML. HTML code can
be created using an HTML editor and written by a human or generated
using server side scripts or other scripts. Usually a static or human
generated web page ends with a .htm or .html file extension. For
example, a static or human generated page might have the file name
"webauthoring.htm". Whereas pages created by a script can end in .cgi,
.php, .pl, .p, and other extensions.
Web Page Construction
The first step in creating a web page is determining which website building platform one is going to
use to create the website. A website platform is an easier way to create a website to the trickier
way of having to write out all HTML code, CSS and even have to use Flash. These methods took a lot
of time to learn and were difficult to master. Now content management systems (CMS) like
WordPress, Drupal or Joomla have made creating a website accessible to everyone. A CMS is a userfriendly platform for building websites and managing the users own online content instead of using
a bunch of loose HTML pages.
All web pages have the following basic structure:

HTML this is the code in which websites are built up in, it specifies that the code be for a
web page.

Head This contains the title of the page with code and CSS.

Body This is used to display the main web page content.

These can all be represented in HTML code through using the following Tags:
<html>
<head>
<title>...</title>
</head>
<body>...</body>
</html>

Web pages are built from tags. These tags are used to define what is on the page and how it should
be structured. There are two different types of tags that can be used, and all tags should be written
in lower case.
1

<h1> This is a heading </h1>

<hr />

The first line shows the first type of tag. It has an opening tag <h1> that then has text in the middle
This is a heading and a closing tag </h1>. This tells us that everything between these tags should be
treated as a level one heading (h1).
The second line shows the second type of tag. It does not have a closing tag since the tag is entirely
self-contained. The <hr /> stands for a horizontal rule, a line across the page.
Text Text
Through the use of HTML, text can be formatted in many different ways to change the style, size or
colour of a piece of text.

Header - <h?> </h?>

Within the header tag there are 6 levels off headings available, from h1 which is
used for the largest and most important heading, to h6 which is used for the
smallest heading.

Bold - <b> </b>

Text which is found in between the bold tags will be bold. This is used to make the
bold text stand out from the text around it, the same as in a word processor.

Italic - <i> </i>

The italic tag also works in the same way as a word processor, italics displays the
text at a slight angle.

Underline - <u> </u>

The underline tag is also the same as underline in a word processor. The underline
tag underlines text.

Lists - <ul> </ul> and <li> </li>

An unordered list starts with the <ul> tag. Each list
item starts with the <li> tag and each of the list
items will be marked with bullet points. Here is an
example of what the html code would look like of
the website.

Strike-out - <strike> </strike>

The strike-out tag puts a lines straight through the centre of the text, crossing it out.
Often used to show that the text is old and is no longer relevant. This can also be
achieved by using the tags <s> </s> instead.

Block Quote - <blockquote> </blockquote>

The block quote tag defines a long quotation, and the quote s displayed with an
extra wide margin on the left hand side of the block quote.

Small - <small> </small>

Instead of having to set a font size, one can use the small tag to render a section of
text slightly smaller than the text around it.

Font Colour - <font color="#??????"> </font>

This tag is used to change the colour of a few words or a
section of text. The 6 question marks represent the hex
colour code that is used to represent different colour values.
Here are some examples of colours and their hex values.

Font Size - <font size="?"> </font>

Font size is used to change the font size.

Centre - <center> </center>

The centre tag is used to make everything in between the tags centred (in the
middle of the page).

Images
In HTML, images are defined with the <img> tag. The <img> tag is empty; it contains attributes only,
and does not have a closing tag. The src attribute specifies the URL (web address) of the image. The
alt attribute specifies an alternate text for an image, if the image cannot be displayed. The alt
attribute provides alternative information for an image if a user for some reason cannot view it
(because of slow connection, an error in the src attribute, or if the user uses a screen reader) and so
if a browser cannot find an image, it will display the alt text.
For example:
<img src="url" alt="some_text">

Tables
HTML table tag is supported on all web browsers. The tag <table> defines a HTML table. A HTML
table consists of the <table> element and one or more <tr>, <th> and <td> elements. The <tr>
elements defines a table row, the <th> element defines a table header, and the <td> element
defines a table cell. Here is an example of a HTML table:

<table>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>

Hyperlinks
Links are found on nearly all web pages. Links allow the user to click their way from page to page
without having to constantly write in the URL for a new page.
HTML links are called hyperlinks. A hyperlink is a text or an image that the user can click on to jump
to another document/URL.
In HTML, links are defined by the <a> tag, for example:

<a href="url">link text</a>

The href attribute specified the destination address. The
link text is the thing that is shown on the website and what
the user will click on to get to another part of the website.
Language and Terminology -

Metadata The <meta> tag provides metadata about the HTML document, which is data about data. Metadata
will not be displayed on the webpage, but will be machine parsable. Meta elements are typically
used to specify page description, keywords, author of the document, last modified and other
metadata. The metadata can be used by browsers to determine how to determine how to display
content or reload the page; it can be used by search engines through keywords, and can be used by
other web services. Metadata is supported on all browsers. <meta> tags always go inside the <head>
element, for example:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>

HTML
HTML, also known as HyperText Markup Language is the standard markup language that is used to
create web pages. Along with CSS, and JavaScript, HTML is a cornerstone technology that is used by

most websites to create a visually engaging webpage, user interfaces for web applications, and user
interfaces for many mobile applications. Web browsers read HTML code and render them into
visible or audible web pages.
HTML elements form the building blocks of all websites. HTML allows images and objects ti be
embedded and can be used to create interactive forms. HTML is written in the form of HTML
elements consisting of tags enclosed in angle brackets (like <html>). Browsers do not display the
HTML tags and scripts, but use them to interpret the content of the page.
XHTML
XHTML, also known as Extensible HTML, is a hybrid between HTML and XML which is specifically
designed for Net device displays. XHTML is a markup language written in XML and is therefore an
XML application. XHTML uses three XML namespaces, which are used to qualify element and
attributes names by associating them with namespaces. Namespaces prevent identically customnamed tags that may be used in different XML documents from being read the same way. The three
XML namespaces used by XHTML correspond to three HTML 4.0 DTDs: Strict, Transitional, and
Frameset.
Features of HTML and XHTML HTML documents are composed of elements that have three components: a pair of element tags (a
start tag <?>, and an end tag </?>, element attributes given within tags and actual, textual graphic
content. HTML element is everything that lies between and including tags. (A tag is a keyword which
is enclosed within angle brackets).
XHTML documents have only one root element. All elements, including variables must be in lower
case and values assigned must be surrounded by quotation makes, closed and nested for being
recognised. This is a mandatory requirement in XHTML unlike HTML where it is optional. The
declaration of DOCTYPE would determine rules for documents to follow.
Cascading style sheets:
Nature of CSS Cascading style sheets, also known as CSS is a list of statements/rules that can assign various
different rendering properties to HTML elements. Style rules can be specified for a single element
occurrence, multiple elements, an entire document, or even multiple documents at one.