XHTML — Getting started">XHTML — Getting startedBy request from my littlebrother I will try and write some articles about how to get started with XHTML and CSS. Please feel free to criticise and I will try to improve as I go along.
XHTML stands for Extensible HyperText Markup Language and is often refered to as just HTML. Its a markup language developed by W3C and is used to tag content on a website in order to structure it. XHTML is not a kind of code as many think but is used strictly to mark content with so called “tags”. A tag is a attribute that surrounds an element. Always remember to close your tags. A close tag looks exactly like the start except for an “/” placed after the first “<”. For example: opening tag <a> and close tag </a>.
Lets look at an empty XHTML-document
The Doctype.
This declares what kind of document it is. In this case we have an “XHTML 1.0 transitional”. XHTML 1.0 is the current standard on the webb but if you want to be cut edge you should check out the new XHTML 5.0 which can come to replace the standard. “transitional” is one of two possibilities the other one being “strict”. The difference between these is that transitional isn’t as picky about how you structure your code. If you’re not looking to show off better stick with transitional.
The <html> –tag
This tag should always be in the beginning and the end of the html-doc. This is the tag that declares that we’re in an html-document and the browser should treat the code inside as such.
The <head> –tag
this tag contains everything in your html-doc that doesnt show in the browser. Here you put links to javascripts, CSS etc. This is also where you place meta-tags which we will talk about later. The <title> that you see in the image is what will turn up at the top of the browser next to the browser-logo. Change “untitled document” to whatever you want it to say.
The <body> –tag
Inside the body tag you place everything you want the visitor to see. this is where all your content will be placed.
(our html with a little content in it)
Now we know what all the basic tags mean. How do you put content in your html?
More tags and content
There are alot of different tags to use in html, lets begin with the simpler ones.
The <p> –tag
this tag is used to contain larger amounts of text. the p stands for paragraph and that itself says what it does. As you can see in the image above I’ve put some text inside an <p> tag and ended with </p>.
The <h1> –tag
This is a tag for Headlines. If you’ve worked in Microsoft Word you know that there are different kinds of headlines. The same goes for html. We have h1, h2, h3, h4 and h5. This way you can structure your content with subheadlines just as you would in Word. In my image above I’m using the <h1> –tag to surround my name and ended it with the </h1> tag.
the <img> –tag
this is used to insert images in your webpage. a typical <img/> tag contains a set of inner attributes. Here’s an example: <img src=“images/test.png” alt=“test” />. The <img/> tag is one of few that is ended within itself. It’s because its not supposed to wrap around any other content but contains the content in itself. the “src” means source and is the URL to where your image is stored, the “alt” means alternative and is a text that shows instead of the image if it cant be loaded. If you dont want a text showing just leave the quotation marks empty.
Lets try and create a simple XHTML page.
Start by creating a new folder, name it whatever you like. Inside it create a new txt-document and name it “mysite”.
Now paste this into the txt:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=utf-8″ />
<title>Untitled document</title>
</head>
<body>
</body>
</html>
Now play around with the different headline-tags and the p tag. If you want to place images, create a folder next to the txt, place your image inside the folder and link the image as I shown in the example. If you named your folder “images” then your URL will be src=“images/nameofimage.png” just change the name of the image and the file-ending depending on if your image is a PNG or JPG.
After you’re satisfied and you’ve made sure you’ve closed all tags properly try draggin your txt into your browser. If you’ve done it correctly your txt should appear as a bunch of text and images with different spacing and size (depending on what headlines you’ve used).
To be continued..
Redesign #1
As you can see I’ve redesigned my blog. I think this is a much more settle design which fits my portfolios design as a complement rather than cheap ripoff! There’s still some issues to work out about the Navigation but other than that I’m pretty satisfied! This version has a lot less images which makes it faster to load. I should’ve made all images be part of one big sprite but they’re so few I’m too lazy to make the tiny difference!
Why I love being a web designerI’ve been doing web design related stuff on and off for about a year now and I find myself getting increasingly sucked in by the nature of it. Nowadays basically not one day goes by without me touching something in photoshop, reading a bunch of RSS or even slap on some code to the world wide web. I read an article a few days back written by Andrew Houle about the five reasons to why he loves being a web designer. This got me thinking about my own reasons for my relatively new crush for this profession. Some of them are similar to the ones he’s talking about (I mean, they’re kind of general benefits) and some I’ve come to realize myself.
The immediate vision
I find myself talking to a potential client, or maybe just a friend, about a subject and I almost immediately have an epiphany about how that site would look like. This is something fairly peculiar because the more intensely I try to vision it and add detail the more of it drifts from my mind and other elements pop up instead. This process that occurs is to me fascinating and I only have one word for you, sketchbook! I have to admit up until recently I’ve not been a frequent user of the paper way of things but I’ve come around and recommend it!
the helpfulness of others
Say what you want but I’ve never experienced the web designer community as anything else than helpful and kind. Of course we all are a bit damaged and maybe not entirely sane but we’re always there to help each other with constructive criticism and idéas on how to improve ourselves.
The constant changes
Everything is evolving. The software gets improved, new techniques are invented, the web standard is constantly improving. To be a web designer is truly to never stop learning. As soon as you stop making progress or stop reading up on the latest trends you’re out. This is one of the main reasons to why I love it because I am never finished! There’s always something new to discover and this keeps me alert.
The structure of the code
To look at a sites code (or my own for that matter) and find the structure of the code pleasing. When you see the logic behind a nice piece of code it become so easy to understand in comparison to a messy one. So just to know that I don’t only have to create the website, make it functional and look good I also have to (or atleast should try to) make the code as simple, effective and logical as possible. Another challenge for the mind and another thing I love!
The domino effect
The amount of websites out there is enormous and yet there always seem to be people in need of more. And the beauty of having a client that is satisfied is that he or she will tell others about this and then suddenly they realize that they’re in need of my services as well. So keep a good relationship with the client and hopefully they will have friends or colleagues who will want to hire you too!
Easy access
All I need to do my work is my computer, maybe a sketch block and loads of creativity. This means that I’m able to do my work from almost anywhere with internet-access and hopefully electricity. This possibility and freedom is quite an wonderful thing which I don’t think many make much use of. But come one.. how awesome is it to design a website while sitting outside in the sun with an ice-cool beer!
If you have your own reasons, please post them and share with me!
Great interviews for students to read.A few days ago smashingmagazine.com posted an article with an interview starring a couple of successfull webdesigners. The article is aiming towards students and newcomers in webdesign and answers a few questions we all might have in mind (I know I do). I found it to be really interesting and I think all of us should read it.
Here’s a quote from the interview:
David Leggett answers the question How does a student determine whether design is for them or they should pursue another career?:
“Everyone has a unique situation, and I don’t mean to suggest the following is always true: if you’re already a student at a university and have no outside experience, it may be difficult to really pursue a career in design. I say this only because personal friends of mine have struggled to find jobs in this current economic climate. Experience and something to show for your knowledge goes a long way.
Otherwise, be sure you truly enjoy whatever you decide to pursue. Many designers and artists I’ve met thoroughly enjoy their lifestyles, even when they’re struggling to find work. This is not to say that you should undervalue your work, but if you can enjoy your career when you’re not making money, then it’s probably a good match for you.”´
Link to article here
Funny tidbitWas cruising Smashingmagazine.com for some information and inspiration for my upcoming work with a corporate website when I found this swedish example of a typeface. Its a compilation of names of characters and creatures in an childrens book by Astrid Lindgren, I wonder who came up with this idea?
Schoolproject. Created a wordpress-site for Warner brothers about the enviroment(not for real)
A just-for-fun project created on a saturday night in Jan 10.
Community for young adults, Co-work with friends. Created in 08.
Design on my next personal project, will come true when I feel I have enough material.
Poster for SMUB in Trollhättan, 1 of 3 graphics designed for them.
A fully printable fake book cover, using AI, PS, InDesign and imagination.
Wallpaper for those days where inspiration is hard to come by.
Spacy wallpaper for Xbox-fans
This wallpaper tells you that Recycling is BADASS!
promo for the new Lotus Evora, mostly to try adding elements to a photo. Original pic:Lotus Evora
Results of playing with pentool in Photoshop. Makes a nice Tee-print without the background.
Fake logotype I've made for the bookcover. Made in Illustrator
A little flashgame I made a few years back along with my good friend Alexander, just for fun!
