CHAPTER 1_ HTML and CSS Introduction Module
- 1. Transcend Smarter Learning WELCOME TO LEARN at FLIGNO
- 2. Transcend Smarter Learning 2 HTML & CSS BASICS CHAPTER 1: HTML AND CSS OVERVIEW LOGO
- 3. Transcend Smarter Learning 3 CHAPTER 1: HTML AND CSS OVERVIEW Learning Objectives At the end of this chapter you should be able: 1. Learn HTML and its features and CSS and its benefits 2. Know basic tools for making HTML and CSS 3. Learn the difference between HTML and CSS. 4. Determine the relationship between HTML and CSS
- 4. Transcend Smarter Learning LESSON 1 INTRODUCTION TO HTML AND CSS
- 5. Transcend Smarter Learning 5 Main Topic INTRODUCTION TO HTML AND CSS What is HTML ? The “HyperText Markup Language” is the standard markup language for documents designed to be display in a web browser
- 6. Transcend Smarter Learning 6 Main Topic INTRODUCTION TO HTML AND CSS What is CSS? Cascading Style Sheets is a style sheet language used for describing the presentation of a document written in a markup language such as HTML.
- 8. Transcend Smarter Learning 8 SubTopic INTRODUCTION TO HTML AND CSS Advantage of HTML ● Browser friendly ● Free to use ● Easy to learn ● Simple structure ● Lightweight and fast ● Allows the use of templates Disadvantage of HTML ● Static language ● Takes time to format ● Limited security ● Dependency issue
- 9. Transcend Smarter Learning 9 SubTopic INTRODUCTION TO HTML AND CSS Advantage of CSS ● Better website speed ● Easier to maintain ● Consistent design ● Time-saving ● Better device compatibility ● Flexible positioning of design elements Disadvantage of CSS ● Confusion due to many CSS versions ● Cross-browser issue ● Limited security ● Extra work for developers
- 10. Transcend Smarter Learning 10 Main Topic INTRODUCTION TO HTML AND CSS HTML and CSS code editors A source code editor is a text editor program designed specifically for editing the source code of computer programs. ● Visual Studio Code ● Notepad++ ● Sublime text ● Atom
- 11. Transcend Smarter Learning 11 SubTopic INTRODUCTION TO HTML AND CSS Visual Studio Code A free source-code editor made by Microsoft for Windows, Linux and macOS.
- 12. Transcend Smarter Learning 12 SubTopic INTRODUCTION TO HTML AND CSS Notepad++ A free source code editor and Notepad replacement that supports several languages.
- 13. Transcend Smarter Learning 13 SubTopic INTRODUCTION TO HTML AND CSS Sublime text Called a cross-platform code editor.
- 14. Transcend Smarter Learning 14 INTRODUCTION TO HTML AND CSS SubTopic Atom A free source code editor for macOS, Linux, and Microsoft Windows with support for plugins written in JavaScript, and embedded Git Control.
- 15. Transcend Smarter Learning LESSON 2 HOW DOES HTML AND CSS WORK TOGETHER
- 16. Transcend Smarter Learning 16 HOW DOES HTML AND CSS WORK TOGETHER HTML and CSS Differences HTML provides the raw tools needed to structure content on a website while CSS helps to style this content so it appears to the user the way it was intended to be seen. Main Topic
- 17. Transcend Smarter Learning 17 HOW DOES HTML AND CSS WORK TOGETHER Relationship Between HTML and CSS HTML is used for web page structure while CSS is used for web page enhancement. Main Topic
- 18. Transcend Smarter Learning 18 HTML View HOW DOES HTML AND CSS WORK TOGETHER Relationship Between HTML and CSS ● HTML file without CSS SubTopic
- 19. Transcend Smarter Learning 19 Web View SubTopic HOW DOES HTML AND CSS WORK TOGETHER HTML and CSS Differences ● HTML file without CSS
- 20. Transcend Smarter Learning 20 HTML View CSS SubTopic HOW DOES HTML AND CSS WORK TOGETHER HTML and CSS Differences ● HTML file with CSS
- 21. Transcend Smarter Learning Any Questions?
Editor's Notes
- #21: But there are many ways to insert your css style: Internal CSS External CSS Inline CSS