Publishing and

6 disseminating
content

1. Web pages 4. Website editors

Classification
How web pages work 5. File hosting and transfer
Website hosting
2. Publishing tools: File transfer
content management systems
6. Design criteria. Publishing standards
3. HTML Information accessibility and publishing standards

184 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
6
Learn

1. Web pages
What we usually refer to as a web or web page is actually a website, i.e. a set of linked docu-
ments (web pages) that can be visited at a common address.
The documents that make up a website are files and folders containing text, photos, buttons,
icons, animations, hyperlinks, multimedia, graphics, tables, etc. They are created to be viewed by
users of computers and browsers with different features.
To visit a website, we use a browser (Mozilla Firefox, Microsoft Edge, Google Chrome, etc.),
which connects each computer to the servers that host the web pages and downloads and Information is organised
displays the pages. on websites as hypertext.
This means that when the
The first page we see when we enter an address in the browser is the home page of the website.
user clicks on a word they
The basic language used to create the documents that form a website is HTML. are sent to a related page to
find out more about it. This
is how the documents (and
hence, the information)
making up the website are
linked.

„ Classification
„
Web pages are classed as static or dynamic:
•• Static. Pages that do not change; they always show the same content whenever we load
them. They are done in HTML.
•• Dynamic. Pages that are interpreted each time by the server, without changing the code.
Hence, they return different results depending on what the user does. For example, a search
engine is a dynamic page that returns one result or another depending on the request made
by the user. They are created by combining HTML with dynamic languages such as ASP.NET
(Active Server Pages), Java, PHP and JavaScript.
This unit focuses on the creation of static web pages, since knowledge of one of these languages
(in addition to HTML) is needed to create dynamic ones.

Static pages Dynamic pages

Users cannot edit the contents or design, or make requests. Users can edit the design. The content is dynamic, i.e. it re-
sponds to the user’s requests.

HTML HTML + dynamic languages:

•• ASP.NET
•• Java
•• PHP
•• JavaScript

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 185

 Publishing and disseminating content
6
Learn

„ How
„ web pages work
Websites are created by developers and designers. The people responsible for them after they
are built are the webmasters.
The normal working procedure for webmasters is to create the set of files that form the web
(called the local site) on their computer. The webmaster processes these files and also has a
space for saving the page on a site accessible to all Internet users (called the remote site). This
site is located on a special computer called a server in a process called hosting.
Servers are computers that host web pages and make them available to the whole network.
The process for hosting a website and how it works is as follows:

1
The person who maintains the website and updates and
Local site transfers the content to the server.
administrator

Programs that connect the local computer to the server that

2 hosts the site. This is done when necessary to replace the
set of files that make up the website (which are handled by
File transfer webmasters on their local computers) with the ones hosted
programs by the server.
(FTP)

3
Remote site This allows the webmaster's web page to be viewed by other
users. It must be located on an Internet server, which is
hosted on the
usually provided by private companies.
server

4
To access a website, we use a browser (Google Chrome,
Users Mozilla Firefox, Microsoft Edge, etc.), which connects each
computer to the servers that host the web pages, and
downloads and displays the pages.

186 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
6
Learn

2. Publishing tools: content management systems

Publishing tools are relatively easy to use and allow users to create their own content and pub-
lish it on the Internet without any technical design or programming knowledge. Depending on
the features of the content that we want to publish, we can use different tools, as we saw in the
previous unit. In this unit, we will focus on content management systems.
A content management system (CMS) is a publishing tool for generating web content and ed-
iting and updating web pages online with no technical knowledge of design or programming.
Content management systems are based on templates that users can adapt and customise to
their tastes, which reduces the costs of setting up a website and saves time. The use of templates
ensures that all the content we publish has the same design and a uniform appearance. This
results in a coherent website. Users can access templates from a browser.
Content management systems can be used to create blogs and wikis:
•• A wiki is a collectively built website on a specific topic. It allows discussion of various topics
and can be edited online by any user (who can add, edit or delete content). They include
Wikipedia, which is popular all over the world.
•• Blogs are another tool of expression and communication that take the form of an online
diary. They are used to publish instant entries (also called articles or posts) that are organ-
ised chronologically starting with the most recent one. Readers can post comments on each
entry.

Examples of content management systems

WordPress

Although it can be used to develop any type of website, WordPress is mainly used to
create blogs. It is developed in PHP language. Because it is so easy to use, WordPress is
currently the most popular CMS.

Joomla

Also developed in PHP language, it is not as efficient as WordPress for creating blogs but
it is very interesting for the design of digital magazines.

Drupal

This is developed in PHP by a community of developers. It is highly recommended for

websites that receive lots of visits because it supports more traffic than WordPress. It is
oriented to communities and allows the creation of multiple user profiles with different
permissions and accesses. It is very secure.

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 187

 Publishing and disseminating content
6
Learn

3. HTML
Users with very little expert knowledge can use CMS to create web pages. However, web page
HTML5 is the fifth major
revision of the language designers generally create pages in the language that they are written in: HTML (hypertext
used to write web pages. markup language) or the version XHTML (the X stands for extensible).
It is suited to the different
The function of the browsers that we normally use (Chrome, Firefox, Edge, etc.) is to interpret
needs of today's websites,
such as incorporating mul- this language and transform it into the web page displayed on our screens.
timedia elements. It can
only be interpreted by the
very latest browsers. HTML is the language used to build web pages. By convention, files in HTML format use the
extension .htm or .html.

