Tutorial: Create with me the sexiest website from scratch- your own!
Website erstellen mit xhtml und css mit oder ohne Kenntnisse. Ein Tutorial in Deutsch und English. Dreispaltiges Layout, begrenzt breit unter Berücksichtigung von Webstandards, XHTML und CSS. Create your own website with xhtml and css from scratch, if you are a beginner or not. Three column, fluid width, webstandards, xhtml and css.
- Miss Website invite you
- Create the sexiest website -your own
You would like to have your own website – your own home page. You would like to know “how”. You have heard you need “html” “css” and so much other things. There are tons of layouts all over the world. But none of them is *your* website.
This is the first article and so it is necessary to write some information. Please read.
My deal: I’ll learn you how to create your own website /home page and you’ll correct my english….
You have two or more books about “how to create a website” but all of them are so much to read. There are thousands of links in the www. But there is so much to read and nothing to do.
At the end of this articles you have your own three column layout. You know how to design lists, links, headlines, quotes, formulars – accessibility and with modern webstandards and ==> you have to do it. This is the layout we will create. Sexiest Website 
.
If you are impatient:
1.Digg this article, Wong it ….
2. Use post notification at the end of this article
3. At the end of this serial download the html and css files.
At the end your own website is written in: XHTML and is using an external CSS .
Meta information:
1. You will learn “my way” to create a three column layout. There are more than one way to do this.
2. At the end of all articles you’ll find links to necessary websites.
3. “Theory” if it is absolut necessary.
3.a At the end of all articles you’ll find links to all articles.
4. I would like to read comments. If not… the sky and the whole wide world would fall on your head ….
You need…
Texteditor – basic pc skills
- coffee
– maybe it will work with tea too – maybe - Texteditor – WordPad i.e.
- Knowledge: create folders, name them, safe file under…
- Patient.
- Humor
- Use my post notication system. You’ll find the button at the end of all articles.
You need the overview if you would like to create a website/ home page
XHTML und CSS are strict hierarchical mark up languages.
If you are an xhtml guru you are not a coder!
1. Your website need its own place:
no capitals, no space character,
no special character in file names
Create a folder structure – I recommended at desktop:
main folder: name it:sexy-website.
»» 1.folder: images
»» 2.folder: css.
2. Your website / home page see the light of the day:
Open your texteditor and safe the empty file. Name it “index.html” and safe it under the main folder “sexy-website”.
Don’t use capitals if you create files for the internet. It is easier to do this. Special character and space character are false. Some browser can’t handle them- 
.
3. Your website / home page takes the first deep breath:
Write this in your empty index.html and safe again.
<html> <head> </head> <body> <p> Hi, I am your own. </p> </body> </html>
Open you folder “sexy-website” . Click with the right mouse button on index.html.
Choose: Open with==> (Browser). Internet Explorer /Firefox ….
- Your home page take a breath
This is your first html file. Ok it doesn’t look sexy nor good, but it is yours.
Description:
html, head, body, p and all the rest of it are “html tags“. to tag= mark up. A html tag gives commands to the browser.
html tags are always between < … > angle brackets. Diagonal slash marks the end.
Html tags like boxes or Russian Puppets. You have to close the smallest before you can close the first one.
This is wrong:
...... </html> </body>
To indent source code is a helpfully way to close html tags correct.
- html tag head is the command centre
Top left of your screen you’ll see the browser icon and the title of this article. Your index.html has no title and so you’ll see the browser icon and nothing more.
A title is like a name. Html files are strict hierarchical so the command centre “names” a html file . “Command centre” is always between head und /head. Text, images, videos -all things you can see of a html file is between the body tag.
3. Name your website / home page:
Write between head und /head the title of your website / home page. Safe again. And refresh your browser cache. (strg+F5)
<title>Sexiest Website of the World</title>
Now you can see the browser icon – the title.
head is the unvisible command centre
body is visible
Between head and /head you command the browser and bots
- your language.
- if you are using css and the link to the file
- if your are using javascripts and the link to the file
- your favicon.
- the title of this document
- meta data like: adult content or not, the author, business data, short description of the content, keywords, version number of your software,
- ….
In your browser menu you’ll find: View==>Source Code . Open it and take a look at all the *meta data* from WebDesign-in.de.
1. folder structure for a website .
1. first html file ,
you become aquainted with html tags ,
head is the unvisible command centre, body is visible, no capitals, no special or space characters
Next time we inform the browser which html we use. We create the basic structure for a three column website / home page. We create our CSS file. Link to it. Learn how to use ID or Class and something about *semantic*. We’ll learn the difference between website- page – home page.
Helpfully links
- XHTML school
- Definition for favicon
War es hilfreich, freu ich mich über ein +1 oder Twittern
6
zu : Tutorial: Create with me the sexiest website from scratch- your own!
5 Kommentare
1 Trackback
-
Website erstellen,
[ 15.12.07 um 15:53 ]
[...] Create with me the sexiest website from scratch -your own. [...]
Tweets
Rechtliches
Impressum
Genial einfach. Es gibt nichts besseres für Einsteiger um die Grundlagen überhaupt erstmal zu verstehen.
Genial.
Sehr schöne Erklärung auch für Typen wie mich, die mit Drehmomentschlüssel und Schraubendreher besser klarkommen. =)
Leider scheitere ich schon am ersten Punkt. Will ich meinen ersten Versuch (index.html)per Browser öffnen, erscheint dort nur das, was ich grad geschrieben habe, also der ganze Code.
Grüsse
Daniel
Hallo – sorry, kenne deinen Namen leidern icht.
Ich bin noch recht neu was die htmlProgrammierung anbetrifft und habe folgendes Problem:
Karstens Webseite
Mein erster tabel überhaupt
1. Der Titel wird bei mir nicht angezeigt und Umlaute sehen ganz komisch aus. Was mache ich falsch? Muss ist der Fehler in meinem CSS?
Ich danke vielmals für die Hilfe!
utf-8 du musst utf-8 nutzen,
such das bei Google, dann erkennst du
und Umlaute müssen im Quelltext als entities stehen,
welcher Titel wird wo nicht angezeigt?