Creating and publishing a website or blog

Explain in your own words the difference between a web page and a website, using the simile of a book: what each page would be and what the whole book would be. Give an example of a website you know and name two of its pages.

When you visit a website, two programs are involved: your computer's browser and the server where the website lives. Explain what each one does (who requests the page, who stores and sends it, who displays it) and what happens if the server is turned off.

The figure shows the typical layout diagram of a web page, with its four areas, but the name of one of them is covered up.

Indicate which area is covered up and what it normally contains, and explain the purpose of each of the other three areas of the page.

A bakery wants a simple website with: an introduction, photos of its cakes, opening hours and a map with its address. Design its structure: what areas the home page will have (header, menu, content, footer), what will go in each, and which two secondary pages you would link from the menu.

Design the homepage of the science club website: draw or describe its layout scheme (header, menu, content, footer), decide on four items of content you would highlight on it, and explain what links you would include in the menu and why those and not others.

You can do it on paper and send a photo with your answer.

HTML does not "program" the page: it describes it using tags that mark what each element is. Explain what an HTML tag is using the simile of coloured highlighters used to mark notes (this is a title, this is a paragraph) and state the difference between the content and the markings.

Match each HTML tag with what it places on the page: (a) <h1>, (b) <p>, (c) <img>, (d) <a>, with these functions: a link to another page, an image, the main title and a paragraph of text. Then, state which of the four always requires an address showing where the resource is located.

Read this HTML snippet and describe how the page will look in the browser, element by element: <h1>El rincón de Marta</h1>, <p>Manualidades y recetas fáciles.</p>, <img> with a photo of cookies, <a> with the text "Ver la receta completa". State which tag produces each part.

The figure shows the tag tree of a very simple web page: how some tags contain others, but two tags are covered up.

Find out which two tags are covered up using the clues below each box, and explain in your own words what it means for a tag to hang from another in the tree.

A group of students has created this HTML code snippet for their secondary school's futsal team profile page:

<h1>Equipo Cadete</h1>

<img src="equipo.jpg">

<a href="calendario.html">Haz clic aquí</a>

When auditing the page, two issues were detected:

1. If the image fails to load due to a network error, only a broken icon appears on the screen with no explanation.

2. If a visually impaired person uses a screen reader, they do not know what the image contains or where the link leads specifically.

Rewrite the HTML code fixing both issues (use appropriate attributes and descriptive text) and technically justify how your solution improves the web accessibility and usability.

Today, you can create a website without writing code, using website builders such as Google Sites or WordPress. Explain what a website builder is, how to work with it (dragging blocks, choosing templates) and what advantage it has for someone who is just starting out.

These steps for publishing a website using a site builder are jumbled up: (a) check how it looks on mobile and computer, (b) choose a template, (c) think about what content it will have, (d) click "publish" to give it an internet address, (e) add the text and images. Put them in order and explain why checking must take place before publishing.

Your neighbourhood youth association wants to publish its website and is considering two options:

• Option A: Create a free site on an online platform, obtaining the address asociacionvalle.creacionsitios.com and free hosting on their servers in exchange for displaying provider ads.

• Option B: Register their own domain asociacionvalle.es (€8 per year) and hire independent hosting (€3,5 per month).

1) Explain the function of the domain and that of hosting, distinguishing them in each of the two options.

2) The treasurer proposes Option A, stating: "Let's save the money; the address and the server don't matter at all as long as the page opens." Refute their claim by predicting at least two problems or limitations the association will face in the medium term if they choose Option A (related to their public image, advertising, or content control).

The class is going to create the group's website. Classify these pieces of content as "can be published" or "should not be published", justifying each case: the name of the school, the photo of the school building's facade, the full names and surnames of all students, class work signed only with first names, a student's personal timetable and a description of group activities.

Images on a website carry alternative text (the "alt" attribute) that describes the photo. Explain who needs it (people who use screen readers) and write a good alternative text for these two images from the class blog: (a) the photo of the winning team of the chess tournament and (b) a bar chart showing club attendance each month.

On the AMPA website, a list appears with "full names of the award winners at the party, their school year and their photo". Analyse what personal data is being published, what risks they pose together (more so than individually), what permissions would be needed, and how you would publish the same news item while protecting the students.