How To Create Personal Web Pages On My Web

How to Create Personal WebPages

on MyWeb

By: Sriti Kumar

BY: ACM-W

ACM-W @ UGA

MyWeb

• MyWeb is a part of MyDrive, which provides an Internet-accessible file storage repository for UGA students, faculty, and staff.

• 100 MB storage capacity for each user

(Is it enough ?? )

Upload on MyWeb

• Multiple ways to upload/download your files and folders– Web Access (via https)– Secure FTP® (via FTPS)– WebDrive® (via secure WebDav)

How to Access the MyWeb

• myid.myweb.uga.edu

where myid is your MyID.

Steps to Access MyWeb

Step 1: Go to https://my.uga.edu/

Step 2: Login

Step 3: Left hand side Resources, click on

MyWeb

Step 4: Login to MyDrive using MyID

Step 5: Click on Home@UGA

Step 6: Click on www

Steps to Upload on MyDrive

Step 1: Goto File -> Upload

Step 2: A new window will open, uncheck the “Overwrite existing files” tab

Step 3: Click “Choose file” and choose file which you want to upload.

Step 4: Click “Upload”

Note: If you want to upload more than one File click on “plus” sign in the new window.

Access files on MyDrive

• Open browser like Internet Explorer or Firefox

• Type http://myid.myweb.uga.edu/filename.ext

myid: UGA MyID

Like:

Flyer.doc

Flyer.pdf

http://myid.myweb.uga.edu/filename.ext

WebSite Vs. WebPage

• A Web site is made up of a home page and usually a number of Web pages

For e.g. www.yahoo.com or www.cs.uga.edu

Vs.• A web page or webpage is a document or

resource of information that is suitable for the World Wide Web and can be accessed through a web browser and displayed on a computer screen.

Web Page

• A web page is a document connected to the World Wide Web and viewable by anyone connected to the internet who has a web browser.

e.g. www.cs.uga.edu/index.html

• This information is usually in HTML

Just Enough HTML

Why Bother with HTML basics ?

– To understand how the web works.

– To use free Web tools.

– To work directly in HTML.

Viewing HTML documents

Step 1: Go to WebPage

Step 2: On the top tab choose View->Source

(The command displays the HTML source code that underlies the web-page).

OR

Step 1: Go to Web Page

Step 2: Press Ctrl+U

Creating HTML document

Step 1: Open NotePad

(Goto Start -> All Programs->Accessories -> Notepad)

Step 2: Now Save it …

Goto File->Save As -> Select Desktop(on left panel) -> Type File name as index.html

Ten key HTML tags + one

• <Head>,</Head>– Put these tags around the <title> and </title> tags at

the start of the document.

• <Title>,</Title>– Put these tags around the short title that describes

the document but doesn’t

• <Body>,</Body>– After you add the <Title> and <Head> tags to the

end the title and header area, you surround everything else in <Body>,</Body> tags.


• <H1>,</H1>,<H2>,</H2> …..– The <h1> to <h6> tags are used to define

HTML headings. – <h1> defines the largest heading and <h6>

defines the smallest heading.

• <B>,</B>– Surround text you want to display in bold with

these tags.


• <I>,</I>– Surround text you want to display in italics with these

tags.

• <P>,</P>– The <p> tag defines a paragraph.– The p element automatically creates some space

before and after itself. The space is automatically applied by the browser, or you can specify it in a style sheet.

• <br>– The <br> tag inserts a single line break.


• <HR>– The <hr> tag creates a horizontal line in an HTML

page.– The hr element can be used to separate content in an

HTML page.

• <A>,</A>– The <a> tag defines an anchor. An anchor can be

used in two ways:• To create a link to another document, by using the href

attribute• To create a bookmark inside a document, by using the name

attribute. The a element is usually referred to as a link or a hyperlink.


• <A HREF=http://www.cs.uga.edu>Computer Science </A>– HREF indicates a hypertext reference. The line text

“Computer Science” the user sees the text.

