An HTML and Web Page Primer

Download Report

Transcript An HTML and Web Page Primer

Amber Annett
David Bell
October 13th, 2011
What will happen
 What is this business about personal web pages?
 Designated location of your own web page.
 Introduction to HTML (Hyper Text Markup Language)
 Writing your own HTML
 Make 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 1 - Lets take a quick look:
Part 1 - Lets take a quick look:
Part 2 – Basic HTML
 Very 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 HTML
 The basics are quite simple…
 Don’t panic: simple commands can be learned in
minutes!
 Don’t worry: it is very hard to actually “break”
something
 Don’t freak out!
Part 2 – Basic HTML
 HTML can be written in
 any text editor such as notepad or word pad
 directly on the University editing page shown before
 When working with an external editor, note that
HTML code should be saved in .html or directly copypasted into the University editor for testing
 Basic building blocks to create your web page…
Part 2 – Basic HTML
 HTML 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 HTML
 A 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 sensitive
 Be consistent for clarity
 Links may be case sensitive
Part 2 – Basic HTML: Lets See What
We Can Do Now!
 The Browser creates its own space
 Space created around headings
 Space created between paragraphs
 White space in HTML is reduced to single space
There 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
<LI>second item
<LI>third item
</UL>
(Note: the </LI> tag is not required)
• first item
• second item
• third item
 An ordered list
<OL>
<LI>first item
<LI>second item
<LI>third item
</OL>
1 first item
2 second item
3 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 row
First 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 to
 Put this at the top of the page:
<A NAME="top"></A>
 A link to a point within the same HTML page
 e.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 element
 Attributes


SRC
ALT
specifies name and location of a file
alternative text be displayed if image does not display
 File types (more info available on web)


.gif
.jpg
(for diagrams with large areas of single colours)
(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 pixels
 WIDTH 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
Part 3 – Lets Build Something!
A “Word” kind of Editor [Doesn’t Always Work!]
Part 3 – Lets Build Something!
This is where you can add/remove/modify Menu Items
Part 3 – Lets Build Something!
Folder creation for storing and organizing files
Part 3 – Lets Build Something!
Making a new page for more HTML and menu items
Part 3 – Lets Build Something!
Adding Images/Pictures to include in your site
Part 3 – Lets Build Something!
Add a file to your site (good for downloading)
Eg: PDF file
Part 3 – Lets Build Something!
Lets modify code!
Part 3 – Lets Build Something!
What does this look like?
Part 3 – Lets Build Something!
What does this look like?
Part 3 – Lets Build Something!
What does this look like?
Part 3 – Lets Build Something!
The editor
What does this look like?
Not in the menu yet!
Part 3 – Lets Build Something!
Part 3 – Lets Build Something!
Part 3 – Lets Build Something!
Part 3 – Lets Build Something!
Part 3 – Lets Build Something!
Finally – Best Practices
 Don'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 Practices
 HTML must conform to the standard
 Use HTML version 4.0 or 4.01
 avoid 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 Page
cf. https://www.geos.ed.ac.uk/website/editweb/