Scribd
Upload
39 views

6.148 WEBday3 Htmlcss

The document contains information about HTML and CSS including basic syntax and elements. It explains the structure of an HTML document including the <html>, <head>, and <body> tags. It describes common text formatting elements like <h1>, <p>, and <ul>. It covers CSS syntax, selectors, properties and values. It explains using CSS to style text, boxes, positioning, and displays. In total, the document provides an overview of fundamental HTML and CSS concepts for beginners to build basic webpages.

Uploaded by

Januhu Zakary
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
39 views

6.148 WEBday3 Htmlcss

The document contains information about HTML and CSS including basic syntax and elements. It explains the structure of an HTML document including the <html>, <head>, and <body> tags. It describes common text formatting elements like <h1>, <p>, and <ul>. It covers CSS syntax, selectors, properties and values. It explains using CSS to style text, boxes, positioning, and displays. In total, the document provides an overview of fundamental HTML and CSS concepts for beginners to build basic webpages.

Uploaded by

Januhu Zakary
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 73

6.

148
HTML / CSS
Victor Hung

HTML

Hypertext Markup Language

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<title>Title!</title>
</head>
<body>
<h1>Heading!</h1>
<p>Paragraph!</p>
</body>
</html>

Basic HTML Elements


<html>

Root of HTML Document

<body>

Document Body

<head>

Information about the doc

<h1>, <h2>, <h3>

Header Tags

<p>

Paragraph Tags

<img>

Image

<a>

Hyperlink

<div>

Section in a Document

<span>

Section in a Document (text)

Basic HTML Elements


<ul>

unordered list

Basic HTML Elements


<ul>
<li>

unordered list
list item

Basic HTML Elements


<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

unordered list
list item

Basic HTML Elements


<ul>
<li>item 1</li>
<li>item 2</li>
</ul>

unordered list
list item

item 1

item 2

HTML Attributes
<a>Google</a>

HTML Attributes
<a href="http://google.com">Google</a>

HTML Attributes
<a href="http://google.com">Google</a>
Google

HTML Attributes
<a href=http://google.com>Google</a>
Google

<div>Some text</div>

HTML Attributes
<a href=http://google.com>Google</a>
Google

<div class=warning>Some text</div>

HTML Attributes
<a href=http://google.com>Google</a>
Google

<div class=warning>Some text</div>

<tag name=value">content</tag>

HTML Attributes
<a href=http://google.com>Google</a>
Google

<div class=warning>Some text</div>

<tag name=value">content</tag>

HTML Void Elements


<img src=cutecat.jpg>
<input type=text>

From IDEA to HTML

CSS

Cascading Style Sheets

CSS

A series of rules that dictate


the styling of your page

p {
color: red;
font-size: 20pt;
}

Selector

p {
color: red;
font-size: 20pt;
}

Selector

Declaration

p {
color: red;
font-size: 20pt;
}

Property

p {
color: red;
font-size: 20pt;
}

Property

Value

p {
color: red;
font-size: 20pt;
}

Property

Value

Semicolon

p {
color: red;
font-size: 20pt;
}

p {
color: red;
font-size: 20pt;
}
<p>This here is a lovely paragraph,
full of good news and bad.</p>

<p>I write very short paragraphs</p>

.intro {
color: red;
font-size: 20pt;
}
<p class=intro>This here is a lovely
paragraph, full of good news and
bad.</p>
<p>I write very short paragraphs</p>

#id {
color: red;
font-size: 20pt;
}
<p id=intro>This here is a lovely
paragraph, full of good news and
bad.</p>
<p>I write very short paragraphs</p>

ID #intro

IDs are Unique! Each ID should only be


used once in the document
An Element can only have one ID
CLASS .intro
Use the same class on multiple elements
Use multiple classes on one element
<div class=alert good>DONE</div>

CSS Font & Text Properties


div {
color: #FF0000;
font-family: Times, Georgia, Serif;
font-size: 50pt;
font-weight: bold; /* normal */
text-align: center;
text-decoration: underline;
text-transform: capitalize;
}

what does this css look like?

WHAT DOES THIS CSS LOOK LIKE?

CSS Display Properties


hello
<div>world</div>
div {
background-color: red;
}

CSS Display Properties


hello
<div>world</div>
div {
background-color: red;
display: block;
}

CSS Display Properties


hello
<div>world</div>
div {
background-color: red;
display: inline;
}

CSS Display Properties


hello
<div>world</div>
div {
background-color: red;
display: inline;
width: 100px;
height: 50px;
}

CSS Display Properties


hello
<div>world</div>
div {
background-color: red;
display: inline-block;
width: 100px;
height: 50px;
}

CSS Display Properties

CONTENT
CONTENT

CSS Display Properties

CONTENT

CONTENT

CSS Box Model


<div>best box</div>

div {
border: 1px solid red;
}

CSS Box Model


<div>best box</div>

div {
border-style: solid;
border-color: red;
border-width: 1px;
}

CSS Box Model


<div>best box</div>

div {
border-style: solid;
border-color: red;
border-width: 1px 3px;
}

CSS Box Model


<div>best box</div>

div {
border-style: solid;
border-color: red;
border-width: 1px 3px;
}
TOP & BOTTOM, RIGHT & LEFT

CSS Box Model


<div>best box</div>

div {
border-style: solid;
border-color: red;
border-width: 1px 3px 1px 3px;
}

TOP, RIGHT, BOTTOM, LEFT

CSS Box Model


<div>best box</div>

div {
border-bottom: 1px solid red;
}

CSS Box Model


<div>best box</div>

div {
margin: 10px;
border: 1px solid red;
}

CSS Box Model


<div>best box</div>

div {
padding: 10px;
border: 1px solid red;
}

CSS Box Model

CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: relative;
}

CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: relative;
top: 20px;
}

CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: absolute;
top: 10px;
}

CSS Positioning
<body>
<div>here is some text</div>
<div class=content>bloop!</div>
</body>
body {
position: relative;
}
.content {
position: fixed;
top: 20px;
}

CSS Positioning

header
content

CSS Positioning
RELATIVE, 10px

header
content

CSS Positioning
ABSOLUTE (to parent), 10px

header
content

CSS Positioning
FIXED (to window), 10px

header
content

Lets add some css

After Lunch!
JavaScript & Nodejs

After Lunch!
JavaScript & Nodejs
Try out some HTML/CSS
http://bit.ly/6148htmlcss

You might also like