1 / 22

Lecture 2

Lecture 2. Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft Front Page Dreamweaver Word. Keep it simple. Word can save a file as a web page file (html) Word is familiar to you, but it creates complex and nonstandard html code

glora
Download Presentation

Lecture 2

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. Lecture 2 • Building Web pages • Languages and programs • HTML - Hyper Text Markup Language • Netscape’s Composer • MicroSoft Front Page • Dreamweaver • Word Lecture 2 Building Web Pages

  2. Keep it simple • Word can save a file as a web page file (html) • Word is familiar to you, but it creates complex and nonstandard html code • Netscape’s Composer • Easy to learn and very simple html code, but not very powerful • Straight HTML • Lots of syntax to learn but the best way understand what is happening • Front Page • Easy to use • Available on LAN and part of MS package • More sophisticated than Composer • Recommended for you after you use HTML • Dreamweaver • Excellent when working with a large site. • Similar to FrontPage, but more complicated and more powerful Lecture 2 Building Web Pages

  3. Use Word to make a web page Use word to create a file and save it as a ‘web page’ File --- Save as Lecture 2 Building Web Pages

  4. Word’s html code From Wordpad (or Notepad) open the word htm file called wordhtmltest.htm Pretty messy looking html. Lecture 2 Building Web Pages

  5. Use Wordpad (or Notepad) to create an htm file: Start – Programs – Accessories - Wordpad If you are using Wordpad, you must save the file as a text document, making sure you explicitly type the name and the extension in the filename line. Wordpad has more saving options than Notepad, so be careful to save the file correctly. Lecture 2 Building Web Pages

  6. Netscape 4.7 Netscape 7.0 Mozilla 1.0 Internet Explorer 5.5/6.2 htmltest.htm in Browsers Lecture 2 Building Web Pages

  7. Conclusions? • Keep it simple. • A little html knowledge goes a long way. Lecture 2 Building Web Pages

  8. How to open your www account go to: http://www.lehigh.edu/account enter username and password click here: W3Setup Lecture 2 Building Web Pages

  9. Entering your password is all you need to do. Lecture 2 Building Web Pages

  10. What we want for pa1: Lecture 2 Building Web Pages

  11. Using Wordpad to create a file called index.html and save it to your desktop folder. Remember: If you are using Wordpad, you must save the file as a text document, making sure you explicitly type the name and the extension in the filename line. Enter the text shown here. A great place to learn more about what tags are is:http://www.htmlclinic.com Lecture 2 Building Web Pages

  12. In the body tag area, we will create a table of one column and width of 100% of the browser window. Text entry <tr> means new row and <td> means next table cell <center> means center and <br> means line break. table tag must be closed Lecture 2 Building Web Pages

  13. Save your file and take a look at it (open it) in a browser. So far so good! Lecture 2 Building Web Pages

  14. An Image In the body tag area, add another row to the table and insert an image. An image needs a source SRC=“yourpicture.jpg”, and dimensions of height and width (in pixels). You have to have an image in the same folder as your index.html file! Go get one if you don’t have one. Lecture 2 Building Web Pages

  15. Resume Link Insert a link to a Word file that is called resume.doc. <a href is an anchor tag to a hypertext link. The words My Resume will be seen on the page. Make sure you have a document named resume.doc in your local folder. Lecture 2 Building Web Pages

  16. Save your file and take a look at it (open it) in a browser. So far so good! Lecture 2 Building Web Pages

  17. Favorite Link Insert a link to a external www location. This is identical to the document link, but we now enter a location on the web, rather than a file name. Lecture 2 Building Web Pages

  18. Email Link Insert a link with the action word: mailto:xxxx@lehigh.edu, where xxxx is your four digit id. Lecture 2 Building Web Pages

  19. Looking Good! Lecture 2 Building Web Pages

  20. Upload files Lecture 2 Building Web Pages

  21. To Edit your page • Download the index.html file from ws2 using SSH • Make changes in Notepad, or FrontPage, or Dreamweaver • Upload the page back to ws2 using SSH Lecture 2 Building Web Pages

  22. pa1 requirements – 20 points • The page must appear when entering www.lehigh.edu/~xxxx • Name and address • A picture • Your resume link • Your favorite link • Your email button Lecture 2 Building Web Pages

More Related