How To Create Personal Web Pages On My Web


Published on

This tutorial is an introduction to HTML pages and how to create webpages using HTML on the UGA webserver.

Published in: Design, Technology
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

How To Create Personal Web Pages On My Web

  1. 1. How to Create Personal WebPages on MyWeb By: Sriti Kumar BY: ACM-W ACM-W @ UGA
  2. 2. MyWeb <ul><li>MyWeb is a part of MyDrive, which provides an Internet-accessible file storage repository for UGA students, faculty, and staff.  </li></ul><ul><li>100 MB storage capacity for each user </li></ul><ul><li>(Is it enough ?? ) </li></ul>
  3. 3. Upload on MyWeb <ul><li>Multiple ways to upload/download your files and folders </li></ul><ul><ul><li>Web Access (via https) </li></ul></ul><ul><ul><li>Secure FTP® (via FTPS) </li></ul></ul><ul><ul><li>WebDrive® (via secure WebDav) </li></ul></ul>
  4. 4. How to Access the MyWeb <ul><li>myid </li></ul><ul><li> where  myid  is your MyID. </li></ul>
  5. 5. Steps to Access MyWeb <ul><li>Step 1: Go to </li></ul><ul><li>Step 2: Login </li></ul><ul><li>Step 3: Left hand side Resources, click on </li></ul><ul><li> MyWeb </li></ul><ul><li>Step 4: Login to MyDrive using MyID </li></ul><ul><li>Step 5: Click on Home@UGA </li></ul><ul><li>Step 6: Click on www </li></ul>
  6. 6. Steps to Upload on MyDrive <ul><li>Step 1: Goto File -> Upload </li></ul><ul><li>Step 2: A new window will open, uncheck the “Overwrite existing files” tab </li></ul><ul><li>Step 3: Click “Choose file” and choose file which you want to upload. </li></ul><ul><li>Step 4: Click “Upload” </li></ul><ul><li>Note: If you want to upload more than one File click on “plus” sign in the new window. </li></ul>
  7. 7. Access files on MyDrive <ul><li>Open browser like Internet Explorer or Firefox </li></ul><ul><li>Type </li></ul><ul><li>myid: UGA MyID </li></ul><ul><li>Like: </li></ul><ul><li>Flyer.doc </li></ul><ul><li>Flyer.pdf </li></ul>
  8. 8. WebSite Vs. WebPage <ul><li>A Web site is made up of a home page and usually a number of Web pages </li></ul><ul><li>For e.g. or </li></ul><ul><li>Vs. </li></ul><ul><li>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. </li></ul>
  9. 9. Web Page <ul><li>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. </li></ul><ul><li>e.g. </li></ul><ul><li>This information is usually in HTML </li></ul>
  10. 11. Just Enough HTML <ul><li>Why Bother with HTML basics ? </li></ul><ul><ul><li>To understand how the web works. </li></ul></ul><ul><ul><li>To use free Web tools. </li></ul></ul><ul><ul><li>To work directly in HTML. </li></ul></ul>
  11. 12. Viewing HTML documents <ul><li>Step 1: Go to WebPage </li></ul><ul><li>Step 2: On the top tab choose View->Source </li></ul><ul><li>(The command displays the HTML source code that underlies the web-page). </li></ul><ul><li>OR </li></ul><ul><li>Step 1: Go to Web Page </li></ul><ul><li>Step 2: Press Ctrl+U </li></ul>
  12. 13. Creating HTML document <ul><li>Step 1: Open NotePad </li></ul><ul><li>(Goto Start -> All Programs->Accessories -> Notepad) </li></ul><ul><li>Step 2: Now Save it … </li></ul><ul><li>Goto File->Save As -> Select Desktop(on left panel) -> Type File name as index.html </li></ul>
  13. 14. Ten key HTML tags + one <ul><li><Head>,</Head> </li></ul><ul><ul><li>Put these tags around the <title> and </title> tags at the start of the document. </li></ul></ul><ul><li><Title>,</Title> </li></ul><ul><ul><li>Put these tags around the short title that describes the document but doesn’t </li></ul></ul><ul><li><Body>,</Body> </li></ul><ul><ul><li>After you add the <Title> and <Head> tags to the end the title and header area, you surround everything else in <Body>,</Body> tags. </li></ul></ul>
  14. 15. Ten key HTML tags + one <ul><li><H1>,</H1>,<H2>,</H2> ….. </li></ul><ul><ul><li>The <h1> to <h6> tags are used to define HTML headings. </li></ul></ul><ul><ul><li><h1> defines the largest heading and <h6> defines the smallest heading. </li></ul></ul><ul><li><B>,</B> </li></ul><ul><ul><li>Surround text you want to display in bold with these tags. </li></ul></ul>
  15. 16. Ten key HTML tags + one <ul><li><I>,</I> </li></ul><ul><ul><li>Surround text you want to display in italics with these tags. </li></ul></ul><ul><li><P>,</P> </li></ul><ul><ul><li>The <p> tag defines a paragraph. </li></ul></ul><ul><ul><li>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. </li></ul></ul><ul><li><br> </li></ul><ul><ul><li>The <br> tag inserts a single line break.  </li></ul></ul>
  16. 17. Ten key HTML tags + one <ul><li><HR> </li></ul><ul><ul><li>The <hr> tag creates a horizontal line in an HTML page. </li></ul></ul><ul><ul><li>The hr element can be used to separate content in an HTML page. </li></ul></ul><ul><li><A>,</A> </li></ul><ul><ul><li>The <a> tag defines an anchor. An anchor can be used in two ways: </li></ul></ul><ul><ul><ul><li>To create a link to another document, by using the href attribute </li></ul></ul></ul><ul><ul><ul><li>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. </li></ul></ul></ul>
  17. 18. Ten key HTML tags + one <ul><li><A HREF= http:// >Computer Science </A> </li></ul><ul><ul><li>HREF indicates a hypertext reference. The line text “Computer Science” the user sees the text. </li></ul></ul><ul><li><IMG SRC=“Image1.gif” alt=“Sample”/> </li></ul><ul><ul><li>The <img> tag embeds an image in an HTML page. </li></ul></ul><ul><ul><li>The <img> tag has two required attributes: </li></ul></ul><ul><ul><li>src : Specifies the URL of an image </li></ul></ul><ul><ul><li>alt : Specifies an alternate text for an image </li></ul></ul>
  18. 19. First HTML Page <ul><li><HTML> </li></ul><ul><li><HEAD> </li></ul><ul><li><TITLE>A Brief Introduction to Web Development</TITLE> </li></ul><ul><li><BODY> </li></ul><ul><li>HELLO WORLD !!  </li></ul><ul><li></BODY> </li></ul><ul><li></HTML> </li></ul>
  19. 20. Lets Make Header <ul><li>Lets see different header sizes </li></ul><ul><li><Body> </li></ul><ul><li><H1> This is Header 1</H1> </li></ul><ul><li><H2> This is Header 2</H2> </li></ul><ul><li><H3> This is Header 3</H3> </li></ul><ul><li><H4> This is Header 4</H4> </li></ul><ul><li><H5> This is Header 5</H5> </li></ul><ul><li><H6> This is Header 6</H6> </li></ul><ul><li></Body> </li></ul>
  20. 21. 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>
  21. 22. 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 it preserves both spaces and line breaks </pre> </body> </html>
  22. 23. Lets Make Table <ul><li><Table>,</Table> </li></ul><ul><ul><li>The <table> tag defines an HTML table. </li></ul></ul><ul><ul><li>A simple HTML table consists of the table element and one or more  tr ,  th , and  td  elements. </li></ul></ul><ul><ul><li>The tr element defines a table row, </li></ul></ul><ul><ul><li>the th element defines a table header, </li></ul></ul><ul><ul><li>and the td element defines a table cell. </li></ul></ul>
  23. 24. Lets Make Table <html> <body> <table border=&quot;1&quot;> <tr> <th>Month</th> <th>Savings</th> </tr> <tr> <td>January</td> <td>$100</td> </tr> </table> </body> </html>
  24. 25. Lets Make List <ul><li>Unordered List <Ul>,</Ul> </li></ul><html> <body> <h4>An Unordered List:</h4> <ul> <li> Coffee </li> <li> Tea </li> <li> Milk </li> </ul> </body> </html>
  25. 26. Lets Make List <ul><li>Ordered List <Ol>,</Ol> </li></ul><html> <body> <h4>An Ordered List:</h4> <ol> <li> Coffee </li> <li> Tea </li> <li> Milk </li> </ol> </body> </html>
  26. 27. Lets Format Images <ul><li>The <img> tag embeds an image in an HTML page. </li></ul><ul><li>Properties </li></ul><ul><ul><li>Next Page </li></ul></ul>
  27. 28. STF Specifies the width of an image pixels width Deprecated. Use styles instead. Specifies the whitespace on top and bottom of an image pixels vspace Deprecated. Use styles instead. Specifies the whitespace on left and right side of an image pixels hspace Specifies the height of an image pixels height Deprecated. Use styles instead. Specifies the width of the border around an image pixels border Deprecated. Use styles instead. Specifies the alignment of an image according to surrounding elements top bottom middle left right align Description Value Attribute
  28. 29. Formatting Image <html> <body> <img src=&quot;angry.gif&quot; alt=&quot;Angry face&quot; border=&quot;5&quot; width=&quot;32&quot; height=&quot;32&quot; /> <p> <img src=&quot;angry.gif&quot; alt=&quot;Angry face&quot; align =&quot;middle“ width=&quot;50&quot; height=&quot;50&quot; /> <p> <img src=&quot;angry.gif&quot; alt=&quot;Angry face&quot; width=&quot;200&quot; hspace =&quot;20&quot; height=&quot;200&quot; /> </body> </html>
  29. 30. How to Access Documents in Hypertext <ul><li>Document on a different server </li></ul><ul><ul><li><A HREF=&quot;;>A file</A> </li></ul></ul><ul><li>Document in same directory </li></ul><ul><ul><li><A HREF=&quot;file.html&quot;>A file</A> </li></ul></ul><ul><li>Documents in different directory </li></ul><ul><ul><li><A HREF=“Personal/Resume&quot;>Resume</A> </li></ul></ul><ul><li>Documents in different directory(absolute addressing) </li></ul><ul><ul><li><A HREF=“/Maya/Personal/Resume&quot;>Resume</A> </li></ul></ul>
  30. 31. Resources <ul><li>How to Make Website </li></ul><ul><ul><li> </li></ul></ul><ul><li>HTML tutorial </li></ul><ul><ul><li> </li></ul></ul><ul><ul><li>http:// </li></ul></ul><ul><ul><li>http:// / </li></ul></ul>
  31. 32. Sample HTML Template <ul><li> </li></ul><ul><li> </li></ul><ul><li>http:// /html/templates/ </li></ul>