basic web page design. text book: html, xhtml, and css: visual quickstart guide, sixth edition...

8
Basic Web Page Design

Upload: gladys-bailey

Post on 24-Dec-2015

222 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Basic Web Page Design

Page 2: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

• Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro.

• Software: Adobe® Dreamweaver® CS6 (for basic web page design notepad /Microsoft word can be used)

• Website: • http://library.albany.edu/imc/webdesign/index.html• http://www.iupui.edu/~webtrain/tutorials.html• http://www.d.umn.edu/itss/training/online/webdesign/

index.html• http://www.washington.edu/doit/Resources/web-design.html• http://www.w3schools.com/html/default.asp• http://en.wikipedia.org/wiki/HTML

Page 3: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Learning basic html using Notepad:• HTML HyperText Markup Language• Notepad as editorStep1:

In html , there is a starting tag(<) and a closing tag(/>). Most, but not all tags have a closing tag. The browser will interpret everything between <html> and </html> as an HTML document.<html>

</html>

Step2:

HTML document needs a pair of head tags.<html><head></head></html>

Step3:

In the head tags are the title tags.<html><head><title>My IRES web page!</title></head></html>

Page 4: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Step 4:

Within the body tags write<html><head><title>My IRES web page!</title></head><body>Welcome to my website!</body></html>

Save the page as index.html (Save as: all files)

Step 5:

To transfer the files you need FTP. Open FTP (file transfer protocol). WinSCP or FileZilla

Page 5: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Step 5: To transfer the files you need FTP. Open FTP (file transfer protocol). WinSCP or Filezilla

Step 6: After login, another window will open. In that window left side is "local" (files and folders that are located on your computer/flash drive)Right side is the remote site or server site. On the server site open public html folder. And then transfer index.htm or.html to the server site.

References:

http://www.w3schools.com/html/html_editors.asp

Page 6: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Learning basic html using Microsoft word:

1. Converts text to HTML code

2. Transforms images to GIF or JPEG formats (that are web-compatible)

3. Creates a single HTML file

4. Generates an XML style sheet (XML=Extensible Markup Language)

5. Makes a folder that contains XML file

Page 7: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

• Create a basic web page using word by opening a blank document and adding your own text and pictures.

Always use pictures that are taken by YOU or you have permission to use!

• Save the word file as web page format ; file extension .htm or html (as for example index.htm or index.html).

• Always name your main home page as index • An additional folder is generated with the same name as the web page file

(as for example index_ files)

• To transfer the files you need FTP.

• Open FTP (file transfer protocol). On the server site open public html folder. And then transfer index.htm or.html and the associated folder to the server site.

• For details visit: http://www.hartnell.edu/library/word_web_design/word_web_pages.htm

Page 8: Basic Web Page Design. Text book: HTML, XHTML, and CSS: Visual QuickStart Guide, Sixth Edition written by Elizabeth Castro. Software: Adobe® Dreamweaver®

Questions??