Hammersmith fundamentals html fundamentals

Hammersmith Fundamentals

HTML fundamentals

Technology
• Editor
• Webserver
• Browser
• Paths & URLs

Separate content and layout
• HTML, CSS, JS

HTML
• H1 – H6
– <h1>big text</h1>
• P
– <p>some text</p>
• Br
– <br />
• Strong and emphasis
– <strong>bold</strong>, <em>italics</em>
• Div
– <div>blah blah</div>

Lists
• OL – numbered lists <ol><li>item1</li>
<li>item2</li>
</ol>

• UL – bullet lists <ul><li>item1</li>
<li>item2</li>
</ul>

• LI – list item

Links & Images
• A
– <a href=“”>text</a>
• Img
– <img src=“” alt=“” />

Box Model

http://www.w3.org/TR/CSS2/box.html

ID’s & Class
<html>

• ID => #
<head>
<style>
div {
background: #444;
– Open per page }
color: white;

• Class => . div.padded {
padding-top: 10px;
padding-right: 0px;
– Multiple per page padding-bottom: 0.25in;
padding-left: 5em;
}
</style>
</head>
<body>
<div>
No padding (but some style added)
</div>
<br>
<div class="padded">
Padded<br>
Top: 10px; bottom: 0px<br>
Left: 5em; right: 0px
</div>
</body>
</html>

Exercise
1. Simple web page 2. Add styles
• H1 and couple • Float text left
paragraphs • Add styles
• Add picture – boarders, margin,
sizes, classes

Resources
• Code Academy
• Wikipedia
• Mozilla Developer Network

• NOT W3Cschools

Hammersmith fundamentals html fundamentals

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (9)

Ähnlich wie Hammersmith fundamentals html fundamentals

Ähnlich wie Hammersmith fundamentals html fundamentals (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Hammersmith fundamentals html fundamentals