21 Website Authoring

21.
1 Web Development Layers
A website is a collection of webpages in a virtual location on the World Wide Web. It is

accessible through a browser. The opening page of a website is called the homepage.
Hypertext Markup Language, or HTML, is the computer language used for website creation.
Cascading Style Sheets (CSS) is a simple design language used to make web pages more
presentable.
There are three layers in webpage design:

 Content layer
 Presentation layer
 Behaviour layer
Separating the layers gives the following benefits:

 Resources can be shared between files.
 Downloads are faster, as the resources are cached.
 A team of programmers can work on a website at the same time.
 There is an increase in search engine optimization (SEO) performance.
 External style sheets and script files are more accessible.
 There is a higher chance of backward compatibility.
The content layer or structure layer is the underlying

HTML code of the page. This is the foundation of the
webpage, and can include text, pictures and
multimedia elements.
The presentation layer dictates how the page looks to

visitors and is defined by CSS. The visual styles used
can be determined stylesheets.
The behaviour layer makes the webpage interactive. The webpage can be made to respond to
user actions, based on a set of conditions. JavaScript, PHP and CGI are languages that can be
used to change the behaviours of a webpage.
A simple text editor can be used to create websites. Users can opt for Notepad on Windows or
Text Editor on Mac. After the codes have been typed in, the file should be saved with an .html
or .htm extension. Double-clicking on the saved file will cause the webpage to be opened on a
browser.
Both HTML and CSS codes are based on tags – labels used to mark the beginning and end of an
element. The starting tag is marked between < and >. Ending tags are marked between </ and >.
Indentation should be used, to ensure code readability, as in the example below.
In certain situations, CSS tags may be enclosed with curly brackets – { and }.
21.2 Creating a Webpage
All HTML documents begin with a document type declaration <!DOCTYPE html>.
HTML comments can be added anywhere in the HTML document. They are identified by the  tags. Anything that is written in between these tags are ignored by the program. They
exist as memos and notes to programmers.
Some tags are standalone. There is no need to add any information to the tags to make them
work. Other tags depend on additional information, which are included in tag attributes. These
attribute values are included inside the opening tag.
All HTML tags and other codes are in American English. Codes that are spelt wrongly, or in the
British English spelling convention, would not be recognized.
Metadata is data that provide information about other data. It is usually hidden within
applications and stored within a document. These information can include:
 Your name and initials.
 Company name.
 Computer name.
 Location of document on local or network server.
 Attached template.
 Hidden text.
 Comments.
 Track changes.
 File properties.
 System summaries.
HTML metadata can contain several attributes and are defined by the <meta> tag. Charset
declares the document’s character encoding. By default, the charset for HTML 5 documents is
“utf-8”. Keywords show the search terms that would call up this webpage. Description shows a
general explanation on the website. Author shows the name of the author(s) of the webpage.
All HTML codes begin with <html> and ends with </html>. A header houses the title of the
website and is enclosed between <head> and </head>. The title itself uses the <title> and </title>
tags. Some other tags are included in the head tag. These include:
Tag Description Example
<base> Specifies a <base href="https://www.w3schools.com/images/"
default URL and target="_blank">
default target
for all links on a
page.
<link> Links an <link rel=” stylesheet” type=”text/css” media=”screen”
external file into href=”css/styles.css”>
the HTML file.
Most of the
time, the file
linked is a CSS
external
stylesheet.
<meta> Includes <meta name=” keywords” content=”computer science,
keywords and programming, code, STEM, tutorials, education”>
descriptions
that would be
used by search
engines to
discover and
search through
the website.
<style> Includes CSS <style type="text/css">
scripts. body {
background-color: #000000;
color: #FFF000;
font-family: Arial, Helvetica, sans-serif;
}
</style>
<script> Includes <script src="js/main.js">
JavaScript </script>
coding.
<title> Includes a name <title>WMSKLI Photography Club</title>
for the title of
the website.
The visible part of the HTML document is typed in between

<body> and </body>. Inside the body part of the HTML
document, the user can insert headers, marked <h1> to <h6>.
Paragraphs are defined by <p>.
A basic page in HTML will look like this:

<!DOCTYPE html>
<html>
<head>
<title>My First Website</title>

</head>
<body>
<h1>First Paragraph</h1>

