COMP 9 U1 - L1.pptx COMP 9 U1 - L1.pptxCOMP 9 U1 - L1.pptx

COMP 9 U1 - L1.pptx

1. AN INTRODUCTION TO WEB DESIGN UNIT 1 LESSON 1 Ms. Janine B. Costillas

2. At the end of the lesson, students are expected to: learn HTML and how it works; differentiate static and dynamic websites; understand the process of displaying a website from plain texts; and identify the shortcut keys used in Notepad++ and some simple ways in HTML codin. Learning Objectives

3. Fix the jumbled letters. MOTIVATIONAL ACTIVITY

4. SREBWOR

5. BROWSER

6. DPTAONE

7. NOTEPAD

8. BWE GAPE

9. WEB PAGE

10. CATSIT

11. STATIC

12. DOER

13. REDO

14. KLYPHNIRe

15. HYPERLINK

16. KARUMP

17. MARKUP

18. MYCIDNA

19. DYNAMIC

20. COTHRUST

21. SHORTCUT

22. TYEXPHRET

23. HYPERTEXT

24. HTML STANDS FOR?

25. HYPERTEXT MARKUP LANGUAGE

26. HYPERTEXT MARKUP LANGUAGE It makes up the structure and content of web pages. It is a markup language that is globally recognized for its efficiency and ease of use for bulding websites. It uses symbols and texts that are translated into a webpage’s visual and interactive composition.

27. WEB DEVELOPERS These are the individuals who create and design web pages using markup languages like HTML. They are skilled and fluent in writing codes.

28. TWO (2) KINDS OF WEB PAGES

29. STATIC WEB PAGE DYNAMIC WEB PAGE

30. STATIC WEB PAGE It is web page that is viewed by a user exactly as it is stored. In other words, it has a fixed content.

31. EXAMPLES: A personal portfolio website with text and images An “About Us” page of a company A school’s mission and vision page A basic resume webpage A restaurant menu page

32. WHAT ELSE

33. DYNAMIC WEB PAGE It is web page that is capable of dynamically displaying information or content that varies depending on the users. It requires web programming and database design.

34. EXAMPLES: Facebook – Your feed shows your friends' posts, comments, likes, etc. YouTube – Recommends videos based on your viewing history Shopee/Lazada – Shows different products and prices for every user Google Search – Shows results based on what you type Gmail – Shows your personal inbox

35. WHAT ELSE

36. HOW HTML WORKS

37. HTML is handled by a host PC or a web server. The web serrver is responsible for storing and sharig the converted texts and symbols to a web display. The server will retrieve the information from its storage and it will give all the requests of the user. Users can view the web page using any mobile internet device that has a display or a screen, such as smartphones, tablets, laptops or personal computers. For web developers, it is possible to view their own web pages even without an internet connection because they have access to their HTML files which they can view locally through a web browser.

38. What is a web browser or browser?

39. WEB BROWSER/BROWSER It is an application that locates, retrieves, and displays data from the World Wide Web (WWW) so that a user can view it as a web page. A browser works by reading HTML files and other web languages that are compiled as one design. A web page is equivalent to one HTML file. This can be linked to other web pages through clickable objects on the web page called LINKS. When the user clicks a link, the browser identifies that request, and will process the command. It will interpret the tagss and their meanings, structures, including texts.

40. WEB BROWSER/BROWSER What else?

41. HTML allows you to create web pages that display various inforrmation such as news, advertisements, entertainment purposes, business profiles, etc.

42. Websites’ appearance depends on the HTML codes. Aside from HTML, you can also include CCS or Javascript in your HTML file to give your website a more appealing look. CSS: Cascading Style Sheets

43. If a website was a house: HTML is the frame (walls, rooms, roof), CSS is the paint and decorations (colors, style), JavaScript is the electricity (things that move or react when you click).

44. To create an HTML file, we use a compiler application such as Notepad++. NOTEPAD - it is an application that creates and edits HTML files easily.

45. NOTEPAD++ It is a text editor used to write and edit code. It is better than regular Notepad because it highlights code, organizes it, and supports many programming languages like HTML, CSS, JavaScript, It’s mainly used by programmers or web developers to write clean code. 🧠 Think of Notepad++ as your writing notebook for code.

46. NOTEPAD++ SHORTCUTS ACTION SHORCUT KEYS Copy New File Open File Find Undo Cut Paste Save Select All Replace Redo Another Line Ctrl + C Ctrl + N Ctrl + O Ctrl + F Ctrl + Z Ctrl + X Ctrl + V Ctrl + S Ctrl + A Ctrl + H Ctrl + Y Ctrl + D/ Ctrl + M

47. What is a website?

48. WEBSITE It is a group of related web pages that can be accessed with the use of a browser. It usually contains hyperlinks and made available through the internet or through a private local area network (LAN). STATIC WEBSITE It has web pages that are stored on the server in the same format that is sent to the browser. DYNAMIC WEBSITE it is website that automatically changes or customizes itself to display the state of dialogue between its userrs, monitor a changing situation, or provide information that is personalized of the user.

49. Tech Support pg. 7