Victoria Holt

Structure for Web Pages Unit 59/Assignment 1

Terminology
Web Authoring:
Web authoring is a grouping of software which can be used so that a user of a website can
develop it in a desktop publishing format. Automatically the software creates the correct
HTML coding for the standard layout of the web pages but it will also depend on what the
user designs. Some of these examples include Dreamweaver and Serif Web Page Plus. You
can get some authoring softwares which are online and some which are offline. Some
advantages of using web authoring is that you can set templates on the pages so the
website is consistent throughout and you can set up hyperlinks/hotspots. You can also add
multimedia onto the web pages. However, some disadvantages include having a knowledge
of HTML to get over any formatting problems and you may need some training on how to
use the software.
Weebly is also a web authoring site, for this website you dont need to know
any coding you just simply drag and drop documents/photos onto each web
page.

Websites/sites:
It is known to be a place in which maintains one or many web pages that are connected to
the internet. They are usually made up of information text, photos, videos or links. A
website normally has a home page, main sections and subsections. This means that when
you click on something on the home page it will take you to one of the main sections and so
on. This type of structure is easy for the user to navigate with and find what they are looking
for. Websites can be made about anything such as shops, places and used for anything like
researching or gathering information.
A website can be made up of several pages, which has navigation so that you move around
the site without any trouble. Everyone uses websites now as the younger generation have
grown up with them. People anywhere in the world can see the website but they have to be
connected to the internet and know the domain name/address. In order for web pages to
work they will need to be set up using a domain, these can be made and bought online.

Uploading:
This is where a file can be transferred from one computer to another or when you upload
something to a website such as YouTube, where you upload videos for others to see. You
more commonly hear it that uploading is to send a file and downloading is to receive a file. If
you do these things at the same time it causes slower transfer speeds especially if the
internet connection is weak or slow. Downloading happens more than uploading as most
files are located on many internet servers.
One of the things which can effect uploading speed is the size of the file. The bigger the file
size the longer it takes to load and this means they will need a faster speed to upload
effectively.

Victoria Holt

File transfer protocol (FTP):

FTP is just a quick and easy way of editing/uploading files on a certain website. This is used
for transmitting files between computers however its works over IP connections. An
example of this is where you can create web pages on the computer to add to any website
but you can upload them to a hosting sever. On the hosting server it will ask you to log in
with a username, password and host company. This is done so that other people cant
upload files to anyone elses website.
Most FTP clients are free to download but some you may have to pay for. Some of them
give you trail periods which gives you a chance to try out the software at no cost, but only
for a certain amount of time. Each software has slightly different features yet they all have
the same purpose.
A website/browser works by gathering all the HMTL codes from the
domain and connecting them together. When this occurs it means
anyone will be able to use or find the website.

Web page
Web page construction:
One way in which a web page can be constructed is by hand-writing HTML coding, this
means that you manually code all the elements which make up a single web page. You can
also use programs such as Dreamweaver or Flash. Dreamweaver uses a thing called
automatic created coding and flash uses added ActionScript. In a basic set up of a web page
you can change the colour of the background, fonts and layouts. You will find that each web
page has a main title and logo at the top, along with a navigation bar images and lots of
information text. When a web page is shown on a computer it is more spread out than it
would be if you saw it on a mobile device. Below is an example of some HTML coding, along
with captions describing what each line is and what its for.
This tells the browser its a HTML file.
Opening body/html tags.
Heading 1 with opening/closing tags.
First Paragraph with relevant tags.
Closing body/html
tags.

Text:
In order to program or instruct a website you need a HTML tag. Tags work by changing the
coding inside them to change the action in the tag. For example, if you wanted to make the
text have paragraphs you simply add a tag such as <P> (opening tag) before the text and an
</P> (closing tag) directly after it. This opens and then closes the paragraph tag but if I
didnt close the tag then all of the text after that point will be in paragraphs.
There are many types of tags such as: <left> This tag aligns the text to the left </left>

Victoria Holt

<right> This tag aligns the text to the right </right>

<centre> This tag aligns my text to the centre </centre>
<i> This tag makes the text italic </i>
<B> </B> (Bold)
<P> </P> (Paragraph)
<u> </u> (Underline)
<h1> </h1> (Heading 1)
<h6> </h6> (Heading 6)
<hr> </hr> (Horizontal rule across the page)

Fonts:
HTML codes affect the font and determine things such as font size, colour, font style and the
overall look of the web page. In order to change the font, size or colour the tags will need to
be changed so that it says something along the lines of < size=12 font face=Times New
Roman colour=purple>This is some purple text.</font>. Most web browsers have their
font set at around 2 or 3. When it comes to the size you can set it to relative or absolute. I
think relative is better as it automatically resizes the font according to the users default size,
meaning that if the browser is set to have larger than normal text, it will change in
proportion to it. If there is a lot of text on a web page its better to choose a smaller font,
but not too small as it will be hard to read. If you have a bigger size, you will be scrolling for
ages which can be annoying sometimes.
Some of the common fonts used on web pages are Arial, Georgia, Times New Roman,
Verdana and Garamond because they are clear and easy to read. Font colour can now be
found in new browsers by using the names opposed to the HEX codes.

