1 / 14

Lab Five (With Panda!) Agenda

Lab Five (With Panda!) Agenda. Creating a Practice Web Page and Publishing It on the Web. Directory Structure. You’ve seen your H: space, where you can store information on an easily accessible “drive.” Your public_html folder is special in that files therein are available on the Web.

shadow
Download Presentation

Lab Five (With Panda!) Agenda

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. Lab Five (With Panda!) Agenda • Creating a Practice Web Page and Publishing It on the Web

  2. Directory Structure • You’ve seen your H: space, where you can store information on an easily accessible “drive.” • Your public_html folder is special in that files therein are available on the Web. • By now, you ought to have created an “images” folder INSIDE of the public_html folder to store images for your site using ALL LOWER CASE TEXT!

  3. Mom, Where Do Web Pages Come From? • More on image types and acquisition later: On to Web Pages! • There are, mainly, 3 ways to make Web pages: • Learning to write HTML code. • Using a WYSIWYG HTML editor, such as Dreamweaver or FrontPage. WYSIWYG stands for ‘what you see is what you get.’ • Finding inspiration from other sites – some Webmasters encourage you to copy their code and ask for a link back to their site. SOME DON’T!

  4. All About HTML • HTML is Hypertext Markup Language -- a set of instructions that tell a browser what to display on Web pages and in what format. • HTML files are plain text files, but with an “.html” ending in lieu of “.txt.” • HTML files must be “text only,” which removes all formatting, like font size, color, italics, etc. If you want to write HTML in Notepad, save as “text only.” The HTML tags control formatting. And ALWAYS put “.html” at the end of the filename.

  5. Panda Says: “Tag you’re it!” • HTML uses tags (<I’m a tag>) • Tags tell browsers what to do (e.g., change font, skip a line, etc.). • Tags are case-insensitive:<html>, <HTML>, an <hTmL> are interchangeable. • There are “beginning tags” — <center> and “end tags” — </center>. These “turn on” and “turn off” a function. • Tags must be nested – ABCCBA. In other words, tag sets must be entirely inside or outside another tag set.

  6. Time to Get on the Web First visit your Web page in a browser: http://www.unc.edu/~yourONYENWhat do you see? • Create a new document in Notepad • Click “Save As” • For file name: enter “test.html” • Save this file to your Web space: H:/public_html/ • You should now have two HTML files in your web space: index.html & test.html. Do you?

  7. The Test Page • Type the following: <HTML> <Head> <Title> Coming Soon… [your name]’s home page </Title> </Head> <body> Check back soon for my new Web page. </body> </HTML> • Save the file again – the name is still test.html.

  8. Preview Your Web Page • In your browser, go to http://www.unc.edu/~yourONYEN/test.html • What do you see? • Take a look at the source code by going to View >> View Source (IE) or View >> Page Source (Mozilla) • Amazing? What a time to be alive! The Panda is impressed.

  9. Publishing Your Page • If an HTML file is saved onto a computer,is it published to the Web? No. • Your HTML files have to be uploaded onto a server so others may see your Web pages. • When you save to the H:/ drive, “public_html” folder, you are saving your HTML file directly onto the UNC server. • The other way to upload an HTML file is to use an FTP program. On the lab computers, this program is called SSH Secure Shell Secure Transfer Client. On your own computers, you can use WS_FTP, downloadable from shareware.unc.edu. Visit help.unc.edu to see how to use these programs.

  10. More HTML <Tag> Review • Tags are required for every page • <html>all of your page info</html> • <head>title tags </head> • <title>page title </title> (Inside of <head> tags) • <body>contents of page </body> • Your code must have beginning tags and end tags!

  11. Some Useful Attribute <Tags> Attributes give your page personality. Try using some of these on your test page: • Headings: <h1> text </h1> • Bold type: <b> text </b> • Italics: <i> text </i> • Font size: <font size=+2> text </font> • Paragraph: <p> • Horizontal Rule: <hr>

  12. More Useful <Tags> There are two types of link tags: • A tag for a hotlink to another Web page:<a href=“http://www.unc.edu”>The University of North Carolina</a> • A tag for a mail link that opens a new e-mail message to the recipient:<a href=“mailto:name@server.com”>name</a>

  13. Making the page pretty • Formatting instructions for the page go in the <body> tag. For example, add a background color to your page with <body bgcolor=COLOR> using basic colors or codes from http://www.lynda.com/hexh.html . • To put a picture on your Web page, the code should be: <img src=“images/file_name.jpg”>(assuming your file is a .jpg stored in /public_html/images/ -- which it should be!)

  14. For Next Time • Complete the HTML page assignment (Due at the beginning of the 8 June class). • Start thinking about your future site’s design. • Save graphics and images you’ll use in your images folder. • Get ready for Dreamweaver! • Do assigned reading in preparation for discussion. • Say goodbye to the Panda!

More Related