• <IMG SRC=“Image1.gif” alt=“Sample”/>– The <img> tag embeds an image in an HTML page.– The <img> tag has two required attributes:– src : Specifies the URL of an image – alt : Specifies an alternate text for an image

http://www.cs.uga.edu/

http://www.cs.uga.edu/

First HTML Page

<HTML><HEAD><TITLE>A Brief Introduction to Web

Development</TITLE><BODY>HELLO WORLD !! </BODY></HTML>

Lets Make Header

• Lets see different header sizes <Body><H1> This is Header 1</H1><H2> This is Header 2</H2><H3> This is Header 3</H3><H4> This is Header 4</H4><H5> This is Header 5</H5><H6> This is Header 6</H6></Body>

Lets Make Letters Bold<body> <b>This text is bold</b> <br /> <strong>This text is strong </strong> <br /><big>This text is big </big> <br /> <em>This text is emphasized </em> <br /> <i>This text is italic </i> <br /> <small>This text is small </small> <br />This text contains <sub>subscript</sub> <br />This text contains <sup>superscript</sup></body>

Lets Make Paragraph

<html> <body> <p>This is a paragraph.</p> <pre>Text in a pre element is displayed in a fixed-width font, and itpreserves both spaces and line breaks

</pre> </body></html>

Lets Make Table• <Table>,</Table>

– The <table> tag defines an HTML table.– A simple HTML table consists of the table

element and one or more tr, th, and td elements.

– The tr element defines a table row,

the th element defines a table header,

and the td element defines a table cell.

http://www.w3schools.com/TAGS/tag_tr.asp

http://www.w3schools.com/TAGS/tag_th.asp

http://www.w3schools.com/TAGS/tag_td.asp

Lets Make Table<html><body> <table border="1"> <tr>

<th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body></html>

Lets Make List

• Unordered List <Ul>,</Ul>

<html> <body> <h4>An Unordered List:</h4>

<ul> <li>Coffee</li> <li>Tea</li> <li>Milk</li>

</ul> </body> </html>

Lets Make List• Ordered List <Ol>,</Ol>

<html> <body> <h4>An Ordered List:</h4>

<ol> <li>Coffee</li> <li>Tea</li> <li>Milk</li>

</ol> </body> </html>

Lets Format Images

• The <img> tag embeds an image in an HTML page.

• Properties– Next Page

Attribute Value Description

align topbottommiddleleftright

Deprecated. Use styles instead.Specifies the alignment of an image according to surrounding elements

border pixels Deprecated. Use styles instead.Specifies the width of the border around an image

height pixels Specifies the height of an image

hspace pixels Deprecated. Use styles instead.Specifies the whitespace on left and right side of an image

vspace pixels Deprecated. Use styles instead.Specifies the whitespace on top and bottom of an image

width pixels Specifies the width of an image STF

http://www.w3schools.com/TAGS/att_img_align.asp

http://www.w3schools.com/TAGS/att_img_border.asp

http://www.w3schools.com/TAGS/att_img_height.asp

Formatting Image <html> <body> <img src="angry.gif" alt="Angry face" border="5" width="32" height="32" />

<p><img src="angry.gif" alt="Angry face" align="middle“ width="50" height="50" />

<p><img src="angry.gif" alt="Angry face" width="200" hspace="20" height="200" />

</body> </html>

How to Access Documents in Hypertext

• Document on a different server– <A HREF="http://www.edu/st/file.html">A file</A>

• Document in same directory– <A HREF="file.html">A file</A>

• Documents in different directory– <A HREF=“Personal/Resume">Resume</A>

• Documents in different directory(absolute addressing)– <A HREF=“/Maya/Personal/Resume">Resume</A>

Resources

• How to Make Website – www.cs.uga.edu/~sriti/seminar.html

• HTML tutorial– http://www.w3schools.com/html/default.asp – http://www.davesite.com/webstation/html/

index.shtml – http://www.accessv.com/~email/webpages/

Sample HTML Template

• http://www.quackit.com/html/templates/download/simple/087.zip

• http://www.w3schools.com/Html/html_examples.asp

• http://www.quackit.com/html/templates/

Design

How To Create Personal Web Pages On My Web