We can create a web page by writing in this code in any text editor and saving it with the correct
extension (.htm or .html), but this is usually only done for educational purposes. In practice,
designers use HTML editors, which allow them to design websites simply and intuitively.
The basic characteristics of HTML are:
1. HTML is written with tags inside angle brackets (<>). These tags can be opening
(e.g. <body>) or closing (e.g. </body>); the difference between them is that closing
tags have a slash (/).
2. HTML code always starts with the opening tag <html> and ends with the closing tag
</html>.
<html> 3. The figure on the left shows a basic document created in HTML. HTML documents have
<head>
two main parts:
<title> ƒƒ The header, between the <head> and </head> tags, which is a statement at the top
My First Page of the document, like a title.
</title>
</head> ƒƒ The body, between the <body> and </body> tags, which is the content of the page.
4. Tags are completed by attributes, which are parameters that indicate the properties or
<body>
I am writing code
behaviour of the tag; they are always found in the opening tag and their value is always
</body> inside quotation marks. In the following example, color is an attribute of the <font> tag:

<html> <font color=”red”> <tag attribute=“value”>

Basic structure of a web page

in HTML

5. All HTML elements are composed of two tags (one opening and one closing). The
<html> opens the code two examples below show how these elements will look once they are interpreted by a
browser:
<head> opens the header
<title> opens the name
of the document Element Looks like this in the browser:
My First Page
</title> closes the name <b>Bold text</b> Bold text
of the document
</head> closes the header <i>Italic text</i> Italic text

<body> opens the body

of the document
I am writing code
</body> closes the body Looks like
of the document this in the
<html> closes the code
browser

Function of the main tags

188 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
6
Learn

The following table contains some HTML tags:

HTML tags and attributes

Tag Attributes Function
<html> and </html> Opens and closes the code
<head> and </head> Document header
<title> and </title> Indicates the document name inside <head>
<body> and </body> Body of the document
<h1>, <h2>... and </h1>, </h2>... First-level heading, second-level heading... inside <body>
<table> and </table> Inserts a table

align (center, right, left) Aligns the table (to the centre, right or left)
bgcolor Sets the background colour of the table

border Sets a border for the table

cellpadding Separation between the edge of the table and the content
cellspacing Spacing between cells
width Sets the width of the table
height Sets the height of the table
<tr> and </tr> Row in a table
class Sets a class of CSS style file
similar to those of table

<td> and </td> Column in a table

similar to those of table
and row
<br> Line break

<div> and </div> class Layer, with or without CSS style file class in layer

<p> and </p> Aligned paragraph

align (left, center, right, Aligns the paragraph (to the left, centre, right or justified)
justify)
<li> and </li> List

<font> and </font> Font and font format

face, size, color Name, size (1 to 7), colour

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 189

 Publishing and disseminating content
6
Learn

4. Website editors
Website editors are applications used to create web pages. Broadly speaking, there are two
types of editor:
•• WYSIWYG (what you see is what you get) editors. With these applications, we create our
web page as though we were writing in a word processor. They then automatically gen-
erate the source code in HTML. These types of editor include: Adobe Dreamweaver (for-
merly Macromedia Dreamweaver), Microsoft Expression Web (which replaced FrontPage
when it was removed from sale in 2006 [latest version: FrontPage 2003]), BlueGriffon (free
software, supports HTML5), KompoZer (free, cross-platform software) and NVU (also free,
cross-platform software). The latter three are very similar and we will use them in this unit.
•• Editors that work directly in HTML. These are less popular than the previous type be-
cause users must have an advanced knowledge of HTML. These types of application include:
Komodo Edit (free software), Sublime Text and Arachnophilia (cost-free).

5. File hosting and transfer

„ Website
„ hosting
The last step to allow other users to view the website that we have created is to upload it to an
Internet server. Once we do this, we will need to maintain the website and update its content
as required.
Generally speaking, companies providing Internet services also provide spaces for their clients.
Some of these are free, like 007sites.com, webs.com and awardspace.com; in this case, they usu-
ally display advertising banners on the hosted page. Other web hosting services do not have
advertising; instead, they offer limited conditions or expect users to sign up for payment plans
giving them more possibilities.

To identify the hosted home page, the home page file must be assigned a special name,
which will depend on the hosting service used (it is usually index.html).

With these sites, we have to use the URL assigned to our website, but we can also buy a domain
with the name we want, which is the general practice for most companies and for many indi-
viduals too.

„ File
„ transfer
File transfer programs (FTP) connect the local computer to the server hosting the site. This is
done when it is necessary to replace the set of files that make up the website (which we manage
on our local computer) to replace the files on the server, when necessary.
In this topic, we will use FileZilla, a free, cross-platform file transfer program. Mozilla Firefox can
also be used as a file transfer program if a plug-in called FireFTP is installed; some editors, like
NVU and KompoZer, can be used to publish web pages directly.

190 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
6
Learn

6. Design criteria. Publishing standards

The design of a web page is just as important as its technical operation. When designing a web-
site, we need to consider basic aspects such as the contrast between the text and the back-
ground, the size of the characters or the choice of colours. Anybody can distinguish between a
website made by a professional and one created by an amateur. In our case, how our web page
looks will depend on our tastes and knowledge; because we are learning, we need to find good
examples and try to make our web page design look as “professional” as possible.
Two different concepts come into play in the design phase: layout and interface.

•• Layout refers to how the spaces and written, visual and audiovisual content are organ-
ised. It covers the semantic and formal aspects of a digital application.
•• The interface is the set of commands and methods allowing interaction between the
user and the system (the website).

