Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
Download LIS 670 Handout - University of Hawaii System
Document related concepts
Transcript
LIS Web Team
LIS 670: HTML Coding Basics
Objective
To learn the skills needed to complete LIS 670 web page assignments.
What is HTML?
Hypertext Markup Language, or HTML for short, is what tells a web browser how a page
should look. An HTML document contains two components: 1) content and 2) HTML
commands that specify the placement and formatting of the content.
HTML Elements (Millhollan, 179-182 & Wikipedia.org "HTML Tag" entry)
"HTML elements generally consist of three parts: a start tag marking the beginning of an
element, some amount of content, and an end tag. Elements may represent headings,
paragraphs, hypertext links, lists, embedded media, and a variety of other structures."
("HTML Tag" entry at Wikipedia.org)
1. HTML tags are surrounded with angle brackets (< >).
2. HTML tags are not case sensitive.
3. HTML tags are often in pairs with a starting tag and ending (also called closing) tag
(<body></body>).
4. "Nested" HTML tags should close in the reverse order of the opening tags:
<html>
<body>
<p>Why did the chicken cross the road?</p>
</body>
</html>
What is CSS?
Formatting your web page is called “styling” it – basically it’s talking about how you want your
page to look. HTML uses a companion language called CSS (Cascading Style Sheets) to
apply style to the various elements of a page. Exercises in this tutorial involving CSS will be
specially marked.
Let’s Get Started
In this packet are a few exercises to complete. You can look at examples for each exercise
on the web here:
http://www.hawaii.edu/lis/webteam/workshops/LIS670/HTMLfiles/file01.html
1
LIS Web Team
Living in a Material UNIX world!
Web pages can be created using a simple text editor (e.g., Windows Notepad, Mac OS
TextEdit, or UNIX Pico). Today we’ll be using UNIX Pico to edit our HTML file.
STEP 1:
To connect to UNIX:
1.
2.
3.
4.
5.
Double click the SSH Secure Shell Client icon on the Windows desktop
Click the Quick Connect button or click the File menu and choose Connect
Under host name, type uhunix.hawaii.edu
Under username, type your UH username
Click the Connect button and enter your password when prompted
On the uhunix web server, HTML files are stored in your public_html directory. To navigate to
the public_html directory where your "test_file.html" file is located, type:
cd public_html
(Note: a list of other useful UNIX commands is included at the end of this handout)
To view the files located in the public_html directory, type:
ls
Open your test_file.html document with the Pico text editor. To open the file with Pico, type:
pico test_file.html
Start Internet Explorer or Firefox and enter the address to your file in the browser's address
bar:
http://www2.hawaii.edu/~yourusername/test_file.html
** Please keep your webpage open while we do the exercises. **
If you click the browser's View menu and choose Source or Page Source, you’ll see the
page’s HTML code, which looks similar to what appears in the text editor:
<html>
<head>
<title> …document title… </title>
</head>
<body>
…your page content…
</body>
</html>
2
LIS Web Team
STEP 2:
Headers
Header tags are useful for creating section headings and sub-headings. There are 6 header
tags in all, and today you’ll be using 3 of them.
Locate the <body> tag and type the following lines after it:
<h1>This is header style 1. It's the most prominent heading</h1>
<h2>This is header style 2, useful for subheadings and such.</h2>
<h3>This is header style 3. We’re getting smaller!</h3>
Save your changes by pressing the control key and the letter “O” simultaneously (a list of
Pico commands is at the end of handout). Press Enter when Pico prompts you for a filename.
Switch to the web browser and click the Refresh button. You can see the changes in size
and thickness – there are six headers ranging from largest <h1> to smallest <h6>.
STEP 3:
Font
Next, let's get bold and lean a little to the right. Switch back to Pico and add the following
lines to your HTML file:
<i>This is italics. Fancy!</i>
<b>This is bold. It looks strong and tough!</b>
Save your changes and refresh your browser.
What happened? Did you expect your webpage to display the same formatting as above, with
one line right beneath the other? Instead, on your webpage the two lines are right next to
each other – that’s because they are just pieces of raw text thrown into the <body> of the
page. The following steps show different ways to format the way you’d like them to appear.
STEP 3a:
Go to your Pico file and type:
<div><i>This is italics. Fancy!</i></div><br />
<div><b>This is bold. It looks strong and tough!</b></div><br />
Save your changes and refresh your browser.
What we have created is a <div> section,
a “division.” This is necessary because all content (that is, the words, pictures, etc that you
want on your page) has to be contained inside something. The <div> tag creates an invisible
section for you to put your words into – think of it as an invisible shoebox that holds your
3
LIS Web Team
content. Once we have that shoebox created, we can then tell the browser how we want the
things inside the box to look with CSS rules.
The other thing we added was the <br /> tag. This means “break” and adds a line break
where you enter the tag. This tag does NOT need another pair closing tag, but instead has
the closing / slash in itself. <br /> is one of the most common tags used.
If you want to separate them more, there is something else you can do, which is better suited
to typing sections of text.
STEP 3b:
Go to your Pico file and change the <div> parts to <p>:
<p><i>This is italics. Fancy!</i></p>
<p><b>This is bold. For emphasis.</b></p>
Save your changes and refresh your browser. The <p></p> tags instruct the browser to
make each line a new paragraph (so instead of a plain shoebox, we have created a
“paragraph”-type shoebox to put our content into), and a paragraph automatically has a line
break at the end of it. Check out the line break on your refreshed page. The difference
between <p></p> and <div></div><br /> is minor when you are dealing with plain text; the
difference is that while you will definitely use <p> as a shoebox for text, you will want to use
<div> as a box for other things like images and navigation.
What do you do if you don’t want space between your sentences, but you do want to contain
them? The simplest way of doing this is put a <p> around the whole thing!
STEP 3c:
Go to Pico and type:
<p>I love ice cream. No, I mean I <i>really</i> love <b>ice
cream</b>.</p>
Save your changes and refresh your browser
STEP 4:
Before we continue further, let’s divide the webpage with a horizontal line using the <hr />
tag.
Switch back to Pico and add the following lines to the HTML file:
<hr />
<p>Walking a thin line -- by using the horizontal line tag!</p>
4
LIS Web Team
Save your changes and refresh your web browser. Note that the <hr />, like the <br />,
has no ending pair tag, but instead has a space and a slash inside it.
STEP 5:
Font size matters
Getting back to font… Sometimes you may want to use a larger font on a portion of text. To
do this, switch back to Pico and create a <p> tag with the style=”” command with the property
font-size: for the text you want to modify. This seems complicated because we’re starting to
use CSS, but once you understand all the pieces, it makes sense.
<p style="font-size: 1em;">This is a normal font size</p>
<p style="font-size: xx-small;">This is a teensy-weensy font size</p>
<p style="font-size: xx-large;">This is MUY GRANDE!</p>
Save your changes and refresh your browser.
CSS
First we contained our text in a <p>. Then we want to tell the browser “make everything
inside this <p> look like ______.” That’s where the “style” part comes in. By using the style=””
command inside the first <p> bracket, you are telling the browser “make everything inside this
<p> look like this,” and then you lay out your rules. In our case we have three different <p>’s,
with three different font sizes.
There are three things you can do with the font-size: rule, you can set the size as a range
between xx-small and xx-large; you can set it as a percentage (if you wanted this particular
paragraph to be 50% the size of the text on the whole page, for example); or you could set a
defined size. In this case you will notice the first line says 1em; an em is the size of the
capital letter “M” in the default font and font size set by the user’s browser – using this as a
unit of measurement provides web designers with some amount of control and precision in
their fonts and widths, while allowing for flexibility on the viewer’s part. If you want to specify
the size of your font, we recommend the “em”!
STEP 6:
Text Color
Again we have to use CSS to add style to our content. In this case, we want color, and you
can control the color of text by adding the color: property to a style=”” tag. To try this, switch
back to Pico and add the following line:
<p style="color: purple;">This is donna's favorite color!</p>
<p style="color: #0066CC;">This is one of my favorite colors!</p>
CSS
Save your changes and refresh your browser.
5
LIS Web Team
There are sixteen pre-defined colors: aqua, black, blue, fuchsia, gray, green, lime, maroon,
navy, olive, purple, red, silver, teal, white, and yellow. In addition, there are 216 “web safe
colors” that all browsers should be able to read accurately. You can use these colors by using
the “HEX” color code system (a combination of A-F and 0-9 to six places), as in the second
example above. To see more colors and their codes, refer to the chart at:
http://www.w3schools.com/html/html_colors.asp
STEP 7:
Spice Up Your Page
Pick one of the 16 pre-defined colors from the list (above) and change your page's
background color by adding the background-color: attribute to the body style tag:
Switch back to Pico and without changing the text, add the background-color: attribute to the
<body style=””> tag:
<body style="background-color: teal;">
CSS
Save your changes and refresh your web browser.
Ouch! That's enough to make people's eyes bleed. As a general rule, it's better to choose
softer, subtler colors for a page's background (such as background-color: #CCFFFF;).
STEP 8:
Making Lists
Have you ever used the "numbering" or "bullets" list feature in MS Word? It's pretty spiffy—
just click either button and Word automatically creates a numbered or bulleted list as you
type. Well, HTML has a similar feature.
Switch back to Pico and add the following lines:
<h1>How to make dinner</h1>
<ol>
<li>Get in the car</li>
<li>Drive to favorite restaurant</li>
<li>Order dinner from waiter</li>
<li>Eat!</li>
</ol>
<h2>Things to do today</h2>
<ul>
<li>Clean garage</li>
<li>Go surfing</li>
</ul>
6
LIS Web Team
Save your changes and refresh your web browser to see the results. The <UL> tag
creates an "unordered" —or unnumbered— list of items. The <OL> tag creates an "ordered"
—or numbered— list of items.
STEP 8a:
You can also control the list's notation style by adding the style=”” attribute to the <UL> or
<OL> tags, along with the list-style-type: property:
<h1>Choose one of the following:</h1>
<ol style="list-style-type: lower-roman;">
<li>Meatloaf</li>
<li>Seared Ahi</li>
<li>Plate lunch</li>
</ol>
<h2>Benefits of Lite Beer</h2>
<ul style="list-style-type: square;">
<li>Tastes Great!</li>
<li>Less Filling!</li>
</ul>
CSS
CSS
Save your changes and refresh your web browser. For more style of lists, check a
reference guide.
STEP 9:
Turn the tables
Tables are composed of rows and cells, much like in Microsoft Excel, and are great for
representing information in, well, tabular format. It used to be that tables were used to create
the layout of a page, but no more! CSS is used for “positioning” as it is called, and tables are
now only used for tabular data.
The code for tables can be a little tricky to read, but if you indent the HTML code properly (as
shown below), you can make the code easier to understand.
In Pico, type the following to create a basic table:
<table border="1">
<tr>
<td>This is the
<td>This is the
</tr>
<tr>
<td>This is the
<td>This is the
</tr>
</table>
first cell of row #1</td>
second cell of row #1</td>
first cell of row #2</td>
second cell of row #2</td>
7
LIS Web Team
Save your changes and refresh your web browser.
The <tr> tags specify a horizontal ROW in the table and the <td> tags specify each CELL
within each ROW. The border= attribute on the <table> tag instructs the web browser to
create a border around the whole table. The border= attribute can be any whole number (e.g.,
1, 3, 10, 14, etc.). The larger the number, the thicker the border around the table...
Because HTML tables can be very complex, we've indented the various tags to indicate
which one is subordinate to the other — when dealing with tables, it's useful to indent your
HTML tags this way in order to give you an easy-to-read representation of how the table tags
are related. It can also help you spot any errors in more complicated tables, should you forget
to include a tag.
STEP 10:
The Missing Link
Eventually you will need to create a link from your own page to a different page somewhere
else on the internet. To do this, use the "anchor" tag to specify the destination page address
and the text you want to serve as the clickable link.
In Pico, type the following line in your HTML file:
<a href="http://www.hawaii.edu/lis">Go to the LIS home page</a>
Save your changes and refresh your web browser.
Other Useful Bits of Fluff
The <blockquote> tag indents a paragraph, which can be useful for quoting long sections of
another work. Switch back to Pico and type some portion of the following passage:
<p>Once upon a time: <blockquote>We the People of the United
States, in Order to form a more perfect Union, establish
Justice, ensure domestic Tranquility, provide for the common
defense, promote the general Welfare, and secure the Blessings
of Liberty to ourselves and our Posterity, do ordain and
establish this Constitution for the United States of
America.</blockquote> And they lived Happily Ever After…</p>
Save your changes and refresh your web browser.
Some characters must be represented by codes, since they're reserved by HTML (such as
the @, &, or " symbols). In those cases where you need to use such characters as content
8
LIS Web Team
(rather than as part of an HTML command), you must encode them as "special characters"
using HTML codes.
A list of special characters & their HTML codes can be found at the Web Monkey site:
http://www.w3schools.com/html/html_entities.asp
Switch back to Pico and type some portion of the following passage:
<p>To wit: <blockquote>These ampersands look the same on the web
page: & or &! You are @ an HTML workshop. To get
full credit for your hard work, be sure to put one of these
© or © symbols on your Web site. And don’t stress out
at school, take care of your ♥</blockquote> Hooray for
special characters!</p>
Save your changes and refresh your web browser.
Thank you all for coming to the workshop today!
9
LIS Web Team
The LIS Web Team also has a list of useful reference sites:
http://www.hawaii.edu/lis/webteam/tutorials/html.htm
Reference
Millhollon, Mary, and Jeff Castrina. Easy Web Page Creation. Microsoft: Redmond, 2001.
HTML Element. Wikipedia.org; Internet. Accessed 2005 September 26.
http://www.w3schools.com/html/ W3 Schools HTML tutorial and Reference Guide
http://www.w3schools.com/css/ W3 Schools CSS tutorial and Reference Guide
UNIX Commands
Command
cd directoryname
chmod _ _ _
filename
ls -a
ls -la
pine
pico filename
rm filename
cp file1 file2
mv file1 file2
man command
du
Function
Change directory levels.
Change your permissions.
Lists all the files in your directory.
List all the files in your directory in long format including the mode, number of
bytes, the owner, last time it was modified, etc.
Enter email. See docs at: http://www.hawaii.edu/itsdocs/category.html
Edit a file. See docs at: http://www.hawaii.edu/itsdocs/category.html
Delete file.
Copy contents of file #1 into file #2.
Move entire contents of file #1 into file #2. You can use mv to move a file into
or out of a directory or to RENAME a file.
Gives you details about that command.
Called disk usage. Shows file and directory sizes.
Pico Commands
Command
^O
^D
^K
^U
^L
^W
^A
^E
^V
^Y
^X
Function
Save.
Delete the character at the cursor position. Can also use backspace key.
Delete (kill) entire line.
Undelete. Very important!
Refresh display.
Find words in the document. Helps when you have to edit a long page.
Move to beginning of current line.
Move to end of current line.
Move forward a page of text.
Move backward a page of text.
Exit Pico.
The ^ symbol is shorthand for the "control" key on the keyboard. Thus, ^O translates into
"hold down the control key on the keyboard and press the O key."
Last updated: 2/24/11
10
