Scribd
Upload
916 views14 pages

HTML & CSS Crash Course

This document provides an introduction to HTML and CSS. It explains that HTML is used to create web pages and is not a programming language, while CSS is used to style web pages. It then demonstrates basic HTML tags like headings, paragraphs, links, lists and divs. Finally, it shows different ways of adding CSS like inline styling, internal and external styling and explains the box model concept.

Uploaded by

aziz bouchrit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
916 views14 pages

HTML & CSS Crash Course

This document provides an introduction to HTML and CSS. It explains that HTML is used to create web pages and is not a programming language, while CSS is used to style web pages. It then demonstrates basic HTML tags like headings, paragraphs, links, lists and divs. Finally, it shows different ways of adding CSS like inline styling, internal and external styling and explains the box model concept.

Uploaded by

aziz bouchrit
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 14

ISSAT Sousse

Google Club

Crash Course
What is HTML ?
-Hyper Text Markup language

-Not a programming language

-Not a compiled language

-Used to create web pages


let's Start !
HTML Page Structure

<!DOCTYPE html>
<html>
<head>
<title>My First Web Page</title>
</head>
<body>
<h1>Hello World</h1>
<p>This is my first web page</p>
</body>
</html>
Commonly used HTML tags
-Headers
<h1>Hello World</h1> Hello World
<h2>Hello World</h2> Hello World
<h6>Hello World</h6> Hello World

-Paragraph
<p>My Paragraph</p> My Paragraph

-Link
<a href=”facebook.com”>Facebook</a> Facebook
-Unordered List

<ul> ● First List Item


<li>First List Item</li> ● Second List Item
<li>Second List Item</li> ● Third List Item
<li>Third List Item</li>
</ul>

-Ordered List
<ol> 1. First List Item
<li>First List Item</li> 2. Second List Item
<li>Second List Item</li> 3. Third List Item
<li>Third List Item</li>
</ol>
Block Elements VS Inline Elements

<div>Hello World</div> <span>Hello World</span>


<div>this is a div</div> <a>visit my website</a>

Hello World Hello World Visit my website

this is a div
What is CSS ?
-Cascadind Style Sheets

-Styling language

-Used To style web documents

-Describes how elements shouls be


rendered on screen
Facebook Without CSS
Facebook With CSS
How To Add CSS

-Inline Styling:
<head>
<title>My First Web Page</title>
<style>
h1{
color: blue;
}
p{
font-size: 20px;
}
</style>
</head>
How To Add CSS

-Internal Styling:
<h1 style="color: blue; font-size: 20px;">Hello World</h1>

<p style="color: #000000; text-align: center;">Paragraph</p>

<a style="border: 1px solid black;">Click me</a>


How To Add CSS

-Internal Styling:
<h1 style="color: blue; font-size: 20px;">Hello World</h1>

<p style="color: #000000; text-align: center;">Paragraph</p>

<a style="border: 1px solid black;">Click me</a>


How To Add CSS

External Styling: style.css

h1{
color: blue;
}
p {
color: #000000;
text-align: center;
}
Box Model

Margin

Border

Padding

Content

You might also like