Introduction to
HTML and CSS
Please check in at
http://tinyurl.com/extratation1
http://tinyurl.com/extratation1
To get credit for this extratation go to:
Agenda
● 1:00 – 1:15 Overview of HTML
● 1:15 – 1:30 Walk through creating an HTML page
● 1:30 – 1:45 Using CMU hosting
● 1:45 – 2:00 Overview of CSS
HTML Overview
What is a web page made of?
What is a web page made of?
● Website content is described using HTML (.html)
○ Stands for Hyper Text Markup Language
○ Can be edited in a text editor
○ Uses a tag hierarchy to describe document content
● Content is styled using CSS (.css)
○ Cascading Style Sheet
○ Can apply styles to elements of a certain type/class
● Interactive content uses JavaScript (.js)
○ Won’t be covering this today
Tags
<h1>Some Content</h1>
<img src=“awesome_image.png”>
Opening tag Closing tagContent
Attribute
HTML Page structure
HTML
HEAD BODY
TITLE H1 P
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>I'm a heading!</h1>
<p>I'm some content!</p>
</body>
</html>
Tags are translated into a tree-like hierarchy
HTML
HEAD BODY
TITLE H1 P
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>I'm a heading!</h1>
<p>I'm some content!</p>
</body>
</html>
The HTML tag contains all the other elements
HTML Page structure
HTML
HEAD BODY
TITLE H1 P
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>I'm a heading!</h1>
<p>I'm some content!</p>
</body>
</html>
The HEAD tag contains metadata about the page (and links to CSS/JS files)
HTML Page structure
HTML
HEAD BODY
TITLE H1 P
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>I'm a heading!</h1>
<p>I'm some content!</p>
</body>
</html>
The BODY tag contains the main content of the document
HTML Page structure
HTML
HEAD BODY
TITLE H1 P
<!DOCTYPE html>
<html>
<head>
<title>Hello World!</title>
</head>
<body>
<h1>I'm a heading!</h1>
<p>I'm some content!</p>
</body>
</html>
The DOCTYPE declaration (not a tag) tells the browser this is an HTML file
HTML Page structure
Common tags
Headings
● Are declared using the H1, H2, … H6 tags.
● H1 is the largest
● Are used by search engines to index content
<h1>I'm a heading!</h1>
<h2>I'm a subheading!</h2>
<h3>I'm a subsubheading?</h3>
Paragraphs
● Necessary since HTML ignores whitespace
<p>First paragraph</p>
<p>Second paragraph</p>
Line breaks
● Create a new line without adding space
● Interpreted differently by search engines/screen readers
<p>
First line<br>
Second line
</p>
Links
● Links to another HTML file on your computer or the internet
● Created using anchor tags
● Destination page can be specified as a relative or absolute path
<a href=“page2.html”>Click here!</a>
Images
<img src=“scotty.jpg” alt=“CMU mascot”>
● Can point to any image the browser supports (.jpg, .png, .svg, etc.)
● Alt text is required
● Height/Width can be controlled with CSS
Divs
● Used to split page into rectangular regions
● Can be positioned/styled independently using CSS
<div>First div</div>
<div>Second div</div>
Tag summary
<h1>, <h2>, ... - Headings
<p> - Paragraph
<br> - Line break
<a href=“url”>content</a> - Hyperlink
<img src=“path” alt=“description”> - Image
<div> - Div (rectangular portion of a page)
<ul>, <ol> - Unordered and ordered lists
<li> - List item
Walkthrough
Publishing using Andrew Hosting
● Name your home page index.html
● Copy files to your www directory
○ scp index.html andrew:~/www/index.html
● SSH into Andrew
● Update file permissions
○ Run this command from your home directory:
○ fs sa www system:anyuser rl
● Visit http://www.andrew.cmu.edu/server/publish.html
● Your website is at:
http://www.andrew.cmu.edu/user/ANDREWID/
CSS Overview
CSS
HTML
HEAD BODY
TITLE H1 P
body {
font-family: Arial, serif;
font-weight: bold;
font-size: 12px;
background-color: red;
}
CSS applies styles to HTML elements. The styles cascade down the hierarchy.
CSS
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" href=“style.css">
</head>
<body>
<h1>I'm a heading!</h1>
<p>I'm some content!</p>
</body>
</html>
CSS is referenced from an HTML file using the LINK tag.
CSS Structure
Body {
}
body {
font-family: Arial, sans-serif;
font-weight: bold;
font-size: 12px;
}
.colorful {
color: #ff0000;
background-color: blue;
}
Tag name
Property
Value
Class name
CSS Structure
Body {
}
#mascotImage {
width: 10%;
float: right;
margin: 10px;
}
Element id
CSS
<html>
<head>
<title>Hello World!</title>
<link rel="stylesheet" type="text/css" ...
</head>
<body>
<h1>I'm a heading!</h1>
<p class=“colorful”>I'm some content!</p>
<img id=“mascotImage” src=“scotty.jpg” ...
</body>
</html>
Classes and ids can determine where styles are applied
Positioning elements
margin – Amount of space around element
padding – Space between element and contents
width/height – Uses units of em, px, or %
float – Place content off to the side
Element
Contents
Element
Contents