<p >
This is my first website. It is completed using HTML. I put in lots of comments
into this
document.
</p>
<p >
I like using HTML to build webpages. It is very easy to use. I can build a lot of
nice webpages in HTML. I want to make the best website I can.
</p>
</body>
</html>
Text can also be formatted easily, using the following codes:

Code Description Example
<b></b> Bold – display the text in a thicker font. Bold
<i></i> Italics – Slants the text to the right. Italics
<u></u> Underline – draws a line beneath the text. Underline
<sup></sup> Superscript – raises the text in a smaller font. E=MC2
<sub></sub> Subscript – lowers the text in a smaller font. H2O
<s></s> Strikethrough – makes the text looks like it has been crossed Strikethrough
out.
<tt></tt> Teletype – simulates monospaced text created by a Teletype
typewriter.
In HTML, it is sometimes useful to show information in a table format. The tags used in a table
includes:
Code Description
<table></table> Creates a table.
<tr></tr> A row in the table.
<td></td> A table cell.
<caption> </caption> Table caption that is displayed above the table.
<table border> Draws a border around the table – 1 draws the borders, “” leaves
the borders out.
<thead></thead> Enclose a group of rows in a table as a header.
<tbody></tbody> Main body of the table.
<tfoot></tfoot> Enclose a group of rows in a table as a footer, such as last row for
summary.
<th></th> Define the content of a header cell.
The code below will generate the table underneath:

<table border="1">
<thead>
<tr>
<th>Cats</th>
<th>Dogs</th>
</tr>
</thead>
<tbody>
<tr>
<td>7</td>
<td>6</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Results</td>
<td>Cats win!</td>
</tr>
</tfoot>
</table>
Cats Dogs
7 6
Results Cats win!
CSS tags can be included into a HTML file in three ways:

 Inline text / embedded code.
 Internal stylesheet.
 External stylesheet.
Inline text or embedded code is defined within a tag. It should only be used if that style will not
be repeated anywhere on the webpage or website. The format used is <element style=”property:
value”>. There is no need for the usual CSS curly brackets.
Internal stylesheet is written in the head part of the HTML page. It must be repeated in every
webpage where it is used.
An external stylesheet is saved as a separate file. It is included into the HTML file as a link.
Column widths are fixed with the width element, followed by a colon and a percentage. To fix
the width of a column, the following codes can be used:
Keyword Values Description
auto Value determined by other CSS properties
px Pixels
em Relative to the font-size of the element
Inherit Inherits from the parent element
Initial Sets the property to default value
Unset Resets a property to its inherited value if it inherits from its
parent, and to its initial value if not
Text can be aligned using the text-align element. This is used in conjunction with the following
values:
 Left.
 Right.
 Center.
 Justify.
 Justify all.
CSS can also be used to set the vertical alignment in tables, using the vertical-align element, and
the following values:
 Baseline.
 Sub.
 Super.
 Text-top.
 Text-bottom.
 Middle.
 Top.
 Bottom.
 %.
 Length.
Different alignment styles can be selected for different needs. Tables that are included in formal
reports would require a more formalized look, thus a middle justified or middle left alignment
would be used. The inclusion of images in tables would also affect the alignment of the cells.
The most common cell alignments are shown in the image to the left.
There are two important codes that can be used to merge cells. These are colspan and rowspan.
These codes are used with a
positive integer with a value
of 2 or higher.
<td colspan=”2”> causes a

table cell to take up the space of two cells horizontally, and <td rowspan=”3”> causes a table cell
to take up the space of three cells vertically.
Table borders are one of the most common features controlled

by CSS. Cell padding and cell spacing are often confused with
one another.
Cell padding creates space inside a table cell, so that there is a

bit of white space between the data and the sides of the table.
Cell spacing is used to add a space between cells.
The code used for padding is:

<style type="text/css">
table.padded-table td { padding:10px; }
</style>

<table border="1" class="padded-table">
<tr>
<td>
Padded Cell 1
</td>
<td>
Padded Cell 2
</td>
</tr>
<tr> <td>
Padded Cell 3
</td>
<td>
Padded Cell 4
</td>
</tr>
</table>
By default, all table cells are spaced out from one another at 2px. Spacing can be controlled
using the following code:
table {
border-spacing: 0.5px;
}
To remove the border space, users can type in border-collapse: collapse; in place of the border-
spacing code.
Thus, an example of a table definition in CSS can look like this:

