Step 2: Create with me the sexiest website from scratch- your own!
Home page erstellen, website erstellen. Welches HTML, das Box Modell, Unterschied zwischen id und class. Semantik. Tutorial in Deutsch und English. This day we write the right doc type. Learn something about the box model. The difference between id and class and semantic as necessary.
- Miss Website shows the structure
- Your own website is always the beauty!
. This day we tell the browser which doc type he had to use. We learn the difference between id and class and the necessarity of semantic.
You need
- a texteditor.
- Your folder and your index.html (link to the 1.article is at the bottom)
Remember the folder structure.
main folder: name it:sexy-website.
»» 1.folder: images
»» 2.folder: css.
html commands the browser.
There are more than one “Hyper Text Mark up Languages” so we have to use the correct doc type, otherwise the browser can’t show our work correct. 
.
4. Your website /home page get the doc type
Open your index.html and type in the text below. Copy and paste may work too.
<!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" lang="de" xml:lang="de">
Doc Type command the browser which html you are using.
find out the structure of your website
Please read and see this screenshot: Sexiest Website mit Struktur.
There is a top-middle-bottom column with black border. Conten colum with blue border and sidebar column in magenta with three little boxes in green.
definition of a div
A div is a blocklevel element. It forces line breaks and it can group other html tags.
What is an ID or class?
You can asign most of the html tags with an id or class. This id or class is the feeder of stylesheet arguments.
Difference between id or class
ID identify a specific element and therefore must be unique on the page.
Classes mark elements as members of a group and can be used multiple time.
ID is unique
class is for multiple use
Semantic html means using html tags for their implied meaning.
If an id is unique than the only way is to assign top-middle-bottom with an id. All other html tags become a class.
You can name id and class as you like but it makes sense to use logical names.
use meaningful names
Meaningful names are : top-middle-bottom.
5. The first divs for your website /home page
Please tipp in.
<!--top end-->
This is an html comment. It is unvisible but very helpfully.
<body> <div id="top"> <h1>Headline</h1> </div><!--top end--> <div id="middle"> <div class="middle-inner"> <p> Hi,I am yours. </p> </div> </div><!--middle end--> <div id="bottom"> <p>footer</p> </div><!--bottom end-->
Safe. Open in your browser and you’ll see—- nothing more than a big headline and the textline.
There are no attributes.
6.The first Style.css for your website /home page
A Cascading StyleSheet is a simple text file. Open your texteditor safe the empty file under style.css in the folder “css”.
You can use more than one Cascading Style Sheet. I using three. One for the screen:style.css. One for print:print.css and one for pda.
So it makes sense to order this files in a subfolder.
7. link to the style.css
Between head and /head we command our websites. So we have to link the style.css between this html tag.
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css" />
The meanings:
- Link is a referer.
- rel =relationship .
- Data is a text file.
- for which media: screen.
- referer to this style is .. href…..
Box Modell
margin describes the distance between html tags.
padding describes the inner distance of a html tag.
Border –you know what it means
Your picture is 200px width. You would like to have a nice border around, you would have a distance to the next text around and another background color.
200px + the border width + margin + padding = (ie) 240px for the div around.
Most of the browser do this calculation – IE doesn’t.
The picture below shows *my box model*. Try to find your way to visualize the box model for you.
- Box Model ala mts
2. Use a correct doc type. Difference between id and class. See the strucuture of your layout. Link correct to the style.css. Learn the box model.
Next time: How to use color, background color and background images. The difference between headlines and how tu use them in a semantic correct way.
zu : Step 2: Create with me the sexiest website from scratch- your own! 
Rechtliches
Impressum
ich bin mit step 2 sehr gut zurecht gekommen, auch das box-modell-bild hat mir sofort klar werden lassen, wie sich die 3 bezeichnungen zueinander in beziehung stehen.
nun wäre noch toll zu wissen, ob link sich auf den inhalt der link-klammern bezieht oder auf den nachfolgenden inhalt, weil der tatsächliche verweis (link) ist ja eigentlich mit href beschrieben.
außerdem interessiert mich, wofür “h” bei schriftgröße steht. hight?
oh und medien gibt es neben screen noch? ist die bezeichnung beliebig oder muss es immer “screen” heißen? kann ich auch “bildschirm” schreiben?
wären die anderen: print, handy, pda oder ist auch das willkürlich wählbar?
Hi toonfish,
das *link* steht da, weil es irgendwelche Leute, die diese Vorgaben machten, dies so bestimmt haben,
man kann dabei keine deutschen Worte verwenden, screen muss screen heißen, darf nicht Bildschirm heißen, auch die anderen wie print etc sind nicht willkürlich wählbar.
h bei Schriftgröße habe ich nirgendwo stehen, ich habe wo
stehen, darum versteh ich die Frage nicht
Schriftgröße gibt man mit height an
es werden da immer englische Worte genommen, die Browser müßten sonst weltweit andere Sprachen ständig übersetzen,
selbst die Japaner, Chinesen schreiben da englisch
lg
Moin mts,
wann schreibste die weiteren steps oder habe ich die >2 nur übersehen?
mfg
Nogge
Hmm. Du weißt aber schon, dass Du völlig legitim und valide durchaus mit hunderten IDs pro Seite arbeiten kannst? Diese IDs müssen nur dokumentweit eindeutig sein, d.h. Du darfst eine bestimmte id nicht zweimal vergeben, z.b. id=”main-menu”. Kein Problem ist aber auf der gleichen Seiten noch ein Element mit der id=”sub-menu” oder id=”footer” zu haben.
Hi Frank, ja das weiß ich aber id main-menu und id sub-menu sind ja 2 ids aber EINE ID darf es nur einmal geben
danke fürs Klarstellen
lg