lecture 2 building web pages 1 lecture 2 building web pages languages and programs html - hyper...
TRANSCRIPT
![Page 1: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/1.jpg)
Lecture 2 Building Web Pages 1
Lecture 2
Building Web pages Languages and programs
HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft Front Page Dreamweaver Word
![Page 2: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/2.jpg)
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
![Page 3: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/3.jpg)
Lecture 2 Building Web Pages 3
Use word to create a file and save it as a ‘web page’ File --- Save as
Use Word to make a web page
![Page 4: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/4.jpg)
Lecture 2 Building Web Pages 4
Word’s html codeFrom Wordpad (or Notepad) open the word htm file called
wordhtmltest.htm
Pretty messy looking html.
![Page 5: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/5.jpg)
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.
![Page 6: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/6.jpg)
Lecture 2 Building Web Pages 6
htmltest.htm in Browsers
Netscape 4.7Netscape 7.0
Internet Explorer 5.5/6.2 Mozilla 1.0
![Page 7: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/7.jpg)
Lecture 2 Building Web Pages 7
Conclusions?
Keep it simple.A little html knowledge goes a long way.
![Page 8: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/8.jpg)
Lecture 2 Building Web Pages 8
How to open your www accountgo to: http://www.lehigh.edu/account
enter username and password
click here: W3Setup
![Page 9: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/9.jpg)
Lecture 2 Building Web Pages 9
Entering your password is all you
need to do.
![Page 10: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/10.jpg)
Lecture 2 Building Web Pages 10
What we want for pa1:
![Page 11: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/11.jpg)
Lecture 2 Building Web Pages 11
Using Wordpad to create a file called index.html and save it to your desktop folder.
Enter the text shown here.
A great place to learn more about what tags are is:http://www.htmlclinic.com
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.
![Page 12: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/12.jpg)
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.
<tr> means new row and <td> means next table cell
<center> means center and <br> means line break.
table tag must be closed
Text entry
![Page 13: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/13.jpg)
Lecture 2 Building Web Pages 13
Save your file and take a look at it (open it) in a browser.
So far so good!
![Page 14: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/14.jpg)
Lecture 2 Building Web Pages 14
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.
An Image
![Page 15: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/15.jpg)
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.
![Page 16: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/16.jpg)
Lecture 2 Building Web Pages 16
Save your file and take a look at it (open it) in a browser.
So far so good!
![Page 17: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/17.jpg)
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.
![Page 18: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/18.jpg)
Lecture 2 Building Web Pages 18
Insert a link with the action word: mailto:[email protected], where xxxx is your four digit id.
Email Link
![Page 19: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/19.jpg)
Lecture 2 Building Web Pages 19
Looking Good!
![Page 20: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/20.jpg)
Lecture 2 Building Web Pages 20
Upload files
![Page 21: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/21.jpg)
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
![Page 22: Lecture 2 Building Web Pages 1 Lecture 2 Building Web pages Languages and programs HTML - Hyper Text Markup Language Netscape’s Composer MicroSoft](https://reader036.vdocuments.us/reader036/viewer/2022081603/56649ea35503460f94ba74c1/html5/thumbnails/22.jpg)
Lecture 2 Building Web Pages 22
pa1 requirements – 20 points
The page must appear when entering www.lehigh.edu/~xxxx
Name and addressA pictureYour resume link Your favorite link Your email button