1 / 33

I1101: Intro to Informatics & Computing

I1101: Intro to Informatics & Computing. Week 1 - Lab 2. Week 1 - Lab 2 Overview. Understand what HTML is Begin to use basic HTML Begin to use a file transfer utility. Google it!!!. Where was HTML developed? For what specific purpose was in created?. HTML tags (basics).

velma
Télécharger la présentation

I1101: Intro to Informatics & Computing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. I1101: Intro to Informatics & Computing Week 1 - Lab 2

  2. Week 1 - Lab 2 Overview • Understand what HTML is • Begin to use basic HTML • Begin to use a file transfer utility

  3. Google it!!! • Where was HTML developed? • For what specific purpose was in created?

  4. HTML tags (basics) • Each tag name is normally associated with it’s purpose • For example: <body> tag shows where the viewable area of the HTML page is. • The majority of HTML tags have an “opening” and “closing” • For example: <body> </body> “body of the webpage ENDS here” “body of the webpage BEGINS here”

  5. HTML tags (basics) • Tags generally go around what you want to effect • For example: <strong> written content on a webpage </strong> • Tags are ALWAYS in lowercase • Tags nest – Russian nesting dolls – Order matters! • Remember to close tags in appropriate places “begin making this text bold” “stop making this text bold”

  6. The “basic” HTML skeleton <html> <head> <title> Title of the Webpage </title> </head> <body> CONTENT GOES HERE </body> </html>

  7. Creating HTML document • There are several ways to create new HTML documents. We like to start from scratch… • Open “NOTEPAD” and create a new document (plain “Notepad”) – we will be using other programs in the future • In the new document, recreate the basic HTML skeleton. • Within the <title> tags, type: “Week 1 – Lab 2” • Save your document to the DESKTOP as “w1lab2.html” • Saving your file EXACTLY as it is shown in lab is CRUCIAL so that it is graded properly • Save OFTEN and ALWAYS • Go to your DESKTOP and open your “w1lab2.html” page in your favorite browser (right click and “open with”)

  8. File location logistics… • When your HTML page is saved to your DESKTOP, it is called a “local copy” – it ONLY exists on the physical machine you are working on. • When you opened it in the web browser, where an web address would normally be, what is there? Why? • When you are working on webpages, you should always work on them from your DESKTOP or locally. Working directly on a server or other storage device (thumb drive etc…) can be dangerous should something go wrong…

  9. File location logistics cont… • When your HTML file is located on a web server, the browser goes to the server and pulls up the specific file that you are asking to view from the location you tell it to. • For example: http://website.com/foldername/filename.extension • So… what folder and file are these pulling up? http://website.com/photos/puppy.jpg http://website.com/iu/papers/w131.docx

  10. WIN SCP • We use programs such as WINSCP to transfer our work to Mercury • Click on START  ALL PROGRAMS  COMMUNICATIONS WinSCP

  11. Log in to Mercury • HOST NAME: mercury.uits.indiana.edu • USERNAME: YOUR IU username • PASSWORD: YOUR IU passphrase

  12. You should see something similar…

  13. What is this?

  14. YOUR COMPUTER FOLDERS AND FILES “LOCAL FILES”

  15. YOUR MERCURY ACCOUNT FOLDERS AND FILES

  16. Now to set up your account… • CLICK on “Open session in PuTTY”

  17. You should see something like this…

  18. After entering your password…

  19. Type: “spinweb” and press enter

  20. Spinweb By running the spinweb command you have created a directory named /www where you can publish web pages to the internet. Later on in the class we’ll explore the terminal window in more detail. Go back to WinSCP and see if there’s a new folder on the Mercury side of the file transfer window…

  21. How to post a webpage… • Since you are working on your webpage locally (on your desktop), we need to transfer it to your Mercury account. • First thing we need to do is to start organizing our MERCURY account. • Directories are the same thing as Folders • Click on the “/www” directory that was just added • How do you know that you are in the “/www” directory? • Create a new folder called “i101” – it’s crucial that you type file names EXACTLY how they are listed in labs. • INSIDE of the “i101” folder, create another folder named “images” • Your instructors will come by and check to make sure that everyone has completed this step.

  22. How to post a webpage cont… • On “LOCAL” side of WinSCP, navigate to your DESKTOP • You should see your “w1lab2.html” file • To ensure that you have the most recent HTML file, click on the “refresh button” on the “LOCAL” side • Now… DRAG AND DROP! • Ensure that you are in the “/www/i101/” directory on the MERCURY side of WinSCP • Drag your “w1lab2.html” file from your LOCAL to your MERCURY side (essentially from your DESKTOP to “/www/i101” directory) • Your webpage is now uploaded to the server! • Go back to your PuTTy window and type in the “spinweb –r” command – this will ensure that all html files from here on out will be viewable

  23. How to view your webpage • Open up a new tab/new web browser window • Everyone’s URL is mostly the same: http://mypage.iu.edu/~username/i101/w1lab2.html • If you cannot see your page, ask one of the lab instructors for assistance.

  24. Now… let’s add more to our page! • Which copy of “w1lab2.html” should we edit? • If you do not already have notepad open, you can right click on the file and “open with  notepad” • You should see your basic HTML skeleton

  25. New HTML tags… • Paragraph (for written content) <p> content that I want in a paragraph </p> • Any content on your webpage MUST be associated with a tag, ESPECIALLY in regards to text – in order to be compliant with HTML standards. • You can think of the <p></p> as being a container of sorts – which will come up throughout our work with HTML • <p></p> works just like you would see in a book • <p></p> automatically adds a line break BEFORE and AFTER the text

  26. Let’s add some <p></p> • Create two (2) paragraphs in your “w1lab2.html” page • Where do you start typing the HTML? • Paragraph 1 should be about what your background is coming into the class • Where are you from? • What have your experiences been with technology? • Why did you take this class? • Paragraph 2 should be about your expectations for this class

  27. Save OFTEN & ALWAYS • Saving your work often is extremely important (the shortcut on a PC is “CTRL+S” and on a MAC is “COMMAND+S” • Save your HTML page and check to make sure it looks right. You do NOT have to upload it to Mercury to check it, you can check it locally…. How do you do this? • Do you see your 2 paragraphs?

  28. New HTML tags… • Header (for section titles, etc…) <h1> h1 is the LARGEST header size </h1> <h2> h2 is smaller than h1 </h2> <h3> h3 is smaller than h2 </h2> … • Headers ALSO add a line break before and after the content • What is the difference between the title of a webpage and a title within the webpage? (HINT: <title></title>)

  29. Adding some Headers • Go back to your “w1lab2.html” page in notepad • Add a heading size 1 with the content “Week 1 – Lab 2” above the first paragraph • Add a heading size 2 with the content “My background” above paragraph 1 that you just created • Add a heading size 2 with the content “My I101 Expectations” above your paragraph 2 that you just created • Save your work and check to make sure the page is viewable in a browser (remember it’s being saved to your DESKTOP)

  30. Thoughts about web content… • Now that you know a little about web pages, let’s take a moment to talk about appropriate content to be posted on personal webpages… • Your personal webpages are hosted on an IU server. • What do you think is appropriate? • What do you think is NOT appropriate? • Thoughts on phone numbers? Addresses? Email?

  31. For more HTML… • There are TONS of places where you can learn more about HTML • We will be spending several weeks on HTML but if you want more or extra help… • http://w3schools.org • http://htmldog.com • GOOGLE it!

  32. Lab Assignment: DUE Next Lab • Save and upload your “w1lab2.html” page and upload it to your “/www/i101” directory • Create a NEW HTML page named “index.html” using NOTEPAD • This page will be used to link to future lab assignments • To get full credit for the lab you must: • Make the title of the HTML page: “I101 Home Page” • A header size 1 at the top of your page that says “I101 Home Page” • ATLEAST 3 paragraphs: • A brief introduction of yourself • A brief introduction of the homepage • Why you enjoy being at IU/are excited to be at IU • A header size 2 for EACH of the paragraphs • A header size 2 at the BOTTOM of the page that says “I101 Labs” • Save and upload your “index.html” page to your “/www/i101” directory • Copy and Paste the URL that points to your “index.html” and “w1lab2.html” pages in the ONCOURSE submission box for Week1 Lab2 • IF the links are not there OR do not work, your assignment will be counted as being late.

  33. Rubric

More Related