Intro to HTML & CSS

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

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.

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

Cascading means
that styles can fall
from one style
sheet to another,
enabling multiple
style sheets to be
used on one HTML
document.

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

3 Awesome Front-end
Technologies
HTML
The structure of a web page
CSS
The styling of a web page
JavaScript
Makes a web page interactive

HTML + CSS + JavaScript = Black Magic

HTML + CSS = Source Code
User-friendly visible result

How to view the page
source?
Right Click
Select View page
source from the
dropdown menu

How to inspect page
elements?
Right Click
Select Inspect
from the
dropdown menu

Google Chrome Inspector in ACTION

• 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?

• FileZilla to upload the page to a server
(FileZilla or CyberDuck)
What do we need?

Coding correctly maximizes the chance
to have your page displayed correctly on
most of the platforms!

Email Clients
the late runners
• Think about mail clients as
even-less-compliant browsers.

Responsive Design
• Adapts to different screen sizes
• One version for all the devices that
supports HTML and other modern web
technologies

Now its easier than ever to
create mobile apps using
HTML, CSS and JavaScript.

Like every language, HTML
and CSS have rules and
standards.
HTML5 CSS3

A - Boxes principle
• A box into a box into a box… : HTML is like
Russian dolls.
• Each of those boxes is called a tag.

A - Boxes principle
HTML DOCUMENT
HEAD BODY
TABLETITLE
CSS
PARAGRAPH
IMAGE

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>

Example
• Code
<p align=“center” style=“font-size: 34px; color: red;”>
Hello World
</p>
• Result
Hello World !

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 !

Method - 1
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-
8" />
</head>
<body>
<p align="justify" style="font-size:14px;color:#c00;> Hello World
!</p>
</body>
</html>

<!doctype html>
<html>
<head>
<style type="text/css">.
p {
font-size: 14px;
color: #c00;
text-align: center;
}
</style>.
</head>
<body>
<p>Hello World !</p>
</body>
</html>
Method - 2

<!doctype html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="my-style.css">.
</head>
<body>
<p>Hello World !</p>
</body>
</html> p {
font-size: 14px;
color: #c00;
text-align: justify;
}
my-style.css :
Method - 3

D – Popular HTML tags
• Heading
• Paragraph
• Anchor / Link
• Image
• Unordered List
• List Item
• Horizontal Rule
• Division
• Table
<h1> - <h6>
<p>
<a>
<img>
<ul>
<li>
<hr>
<div>
<table>

Hands-on Tutorial
Lets build a website and learn
making mistakes!

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

Let’s give a title to our webpage

Populate Body : Header section

Populate Body : About Me section

Link an external
style sheet
e.g. style.css

https://codepen.io/sami3d/pen/YZbGmq

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

Solution?
• We design them considering its 1995!!
• We use tables
• We use inline css
• We avoid complicated Layouts
• We avoid HTML5 and CSS3

<table width="300" height="200" align="center">
<tr style="font-size:18px;color:#000000;" align="center">
<td width="100" style="background-color:#CC0000;">Holly</td>
<td style="background-color:#00CCFF, color:#FFFFFF;">Molly !</td>
</tr>
</table>
Holly Molly !

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 € → €

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.

Some tips:
• “Pixels” (image of 1x1 pixel),
like any content, has to be
before closing </body></html>
tags

THE NET NINJA
Interactive Lessons
Video Tutorials

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

Intro to HTML & CSS

More Related Content

What's hot (20)

Similar to Intro to HTML & CSS (20)

Recently uploaded (20)

Intro to HTML & CSS