Html and-css

HTML
• Hyper Text Markup Language
• Text editor
• <tag>Some text</tag>
• <self-closing-tag />

Basic page
<html>
<head><title>Page title</title></head>
<body>
<p>Hello world</p>
</body>
</html>

Paragraphs, basic font formatting
<p>This is some This is some text
text.</p>
<p>And some more And some more text
text, including including bold and italic
<b>bold</b> and
<i>italic</i> text.

Images
<img
src=“path/to/image.
jpg” alt=“text
description of
image” width=“200”
height=“100” />

Headings
<h1>Main
heading</h1>
Main heading
<h2>Sub Sub heading
heading</h2> Some text
<p>Some text</p>

Un-ordered (bulleted) list
<ul> • Line one
<li>Line one</li> • Line two
<li>Line two</li> • Another line
<li>Another
line</li>
• And another
<li>And another</li>
</ul>

Ordered (numbered) list
<ol> 1. Line one
<li>Line one</li> 2. Line two
<li>Line two</li> 3. Another line
<li>Another
line</li>
4. And another
<li>And another</li>
</ol>

Links
<a Link text to google
href=“http://www.go
ogle.co.uk”>Link
text to google</a>

Content areas
<div id=“name” class=“description”>
<p>Text</p>
</div>
<span class=“class another-class”>
Text
</span>

CSS
• Changes how elements are formatted
• Generic – all elements
• Targeted – by class or ID
• Containers useful

Generic
body{
font-family:Arial, Helvetica,
sans-serif;
font-size: 12px;
color: #f00;
}

Generic
h1{
font-size: 36px;
margin: 10px 5px 5px 0;
}

Targeted
p#name{
...
}

p.name{
...
}

Targeted
div.class{
...
}

div.class p{
...
}

States
a{...}
a:link{...}
a:hover{...}
a:active{...}
a:visited{...}

Html and-css

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Viewers also liked

Viewers also liked (19)

Similar to Html and-css

Similar to Html and-css (20)

Recently uploaded

Recently uploaded (20)

Html and-css