Intro to web 3 | links, images, save for web, FTP

Building on last lecture:
CONSTANTLY VALIDATE HTML! w3c markup validator(html)

<title>My Site | description</title>

| = pipesign, used to seperate title from description

Links

<a> </a> = anchor, tag pair
<a href="http://..."></a> = basic hyperlink 
<a href="http://...">title</a> = adds title to link for validation 

For a dummy link i.e. Home on homepage use # for the link:

<a href="#">Home</a>

While experimenting i found that the order you close tags is important for correct format:

If you do use multiple tags to alter text, make a point of not getting the end tags out of order. eg:

<strong><em>Strong and emphasis</strong></em>

In terms of format, the example above is not correct. The end tags are out of order in relation to the start tags.

Follow this rule:
Always set the beginning and end tags at the same time, always placing them on the farthest end of the item being affected.

Here, again, is the example above in correct form:

<strong><em>Strong and emphasis</em></strong>

Notice the strong tags are on the far ends. Next in line are the emphasis tags. Just keep setting commands at the farthest ends each time you add them and you’ll stay in good form.

Images

<img /> = image tags, self closing
<img src="images/x.jpg" width="200" height="150" alt="a pic" title="pic"/>
  • img tag is self closing
  • image tag needs a source, width, height, alt text, and title text within tag pair

Evenmanage to apply the html i have been learning to organise this blog a bit better

Using Images
search for “creative commons” images
Stock is the best quality (IStock, sxc.hu, flickr, deviant art)
Good free icons (iconarchive, dryicons)

Saving for Web
Using PS:
file>save for web (jpg or png if has transparancy)

Hosting
How to host on CC server:
sws.canterbury.ac.uk>listwebsites>*user*

FTP
Filezilla
Host: sws.canterbury.ac.uk
User: ccad/*user*
Pass: *logon*

Advertisements

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