Assignment 1 – The Protocols of Web Coding

Terminology-
Authoring:

So, website authoring is basically the program used to code/create the website UI and
adding in all of the needed aspects to create the website. Moving into some more detail, I
will list about two different authoring programs before I move onto the next topic, so let's
start off with...

Dreamweaver that was designed by Adobe and this really is a top-ranking HTML program.
Integrates with other adobe products such as Adobe Fireworks which is really old but can be
very useful at some stages of development for creating websites and other software
programs. It even comes with a free trial download. Excellent HTML editor, XHTML editor
and is great for beginners to those not knowing HTML, and gaining in popularity with the
developers, as well companies and even some large corporations to use for individuals
doing web site building, maintenance and most importantly of all for managing large sites.
Pricing for this product is around £50 a month (CC) or for the payment of an old but ok
version £180 (CS6) for Windows and Mac.

Another highly regarded website authoring program back in the day is Ultra Edit for
Windows 98/Me/NT/2000/2003 and XP, which are all now ancient technology this one back
in the day was the hot shot for all developers but then it was put on pause for development
and got left behind, but was able to work with coding languages such as HEX, HTML, PHP,
Java, Perl and JavaScript and that’s pretty much it since it got left behind it didn't really
develop anything unique, you can download a free trial and give it a go yourself. Prices
around £73.90 for the program with a free upgrade available, for Windows 7, 8 and 10.

Sites:
A site is one of many different sites within the collection of the World Wide Web (get it
www.). Committees talk to each other about different things like looking up stuff like
football highlights and by looking at this it requires the user to use a unique website
addresses. Normally from the home page, you can get to all the other pages on their site via
the navigation bars. For example, as you can see below the website for Steam has the home
page address of "http://store.steampowered.com/". The home page address actually
includes a specific file name like that is known as "index.html" but, as in Steam's case, when
a standard default name is set up, users don't have to enter the file name (index.html).
Steam's home page address leads to hundreds of pages so it's important to have an
understanding of where you are on the site.
Since most sites a sort of flow chart effect to allow users to navigate around the navigation
bar but for website address its more of a path system, a Web site can be confused with a
Web server. For an example:
http://store.steampowered.com/tags/en/Casual/ - This website address is for casual games
and adds on the end of the normal home page of the website "tags/en/Casual/ which
means that the user has gone through tags on the navigation bar, and clicked on casual the
reason why the en is there is because the language is English and will show that particular
page in English.

Uploading:

Uploading is basically move one file from one location to the other but the final destination
would be the internet/cloud so from a network user's view, to upload a file is to send it to
another computer that is set up to receive the file. People who share files like on Microsoft
one drive, with others on bulletin board services upload files to the BBS. From an Internet
user's view, uploading is receiving a file from another computer and simply encrypting it
within the code.

File transfer protocol (FTP):

File Transfer Protocol is the Internet part for downloading and uploading files. For example,
if you are uploading a file to another site, you must usually have permission in advance to
access the site and the directory where the file is to be placed aka firewall or security
software.
When you send or receive an attached file with an e-mail note this is just an attachment,
not a download or an upload. However, many people use "upload" to mean "send" and
"download" to mean receive.
In short, from a computer workstation or small computer user's view, to upload is to send a
file and to download is to receive a file from other computers or the internet.

Web page-
Web page construction:

Website construction involves information architecture, website structure, UI (user

interface), navigation ergonomics, website layout, colours, contrasts, fonts and imagery as
well as icons if you really want to be stylish.
All these website elements combined together form websites. Often, the meaning of
construction is perceived solely as a visual aspect. In reality, website contraction includes
more abstract elements such as usability, ergonomics, layout traditions, user habits,
navigation logic and other things that simplify the using of websites and help to find
information faster.
 Now the joy of being a designer that does front end work as well as back end side of
websites is that its requires server-side scripting like php, asp and cgi, but for aspects that
are required for the visual side is HTML and CSS, user experience is enhanced with dynamic
JavaScript which is great.
All of these elements are combined with the key purpose of constructing a website in order
to create a great result that meets the goals set for the website and the client.

Text:
So, text is used as a format to show what format it's in where its placed and how its placed,
things like this have a huge effect on the user and how they see the website so having the
text right is what is needed in the majority of websites. Take websites like these:
https://www.winterworkweek.com/
https://www.peckhamlevels.org/
https://www.sketchgif.me/
These use text boxes in columns like I will be doing for mine, and so with this I have been
able to learn and adept my coding knowledge to understand how to create a text box and
enter the words needed for me to complete this challenge so, as you can see below...
<h2>Title <bold>Bold</bold> is in creation.</h2>

As you can see "h2" is just the name of the header and "Title" is just normal text but when
the code hits "<bold> it makes the next words in bold until "</bold>" with "is in creation" is
just normal text again and "</h2>" to end it off and something like this is created:
Title Bold is in creation.

