This is just going to be a short introduction to CSS, it will only show a fraction of the things that you can do with CSS. This post is just meant to introduce how to use CSS and how to replace things that were formerly done with pure html with CSS.
I have decided to just focus on html5 and CSS3 since both of those are already usable even though they're still in development. That obviously changes the doctype of the previous post to the much easier <!doctype html>. we're also going to throw in a <meta charset="UTF-8"> to define which character set we're using. Now we're going to have to save all of our files in utf8 which is never a bad idea (unless, of course, if you're speaking a language that uses an alphabet not covered in utf8, in which case i'll leave it up to you to find the right charset to use (all "western" languages use only characters that are included in utf8 (English, German, French, Italian, etc.), Chinese, Japanese, Korean, Farsi, Arabic, etc. are not included)).
Now with all of that in mind our previous html code changes to this (viewable here):
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<title>My First Website</title>
</head>
<body>
<p>This is my first website !</p>
</body>
</html>
Back to the CSS at last....
There are three different locations inside an html document where you can put your CSS code:
in a seperate file,
inside the <head> tag,
inside the html tag of the content you're trying to beautify.
If you want to put your CSS into a seperate file (which is strongly recommended, at least for things that you're using a lot), you have to link to that file inside the <head> tag. Just insert a tag into the <head> like this: <link href="./style.css" type="text/css" rel="stylesheet"/>. That assumes that you have a file named style.css in the same folder as your html file.
You can put all of the CSS code for the current document inside the <head> tag itself as well. For that you just need to add a new tag like this: <style type="text/css">, add your CSS code in there just like you would put it into a different file, for example: body {background-color: #000000; color: #0000FF} and close the tag with </style>.
The third option is to put all of the CSS inside each of the tags that you're changing, like so <body style="color: #ff0000">.
If you now add both of the latter CSS statements to your website the color of the text will be red (ff0000), unless you change it to a different color inside a deeper tag. That is because the code inside the html tag is closer to the content than the code in the head tag, which in turn would be closer to the content than an external stylesheet, and thus would overwrite the external stylesheet should there be anything that is defined contradictingly (for some reason that's not a word) in both.
so with that we have our new website (viewable here):
<!DOCTYPE html>
<meta charset="UTF-8">
<html>
<head>
<style type="text/css">
p {color: #00F;}
</style>
<title>My First Website</title>
</head>
<body style="background-color: #000; color: #F00">
<p>This is my first website !</p>
</body>
</html>
Sunday, August 22, 2010
Thursday, August 19, 2010
Internationalization failures, today: google chrome
This is just a short rant and i'm just blogging about it because it annoys me so much.
I have the language of pretty much every program i use set to english, that includes my operating system, all the standard programs that most people use.... and yes I have chrome, I have the language of chrome set to english. So now i want to install the beta of chrome (while using chrome), so then i go here, set the language to english and i get here, click the try the latest beta link, and click the get google chrome (beta) button to get here. And after all this, that page is in german, and if i click the accept and install button it downloads and installs the beta in german.
I have the language of pretty much every program i use set to english, that includes my operating system, all the standard programs that most people use.... and yes I have chrome, I have the language of chrome set to english. So now i want to install the beta of chrome (while using chrome), so then i go here, set the language to english and i get here, click the try the latest beta link, and click the get google chrome (beta) button to get here. And after all this, that page is in german, and if i click the accept and install button it downloads and installs the beta in german.
Tuesday, August 17, 2010
Webdesign (intro)
When I made my first blog I have always wanted to actually teach people how to do stuff. I had assumed that i would educate people about the joys of programming and why it feels good when you work all through the night (or day) and finally get a "build complete, 0 errors, 0 warnings".
However, lately I have ventured into the field of Webdesign, not just because my own site looks horrible, but because lots of sites don't look all that great, even though many of them are professionally made websites that most probably cost quite a bit of money to make. Also, there is so much you can do that most people don't, and then there are so many people who get a website template, or even a content management system (or a blog) and then can't change even the tiniest things because the whole thing is way too complicated for the uninitiated.
So for the duration of this series i will be focusing on HTML (very briefly, because you don't actually need to know much about html these days), CSS (this will be the main focus of the series since this part is doing the actual webdesign), JavaScript (very, very late in the series since you don't need it for even dynamic websites (by the usual definition anyway, in which the dynamic part is the server sending a website depending on who's visiting, what information was sent, etc.), but mostly for some effects), and PHP (the PHP part will mostly be used to make things easier for now, later i might get into the programming of dynamic features of websites and how to show every user a different website if you so chose).
I will probably also make some short posts about how to simplify things with CSS, or how to replace old, outdated html stuff with CSS.
Now, this is the first post of the series:
What is HTML ? HTML stands for HyperText Markup Language and was originally made for publishing websites. That link will tell you much more than I would ever be willing to write, or even read, about HTML. What HTML was not made for was looking good. HTML is made for structuring of the document you want to publish and, before CSS was made, was used to make things look a certain way. I still use HTML to make my own website look good, but I fail, and it's mostly because I don't update it much. HTML should be used to declaring parts of text, images, other content; it should not be used to declare how said content is supposed to look. With that i give you a very simple website that we will start with (same exact website can be viewed here):
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My First Website</title>
</head>
<body>
<p>This is my first website !</p>
</body>
</html>
What it all means:
In HTML we have tags that define content, the tags are always surrounded by angle brackets.
The first line defines the Document Type. That line just tells your browser how to interpret the information it receives. The document type declaration can actually be left out, but I kinda want to do things the way they're supposed to be done, which is why i picked one of the strictest document type declarations.
Then we have the <html> tags that surround the whole document, after which we declare the head of the document which contains information such as the title (as shown), there could be css in there, meta information (maybe I'll get into that later), javascript, etc.
The title just tells the browser what the title of the website is, it appears in the browsers title bar.
Then we have the <body> tags surrounding (drumroll, wait for it) the body of the document. Many people still put information about the text color, background color and various other things into this tag, but doing it with CSS is preferred.
After that we just have <p> for paragraph and then the actual text that we're trying to show.
However, lately I have ventured into the field of Webdesign, not just because my own site looks horrible, but because lots of sites don't look all that great, even though many of them are professionally made websites that most probably cost quite a bit of money to make. Also, there is so much you can do that most people don't, and then there are so many people who get a website template, or even a content management system (or a blog) and then can't change even the tiniest things because the whole thing is way too complicated for the uninitiated.
So for the duration of this series i will be focusing on HTML (very briefly, because you don't actually need to know much about html these days), CSS (this will be the main focus of the series since this part is doing the actual webdesign), JavaScript (very, very late in the series since you don't need it for even dynamic websites (by the usual definition anyway, in which the dynamic part is the server sending a website depending on who's visiting, what information was sent, etc.), but mostly for some effects), and PHP (the PHP part will mostly be used to make things easier for now, later i might get into the programming of dynamic features of websites and how to show every user a different website if you so chose).
I will probably also make some short posts about how to simplify things with CSS, or how to replace old, outdated html stuff with CSS.
Now, this is the first post of the series:
What is HTML ? HTML stands for HyperText Markup Language and was originally made for publishing websites. That link will tell you much more than I would ever be willing to write, or even read, about HTML. What HTML was not made for was looking good. HTML is made for structuring of the document you want to publish and, before CSS was made, was used to make things look a certain way. I still use HTML to make my own website look good, but I fail, and it's mostly because I don't update it much. HTML should be used to declaring parts of text, images, other content; it should not be used to declare how said content is supposed to look. With that i give you a very simple website that we will start with (same exact website can be viewed here):
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My First Website</title>
</head>
<body>
<p>This is my first website !</p>
</body>
</html>
What it all means:
In HTML we have tags that define content, the tags are always surrounded by angle brackets.
The first line defines the Document Type. That line just tells your browser how to interpret the information it receives. The document type declaration can actually be left out, but I kinda want to do things the way they're supposed to be done, which is why i picked one of the strictest document type declarations.
Then we have the <html> tags that surround the whole document, after which we declare the head of the document which contains information such as the title (as shown), there could be css in there, meta information (maybe I'll get into that later), javascript, etc.
The title just tells the browser what the title of the website is, it appears in the browsers title bar.
Then we have the <body> tags surrounding (drumroll, wait for it) the body of the document. Many people still put information about the text color, background color and various other things into this tag, but doing it with CSS is preferred.
After that we just have <p> for paragraph and then the actual text that we're trying to show.
Monday, August 16, 2010
Jeff Dunham
In case you're not familiar with the name, he's a ventriloquist.
Jeff Dunham has a very funny piece about a show he played in front of an audience (hah !) of deaf people (watch on youtube), which is why I was very surprised to see that you can soon see one of his shows on comedy central in germany.... yes, in german. They actually went so far as to dub a ventriloquist. In case you want to check it out, there's a small segment of the same thing here (my apologies if youtube won't let you watch it like it won't let me watch many things that can be seen on youtube in america).
Jeff Dunham has a very funny piece about a show he played in front of an audience (hah !) of deaf people (watch on youtube), which is why I was very surprised to see that you can soon see one of his shows on comedy central in germany.... yes, in german. They actually went so far as to dub a ventriloquist. In case you want to check it out, there's a small segment of the same thing here (my apologies if youtube won't let you watch it like it won't let me watch many things that can be seen on youtube in america).
Saturday, August 7, 2010
Global Companies (that actually produce something)
Ok, so I already have a problem with global companies selling the same exact thing in 2 countries for 2 different prices (like mp3s, software, games that all are sold by download and thus cost the one selling them exactly the same no matter if the buyer is in the US or Germany or southeast mongolia). But, and even more annoyingly, I hate that companies that sell things in more than one country are not selling the same things in both countries.
I'm mostly talking about companies like Pepsi, Coke, McDonald's, etc.
Why can a company like pepsi not sell the same things in Germany that they sell in america. They're selling Pepsi here and i'm sure it wouldn't be all that hard to produce things the same way here as in America. I really like Cherry Pepsi and they just don't even sell it here for some reason even though coke makes a lot of money with Cherry Coke. Now I don't even wanna start about dr pepper and Doritos and all the other stuff that I loved while I was in america. I guess there is just no one out there that travels all over the world wondering how it's possible to buy Pepsi in pretty much any country, but not Cherry Pepsi.
Also, how does cherry coke not taste the same in germany as it does in the UK ? And on the same note, how does malasyan Pepsi taste like Coke ?
I'm mostly talking about companies like Pepsi, Coke, McDonald's, etc.
Why can a company like pepsi not sell the same things in Germany that they sell in america. They're selling Pepsi here and i'm sure it wouldn't be all that hard to produce things the same way here as in America. I really like Cherry Pepsi and they just don't even sell it here for some reason even though coke makes a lot of money with Cherry Coke. Now I don't even wanna start about dr pepper and Doritos and all the other stuff that I loved while I was in america. I guess there is just no one out there that travels all over the world wondering how it's possible to buy Pepsi in pretty much any country, but not Cherry Pepsi.
Also, how does cherry coke not taste the same in germany as it does in the UK ? And on the same note, how does malasyan Pepsi taste like Coke ?
Subscribe to:
Posts (Atom)
