Protocols of Web Coding

Protocols of web coding
Jordan Layne
Terminology
Authoring
Web authoring is the act of creating a website, most of the time this tends to be done using a web
authoring software.
Web authoring software is a software that allows people to create a website, most of this software
is a type of coding/programming software that are tailored to web authoring and creating other
similar products, this is done by having the main bulk of the software be the code and having an
option to change view so the person making a website can look and see what they are actually
making allowing them to switch between the two views without having to export and run the
software. Examples of this software would include HTML which is a mark-up language that is very
common in the building of websites and XHTML which is a language in an XML format made to be like
the mark-up aforementioned language HTML; in addition to this, CSS is also used in combination
with HTML to make the website the designer makes look more visually pleasing and just better
overall.
Sites
A site, or more commonly named website is a collection of web pages under the same IP, these
web pages will often contain multimedia content such as Images, videos, text and audio to convey
information to the visitors of the site.
Sites are stored on networks, the most common/well known type of site are those that are stored on
the internet, however websites can also be stored on smaller networks like a WAN(Wide area
network) that may be used in a company or school, or a LAN(Local area network) which is a much
smaller, private network that only covers devices connected to a network that tends to be on a
single site; both of these aforementioned smaller/private network types would be a form of
intranet.
The way to locate a website would be by referencing its unique URL (uniform resource locator) that
has been assigned to the site so that users can locate it relatively easily.
Uploading
Uploading is the simple process of loading a file/set of files from one file, device or network into a
separate file, device or network.
The amount of data transferred through an upload can vary drastically, ranging from something as
basic you simply moving a photo on your computer from one file to another all the way to a website
owner for a company moving a bunch of data that contains information for new webpages and
modifications to their already existing pages from their computer onto the network that holds their
website.
File transfer protocol
FTP (File transfer protocol) is the standard way for files to be transferred from a server to a
computer that is connected to the server. Because this method has to be built on a client server, the
controls/data are separate between clients and the server.
For the most part the users on a site that utilise FTP have to sign in (SSL/TLS is the most used
transport layer security in combination with the FTP to protect password/username combinations by
encrypting the data to secure it) However, if the designer of the site that uses FTP decides to they
can configure the server so that anonymous users can actually connect to and use/download
whatever is on the server.
Web page
Web page construction
The construction of a webpage would require someone to design it in a web authoring software such
as HTML. This software is a type of coding/programming software that are made to make web
authoring the primary function/the most easy thing to, however creating other similar products is
still possible, the way the software operates is by having the code as the method to design the HTML
website and having a separate area on the side that gives instant feedback and allows the web <html>
<head>
<title>title text</title>
author to view what they are creating. <meta charset="utf-8"/>
<meta name="keywords" content=website, HTML, CSS, Metadata">
<a href=site_url>Link text</a>
An example of basic HTML and CSS code for a website would look something like: </head>
<body>
<header class=header_name">
<div class="row">
<h1>heading</h1>
<p>paratext</p>
CSS
<p>paratext</p>
<p>paratext</p>
<table style="width:25%">
<tr>
.Section_name {
<th>Firstname</th> background-color: #ffffff;
<th>Lastname</th> }
<th>Age</th>
</tr>
<tr> .Section_name h1 {
<td>Bob</td> font-size: 32px;
<td>Clarke</td>
<td>32</td>
margin: 0;
</tr> colour: #D3D3D3;
<tr> }
<td>Jennifer</td>
<td>Smith</td>
<td>36</td> .Section_name p {
</tr> font-size: 8px;
</table>
margin: 0;
<section class=section_name"> colour: #939393;
<div class="row"> }
<figure class="col-sm-6">
<h1>Image title</h1>
<img sirc=Site Image"> table, th, td {
<p>Image description</p> border: 1px solid black;
<p>Image description</p>
}
</figure>
</figure>
</div>
</section>
</body>
</html>
Text
Adding text to a page in a software like HTML is the easiest thing to do, adding text to a HTML
document can be done by simple typing in what you want and running the program, however if the
creator actually wants control over what the text looks like in terms of size, font and colour, they
will have to identify the text with a sequence name for the section of the page the text is in and for
better control and/or structure identify the text itself with a command like <hx></hx> or <p><p>.
In the previous slide code for text include:
Text identification and content Controls for what the text looks like
</head> .Section_name p {
<body> font-size: 8px;
<header class=header_name"> margin: 0;
<div class="row"> colour: #939393;
<h1>heading</h1> }
<p>paratext</p>
<p>paratext</p>
<p>paratext</p>
Colour
Controls over colours in HTML is done in CSS and can be done in two ways, one would be for the
colour-background command which allows for the background of a section in a document to be
set/controlled and the other one would be the regular colour command that, like the colour-
background command uses the selector to change the colour but for this command it does it for the
text only in that specified section or set of text.
Colour command Background-colour command

.Section_name p { .Section_name {
font-size: 8px; background-color: #ffffff;
margin: 0; }
colour: #939393;
}
Images
Images are added through multiple commands however the most common one to add an image along
side text would be the img command.
Image command structure

<img sirc=Site Image">
Tables
Tables are a way of storing information on a webpage in a simple, easy and organised way; tables
are added to HTML through the table command which you open with <table></table> add
sections/headings with <th></th> and add data with <td></td>.
Table command HTML CSS table design
<table style="width:25%"> table, th, td {
<tr> border: 1px solid black;
<th>Firstname</th> }
<th>Lastname</th>
<th>Age</th>
</tr>
<tr>
<td>Bob</td>
<td>Clarke</td>
<td>32</td>
</tr>
<tr>
<td>Jennifer</td>
<td>Smith</td>
<td>36</td>
</tr>
</table>
Hyperlinks
A hyperlink is a link to an alternate/separate website entirely on a different IP by changing the URL

the user is viewing when they click it, hyperlinks tend to do this in a completely new tab or window
rather than in the same tab/window the user is currently on; the way these are added in HTML is
through the hypertext reference command that is opened with the tag <a> and closed with </a>,
the way the hyperlink is referenced is by adding href=site url into the opening tag and if the
user wants to they could in between the opening and closing tag add text that will show up rather
than the url itself.
Hyperlink beneath title/heading