Fonts:
Font or should I say typography is part of the design and uses typefaces as a means of
communication though different ways. If you've ever heard anybody in the class say "font"
or the design version "typeface".
There are different types of typeface for websites and on web pages, there are six types of
font classifications that you are likely to see:

• serif
• sans-serif
• monospaced
• cursive
• fantasy
• script
There are also a number of other font classes that are offshoots of these. Fonts are similar
to serifs, but they all feature a recognizable design are shown in different ways to be put
into classes.

Websites today, serif and sans-serif are the two most common font classifications that are
used, and the most common font is Helvetica...boring...
Moving onto coding, I was able to understand what was being shown to me when
developing code based round different fonts and how to use this to develop websites.

Here is some CSS code for fonts, so "p" is symbolizing a hero which is the paragraph section
for the html code and using "font-family" it can make the text in "p" become "Times New
Roman" and "Times" is just used as an alt and setting the text type to serif.
p {
font-family: "Times New Roman", Times, serif;
}

Colour:
Colour is going to be in RGB as it always has been for websites and by doing this I can focus
on RGB HEX colours for coding, colour isn't really a hard topic to master since in coding all
that is needed is...
So here we are with another piece of code, "h1" is just the name of the header and "style" is
for what it's going to look like so is it going to have colour a font size or a specific font. Next
is the colour section where hex colours could be used or worded colours and then after that
the text that is going to be used.
<h1 style="color:blue;">Testing in Progress</h1>

The real test is creating colour schemes for the website and seeing if they work and draw in
the user so that they start browsing at the products on offers.
Images:
Just like websites have URLs, images on the web also have URLs. Image URLs typically end
with the .jpg, .png or .gif file extension. The src attribute sets the source for an image
element. Image elements are self-closing, which means they do not need a closing tag.
Things like logo's, banners, icons, background and general images are needed for website
creations and are normally focused on when developing websites on different projects for
clients and with this developer can code aspects as the designers have designed.

As you can see below the "img" part means img and is used to set this line as a img line of
code, the "src" is the URL of the image and after that is the name of file.
<img src="Testing.jpg">

As you can see coding imagery is easy as long as you know the URL of the image otherwise
you will be lost and unable to add in any imagery and the code will not work correctly.
Tables:
The CSS box model is the foundation of layout on the Web and is perfect for tables, each
element is represented as a rectangular box with the box's content, padding, border, and
margin built up around one another like the layers of an onion. As a browser renders a web
page layout, it works out what styles are applied to the content of each box, how big the
surrounding onion layers are, and where the boxes sit in relation to one another.

The width and height properties set the width and height of the content box, which is the
area in which the content of the box is displayed this content includes both text content
inside the box, and other boxes representing nested child elements.
Padding refers to the inner margin of a CSS box between the outer edge of the content box
and the inner edge of the border. The size of this layer can be set on all four sides at once
with the padding shorthand property, or one side at a time with the padding-top, padding-
right, padding-bottom and padding-left properties.
The border of a CSS box sits between the outer edge of the padding and the inner edge of
the margin. By default, the border has a size of 0 making it invisible but you can set the
thickness, style and colour of the border to make it appear. The border shorthand property
allows you to set all of these on all four sides at once, for example border: 1px solid black.
This can be broken down into numerous different longhand properties for more specific
styling needs:

o border-top, border-right, border-bottom, border-left: Set the thickness, style

and colour of one side of the border.
o border-width, border-style, border-colour: Set only the thickness, style, or
colour individually, but for all four sides of the border.
o You can also set one of the three properties of a single side of the border
individually, using border-top-width, border-top-style, border-top-colour.
The margin surrounds a CSS box, and pushes up against other CSS boxes in the layout. It
behaves rather like padding; the shorthand property is margin and the individual properties
are margin-top, margin-right, margin-bottom, and margin-left.
HTML INPUT:
div id="wrapper">

<header>Header</header>

<main>Main content</main>

<footer>Footer</footer>

</div>

CSS INPUT:
/* General style */

body {

margin: 0;

#wrapper * {

padding: 20px;

font-size: 20px;

border: 20px solid rgba(0,0,0,0.5);

/* specific boxes */

#wrapper header, #wrapper footer {

background-color: blue;

color: white;

#wrapper main {

background-color: yellow;

#wrapper header {

#wrapper footer {

Hyperlinks:

A webpage can contain various links that can take users directly to other pages and even
specific parts of pages, these links are called hyperlinks.
Hyperlinks allow users on the website to navigate between pages by clicking on words and
images. A link is specified using HTML tag <a>. This tag is called anchor tag (that's why it’s an
"a") and anything between the opening <a> tag and the closing </a> tag becomes part of the
link and a user can click that part to reach to the linked document. Following is the simple
syntax to use <a> tag.

HTML INPUT:
<html>

<head>

<title>Hyperlink Example</title>

</head>

<body>

<p>Click following link</p>

<a href = "https://www.Ivanisthebest.com" target = "_self">You want to click on this</a>

</body>

</html>

CSS INPUT:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}

