HTML/CSS: Basics and Origins
HTML/CSS
By
Arielle
Howard,
Emily
Liu,
Suri
Yang
...
Table
of contents
Basic definitions and origins
How they work & what they’re used for
Broken-down coding & structure
examples
01
02
03
What is HTML & CSS
HTML & CSS Basics
Examples of HTML & CSS
What is
HTML & CSS?
01
What is
HTML
and
CSS?
HTML, or “HyperText Markup Language” is a
programming language used for
WEBSITE
DEVELOPMENT.
CSS (“Cascading Style Sheets”),
on the other hand, is a stylesheet language
used for
formatting
the content of HTML and
other types of documents used for web
development.
●
HTML makes up the
functional portion
of a
website
●
CSS creates
visuals
●
Together, they make websites!
In the next few slides, we’ll further explain
in-depth HTML/CSS, their uses, and showing
some
EXAMPLE CODE.
*
The Origins of
HTML
Since then, many versions of
HTML
have been released, edited,
and used by programmers and
ordinary people around the
world! One example of this is
X
HTML
- a rewritten HTML in
another language (
XML
)!
HTML was originally designed
around
1993
by
Tim Berners-Lee
(same guy who made the World
Wide Web)
for document
distribution between academics
and researchers!
}
..
Sources
: University of
Washington, Library of
Congress, & Wikipedia
Basics of
HTML+CSS
02
HTML Basics
The structure of HTML is fairly simple:
●
You must start with <!DOCTYPE HTML> &
<html></html>
●
Goes in a descending order (top →
bottom)
●
Less organized than CSS
Because HTML makes up more of the ‘building
blocks’ of a website, the actual program can
be a bit more chaotic in organization!
*
CSS Basics
The structure of CSS is slightly different
than its HTML counterpart:
●
You need to connect each stylesheet to
the HTML pages
●
More concise
●
Focuses groups of code on individual
parts of the website
CSS doesn’t make any slightly complex parts
(somewhat).
*
Example
Code
03
<
We’ll walk you through some example HTML/CSS
code!
>
HTML
Structure
Headings
Heading tags are helpful to
create...headings!
●
They range from h1 to h6;
h1 being the largest
●
Can be modified in CSS to
have different fonts,
colors, ect.
●
Allows website to look
organized
Lists
Lists are always useful!
●
Creates a list of items
●
Can be bulleted or
numbered
●
Helps with organization
and user experience
Use a paragraph tag!
<p></p>
↪
Buttons
How would a website function
without BUTTONS??
●
You can create as many
buttons as you want
●
They can be completely
modified by CSS
●
Makes your website more
fun and interactive!
You can add an
informative video
to
your website!
●
Explain your
website’s contents
in a
concise,
interesting
way
Videos
Images
What is a good website
without cat pictures -
nothing.
●
You can insert as many
pictures as you want
●
Simply paste the URL
in place of the orange
lettering (with
quotes)
●
The image should show
up on your website,
and can be centered
with CSS
I had to delete the
URL because of how
long it was!
Dividers
Without <div>
With <div>
●
Helps with styling
●
Makes Website look
neater
●
Also helps with
positioning
*
CSS
Structure
Colors
With every website comes a
good color scheme!
●
You can design or edit
as many aspects as you
want/are in your website
●
You MUST LINK YOUR CSS
TO YOUR HTML
●
Helps brighten up your
website for viewers
You can choose any
aspect - I just
chose a button!
Padding & Margins
Properly spacing elements is
essential in website
development.
●
Padding helps make
objects larger/edit
shapes
●
Margin helps space
objects in relation to
one another
●
Makes more aesthetically
pleasing & easy-to-use
websites
Background
Pictures help make websites
interesting
●
Capture a viewer’s
interest
●
Can be applied to nearly
any element in your
website
●
Make sure to resize your
image to make it fit
(and not repeat or get
cut off)
Fonts are a bit tricky…
The issue with fonts is that your computer has to already
have them
DOWNLOADED
or
IMPORTED
prior to using them in
your website - as without downloading, the program will
completely ignore the command.
P.S: You can use
google fonts
to IMPORT easily!
Summary
Used to create the
structure
of websites.
HTML
CSS
*
Used to
style
the
contents of a website
Thanks!
<p> Do you have any
questions? </p>
You can use this graph
Follow the link in the graph to modify its data and then paste the new one here.
For more info, click here
Mercury
Mercury is the
smallest planet
Jupiter
Jupiter is the
biggest planet
Venus
Venus has very
high temperatures
Saturn
Saturn is a gas
giant with rings
*
Practical
exercise
07
Write a Java program to reverse a string.
Input data
:
Input a string: My dog’s name is
Ralph
Expected output
:
Reverse string: hplaR si eman s‘god
yM
Here’s an assortment of alternative resources whose style fits the one
of this template:
●
Programmers concept with flat design
Alternative
resources
Did you like the resources on this template? Get them for free at our other
websites:
Photos
●
Html and css collage concept with person
I
●
Html and css collage concept with person
II
●
Html and css collage concept with person
III
●
Html and css collage concept with person
IV
●
Medium shot smiley woman at library
●
Medium shot man holding notebook
Resources
Instructions for use
I
f
y
o
u
h
a
v
e
a
f
r
e
e
a
c
c
o
u
n
t
,
i
n
o
r
d
e
r
t
o
u
s
e
t
h
i
s
t
e
m
p
l
a
t
e
,
y
o
u
m
u
s
t
c
r
e
d
i
t
S
l
i
d
e
s
g
o
b
y
k
e
e
p
i
n
g
t
h
e
T
h
a
n
k
s
s
l
i
d
e
.
P
l
e
a
s
e
r
e
f
e
r
t
o
t
h
e
n
e
x
t
s
l
i
d
e
t
o
r
e
a
d
t
h
e
i
n
s
t
r
u
c
t
i
o
n
s
f
o
r
p
r
e
m
i
u
m
u
s
e
r
s
.
A
s
a
F
r
e
e
u
s
e
r
,
y
o
u
a
r
e
a
l
l
o
w
e
d
t
o
:
●
Modify this template.
●
Use it for both personal and commercial projects.
Y
o
u
a
r
e
n
o
t
a
l
l
o
w
e
d
t
o
:
●
Sublicense, sell or rent any of Slidesgo Content (or a modified version of Slidesgo Content).
●
Distribute Slidesgo Content unless it has been expressly authorized by Slidesgo.
●
Include Slidesgo Content in an online or offline database or file.
●
Offer Slidesgo templates (or modified versions of Slidesgo templates) for download.
●
Acquire the copyright of Slidesgo Content.
For more information about editing slides, please read our FAQs or visit our blog:
h
t
t
p
s
:
/
/
s
l
i
d
e
s
g
o
.
c
o
m
/
f
a
q
s
a
n
d
h
t
t
p
s
:
/
/
s
l
i
d
e
s
g
o
.
c
o
m
/
s
l
i
d
e
s
g
o
-
s
c
h
o
o
l
A
s
a
P
r
e
m
i
u
m
u
s
e
r
,
y
o
u
c
a
n
u
s
e
t
h
i
s
t
e
m
p
l
a
t
e
w
i
t
h
o
u
t
a
t
t
r
i
b
u
t
i
n
g
S
l
i
d
e
s
g
o
o
r
k
e
e
p
i
n
g
t
h
e
T
h
a
n
k
s
s
l
i
d
e
.
Y
o
u
a
r
e
a
l
l
o
w
e
d
t
o
:
●
Modify this template.
●
Use it for both personal and commercial purposes.
●
Hide or delete the “Thanks” slide and the mention to Slidesgo in the credits.
●
Share this template in an editable format with people who are not part of your team.
Y
o
u
a
r
e
n
o
t
a
l
l
o
w
e
d
t
o
:
●
Sublicense, sell or rent this Slidesgo Template (or a modified version of this Slidesgo Template).
●
Distribute this Slidesgo Template (or a modified version of this Slidesgo Template) or include it in a database or in
any other product or service that offers downloadable images, icons or presentations that may be subject to
distribution or resale.
●
Use any of the elements that are part of this Slidesgo Template in an isolated and separated way from this
Template.
●
Register any of the elements that are part of this template as a trademark or logo, or register it as a work in an
intellectual property registry or similar.
For more information about editing slides, please read our FAQs or visit our blog:
h
t
t
p
s
:
/
/
s
l
i
d
e
s
g
o
.
c
o
m
/
f
a
q
s
a
n
d
h
t
t
p
s
:
/
/
s
l
i
d
e
s
g
o
.
c
o
m
/
s
l
i
d
e
s
g
o
-
s
c
h
o
o
l
Instructions for use (premium users)
This presentation has been made using the following fonts:
S
o
u
r
c
e
C
o
d
e
P
r
o
(
https://fonts.google.com/specimen/Source+Code+Pro
)
#e7e7e7
#10111a
#fd4a4a
#ec7955
#94ee6b
#4cae97
#bd64b5
#ffff99
#e81a81
#2c293a
Fonts & colors used
C
r
e
a
t
e
y
o
u
r
S
t
o
r
y
w
i
t
h
o
u
r
i
l
l
u
s
t
r
a
t
e
d
c
o
n
c
e
p
t
s
.
C
h
o
o
s
e
t
h
e
s
t
y
l
e
y
o
u
l
i
k
e
t
h
e
m
o
s
t
,
e
d
i
t
i
t
s
c
o
l
o
r
s
,
p
i
c
k
t
h
e
b
a
c
k
g
r
o
u
n
d
a
n
d
l
a
y
e
r
s
y
o
u
w
a
n
t
t
o
s
h
o
w
a
n
d
b
r
i
n
g
t
h
e
m
t
o
l
i
f
e
w
i
t
h
t
h
e
a
n
i
m
a
t
o
r
p
a
n
e
l
!
I
t
w
i
l
l
b
o
o
s
t
y
o
u
r
p
r
e
s
e
n
t
a
t
i
o
n
.
C
h
e
c
k
o
u
t
h
o
w
i
t
w
o
r
k
s
.
Storyset
P
a
n
a
A
m
i
c
o
B
r
o
R
a
f
i
k
i
C
u
a
t
e
Y
o
u
c
a
n
e
a
s
i
l
y
r
e
s
i
z
e
t
h
e
s
e
r
e
s
o
u
r
c
e
s
w
i
t
h
o
u
t
l
o
s
i
n
g
q
u
a
l
i
t
y
.
T
o
c
h
a
n
g
e
t
h
e
c
o
l
o
r
,
j
u
s
t
u
n
g
r
o
u
p
t
h
e
r
e
s
o
u
r
c
e
a
n
d
c
l
i
c
k
o
n
t
h
e
o
b
j
e
c
t
y
o
u
w
a
n
t
t
o
c
h
a
n
g
e
.
T
h
e
n
,
c
l
i
c
k
o
n
t
h
e
p
a
i
n
t
b
u
c
k
e
t
a
n
d
s
e
l
e
c
t
t
h
e
c
o
l
o
r
y
o
u
w
a
n
t
.
G
r
o
u
p
t
h
e
r
e
s
o
u
r
c
e
a
g
a
i
n
w
h
e
n
y
o
u
’
r
e
d
o
n
e
.
Y
o
u
c
a
n
a
l
s
o
l
o
o
k
f
o
r
m
o
r
e
i
n
f
o
g
r
a
p
h
i
c
s
o
n
S
l
i
d
e
s
g
o
.
Use our editable graphic resources...
Y
o
u
c
a
n
r
e
s
i
z
e
t
h
e
s
e
i
c
o
n
s
w
i
t
h
o
u
t
l
o
s
i
n
g
q
u
a
l
i
t
y
.
Y
o
u
c
a
n
c
h
a
n
g
e
t
h
e
s
t
r
o
k
e
a
n
d
f
i
l
l
c
o
l
o
r
;
j
u
s
t
s
e
l
e
c
t
t
h
e
i
c
o
n
a
n
d
c
l
i
c
k
o
n
t
h
e
p
a
i
n
t
b
u
c
k
e
t
/
p
e
n
.
I
n
G
o
o
g
l
e
S
l
i
d
e
s
,
y
o
u
c
a
n
a
l
s
o
u
s
e
F
l
a
t
i
c
o
n
’
s
e
x
t
e
n
s
i
o
n
,
a
l
l
o
w
i
n
g
y
o
u
t
o
c
u
s
t
o
m
i
z
e
a
n
d
a
d
d
e
v
e
n
m
o
r
e
i
c
o
n
s
.
...and our sets of editable icons
Educational Icons
Medical Icons
Business Icons
Teamwork Icons
Help & Support Icons
Avatar Icons
Creative Process Icons
Performing Arts Icons
Nature Icons
SEO & Marketing Icons
Arielle
HTML (HyperText Markup Language) and CSS (Cascading Style Sheets) are fundamental programming languages used in web development. HTML provides the structure of a website, while CSS is used for formatting and styling. This article delves into the origins of HTML, its evolution, the basics of HTML and CSS, and provides insights into how they work together to create visually appealing websites.
Download Presentation
Please find below an Image/Link to download the presentation.
The content on the website is provided AS IS for your information and personal use only. It may not be sold, licensed, or shared on other websites without obtaining consent from the author. Download presentation by click this link. If you encounter any issues during the download, it is possible that the publisher has removed the file from their server.
E N D
Presentation Transcript
HTML/CSS By Arielle Howard, Emily Liu, Suri Yang ...
Table of contents What is HTML & CSS 01 Basic definitions and origins HTML & CSS Basics 02 How they work & what they re used for 03 Examples of HTML & CSS Broken-down coding & structure examples
01 What is HTML & CSS?
What is HTML and CSS? HTML, or HyperText Markup Language is a programming language used for WEBSITE DEVELOPMENT. CSS ( Cascading Style Sheets ), on the other hand, is a stylesheet language used for formatting the content of HTML and other types of documents used for web development. * HTML makes up the functional portion of a website CSS creates visuals Together, they make websites! In the next few slides, we ll further explain in-depth HTML/CSS, their uses, and showing some EXAMPLE CODE.
The Origins of HTML HTML was originally designed around 1993 by Tim Berners-Lee (same guy who made the World Wide Web) for document distribution between academics and researchers! Since then, many versions of HTML have been released, edited, and used by programmers and ordinary people around the world! One example of this is XHTML - a rewritten HTML in another language (XML)! } .. Sources: University of Washington, Library of Congress, & Wikipedia
02 Basics of HTML+CSS
HTML Basics * The structure of HTML is fairly simple: You must start with <!DOCTYPE HTML> & <html></html> Goes in a descending order (top bottom) Less organized than CSS Because HTML makes up more of the building blocks of a website, the actual program can be a bit more chaotic in organization!
CSS Basics * The structure of CSS is slightly different than its HTML counterpart: You need to connect each stylesheet to the HTML pages More concise Focuses groups of code on individual parts of the website CSS doesn t make any slightly complex parts (somewhat).
03 Example Code < We ll walk you through some example HTML/CSS code!>
HTML Structure <!DOCTYPE HTML> <!-- Tells the browser that this is a HTML document --> <html> <!-- Contains the contents of the HTML document --> <head> <!-- Contains the metadata or background information of the site --> <title> <!-- Declares name of website on the browser tab --> </title> </head> <body> <!-- Contains the content that appears on the webpage --> </body> </html>
Headings Heading tags are helpful to create...headings! They range from h1 to h6; h1 being the largest Can be modified in CSS to have different fonts, colors, ect. Allows website to look organized
Lists Lists are always useful! Creates a list of items Can be bulleted or numbered Helps with organization and user experience
Use a paragraph tag! <p></p>
Buttons How would a website function without BUTTONS?? You can create as many buttons as you want They can be completely modified by CSS Makes your website more fun and interactive!
Videos You can add an informative video to your website! Explain your website s contents in a concise, interesting way
Images What is a good website without cat pictures - nothing. You can insert as many pictures as you want Simply paste the URL in place of the orange lettering (with quotes) The image should show up on your website, and can be centered with CSS I had to delete the URL because of how long it was!
Dividers Without <div> Helps with styling Makes Website look neater Also helps with positioning With <div> *
CSS Structure styles.css <!-- Tells the browser that this is a CSS document --> .button{ <!-- Tells the program what is being edited--> font-size: <!-- Changes the font size--> background-color: <!-- Changes the color of the object --> color: <!-- Changes the font color--> padding-left: <!-- Chooses the amount of padding on the specified side--> font-weight: <!-- Chooses the boldness of the font--> border: <!-- Chooses the border thickness OR no border at all--> margin-left:} <!-- Chooses the size of the spacing is between an object on the specified side-->
Colors With every website comes a good color scheme! You can design or edit as many aspects as you want/are in your website You MUST LINK YOUR CSS TO YOUR HTML Helps brighten up your website for viewers You can choose any aspect - I just chose a button!
Padding & Margins Properly spacing elements is essential in website development. Padding helps make objects larger/edit shapes Margin helps space objects in relation to one another Makes more aesthetically pleasing & easy-to-use websites
Background Pictures help make websites interesting Capture a viewer s interest Can be applied to nearly any element in your website Make sure to resize your image to make it fit (and not repeat or get cut off)
Fonts are a bit tricky The issue with fonts is that your computer has to already have them DOWNLOADED or IMPORTED prior to using them in your website - as without downloading, the program will completely ignore the command. P.S: You can use google fonts to IMPORT easily!
Summary HTML CSS Used to create the structure of websites. Used to style the contents of a website *
Thanks! <p> Do you have any questions? </p> CREDITS: This presentation template was created by Slidesgo, and includes icons by Flaticon, and infographics & images by Freepik
