View
1.213
Download
0
Category
Preview:
DESCRIPTION
This tutorial is an introduction to HTML pages and how to create webpages using HTML on the UGA webserver.
Citation preview
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
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.
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.
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.
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.
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
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.
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
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/
Recommended