„ Information
„ accessibility and publishing standards
There is a commitment to creating websites that meet certain standards so that they can be vis-
ited and used by as many people as possible. This is done to minimise the effect of the physical
and technical limitations of the potential visitors.
Under Spanish law, the web pages of government agencies must meet certain publishing
standards with regard to navigability and accessibility for people with disabilities. These cri-
teria, called accessibility criteria, are established by the World Wide Web Consortium (W3C).
The WAI (Web Accessibility Initiative) is a branch of the W3C that establishes accessibility levels
(A, AA and AAA) for websites based on how well they meet these criteria, from very basic to
very demanding. Most websites that we can visit are assigned the AA rating; very few are award-
ed AAA. When we see this icon on a website, it means that the site is committed to meeting the
accessibility level; it is not a form of external certification.
Adopting accessibility criteria in the design of a website brings lots of benefits, including more
visits, faster page loading and fewer errors. For beginners, trying to meet the basic standards of
accessibility is a goal for the medium term; understanding (and following) the advice of the W3C
requires a high level of expertise.

The basic publishing standards are:

•• Use style sheets.
•• Make sure that the page looks good in different browsers.
•• Use alternative text tags to describe the function of visual elements.
•• Make transcriptions available for sound files and descriptions for videos.
•• Create tables that can be read line by line.

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 191

 Publishing and disseminating content
6 Step-by-step practical

Practical 1. Creating the “Educational Apps” site in WordPress

You must have permission from your parents or legal guardians to do this practical. Remember also to read all the terms of the
service carefully.

„ Exercise
„ 1. Creating the web page
1. Go to WordPress (wordpress.com) in your browser and click on Create
Website.
2. Choose the Edin design. Choose your name and surname as the domain
name. It will look like this: namesurname.wordpress.com.
3. Now select the free plan and enter your e-mail address. Enter a pass-
word and click on Create My Account. A confirmation message will be
sent to your e-mail account for the page that you have just created; click
on the link to activate it.
4. Follow the link to go to My Site. Click on the icon at the top to see what
Fig. 1
your page looks like (Figure 1).

„ Exercise
„ 2. Completing the “Educational Apps” website
1. Open another tab in your browser and type your domain followed by
“wp-admin” (i.e. namesurname.wordpress.com/wp-admin). You will
now have two tabs: one with the web page and another with the desk-
top of the content management system (to see the changes to the web
page as you make them). All the modifications will be made in the desk-
top tab of the content management system.
2. In the desktop tab, go to Appearance / Themes. In the theme finder,
type “Twenty Fourteen” and click on Activate to select the theme. Check
what your page looks like now using the other browser tab (Figure 2).
Fig. 2
3. By default, WordPress creates a page called About. Let’s change the
name of this page. To do this, go to Pages / All Pages and click on Quick
Edit in the About page. Change the name About for Educational Apps
and click on Update (Figure 3).
4. Now create three new pages. We are going to call them Looking at the
sky, Electricity apps and Maths apps. To do this, on the WordPress
desktop, go to Pages / All Pages / Add New, type the name and then
click on Publish (Figures 4 and 5).
5. Now go to Appearance / Menus. Click on Create a New Menu and
Fig. 3 type “Apps” as the name of the menu. On the left, select all the pages
that you have created and click on Add to Menu.
6. In the Theme locations section of Menu Settings, select the Top pri-
mary menu option and click on Create Menu.
7. In the desktop manager, in the left-hand menu, go to Settings / Read-
ing. In Front page displays choose A static page. Select the Educa-
tional Apps page as the home page and the Looking at the sky page
as the posts page. Now, the Educational Apps page will be the starting
page and, in the Looking at the sky page, you can write about apps
Fig. 4
related to the sky. Click on Save Changes.
8. Now edit each page. Go to Pages / All Pages, select a page and click on
Edit. Do a search for information on the educational apps indicated and
write a text for each section. Modify the text to how you want it to look
using the attributes shown: colour, typeface, etc. Click on Add Media
and upload one of your images.
9. Take a screenshot of a page on your website and paste it into a text doc-
Fig. 5
ument. Save the document with the name P1_namesurname.

192 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
Step-by-step practical
6

Practical 2. Creating the “ICT Course” blog in Blogger

You must have permission from your parents or legal guardians to do this practical. Remember also to read all the terms of the
service carefully.

„ Exercise
„ 1. Starting out with Blogger
1. Go to Blogger from your Gmail account by clicking on the Apps op-
tion, then More, and finally Blogger. Re-enter your Gmail password
if you are prompted for it.
2. On the next screen, you can edit your profile, add a picture, etc. Click
on Continue to Blogger.
3. Click on New Blog. Give the blog a title (for example, “ICT Course”)
and an available address (URL) (for example, ICTcourse.namesur-
name.blogspot.com). Blogger will tell you if the name you have
chosen is available (if the name you want to use is already taken, you
must choose a different URL to the one that appears by default by
adding a number or letter so that Google accepts it).
4. On the same screen, select a template and click on Create blog.

„ Exercise
„ 2. Adding a new post
1. Click on the Create new post icon (the pencil icon on the top left) or
on the New post button (they do the same thing).
2. Inside the editing window, you can start adding new posts. To do this,
in Post title, type “Welcome to my blog” and, in the body, type “This
is the beginning of my blog about what we have learned in our Infor-
mation and Communication Technologies course, where I will show-
case some of the work that I have done”. Use the toolbar to format the
text (font, colour, size, bullets, etc.).
3. Click on Preview to view your first post. Your blog will open in a new
browser tab so you can see how it will look on the Internet.
4. Return to the editing window. Find the spellchecker and check the
spelling of your text. Always do this before publishing a new post.
5. Lastly, click on Publish.

