Geronimo89.dk

A blog about me, my doings and everything I think deserves attention.

HTML class 1: The Beginning

Thanks to Miss Ragno from Merox.dk as our host for the first little web class we had together and of course everybody that participated.>
I want to put up a quick sum-up what we did for everybody that is interested or who couldn’t come.

Concept and Technique

Concept Technique
Sender You or your client Webserver
Message Do / buy something HTML
Receiver User Browser

Clean Code

What you should think of when starting to write a website is that you should use native html elements if possible, like h1, h2, blockquote and so on. Also very important that you devide content and style.
Bad:

<body background="#ff0000">

good:

<body> and additionally in .css file: body {background:#ff0000;}

Comments

Comments are extremely supportive when it comes to coding and learning at once, here the comment markup for HTML and CSS comments:

<!– navigation section, this is a HTML comment –>

/* multi row comments in CSS
for example: this not working in IE */

Validation

Validation is useful to get used to common guidelines. It’s not the ultimate solution, but sticking to the W3C rules is a good starting point. You can always add a browser switch for single browsers after that. (Eyeballing IE here)
Links for validation:

Also very important: remember your Doctype! (HTML5 not listed)

Sketches

webdesign sketch HTML class 1: The Beginning

Make sketches, in hand or digitally, just very roughly to define elements and layout. This will help you not to overload the page and stay focussed on your goal along the process.

Inspiration

Gathering inspiration is not really a big deal when it comes to web design. Check out the category for Web Interfaces on deviantART for example.

Resources

Editors

text wrangler syntax highlightning screenshot HTML class 1: The Beginning

Important when you choose your editor is that it supports syntax highlightning.
I recommend Notepad++ for Windows and Text Wrangler for Mac OS. Linux users: You know where to go, your packet manager gives you tons of possibilities.

Browser Extensions

Really useful, they help you debug, increase your workflow (and some of them actually look pretty sexy ;)).
My beginner recommendations:

Tutorials

Examples for great websites that have massive collections of tutorials and knowledge:

CSS References

Just a must-have for looking up how things are done and what can be done with different elements.

Vocabulary:

  • HTML = HyperText Markup Language
  • CSS = Cascading Style Sheets

Thank you for reading! Leave a comment with wishes for future lessons and general feedback please!

Give me the first comment

basic html forms

forms basic html forms

What I’ve learned about homework in Integration is, that I really should keep stuff that I already have done and document it! I just finished an¬†exercise¬†about basic html forms. It was about alignment, the semantics of forms and how to style forms with html and css. My file may act a little as a reference because I have included the common form elements in their correct structure, like usual fields, password fields, radio buttons, checkboxes and drop down menu.

While looking around on the web a little, I have some good ideas for future forms icon smile basic html forms I find mine really boring now.

Give me the first comment

CSS box, with graphic borders

box marked 295x300 CSS box, with graphic borders

First of all, we need a graphic as a basis how our css box is going to look. I’ve just chosen a box with a dropshadow. Now we use the help lines in GIMP or Photoshop to divide it into 3 pieces and save these parts into new files. 1: top.png, 2: middle.png, 3: bottom.png. Now we got our 3 different graphics, we can start the CSS work. First of all we need a basic html file.

<?xml version=”1.0″ encoding=”UTF-8″?>
<!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” lang=”en”>
<head>
<title>Our nice CSS box</title></head>
<body>
</body>
</html>

To this we start adding a div container for the box, right below the body tag. In the box, I added a heading <h1> and a placeholder div for the bottom graphic.

<div class=”box”><h1>heading</h1>
<p>Yourcontent
</p>
<div class=”bottom”></div>
</div>

Now we can start defining the css attributes of the different html objects. You can link an external css file, or just paste the css into the html file. For this simple project I will just insert the css directly into the head of the html file. Generally you should use external css files to keep everything tidy and clear.

So, here’s the code I use in the head tag:

<style type=”text/css”>
h1 {
background-image: url(top.png);
background-repeat: no-repeat;
height: 44px;
width: 266px;
font-family: Verdana;
font-size: 12px;
margin:0px;
padding: 0px;
}

.box p {
background-image: url(middle.png);
background-repeat: repeat-y;
min-height: 400px;
margin: 0px;
padding: 16px;
font-family: Verdana;
font-size: 10px;
max-width: 250px;
}

.box {
margin: 0px;
padding-top: 44px;
}

.bottom {
height: 39px;
width: 266px;
background-image: url(bottom.png);
background-repeat: no-repeat;
background-position: bottom;
}
</style>

If I skip some of the css code explanation here, just try it out yourself or look it up in a css reference. Noteable css code: We use padding:0; and margin:0; to force the elements to be without spacings inside and outside them. Another thing is, that we control the background image very explicit. We define exactly if and how it’s going to be repeated. In box p {} we add padding: 16px; because we need some spacing because of the graphic. As we can see below, we can’t use the full area of the graphic, because we don’t want text on the drop-shadow.

middle marked CSS box, with graphic borders
A thing you can do for optimization is, that you scale your middle.png to 1px height. It will probably look the same, but increase the loading speed of your website a little bit. By the way, Internet Explorer 6 doesn’t support transparent pngs so you should maybe add a Firefox/Opera/whateverbrowser link to your website.

Give me the first comment