DAKSHIN BIHAR GRAMIN BANK: REDEFINING THE DIGITAL BANKING EXPERIENCE WITH A U...
Intro to HTML & CSS
1.
2.
3. What we’ll cover?
• What HTML and CSS is
• Structure of a HTML Document
• HTML editing software
• How to create a webpage
• Text, links, lists and images
• Various other HTML tags
• Adding CSS to a webpage
• Where to learn more
7. Hypertext is text
which contains links to other texts.
Markup languages are designed for the
processing, definition and presentation of
text. A markup language is to define the
visual elements of the web page.
8. Why do we need HTML?
• To define the structure of a web page
(HTML is the Skeleton of any modern
website)
• To add contents to our page
(text, pictures, videos etc…)
• To link pages to one another in order to
build an entire website
12. Cascading means
that styles can fall
from one style
sheet to another,
enabling multiple
style sheets to be
used on one HTML
document.
13. Why do we need CSS?
• Allows us to style any web page
• CSS describes how HTML elements should
be displayed
• Because of its cascading nature it allows
you to overwrite any previously defined
rules
25. • A programming software
(but every text editor will do)
...
• Your file, named in .html
→ my-own-page.html
• A browser, to display your page.
What do we need?
26. • FileZilla to upload the page to a server
(FileZilla or CyberDuck)
What do we need?
39. A - Boxes principle
• A box into a box into a box… : HTML is like
Russian dolls.
• Each of those boxes is called a tag.
40. A - Boxes principle
HTML DOCUMENT
HEAD BODY
TABLETITLE
CSS
PARAGRAPH
IMAGE
41. B - What is a tag?
• A tag is used to declare a specific type of
container or element.
• TAG STRUCTURE :
<name (attributes (style/css)) ... > [content] </name>
43. C - A Basic Page
<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />
<title>My page</title>
</head>
<body>
<p align=“center" style="font-size:14px; color:#c00;">Hello World
!</p>
</body>
</html>
Which language is
used → HTML
The documentHEAD - here:
- Special characters
- Page title
Body
→ CONTENT
(here a paragraph)
Hello World !
64. Step-1
• Create a folder named Hello [Syed]
• Fire up your code editor
• Write Hello World and save the file as
index.html
• Create another file named style.css
129. Why do they get rendered
differently?
• They are hosted in a 3rd party server
• Because of security issues
• Different email clients uses different
rendering engine
130. Solution?
• We design them considering its 1995!!
• We use tables
• We use inline css
• We avoid complicated Layouts
• We avoid HTML5 and CSS3
134. Some tips:
• Use of <table> instead of <div>
• Sliced images have to have
style="display:block;".
• Any special character in text (é, à, “, €, …)
should be encoded :
é → é OR € → €
135. Some tips:
• CSS style has to be mainly inline (inside the
tag’s style=" " attribute). If there is some CSS
in the <head> section, it’s a best practice to
copy and put them at the bottom again.
136. Some tips:
• “Pixels” (image of 1x1 pixel),
like any content, has to be
before closing </body></html>
tags
141. Things we have discussed
• What HTML and CSS is
• Structure of a HTML Document
• HTML editing software
• How to create a webpage
• Text, links, lists and images
• Various other HTML tags
• Adding CSS to a webpage
• Adding JavaScript to a webpage
• Where to learn more