„ Exercise
„ 3. Links, photos and videos
1. In the editing window, find the icon that lets you add links to other
websites, the icon for inserting images and the icon for inserting vid-
eos. For each one, insert some content related to what we have seen
in this subject and publish it.
2. If your teacher wants to check your work, press the Impr pant key on
your keyboard to take a screenshot of the posts you have published
in Blogger. Then paste the screenshot into a text document and save
this document to your local folder with the name P2_namesurname.

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 193

 Publishing and disseminating content
6 Step-by-step practical

Practical 3. Creating the website “Smart Cars” on Google Sites

You must have permission from your parents or legal guardians to do this
practical. Remember also to read all the terms of the service carefully.
When we create a website, it stays exactly how we designed it. Once it is
finished, we can change, adapt or update the content but the information
is more static than we have seen with other types of websites (blogs).

„ Exercise
„ 1. Creating a website: “Smart Cars”
1. Go to Google Sites from your Gmail account by clicking on Apps, then
More and then Even more from Google. Now select the Sites op-
tion from Our products.
2. Click on Create to start building your website. Choose the Create in
classic Sites option. Google will offer you different templates to use
for your website. Select the Blank template.
3. On the same page, type a name for your site (for example, “Smart
Cars”). Write down the full URL in your notebook (if the name you
want to use is already taken, you must choose a different URL to the
one that appears by default by adding a number or letter so that
Google accepts it).
4. Enter the captcha code and click on Create site. You can configure
the other options later.

„ Exercise
„ 2. Creating and editing pages
1. On the home page, you will see that a site search engine has been
added and that you have two buttons: Edit page and Create page.
2. Click on Edit page to bring up an editor like the one you used in Drive
in other units.
3. Type an introductory text in the main display box, such as: “This is the
home page of my website on smart cars, the cars of the future”. Find
some related information to complete the home page and then click
on Save.
4. Now we are going to create the second page of the site. Click on
Create page and select the Web Page template. Name the page
“Self-driving”. Click on the Create button to start editing.
5. Click on Layout (in the top-left menu) and start designing this page
to your liking. Include information about the self-driving cars of the
future here.
6. Complete the other pages with the following titles. You can use the
contents we propose to guide you:
•• Devices: radars, cameras and laser scanners.
•• Travelling: touch panels and augmented reality.
•• Cloud data: location, transit and... offences!
7. Once you have finished, go to a browser and type in the URL that
you wrote down in the previous exercise. You will see your published
website.
8. Save the URL in a text document with the name P3_namesurname.
194 Information and Communication Technologies - 4º ESO - Editorial Donostiarra
 Publishing and disseminating content
Step-by-step practical
6

Practical 4. Creating a photography lesson with Tes Teach

You must have permission from your parents or legal guardians to do this
practical. Remember also to read all the terms of the service carefully.

„ Exercise
„ 1. Getting started with Tes Teach
1. Go to www.tes.com/lessons and click on Sign Up to register or click on
Login and then Login with Google.
2. In the next window, in the I am a... section, choose Student.
3. In the following window, select Library Lessons and type “Photogra-
phy” in the search engine. Select one or two to understand what the
lessons are about. You will see that they contain images, videos, texts
and questions.
4. Click on Dashboard to go back to the home page.

„ Exercise
„ 2. Creating a lesson
1. Click on New Lesson. A video describing the possibilities of the appli-
cation will appear. You can watch it or skip it by pressing Continue.
2. In the What is your lesson about? pop-up window, type “Photogra-
phy” and click on OK. This will create your space with this title; you can
change it later.
3. In the box in the top right, Tes Resources Search, the word that you
chose is written automatically. Click on the magnifying glass. The
application will search for all the resources that can help you. The All
Files option is selected by default, but if you drop down the menu, you
will see that you can choose from: documents, PDFs, presentations,
spreadsheets, videos, images and others.
4. Do some searches to create a photography lesson. You need to make
several related searches. When you find a lesson that you like, drag it
to an empty box on the desktop and add a description by clicking on
the pencil.
5. There are other ways to search for more information in the tool: in
the vertical menu, you can search on YouTube, Google, Google Imag-
es, etc., and insert documents from Dropbox or Drive. Complete the
boxes that will make up your lesson however you like. Here are some
suggestions:
•• Types of photography: portrait, landscape, underwater, aerial,
selfie, etc.
•• Photographic shots: wide, full, medium or close-up, etc.
•• Basic parameters: brightness, exposure time, sensitivity, etc.
•• Cameras: SLR and compact cameras
•• Famous photographers of the twentieth and twenty-first cen-
turies
6. Position the mouse in an empty box and click on the Add Text option.
Type something relevant that you have learned about photography.
7. Position the mouse in another empty box and click on Add Quiz. Cre-
ate a questionnaire with five multiple-choice questions on this topic.
8. Once you have completed your lesson, click on the Share option. In a
text file, paste the link that the application gives to you and save the
file with the name P4_namesurname. If you share it with a classmate,
they can answer the questionnaire and be marked on it.
Information and Communication Technologies - 4º ESO - Editorial Donostiarra 195
 Publishing and disseminating content
6 Step-by-step practical

Practical 5. Getting started with HTML

Starting out with HTML is not complicated, but we have to be very care-
ful about typing tags and attributes. If we make a mistake, the page that
we are building will not display correctly in the browser. If this happens,
check the code and try to find the error. In the beginning, making mis-
takes is the best way to learn.

