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 →

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 — 15/05/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 — 15/05/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 — 29/05/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 — 29/05/2008

Leave a comment