CHAPTER 1_ HTML and CSS Overview

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.

7. Transcend Smarter Learning

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?