Ang tatlong wika ng web
Ang web page ay parang bahay. Ang HTML ay ang mga pader at kwarto (ang structure). Ang CSS ay ang pintura at muwebles (ang itsura). Ang JavaScript ay ang kuryente: pinapailaw nito ang ilaw kapag pinindot mo ang switch.
- Inilalarawan ng HTML (HyperText Markup Language) ang content at structure gamit ang mga tag tulad ng
<h1>(pangunahing heading) at<p>(paragraph). - Kinokontrol ng CSS (Cascading Style Sheets) ang itsura ng mga bagay: kulay, font, spacing, layout.
- Nagdadagdag ng behaviour ang JavaScript: pagtugon sa mga click, pagpapakita at pagtatago ng mga bagay, pag-check ng mga form.
- Dina-download ng browser (Chrome, Firefox, Safari, Edge) ang mga file na ito mula sa server at iginuguhit ang page.
- Ang MDN Web Docs (gawa ng Mozilla) ay libre at mapagkakatiwalaang reference para sa tatlong wika. Kapag nakalimutan mo kung paano gumagana ang isang bagay, hanapin ito roon.
- Ang karaniwang maliit na site ay may tatlong file sa isang folder:
index.html,style.cssatscript.js. Ang home page ay kadalasang pinangalanangindex.html.
- Magbukas ng kahit anong website sa browser mo.
- Itanong: ano ang content at structure? Iyan ang HTML.
- Itanong: ano ang mga kulay, font at spacing? Iyan ang CSS.
- Itanong: ano ang tumutugon kapag nag-click ako? Iyan ang JavaScript.
- Gumawa ng bagong folder sa computer mo na ang pangalan ay my-site.
- I-check: kaya mong sabihin kung ano ang ginagawa ng bawat isa sa tatlong wika at kung anong mga file ang idadagdag mo: index.html, style.css, script.js.
Videos by other creators on YouTube, for reference. They are not made by or affiliated with The Future Market.
Read the video script
[Host] "Bawat website na nabisita mo ay gawa sa tatlong wika."
[Text on screen: HTML = structure, CSS = style, JavaScript = behaviour] "Ang HTML ay ang mga pader. Ang CSS ay ang pintura. Ang JavaScript ay ang switch ng ilaw."
[Screen: folder na may index.html, style.css, script.js] "Tatlong file sa isang folder. Iyan ang website."
Mag-install ng code editor. Gumawa ng folder na my-site na may tatlong walang lamang file: index.html, style.css at script.js.
ClaudeStuck? Copy a ready-made prompt for Claude
Copy this, open Claude, paste it, and Claude will walk you through the lesson step by step.
For a grown-up: Claude is for adults (18+). Copy this, paste it into Claude, and use the answer to explain the lesson to your child.
I'm learning "Basics ng Web Development (HTML, CSS, JavaScript)" on The Future Market. Lesson 1: "Ang tatlong wika ng web". What the lesson teaches: - Inilalarawan ng HTML (HyperText Markup Language) ang content at structure gamit ang mga tag tulad ng <h1> (pangunahing heading) at <p> (paragraph). - Kinokontrol ng CSS (Cascading Style Sheets) ang itsura ng mga bagay: kulay, font, spacing, layout. - Nagdadagdag ng behaviour ang JavaScript: pagtugon sa mga click, pagpapakita at pagtatago ng mga bagay, pag-check ng mga form. - Dina-download ng browser (Chrome, Firefox, Safari, Edge) ang mga file na ito mula sa server at iginuguhit ang page. - Ang MDN Web Docs (gawa ng Mozilla) ay libre at mapagkakatiwalaang reference para sa tatlong wika. Kapag nakalimutan mo kung paano gumagana ang isang bagay, hanapin ito roon. - Ang karaniwang maliit na site ay may tatlong file sa isang folder: index.html, style.css at script.js. Ang home page ay kadalasang pinangalanang index.html. The exercise I'm working on: Mag-install ng code editor. Gumawa ng folder na my-site na may tatlong walang lamang file: index.html, style.css at script.js. I'm stuck. Please: 1. Explain the main idea in plain, simple words with one everyday example. 2. Walk me through the exercise one small step at a time. Ask me what I've done so far before giving the next step. 3. Don't just give me the final answer. Help me do it myself, and check my work when I share it.
I'm a parent helping my child (about 8 years old) with a lesson called "Ang tatlong wika ng web" from the course "Basics ng Web Development (HTML, CSS, JavaScript)". Here's what the lesson says: Ang web page ay parang bahay. Ang HTML ay ang mga pader at kwarto (ang structure). Ang CSS ay ang pintura at muwebles (ang itsura). Ang JavaScript ay ang kuryente: pinapailaw nito ang ilaw kapag pinindot mo ang switch. The activity: Mag-install ng code editor. Gumawa ng folder na my-site na may tatlong walang lamang file: index.html, style.css at script.js. Please explain this so an 8-year-old understands: short sentences, a fun everyday example, and no hard words. Then give me 3 simple questions I can ask my child to check they understood, and a way to do the activity together, one tiny step at a time.
Sources
- MDN Web Docs, learn web development: developer.mozilla.org/en-US/docs/Learn_web_development
HTML: ang structure
This lesson is part of full access: every course and every level for one payment.
CSS: ang style
This lesson is part of full access: every course and every level for one payment.
JavaScript: ang behaviour
This lesson is part of full access: every course and every level for one payment.
Developer tools: tingnan ang loob ng kahit anong page
This lesson is part of full access: every course and every level for one payment.
I-publish ang site mo nang libre
This lesson is part of full access: every course and every level for one payment.
Final project
This lesson is part of full access: every course and every level for one payment.
Quiz
Aling wika ang kumokontrol sa structure, alin sa style, at alin sa behaviour?
HTML sa structure, CSS sa style, JavaScript sa behaviour.
Ano ang karaniwang file name ng home page ng isang site?
index.html.
Bakit kailangan ng bawat image ng alt attribute?
Inilalarawan nito ang image para sa mga gumagamit ng screen reader at lumalabas ito kung hindi mag-load ang image.
Sa CSS rule na
h1 { color: navy; }, ano ang selector?h1.
Ano ang ginagawa ng media query tulad ng
@media (max-width: 600px)?Ina-apply ang style sa mga screen na 600px ang lapad o mas makitid lang.
Ano ang pagkakaiba ng
letatconst?Ang let ay puwedeng palitan kalaunan; ang const ay hindi puwedeng i-reassign.
Ano ang ibinibigay ng
5 + "5"sa JavaScript?"55" (text).
Aling method ang naghahanap ng element sa page?
document.querySelector().
Paano buksan ang Chrome DevTools sa Windows?
F12 o Ctrl+Shift+I.
Puwede mo bang gamitin ang GitHub Pages para magpatakbo ng online store?
Hindi, hindi ito para sa mga commercial site tulad ng online store o sensitibong transaksyon.
Final exam
This lesson is part of full access: every course and every level for one payment.
Certificate
This lesson is part of full access: every course and every level for one payment.