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

Leave a Reply