Colour:
In order to set the colour of a web page we use hex colour codes to describe them. As
shown below you can see that each colour shade has its own individual code. You will find
that each code will be the length of 6 digits either letters or number, sometimes they can be
a mix of both. Simple colours that are used every day such as black and white have codes
like (#000000) or white (#FFFFFF). Colours like purple or blue will use more complex codes.
As I have said above you can code font colours by writing the name of the colour, but you
can also just use the right colour code.
One thing which is vital when using these hex colour codes is the #, without it the colour
wont register on the web page. Some colours look better than others because of the shades
you are giving the browsers. Altogether there is 216 safe colours, these are the main colours
you will find when using HEX codes.
The tag you would use to change the web page background colour is <body bg
colour=aqua> , however if you wanted a background image you would use a tag like
<body background=image name>.

Victoria Holt

Images:
Just like text we will need edit the HTML coding to add a different tag (image tag). This will
tell the web page to show a picture and exactly which one it is. If we dont add this tag, then
it wont recognise it as an image. An example of a simple image tag is : <img
src=http://balletnews.co.uk/wp-content/uploads/2010/08/img_0847-1024x1024.jpg>. All I have
done is found my image on the internet and added the URL into the image tag. On my
website if I wanted to add an image with text and make it into a page button. I would just
change the tag slightly so it looks like <img src=link alt= Dancewear>.
If you want the image a certain ratio you would use a tag like <img src=image name
width=200 height=100>, and if you want to align an image to the left of your web
browser window you would use a tag like <img src=image name align=left>. If you want
to include text with the image you use a tag like <img src=image name alt=image of
dancer>.

Tables:
You can make any type of table for a web page, it can have as many columns/rows as you
like and it can be made on either word or in website creation software such as
Dreamweaver. The tag <tr> is used to divide the table into rows, the tag <td> divides the
table rows into table data and the <th> tag can divide a table row into table headings. These
tables have to then be coded and written in HTML. Some tables are very simple and coding
is quite easy to use and understand. More complex tables require a better understanding of
HTML coding.
Below is some coding that shows how a table in HTML can be coded: If I wanted a border on the table, I would add something at
the top of html coding along the lines of <table border="1"
style="width:100%">.
On the table you can also add titles, change the background
colour, and padding/text alignment.

Hyperlinks:
A hyperlink is described as text and an image you can click on, which then links to another
document/web page. In HTML coding the hyperlinks are described using <a> tags, then a
href attribute requires the URL/destination address, the link text is the part you can see. You
can also add colour to the hyperlinks so that when your mouse hovers over the text it
changes colour. In order to do this I will add a tag as shown in the image below left.
Hyperlinks mostly work by using coding and then adding URLs web addresses into the tag.
Hypertext is also another name for it and is a method of moving around on the web. Its
called hyper as you can go wherever you want by clicking on the links, with no set order.

Victoria Holt

Lists:
You can get tags which create lists, either ordered or unordered. The ordered lists are
normally numbered whereas the unordered list is just bullet pointed. The tags for an
ordered list are as shown below left and the tags for an unordered list are below right:
<OL>
<LI> Unit 1 </LI>
<LI> Unit 2 </LI>
<LI> Unit 3 </LI>
</OL>

<UL>
<LI> Unit 1 </LI>
<LI> Unit 2 </LI>
<LI> Unit 3 </LI>
</UL>

Language and terminology:

HTML is a basically coding which is used to make up a web page, however there is now a
newer version called HTML5. Web browsers read these HTML codes and render them so
that they can be then formed into a visual web page, which can be interacted with by
anyone. HTML is used to allow someone to create a website for a business or organisation
or just for information purposes. As long as you are connected to the internet you will be
able to view the website. There are many differences and similarities between the two like:
HTML:
HTML5:
Works with all old web browsers
Most of modern browsers have started
supporting HTML5 for example e.g. Firefox,
Mozilla, Opera, Chrome, Safari, Microsoft
edge, etc
JavaScript cant run in the browser at the
JavaScript can still run in the background.
same time.
Audio and video are not part of HTML.
Audio and videos are integral parts of
HTML5.
DOCTYPE is much longer as HTML is based
DOCTYPE is required to enable standard
on SGML.
mode for HTML documents.
Browser cache can be used as temporary
Web storage is available as client side
storage.
storage.
Full duplex communication channels can be
established with Server using Web Sockets.

Victoria Holt

Metadata:
To me metadata is known as data, which is about different assets within a web page or any
other interactive media. When you talk of metadata in terms of web pages it is made using
HTML coding. By using Meta tags you can see the information about what data the site is
showing. These are basically small tags within a website which enables search engines such
as Google to find out information quickly about what is on the website. Any of the different
browsers will search through a websites coding to find any metadata. They do this so that
the can see what information is included in the web page itself. This is so much easier than
the search engine looking at the coding as a whole, meaning that the web browser is then
rated higher.
One of the easiest ways of explaining this is by describing the metadata that is saved within
photo files. The data in these kind of files is when the date is given from when the photo
was taken and possibly the time as well. When you then open up the photos on the
computer you will find that this data is saved in the main photo file as an added extra. This is
the part, which is known as the metadata.
This meta element defines a description of your page:
<meta name=description content=Free Web Tutorials on HTML, CSS, XML and XHTML/>
This meta element defines keywords for the page:
<meta name=keywords content HTML, DHTML, CSS, XML, XHTML, JavaScript/>

HTML
Nature of HTML & XHTML:
The basic idea for HTML is to be designed for the data display. If for any reason when coding
you forget to close a tag with HTML then the web page should still work fine but it wouldnt
if it was XHTML. If you want to use the simply version of coding for everyday purposes the
HTML coding would be the best option to choose, because its not too complex. HTML is also
updated every few years so that they can make improvements.
XHTML is a mix of both HTML and XML. XML is designed to describe data. XHTML is
supported by most/all major browsers such as Safari, Firefox, and Google Chrome. When it
comes to coding with XHTML it is much more precise and wont work even if there is even
just a small error/problem with the coding. This makes people want to use HTML coding
more than XHTML. The people who mostly use XHTML are people who know a lot about
how to code as it wont work with even the slightest of problems.
An advantage of using XHTML over HTML is that it will be most used by servers and search
engines as it gets rid of any problems. However, dome sites dont like XHTML as its not
necessary for their purposes.

Victoria Holt

Features of HTML and XHTML:

The differences of XHTML to HTML is that they must be properly nested, always be closed
and must be in lowercase, however HTML coding has to include a HTML DOCTYPE at the
beginning, and start/end tags are not needed for every element in the coding. HTMLs
media type is text/html whereas XHTMLs is application/xhtml+xml. HTML is a Document file
format but XHTML is a markup language format. The function of HTML is the coding for a
web page but XHTMLs function is a stricter and XML based version of HTML. HTML has an
origin of 1987 and XHTML has an origin of the year 2000.
There are many versions of both HTML and XHTML these are; HTML 2, HTML 3.2, HTML 4.0,
HTML 5, XHTML 1, XHTML 1.1, XHTML 2 and XHTML 5.

How to use HTML and XHTML:

In order to convert from HTML to XHTML you need to firstly add a <! DOCTYPE> to the first
line of every page, add an xmlns attribute to the html element of every page, make sure all
the element names have lowercases, close all empty elements, make sure they have
lowercases again and quote all attribute values.
Html are short codes which are typed into a text-based file by a site author, this is what is
called the tags. The browser reads this file type and transforms it into something more
visual.
If youre on a web page and want to find the coding of a webpage using the HTML, then
there are several ways to find it in order to edit the page. In a browser like Microsoft edge
or chrome you click F12. The example below is the marple college website with the coding
on the right hand side.

Cascading style sheets

Nature of cascading style sheets (CSS):
The whole idea of CSS is so that you can add colour to a webpage, change the alignment and
change the font style/size. It is used to make a web page look more stylish and appeal to a
wider target audience, it makes your web page stand out without looking basic. It is also the
style language which describes the layout/configuration of HTML documents. By using CSS
you generally get more options to play around with and they are more accurate. Whatever
browser is used CSS will be compatible and will work perfectly fine with any. In order to
apply CSS to a HTML document you will have to use any of the three ways listed below such
as In-line , Internal or External.
To the right you can see an example of me adding CSS elements to the text so that it doesnt
look boring.

Victoria Holt

Features of CSS:
There are many advantages of using CSS on HTML documents, some of these include; more
accurate formatting, easier site maintenance and better web accessibility for all users.
Another advantage is that it is always being upgraded and improved, this means that when
your designing a web page you can make it look quite professional. There are also some
disadvantages of using CSS, these are that the browsers arent always supported and it takes
up a lot of time editing the text with the extra CSS codes.

How to use CSS:

In order to use CSS you will need to add tags, so that the web browsers know that you want
to format the layout and style of the website. To use CSS you need a good understanding of
how HTML works and how web page formatting works. CSS works by letting the web
browser know the colour, fonts etc you want when you render the web page. it also works
by the browser converting the mark-up language and CSS into a Document Object Model.
The DOM then represents the computers memory document; it basically combines the
document content with the style set by the CSS. The browser then has the job of displaying
the DOM content.