Website 101. Yani Ivanov. Student Assistant / Web Administrator

(1)

Website 101

Yani Ivanov

Student Assistant / Web Administrator

Information Technology for Environmental Research Area of the Hawai`i NSF EPSCoR Program

(2)

Covered Topics

•

• Introduction to HTML

Introduction to HTML

–

– What is it and how it worksWhat is it and how it works –

– Main HTML tagsMain HTML tags

•

• How to Use Macromedia Dreamweaver

How to Use Macromedia Dreamweaver

–

– Creating a simple web page using Creating a simple web page using DreamweaverDreamweaver

•

• Servers, Files and Websites

Servers, Files and Websites

–

– Local and server filesLocal and server files –

– Transferring files to/from a web server using SSHTransferring files to/from a web server using SSH –

(3)

Announcements

•

• (Optional) Practice session after the presentation

(Optional) Practice session after the presentation

•

• Dreamweaver more in depth session tomorrow

Dreamweaver more in depth session tomorrow

–

3.15pm Thursday, June 30, same room

•

• Reserve Dreamweaver time on our lab PC

Reserve Dreamweaver time on our lab PC

–

Email to

to reserve time

•

• Presentation available online at:

Presentation available online at:

http://www.uhh.hawaii.edu/~sdalhelp/help.php

(4)

HTML?

•

• What is HTML?

What is HTML?

–

Abbreviation for Hypertext Markup Language

–

Platform independent styles that define the

various components of a web document

•

• Why HTML?

Why HTML?

•

(5)

How does HTML work?

•

• HTML files are plain text files containing markup tags

HTML files are plain text files containing markup tags

•

• Markup tags tell web browsers how to display the page

Markup tags tell web browsers how to display the page

(page formatting and layout)

•

• Text enclosed in opening and closing HTML tags is

Text enclosed in opening and closing HTML tags is

affected by those tags

•

• HTML files can be created using a simple text editor or

HTML files can be created using a simple text editor or

WYSIWYG applications/editors

•

(6)

From HTML Source Code to a Web Page

•

• HTML files contain HTML source code that is

HTML files contain HTML source code that is

used by browsers to format web page contents

•

• HTML files have .html or .htm extension

HTML files have .html or .htm extension

•

• HTML source code is read by web browsers and

HTML source code is read by web browsers and

transformed to formatted pages (rendering)

•

• The HTML file that contains a site’s first (home)

The HTML file that contains a site’s first (home)

page is usually named index.html

(7)

HTML Editors

•

• Simplest editors:

Simplest editors:

–

Notepad in Windows

–

Emacs

or vi in UNIX

–

SimpleText for Macintosh

•

• Alternatives:

Alternatives:

–

Macromedia Dreamweaver

–

Microsoft FrontPage

–

Macromedia Contribute

–

(8)

Basic HTML Tags

•

• HTML tags have the form:

HTML tags have the form:

<html> … </html> <html> … </html> <strong> … </strong> <strong> … </strong> <p> … </p> <p> … </p> –

– Usually come in pairs: opening and closingUsually come in pairs: opening and closing –

– Not case sensitiveNot case sensitive –

– Usually created from intuitive abbreviationsUsually created from intuitive abbreviations –

– Can be nestedCan be nested

HTML Code:

HTML Code: <P><P>Hey, I can use Hey, I can use <i><i>italicsitalics</i></i> in HTML.in HTML.</P></P>

Browser View:

(9)

Sample HTML Code

<title>My First Web PageMy First Web Page</title></title> </head>

</head>

<h1>This Is My First Web PageThis Is My First Web Page</h1></h1> <p>

<p>The first paragraph comes here.The first paragraph comes here.

<

<strong>strong>And this text is boldAnd this text is bold..</strong></strong> </p> </p> </body> </body> </html> </html> Try it out: Try it out: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

(10)

(11)

Basic HTML Tags

•

Heading: Heading: <h1><h1>……</h1></h1> ; ; <h6><h6>……</h6></h6>

•

Paragraph: Paragraph: <p><p>……</p></p>

•

Line Break: Line Break: <br /><br />

•

Bold: Bold: <strong><strong>……</strong></strong> ; ; <b><b>……</b></b>

•

Italic: Italic: <i><i>……</i></i>

•

Underline: Underline: <u><u>……</u></u>

•

Alignment:Alignment: <left><left>……</left></left> <center>

•

Comment: Comment: <!> •

(12)

Web Page Background

•

Solid color background

<body bgcolor=“

<body bgcolor=“blueblue"> "> …… </body></body> <body bgcolor=“

<body bgcolor=“whitewhite"> "> …… </body></body> <body bgcolor="

•

Image background

<body background="

<body background="img.gifimg.gif"> "> …… </body></body> <body background="

(13)

HTML Links

•

• Web pages have links to other pages or

Web pages have links to other pages or

sites (hyperlinks)

<a href=“

<a href=“……”> ”> … … </a> </a> <a href=“

<a href=“www.yahoo.comwww.yahoo.com”>”>Yahoo WebsiteYahoo Website</a></a>

•

• Opening a link in a new browser window

Opening a link in a new browser window

<a href=“

<a href=“……” target=“_blank”> ” target=“_blank”> … … </a> </a> <a href=“

<a href=“www.yahoo.comwww.yahoo.com” target=“_blank”>” target=“_blank”>Yahoo WebsiteYahoo Website</a></a>

•

(14)

Images

•

• Images are represented by a link to a file:

Images are represented by a link to a file:

<img src=“

•

• Image attributes

Image attributes

–

Height

–

Width

–

Border

–

Alternate text (tooltip)

<img src=“

<img src=“images/images/myimagemyimage.jpg.jpg” width=“” width=“100100” heigth=“” heigth=“150150” ” border=“

(15)

Tables

•

• Used for presenting data, as well as page layout

Used for presenting data, as well as page layout

•

• Defined by the

Defined by the

<table>

…

</table>

•

• Consist of table rows, defined by

Consist of table rows, defined by

<

tr

>

…

</

tr

>

•

• Rows consist of data cells, defined by

Rows consist of data cells, defined by

<td>

…

</td>

•

• Data cells can contain text, images, tables, etc…

Data cells can contain text, images, tables, etc…

•

• The trick:

The trick:

–

– The number of data cells in every single table row has to be theThe number of data cells in every single table row has to be the same for the whole table.

same for the whole table.

–

(16)

Tables: Example

<table width="

<table width="200200" border="" border="11" " cellspacingcellspacing="="00" " cellpaddingcellpadding=“=“55">"> <

<td>This is the first rowThis is the first row</td> <td></td> <td>Still first rowStill first row</td></td> </

</trtr>> <

<td>This is the second rowThis is the second row</td> <td></td> <td>Still second rowStill second row</td></td> </

</trtr>> <

<trtr>> <td

<td colspancolspan="2">="2">This is the third row, only 1 cell hereThis is the third row, only 1 cell here</td></td> </

</trtr>> </table>

(17)

(18)

Viewing HTML Web Pages

•

• HTML files on your computer can be

HTML files on your computer can be

opened using a web browser

•

• Often used to preview a website before

Often used to preview a website before

posting it to the web

•

• Open your browser, select File

Open your browser, select File

-

> Open,

navigate to the desired html file

(19)

Macromedia

(20)

What is it?

•

• Application for beginning and advanced web

Application for beginning and advanced web

development

•

• Provides support for many different web

Provides support for many different web

technologies like:

–

HTML

–

Different client and server scripting languages

–

Cascading

Stylesheets

(CSS)

–

(21)

Why

Dreamweaver

_Dreamweaver

?

_?

•

• Gives significant power in web development

Gives significant power in web development

•

• Provides great flexibility

Provides great flexibility

•

• Numerous helpful features

Numerous helpful features

–

– Code viewCode view –

– Layout viewLayout view –

– File managerFile manager –

– Code generatorCode generator –

– Tag inspector, design help, code helpTag inspector, design help, code help

•

• Most importantly:

Most importantly:

–

You don’t have to know much HTML to start creating impressive

web pages

(22)

Setting Up a Site in

Dreamweaver

•

Click Site from the menu list and select Manage SitesClick Site from the menu list and select Manage Sites

•

In the Manage Sites window click New… and select Site from the dIn the Manage Sites window click New… and select Site from the droprop- -down menu

down menu

•

In the Site Definition window click on the Basic tab and follow In the Site Definition window click on the Basic tab and follow the wizard the wizard selecting the following

selecting the following

1.

1. Type a name for your siteType a name for your site

2.

2. Not using server technologyNot using server technology

3.

3. Edit files locally; Browse to the location where you want your Edit files locally; Browse to the location where you want your website website files to be stored on your PC

files to be stored on your PC

4.

4. No connection to a remote serverNo connection to a remote server

5.

5. Click Next, verify your selections, then click Done, and Done agClick Next, verify your selections, then click Done, and Done againain

•

You just created a new site on your machine and now you can starYou just created a new site on your machine and now you can start t using

(23)

(24)

Let’s Try It Out

(25)

Uploading Files to a Web Server

(26)

SSH Secure Shell

•

• Secure file transfer manager

Secure file transfer manager

•

• Transfers file between a local machine and a

Transfers file between a local machine and a

web server

•

• Easy drag

Easy drag

-

and

-

drop file management

•

• Download from:

Download from:

http://www.

(27)

Getting Started with SSH

•

• Start the SSH File Transfer Client

Start the SSH File Transfer Client

•

• Click “Quick Connect”

Click “Quick Connect”

–

An error message might show up, click OK

•

• In the connection window enter the

In the connection window enter the

Host Name

and

User Name

:

•

(28)

Connecting to UH Servers

•

• Host Name:

Host Name:

–

UH server:

uhunix2.its.

hawaii

.

edu

–

UHH server:

www.

uhh

.

hawaii

.

edu

•

• User Name:

User Name:

–

Your UH account name:

accountname

(29)

Finding the Correct Folders

•

• Local Machine

Local Machine

–

Windows

-

like navigation

•

• Web Server

Web Server

–

Navigate to the public_html folder

–

public_html contains the files and directories

for your website

(30)

(31)

Let’s Try It Out

(32)

Useful Tips

•

Indent your source code. Much easier to read, easier to find codIndent your source code. Much easier to read, easier to find code errorse errors

–

– Indentation helps a lot especially when there are nested tags (eIndentation helps a lot especially when there are nested tags (e.g. tables).g. tables)

•

Use white space in your source code. Not recognized by the browsUse white space in your source code. Not recognized by the browsers; code ers; code is easier to read is easier to read <html> <html> <head> <head>

<title>My First Web Page</title>

</head>

<body>

<h1>This Is My First Web Page</h1>

<p>The first paragraph comes here.

</p> </p> </body> </body> </html> </html>

(33)

Useful Tips

(Continued)

•

When you insert an opening HTML tag, insert the closing one righWhen you insert an opening HTML tag, insert the closing one right away, t away, then come back and fill in the contents in

then come back and fill in the contents in--betweenbetween –

– If the page looks distorted or contents is missing or misplaced,If the page looks distorted or contents is missing or misplaced, check check your tag pairs. Make sure every opening tag has a matching closi

your tag pairs. Make sure every opening tag has a matching closing one ng one at the right place.

at the right place.

•

Keep an upKeep an up--toto--date copy of the website files on your local machinedate copy of the website files on your local machine

•

If you are involved in maintaining a web site with or for the UnIf you are involved in maintaining a web site with or for the University, iversity, please be advised that you are required by federal law to ensure

please be advised that you are required by federal law to ensure your site your site meets accessibility guidelines

meets accessibility guidelines

http://www.webaim.org/standards/508/checklist

•

A copy of this presentation is available at:

http://www.uhh.hawaii.edu/~sdalhelp/tutorials.

(34)

HTML Online Resources

•

• A beginner’s Guide to HTML:A beginner’s Guide to HTML: http://archive.

http://archive.ncsancsa..uiucuiuc..eduedu/General/Internet/WWW//General/Internet/WWW/HTMLPrimerAllHTMLPrimerAll.html.html

•

• Practice your HTML at: Practice your HTML at:

http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic http://www.w3schools.com/html/tryit.asp?filename=tryhtml_basic

•

• HTML tag reference: HTML tag reference: http://www.w3schools.com/html/html_reference.asphttp://www.w3schools.com/html/html_reference.asp

•

• Macromedia Macromedia DreamweaverDreamweaver::

http://www.macromedia.com/software/

http://www.macromedia.com/software/dreamweaverdreamweaver

•

• Download SSH Secure Shell:Download SSH Secure Shell:

http://www.hawaii.edu/help/software/pc/ssh.html http://www.hawaii.edu/help/software/pc/ssh.html

•

• CSS CSS –– Cascading Cascading StylesheetsStylesheets::

http://www.w3schools.com/css/default.asp http://www.w3schools.com/css/default.asp

(35)

Dreamweaver

Available

_Available

•

Dreamweaver Dreamweaver is available for use on one of our computers in room is available for use on one of our computers in room K274A. Please e

K274A. Please e--mail us at mail us at [email protected]@hawaii.edu if you would like if you would like access to Macromedia

(36)

Questions?