Scribd
Upload
184 views

HTML Hypertext Markup Language: Wednesday, October 27, 2010

The document discusses HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) which are used to structure and style web pages. It provides examples of basic HTML tags like <html>, <head>, <body>, <p>, <img>, and <a> that are used to define HTML documents and add text, images, and links. It also discusses how CSS can be used to style elements on the page. The document is meant to teach basic HTML and CSS concepts.

Uploaded by

hohonuuli
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
184 views

HTML Hypertext Markup Language: Wednesday, October 27, 2010

The document discusses HTML (Hypertext Markup Language) and CSS (Cascading Style Sheets) which are used to structure and style web pages. It provides examples of basic HTML tags like <html>, <head>, <body>, <p>, <img>, and <a> that are used to define HTML documents and add text, images, and links. It also discusses how CSS can be used to style elements on the page. The document is meant to teach basic HTML and CSS concepts.

Uploaded by

hohonuuli
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 35

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

You might also like