<head>
<a href=site_url>Link text</a>
</head>
Language and terminology
The language used to design a website is known as the mark-up language which is a language that
specifies the instructions the user can enter and how they will effect the output of the program, this
is because they send instructions to the program that theyre using which then converts it to
instructions for thecomputer.
Examples of different mark-up languages include but are not limited to: The multiple XML
languages, HTML+CSS which tend to be used together, Docbook, SGML, XUL, XBRL and parameter
value language.
The language tends to be defined at the start and end of the document like in HTML the opening is
<HTML> and the closing </HTML>.
Metadata
Metadata is usually something that defines how the content of the document is going to be without
the use of CSS, it also stores extra information that may not be displayed in the document when it is
running; the command is opened and closed within the tag with <meta>, which will have the data
inside before the closing > of the tag.
Metadata also defines the what keywords in a search will cause the website to be suggested to
people using a search engine, this is done by the person making the website when they add a meta-
tag to the website, just like every other piece of metadata, these tags will not be displayed on the
website but will allow for words the creator decides to tag the website with help with the location
of the website when the word in the tag is mentioned, these tags can be sorted into categories by
giving the tag list a name such as author to tag the web author or subject to describe the
subject of the site or even just keywords to add words that are related to the site.
Metadata that defines the character set that will be used.
<meta charset="utf-8"/>
<meta name="keywords" content=website, HTML, CSS, Metadata">
HTML
About HTML
HTML (hypertext mark-up language) is a coding language, more specifically, one of the
standard/most popular coding languages used in web authoring and creating web applications, the
other coding languages used to a similar degree being CSS and JavaScript.
The software allows for easy web authoring by giving the user the ability to create structured
documents that contain multiple forms of media such as, text, images, videos and interactivity with
ease, the language also allows for the author to structure the site in a stylish and professional
manner without too much hassle with commands made that allow you to alter the placement of the
websites components as may the case be with other coding languages.
HTML also allows the author to add links to other pages and allows the embedding of other programs
including other coding languages which makes the process of making the site that much easier for
the author.
XHTML
XHTML (extensible hyper text mark-up language) is a reformulation and extension of HTML document
types into applications of XML, the first version was a reformulation of HTML 4 into XML 1.0; XHTML
extends the capabilities of versions of HTML code.
XHTML is said to be the future of web authoring, bridging the gap between HTML(one of the current
most popular web authoring languages) and XML (A newer language that can be used for web
authoring but is more suited to making webpages and is easier for computers to read).
HMTL features
HTML has many features that are useful for web development including the basics such as header and footer which
allow the web creator to make to sections that are separate from the main body which also allows for them to be on
every page without them having to put it in every single time, headers tend to contain headings and banners, footers
tend to hold contact information such as social media accounts and email addresses.
It also has a feature called figure which allows the creator to add images and diagrams without affecting the text
bodies they have added to the webpage.
It also has the commands audio and video which are there so the designer can add video add audio to their site
and alter it as they see fit.
Section is another important command in HTML code as it allows the person designing a site to group components
together and affect them both on their own and simultaneously as a group with ease which also allows for the site to
be more organised in both how it looks and in the code making it easier to edit late, the command also makes it
easier to make the site aesthetically pleasing.
Nav is also used a lot in HTML, for websites especially since it allows for the developer to make links between
sections of the website which will mean that the visitors to the site they have created can go from page to page on
the website.
XHTML features
XHTML is different from regular HTML languages since it is made in the XML format as opposed to being just in the standard
generalised mark-up language that the original HTML languages are written in.
Despite the fact that XHTML has been made to be similar to HTML while utilising XML properties, the language is a lot more
restrictive than the original language it is based off as it does not allow mistakes in the code and/or structure of the code like
regular HTML code does and every element inside the code of HTML requires a opening and closing tag.
An XHTML document can only contain a single root element which is first element in the fil which is what defines what kind of
document the document the creator is making will be.
XHTML files are also easily edited in other XML tools.
XHTML is also a lot more structured and due to this allows for a more structured and aesthetically pleasing site to be made in
XHTML with more ease than in the regular HTML language which is less structured and consistent making it not only less
aesthetically pleasing in most cases but it also allows for the sites code to be easier to analyse, read and presentable to a
broader range of web browsers.
Even though XHTML is made to have a number of features equal to or above that of HTML, because of the format XHTML is
more widely applicable than HTML while keeping the same features.
How to use HTML HTML
<html>
<head>
Title
<meta charset="utf-8"/>
Meta data that defines
<a href=site_url>Link text</a> character set.
</head>
<body>
<header class=header_name"> Hyperlink
<div class="row">
<h1>heading</h1>
Paragraph
<p>paratext</p>
<p>paratext</p>
text
<p>paratext</p>
<table style="width:25%">
<tr>
<th>Firstname</th>
<th>Lastname</th> Identify table
<th>Age</th>
</tr>
<tr>
<td>Bob</td> Table headings
<td>Clarke</td>
<td>32</td>
identified
</tr>
<tr>
<td>Jennifer</td> Table
<td>Smith</td>
<td>36</td> data
</tr>
</table>
<section class=section_name">
<div class="row">
<h1>Image title</h1> Image
<img sirc=Site Image">
</figure>
</figure>
</div>
</section>
</body>
</html>
CSS
About CSS
CSS (cascading style sheets), is something used in conjunction with a mark-up language such as
HTML acting as the code that creates puts the elements into the document with a light structure and
CSS being the main code in terms of giving the content a structure and design by creating style
formatting that is stored in an a single external file, making formatting a HTML based website much
easier.
CSS was designed primarily to create separation, grouping and altering of content in a site to make
it more presentable by changing aspects such as the colour of elements, the layout of the page and
the font of the text included in the original file.
CSS Features
CSS has many features that help improve the structure of a document, some of these features are
done using the selector, which gives the user the ability to change the properties of elements in the
original document by simply specifying it in the CSS document, changes the user can make include
changing the Text Font + colour in a given section and doing the same for a background
image/colour in a given section of the document.
Other features of CSS that dont utilise the selector include Icons which allows the designer to add
images to a document and position them, links that allow the creator to make a link on the page
and alter the way the colours change for when the visitors to the website interact with the link and
also navigation bars which allow for the person to add text and links to a bar with customisation
over how it looks.
How to use CSS
CSS Background
.Section_name { colour change.
background-color: #ffffff;
}
.Section_name h1 {
font-size: 32px; Heading colour,
margin: 0;
colour: #D3D3D3; font size and
} position set.
.Section_name p { Paragraph text colour
font-size: 8px;
margin: 0; position and font size
colour: #939393; identified.
}
table, th, td {
border: 1px solid black; Table border
}
width set.
Sources
https://en.wikipedia.org/wiki/Markup_language
https://www.codecademy.com
https://www.w3schools.com
https://en.wikipedia.org/wiki/Computer_network

Protocols of Web Coding

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Protocols of Web Coding

Uploaded by

Copyright:

Available Formats

Protocols of web coding

In the previous slide code for text include:

Colour command Background-colour command

Image command structure

A hyperlink is a link to an alternate/separate website entirely on a different IP by changing the URL

Hyperlink beneath title/heading

XHTML files are also easily edited in other XML tools.

You might also like