The browser interprets files and presents an interactive page. HTML expresses structure and content, CSS describes presentation and JavaScript can respond to events. The editor modifies those files; the browser displays their interpretation. Saving and reloading are different steps: without saving, a reload may show the previous version. A search engine locates resources, but it is not the program executing our local page’s questionnaire.

In a served website, a client requests resources from a server. Our exercise can also open files from a folder while preserving their relationships. Service functions do not all behave identically from a local file, so use the classroom’s prepared preview environment. Publishing means making resources available to an audience and configuring access; saving alone does not do that. The mission uses restricted distribution. Distinguishing file, browser, server and search engine helps explain access failures without blaming every issue on code or Internet connection.

HTML organises content through elements that express its meaning. A heading indicates hierarchy: it identifies the topic that begins and how it relates to the others, beyond its appearance. Our website has a main heading and three coherent sections covering purpose, operation and tests. Navigation offers descriptive links to reach them. Visible text guides the reader, while href specifies the destination: #pruebas needs an element with id pruebas. Changing the link’s words does not automatically change that reference. This organisation also supports navigation with assistive technologies.

Resources in other files need equally clear location relationships. The path imagenes/esquema.png looks for esquema.png in the imagenes subfolder relative to the current document. A personal absolute path may depend on a location on one particular computer. Preserving structure, names and letter case when copying the project maintains relationships between documents and resources. Opening the copied folder therefore provides a different check from viewing the version that already worked in its original location.

The structure must also make images’ contributions understandable. An informative image needs an alternative conveying its meaning in context; decoration can have an empty alternative. A complex diagram additionally needs text explaining its relationships. Saying only ‘image’ or repeating the filename does not provide that information. Checking navigation and understanding from the copied folder reviews both technical destinations and the explanations the reader finds.

CSS applies presentation rules to selected elements. A rule contains a selector and property-value declarations. A type selector can affect all paragraphs; a class groups elements sharing a visual role. Keeping styles in a separate file supports reuse and reviewing changes without altering content. HTML must link that file correctly for styles to apply. Missing styling may result from a wrong path rather than a poorly chosen property.

Readability depends on contrast, line length, spacing and text enlargement. A maximum width limits excessive lines; an image with a relative maximum width and automatic height can adapt without distortion. Several columns may need rearranging in a narrow window. Relative measurements respond to context; fixing every dimension in pixels can hinder adaptation. Check reading, keyboard use and enlargement in concrete tasks without claiming a few rules guarantee all accessibility. If content is clipped, review its container and layout before shrinking text to make it fit.

An interaction connects what a person does with a response from the page. In the local questionnaire, HTML defines a selector, a button and a result area. JavaScript connects these elements through an event: pressing the button runs a handler that reads the current selection. The timing of that reading matters. If the option were stored only when the page loaded, changing the selector later would not update that data, and the response could correspond to an earlier choice.

The decision can be organised in a function that receives the option and returns a message. This return supplies a value; a separate step presents it on screen using textContent, which writes the result as text. Separating these steps clarifies which part decides and which displays. The logic covers Sensor, Actuator, Controller and the empty option, with a general branch offering guidance for an invalid choice. In comparisons, === expresses strict equality; = assigns a value, and braces delimit instruction blocks.

This response takes place within the local exercise and does not require sending data. A button of type button activates the handler without submitting the form. If the template uses submit, its default submission must be prevented using preventDefault and that behaviour checked. A visible label associated with the selector explains what is being chosen. Messages develop the relevant conceptual relationship rather than merely saying ‘correct’, so the response also supports learning.

A source informs; a licence or permission determines authorised uses of a work. These questions are related but distinct. To justify project behaviour, consult technical documentation and record author, title, link, date and use in your explanation. To include external images or code, locate the original work and check its conditions. A search result grants no permission and does not replace the exact link. Attribution does not turn a prohibited use into an authorised one.

Licences have different conditions. BY requires attribution; SA may require sharing an adaptation under the same or a compatible licence; NC restricts use to noncommercial purposes; ND does not permit sharing adaptations under that permission. Check the specific licence before modifying or distributing resources and distinguish your contributions from others’. Original material may also reveal other people’s data: screenshots need privacy review even without authorship issues. Reader permission in shared storage determines audience and editing, not image rights. Keep a record allowing these three questions to be reviewed separately.

Debugging means reproducing a fault, proposing a cause, changing the relevant part and repeating the test. A missing image suggests a path or file issue; a broken internal link suggests href and id; an unresponsive button suggests program loading or handler issues. The browser console helps find technical errors, but incorrect answers may run without warnings. Always compare results with defined behaviour rather than merely the absence of error messages.

Prepare tests for every link, option and empty input. Copy the whole folder elsewhere and open it there to detect personal dependencies. Also check keyboard access, narrow windows and text enlargement. In the school’s restricted distribution, review who can view and edit using a practice account or teacher assistance. ‘Anyone with the link’ may broaden the audience and is not equivalent to the authorised group. Keep source files for correction and record before and after so the verified improvement and remaining work can be recognised.

A web project brings together content and related files. Structure expresses what is explained; style supports navigation; interaction checks a choice and provides information. These layers cooperate but do not replace each other. A test section describes conditions, results and limitations of the original project rather than only photographs of success. Images provide visual support while text interprets what was verified. The final folder must preserve resources and paths in recognisable organisation.

A01 includes audience, map, sources, planned interaction and an executed micro-website. It also documents a repaired fault and a draft shared with reader role in the authorised environment. A02 adds the three complete sections, functional interaction, exported-folder tests, credits and an improvement. Each partner explains a layer and a resolved error with a personal decision. Short practices reuse the same website without creating extra assignments. Before distribution, another pair follows the route without initial help: this reveals messages or destinations that the authors had assumed were obvious.

MDN references explain links, styling and events through examples that can be investigated in parts. W3C tutorials support choosing headings, labels and alternatives by function. You do not need an extensive course to resolve a small question: first state the observed behaviour and what you want to understand. An external example may use different folders or element names. Adaptation requires relating those references to your project rather than copying only visible code.

Transfer means anticipating changes when extending an interaction or moving a website. Adding an option requires reviewing HTML content, decision, message and tests; placing the folder elsewhere requires reviewing paths from each document. A visual improvement requires repeating reading conditions. Optional resources and videos can be consulted with pauses and written support. In Google Docs, record the question, consulted link and how adaptation was verified. Internal checking implies neither accessibility certification nor public publication: communicate precisely which routes, sizes and permissions were reviewed in the school environment.