Amber Annett David Bell October 13 th, 2011. What will happen What is this business about personal...

Amber AnnettDavid Bell

October 13th, 2011

What will happenWhat is this business about personal web

pages?Designated location of your own web page.Introduction to HTML (Hyper Text Markup

Language)Writing your own HTMLMake your web page!

Recurring Theme for Today: “It’s Simple!”

Part 1 - Lets take a quick look:Open your internet browser (Internet

Explorer and Mozilla Firefox are examples of an internet browser)

Type in the following address (URL): http://www.geos.ed.ac.uk/homes

So let’s take a look at what your screen looks like…

Part 1 - Lets take a quick look:

Part 1 - Lets take a quick look:Address (URL)

Login Here

List of People and Their Pages

Part 1 - Lets take a quick look:

Part 2 – Basic HTMLVery simple “code” that can allow you to

create simple yet informative web pages perfect for a university setting.

First point you should pay attention to, when learning HTML is…..

Part 2 – Basic HTMLThe basics are quite simple…Don’t panic: simple commands can be

learned in minutes!Don’t worry: it is very hard to actually

“break” somethingDon’t freak out!

Part 2 – Basic HTMLHTML can be written in

any text editor such as notepad or word pad directly on the University editing page shown

beforeWhen working with an external editor, note

that HTML code should be saved in .html or directly copy-pasted into the University editor for testing

Basic building blocks to create your web page…

Part 2 – Basic HTMLHTML is written with “Tags”Tags have a very simple characteristic to

recognize and remember:Start: <open your tag here> (e.g. <body>)Stop :</close your tag here> (e.g. </body>)Example: <h1> This is my Title </h1>Congratulations, you now know the

foundation for all HTML programming!Let’s take a look at some real tags to see

what they do:

Part 2 – Basic HTMLA very simple webpage in notepad would look

something like this:

<html><head><title>Welcome</title></head><body><h3>Hello world!</h3><p>Matthew Rules!!!</p></body></html>

Part 2 – Basic HTML

Part 2 – Basic HTML: Lets See What We Can Do Now!HTML files contain HTML Elements (Sequences

of Tags)Elements normally have two tags around text

<H1> text </H1>

Empty elements e.g. horizontal rule <HR>

Elements with attributes, e.g. formatting:<H3 ALIGN=CENTER> Centred heading </H3>

HTML not case sensitiveBe consistent for clarityLinks may be case sensitive

Part 2 – Basic HTML: Lets See What We Can Do Now!The Browser creates its own space

Space created around headingsSpace created between paragraphs

White space in HTML is reduced to single spaceThere are no carriage returns tabs or multiple spaces

Part 2 – Basic HTML: Lets See What We Can Do Now!Character formatting – It’s so simple!

Logical Styles (preferred – Browser decides how to display) Emphasis <EM> </EM> Strong emphasis <STRONG> </STRONG>

Physical Styles Italics <I> </I> Bold <B> </B> Underline ? What do you think this would be?

Comments <!–- These comments will not be displayed by the Browser -->

Part 2 – Basic HTML: Lets See What We Can Do Now!Horizontal Rule <HR>

Adds horizontal line across screen

Line Break <BR>Starts new line without white space

Part 2 – Basic HTML: Lets See What We Can Do Now!An unordered list

<UL> <LI>first item (Note: the </LI> tag is not required) <LI>second item <LI>third item</UL>

An ordered list<OL> <LI>first item <LI>second item <LI>third item</OL>

• first item• second item• third item

1 first item2 second item3 third item

Part 2 – Basic HTML: Lets See What We Can Do Now!Definition of Table

<TABLE> <TABLEBODY> <TR> <TD> Your text </TD> <TD> More text </TD> </TR> <TR> <TD> Your text </TD> </TR> </TABLEBODY></TABLE>

Start of first rowFirst cell

Second cell

End of first row

Part 2 – Basic HTML: Put it Together

<html> <head> <title>Welcome</title> </head> <body> <h3>Hello world!</h3> <p>Matthew Rules!!!</p> <hr> <TABLE> <TABLEBODY> <TR> <TD> Hi </TD> <TD> Mom </TD> </TR> <TR> <TD> Miss You </TD> </TR> </TABLEBODY> </TABLE> <hr>

<OL> <LI>HTML <LI>IS <LI>SIMPLE! </OL> </body> </html>

Part 2 – Basic HTML: Lets See What We Can Do Now!Anchor element (URL is a Web Page Address)

<A HREF="URL">Text shown as a link</A>

Target or Location to link toPut this at the top of the page:<A NAME="top"></A>

A link to a point within the same HTML pagee.g. put this at the bottom of the page:<A HREF="#top">Go to top of page</A>

Part 2 – Basic HTML: Lets See What We Can Do Now!Full (or Absolute) URL

Server name included so file can be on any server<A HREF=”http://www.ed.ac.uk/news/index.html”> NEWS </A>

Pages on a different Web site should be opened in a new window:

<A HREF=”http://www.ed.ac.uk/news/index.html”

TARGET="blank"> NEWS </A>

Part 2 – Basic HTML: Lets See What We Can Do Now!Image tag <IMG>

No closing elementAttributes

SRC specifies name and location of a file ALT alternative text be displayed if image does not

displayFile types (more info available on web)

.gif (for diagrams with large areas of single colours)

.jpg (for photographs)

<IMG SRC="imagename.jpg" ALT=”Text about the image">

Part 2 – Basic HTML: Lets See What We Can Do Now!BORDER

Specifies the width of the image border in pixelsWIDTH and HEIGHT

Specify the size of the image in screen pixels It is better to reduce the number of pixels!

ALIGN sets position to LEFT, RIGHT, etc.

<IMG SRC=“images/matthew.jpg" ALT=“Matt on top of Blackford Hill“

TITLE=“Blackford Hill” BORDER="0" ALIGN=RIGHT WIDTH=300

HEIGHT=500>

Part 3 – Lets Build Something!

This is where you can write your HTML


A “Word” kind of Editor [Doesn’t Always Work!]


This is where you can add/remove/modify Menu Items


Folder creation for storing and organizing files


Making a new page for more HTML and menu items


Adding Images/Pictures to include in your site


Add a file to your site (good for downloading)Eg: PDF file


Lets modify code!


What does this look like?


What does this look like?

Not in the menu yet!

The editor

Finally – Best PracticesDon't use image files that are more than ca 150 k.

300 x 300 pixels should be adequate

Use jpeg compression to reduce file size

Don't use images unless you have full copyright permission

Create links to other people's images on the Web but don't steal them!

Include acknowledgements in the ALT text

Finally – Best PracticesHTML must conform to the standard

Use HTML version 4.0 or 4.01avoid non-standard HTML

Use an HTML validator, e.g. http://validator.w3.org/ Display your page in Internet Explorer Select menu: View / Source Select Edit / Select All, then Edit / Copy

This copies all of your HTML plus all the additional HTML added by Zope (i.e. the GeoSciences banner, the menus, etc.) to the clipboard

Go to http://validator.w3.org/ Paste your document int the “Validate by Direct Input” box Press “Check” Correct any errors and repeat. Note there may be errors in the Zope headers that you cannot

edit.

Finally - Construct Your Web Pagecf. https://www.geos.ed.ac.uk/website/editweb/

Amber Annett David Bell October 13 th, 2011. What will happen What is this business about personal...

Documents

Transcript of Amber Annett David Bell October 13 th, 2011. What will happen What is this business about personal...