LIS 670 Workshop

Download the printout here.

Objective                                                                                                  

Make a browser readable Web page using HTML code and begin creating your ePortfolio.

What is HTML?

HTML is short for Hypertext Markup Language. It is a code language understood by your browser. The HTML commands, written using tags (e.g. <html>) instruct the browser on how to display your Web page’s information. An HTML document has two features: content (text) and HTML commands.

 

HTML Tags

  1. HTML commands are written using angle brackets (< >).
  2. HTML tags are not case sensitive but it is good practice to always use lowercase.
  3. HTML tags are often in pairs with an opening tag <title> and closing tag </title>.
  4. Tags can have properties (AKA attributes) that further refine the command.

 

Four Key Tags

Your Web page should have the following four tags, using this structure:

 

<html>
<head>
<title> Page Title </title>
</head>
<body>
Your Content
</body>
</html> 

Let’s Get Started

  1. Open SSH Secure Secure File Transfer Client [PC] or Fugu [Mac]
  2. Go to: Profiles/Add Profile/
  3. Name the profile. (Ex: UHM LIS)
  4. Go to: Profiles/UHM LIS and type in the following:

 

Host Name: uhunix.hawaii.edu

User Name: Your UH username (first part only = kmj2)

Port Number: 22 (Do not change this)

Authentication Method: Select Password

  1. Click OK
  2. Enter password: Your UH password, Click OK

 

On the LEFT SIDE you will see your computer desktop.

On the RIGHT SIDE you will see your UH Server Space files/directory

 

  1. On the RIGHT SIDE, make sure you see the public_html folder
  2. Double Click to open it
  3. Click on the new folder icon
  4. Create a folder called Practice files
  5. Open Notepad and begin typing your HTML exercise below.

** SAVE CONSTANTLY!

 

Step One: Create your first HTML page in Notepad

<html>
<head>
<title> Kimberly’s ePortfolio </title>
</head>
<body>
Welcome to my ePortfolio!
</body>
</html>

Step Two: Copy Your New File to SSH

  1. Save your newly created file in Notepad as html.
  2. Go to SSH and copy the file to your UH hosted space by dragging to the public_html folder
  3. Open a new browser window and check your page to make sure it has loaded.
  4. Go back to your page and continue practicing your HTML using the tutorials below.
  5. Make sure you copy new updated version to the SSH folders and check it by reloading your browser.

 

HTML TUTORIAL 1: Headers 

Find your body tags and type the following headers in-between.

 

<body>
<h1>This is Header 1. It is a very important heading size.</h1>
<h3> This is Header 3, for those who like subheadings and such.</h3>
<h6>This is Header 6. It seems too small to be very useful.</h6>
</body>

Save constantly!

Copy your updated file from the left side (Local Name) to the right side (Remote Name) and then reload your open browser to view the changes.

HTML TUTORIAL 2: Font sizes

 

Continue coding with the following:

 

<font size=”1”>This is the smallest font size. </font>
<font size=”3”>Font size 3 rides down the middle of the road.</font>
<font size=”7”>Seven is MUY GRANDE.</font>

Save constantly!

Copy your updated file from the left side (Local Name) to the right side (Remote Name) and then reload your open browser to view the changes.

HTML TUTORIAL 3: Formatting 

Continue coding with the following:

 

<p>Here comes the horizontal line. Weeeeee!</p>
<hr><br>
<i>This is italics. Fancy.</i>
<br><br>
<b>This is bold. For emphasis.</b>
<br><br>
<center>This is centered. That’s why it’s over here.</center>
<br><br>

Save constantly!

Copy your updated file from the left side (Local Name) to the right side (Remote Name) and then reload your open browser to view the changes.

 

HTML TUTORIAL 4: Font Color

 

<font color= “purple”>This is purple. Purdy!</font><br>
<hr color=”red”>
<br><br>

Save and view in your browser.

GOOD TO KNOW: There are sixteen predefined colors: silver, gray, maroon, green, navy, purple, olive, teal, white, black, red, lime, blue, magenta, yellow, and cyan.

To see more colors go to: http://www.w3schools.com/html/html_colorvalues.asp

HTML TUTORIAL 5: Background Color

 

Add background color to your web page: add the bgcolor attribute to the body tag, like this:

 

<body bgcolor=”teal”>

 

Save. View in the browser.

HTML TUTORIAL 6: Ordered & Bulleted Lists

Continue after the last <br><br> tags, type:

 

<h1>This is an ordered list</h1>
<ol>
<li>First item</li>
<li>Second item</li>
<li>Third item</li>
</ol>
<p>
This is an unordered list.
<ul>
<li>An item</li>
<li>Another item</li>
</ul>
</p>

Save and view in your browser.

HTML TUTORIAL 7: Tables

 