table.zebra {
table-layout: fixed;
background-color: #f4ffe4;
margin-left: auto;
margin-right: auto;
border-collapse: collapse;
}
table.zebra th {
background-color: #D5EDB3;
font: bold .63em Arial, Helvetica, sans-serif;
color: #993300;
line-height: 1.38em;
letter-spacing: .1em;
text-align: center;
padding:6px;
}
table.zebra td {
padding: 6px;
text-align: center;
font:.69em Arial, Helvetica, sans-serif;
letter-spacing: normal;
vertical-align: middle;
border-color: #f4ffe4;
border-width: 2px 2px 2px 2px;
border-style: solid
}
table.zebra tr {
background-color: #FFFFFF;
}
Images can be used to enhance a website. These images should be uploaded directly onto a
website first, using ftp technology. The image formats that are supported are:
 JPEG.
 GIF.
 PNG.
 SVG.
 BMP.
To insert an image directly into a webpage, we can use the img src tag, which is a standalone tag.
The source should include the full web address if it is embedded in another website. If it has
been uploaded directly into the current website, however, only the name will suffice. For
example, to insert an image called Pic1.jpg, the code used should be <img src=”Pic1.jpg”>. The
image can be positioned correctly on the website, using the align properties.
The alt property allows an image to be given an alternative name, which would appear on the
top left corner of the image box if the image does not load.
Images can be resized directly in HTML, or they can be resized first in an external application and
inserted into HTML. An image that has been resized in an external application will load faster.
This is because an image is loaded in its original size into HTML. To resize an image in HTML, the
width and height properties can be used. To change the size of flower.jpg to 400px x 200px, we
can use the code <img src=”flower.jpg” width=400 height=200 alt=”flower”>.
You can also resize the same image using CSS codes:
img.resize {
width: 400px;
height: 200px;
}
Animated images in gif format can be added to HTML webpages using the same codes.
HTML 5 supports three types of video files:

 MP4
 Ogg
 WebM
Now, the video tag is supported by most major browsers.

Browser MP4 WebM Ogg
Internet Explorer  X X
Chrome   
Firefox   
Safari  X X
Opera   X
The video tag is as follows:

<video width=”320” height=”240” controls>
<source src=” https://youtu.be/bWPMSSsVdPk” type=”video/mp4”>
Your browser does not support the video tag.
</video>
Similarly, HTMl 5 also supports three audio file types:
 MP3
 Wav
 Ogg
Browser support for the three types is:

Browser MP3 Wav Ogg
Internet Explorer  X X
Chrome   
Firefox   
Safari   X
Opera   
The code is:

<audio controls>
<source src=”song.ogg” type=”audio/ogg”>
<source src=”song.mp3” type=”audio/mp3”>
Your browser does not support the audio element.
</audio>
The controls attribute for both video and audio allow the users to add controls like play, pause
and volume.
Colours on a HTML page can be

defined by using RGB codes or
hexadecimal codes.
RGB stands for Red, Green and Blue.

Only these three colors are used to
produce all other colours required.
To use RGB colours, the three values

for red, green and blue colours must
be defined. These values determine
the amount of red, green or blue
colour needed in the colour required,
using numbers from 0 to 255. The
proper format of naming white in
RGB format is RGB(255, 255, 255).
The hexadecimal colour code, on the

other hand, is prefixed with a #, followed by a 6-digit colour code. It uses the hexadecimal
number system. This number system converts numbers to a base of 16, instead of the normal
base of 10 in the decimal system. Numbers 10 to 15 are represented by A to F respectively. The
numbering convention is as follows:
Decimal Hexadecimal
0 0
1 1
7 7
8 8
10 A
11 B
12 C
13 D
14 E
15 F
16 10
19 13
26 1A
63 2F
172 AC
When used in HTML, the first two characters

represent red, the next two characters
represent green and the final two characters
represent blue.
There are also currently 140 colour names that are recognized by HTML. These names can be
used directly in HTML codes, and include common colours like red, green, blue, yellow and black,
to name a few. A list of the updated colour names can be found online.
Background colours are set in the HTML body tag. The code for the tag is <body
style=”background-color: rgb (255, 0, 0);”></body> or <body style=”background-color:
#FF0000”;”></body>.
Font, header, paragraph and table colours can be changed, using the same color properties.
Lists are used to group together items or pieces of information that are related to each other.
There are three types of lists in HTML:
 Ordered lists.
 Unordered lists.
 Description lists.
