Scribd
Upload
53 views

HTML & CSS Fundamentals

This document provides an overview of HTML and CSS fundamentals. It defines HTML as a markup language used to structure content with tags, describes its history and key versions. It also outlines document structure with tags for headings, paragraphs, and other elements. Similarly, it defines CSS as used to style and lay out HTML content, describes its evolution and implementations through internal and external stylesheets. The document concludes by listing some new features introduced in HTML5 and CSS3.

Uploaded by

Chandni Dodani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
53 views

HTML & CSS Fundamentals

This document provides an overview of HTML and CSS fundamentals. It defines HTML as a markup language used to structure content with tags, describes its history and key versions. It also outlines document structure with tags for headings, paragraphs, and other elements. Similarly, it defines CSS as used to style and lay out HTML content, describes its evolution and implementations through internal and external stylesheets. The document concludes by listing some new features introduced in HTML5 and CSS3.

Uploaded by

Chandni Dodani
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 12

Web Development Series

HTML & CSS Fundamentals


What is HTML?

• HTML stands for Hyper Text Markup Language


• A markup language is not a programming
language. It’s purpose is physical markup and not
logic or decision making.
• HTML works on sets of tags such as the heading
tag <h1></h1>.
• Usually, tags have to have both opening and
closing tags but with certain versions of HTML
such as XHTML, some tags do not need a closing
tag. The image tag is an example, <img />
HTML History Timeline
Nov 1995 – HTML 2.0 was published as  IETF RFC 1866
Jan 1997 – HTML 3.2 was published as W3C recommendation
Dec 1997 – HTML 4.0 was published as W3C recommendation
Dec 1999 – HTML 4.01 was published as W3C recommendation

In the 2000s, other reformulated languages were published including XHTML,


XML and DHTML
HTML5 was a candidate recommendation of the W3C in Dec of 2012. HTML5
is becoming a popular standard with its line of new features and better
markup structure
Document Structure

<html>
<head>
<title>My Page</title>
<style>

</style>
</head>
<body>
<h1>I am a heading</h1>
<p>I am a paragraph</p>
</body>
Common Tags
• Headings: <h1></h1> through <h6></h6>
• Paragraph: <p></p>
• Image: <img />
• Line Break: <br />
• Unordered List: <ul></ul>
• Ordered List: <ol></ol>
• List Tags: <li></li>

NEW HTML5 TAGS


• Header: <header></header>
• Footer: <footer></footer>
• Sidebar: <aside></aside>
• Navigation: <nav></nav>
• Section: <section></section>
New HTML5 Features

• GeoLocation
• Web Storage
• AppCache
• Canvas
• SVG
• Audio and Video Support
What is CSS?
• CSS stands for Cascading Style Sheets
• CSS is used for describing presentation semantics
of a web page, usually written in HTML
• CSS was created to separate presentation from
content
• It is now considered bad practice to use inline
styling such as <p bgcolor=“red”>Some text</p>
CSS History Timeline
Dec 1996 – CSS 1 was published as W3C recommendation
May 1998 – CSS2 was published as W3C recommendation
April 2011 – CSS 2.1 published as W3C recommendation
CSS 3 is divided into several separate documents called "modules". Each
module adds new capabilities or extends features defined in CSS 2, over
preserving backward compatibility. 
• Media Queries 2012-06-19
• Namespaces 2011-09-29
• Selectors Level 3 2011-09-29
• Color 2011-06-07
Implementing CSS
CSS can be used inline like so

<p style=“padding:5px”>Some text</p>

BUT is better to use an external stylesheet. You can


create a sheet using a .css extension and include it in
your HTML document like so…

<link rel=“stylesheet” href=“style.css” type=“text/css” />


Creating a CSS style in an external stylesheet
body{
font-family:arial;
background-color:white;
font-size:14px;
}
You can also add ids and classes onto html elements and style
them

<p id=“myid”>this paragraph</p>

P#myid{
background:#f4f4f4;
}
New CSS3 Features

Media Queries
Rounded Corners
Text Effects
Animations
Colors & Gradients
Pseudo-Classes
THAT’S IT!

You might also like