HTML 101 - University of Maryland, College Park

Download Report

Transcript HTML 101 - University of Maryland, College Park 

HTML 101
Finding fame on the WWW
9/07
Goals
•
•
•
•
•
Create a file and view it
Learn about tags
Learn about tables
Making links
Making your CV
Web page links
• A web page is a file which your computer
downloads from another computer
• If you type:
http://www.life.umd.edu/
Your computer goes to the computer it knows as
www.life.umd.edu and opens the file index.html
- index.html is the default file when no file is
specified
Web page links 2
• If you type
http://www.life.umd.edu/biology/faculty/bio-div.html
It goes to the folder /faculty in the folder
/biology and opens the file bio-div.html
• Links are file names in physical
locations
Files are written in
HTML=Hypertext Mark Up
Language
• The file is just text which is marked so that a
browser knows how to display it
• The file is marked using Tags :
<x>Text is surrounded with tags</x>
The tags are written within angle brackets where:
<x> goes in front and
</x> goes in back
Anatomy of a web page
• The page begins and ends with html
tags
• Two sections:
Head section where title goes.
Body section where actual web page is.
Web page layout
<HTML>
<HEAD>
<TITLE>This is displayed on top</TITLE>
</HEAD>
<BODY>
This is where the web page stuff goes.
</BODY>
</HTML>
Making a page
•
•
•
•
You need to save file as xxx.html
Needs to be text only
Can do with Word but save as text only
BBEdit can create a web page file
File -> New
HTML document
• Prompts you for a title
Add text to the body section
• Save
Viewing an HTML file
• Open your browser
• File -> Open file
Select file from where you saved it
View and check the web page formatting
Editing
• Go to BBEdit and change something in
the text
• Save
• Go back to your browser and Refresh
You should see the new material
Formatting
•
•
•
•
Fonts
Large scale
Tables
Links
Tags define the text attributes
• The simplest attributes describe text
formatting
B=bold
I=italics
U=underline
TT=courier
<B>stuff </B> = stuff
<I>stuff</I> =
stuff
<U>stuff</U>= stuff
no proportional spacing
Use <Font> to define fonts
• <FONT SIZE=n> text </FONT>
Defines font in absolute size from 1 (small) to 7 (big)
• <FONT SIZE=+1> text </FONT>
Raise font size up one
• <FONT COLOR=red> text </FONT>
Changes font to red
• <FONT STYLE=arial> </FONT>
You can do superscripts and
subscripts
• These are
SUB
A<SUB>2</SUB> =
A2
SUP
A<SUP>2</SUP> =
A2
Formatting larger units:
Paragraphs
• You can define paragraphs with P
<P>A paragraph is a group of sentences on
one topic. All the sentences relate to each
other.</P>
<P>New paragraphs will be spaced apart
from other paragraphs</P>
Line returns
• The body of text can contain returns.
However, the web browser ignores
these. On HTML page, the text will just
keep going.
• If you need a return, use <BR>
This is the only tag which is used by itself
There is no </BR>
Blockquote
• Sometimes you want to indent an entire
section
<BLOCKQUOTE>This will inset this part
relative to the part above.
<P>You can define paragraphs within this
section as well.</P></BLOCKQUOTE>
Tables
• Tables can be defined with
<TABLE> </TABLE>
• Each row is defined by
<TR> </TR>
• Each cell in a row is defined by
<TD> </TD>
PCR example
Examples
• To look at the source code:
Go to
http://cichlid.umd.edu/cichlidlabs/protocols/Basic/
Add PCR.html
Select Opsin PCR reaction
Highlight part of page
Right click
Select “View selection source”
Can then see html code
Table modifiers (include as
many as you want)
• WIDTH=“nnn” width in pixels
• BORDER=“1” border width in pixels
• CELLSPACING=“2” space btn border
and entry
• <TD WIDTH=xx%> sets column widths
See PCR example
Links
•
•
•
•
•
To other web pages
To pdfs
To pictures
To send email
Anchors in page
Links format
• <A HREF=“link”> text underlined as link
</A>
Links to web pages
• Link to specific page
<A HREF=“http://hcgs.unh.edu/RTprimer.html”>the
words you want underlined</A>
• Link to folder
<A HREF=“http://hcgs.unh.edu/realtime/>the words
you want underlined</A>
This opens the index.html page in that folder
Links to pdfs
• <A HREF=”genome.pdf”>words you want
underlined</A>
This works if the pdf file is in the folder where you
currently are
If it is somewhere else, you need complete link
<A HREF=“hcgs.unh.edu/pdf/genome.pdf”>
Inserting pictures
• <img src=”genome.jpg” width=”210”
height=”280”><genome.jpg>
• It is ideal to put text and pictures in a table
Then all the formatting is handled for you
Example
Links to sending email
• mailto:[email protected]
• This sends email to [email protected]
Check your email on umd web page
Links to anchors on page
• At the anchor location where you want to jump to
you type
<A NAME=”anchor name”>
• To make the highlighted link (say at the top of the
page) type
<A HREF=”#anchor name”> Underlined text</A>
Microsat example
Your web presence
• CV
• Research description
• Publications
Can include meeting presentations
For CV
• Start with one you like
Get a picture: of you or your organism
Enter info
• Make a list of publications
Few helpful web sits
• HTML tutor
http://www.htmlcodetutorial.com
http://www.codecademy.com/
• HTML colors
http://www.echoecho.com/htmlhexcolors07.
htm
Connecting to our server
• All web pages are on cichlid.umd.edu
• Connect using filezilla
• In /kc folder
Web page lay out
• http://chemlife.umd.edu/biology/cichlid/
• Within this we will make folders we
need
/kc/research/
/kc/lab/
/kc/protocols/
To upload pages
• We will use sftp client
Fugu for Mac
• To get this go to
http://chemlife.umd.edu/ITG/webserver/index.html