《WEB技术开发》教学资源（PPT讲稿）HTML AND CSS

票 HTML AND CSS http://www.flickr.com/photoswili/242259195/

http://www.flickr.com/photos/bespoke/2692422909/ HTML AND CSS http://www.flickr.com/photos/wili/242259195/

OSU H lyperText Markup Language(HTML) Oregon State The notation used to describe web pages Tags enclosed in angle brackets < indicate the parts of the web page n the 90s web browsers interpreted HTml pretty differently Much much much more consistent these days

HyperText Markup Language (HTML) • The notation used to describe web pages • Tags enclosed in angle brackets <> indicate the parts of the web page • In the 90's web browsers interpreted HTML pretty differently – Much much much more consistent these days

OSU Example Oregon State Welcome to class lt is nice to see you all here today

Example Welcome to class It is nice to see you all here today. I hope that you are learning

OSU HTML pointers Oregon State Not case sensitive Most of the time you must include end tags Use indentation and blank lines to enhance readability like any programming language

HTML pointers • Not case sensitive • Most of the time you must include "end tags" • Use indentation and blank lines to enhance readability, like any programming language

OSU Publishing HTML on a server Oregon State nstall&startFilezillaclienthttps:/fileilla-project.org Log into flip engr. oregonstate edu port 22 On left side create enter new folder cs 290 Right-click the left side and open the folder Save a test. php"in that local folder go back to filezilla, refresh left side On right side, go into public html folder Drag your test. php"to the remote folder View your page (e_g, htt://we. engr. oregonstate edu/scaffidc/test. php

Publishing HTML on a server • Install & start Filezilla Client https://filezilla-project.org/ • Log into flip.engr.oregonstate.edu port 22 • On left side create & enter new folder "cs290" • Right-click the left side and open the folder • Save a "test.php" in that local folder • Go back to Filezilla, refresh left side • On right side, go into public_html folder • Drag your "test.php" to the remote folder • View your page (e.g., http://web.engr.oregonstate.edu/~scaffidc/test.php )

U Tips for transferring files Oregon State If you cannot write or save over files, your permissions are wrong. Set your Filezilla preferences to give yourself write permission In Windows, set your file explorer to show file extensions. Otherwise, your text editor is going to call everything a .txt file, instead of a php"file You can also drag-drop from file explorer to the right side of filezilla

Tips for transferring files • If you cannot write or save over files, your permissions are wrong. Set your Filezilla preferences to give yourself write permission. • In Windows, set your File Explorer to show file extensions. Otherwise, your text editor is going to call everything a ".txt" file, instead of a ."php" file • You can also drag-drop from File Explorer to the right side of Filezilla

OSUActivity Oregon State Post your first web page

Activity • Post your first web page

OSU Some common tags Oregon State REALLY big text Big text Kind of big texts/h3> emphasis paragraph a division like a paragraph but usually without spacing around its/div> a span, ie a part ot a division

Some common tags REALLY big text Big text Kind of big text emphasis paragraph a division, like a paragraph but usually without spacing around it a span, ie a part of a division

OSU Making lists of stuff Oregon State item A item b item C /u> item one item two item threes/li>

Making lists of stuff item A item B item C item one item two item three

OSU Laying out tables row 1, col 1 row 1, col 2s/tr> row 2, col 1 row 2, col 2 row 3, cols 1-2 There's also a th you can use instead of td if the cell is basically a header read more online if you like at W3 Schools

Laying out tables row 1, col 1 row 1, col 2 row 2, col 1 row 2, col 2 row 3, cols 1-2 There's also a th you can use instead of td if the cell is basically a header. Read more online if you like at W3 Schools