SlideShare a Scribd company logo
1 of 21
Transcend Smarter Learning
WELCOME TO
LEARN at FLIGNO
Transcend Smarter Learning 2
HTML & CSS BASICS
CHAPTER 1: HTML AND CSS OVERVIEW
LOGO
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
Transcend Smarter Learning
LESSON 1
INTRODUCTION TO HTML AND CSS
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
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.
Transcend Smarter Learning
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
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
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
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.
Transcend Smarter Learning 12
SubTopic
INTRODUCTION TO HTML AND CSS
Notepad++
A free source code editor
and Notepad replacement
that supports several
languages.
Transcend Smarter Learning 13
SubTopic
INTRODUCTION TO HTML AND CSS
Sublime text
Called a cross-platform
code editor.
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.
Transcend Smarter Learning
LESSON 2
HOW DOES HTML AND CSS WORK TOGETHER
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
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
Transcend Smarter Learning 18
HTML View
HOW DOES HTML AND CSS
WORK TOGETHER
Relationship
Between HTML and
CSS
● HTML file
without CSS
SubTopic
Transcend Smarter Learning 19
Web View
SubTopic
HOW DOES HTML AND CSS
WORK TOGETHER
HTML and CSS
Differences
● HTML file without
CSS
Transcend Smarter Learning 20
HTML View
CSS
SubTopic
HOW DOES HTML AND CSS
WORK TOGETHER
HTML and CSS
Differences
● HTML file with
CSS
Transcend Smarter Learning
Any Questions?

More Related Content

Similar to CHAPTER 1_ HTML and CSS Introduction Module

Web Design & Development Courses in Pune | 3DOT Technologies
Web Design & Development Courses  in Pune | 3DOT TechnologiesWeb Design & Development Courses  in Pune | 3DOT Technologies
Web Design & Development Courses in Pune | 3DOT Technologiesabeda786
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSSSiddhantSingh980217
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.pptSACHINS902817
 
How to Use CodePen - Learn with us!
How to Use CodePen - Learn with us!How to Use CodePen - Learn with us!
How to Use CodePen - Learn with us!Mars Devs
 
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraHow to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraCareervira
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 htmlCK Yang
 
MINOR PROZECT REPORT on WINDOWS SERVER
MINOR PROZECT REPORT on WINDOWS SERVERMINOR PROZECT REPORT on WINDOWS SERVER
MINOR PROZECT REPORT on WINDOWS SERVERAsish Verma
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptxshilpak0307
 

Similar to CHAPTER 1_ HTML and CSS Introduction Module (20)

Web Design & Development Courses in Pune | 3DOT Technologies
Web Design & Development Courses  in Pune | 3DOT TechnologiesWeb Design & Development Courses  in Pune | 3DOT Technologies
Web Design & Development Courses in Pune | 3DOT Technologies
 
Html basics
Html basicsHtml basics
Html basics
 
Web development using HTML and CSS
Web development using HTML and CSSWeb development using HTML and CSS
Web development using HTML and CSS
 
mini-project.pptx
mini-project.pptxmini-project.pptx
mini-project.pptx
 
introdution-to-html.ppt
introdution-to-html.pptintrodution-to-html.ppt
introdution-to-html.ppt
 
Lecture-1.pptx
Lecture-1.pptxLecture-1.pptx
Lecture-1.pptx
 
How to Use CodePen - Learn with us!
How to Use CodePen - Learn with us!How to Use CodePen - Learn with us!
How to Use CodePen - Learn with us!
 
Dreaweaver cs5
Dreaweaver cs5Dreaweaver cs5
Dreaweaver cs5
 
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by CareerviraHow to Become a Front-End Developer? Step-by-Step Guide by Careervira
How to Become a Front-End Developer? Step-by-Step Guide by Careervira
 
Web topic 2 html
Web topic 2  htmlWeb topic 2  html
Web topic 2 html
 
MINOR PROZECT REPORT on WINDOWS SERVER
MINOR PROZECT REPORT on WINDOWS SERVERMINOR PROZECT REPORT on WINDOWS SERVER
MINOR PROZECT REPORT on WINDOWS SERVER
 
Grade 7_HTML.pptx
Grade 7_HTML.pptxGrade 7_HTML.pptx
Grade 7_HTML.pptx
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
C language
C languageC language
C language
 
Code igniter
Code igniterCode igniter
Code igniter
 
Web Information Systems Html and css
Web Information Systems Html and cssWeb Information Systems Html and css
Web Information Systems Html and css
 
Html.pptx
Html.pptxHtml.pptx
Html.pptx
 

Recently uploaded

Internet of things -Arshdeep Bahga .pptx
Internet of things -Arshdeep Bahga .pptxInternet of things -Arshdeep Bahga .pptx
Internet of things -Arshdeep Bahga .pptxVelmuruganTECE
 
DM Pillar Training Manual.ppt will be useful in deploying TPM in project
DM Pillar Training Manual.ppt will be useful in deploying TPM in projectDM Pillar Training Manual.ppt will be useful in deploying TPM in project
DM Pillar Training Manual.ppt will be useful in deploying TPM in projectssuserb6619e
 
Past, Present and Future of Generative AI
Past, Present and Future of Generative AIPast, Present and Future of Generative AI
Past, Present and Future of Generative AIabhishek36461
 