„ Exercise
„ 1. What do web pages look like inside?
Follow these simple instructions to find out what language a web page is
written in:
1. Open any browser (for example, Microsoft Edge).
2. Go to any website (for example, you could try the European Space
Agency: www.esa.int).
3. Position your mouse anywhere on the website that is not an image or
a link and right-click. A menu will appear with several options. Select
Ver código fuente (View page source).
4. This opens a new screen where you can see the HTML code that the
page is written in.

„ Exercise
„ 2. Using Notepad to create an HTML document
1. Open Notepad by going to Inicio / Todos los programas / Acceso-
rios / Bloc de notas.
2. In Notepad, copy the basic tags that a page always has. Make sure
that the order and spaces are correct. Insert the title (“My First Page”,
without quotation marks) between the <title> and </title> tags.
Now insert the page contents (“Learning HTML”, without quotation
marks) between the <body> and </body> tags. The result is shown
in Figure 6.
3. Choose Guardar como from the Archivo menu. In the Tipo option,
select Todos los archivos and type “P5_namesurname.htm” in
Nombre. This is your first source code file. Be careful not to save it as
.txt.
4. Go to the folder where you saved the file and double-click on it. This
will open your default browser with the page in it, which should look
like the one in Figure 7.
5. Note how the text between the <head> and </head> tags appears
in the title bar of the browser. Note where the content is displayed on
your screen.
6. Do not close Notepad or your browser as you will need them for the
next practical.

Fig. 6 Fig. 7

196 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
Step-by-step practical
6

Practical 6. My first web page in HTML: about me!

We are going to use the HTML file we created in the last practical.

„ Exercise
„ 1. Headings and font colour
1. We are going to add a heading to the text, i.e. we are going to display
a title in our web page. To do this, add the following element just after
the <body> tag, as shown in Figure 8:
<h1> About Me </h1>
2. Save the file. Refresh the web page in your browser by pressing F5
and see what happens.
3. Do not close Notepad or your browser because we are going to edit
the last tag to change the colour of the header to blue. To do this add
the <font> tag with its color attribute using the proper syntax:
<h1><font color=“blue”> About Me </font></h1>
4. The attribute values are enclosed in quotation marks and come after
the equals sign. Note that every opening tag has its corresponding
closing tag.
5. Save the file. Refresh the web page to see the result.
6. Do not close Notepad or your browser because we are going to
insert a paragraph and align it to the right. To do this, insert the Fig. 8
<p align=“right”> and </p> tags before and after the “Learning
HTML” text:
<p align=“right”> Learning HTML </p>
The code inside the body should look like this:

7. Add an introductory text after the tag </p>, inside the body (before
</body>). Type something like “My name is Saul and I like informa-
tion technology”.
8. Save the file. Refresh the web page to see the result.

„ Exercise
„ 2. Creating the site
1. Now we are going to insert an image. You can use one of your own
or image P6.jpg from the virtual CD. To do this, save the image to the
folder where you saved the document P5_namesurname.htm with
the same name as it has on the virtual CD. This step is essential for it to
work.
2. Directly after the </p> tag, type:
<img src=“P6.jpg”/>
3. Save the file with the name P6_namesurname.htm. Refresh the Fig. 9

web page and see what happens. It should look like Figure 9.
4. If you have any problems, have a look at the full code in the file P6_
Complete.html on the virtual CD. Remember that you will need to
open it in Notepad.
Information and Communication Technologies - 4º ESO - Editorial Donostiarra 197
 Publishing and disseminating content
6 Step-by-step practical

Practical 7. My first website with KompoZer: amazing travels

„ Exercise
„ 1. Obtaining and installing KompoZer
1. Go to the website kompozer.sourceforge.net and click on Download
KompoZer for Windows. Another page will open where you can
click on Click here to start the download. Click on Guardar. In this
screen, you can download the program in English.
Fig. 10
2. Unzip the folder that you just saved. You do not need to install the
KompoZer editor. Click on kompozer.exe, the executable file with
the icon shown in Figure 10. You can create a shortcut if you prefer.

„ Exercise
„ 2. Getting started with the editor
1. We will start by creating the home page for our website. Type the fol-
lowing text in the working area. They are the words to a famous song
by Bruno Mars:
Count on Me
If you ever find yourself
stuck in the middle of the sea
I'll sail the world to find you
Fig. 11 If you ever find yourself
lost in the dark and you can't see
I'll be the light to guide you
2. Format the text just as if you were using a word processor: put the
title in bold and put the text in italics.
3. To structure the text, select the title with the mouse, drop down the
toolbar menu in Figure 11 and apply the Heading 1 option. Do the
same with the rest of the text but this time apply the Paragraph op-
tion.
4. To change the colours of the text and background, go to the Format
menu, select the Page Colors and Background option and check the
Use Custom Colors option. Choose the colours shown in Figure 12.
5. Do a YouTube search for the song and copy the link below the text.
Once you have copied the link, select the address with the mouse and
click on the Link button on the composition bar. Click on OK in the
Fig. 12
popup window.
6. Save the file with the name countonme (the program will automat-
ically assign the extension .html) to a folder called P7_namesur-
name. Open it in a browser and check that the video link works.
7. View the result in the two edit mode tabs: Source View and Preview.
We can make changes to the HTML code and they will appear in Pre-
view, and vice versa.

198 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
Step-by-step practical
6