The <li></li> tags are used to define items in an ordered or unordered list.
Ordered lists or numbered lists are used to display a list of items in a specific order. An ordered
list is listed as a set of <ol></ol> tags wrapping around one or more sets of <li></li> tags.
Unordered lists are used when a set of items can be placed in any order. They are often referred
to as bulleted lists. An unordered list uses <ul></ul> tags around one or more sets of <li></li>
tags.
<b>Unordered Lists</b> - Ordering

<i>doesn’t</i> matter.
<ul>
<li>Tin of Tomatoes</li>
<li>Bacon</li>
<li>Loaf of Bread</li>
<li>Mushrooms</li>
</ul>
<b>Ordered Lists</b> - Ordering
<i>does</i> matter.
<ol>
<li>Put The Kettle On</li>
<li>Put The Teabag in The Cup</li>
<li>Wait for Kettle To Boil</li>
<li>Pour Boiling Water In The Cup</li>
</ol>
Description lists or definition lists are used to link specific names and values to a list. You can
link several values to a single name, or link more than one name with the same value. The
<dl></dl> tags are used to wrap around <dt></dt> tags, which represent names and <dd></dd>
tags, which represent values.
<dl>
<dt>coffee</dt>
<dd>a beverage made from roasted, ground coffee beans</dd>
<dd>a medium to dark brown colour</dd>
<dt>soda</dt>
<dt>pop</dt>
<dt>fizzy drink</dt>
<dt>cola</dt>
<dd>a sweet, carbonated beverage</dd>
</dl>
An individual list can contain another list. This is known as a nested list.
<ul>
<li>James</li>
<ul>
<li>Extended Maths</li>
<li>Physics</li>
<li>Chemistry</li>
</ul>
<li>Joanne</li>
<ul>
<li>Standard Maths</li>
<li>Biology</li>
</ul>
</ul>
A hyperlink is used to access another webpage or document. By default, text hyperlinks are
underlined and in blue. The <a></a> tags, also known as anchors, are used to define links. For
example, to link to Google.com, you simply type <a href=”http://www.google.com”>Google</a>.
Absolute addresses, which allows a user to link directly to files on a physical hard drive, should
not be used in HTML links. Therefore, a user should not use “C:/Documents/Trial.doc” in an
anchor tag.
To ensure that the hyperlink opens in a new tab, the target attribute can be used:
<a href=”http://www.fairview.edu.my” target=”_blank”>Fairview International School</a>
You can also choose to link to a division or section of an HTML page. This is known as a division.
Developers often choose to group elements together in a <div></div> tag to slice up documents.
<div id="myDiv" name="myDiv" title="Example Div Element" style="font-family: Helvetica; font-

size: 12pt; border: 1px solid black;">
<div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000;
border: 1px dotted black;">
<h5>Section 1</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>
<br>
<div id="subDiv2" name="subDiv2" title="Subdivision Div Element" style="color:
#FF00FF;border: 1px dashed black;">
<h5>Section 2</h5>
<p>This paragraph would be your content paragraph...</p>
<p>Here's another content article right here.</p>
</div>
</div>
To link to divisions in the webpage, simply add the following code where required:
<p>There are two sections in this document – <a href=”subDiv1”>Section 1</a> and <a
href=”subDiv2”>Section 2</a>.</p>
Sometimes it is necessary to add in a link to an email, for the convenience of purchase orders
and enquiries. To create a hyperlink to an email package, you can start use mailto: instead of
http:
For example, a user can choose to add this to a website:

<p>
Email us at <a href=”mailto: [email protected]>[email protected]”</a> for further enquiries.
</p>
An image can be used as a hyperlink. To use the image envelope.jpg as a hyperlink to Google
Mail, type in the following code:
<a href=”http://gmail.com”>
<img src=”envelope.jpg” width=100 height=50 alt=”Google Mail”>
</a>
21.3 Using Stylesheets
CSS codes consists of the following:

 A selector for the elements to be updated.
 A set of declarations, which are made up of:
o A property to update how the HTML content is displayed.
o A value for the property following a colon.
The value of 12 pixels is given to the property of font size, and the value of blue to the property
of color, to be applied to the h1 selector, in the example above.
If there is more than one value associated with a property, they are divided by a comma, like this:
h2 {font-family: “Times New Roman”, “Book Antiqua”}.
An external stylesheet, as mentioned earlier, consists of only CSS codes. These external
stylesheets can be reused repeatedly and are especially helpful in ensuring that corporate styles
are kept to.
The <link> tag in the head of an HTML page is used to link to the required external stylesheet.
There is no limit to the number of stylesheets that can be linked to a single HTML page.
The <link> tag contains the following attributes:

 href, which indicates the location of the external stylesheet.
 rel, which must be set to “stylesheet” for linking stylesheets.
 type, which must be set to “text/css” for linking stylesheets.
