Essentials of HyperText Markup Language

Course Description

Sa course na ito, tatalakayin ang basics ng HTML. Kasama sa mga topics ang accessibility, kung paano malalaman kung aling tag ang gagamitin, at pag-una sa semantics ng isang Web page. Throughout this course, magkakaroon ng emphasis sa separation of concerns: gamitin ang HTML para ipaalam sa browser ang meaning at purpose ng content, hindi ang visual styling ng isang element. Para ito sa mga walang experience sa paggawa ng Web sites at mga Web developers na pero gustong magkaroon ng refresher course para ma-improve ang paggawa nila ng Web sites.

Prerequisites

Para sa lahat ang course na ito. Pero magiging mas madali ito para sa mga taong...

• marunong gumawa ng bagong files at folders
• marunong gumamit ng Web browser, gaya ng Firefox at Google Chrome
• marunong mag-copy, rename, at delete ng computer files

Before you start...

Para maging lalong effective ang course na ito, gawin ang mga sumusunod:

• Siguruhing may naka-install kang Web browser. Kung wala pa, puwede mong i-install ang kahit na alin sa mga ito:
  • Google Chrome
  • Firefox
  Kung balak mong gamitin ang default browser ng computer mo (Microsoft Edge sa Windows 10, Internet Explorer sa Windows 7, Safari sa macOS), siguraduhing updated ito. Note Hindi na nire-recommend na gamitin ang Internet Explorer sa kahit na anong version nito. Kung ito ang balak mong gamitin, pag-isipang mabuti kung puwede kang lumipat sa ibang browser.
• Tingnan kung may magagamit kang text editor. Sa Windows, puwede kang gumamit ng Notepad. Pero para sa mas magandang experience, puwede mong i-install ang kahit alin sa mga ito:
  • Visual Studio Code
  • Sublime Text

Lessons

1. HyperText Markup Language

   Ano ang HTML, at ano ang lugar nito sa Web development?

2. HTML Syntax

   Ang grammar na sinusunod ng HTML

3. Ang HTML Page

   Ang basic structure ng isang HTML page

4. Paragraphs at Headlines

5. Bold at Italic Text

6. Mga Listahan

7. Quotes at Blockquotes

8. Date at Time

9. Code, Preformatted Text, at Line Breaks

10. Subscripts, Superscripts, at Small Text

11. Kapag may mali sa code mo…

    Mga tools at techniques na puwede mong gawin kapag may mali sa code mo.

12. HTML Attributes

    Ang attributes ay additional settings na puwede nating ilagay sa mga tag para madagdagan o baguhin mismo ang functionality nila.

13. ARIA Roles

    Ang Accessible Rich Internet Applications (ARIA) ay ginawa para maging accessible sa lahat ang mga Web page.

14. HTML Whitespace at Formatting

    Ito ang puwede mong gawin para mas madaling basahin ang HTML code mo.

15. HTML Entities

    Paano tayo maglalagay ng special characters o symbols na wala sa keyboard natin?

16. Ang HyperText: Web Links

    I-connect natin sa isa't isa ang mga webpage natin.

17. Mga URL at File Paths

18. Navigation Links

    Sa karamihan ng webpages, may makikita tayong navigation bar. Paano natin ito gagawin sa HTML?

19. Images

    Paglalagay ng images, at iba pang techniques na puwede nating gawin para ma-save ang internet data ng users natin.

20. Figures at figcaption

    Ang figures ay mga media na isinasama natin sa content bilang additional information.

21. Audio, Video, at Subtitles

22. Pag-e-embed ng media gamit ang iframe

23. Paglalagay ng content na nasa ibang wika

24. HTML Forms

    Subukan nating gumawa ng sign up/log in form

25. HTML Tables

    Gumawa tayo ng table para mag-display ng data