„ Exercise
„ 3. Table structure for creating the index file
Although we have not done this yet, the best way to distribute the con-
tent of the page we are creating is by using tables.
1. Create a second page (without closing the first one) by selecting the
Page in New Tab option from the dropdown menu New. This way,
you can view and access both pages from the tabs. Save the file to a
folder and name it index (it will be automatically assigned the .html
extension).
2. On the new page of the site, click on the Table icon. A window will Fig. 13
appear in which we can define the initial configuration of the table
(this can be changed later).
3. In the Quickly tab, we can set the number of rows and columns for
the table. Drag it to select 5 × 4 (i.e. 5 rows and 4 columns) and click
to insert the table. Merge the required cells to make your table look
like the one in Figure 13; to merge cells, select them with the mouse,
right-click and select the Join Selected Cells option (Figure 14).
4. Drag the table from the lower right-hand corner so that it fills the
entire screen. You have now created the “skeleton” of your page. To
change the properties of the table later, right-click and choose Table
Cell Properties. The popup window has two tabs: Table and Cells.
In both tabs, you can change the size of the cells, the alignment of
the content, the cell style and the background colour, among other
options.
5. We will now complete each cell with text and images. Follow the in-
structions to make your page look like the one in Figure 15. On the
virtual CD, you will find the file P7_Index.jpg with the details of this Fig. 14
image.
6. To choose the background colour of the cells, select them with the
mouse, right-click and select the Table or Cell Background Color
option. Choose a similar blue to the one in the figure. Change the
table border to zero pixels so that the structure cannot be seen in the
browser.
7. Type the text in the cells and apply the relevant format.

„ Exercise
„ 4. Inserting images
1. To insert images, they must be in the same folder as the page. Save
four images of a similar size and content to the ones in Figure 15 to
the folder P7_namesurname. These images should be about the size
of the space that they are going to fill and have the .jpg or .gif exten-
sion.
2. Go to the appropriate cell and click on the Image icon. In the pop-
up window, click on the folder and find the image. The program will
write the path. The alternate text is optional. In the Appearance tab,
you can position the images in relation to the text; in our case, it is not
necessary because they are in a cell that does not contain text.
3. Save the file and click on the Browse button to see the results.
Note! The name of the file cannot contain spaces, the Ñ character, ac-
cents, or special characters in general.

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 199

 Publishing and disseminating content
6 Step-by-step practical

„ Exercise
„ 5. Creating other pages and linking them
1. Lastly, make up and create the other pages (Asia, Australia and Amer-
ica) as you would like them to look. Use the same table structure and
layout for them all (colours, text, etc.). Search for some nice images
to insert. Each page should link to the rest so they must all share the
menu on the left. You can copy the structure that you created on the
home page, paste it in the new page and then change any elements
that are different. This will allow you to create the other pages more
quickly and the design will also be consistent.
2. To make linking the pages easier, we will name them by their titles,
i.e. america.html, asia.html and australia.html.
3. Once you have completed all five pages of the website (countonme.
html, index.html, america.html, asia.html and australia.html),
you can link them so that, from any given page, we can reach all the
others. To do this, we will create relative links using the same menu
button that we used to create the link in Exercise 2. Go to the page in-
dex.html, point the mouse to the words “Count on me” in the menu,
click on the Link button and then, in the Link Properties window,
search for the file countonme.html (created in Exercise 2). Click on
OK. The program will check the URL is relative to page location op-
tion; you can check the result when you reopen the Link Properties
window.
4. Repeat these steps for all the links and pages and save the changes.
Check that they work by clicking on the Browse button.

Contact us
Fig. 15

200 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
Step-by-step practical
6

Practical 8. File hosting and transfer

„ Exercise
„ 1. Obtaining hosting
The websites that we created in practicals 6 and 7, i.e. using Notepad or
the editor, can only be viewed on the local site. Once we have our com-
plete website working correctly on the local site, we can host it on a server
if we want other users to see it on the Internet. To do this, we are going
to create an account with a free server like 007sites.com, awardspace.com
or webs.com. These services require us to sign up and offer free spaces of
around 1 GB.
We are going to do this practical with the first of these hosts but remem-
ber: with free services, not everything is as simple as it looks. If you try it
with any of the other hosting services we suggest, the steps will be similar.
Whatever you do, don’t give up at this point because it is important to be
able to view your website on the Internet.
The address (URL) of your website will be amazingtravels.namesur-
name.atwebpages.com on this host. Because you are a minor, you must
have adult supervision to carry out the next steps.
1. Go to 007sites.com and click on the Signup for free option.
2. Complete all the required fields to sign up.
3. Once you have created an account, activate the service by clicking on
the link that you have been sent by e-mail.
4. Go to the control panel by clicking on the e-mail link (007sites.com/
login.html) and type the username that you were given in the e-mail
and the password you chose in step 2.
5. Go to Domain Management and then click on Create a free subdo-
main. Call it amazingtravels.namesurname.

The basic data that you will need to host your

website and display it in a browser later are:
•• FTP server (hostname)
•• FTP user (username)
•• FTP password
•• FTP port: the default is 21
•• URL

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 201

 Publishing and disseminating content