For example, a CSS external stylesheet called stylesheet.css can contain the following codes:
h1 {
text-align: center;
font-size: 12pt;
color: #000099;
margin-bottom: 5px;
text-decoration: underline;
}
In the accompanying HTML file, the user would just need to type the following codes:
<!DOCTYPE HTML>
<html>
<head>
<title>Embedded Style Sheet</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>
<h1>All-time Home Run Record</h1>
</div>
</body>
</html>
This will make the header in the HTML file follow the styles set in the CSS document.
Stylesheet comments start with /* and ends with */. Just like in HTML, the comments are used
by programmers to divide the code into readable chunks, to identify the functions of different
sections of codes, and to test certain chunks of code for bugs.
If two or more styles share the same values and properties, they can be grouped together with a
single declaration: h1, h2, h3, h4, h5, h6, p {font-family: “Arial”}.
To specify a font for an element, individual font
names can be used, as in the above examples.
However, users can also opt to use generic font
families. These must be added after other preferred
fonts, and include:
 Serif
 Sans-serif
 Cursive
 Monospace
 Fantasy
Once the typeface has been decided, the user can

also specify the font size, using the font-size property.
Font size can be measured in absolute or relative values in websites, just as in documents.
Absolute font sizes are specific and set to the number of points, picas or pixels. Relative values
are based on previously defined values, like percentages, ems or exes (an ex is half the height of
the letter ‘x’ in the current font size).
There is also a list of predefined relative sizes that the user can choose from:
 xx-small
 x-small
 Small
 Medium
 Large
 x-large
 xx-large
Examples of font sizes are listed below:

h1 {font-family: serif; font-size: xx-large}
h2 {font-family: serif; font-size: 12px}
h3 {font-family: serif; font-size: 3ex}
In addition to using HTML, text can also be aligned using the CSS property text-align, which has
the following values:
 Left
 Center
 Right
 Justify
Text enhancement in CSS is a little more complicated than in HTML. To use bold, italics and
underlined text, font-style, font-weight and text-decoration properties can be used. Type in the
following code:
p{
font-family: “Arial”, “Calibri”, sans-serif;
font-style: italic;
font-weight: bold;
text-decoration: underline;
}
The background of a webpage can be changed according to needs and preferences. Users can
choose to change the background colour of a webpage, or to put an image as the background of
the page. The body tag can be adjusted for this.
To change the background colour of a webpage, the background-color property can be used.
body {
background-color: green;
}
Similarly, the background-image, background-repeat and background-position properties can

