HTML = Hypertext Markup Language
CSS = Cascading Style Sheets
Wednesday, October 27, 2010
HTML = Hypertext Markup Language
index.html
CSS = Cascading Style Sheets
core.css
Wednesday, October 27, 2010
index.html
core.css
Wednesday, October 27, 2010
index.html core.css
Text Files!!
Wednesday, October 27, 2010
index.html core.css
Text Files!!
Edit with any text editor or HTML editor
Many excellent free editors:
JEdit
Notepad++
Kompozer
Bluefish
Wednesday, October 27, 2010
Wednesday, October 27, 2010
Do not edit with:
Wordpad
Microsoft Word
Wednesday, October 27, 2010
Do not edit with:
Wordpad
Microsoft Word
You’ve been warned
Wednesday, October 27, 2010
What is HTML?
<html lang="en"> Markup Tags
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
What is HTML?
<html lang="en"> Markup Tags
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
What is HTML?
<html lang="en"> Markup Tags
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
What is HTML?
<html lang="en"> Markup Tags
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
What is HTML?
<html lang="en"> Markup Tags
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
What is HTML?
Nested Markup
GOOD: <html><body></body></html>
Bad Markup
BAD: <html><body></html> </body>
<body><html></body> </html>
Wednesday, October 27, 2010
Anatomy of a tag
<div>Here’s some content to display</div>
<div anAttribute=”foo”>More content</div>
Attributes are very useful
when using CSS for styling
Wednesday, October 27, 2010
Anatomy of a tag
<img src=”spectordance.jpg”>
<img src=”spectordance.jpg” />
Some tags do not need to be paired. These tags
can end with a “/” but are not required too.
Wednesday, October 27, 2010
Basic Tags
<html lang="en"> Defines the HTML Document
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
Basic Tags
Header stuff. Don’t worry
<html lang="en"> about this yet
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
Basic Tags
Title of page that is displayed in
<html lang="en"> a web browser
<head>
<title>untitled</title>
</head>
<body>
</body>
</html>
Wednesday, October 27, 2010
Basic Tags
<html lang="en">
<head>
<title>untitled</title>
</head>
<body>
</body> Content to be displayed is put
</html> between the body tags
Wednesday, October 27, 2010
Basic Tags
<body>
<h1>SpectorDance</h1>
<h2>Classes</h2>
<p>Blah Blah Blah Blah</p>
<div>More Blah Blah</div>
<!-- I’m a comment -->
Headers. <h1> to <h6>. h1 is
usually displayed as the biggest,
h6 is smallest
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<h1>SpectorDance</h1>
<h2>Classes</h2>
<p>Blah Blah Blah Blah</p>
<div>More Blah Blah</div>
<!-- I’m a comment -->
Paragraph
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<h1>SpectorDance</h1>
<h2>Classes</h2>
<p>Blah Blah Blah Blah</p>
<div>More Blah Blah</div>
<!-- I’m a comment -->
Division. Acts a bit like a
paragraph. Often used to group
elements for CSS
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<h1>SpectorDance</h1>
<h2>Classes</h2>
<p>Blah Blah Blah Blah</p>
<div>More Blah Blah</div>
<!-- I’m a comment -->
Comments are not displayed in
a web browser. They’re mostly
</body> notes from the web designer
Wednesday, October 27, 2010
Basic Tags
<body>
<ul> Unordered List (bulleted list)
<li>Apples</li> Each list item is between <li></li>
<li>Bananas</li>
</ul>
<ol>
<li>Cherries</li>
<li>Melons</li>
</ol>
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<ul> Ordered List (numbered list)
<li>Apples</li> Each list item is between <li></li>
<li>Bananas</li>
</ul>
<ol>
<li>Cherries</li>
<li>Melons</li>
</ol>
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<img src=”spectordance.jpg” />
<img width=”200” src=”spectordance.jpg” />
<img src=”images/spectordance.jpg” />
<img src=”http://foo.com/coolpic.png” />
Image. This tag will display the
referenced image
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<img src=”spectordance.jpg” />
<img width=”200” src=”spectordance.jpg” />
<img src=”images/spectordance.jpg” />
<img src=”http://foo.com/coolpic.png” />
Display the image and make it
200 pixels wide
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<img src=”spectordance.jpg” />
<img width=”200” src=”spectordance.jpg” />
<img src=”images/spectordance.jpg” />
<img src=”http://foo.com/coolpic.png” />
Display the image names
‘spectordance.jpg’ in the folder
‘images’. The images directory
is relative to this HTML file
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<img src=”spectordance.jpg” />
<img width=”200” src=”spectordance.jpg” />
<img src=”images/spectordance.jpg” />
<img src=”http://foo.com/coolpic.png” />
Display the image located at
this URL
</body>
Wednesday, October 27, 2010
Basic Tags
<body>
<a href=”classes.html”>Classes</a>
Link. Anything between the ‘a’
tags becomes a hyperlink. The
href attribute tells the browser
which page to go.
</body>
Wednesday, October 27, 2010
Formatting Tags
<body>
<p>We the people of the <b>United States</b>,
in <strong>order</strong> to form a more perfect
Union, establish Justice, insure domestic tranquility,
provide for the common defense ...
</p>
b and strong gives bold text
</body>
Wednesday, October 27, 2010
Formatting Tags
<body>
<p>We the people of the <i>United States</i>, in
<em>order</em> to form a more perfect Union,
establish Justice, insure domestic tranquility, provide for
the common defense ...
</p>
i and em gives italic text
</body>
Wednesday, October 27, 2010
Formatting Tags
<body>
<p>We the people of the United States in order to
form a more <big>perfect</big> Union, establish
Justice, insure domestic tranquility, provide for the
common defense ...
</p>
big makes bigger text
</body>
Wednesday, October 27, 2010
Formatting Tags
<body>
<p>We the people of the United States in order to
form a more <small>perfect</small> Union, establish
Justice, insure domestic tranquility, provide for the
common defense ...
</p>
small makes bigger text
</body>
Wednesday, October 27, 2010