Transcript Slide 1
Introduction to HTML Contents Getting Started.. What is HTML? How to create and View an HTML document? Basic HTML Document Format The HTML Basic tags Publishing Pages What the following term mean: Web server: a system on the internet containg one or more web site Web site: a collection of one or more web pages Web pages: single disk file with a single file name Home pages: first page in website Think about the followings before working your Web pages. Think about the sort of information(content) you want to put on the Web. Set the goals for the Web site. Organize Come your content into main topics. up with a general structure for pages and topics. What is HTML? Telling the browser what to do, and what props to use. A serises of tags that are integrated into a text document. Tags are ; surrounded with angle brackets like this Most tags come in pairs The off. <B> or <I>. exceptions: <P>, <br>, <li> tags … first tag turns the action on, and the second turns it What is HTML? Telling the browser what to do, and what props to use. A serises of tags that are integrated into a text document. Tags are ; surrounded with angle brackets like this Most tags come in pairs The off. <B> or <I>. exceptions: <P>, <br>, <li> tags … first tag turns the action on, and the second turns it The second tag(off switch) starts with a forward slash. can embedded, for instance, to do this: <HEAD><TITLE> Your text </HEAD></TITLE> it won't work. The correct order is <HEAD><TITLE> Your text </TITLE></HEAD> not case sensitivity. Many tags have attributes. For example ,<B> text </B> For example, <P ALIGN=CENTER> centers the paragraph following it. Some browsers don't support the some tags and some attributes. Basic HTML Document Format <HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML> See what it looks like: How to Create and View an HTML document? 1.Use an text editor such as Notepad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open Internet Explorer (or any browser) Off-Line 4.Click on File, Open File and select the filename.html document that you just created. 5.Your HTML page should now appear just like any other Web page in Netscape. 7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to Internet Explorer click on RELOAD and view the new HTML Document switch to Notepad with the Document Source...... Tags in head <HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar. Tags in Body Let's talk Text Heading: <H1> </H1> Center:<Center> </Center> Line Break <P> ,<Br> Phrase Markups: <I></I> ,<B></B> Create a List Unordered list : <UL><li> Ordered list: <OL><li> Nested Add Images Use <IMG SRC=imagefilename> tags How to specify Relative pathnames Attributes of IMG tag -width,height -Alt -Align -<Img src=my.gif width=50 height=50 align=right alt=“My image”> Add some Link Use <A href=filename|URL></a>tags How to specify Relative pathnames Kinds of URLs -http://www.mail.yahoo.com - ftp://ftp.foo.com/home/foo - gopher://gopher.myhost.com/ - news://news.nuri.net - mailto:[email protected] How to make colors changes? Hexadecimal number : Color names : <Font color=white> Changing the Background color <BODY BGCOLOR=#19378a> Changing Text color <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff> Spot color <FONT COLOR=#66ffcc>WENT'99</FONT> Image Background <BODY BACKGROUND=bgimg.gif > The current HTML document is my.html and the current directory is Iam C:\- Iam -my.html -your.html Type this ; <A href=your.html>Your link </A> C:\- Iam -my.html Child -your.html Type this ; <A href=Child/your.html>Your link </A> C:\- Iam -my.html Sister -your.html Type this ; <A href=../Sister/your.html>Your link </A> C:\- Mother -your.html Iam -my.html Type this ; <A href=../your.html>Your link </A> k What is HTML? Telling the browser what to do, and what props to use. A serises of tags that are integrated into a text document. Tags are ; surrounded with angle brackets like this Most tags come in pairs The off. <B> or <I>. exceptions: <P>, <br>, <li> tags … first tag turns the action on, and the second turns it The second tag(off switch) starts with a forward slash. can embedded, for instance, to do this: <HEAD><TITLE> Your text </HEAD></TITLE> it won't work. The correct order is <HEAD><TITLE> Your text </TITLE></HEAD> not case sensitivity. Many tags have attributes. For example ,<B> text </B> For example, <P ALIGN=CENTER> centers the paragraph following it. Some browsers don't support the some tags and some attributes. Basic HTML Document Format <HTML> <HEAD> <TITLE>WENT'99</TITLE> </HEAD> <BODY> Went'99 </BODY> </HTML> See what it looks like: How to Create and View an HTML document? 1.Use an text editor such as Notepad to write the document. 2.Save the file as filename.html on a PC. This is called the Document Source. 3.Open IE (or any browser) Off-Line 4.Click on File, Open File and select the filename.html document that you just created. 5.Your HTML page should now appear just like any other Web page in Netscape. 7.You may now switch back and forth between the Source and the HTML Document switch to Notepad with the Document Source make changes save the document again switch back to Internet Explorer click on RELOAD and view the new HTML Document switch to Notepad with the Document Source...... Tags in head <HEAD>...</HEAD>-- contains information about the document <TITLE>...</TITLE>-- puts text on the browser's title bar. Tags in Body Let's talk Text Heading: <H1> </H1> Center:<Center> </Center> Line Break <P> ,<Br> Phrase Markups: <I></I> ,<B></B> Create a List Unordered list : <UL><li> Ordered list: <OL><li> Nested Add Images Use <IMG SRC=imagefilename> tags How to specify Relative pathnames Attributes of IMG tag -width,height -Alt -Align -<Img src=my.gif width=50 height=50 align=right alt=“My image”> Add some Link Use <A href=filename|URL></a>tags How to specify Relative pathnames Kinds of URLs -http://www.mail.yahoo.com - ftp://ftp.foo.com/home/foo - gopher://gopher.myhost.com/ - news://news.nuri.net - mailto:[email protected] How to make colors changes? Hexadecimal number : Color names : <Font color=white> Changing the Background color <BODY BGCOLOR=#19378a> Changing Text color <BODY BGCOLOR=#19378a TEXT=#ffffff LINK=#ffff66 VLINK=#66ffff> Spot color <FONT COLOR=#66ffcc>WENT'99</FONT> Image Background <BODY BACKGROUND=bgimg.gif > The current HTML document is my.html and the current directory is Iam C:\- Iam -my.html -your.html Relative pathnames Type this ; <A href=your.html>Your link </A> C:\- Iam -my.html Child -your.html Relative pathnames Type this ; <A href=Child/your.html>Your link </A> C:\- Iam -my.html Relative pathnames Sister -your.html Type this ; <A href=../Sister/your.html>Your link </A> C:\- Mother -your.html Relative pathnames Iam -my.html Type this ; <A href=../your.html>Your link </A> Publishing pages Viewing your pages via the internet Send pages to a web server How a page is distributed Server space maintenance Common ways (protocols) of sending pages to a web server FTP SSH Through a mapped drive Review: Client and Server User uses HTTP client (Web Browser) It has a URL (e.g. http://www.yahoo.com/) Makes a request to the server Server sends back data (the response) User clicks on the client side... request (URL) Client response (HTML, …) Server Publishing pages Sending pages via FTP to a web server File Transfer Protocol Plain-text data transfer Microsoft’s FTP client ftp://username:[email protected] ftp://[email protected] Other FTP clients WS_FTP CuteFTP Publishing pages Exercise: Publish pages to usiweb.usi.edu through an FTP client Go to your desktop Open “My Computer” or “Internet Explorer” Type in the following URL into the address field: Oakland’s ftp address Publishing pages Sending pages via SSH Secure Shell Encrypted data transfer More secure than FTP SSH used with www.oakland.edu for offcampus access SSH clients SSH Secure Shell PuTTY (Free Win32 SSH client) Publishing pages Sending pages through a mapped drive Method used to publish on campus to www.oakland.edu. Normally labeled “H:” or “the H drive”. Publishing pages Creating a mapped drive for www.usi.edu Make sure you have access to on the web server If not: Have your fiscal agent send an e-mail to Web Services approving access Go to your computer’s desktop Right click on the “My Computer” icon Select “Map Network Drive…” Enter Q: as the drive letter Enter \\www\www_usi as the folder Click on Finish or OK Traverse to your folder you have access to using FrontPage or another web publishing application