Designing Websites Using HTML and FrontPage

A Typical Webpage View Source A webpage is a text file containing instructions to tell a computer how the page should look. A webpage is a text file containing instructions to tell a computer how the page should look.

Creating Webpages ● You can create a page by hand, using a text-editor like Notepad ● You can use web-based tools, eg Blogging/Content Management Systems to store your data and present it in different ways. ● You can use website authoring software, eg FrontPage, Dreamweaver to create a page, and upload it when you are ready

HTML and FrontPage FrontPage is an editor that enables you to create the HTML code used to make webpages FrontPage is an editor that enables you to create the HTML code used to make webpages

The HTML for our first page HTML tags are usually in pairs HTML tags are usually in pairs Between the and tags, you find information about the page Between the and tags, you find information about the page Between the and tags, you find instructions for displaying text, pictures etc... Between the and tags, you find instructions for displaying text, pictures etc...

Adding text to our first page Paragraph styles We can use different heading sizes from Heading 1 (the biggest) to Heading 6 (the smallest) to make our headings stand out We can use different heading sizes from Heading 1 (the biggest) to Heading 6 (the smallest) to make our headings stand out

Using HTML to format our text To format our text quickly, we can use a cascading style sheet (CSS) page To format our text quickly, we can use a cascading style sheet (CSS) page

Creating a blank stylesheet We can choose a ready-made template, or we can make our own... We can choose a ready-made template, or we can make our own...

Selecting styles to modify We can look at two lists of styles. The original tags, and the ones we have changed. We can look at two lists of styles. The original tags, and the ones we have changed. The computer displays a sample to show how the text will look, as well as the instructions it uses for the web browser. The computer displays a sample to show how the text will look, as well as the instructions it uses for the web browser.

Changing formatting for a style We can change several different attributes for a paragraph style We can change several different attributes for a paragraph style

The Font Tab As well as the size, style and colour of a font, there are other effects we can choose... As well as the size, style and colour of a font, there are other effects we can choose... For the background, border, line-spacing and alignment, other tabs can be selected when modifying a style. For the background, border, line-spacing and alignment, other tabs can be selected when modifying a style.

A CSS file Clicking on the Style toolbar allows you to continue modifying styles Clicking on the Style toolbar allows you to continue modifying styles

Linking to a CSS file To use a CSS file, you must first link to it from your HTML file... To use a CSS file, you must first link to it from your HTML file...

Multiple stylesheets? If you needed to, you could link to more than one stylesheet! If you needed to, you could link to more than one stylesheet!

Linking code for stylesheets The code for linking to a CSS file is added to the by FrontPage The code for linking to a CSS file is added to the by FrontPage

Previewing a page The page preview tab will automatically show our page with all the new CSS formatting The page preview tab will automatically show our page with all the new CSS formatting

Adding a picture The tag will display a picture in our page. It can be modified by using height, width, border and alt within the tags. The tag will display a picture in our page. It can be modified by using height, width, border and alt within the tags.

Picture Preview One way to change a page's layout is to use tables One way to change a page's layout is to use tables

Adding a hyperlink Hyperlinks make a webpage much more useful than a printout Hyperlinks make a webpage much more useful than a printout

Absolute and Relative URLs We don't have to link to just web pages. We don't have to link to just web pages. For a page in the same directory as this file, just the filename would be enough – but watch out for upper/lower case letters! For a page in the same directory as this file, just the filename would be enough – but watch out for upper/lower case letters!

Following links You can test your page to see if the links you have made actually work You can test your page to see if the links you have made actually work

Tables! A table doesn't have to be used just for tabular data. We can also use it to arrange items on a page to look more interesting. A table doesn't have to be used just for tabular data. We can also use it to arrange items on a page to look more interesting.

The table so far... You can drag and drop text just like you would with a word-processor You can drag and drop text just like you would with a word-processor

Modifying a table Once a table is made, you have complete control of the way both the entire table, or individual cells are displayed. Once a table is made, you have complete control of the way both the entire table, or individual cells are displayed.

Table Properties

Our HTML code

A final preview of our page