Exercises: 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.

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.

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.

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.

A blog is a website that is updated with new articles, ordered from newest to oldest. Explain the difference between a blog and a "showcase" website (such as a shop's website, which hardly changes) and give an example of a topic that would fit well on each.

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.

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.

These steps for publishing a website using a site builder are jumbled up: (a) check how it looks on a cell phone and a 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.

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.

Compare creating a website by writing HTML by hand with creating it using a no-code site builder: one advantage and one limitation of each method. Then recommend one of the two for each case: (a) the reading club website, ready in one week; (b) learning how the internet works from the inside.

The class creates a blog about the town or city's neighbourhoods. Plan its first three posts: title of each, two contents it will include (text, photo, interview, map) and which menu section corresponds to it. Explain why it is advisable to plan before using the computer.

Photos of activities are published on the school website. Draft three rules for responsible publishing for that website, considering: which students can appear recognisably, what personal data must not accompany the photos and what permission is required from families. Justify each rule.

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.

Choose the website of a business or association in your local area that you know (or imagine a realistic one) and analyse it: what areas its main page has, what content it offers, what it is missing and what is redundant. Propose three specific improvements in structure or content and justify them.

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.

Three projects need a website: (a) the school newspaper, which will publish articles every week written by several people; (b) a project display, a single fixed page; (c) the school cooperative shop, with a catalogue and ordering system. Choose the most appropriate tool for each (a site builder like Google Sites, a blog like WordPress, or an e-commerce solution) and explain your choice.

Draft the publishing policy for the class website: which content is published and which is not, who reviews it before publishing, how third-party sources and images are cited, and what action is taken if someone asks to remove their content. Present it as a short four-section document.

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 pesos per year) and hire independent hosting (3.5 pesos 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).

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.

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.

A classmate says: "since we made the class website ourselves, we can put whatever we want on it: photos of anyone, famous background music, and text copied from other websites". Refute their three statements using arguments based on: privacy and image rights, music copyright, and text plagiarism, and propose the correct alternative in each case.