HTML Hypertext Markup Language: Wednesday, October 27, 2010

HTML = Hypertext Markup Language
CSS = Cascading Style Sheets
Wednesday, October 27, 2010

HTML = Hypertext Markup Language
index.html
CSS = Cascading Style Sheets

core.css

index.html
core.css

index.html core.css
Text Files!!

index.html core.css
Text Files!!
Edit with any text editor or HTML editor
Many excellent free editors:

JEdit
Notepad++
Kompozer
Bluefish
Do not edit with:
Wordpad
Microsoft Word

Do not edit with:
Wordpad
Microsoft Word
You’ve been warned

What is HTML?
<html lang="en"> Markup Tags
<head>

<title>untitled</title>
</head>
<body>
</body>
</html>

What is HTML?
<head>

</head>
<body>
</body>
</html>

What is HTML?
<head>

</head>
<body>
</body>
</html>

What is HTML?
<head>

</head>
<body>
</body>
</html>

What is HTML?
<head>

</head>
<body>
</body>
</html>

What is HTML?
Nested Markup
GOOD: <html><body></body></html>
Bad Markup
BAD: <html><body></html> </body>
<body><html></body> </html>

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

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.

Basic Tags
<html lang="en"> Defines the HTML Document
<head>

</head>
<body>
</body>
</html>

Basic Tags
Header stuff. Don’t worry
<html lang="en"> about this yet
<head>

</head>
<body>
</body>
</html>

Basic Tags
Title of page that is displayed in
<html lang="en"> a web browser
<head>

</head>
<body>
</body>
</html>

Basic Tags
<html lang="en">
<head>

</head>
<body>
</body> Content to be displayed is put

</html> between the body tags

Basic Tags
<body>
<h1>SpectorDance</h1>
<h2>Classes</h2>
<p>Blah Blah Blah Blah</p>
<div>More Blah Blah</div>

Headers. <h1> to <h6>. h1 is

usually displayed as the biggest,
h6 is smallest
</body>
Basic Tags
<body>
<h2>Classes</h2>
Paragraph
</body>
Basic Tags
<body>
<h2>Classes</h2>
Division. Acts a bit like a

paragraph. Often used to group
elements for CSS
</body>
Basic Tags
<body>
<h2>Classes</h2>
Comments are not displayed in

a web browser. They’re mostly
</body> notes from the web designer

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>
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>
Basic Tags
<body>
<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>
Basic Tags
<body>
Display the image and make it

200 pixels wide
</body>
Basic Tags
<body>
Display the image names

‘spectordance.jpg’ in the folder
‘images’. The images directory
is relative to this HTML file
</body>
Basic Tags
<body>
Display the image located at

this URL
</body>
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>
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>
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>
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>
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>

HTML Hypertext Markup Language: Wednesday, October 27, 2010

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML Hypertext Markup Language: Wednesday, October 27, 2010

Enviado por

Direitos autorais:

Formatos disponíveis

HTML = Hypertext Markup Language

CSS = Cascading Style Sheets

Wednesday, October 27, 2010

CSS = Cascading Style Sheets

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Many excellent free editors:

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

<div anAttribute=”foo”>More content</div>

Attributes are very useful

Wednesday, October 27, 2010

Some tags do not need to be paired. These tags

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

Wednesday, October 27, 2010

</body> Content to be displayed is put

Wednesday, October 27, 2010

Headers. <h1> to <h6>. h1 is

Division. Acts a bit like a

Comments are not displayed in

Wednesday, October 27, 2010

Image. This tag will display the

Display the image and make it

Display the image names

Display the image located at

Link. Anything between the ‘a’

b and strong gives bold text

i and em gives italic text

big makes bigger text

small makes bigger text

Você também pode gostar