6 Step-by-step practical
„ Exercise
„ 2. FTP in FileZilla
This practical will show you how to transfer
files to a server. Sometimes, our hosting also
lets us transfer files with the File manager
option, without needing to use another FTP
program. Remember this so that you choose
the most appropriate option to get your web-
site online.
202 Information and Communication Technologies - 4º ESO - Editorial Donostiarra
We will now learn how to upload files using the free file transfer program
(FTP) FileZilla.
1. Download FileZilla by going to the website filezilla-project.org and
clicking on the Download FileZilla Client option.
2. Once it has downloaded, double-click on the executable file; after in-
stallation, the application will open.
3. Type your server data, which you were given in the e-mail you re-
ceived in Exercise 1:
•• Server: amazingtravels.namesurname.atwebpages.com
•• User: the one you were given in the e-mail
•• Password: the one you chose
•• Port: 21
4. Click on the Quickconnect button.
5. Locate the files that you want to upload (the ones that you created for
your website in Practical 7) in the directory tree on the left.
6. In the remote site, double-click on the folder amazingtravels.
namesurname.atwebpages.com to open it. Click on each docu-
ment in the practical and drag them all to this folder on the remote
site. For everything to work properly:
•• The main page must be named index.html.
•• The other file names cannot contain spaces or special characters.
•• We are going to upload all the relevant files (photos, etc.) so we
will maintain the same structure and hierarchy used to create
them.
7. Lastly, click on Disconnect.
8. Go to your website amazingtravels.namesurname.atwebpages.com in
your browser and check that everything went well.
9. Take a screenshot of the website in your browser and paste it into a
file with the name P8_namesurname.
 Publishing and disseminating content
Extend your knowledge
6

Extension 1. Creating a website for your favourite film in HTML

Create a website for your favourite film using HTML and Notepad, as we saw in
practicals 5 and 6.
1. Save your document with the name X1_namesurname.htm.
2. Remember that you must use certain tags and objects:
•• Main tags
•• Heading with the title of the film and the tag <h1>
•• <font> tag with its attribute color, to change the colour of the title of
the film
••
Paragraph containing a brief summary of the film and the tag
<palign=”center”>
3. Do an online search for a related image and save it with the name X1.jpg
to the folder where you saved the document X1_namesurname.htm. Re-
member: this step is essential for it to work.
4. Type this in the code:
<img src=“X1.jpg”/>
5. Add the attribute bgcolor to the <body> tag as follows:
<body bgcolor=“green”>
6. Open the file in a browser and check what happens. What did the attribute
bgcolor change? Change the colour to one that fits in with the film and the
image.

Extension 2. Who said young people are not business-minded?

Imagine that you have a business and want to develop a website for it.
1. Open the KompoZer editor and create the first page. To do this,
create a table, enter the text (you can write it in a word processor
first) and apply an appropriate font.
2. Insert some images and icons.
3. Save the page with the name index.html. It is important to use
this name for the home page when you publish the site. To make it
easier to link the pages, we will name them by their titles.
4. Create a second page (without closing the first one) by selecting
the Page in New Tab option from the dropdown menu New. This
way, you can view and access all the pages from the tabs. Save the
page.
5. Repeat these steps to create all the pages you need. Do not use
accents in the names of the files that you create or use.
6. Once you have completed all the pages, you must link them so
that, from any given page, we can reach all the others. To do this,
we will create relative links.
7. Repeat these steps for all the links and pages and save the chang-
es. Check that they work by clicking on the Browse button.
8. Upload your website to a host, as we did in Practical 8.

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 203

 Publishing and disseminating content
6 Review

UNIT SUMMARY

 Web pages
 A website is a series of web pages linked to each other that can be reached at a common address.
 The documents that make up a website are files and folders containing text, photos, buttons, icons, animations, hyper­
links, multimedia, graphics, tables, etc.
 Each document or page in a website is a file with the extension .html or .htm.
 To visit a website, we use a browser (Mozilla Firefox, Microsoft Edge, Google Chrome, etc.), which connects each computer
to the servers that host the web pages and downloads and displays the pages.

 Publishing tools: content management systems

 A content management system (CMS) is a publishing tool for generating web content and editing and updating web
pages online with no technical knowledge of design or programming.

 HTML
 Web pages are created in HTML (hypertext markup language) or by combining HTML with dynamic languages such as
ASP.NET (Active Server Pages), Java, PHP and JavaScript.
 HTML is written with tags inside angle brackets (<>). These tags can be opening (e.g. <body>) or closing (e.g. </body>).
Examples of HTML tags
Tag Function
<html> and </html> Opens and closes the code
<head> and </head> Document header
<title> and </title> Indicates the document name inside <head>
<body> and </body> Body of the document
<h1>, <h2>... and </h1>, </h2>... First-level heading, second-level heading... inside <body>

 Website editors
 Website editors are applications used to create web pages. WYSIWYG (what you see is what you get) editors allow us to
create our web page as though we were writing in a word processor. They then automatically generate the source code in
HTML.

 File hosting and transfer

 File transfer programs (FTP) connect the local computer to the server hosting the site. This is done when it is necessary
to replace the set of files that make up the website (which are handled by webmasters on their local computers) with the
ones hosted by the server.

 Design criteria. Publishing standards

 Layout refers to how the spaces and written, visual and audiovisual content are organised. It covers the semantic and
formal aspects of a digital application.
 The interface is the set of commands and methods allowing interaction between the user and the system (the website).
 Under Spanish law, the web pages of government agencies must meet certain publishing standards with regard to
navigability and accessibility for people with disabilities. These criteria, called accessibility criteria, are established by
the World Wide Web Consortium (W3C).
204 Information and Communication Technologies - 4º ESO - Editorial Donostiarra
 Publishing and disseminating content
Review
6

COMPREHENSION ACTIVITIES

When you have completed the topic, do the following exercises. You can complete them online by going to the relevant
unit on the publisher’s website (www.editorialdonostiarra.com) and hand them in as PDFs.

 Web pages. Publishing tools: content management systems

1.  Define the following concepts: static web page and dynamic web page. Explain what languages each type of page
uses.
2.  What do we mean when we say that information is organised on websites as hypertext?
3.  Find the figure showing how websites work in this unit and study and explain it.
4.  What is a content management system? Which are the most popular content management systems?
5.  In relation to Practical 1 and Practical 2, explain the difference between the structure of the website we created and
the structure of the blog.

 HTML. Website editors

