Paggawa ng simpleng web page

Edad 13 hanggang 17 Magbasa nang mag-isa · mga 60 minuto

Basahin nang magkasama

Ang web page ay text file. Minamarkahan ng HTML ang nilalaman gamit ang mga tag: pamagat, talata, link at larawan. Kinokontrol ng CSS ang hitsura: kulay, font at ayos. Makagagawa ka ng pahina gamit lamang ang text editor at browser, nang walang internet.

Naaabot ng lahat ang mahuhusay na pahina. Bigyan ng maikling paglalarawan ang mga larawan (alt text) para maunawaan ng mga taong hindi nakakakita. Gamitin nang may pagkakasunod ang mga pamagat. Gawing nababasa ang teksto, may matibay na kontrast.

Itinayo ang website na ito sa parehong paraan: payak na HTML at CSS, may kaunting JavaScript, at walang pagsubaybay.

Gawin ito

1. Magbukas ng payak na text editor at gumawa ng file na pinangalanang page.html. I-type: <!doctype html> <html lang="fil"> <head> <meta charset="utf-8"> <title>Aking pahina</title> </head> <body> <h1>Tungkol sa akin</h1> <p>Kumusta!</p> </body> </html>. I-save at buksan ang file sa browser.
2. Magdagdag ng ikalawang pamagat gamit ang <h2>, listahan gamit ang <ul> at <li>, at link gamit ang <a href="...">. I-reload ang pahina para makita ang bawat pagbabago.
3. Magdagdag ng estilo: sa head, isulat ang <style> body { font-family: serif; max-width: 40rem; margin: 2rem auto; } </style>. Baguhin ang isang kulay. Tiyaking madaling basahin ang teksto.
4. Magdagdag ng larawan gamit ang <img src="litrato.jpg" alt="Maikling paglalarawan">. Bakit mahalaga ang alt text?

Pag-usapan

• Ano ang pagkakaiba ng HTML at CSS?
• Sino ang nakikinabang sa alt text?

Para sa nakatatanda

Itinuturo ng pagbuo ng simpleng pahina sa bahay kung paano gumagana ang web, at magagawa ito nang offline. Kung gustong maglathala ng pahina ng tin-edyer, pag-usapan muna ang privacy: huwag isama ang buong pangalan, tirahan, paaralan o larawan ng ibang bata.

Markahang tapos na

← Naunang aralin Susunod na aralin →

Saan ito nagmula

• World Wide Web Consortium (W3C), HTML Living Standard and Web Content Accessibility Guidelines (WCAG) 2.2, on text alternatives
• Mozilla Developer Network (MDN) Web Docs, “Learn web development”

Isinulat sa tulong ng AI at sinuri laban sa mga nakalistang pinagkunan. Pakibasa muna bago ibahagi sa bata.

Hindi pa nasusuri ng katutubong tagapagsalita ang wikang ito.