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/