Virtual memory management in Operating System
Virtual memory management in Operating SystemVirtual memory management in Operating System
Virtual memory management in Operating SystemRashmi Bhat
 
Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...VICTOR MAESTRE RAMIREZ
 
complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...asadnawaz62
 
UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)
UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)
UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)Dr SOUNDIRARAJ N
 
Risk Management in Engineering Construction Project
Risk Management in Engineering Construction ProjectRisk Management in Engineering Construction Project
Risk Management in Engineering Construction ProjectErbil Polytechnic University
 
BSNL Internship Training presentation.pptx
BSNL Internship Training presentation.pptxBSNL Internship Training presentation.pptx
BSNL Internship Training presentation.pptxNiranjanYadav41
 
Indian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.pptIndian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.pptMadan Karki
 
Crystal Structure analysis and detailed information pptx
Crystal Structure analysis and detailed information pptxCrystal Structure analysis and detailed information pptx
Crystal Structure analysis and detailed information pptxachiever3003
 
Configuration of IoT devices - Systems managament
Configuration of IoT devices - Systems managamentConfiguration of IoT devices - Systems managament
Configuration of IoT devices - Systems managamentBharaniDharan195623
 
Mine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxMine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxRomil Mishra
 
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Erbil Polytechnic University
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024Mark Billinghurst
 
Main Memory Management in Operating System
Main Memory Management in Operating SystemMain Memory Management in Operating System
Main Memory Management in Operating SystemRashmi Bhat
 
Industrial Safety Unit-IV workplace health and safety.ppt
Industrial Safety Unit-IV workplace health and safety.pptIndustrial Safety Unit-IV workplace health and safety.ppt
Industrial Safety Unit-IV workplace health and safety.pptNarmatha D
 

Recently uploaded (20)

Internet of things -Arshdeep Bahga .pptx
Internet of things -Arshdeep Bahga .pptxInternet of things -Arshdeep Bahga .pptx
Internet of things -Arshdeep Bahga .pptx
 
DM Pillar Training Manual.ppt will be useful in deploying TPM in project
DM Pillar Training Manual.ppt will be useful in deploying TPM in projectDM Pillar Training Manual.ppt will be useful in deploying TPM in project
DM Pillar Training Manual.ppt will be useful in deploying TPM in project
 
Designing pile caps according to ACI 318-19.pptx
Designing pile caps according to ACI 318-19.pptxDesigning pile caps according to ACI 318-19.pptx
Designing pile caps according to ACI 318-19.pptx
 
Past, Present and Future of Generative AI
Past, Present and Future of Generative AIPast, Present and Future of Generative AI
Past, Present and Future of Generative AI
 
Virtual memory management in Operating System
Virtual memory management in Operating SystemVirtual memory management in Operating System
Virtual memory management in Operating System
 
Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...Software and Systems Engineering Standards: Verification and Validation of Sy...
Software and Systems Engineering Standards: Verification and Validation of Sy...
 
complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...complete construction, environmental and economics information of biomass com...
complete construction, environmental and economics information of biomass com...
 
Design and analysis of solar grass cutter.pdf
Design and analysis of solar grass cutter.pdfDesign and analysis of solar grass cutter.pdf
Design and analysis of solar grass cutter.pdf
 
UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)
UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)
UNIT III ANALOG ELECTRONICS (BASIC ELECTRONICS)
 
Risk Management in Engineering Construction Project
Risk Management in Engineering Construction ProjectRisk Management in Engineering Construction Project
Risk Management in Engineering Construction Project
 
POWER SYSTEMS-1 Complete notes examples
POWER SYSTEMS-1 Complete notes  examplesPOWER SYSTEMS-1 Complete notes  examples
POWER SYSTEMS-1 Complete notes examples
 
BSNL Internship Training presentation.pptx
BSNL Internship Training presentation.pptxBSNL Internship Training presentation.pptx
BSNL Internship Training presentation.pptx
 
Indian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.pptIndian Dairy Industry Present Status and.ppt
Indian Dairy Industry Present Status and.ppt
 
Crystal Structure analysis and detailed information pptx
Crystal Structure analysis and detailed information pptxCrystal Structure analysis and detailed information pptx
Crystal Structure analysis and detailed information pptx
 
Configuration of IoT devices - Systems managament
Configuration of IoT devices - Systems managamentConfiguration of IoT devices - Systems managament
Configuration of IoT devices - Systems managament
 
Mine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptxMine Environment II Lab_MI10448MI__________.pptx
Mine Environment II Lab_MI10448MI__________.pptx
 
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
Comparative study of High-rise Building Using ETABS,SAP200 and SAFE., SAFE an...
 
IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024IVE Industry Focused Event - Defence Sector 2024
IVE Industry Focused Event - Defence Sector 2024
 
Main Memory Management in Operating System
Main Memory Management in Operating SystemMain Memory Management in Operating System
Main Memory Management in Operating System
 
Industrial Safety Unit-IV workplace health and safety.ppt
Industrial Safety Unit-IV workplace health and safety.pptIndustrial Safety Unit-IV workplace health and safety.ppt
Industrial Safety Unit-IV workplace health and safety.ppt
 

CHAPTER 1_ HTML and CSS Introduction Module

  • 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

Editor's Notes

  1. But there are many ways to insert your css style: Internal CSS External CSS Inline CSS