Week 4 : HTML Formatting + Uploading

This week Eugenia will be discussing a range of visual related ideas ( useful for your projects as well as any future projects that involve visual aspects ) : photography and composition principles, ideas about colour, design and navigation. And with these in mind, we’ll also be advancing in our HTML explorations to include formatting of text and images. ( If need be, refresh yourself with Week 2’s HTML class )

Step One : Getting Web Space

To activate your RMIT web server space, please visit this site and follow the steps carefully. We might do this as a group step by step, just to ensure we don’t get any problems that involve having to deal with I.T. to fix them.
Once completed, this will generate a web address for you, and your student ID, in the format of :
Try entering that address into your browser to check the activation process worked.

Create a simple HTML page with a sentence about you, and a link to your blog. [ w3 schools on adding links ]
Save the file as “index.html”.
We will upload this page to your server using the Fetch FTP software.

Formatting Images and Text with HTML

We’ll be taking advantage of the w3schools editor to build these pages.

Click on the their introduction example page, and edit your code for your page in there, pressing ‘Edit and click me’ to see the results of your code in the right hand side of the w3schools page.

Part 1 : Make an example page that includes the following :

Formatting text with tags : including those for paragraphs + lists.
Adjusted Fonts and font colours. ( See w3school on ‘styles’ )
Adjusted background colour of the page. ( See w3school on ‘styles’ )
Using images within HTML pages.
Aligning images within HTML pages. Making an image a link ( ie making it clickable – very useful for navigation and web projects )

[ Research task : How can webpages be built with photographs that allow the user to go to different web locations by clicking on different parts of the photo? ( Here are two ‘image mapping‘ solutions: the browser-based image-mapping.com, and using Fireworks to generate the code for you.) ]

Part 2 : The Joy of Tables
A clunky design workaround just to do basic page formatting? Yes, it’s true, but once the basic structure is figured out, they’re quite easy – and are very useful in optimising your webpage layout.

Task : Build a page using a table, that includes :
– 3 rows and 2 columns
– a background colour on one cell
– one paragraph of text
– one image
– and is 760 pixels wide
( see w3schools on tables, or htmldog on tables )

Further Web Design Study / Context?
A note aboutCSS + HTML. Professional web designers now tend to exclusively use CSS for controlling the style and layout of pages, and leave HTML for specifying the content. We are sticking to teaching HTML for this semester, but those interested in exploring CSS are welcome to ( and those interested in further web design after the course, should head in this direction. )

“With HTML 4.0 all formatting can be moved out of the HTML document and into a separate style sheet.”

With an external style sheet, you can change the look of an entire Web site by changing one file. When a browser reads a style sheet, it will format the document according to it. There are three ways of inserting a style sheet:
External Style Sheet
Internal Style Sheet
Inline Styles


4 Responses to “Week 4 : HTML Formatting + Uploading”

  1. Week 4: HTML continued + Design Principles « make + create + interwebs Says:

    […] 4: HTML continued + Design Principles This week, Sean continues to explore the finer points of HTML formatting and uploading. In addition, we will look at basic principles in design, […]

  2. HTML recaps « make + create + interwebs Says:

    […] Sean’s Week 4 post about getting web space, formatting text and images with HTML, the joy of tables and some tips for […]

  3. Instructions for Uploading Files to RMIT « Rmitmusic09’s Blog Says:

    […] Rmitmusic09’s Blog « Week 4 : HTML Formatting + Uploading […]

  4. My index page « Christoli's Blog Says:

    […] week4 research task does give me some idea. Image mapping is really new to me.¬† I Always dont know how people can do […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: