15/5/08 :: week 3

handcoding basics

Constanza, as we did not cover the planned content in week 3 - I have just moved all content to week 4 now - leaving you a few notes here on what we covered :-)

lesson content

  • handcoding with TacoHTML
  • workflow considerations
  • saving and previewing pages
  • switching between applications

lesson notes

  • for best workflow - always keep your HTML page open in the browser (Firefox) as well as in TacoHTML
  • any changes you make in your HTML and CSS will need to be saved before they can be previewed in the browser
  • to switch between your coding program and the browser - get used to using the keyboard shortcut (hold ‘apple’ key and press tab) - this will save you a lot of time :)
  • while you are getting used to the CSS properties and rules - go slowly and test/preview as you go on
  • make sure to keep your HTML code as well as your CSS code as tidy as possible as this will make it easier to spot any problems or coding errors
  • use the ‘organise tags’ function (top menu > syntax) to keep your HTML code tidy
  • save - save - save! :-)

4 Comments »

  1. Fantastic work tonight, Constanza :) you were on a flow :)

    if you can now make sure to practise a lot - we can soon start doing some great things with our CSS :) keep things very simple for now though - don’t worry about how it looks; the important thing will be to get it all working…!
    a few reminders:

    how to compress a folder for email attachment

    • hold down your control key
    • click and hold on the folder to be compressed
    • select “create Archive” from the drop down menu
    • you will see a new folder in the same folder as you the folder you clicked on called “archive.zip”

    to style your pages

    • always save both the HTML and the CSS files before you preview
    • go slow :) - and add one property at a time - save and preview
    • keep your CSS tidy and indented to easily spot errors
    • every line of your CSS (inbetween the curly brackets) ends with a semicolon ;

    happy coding :)

    Comment by prisca — May 15, 2008

  2. about today’s lesson plan: as we didn’t get to do this today - I will reshuffle a few things on the outline and we will cover this next week ;) so don’t worry about those notes for now ;)

    Comment by prisca — May 15, 2008

  3. Constanza

    Just looking through your files - and you’re not doing bad at all! Almost there :) I will edit your code and email you the files back so you can see exactly where your code went wrong.

    Just a few points for your reference:

    • folder structure
      always keep all files as organised as possible, in their correct directories:
      see screenshot
    • the break tag: remember that in XHTML this tag is written with a space and a forward slash at the end! see screenshot
    • using lists: your use of lists is not quite right here - see screenshot
    • slipping into old coding methods…. tzttzzzz…. ;-)
      to align any element within your HTML - you should use CSS, not add additional tags into the XHTML!! see screenshot
    • to link a section of text - remember to type out the complete HREF tag (2 parts) - see screenshot
    • for any special characters, such as the copyright © or ampersand & - use decimal code (see screenshot above) - use this page here as reference
    • embedded CSS - on your ‘page one.html’ page you used embedded CSS. This is perfectly fine - but not ideal. When you write your CSS into the HTML - it can become too long and heavy to control all styling within that page; also, the browser will need to load it in for each new page again… With an external CSS file - the browser will load the CSS once and then keep it in its memeory for any other pages, this will then speed up loading time throughout your site: see screenshot
    • the image tag needs to be written differently from the old HTML as well - ending in a space, then a forward slash and lastly the closing bracket > see screenshot
    • CSS - firstly, try working with 1 CSS file alone. This will ensure consistent styling throughout and make your pages load faster. There were a few errors in your file as well - see screenshot.

    Comment by prisca — May 29, 2008

  4. I went through your pages and I understood what I have to do now. I will be able to use “my” tags without problems from now onwards… I will practice them.

    Comment by Constanza Martinez — May 29, 2008

Leave a comment