a:hover, a:active {
background-color: red;
}

Language and terminology:

Didn't know that you could do this, users are able to set the language of the page. This can be
done by adding the lang attribute to the opening HTML tag as shown here.
<html lang="en-US">
HTML is a computer language that is used for website creation. These websites can then be
viewed by anyone else connected to the Internet. It is relatively easy to learn with the basics
being accessible to most people and is quite powerful in what it allows users to create. It is
constantly undergoing revision and evolution to meet the demands and requirements of the
growing Internet audience.
The definition of HTML is HyperText Markup Language.

• HyperText is the method by which you move around on the web by clicking on
special text called hyperlinks which bring you to the next page. The fact that it is
hyper just means you can go to any place on the Internet whenever you want by
clicking on links and that there is no set order to do things in.
• Markup is what HTML tags do to the text inside the bracket code.
• HTML is a Language, as it has code-words and syntax like any other language.

CSS means Cascading Style Sheets, is a simple design language intended to simplify the
process of making web pages presentable that works with HTML.

CSS handles the look and feel part of a web pages. Using CSS, I am able to control the colour
of the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colours are used, layout designs, variations in display
for different devices and screen sizes as well as a variety of other effects.
Metadata:
Metadata is data that describes data, and HTML has an official way of adding metadata to a
document the <meta> element.
<meta charset="utf-8">

This element simply specifies the document's character encoding the character set that the
document is permitted to use. utf-8 is a universal character set that includes pretty much
any character from any language. This means that your web page will be able to handle
displaying any language; it's therefore a good idea to set this on every web page is created.

<meta name="author" content="Ivan Foy">

<meta name="description" content="Ivan is the best.">

Specifying an author is useful in a few ways, it is useful to be able to work out who wrote
the page, if you want to contact them with questions about the content. Some content
management systems have facilities to automatically extract page author information and
make it available for such purposes.

HTML-
Nature of HTML (hypertext markup language) & XHTML (extensible hypertext markup
language):
HTML is a computer language that is used for website creation. These websites can then be
viewed by anyone else connected to the Internet. It is relatively easy to learn with the basics
being accessible to most people and is quite powerful in what it allows users to create. It is
constantly undergoing revision and evolution to meet the demands and requirements of the
growing Internet audience.

The definition of HTML is HyperText Markup Language.

• HyperText is the method by which you move around on the web by clicking on special
text called hyperlinks which bring you to the next page. The fact that it is hyper just
means you can go to any place on the Internet whenever you want by clicking on links
and that there is no set order to do things in.
• Markup is what HTML tags do to the text inside the bracket code.
• HTML is a Language, as it has code-words and syntax like any other language.

Features of HTML and XHTML:

HTML consists of a series of short codes typed into a text-file by the site author these are the
tags. The text is then saved as a html file and viewed through a browser like Internet Explorer
or Google Chrome. This browser reads the file and translates the text into a visible form,
hopefully rendering the page as the author had intended.

How to use HTML and XHTML:

The tags are what separate normal text from HTML code. These allow all the cool stuff like
images and tables and stuff, just by telling your browser what to render on the page. Different
tags will perform different functions. The tags themselves don’t appear when you view your
page through a browser, but their effects do. The simplest tags do nothing more than apply
formatting to some text, like this:
<b>These words will be bold</b>

Cascading style sheets-

Nature of cascading style sheets (CSS):

CSS means Cascading Style Sheets, is a simple design language intended to simplify the
process of making web pages presentable that works with HTML.

Features of CSS:

CSS handles the look and feel part of a web pages. Using CSS, I am able to control the colour
of the text, the style of fonts, the spacing between paragraphs, how columns are sized and
laid out, what background images or colours are used, layout designs, variations in display for
different devices and screen sizes as well as a variety of other effects.

How to use CSS:

CSS is easy to learn and understand but it provides powerful control over the presentation of
an HTML documents. Most commonly, CSS is combined with the mark-up languages HTML or
XHTML.

So how it works is like this:

h1 {

color: blue;

background-color: yellow;

border: 1px solid black;

p {

color: red;}

So, from that code it tells the developer that h1 is blue with a background colour of yellow
and a solid boarder that’s black and the paragraph text colour is red, this is what it would
look like in HTML:
<html>

<head>

<meta charset="utf-8">

<title>My CSS experiment</title>

<link rel="stylesheet" href="style.css">

</head>

<body>

<h1>Hello World!</h1>

<p>This is my first CSS example</p>

</body>

</html>

Here you can see what h1 is and p but if you didn't know p stands for paragraph and h1
stands for a title with the line thickness of one.