<table border=“4” bordercolor=“yellow”>
<tr><td>This is a table cell.</td>
<td>This is another table cell.</td></tr>
<tr><td>
<ul>
<li>This is an unordered list within the table.</li>
<li><a href=“http://www.hawaii.edu/”>This is a link to the UHM homepage.</a></li>
</ul>
</td>
<td>
<ol>
<li>Another</li>
<li>ordered list</li>
</ol></td></tr>
</table>

 

Save and view in your browser.

Troubleshooting Tips:

 

  1. When editing in Notepad, make sure that your file is saved as .html NOT .txt

 

  1. If something does not look quite right, check to see that you have an end tag </ > that matches a beginning tag. For example: <title>Kimberly’s page</title>

 

  1. Check for missing punctuation. Do you have a forward slash in your end tag? Did you forget to put a closing quotation mark around the 6-digit color code or maybe you left out the pound sign (#)?

UNIX Commands

 

Command Function
cd directoryname Change directory levels.
chmod _ _ _     filename Change your permissions.
ls -a Lists all the files in your directory.
ls -la List all the files in your directory in long format including the mode, number of bytes, the owner, last time it was modified, etc.
pine Enter email. See the ITS document “Getting Started with Pine” at above URL.
pico filename Edit a file. See the ITS document “Getting Started with Pico” at above URL.
rm -i filename Delete file.
cp file1 file2 Copy contents of file #1 into file #2.
mv file1 file2 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.
man command Gives you details about that command.
du Called disk usage. Shows file and directory sizes.

 

Pico Commands

 

Command Function
^O
^D Delete the character at the cursor position. Can also use backspace key.
^K Delete (kill) entire line.
^U Undelete. Very important!
^L Refresh display.
^W Find words in the document. Helps when you have to edit a long page.
^A Move to beginning of current line.
^E Move to end of current line.
^V Move forward a page of text.
^Y Move backward a page of text.
^X Exit Pico.

 

Coding in WordPress: Know your command bar icons

 

Add Media Adds media to your page through your media library.
Add Poll Adds an interactive poll to your page.
Add Contact Form Adds a contact form to your page. Highly customizable and sends to your designated email address.
B Bold
I Italics
ABC Strikethrough text.
Unordered/Bulleted List Creates a bulleted list.
Ordered/Numbered List Creates a numbered list.
Blockquote Indents text to blockquote.
Align Left Aligns text left.
Align Center Aligns text center.
Align Right Aligns text right.
Hyperlink text Hyperlinks text.
Remove Hyperlink Removes hyperlink.
Insert More Tag Inserts a page break line with the text More… at the end.
Spell Check Spell checks your page.
Full Screen/Distraction Free Writing Mode View page in full screen.
Show/Hide all command icons (aka kitchen sink) Shows or hides all the command icons you can use for editing your page.
Text formatting (Defaults to Paragraph) Formats your text (paragraph, header size…)
Underline Underlines text.
Align Full Justifies text.
Select Text Color Select the color of your text.
Paste as Plain Text Paste plain text into page.
Paste from Word Past text from Word.
Remove Formatting Remove all formatting.
Insert Custom Character Insert a custom character or symbol.
Outdent Outdents text.
Indent Indents text.
Undo Undo formatting/text.
Redo Redo formatting/text.
Help Help file.

 

Coding in WordPress: Know Your Navigation Menu

 

Media Access your media library. Upload videos, images and documents here.
Links View helpful WordPress links and add your own. * Not used often.
Pages The pages in your website.
All pages View all your pages.
Add New Add a new page.
Copy a Page Copy a page you have already created.
Comments View and approve comments left on your site.
Feedback Create and edit polls.
Appearance Options to change the appearance of your site. Includes: Themes, Customize, Widgets, Menus, Header, Background, Custom Design, Mobile.
Users Add other users to your site.
Tools Miscellaneous tools. Import & Export features.
Settings In depth settings for your site.

 


Coding in WordPress: How to Get Started 

Under your Dashboard:

  1. Hover over pages, click on Add New
  2. Add the title for page (ex: Coursework Samples)
  3. Change Page Attributes
    1. No Parent = Main link on navigation bar
    2. Parent (ex: Courses) = Page will appear as sub-link on navigation under Courses
  4. Select Template style for page (varies depending on template used)
  5. Add order number for page (If you type “1” the page will appear in the first position on the navigation bar. This also applies for sub-folders; it will appear at the first position in the dropdown under the main navigation link.
  6. Begin coding your page in either visual or text mode.
  7. Use Safe Draft often!!
  8. Preview will allow you to preview your page in an active browser. BE CAREFUL! This is only preview mode and is NOT LIVE.
  9. Click on Publish to make your page live.

 

EXPLORE!!!

 

The only real way to learn how to use WordPress is to explore all the features on your own. Make sure you constantly save. If you hit a roadblock, you can contact the Web Team or use YouTube for reference help.