be used to insert an image as a webpage background.
The background-image property is followed by a colon, the word url, and brackets, followed by
the address and name of the image, in quotation marks.
The background-repeat property has three values – repeat, repeat-x and repeat-y.
Finally, the background-position property has five values – top, bottom, right, left and center.
body {
background-image: url(“logo.jpg”);
background-repeat: repeat;
background-position: top center;
}
Classes are reusable styles that can be added to HTML elements. A CSS class can be defined by
using a . in front of a selector.
An example of a CSS class declaration is .blue-text {color: blue;}. In HTML, the class is applied by
using <h2 class=”blue-text”>How to Use Classes</h2>. The class name in HTML does not include
the period.
Classes can also be used as subtypes within an element. For example, the following code defines
a style for h1, with the text aligned left, and a class with the text in the center, in grey.
h1 h3 {
text-align: left
}
.center {
color: #888888;
text-align: center;
}
The following codes would ensure that the third sentence is centralised:
<h1>Example</h1>
<h3>This is in h3 style.</h3>
<h3 class=”right”> This is a subtype of h3 called right.</h3>
CSS can be used to style tables. Table headers, footers and cells can all be styled using the same
properties and values that are applicable to other elements in a webpage.
To style a class, it is easiest to first declare a class for the table. As modern browsers do not
recognise border spacing, we can use border-collapse: collapse; to ensure there is no gap
between table cells.
.pretty-table {border-collapse: collapse;}
.pretty-table th, .pretty-table td {padding: 0.5em;}
By default, most tables in webpages do not have borders. CSS allows a user to declare borders
around individual cells, table rows or the whole table.
.pretty-table {border-width: 1px; border-style: solid; border-color: #333;}

.pretty-table th, .pretty-table td { border-width: 1px; border-style: dotted; border-color: #666;}
The above codes would put a dark grey border around the table and add in a lighter grey dotted
border around each cell. Border styles can be:
 Solid
 Dashed
 Dotted
 Double
 Groove
 Ridge
 Inset
 Outset
 None
 Hidden
21.4 Testing and Publishing a Website
Webpages stay in folders after being created. To ensure that other people can see your website,
it needs to be uploaded, tested and published.
All websites have a domain name that is used to find the site. The domain name must be
registered with a host company. Some popular hosting companies include GoDaddy, HostGator,
Exabytes and SiteGround.
Once the domain is registered, the files are uploaded on the website. File transfer protocol (FTP)
is used to upload files from the computer onto the web hosting space. Most modern FTP
applications allow users to drag and drop files into their system for convenience.
A website should be tested before it is published. Every element of the website should be tested
before it is even uploaded to the domain.
A test plan is used to ensure that nothing would go wrong with the website. The testing should
consist of two phases:
 Functional testing or usability testing.
 User testing or acceptance testing.
In functional testing, all page elements should be checked to ensure that they appear as
expected.
Some of the tests completed in the functional testing phase are included below:
 Is the navigation from page to page intuitive?
 Are the stylesheets attached?
 Are fields easy to fill up, and correct?
 Is the website aesthetically pleasing?
 Is the information displayed on each page relevant and well organized?
 Is the website’s navigation easy to learn and remember?
In user testing:
1. A few people are selected as the test audience.
2. The programmer decides what to test.
3. Create a timeline for testing.
4. The testers look through the system.
5. The programmer then asks the users questions and notes down the test results.
It is often difficult to justify why certain elements are tested in certain ways. Programmers must
be able to determine the elements that belong to functional testing, and those that belong to
user testing.
Websites can be printed out when needed. To print out an entire website:
1. Open the Internet browser program.
2. Surf to the webpage required.
3. Right-click on the webpage and select Print.
4. Configure your print settings accordingly.
21.5 References
Beginner’s Guide to HTML, CSS Background Color and Image, Accessed 31 July 2018
Beta Breakers, Functional Testing vs. Usability Testing, Accessed 31 July 2018
Computer Hope, How to Resize an Image with HTML, Accessed 30 July 2018
CSS-Tricks, A Complete Guide to the Table Element, Accessed 3 July 2018
Digital Unite, How to Print a Web Page, Accessed 1 August 2018
EchoEcho.com, How to Make a Link, Accessed 30 July 2018
Elated, Styling Tables with CSS, Accessed 31 July 2018
Electronics Tutorials, Hexadecimal Numbers, Accessed 30 July 2018
FatLab Web Support, How to Setup a Testing Plan Before Launching Your New Website, Accessed
1 August 2018
Free Code Camp, Basic CSS: Use a CSS Class to Style an Element, Accessed 31 July 2018
Glastonbury Studios, What is HTML Anyway? Accessed 25 June 2018
Harvard Law School, What is Metadata? Accessed 4 October 2021
HTML.com, HTML Comments: How to Use Them in Your Code (AKA ), Accessed 25 June
2018
HTML.net, Create your First Website, Accessed 25 June 2018
HTML Color Codes, HTML Background Color, Accessed 30 July 2018
HTML Dog, Selectors, Properties and Values, Accessed 31 July 2018

HTML Tutorial, Inserting Videos into HTML Pages, Accessed 30 July 2018
Hubspot Academy, Create mailto Links, Accessed 30 July 2018
Hyperlink Code, How to Make an Image Hyperlink, Accessed 30 July 2018
IronSpider, More HTML Font Styles – Bold/Italic Codes, Accessed 26 June 2018
LearnWebCode, HTML Lesson 4: How to Insert an Image in HTML, Accessed 3 July 2018
Lifewire, The Three Layers of Web Design, Accessed 25 June 2018
Lynda.com, CSS Comments, Accessed 31 July 2018
MakeAWebsiteHub.com, The Best HTML & CSS Friendly Safe Web Fonts to Use in 2018, Accessed
31 July 2018
MDN Web Docs, <meta>: The Metadata Element, Accessed 4 October 2021
Mozilla Developer, <audio>: The Embed Audio Element – HTML, Accessed 30 July 2018
Muzli Design Inspiration, Hexadecimal Color Codes, Accessed 30 July 2018
Quackit Tutorials, HTML Table Tutorial, Accessed 26 June 2018
SitePoint, A Walkthrough of CSS Length Units You can Use for Font Size, Accessed 31 July 2018
Tailwind CSS, Text Alignment, Accessed 31 July 2018
TechTerms, Website, Accessed 22 June 2018
The HelloWorld Program, HTML Head, Title, Meta, Link and Script Elements, Accessed 25 June
2018
Tizag.com, HTML – div Elements, Accessed 30 July 2018
Tutorials 4U, Inline, Embedded and External Styles, Accessed 26 June 2018
Tutorials Point, What is CSS? Accessed 25 June 2018
Universal Class, Styling Text, Font, and Properties in CSS Designs, Accessed 31 July 2018
W3 Schools, HTML Basic, Accessed 25 June 2018

Web Platform Docs, HTML Lists, Accessed 30 July 2018
Website.com, What is Web Hosting? Accessed 31 July 2018
Webucator, How to Create a CSS External Style Sheet, Accessed 31 July 2018

21 Website Authoring

Uploaded by

Copyright:

Available Formats

21 Website Authoring

Uploaded by

Document Information

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

21 Website Authoring

Uploaded by

Copyright:

Available Formats

21.

1 Web Development Layers

A website is a collection of webpages in a virtual location on the World Wide Web. It is

There are three layers in webpage design:

Separating the layers gives the following benefits:

The content layer or structure layer is the underlying

The presentation layer dictates how the page looks to

21.2 Creating a Webpage

The visible part of the HTML document is typed in between

A basic page in HTML will look like this:

Text can also be formatted easily, using the following codes:

The code below will generate the table underneath:

CSS tags can be included into a HTML file in three ways:

<td colspan=”2”> causes a

Table borders are one of the most common features controlled

Cell padding creates space inside a table cell, so that there is a

The code used for padding is:

Thus, an example of a table definition in CSS can look like this:

HTML 5 supports three types of video files:

Now, the video tag is supported by most major browsers.

The video tag is as follows:

Browser support for the three types is:

The code is:

Colours on a HTML page can be

RGB stands for Red, Green and Blue.

To use RGB colours, the three values

The hexadecimal colour code, on the

When used in HTML, the first two characters

<b>Unordered Lists</b> - Ordering

<div id="myDiv" name="myDiv" title="Example Div Element" style="font-family: Helvetica; font-

For example, a user can choose to add this to a website:

21.3 Using Stylesheets

CSS codes consists of the following:

The <link> tag contains the following attributes:

Once the typeface has been decided, the user can

Examples of font sizes are listed below:

Similarly, the background-image, background-repeat and background-position properties can

.pretty-table {border-width: 1px; border-style: solid; border-color: #333;}

21.4 Testing and Publishing a Website

CSS-Tricks, A Complete Guide to the Table Element, Accessed 3 July 2018

Digital Unite, How to Print a Web Page, Accessed 1 August 2018

EchoEcho.com, How to Make a Link, Accessed 30 July 2018

Elated, Styling Tables with CSS, Accessed 31 July 2018

Electronics Tutorials, Hexadecimal Numbers, Accessed 30 July 2018

Glastonbury Studios, What is HTML Anyway? Accessed 25 June 2018

Harvard Law School, What is Metadata? Accessed 4 October 2021

HTML.net, Create your First Website, Accessed 25 June 2018

HTML Color Codes, HTML Background Color, Accessed 30 July 2018

HTML Dog, Selectors, Properties and Values, Accessed 31 July 2018

Hubspot Academy, Create mailto Links, Accessed 30 July 2018

Hyperlink Code, How to Make an Image Hyperlink, Accessed 30 July 2018

Lifewire, The Three Layers of Web Design, Accessed 25 June 2018

Lynda.com, CSS Comments, Accessed 31 July 2018

Muzli Design Inspiration, Hexadecimal Color Codes, Accessed 30 July 2018

Quackit Tutorials, HTML Table Tutorial, Accessed 26 June 2018

Tailwind CSS, Text Alignment, Accessed 31 July 2018

TechTerms, Website, Accessed 22 June 2018

Tizag.com, HTML – div Elements, Accessed 30 July 2018

Tutorials Point, What is CSS? Accessed 25 June 2018

W3 Schools, HTML Basic, Accessed 25 June 2018