1.  Explain the following HTML concepts: tag, attribute, element. Give examples of each.
2.  Copy the basic starting structure of an HTML document and explain what each tag is used for.
3.  Name three HTML tags that you have used in this unit (not including the ones in the previous exercise). State what
each one is used for.
4.  Explain what a website editor is and what advantages and disadvantages it has.
5.  In relation to Practical 6, explain how you would put the image on the left and align the text “My name is...” to the right.
6.  In relation to Practical 7, explain what the table structure is used for in a web page.
7.  In relation to Practical 7, outline the steps allowing a user to access every page of a website from any of its pages.

 File hosting and transfer

1.  What does FTP stand for? What process does it refer to? What programs or applications can perform this process?
2.  What is web hosting?
3.  What are the essential data for transferring a file to a host via FTP?
4.  In relation to Practical 8, what should we call the home page of a website?
5.  In relation to Practical 8, answer the following question, giving reasons for your answer: can we host several web
pages with the same name on a single website?

 Design criteria. Publishing standards

1.  What are the layout and the interface?
2.  Explain what publishing standards are and which agency sets them.
3.  Name a publishing standard and explain what it involves.
4.  What are accessibility levels? How many are there? Which agency sets them?
5.  Visit the website of a large company and describe its layout in five lines: use of colours, fonts, organisation of space,
visual and audio-visual content...
6.  In relation to Practical 1 and Practical 3, where you created web pages with two different applications, explain:
a) Which interface you liked best for creating pages: WordPress or Google Sites? Why?
b) Which layout you liked best, once the page was created? Why?
Information and Communication Technologies - 4º ESO - Editorial Donostiarra 205
 Publishing and disseminating content
6 Review

MULTIMEDIA ACTIVITIES

When you have studied the topic, test your knowledge by doing the following online exercises, which you can find in the
relevant unit on the publisher’s website (www.editorialdonostiarra.com). You can hand them in as PDFs.

1. Test on web pages and content management systems

Open exercise Unit06 01 Test on web pages and content management systems in
Unit 6 of the virtual CD and test your knowledge.
There is only one correct answer to each question.
Once you have finished, you can print the test as a PDF and give it to your teacher with the
mark you obtained.

2. Test on HTML and website editors

Open exercise Unit06 02 Test on HTML and website editors in Unit 6 of the virtual CD
and test your knowledge.
There is only one correct answer to each question.
Once you have finished, you can print the test as a PDF and give it to your teacher with the
mark you obtained.

3. Test on file hosting and transfer

Open exercise Unit06 03 Test on file hosting and transfer in Unit 6 of the virtual CD and
test your knowledge.
There is only one correct answer to each question.
Once you have finished, you can print the test as a PDF and give it to your teacher with the
mark you obtained.

4. Test on design criteria and publishing standards

Open exercise Unit06 04 Test on design criteria and publishing standards in Unit 6 of
the virtual CD and test your knowledge.
There is only one correct answer to each question.
Once you have finished, you can print the test as a PDF and give it to your teacher with the
mark you obtained.

206 Information and Communication Technologies - 4º ESO - Editorial Donostiarra

 Publishing and disseminating content
Review
6

MOBILE APPS

 Edmodo, an educational platform

Edmodo is a free educational platform that is used like a social network. It is for close groups of
people, since the groups are composed of the students and teachers in a class. It is used to share
messages, documents, notices, etc.
1. Download the app. A web option is also available.
2. Create your free account or log into the application.
3. In the Clases option, if you click on + you can choose either Crear una clase nueva or Unirse
con el código (with the latter option, you can join classes created by other people). Create a
class and get two classmates to join.
4. In the Flujo option, click on + and share a publication about this unit with the class that you
created.
5. From the same place, send a message to each classmate.
6. Take a screenshot of the Flujo and Clases windows. Download them to your computer and
paste them into a text document. Save the document with the name App_namesurname.

ONLINE ACTIVITIES
 Registering a domain
The agency that manages the registration of Internet domain names under the Spanish country code is Red.es. It does this
through registrars like 1&1 Internet, Arsys and Piensa Solutions.
1. Go to the Spanish domain registration page: www.dominios.es/dominios.
2. In the Search for and register your domain menu, check whether the following domains are registered: five trade-
marks, your name and surname, the names and surnames of three friends, and three words that you would like to
register.
3. Save this information in a document with the name Internet1_namesurname.

 Style sheets
Style sheets can be used in very diverse websites; there are even free style sheets available on the Internet.
1. Using a search engine, find out more about style sheets: what they are, what they are used for, etc. Enter this information
in a text document. Save the file with the name Internet2_namesurname.
2. Do an online search for free style sheets. They all have the extension .css. Download three and save them to a folder
called Internet2_namesurname. Add the file that you created in step 1 to this folder.

ON THE INTERNET: USEFUL ADDRESSES

roble.pntic.mec.es/apuente/html Fantastic website containing HTML manuals and tutorials split into levels, all created by
Ángel Puente.
es.wikiversity.org Wikiversity is a free, academic wiki with some interesting courses on HTML.
www.tualojamientoweb.com Website about terminology and the use of domains and hosting, both free (with and without
advertising) and paid.
www.webdesign.org A website all about web design.
en.support.wordpress.com/using-wordpress-to-create-a-website WordPress help for creating websites.

Information and Communication Technologies - 4º ESO - Editorial Donostiarra 207