How To Create Personal Web Pages On My Web
-
Upload
sritikumar -
Category
Design
-
view
1.213 -
download
0
description
Transcript of How To Create Personal Web Pages On My Web
![Page 1: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/1.jpg)
How to Create Personal WebPages
on MyWeb
By: Sriti Kumar
BY: ACM-W
ACM-W @ UGA
![Page 2: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/2.jpg)
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 ?? )
![Page 3: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/3.jpg)
Upload on MyWeb
• Multiple ways to upload/download your files and folders– Web Access (via https)– Secure FTP® (via FTPS)– WebDrive® (via secure WebDav)
![Page 4: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/4.jpg)
How to Access the MyWeb
• myid.myweb.uga.edu
where myid is your MyID.
![Page 5: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/5.jpg)
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
![Page 6: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/6.jpg)
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.
![Page 7: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/7.jpg)
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
![Page 8: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/8.jpg)
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.
![Page 9: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/9.jpg)
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
![Page 10: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/10.jpg)
![Page 11: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/11.jpg)
Just Enough HTML
Why Bother with HTML basics ?
– To understand how the web works.
– To use free Web tools.
– To work directly in HTML.
![Page 12: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/12.jpg)
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
![Page 13: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/13.jpg)
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
![Page 14: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/14.jpg)
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.
![Page 15: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/15.jpg)
Ten key HTML tags + one
• <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.
![Page 16: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/16.jpg)
Ten key HTML tags + one
• <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.
![Page 17: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/17.jpg)
Ten key HTML tags + one
• <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.
![Page 18: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/18.jpg)
Ten key HTML tags + one
• <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
![Page 19: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/19.jpg)
First HTML Page
<HTML><HEAD><TITLE>A Brief Introduction to Web
Development</TITLE><BODY>HELLO WORLD !! </BODY></HTML>
![Page 20: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/20.jpg)
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>
![Page 21: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/21.jpg)
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>
![Page 22: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/22.jpg)
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>
![Page 23: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/23.jpg)
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.
![Page 24: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/24.jpg)
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>
![Page 25: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/25.jpg)
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>
![Page 26: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/26.jpg)
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>
![Page 27: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/27.jpg)
Lets Format Images
• The <img> tag embeds an image in an HTML page.
• Properties– Next Page
![Page 28: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/28.jpg)
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
![Page 29: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/29.jpg)
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>
![Page 30: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/30.jpg)
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>
![Page 31: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/31.jpg)
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/
![Page 32: How To Create Personal Web Pages On My Web](https://reader035.fdocuments.us/reader035/viewer/2022062418/55584292d8b42acb078b5144/html5/thumbnails/32.jpg)
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/