Intro HTML

Uploaded from authorPOINTLite
Views:
 
Category: Entertainment
     
 

Presentation Description

No description available.

Comments

By: dikasrocks (18 month(s) ago)

its very good nd nice

By: dikasrocks (18 month(s) ago)

i want to dowl load this presentation .....pls allow to down load pls pls

By: surya7 (37 month(s) ago)

good

Presentation Transcript

Technology Workshop Introduction to Web Authoring: 

Technology Workshop Introduction to Web Authoring Maki Watanabe The Japan Foundation Los AngelesLearning Center May 2, 2003

What is the Internet?: 

What is the Internet? Japan The U.S. Australia

Server vs. Client: 

Server vs. Client

The Internet vs. LAN: 

The Internet vs. LAN Local Area Network School Home Office

How can you connect to Server?: 

How can you connect to Server? Server Computer Your Computer Download Upload Internet Service Provider

Bottom line is...: 

Bottom line is... The Internet is a like library loan system. A server computer is a library. Client computers contact a server through a connection and get data just book loans.

What Can You Do With The Internet?: 

What Can You Do With The Internet? E-mail World Wide Web Web Site BBS Chat Moo Instant Messenger Video Conference

Web Site vs. Web Page: 

Web Site vs. Web Page Whole Part Web Site Web Page Book Page

Web Site: 

Web Site

How Does Web Site Work?: 

How Does Web Site Work? Server Computer Your Computer Download Upload Internet Service Provider Web Browser View HTML HTML files FTP Transfer HTML Web Authoring Edit HTML

What is HTML?: 

What is HTML? Hyper Text Markup Language Blue print of a web page Encoding Web authoring Score writing Code HTML file Musical score Decoding Web browser Piano

What HTML Looks Like: 

What HTML Looks Like <html> <head> <title>Test</title> </head> <body> Test </body> </html>

What HTML Looks Like: 

What HTML Looks Like TAG (4-(3+2)+5)+(2-4) < > .............</ > <body>Test</body>

HTML TAG: 

HTML TAG Element Attribute Additional Information to Elements

Basic HTML Elements: 

Basic HTML Elements HTML Declare existence of HTML-coded information HEAD Basic information such as Title Elements to be applied all in the body (e.g., JavaScript and CSS) BODY Contents of the document JavaScript

In the Body: 

In the Body Font Specify a font Table Display table List Display a list

Let’s Try!: 

Let’s Try! <html> <head> <title>Test</title> </head> <body> Test </body> </html>

Your Favorite Font?: 

Your Favorite Font? <html> <head> <title>Font</title> </head> <body> <font size="5" face="Geneva, Arial, Helvetica"> <strong> <em> Welcome To Japanese Language Program</em> </strong> </font> </body> </html>

Let’s Color Them!: 

Let’s Color Them! <html> <head> <title>Color</title> </head> <body bgcolor="lightpink"> <font color="red" size="5" face="Geneva, Arial, Helvetica"> <strong> <em>Welcome To Japanese Language Program</em> </strong> </font> </body> </html>

How About This?: 

How About This? <html> <head> <title>List</title> </head> <body> <ul> <li>1st Semester</li> <li>2nd Semester</li> <li>3rd Semester</li> </ul> </body> </html>

Try Japanese: 

Try Japanese <html> <head> <title>Japanese</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> </head> <body> こんにちは </body> </html>

How About Table?: 

How About Table? <html> <head> <title>Table</title> </head> <body> <table width="175" border="0" align="center"> <tr align="center"> <td width="85">Japanese 1</td> <td width="80">Syllabus</td> </tr> <tr align="center"> <td>Japanese 2</td> <td>Syllabus</td> </tr> </table> </body> </html>

Tough One!: 

Tough One! <table width="400" border="0"> <tr align="center"> <td width="85">Japanese 1</td> <td width="80">Syllabus</td> <td width="127">Weekly Schedule</td> <td width="90">Home Work</td> </tr> <tr align="center"> <td>Japanese 2</td> <td>Syllabus</td> <td>Weekly Schedule</td> <td>Home Work</td> </tr> <tr align="center"> <td>Japanese 3</td> <td>Syllabus</td> <td>Weekly Schedule</td> <td>Home Work</td> </tr> </table>

How About Web Design?: 

How About Web Design? Before you start: Find your role model!! But, of course, be careful with COPYRIGHT...

Good Web Sites Are...: 

Good Web Sites Are... Simple! Easy to find information Easy to open Easy to see

Well Organize: 

Well Organize It is easy to find information on a WELL-ORGANIZED web site.

Steps for Well Organized Website: 

Steps for Well Organized Website Brain Storming: Thank and write down what you want in your web site. Organization: Group your ideas according to relevancy. Webbing: Arrange the groups in a diagram and draw arrows among them. Tree Diagram: Draw tree diagrams to organize the ideas within a group.

Light Page: 

Light Page Lighter pages are easier to open. Too many information on a single page. -> Break it into more than one page. Too many images -> Limit # of images Huge images -> Make it smaller. Use thumbnails.

Eye-Friendly Web Site: 

Eye-Friendly Web Site People recognize colors in different ways. Too many animation -> Limit # of animation GIF Too many colors -> Avoid similar colors. Avoid darker background. Check your page at http://www.vischeck.com/ Depend on colors to identify things -> Add numbers or some other shapes http://homepage3.nifty.com/ondo/cbfg-ver101/01/free.html