L12. Build and open your website

Build a page you can open on your computer, allowing about 40 minutes. You need brief.txt, Notepad and a browser. Generate the code with AI or use the supplied files in Examples_EN.zip. Both routes use Documents\AI-practice\personal-site.

For the supplied example, start at step 4; to generate your own files, start at step 1.

In class

The teacher will save an HTML file and open it in both Notepad and a browser. Together, we will check the two filenames and the Projects link.

Create the two files

To edit the file, open it in Notepad, which shows the HTML text. To view the page, open it in a browser, which reads that markup and displays the result. You do not need to install a server or type commands.

• In the AI conversation containing your brief, send the prompt below. If you start a new conversation, paste the contents of brief.txt first.

> [PROMPT]

> Create a complete one-page website from the agreed brief. Return exactly two complete files in separate code blocks: index.html and styles.css. Use English, lang="en" and UTF-8. Menu: “About me”, “Projects”, “Contact”; matching section ids: about, projects, contact. One main heading, “Olena”, an introduction with class="intro", initial font-size: 21px and max-width: 620px, and three projects whose descriptions explain their current status. Clearly label mailto:[email protected] as a practice contact address. Use a white background, dark green text, blue underlined links and visible keyboard focus. Text must wrap on a narrow screen. Link to styles.css using a relative path. No JavaScript, libraries, external fonts or images. Double-clicking index.html must open the page. Return all code; do not write “the rest is unchanged”.

• Find the index.html block in the answer. Copy its code without the triple backticks around it. In Notepad choose File → Save as. Open Documents\AI-practice\personal-site, enter index.html as the file name, select All files as the file type and UTF-8 as the encoding. Choose Save.
• Open a new Notepad document. Save the second code block as styles.css in the same folder. Do not paste CSS after the HTML in a single document: this project uses two separate files. Continue at step 5, skipping the alternative in step 4.
• Alternative route: in File Explorer, right-click Examples_EN.zip and choose Extract All. Find personal-site inside it. Copy index.html and styles.css into your project folder. If replacing your own version, first copy it into a folder named personal-site-backup. If that folder already exists, use a new name, such as personal-site-backup-2.
• Double-click index.html. If it opens in the wrong program, right-click it and choose Open with → Microsoft Edge or Chrome. You should see Olena’s name, an introduction, three projects and a contact section. Click “Projects”: the page moves to that section and its address ends in #projects. Press Tab to outline a link, then Enter to open the outlined link.

[[VIS:b5_site_files]]

Understand a small piece

Open index.html in Notepad. Find the email link. Its essential structure looks like this. This is an HTML fragment, not a terminal command:

<a href="mailto:[email protected]">
  Email Olena
</a>

<a> starts the link, href gives its destination, and </a> ends it. “Email Olena” is the visible text. The mailto: prefix asks the computer to open an email application. Clicking the link does not send a message. If email is not configured, the browser may ask you to choose an application; inspecting the address in the code is enough for this exercise.

Near the top of the HTML, find href="styles.css". The browser looks for that file beside index.html. This is a relative path: the files remain connected when you move the folder to another computer.

The browser address starts with file: because it is reading your computer’s file. The page already works, but another person cannot visit it using that local address. Publication will give it an internet address in lesson 14.

> [FIX]

> Seeing plain text instead of a page? In File Explorer enable View → Show → File name extensions. Check whether the name is actually index.html.txt. Remove only the extra .txt. If the page opens but has no styling, check the spelling of styles.css and make sure it is beside the HTML file.

>

> If Tab produces no outline, paste the contents of styles.css into an AI message: “Restore visible link focus without changing other styling.” Save the corrected CSS using step 3, reload the page and repeat the check.

Below is the top of the supplied example in wide and narrow windows. Compare its wrapping introduction and visible menu with your page.

[[VIS:b5_site_browser]]

Home practice

• In File Explorer, copy personal-site beside the original and name it personal-site-home. Add an unused number if needed.
• Open both copied files in Notepad. Find the linked CSS filename and the contact-link text without changing them.
• Save Documents\AI-practice\site-files-home.txt. Name the file you open to view the page and the file you would edit to change its colour. Add the contact address you found. Check your answers against the files; do not send an email.

Self-test

• After clicking “Projects”, what should change on the page and in the browser address?
• The words appear but the colours are missing. Which two things concerning styles.css would you check first?
• What does the outline around a link mean after pressing Tab, and how can you open that link without a mouse?

Terms

• Tag: an HTML marker, such as <a>, identifying part of a document.
• Relative path: a file address measured from the current folder.
• Focus: the element that will receive the next keyboard action.