[REVIEWER] WEB PROGRAMMING.docx

01 HANDOUT 1 ============ **Introduction to HTML** - - - **HTML Document** - - - **3. HTML Basics** - - - **4. Headings** - **5. Links** - - - **6. Form** - **7. HTML Table** - - - - - - - **8. HTML Structure** **Basic Structure**:...

01 HANDOUT 1 ============ **Introduction to HTML** - - - **HTML Document** - - - **3. HTML Basics** - - - **4. Headings** - **5. Links** - - - **6. Form** - **7. HTML Table** - - - - - - - **8. HTML Structure** **Basic Structure**: - - - - - - - - - 02 HANDOUT 1 ============ **Image** - - - - - - - - - - **List** - - - - - - - - - **Span** - - - **Navigation** - - - - - **Forms** - - - - - - - - - - - - - **Multimedia and Graphics** - - - - - - - - - - - - - - 03 HANDOUT 1 ============ ### **Fundamentals of Cascading Style Sheets (CSS)** **Connecting CSS to HTML (Casabona, 2020)** - - - **CSS Syntax (Casabona, 2020)** - - - - - - **Styling and Formatting** - - - - - - - - - - - - - - **The Box Model (Casabona, 2020)** - - - - - - - - - - - - - - - - - - - - - - - - - - **Border Color**: - - - - **Border Style**: - - - **Border Width**: - - - - 04 HANDOUT 1 ============ ### **A RESPONSIVE WEBSITE** **CSS Grid Layout (Casabona, 2021)** - - **Code Example**:\ main { display: grid; grid-template-columns: 30% 30% 30%; } - - - - - **HTML Structure**:\ \ \ \... \ \ \... \ \ - - - - **Code**:\ \ - - - ### **MEDIA QUERY (Casabona, 2021)** - **HTML Example**:\ \ - **CSS Example**:\ \@media screen and (min-width: 600px) { main { display: flex; } } - - - - - - - ### **RESPONSIVE IMAGE** **Responsive Image**: Scales with device size using:\.responsive { width: 100%; height: auto; } - - ### **RESPONSIVE VIDEO** **Responsive Video**: Scales with device size using:\ video { width: 100%; height: auto; } - -