html, css basics - chris sugruecsugrue.com/workshops/uem/introhtmlcss.pdf · cascading style sheets...
TRANSCRIPT
HTML, CSS Basics
Structure of a basic html webpage:
<html>
<head> <title>My Page</title> </head> <body>
Hello World! </body>
</html>
<head> is where all scripts, meta data, styles are defined called or linked to. The title is set here.
<head> <title>My Page</title>
<link rel=”stylesheet” href=”styles.css” type=”text/css”> <script type=”text/javascript”> function setText(myText) {document.getElementById(‘myId’).innerHTML=myText;
} </script>
</head>
<body> is where all content is written.
<body> <p>This is my webpage.</p>
<p><img src=”myfoto.jpg” width=”400” height=”400”/></p>
<p><a hef=”http://google.com”>A link to google.</a></p>
</body>
Cascading Style Sheets (CSS)define how elements appear on the page
<html> <head> <title>Basic style</title> <style> p{ font-family: “Verdana”; font-size: 18pt; color: red; } </style> </head> <body> <p>How are you? </body>
</html>
p{ font-family: “Verdana”; font-size: 18pt; color: red; }
CSS can be applied to a tag, a class or an id.
p{ font-family: “Verdana”; font-size: 18pt; color: red;}
.content{color: blue;
}
#info{color: green;
{
<body>
<p>My first paragraph.</p>
<div class=”content”>Some classy content.</div>
<div id=”info”>Some id info.</div>
</body>
CSS can be written:
- internally:inside the html page
- externally:in a .css file that is linked to
- inlineinside a tag attribute
Inline:
<html>
<head> <title>My page</title></head>
<body> <div style=”font-size:10pt;margin:10px;”> My text here. </div></body>
</html>
Internal:
<html><head> <title>My page</title> <style type=”text/css”> .myText{ font-size:10pt; margin:10px; } </style>
</head>
<body> <div class=”myText”>My text here.</div>
</body></html>
External:
<html>
<head> <title>My page</title> <link rel=”stylesheet” href=”styles.css” type=”text/css”></head>
<body> <div class=”myText”>My text here.</div></body>
</html>
.myText{ font-size:10pt; margin:10px; }
mypage.html
styles.css