I considered, for a pretty long time, what could be my firs post. Finally, I decided to start with basics which could be only HTML and CSS. If you want to be someone more than an observer on the Internet you should know how to create a simple and valid website, that will look the same in every popular browser. This task, anyway, is sometimes more difficult that it seems to be… e.g. using position:fixed. Unfortunately this simple and powerful property is not working in IE.
Ok, let’s start with some basics of html & css. In next post I will show how to create a nice and easy layout using position:fixed, and then how to create similar one, for IE, taking into consideration its all oddities.
Here are two useful links for absolute beginners: http://www.w3schools.com/xhtml/default.asp http://www.w3schools.com/css/default.asp
A very simple website:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" > <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="keywords" content="page content"/> <meta name="description" content="page description"/> <title>Css basics tutorial sample</title> <link href="style.css" rel="stylesheet" type="text/css" /> </head> <body> </body> </html>
Actually displays… nothing. All content that you see in a browser is placed between <body></body> tag. There are more tags used to show the information e.g. <h1>, <p>, <div>, and <span>. Some of them will be described later.
First of all you should declare document’s type and dtd.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Here you have more declarations and explanations: http://www.w3.org/QA/2002/04/valid-dtd-list.html The real document starts with <html> tag and everything must be included between <html></html>. Head includes some configurations and information for indexing engines, for example:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />tells a browser that the website uses UTF-8 encoding (more encodings for example here: http://www.w3schools.com/tags/ref_charactersets.asp)
<meta name="keywords" content="page content"/>- keywords that search engine should use to index your website (at least that was the idea few years ago)
<meta name="description" content="page description"/>- that is short description of a website, it is also good to have, because it may appear in search results
<title>...</title>- this is the website title that appears in a browser's toolbar
<link href="style.css" rel="stylesheet" type="text/css" />- a link to cascade style sheet file (more about it below).
A single "style" is build as follows:
selector {property: value}
A selector can be:
- existing html tag:
p {font-size: 10px} - a general class:
.big {font-size: 20px} <div class="big">Big font</div><p class="big">Big font</div> - a class of a particular tag:
p.right {text-align: right} <p class="big">Big font</p> - id:
#green{color:#006600} <p id="green">i'm green</p>
<p class="big" id="green">big&green</p>There are three ways to insert a style to a website.
- in head section of the website:
<style type="text/css" > hr {color: sienna} p {margin-left: 20px} body {background-image: url("images/back40.gif")} </style> - or as a link from external file, also in head section (I mentioned it before):
<link href="style.css" rel="stylesheet" type="text/css" />
- or direct:
<p style="color: red">This is a paragraph</p>
That’s the basic. Now the goal is to create a layout. This will be explained next time.
No comments:
Post a Comment