Category: Structures and links (web-based)

Align and Float Images

These notes were prepared using this article.

  • When an image is aligned it is just moved on the page to the left, centre or right. This just effects the position of the image and not the reaction of the text surrounding it. The inline version is given below.
    • <div style=”text-align: center”><img src=”your-image.png” width=”100″ /></div>
  • When an image is floated it can either be on the right or the left of the page. The text is forced to wrap around it. The inline version is given below.
    • <img style=”float: right” src=”page1.gif” />

Using the box model it is possible to float other sections of the page, such as the <NAV> area.

You can find more information on CSS Floats, from the links on the page or here.

Website Features and Functions

There is still a great deal of confusion over the features and functions of websites.

Website Features.

This is what makes up the website and how it looks. For example,  features of the Google website are a search box in the middle of the screen and a clean uncluttered look to the site. This is to help the website visitors to find what they want more quickly.

Website Functions.

This is the point of the website. For example, the function of the school’s website is to pass information directly to parents via the news on the front page.

Websites have many features and functions and when you go to explain remember to expand on your answers and say why that feature or function is used.

HTML Tags

The  main structural HTML tags are

  • <HTML> </HTML> – This tells the browser where the HTML pages starts amd stops.
  • <Head> </Head> – This is the header of the HTML page it is not displayed but contains information that is required for the page to be displayed properly.
  • <Title> </Title> – This is the title of the page, it is displayed in the tab at the top of the screen.
  • <Body> </Body> – The contents of the page are contained here/
  • <p> – Takes a new paragraph
  • <!– Comment –> – This is a comment for the designer and is not displayed in the browser.

The main formatting tags are

  • <Font color =”green”> green text </font> – This changes the colour of the text, note the American spelling. Colours can be described by name or by a hexadecimal reference.
  • <font face=”Tahoma”> Fancy fonts </font> – You can change the font the text is displayed in.
  • <b></b> – Embolden the text.
  • <i></i> – Italics the text
  • <u></u> – Underline the text
  • <H1>..<H7> – Set the text as a header and specify a type
  • <sup>2</sup> – Display as supertext (think squares)
  • &nbsp – Display a non blank space

Web Authoring Introduction

A web site is composed of many linked web pages. These web pages are written using HTML (Hyper Text Markup Language).

HTML Tags have an effect on the way your web pages appear. Tags appear within angular brackets <HTML> </HTML> to start and end the code. For example paragraphs are <p> and </p> to end. The main text
would be <body> </body> and headers could be <h1> </h1> or <h2> <h2>.

We will be using Dreamweaver this year to create websites.

Disney Internet Searches

Today we used Google to search for some Disney facts. How does that work?

[kml_flashembed movie="http://www.youtube.com/v/BNHR6IQJGZs" width="425" height="344" allowfullscreen="true" fvars="fs=1" /]

Searching on Google can be a bit hit and miss at times. There are a number of “tricks” we can use to get fewer and therefore better results.

[kml_flashembed movie="http://www.youtube.com/v/vqWoeuZ3Tbk" width="425" height="344" allowfullscreen="true" fvars="fs=1" /]