174
HTML and JavaScript for Visual Learners 1810 Monument Avenue, Suite 100 Richmond, VA 23220 www.visibooks.com

Html & javascript for visual learners

  • Upload
    nilar62

  • View
    5.789

  • Download
    15

Embed Size (px)

DESCRIPTION

file

Citation preview

Page 1: Html & javascript for visual learners

�������������� ������ ����������� �� ����������������

���

��

��

������������� �������������������������������

���� ������������

Page 2: Html & javascript for visual learners

������������� ������ ����������� �� ������������������� �������������� ������

���������

��������

����� ������

���� ��������������� �� ��� ��� ����� �������� ���������� ������������������ ���� ��������������!������� ����� �������� ������������������� ������� ���� ����������������� �������� ������"����� �

������ ���������������� ��

����� ��#�������������� ������� ������� ��������������� ������������������ �������������� ������������������ ���������������� ������ ������� ��#������������ ���� ����������������� ����� ����������� ������������ �$ ���������� ��#������� �����������"����� ��������������������� ��������������%�������������������� ���� ���� ���� �� ������� ������ ������� ���������������� ������ ��#������� ���������� �� ����������������������� ������� �!��� ��������������������������������������������������� ���������� ��������������������� � ������ ��#������������������������� ��������������������� ��%������������������"�������� �������������������������� �������� �������� ����� ���������� ������ ���� �������� �������� ���������������� �&��� �� �������� ���� ��� ��� ������������ ������ ��������� ������������ ��# �'����������"��������������� �������� ��� ��������������� ������ ��������� ���� �� �����(��� �������������� �������� �

��

�������� ����)������* ��+����,�-./0-010/.2.3��4�����5��� �

6 ������������� ��� �� ��������� �� ����7�������.������������������� ������������ ���� ������ ���� ��� ����������� ������� ������� �������� ������� ������ ������ ���������� ���� �&������������ �������� ������ �$ ��������������� ����������� ������������������� ��� ���� ���������������������� ������ ������� �

Page 3: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

������������������

��� �������� ����������������������������������������������������������������������������������������������� �

������������������������������������������������������������������������������� �

�� � ���� ��� ������������������������������������������������������������������������������ � ������������������������������������������������������������������������������������������������������������������������ ������������������������� ����������������������������������������������������������������������������������������������

�������� ���� ���������������������������������������������������������������������������� ������������������������������������������������������������������������������������������������������������������������������� � ������������������������������������������������������������������������������������������������������������������������������� ������������������ �������������������������������������������������������������������������������������������������������� �� ����������������� ������������������������������������������������������������������������������������������������������������� ������������������������������������������������������������������������������������������������������������������������������������� �� �������������������������������������������������������������������������������������������������������������������������������!� ������������ ����������������������������������������������������������������������������������������������������������������������!"

�� � ������� ���� �������������������������������������������������������������������� �� #����$����������������� ���������������������������������������������������������������������������������������������!% #���!$�&��'������������������������������������������������������������������������������������������������������� !�

�� � ������� � ������������������������������������������������������������������� !� �����������(�������'������������������������������������������������������������������������������������������������������ "� &��'�������������������� ��������������������������������������������������������������������������������������������������""

"�� ������������������������������������������������������������������������������������� !� ���)��������������������*�������������������������������������������������������������������������������������" ������������������������������������������������������������������������������������������������������������������������������"� ������������������������������������������������������������������������������������������������������������������������������"� +�������������������������������������������������������������������������������������������������������������������������� �

�� � �#������$��������� ��������������������������������������������������������� �� &��'����'��������������� ������������������������������������������������������������������������������������������ &��'������������������� ����������������������������������������������������������������������������������������������� % ,�����������������'������������������������������������������������������������������������������������������������������ � ,�����������������'������������������������������������������������������������������������������������������������������ �

����� ��� %���������� �������������������������������������������������������������������� �& ����������'���)� ������������� ��������������������������������������������������������������������������������%- ����������'������� ���������������������������������������������������������������������������������������������������������� %� ����������'������� ����������������������������������������������������������������������������������������������������������%!

Page 4: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

������� �!��"����� ������������������������������������������������������ #$

'������� �������#� � ����������������������������������������������������������������� �( ������������������������������������������������������������������������������������������������������������������������������� %� ������������������������������������������������������������������������������������������������������������������������������� %� +������������ ���������������������������������������������������������������������������������������������������������������� �" ��������������(���� �������� ��������������������������������������������������������������������������������� �� ����������������(���� ��������������������������������������������������������������������������������������������"

�� � ��$������#��������������������������������������������������������������������������� )* �����������.������������������������� �������������������������������������������������������������������� �� �����������.��������������������������������� �������������������������������������������������������� ��

+����#� �������� ����������������������������������������������������������������������(� ����������������������������� ��)������������'� �����������������������������������������������������������! ��������)������������������������������������������������������������������������������������������������������������ �

,��� �#� �������#� ��������������������������������������������������������������������((

'������ � ������ �����-��� ���������������������������������������������������� .�

���� ��������������������������������������������������������������������������%%

"�� �/0�+��������������������������������������������������������������������������������� �&&

�� � -���� ������������������������������������������������������������������������������������ �&�

1� ��� �� ��������������������������������������������������������������������������������� ��� �����������/����������������������������������������������������������������������������������������������������������������! ��/�����/��������������������������������������������������������������������������������������������������������������� �� ����������'����������������/������������������������������������������������������������������������������������ ���

1������� ���2 #� �$ ������������������������������������������������������������������

&����������������������������������������������������������������������� ���

0�����#����������������������������������������������������������������������������� �!�

0��������� �3"�� ����������������������������������������������������������������������������!�

"�� ������4������� �����������������������������������������������������������������������!)

�� ��-���� ������������������������������������������������������������������������������ �!(

Page 5: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

' ������������ ��� ������������������������������������������������������ �(�

0��#� �����$ ��������� ����������������������������������������������������������������������� �������)������ ����������������������������������������������������������������������������������������������������������� � " ��/���)������ � ��������������������������������������������������������������������������������������������������������� � 0� ��/���)������ �������������������������������������������������������������������������������������������������������� �

5� �� �������� �����������������������������������������������������������������������������&

6����� -�������������������������������������������������������������������������������������!

6����� -�������������������������������������������������������������������������������������� #�������������'� ���������������������������������������������������������������������������������������������������������� �% �����������.��� ����������������������������������������������������������������������������������������������������� �%% 0� ��/�����1+2304������������������������������������������������������������������������������������������������������%��

&����������)���� ��� ������������������������������������������������������������������������������ �#$��

�������"��*� � ����������������������������������������������������������������������������������������#%��

����+��������������������������������������������������������������������������������������������������������,# �����������

Page 6: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

Page 7: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

��� ���������

�7�� ��� �������������� ������ ����������� �� � ����� �!���������������� ���� ���� �!���������������� ���������������������������� ���������� ������������������"� ������������������������������������ ������ ������������������ ����� ����������������������� �� �

*����/�)5����������

6 �!��������� ��� ����$8&��� ��������� ��������������7����������!������� �������� �6 �!������ ������� ��� ���� ������ ���7������ ��6 ��� �!���� �����"�������7������������9������������������������.� ���"����� �*���� �������������������������� �����.������������������ �� ����� �� ��������� �������� ���� ���.���������� ������ ������ ������ ����%�������"���.����$8&�����:���)����������������� ����������� �������� � �

6���/�)5�������������

8����� �������������� ��,�$8&��*���������� ���;�+������� �������������������������� �����������������:���)����� ����������� ������������������ �������������"����� �' �!��� �������� �����!��� ������ ��������� ��� ���������� ���� �8���� ���������������� � ����������� �6 ������������ ���� �����������"������� ��� �����7� ��

�������� � ��

!�

�� � � ����

Page 8: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!

7������/�)��������

�*� ��� ����������!����� ������������ ���� ��7�� ������ ���� �������� ���� ��7�� ���������������������� ������$8&�����:���)����� �6 ���� ������������������,��

• $ ������ ����� ���• 7�� ���5"�� ���• *������ ���� �������

�&�������� ��������� ������� �� ����������,��

• �������� ��� ��� ���� �����!����������• �������� ������������� ���• � ����������������� �� �� �������������������� ��� ��� �

����� �������� ���� �������������������� ���� ��� ����� ������7�� ��������� �$���������� ��� .� ������ ������ ������������� ������������� ����� ����7�� ���5"�� ������������� ��������� �����������������������"���� �� ���6 ���� ������ ������������������������ ������������� ������������������� ���� ��������� ���� �7���� ������ ������������ ��� ��� ����� �!������� ������$8&�����:���)����� ��

��

Page 9: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"�

��������������

���������������8�/�)5���������������$��

• �� � ���� ��� • ����� �• �� � ������� ���� �• �� � ������� � ���������• "�� ���������• �� � ���$��������� �• ����� ��� �������������

��

9�)5����)�� ����������������'����'������$��

��

Page 10: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�� � ���� ��� �

��������������������

��� <������� ��������������������5"�� ��� ��+������+������ � ���

��� <�������� �����+ ��� �' ��������������������������� ����� �� ������������������Programs������Accessories������Notepad ��

��

��� ������� �� �����+ �������������,��<HTML>��

��

���-�<HTML>����������������� ������ ������������������ ���� ��������� ������ ����� ��������������������� ���� ���������������������������������������� ������������������������������ ������������� ������ ����� ���������� �!��������"��#���� ��������<HTML>��<html>��� �<HtMl>�� �������������

Page 11: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%�

��� )��������� ��

��

��� 7������Save As���� ������������������C:\�����������Save in�� �. ������� ��

��� ����������� ��������������� ����� ��� � ��

��

Page 12: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

��� +���������� ���=Dogs�>����� ���.���������� �����������������Save in�� " �

���� ������File name��"�� "������index.html ��

���� ������Save as type�� �. ��������������All Files �7���� �!��

��������� ���� ���� ����������,��

��

Page 13: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

����)���������������������� �����Save����� � ������������������������

�����*� �����<HTML>���������,��<HEAD> <!--Created by Your Name--> </HEAD>��

���-�����<HEAD>���������������������� #����������������"��������������������������������������������� ���� ��$����������������</HEAD>����%����������&���#������������� ���� ����� �����������������#��������������������� ���������

7�� ��� -�� ��� ������7������������� �����"���� ��? �� ���@ ������� ����������������������index.html �index.html�� ��������� ���������������������� ���� ����� ������ ���������!��� �������������� ����� ��� ��4 ��������������� ��� �� ���� ����� �� � ������� ���������������� ��������� �8���!�����������������������index.html ��������������� ���������� ���� ����������homepage.html��� �!������ �����www.visibooks.com/homepage.html�� �������� ������ ��������� �������'�������%�8 ����� ���� ������� �� �������� ���������� ����7���������������&��� � ��!������������ ����� ��)���������!�� �������������������� ���� �����������������default.htm �

Page 14: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

���-�<!--Created by Your Name-->���������������##����������� ���'���������������������������"���������������� ���� "���� ���!��"�����&�������������#������������������"�������������(�����������������������!��� ����������� ����

����*� �����</HEAD>������������������=��$ �������� ���' ��>����������<TITLE>�����,��<TITLE> A Home Page About Dogs </TITLE>��

���-�$���������������'��)��$ �������� ���' ��*���������������+�������'���� ��������&�����������<TITLE>���������������� ���� �����������������������'�%�#������������������������������

�����������������

Page 15: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

�����������������

����*� �����</TITLE>�������,��<BODY> </BODY>��

���-�,�&������&��������������������������� ���� "��#����������������������������<BODY>�����</BODY>��������

,�� �� ��8������� ����7������������������� ���!��������������������� ���!��$��� ������� �8���������� ��� ��������������������������� ��������������������� ��������� ��������������������������������������!����������� ��� ���� ���� ��8������������� ������������� ��� ��=�����>����� ������� �������� ������� �8������� ��������������Dogs ��

Page 16: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-�

����*� �����</BODY>�������� �����</HTML>���� �7���� �!�������������� ��� ���� ����������,��

��

����*�������<BODY>����</BODY>��������������� ��,��Dogs Home Page��

��

�����)��������� ��

Page 17: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

���������������������������

��� A �� ������ ������� ���������������������File������Open ��

���-�+��&��" ��������$��������-�##������� ������������+��� ����.'��� � ��������Open Page�������Choose File ���

��� 7������Open���� �������������������Browse����� � ��

��

Page 18: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!

��� 7������������ ������������������� ����Dogs�� ���������Look in�� �. ���������������������� �����,�index.html ��

��

��� ���������Open����� ����������OK����� � �8�������� ���� ������������� �������� ����������,��

��

6 �������������� �����������“A Home Page About Dogs.”���8��� �����!�������������index.html ���������� ���������� ��������Dogs� �����C:\���� �

���

Page 19: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"�

,����� 8�� � ���� ��� �

,�� �������������� �����������#���� �����#������/���

��

0�� ��&������� �������������������#���� ���#�������/���

��

� ���&��������#�� ����������������#������!������������ ��������������������!�������� ����������/���

��

1������������������� �������������������"�����������������������#�/��

�����������������

�������������,�� ����' ���#��0 �� + ��� ����� ���#������� ��� ������ ����� �� ���� ����������&����������������#���� ��� ��� ��� �������� �� � ���-�� ,��� ���������� �� �������������� ����������� ���� �� ����������#� � �������#�� �� �� ���������� �� ���� "� �� �� �� &���� ���1 �� ,����������������� � ��������� ������� �� ����������� ������� ���� ��+ �"� �� �� �����' ���������� �)�����#����2�#��&%����������

3���� �� �*������#���� �������&��� ���������� �� ����� ��� �� ��� �������,�����"� ��������#���������� ������� ���#����� �����������#���� �� ���� �� ��� �� ������

Page 20: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� �

�������� ���� ��

��������������

��� ����� ��� ������ ���=' ���$ �����,>���������<FONT>����������������������FACE=”arial”,��<FONT FACE=”arial”>Dogs Home Page</FONT>��

��� ��������� ������ �����<FONT>����,��<FONT FACE=”arial”>Dogs Home Page</FONT>��

�����-���������������� �������������� ���� ��������������� ���� ��+�����������������<FONT> ��������������� ���� ��������'���������������������������FACE���� ������������������������������������&��������, �����&���������

Page 21: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%�

��� ������������������� ��� ������������ ���!��Refresh����� ��������������� ���� ����������,��

�����������������������

���-�+��������������"��������������"�������������!� ������������������������!��������������������&��"��� �������(���#��������������������4������ �#������#������ ��#����#����������#���������������#��������������������� ����������%��<FONT FACE=”arial>�

���

2 #-����7����"��������� ����� ������� ����� ������������ ������ �������������� �4 ��������������� � ������������������������������������ ������� ���� � ������������� �������������������������������� ����������������� ���������� �� ����������� ����������� �����������"��������������� ��,�Times New Roman ������7�� ���� ��������������Arial�� ���������� �7�� ���/B���������� �����������Verdana �&����� ����������������������� ��������Arial���������� � ��8 �� ����������������������������� ���,��<FONT FACE=”verdana,arial,helvetica”>��

/������ ��9�� :;<

� ������

+����-��

Page 22: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

������������������

��� ���+ ����������SIZE=”+4”����������� ����<FONT>����,��<FONT FACE=”arial” SIZE=”+4”>Dogs Home Page</FONT>��

��

��� )���������������������������� ��� ������ ���� ����������,��

�����

Page 23: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��������������������

��� ���+ ����������<B>���������� ��� ������ ���=Dogs Home Page>������ �������������,��<FONT FACE=”arial” SIZE=”+4”><B>Dogs Home Page</B></FONT>

���-������

���� �����#��������������� ��������#����#� � �#����� �� �����������������'�������� ����������'�#���%������������� ������������<FONT>�����������������������</FONT>����������������� ��"��� ���������#� � �#����� �� �����������������&�� ����#�������#��� ���� ����

��� )���������������������������� ��� ������ ���� ����������,��

Page 24: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

�������������������

��� ������<FONT>��������������������COLOR=”red”,��<FONT FACE=”arial” SIZE=”+4” COLOR=”red”>��

��

��� )��������� ���������������� ������������"���� ����� ������ �

���� ����������"��� � ��� ���������������������� �

�<FONT FACE=”arial” SIZE=”+4” COLOR=”black”>�

Page 25: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

������������

��� *���������������"�������������������<P>������ �������������������� ��

��� *��������<P>�������������������<FONT FACE=”arial” SIZE=”-1”>�������� ���“These are my favorite breeds of dog:”

��

��� 7���������<P>��������������������ALIGN=”right”,��<P ALIGN=”right”>�

���� ������ �����</P>������������������������� ��

�<P ALIGN=”right”> <FONT FACE=”arial” SIZE=”-1”>These are my favorite breeds of dog: </P>���

Page 26: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!-

���-�5�����&���<P>����� �4�� ��������������</P>�����������������������������������ALIGN=”right”���� ���������������������������</P>��������� ������� �� ��������������� ���� �� �#� ���� ��������������� �����������������

��� )������������������������������ ��� ������ ���� ����������,��

��

��� �� �����ALIGN=”right”������������ �����<P>���� ��

����-�������� ������������ ������ ���� ���� ���������������� ��������<P>��������� ��������������<BR>������3���������<BR>�� �)0 ���*����������������������������'���������#��������������������������������'������%��

��<FONT FACE=”arial” SIZE=”+4”><B>Dogs Home Page</B></FONT> <BR> <FONT FACE=”arial” SIZE=”-1”>These are my favorite breeds of dog:��

Page 27: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!�

�� ����������

��� *� ������"���=8������������ �������� �� �,�>������������������������,��<P>Chesapeake Bay Retriever</P> <P>German Shepherd</P> <P>Yorkshire Terrier</P>��

��� 5��� ��������������������C� �������������� ���������,��<UL>��<P>Chesapeake Bay Retriever</P> <P>German Shepherd</P> <P>Yorkshire Terrier</P> </UL>

��

Page 28: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!!�

��� )���������������������������� ��� ������ ���� ����������,��

���-�$��������������������'������������<FONT FACE=”arial” SIZE=”-1”>�����������������#���+����������&��������&�������������������</FONT>������������ ���� �

Page 29: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!"�

��������������

��� 7��������������� �� ������������<P>����</P>�����������<LI>������� ������������������� ��� ������"�������� �� ��,��<UL>��<LI>Chesapeake Bay Retriever <LI>German Shepherd <LI>Yorkshire Terrier </UL> �

��� )���������������������������� ��� ������ ���� ����������,��

���

Page 30: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

! �

,����� 8��������� ���� ���

,�� ��&�� ������#������##����������������, ������� ������������������/��

��

* � ����������������#���� ���������������, �������������/���������������������������/��

����� �������������� ������ ������� �=My Favorite Dogs >�

���� ��������������������� ������������� �

���-�5���<OL>������������<UL>�������� ��������#�� �����������

��� �������������������������� ������������� ��

��� &����������������� � �7���� ����������������� �������������� ���� ����������,��

����

�����������,�� ��� ���� ����������� ������#� � ��������� ���#���� � �������� �� �������0 �� ������� ���#���� � �����, �� ������� ������������� ��

Page 31: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!%

�� � ������� ���� ��

#����$�������������������

��� ���+ ������������������� ���������� �=Chesapeake Bay Retrievers�>��������� �������������������"����������<BODY>����</BODY>����� ���

��� <��������������������File������Save As ���

��� )�����������������������������chesapeake.html ���

�����-�6�#�#�� ����Save as type: All Files����

Page 32: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!�

���������������������

��� *��������<BODY>����������=��������*���������� >�8������������������� �&�������������� �����(�DE,��<BODY> <FONT FACE=”verdana” SIZE=”+3”><B>Chesapeake Bay Retrievers</B></FONT> </BODY> �

��� ��� �-��� 2 #�& ���7�����������C��".� ������".����������� �!���������������������������������� �4 �������������� ������������fido page.html����������� �����������C���� "� ������� �������fido%20page.html ������ ��7��������������.���������� ����������������� ��.���������������� �������� ���� ��������� ��&���������������������7�����9������������������� ���9� ��.����������� ������ ���-� �����������#�%�german.html���+��� ���%�German Shepherds.html��

Page 33: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!�

��� )��������� ��

��������������� ���

,��$�������$��������� ���� ���4 �8�������� �������������*�������������������� ����(���������������������� ������ ����� �8���!������������*��������� ������ ��������������������� �����������' ����?� �����������F�SIZE=”+4”@��������������������*������������?�� �.���������F�SIZE=”+3”@���&��������������� ������*���������������������� �����!��������������� ��� ����������������������� ��

����

�� ��� �� =��

> �� $ ��

Page 34: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!��

#���!$�&��'�����������������

��� <������� ������?index.html@����+ ��� ������ ��� ����������������Chesapeake Bay Retriever��������������� ����� �8����� ��������� ������,��<LI><B><A HREF=”chesapeake.html”>Chesapeake Bay Retriever</A></B>

7���������������������� ����������������������������� ��� ������� ���+��� ������-�� ��� ? ?������ ��� � ������

��<a href=”filename.html”>New Page</a>�

Page 35: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!�

��� )������� ������������������������ ��� �8��� ���Chesapeake Bay Retriever��� ������������������������� ���� ����������,��

��

��� ������ �����Chesapeake Bay Retriever����� �8����������*���������������� ����������������� ��� ��

Page 36: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"-�

,����� 8��� � ������� ���� ��

�,�� ��&���������������#���������� ���������� ������������/��

���

0�� ��&��������������������������������������7-����������0�&�6�� ��� ���8� #��������� ��9�����#���� ���������������������������#������/��

��

��� �������������� ��A�����)���������6 �������8����� ��,�� ��� ��� @��

German Shepherds German Shepherds german.html

Yorkshire Terriers Yorkshire Terriers yorkshire.html �

��� <������ ���������������� ���German Shepherd����Yorkshire Terrier�� ���������� ��

��� <������ ��������� ������ ���=Home Page>������=Dogs >��

��� <�������������*�����������A�����)��������6 �������8���������������������������������������� ������������������� ������?�����F�� �@ ��

��� &����������������� ����������� ����(���������������������� ������ �������G�������� �������������*������������� ��

��� )��������������������� ������ �����!��������� �������������� �� �

�������������

�,�� 0 �������#� � ������� � � � ���� ������� ���������� ��� ����������� � ��������#�� ���0 �� + ��� ����� �� ������ � � ������� ���������� ������������������� � � �����7��#�9������ ������ ����� �����7#����� ������9������ ��

Page 37: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"��

�� � ������� � ����������

�����������(�������'��

��� ����������������������������������������������=For more information, contact [email protected] >��

��� )��� ������.������������������� ������������������ �������������� ���7�������������mailto�� ������ ���������� ����.������� ����,��For more information, contact <A HREF=”mailto:[email protected]”> [email protected]</A>

��

Page 38: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"!�

��� )��������� �7���� ����������������� ���������� ���� ����������,��

���

��

7�� ��������������7���� � ��� ��� ���7���������������� �����.�������������!������ ��� � ������.������� ����� ���������� �!��� �������������������������� ����������� ������������ �!��.������� ��������!��� �������� �������������� �!��� �� �8���!������.������������� ���������.�������������������,�� �� ���������������������������������������� �

Page 39: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

""�

&��'����������������������

��� ���+ ������������������������������� � �8�������������=Please also visit www.dogs.com >��

��� )��� ������7�������www.dogs.com�������������� �������� ���������� ����"������7�����,��<A HREF=”http://www.dogs.com”>www.dogs.com</A>

���-�2� �����'�� �������������� ���&���#�����&���http://������ ���������������� ������

��

��� )��������� ��

��� ��������������������� ��������������� ����������� ���������������� ����"������������� �� � � ��

��� �� ������� ��� �

Page 40: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

" �

"�� ������������������

���)��������������������*����

��� <���������� ������� � ���

��

��� A �� ����7���������������� ����� �!��� ��

��� ������ ������� �� ��� �� ������������ �������������*��������������������������� ���������� ������� � ��

��

>������� #���

Page 41: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"%�

��� ������Save Picture As ��

��� 7������Save Picture ��� ������������������“Dogs” � ���������Save in�� �. ������� �

���� ����������� ����������Dogs������=graphics >�

��

��� ' ���.������ �����graphics�� ���� �����������������Save in�� �. ������� ��

��

��� ���������Save����� ��� ������������������������graphics�� �� ��

���-�- ���������������� ������� ����� ���������&�� �����"��� �������#������������������� ����� ����:�����������������

Page 42: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"��

�����������������

��� ���+ ����� ��������������*�����������������������chesapeake.html ���

��� ������������������������������������� ��

��� �������������������������������������,��<IMG SRC=”graphics/chessie.gif”>

���-�$��������������������#����������� �"����)�����*�2� ������#������� �������������� ������������������ ������������ ���������������������#����������#����������������

��

-��� � �������

Page 43: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"��

��� )������������������������������ ��� ������ ���� ��� ����������,��

��

Page 44: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"��

����������������

��� �������������������� ��������������������,��Chesapeake Bay Retrievers love water. If you throw tennis balls in the water, these dogs will chase them and bring them back until your arm falls off.��

��

Page 45: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"��

��� )���������������������������� ��� �8�������� ���� ����������,��

��

��� A ������� �+ ������������ALIGN=”left”����������� ����<IMG>����,��<IMG SRC=”graphics/chessie.gif” ALIGN=”left”> �

Page 46: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

-�

��� )���������������������������� ����?G�������������=Refresh>� ��=Reload>����� �@ ������ ���� ����������,��

��

Page 47: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

+���������������

��� ��������������*����������������������ALT����������� ����<IMG>����,��<IMG SRC=”graphics/chessie.gif” ALIGN=”left” ALT=”Chesapeake Bay Retriever”>��������

��� �����VSPACE=”4”����HSPACE=”12”�����������������,��<IMG SRC=”graphics/chessie.gif” ALIGN=”left” ALT=”Chesapeake Bay Retriever” VSPACE=”4” HSPACE=”12”>�

���� ��� �������BORDER=”1”���������,�

�<IMG SRC=”graphics/chessie.gif” ALIGN=”left” ALT=”Chesapeake Bay Retriever” VSPACE=”4” HSPACE=”12” BORDER=”1”>

=���>��"����� �����������.�������� ���� ��� ������������������������ ������"����� ���� ���������������� ���"��������� ���� �

Page 48: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

!�

��� )���������������������������� ��� ������ ���� ��� ����������,��

���

���

��� & ��� ������� �� �� ����������� �8��=���>��"�9��������������"��������� �� ������������9�� ���� ���� ��8���"���� �������������������� �� ������������ �����-�+��&��������������#�������������� �������&�������#����������������� ��&�������&������������������������������'���%��<IMG SRC=”graphics/chessie.gif” ALIGN=”left” ALT=”Chesapeake Bay Retriever” VSPACE=”4” HSPACE=”12” BORDER=”1” WIDTH=”150” HEIGHT=”189”>���

���

+�7�,+�0�-���� � ������4�������� �-����� ��

������� ���������������

���������

+=��� ��-��� � ��� ��� �

#��� �������� �������

Page 49: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

"�

,����� 8"�� ����������

,�� ��&��������&���������&�,�����'���� ������� ������&������� �/���

����� A �� ����������� ����� �!��� �)������A�����)������

�����������C:\dogs\graphics�����������������shepherds.gif ��

��� )������6 �������8����������������C:\dogs\graphics�����������������yorkie.gif ��

��� ������shepherds.gif���� ����A�����)������������������������������ ���������� ���

��� ������yorkie.gif���� ����6 �������8������������������������������ ���������� ��

��� <�����A�����)���������������=German Shepherds are smart dogs>������������������ ������������ ��

��� <�����6 �������8���������������=Yorkshire Terriers are cute>������������������ ������������ ��

��� <��� �������������������"��� ������� ����������������� �������������*�������������� ��

��� <��� ��������������������������� ��� ��1�������� ��4����������� ��12 ��

��� <����������=' �>��������������������������"��?� ����������������@�������������� �������������(� ��.H ��

��������������

�,�� ,�����' ��#���� ������� �� ��� ��� ��� �#��� ������������ ����� � ������ �����"� ��������������#���� ������� �� ��� �� �� ���������� ����

���� �� ������

Page 50: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�� � �#������$��������� ��

&��'����'�����������������

��� ���+ ����� ��������������*����������������chesapeake.html ��

��� 8������� ��=Home>������������������������������������������� ��

��� 5��� ������������ �������������������������� ����� �����,��<A HREF=”index.html”>Home</A>����

���-�6�#�#�� ��index.html���������������#���� �������#���������

��� )����������������������������� ��� �8��� ��Home��� ���� ������������������������ ���� ����������,��

��

��� �<�����A�����)����������������������������� ����� ����� �' ������������������ ���������������� �������������*������������� ��

��� <�����6 �������8������������������������ ��� ������������� ����� ����� �

Page 51: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%�

&��'���������������������

��� ���+ ����� ��������������*�������������� ��

��� 4 �� ��������Home����������,��| Chesapeake Bay Retrievers | German Shepherds | Yorkshire Terriers�

���� &������� ���=Chesapeake Bay Retrievers>�� ��� �

�� �����������=6 ������� >���

��

��� ��������� ���=German Shepherds>�� ����A�����)���������,��<A HREF=”german.html”>German Shepherds</A>��

��� ��������� ���=Yorkshire Terriers>�� ����6 �������8��������� ��

Page 52: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

��� )���������������������������� ��� ������ ���� ����������,��

���

��������;����� � � A������!���������� ������������ ����� ��� ����� �������,����������������������������� ���8 ��� ��� ���������������������������� ���� ������ ������������������ ��������"� �8��������������� �����������������!��� �� ����������������������� ���������� ��Home | Chesapeake Bay Retriev ers | German Shepherds | Yorkshire Terriers �

�B���� � �

�&����������"��� ������ �������=� �������>������ ��

Page 53: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

,�����������������'���

��� ���+ ����� ������� ����� �*� ���������������� ���������������������������������������������*�����������A�����)��������6 �������8�������������,��<IMG SRC=”graphics/chessie.gif”> <IMG SRC=”graphics/shepherds.gif”> <IMG SRC=”graphics/yorkie.gif”> �

��� 5��� ������������������������������� ��������������������� ������������*�������������,��<A HREF=”chesapeake.html”><IMG SRC=”graphics/chessie.gif”></A>

��

��� )�������������������������������� ��� �7���� �������� �������������*������������������������ �������� ��� ������������*������������� �

���� A ������� �+ ������������BORDER=”0”����������� ����

��������������,��<A HREF=”chesapeake.html”><IMG SRC=”graphics/chessie.gif” BORDER=”0”></A>�

Page 54: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

��� )���������������������������� ��������� �8������������ ����� ��������������*�������������������� ������ �,��

��

Page 55: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

,����� 8�� � ���$��������� ��

� � ����"�����������&����������������� ��)(���� ���� �/*��

��"# ��8 ������ ���' �������� �������������������������� ����� �! �

���� ���+ ����� ������A�����)�����������german.html �

���� 4 �� ��������Home����������,�

�| Chesapeake Bay Retrievers | German Shepherds | Yorkshire Terriers��

��� &������� ���German Shepherds�� � ��

��� ��������� ���Chesapeake Bay Retrievers����Yorkshire Terriers�� ������� ���� ��������� ���

��� )��������� ��

��� C�������������������������������� ��������� �����6 �������8��������� �8������������� ��

��� <������ ���������������A�����)��������������� ����A�����)��������� �' ��������� �����6 �������8������������� ��

��� 8��� ������������ ���� �������������� ��

��� 7������������������ ���' ��������������� ��� ������ ���� �������������������������� ����� �! �

���

�������������,�� ������������� ��� ������������ ������� ����������� ����������� �����' ��7�� ������ �� ����� 9��

Page 56: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%-�

����� ��� %�����������

����������'���)� ���������������

��� <������� ���������+ ��� ��

��� ������<BODY>��������������������BGCOLOR=”#ffffcc”,��<BODY BGCOLOR=”#ffffcc”>��

��� )���������������������������� ��� �8�������� ���� � �� ����������� ���� ����������� � �

7 ��� ������������8��ffffcc������������� ��������� ��������"�������� � � �$"�������� � ������ ��� ��� ��������� � ���� ���������������� ������������ �� �4 ��"������� ��� ������������������BGCOLOR=yellow�������� ���������������������� ���� ������������������ ����������� �����BGCOLOR=pale yellow�������� ���!��� �� ���4 ������� ��� � ����"����������������� �8���� �����������,��� ��������� ��� � ���������"� ��������������� �����"�������� � ������������������ �������� ������������������������� �����������������������������������������������,������ ������ ���

ff ff cc

Page 57: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%��

�������������� �������������8��� � ��������� ��� �������"������� ���� ��� � ��?ff@�� �� �� � ���������?00@,��

�� � � ���������� � �����

ff cc 99 66 33 00

��+��������� ������� �������"������������ ���?00@��� ������?00@����������������� ������?66@,��000066��������� ���"�������� � ��� ������ �����,���www.webmonkey.com/reference/color_codes

Page 58: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%!

����������'���������

��� ������� ���������������������LINK=”#ff0000”�� ����<BODY>����,��<BODY BGCOLOR=”#ffffcc” LINK=”#ff0000”> 8������������������ ����������� ��������� ���

��� ��������������VLINK=”#00ff00”�� ����<BODY>����,��<BODY BGCOLOR=”#ffffcc” LINK=”#ff0000” VLINK=”#00ff00”> 8����������������������� ����������� ��

���-���������������� ���������������������������� ���&�������������������� ���� ����

��

Page 59: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%"�

��� )���������������������������� ��� �8�������� ����������� ������������ ����� ���

� ������ ������������������ � ����� ������ ����������� ��� �����7����� ������������� �� ������������������ ������� ��������� ����������������=��%���������>� ����������������� ��� ���������������� ������� ������������ � ��� ���������� ������ �� ������� �

Page 60: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

% �

' ������-�������������

�"# ��8 ��������7�������� �������������� ��������������������������� ������# ��

���� ����������� �����������������=The Wonderful World of

Cats.>���

��� )��������������� ��� �����C:\����������Cats,���C:\Cats��

��� &������������ ������������=The Wonderful World of Cats.>���

��� *� ���������������� ������ �������������������������,��House Cats Alley Cats Big Cats�

��� &����������������������������(� ��.H ���

Page 61: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%%�

��� ������������������� ������������ ����� �4 ����������������=House Cats>�� ������������ ���� ���������������������housecats.html ��

��� On each of these new pages, put a descriptive heading at the top of the page. For instance, the words “House Cats” at the top of the house cats page.

��� ������������������� ������� ��������������������� �� �&�������� � �A������� �����!������������(� ��DE �A������������� ����� �������������(� ��D2 ��

��� <��������������������������������� ���� ��������������������� ��������������� �&����������������������(� ��.H ���

����A �� ����������� ������#��������������������������������� ��������������� ��������=graphics> ����������C:\Cats�� �� ��

Page 62: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%��

����������������� �������������� ������ �����E�����������������������������������������"���� � ���

�������������������������������������������� ��4���������� ��16 ��

������������� ���������=���>������������ ����� ����������� ����� ��� �<������������������=� �������>��������� �� ����������"� ��

����&������������ ���� � �� ������������������� ��

����&������������ � �� ������������������ �&������������������ � �� ���� ��

������������������������� ��� ������ ���� �������������������������� ������# �

Page 63: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%��

������� �!��"��������

���������������8�/�)5���������������$��

• '������� �������#� �• �� � ��$������#���• +����#� �������� • ,��� �#� �������#� �• '������ � ������ �����-��� �

��

9�)5����)�� ����������������'����'������$��

��

Page 64: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%��

'������� �������#� �����

��#� ����2 #��� ��������� ��������� ���� ���.%�������7�������������� �������������� �:��������������������������������� ��������������������� ����7��������������������� ���������������������������"� ��8������� �������������������� ��������� �����������������,��

��

� �� � �� � ��

Page 65: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

%��

����������������

��� ����������� ��� �����C:\����������=Travel >��

��� ���+ ������������� ������?��������index.html@������=Traveling Down South.>�)������������Travel�� �� ��

���-�������� �������&�� �������#����������������� �����������#�!����'���#�!��������������� &�����%��<HTML> <HEAD> <!--Created by Your Name--> </HEAD> <TITLE> Traveling Down South </TITLE> <BODY> </BODY> </HTML>��

��� 6 �!��� ����� �������������� �.� ����� .��������������� �����������,��

links content �

��� 8���������������� ������������� �*� �����<BODY>������������ ����������������<TABLE>����,��<BODY> <TABLE>��

��� *� �����<TABLE>��������������� ����������<TR>�?8����� �@����,��<BODY> <TABLE> <TR>��

Page 66: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-�

��� ������������ ������������������������������<TD>�?8����'���@����,��<BODY> <TABLE> <TR> <TD>��

��� ��������<TD>�������������� ��=links�>������� �����������������</TD>����,��<BODY> <TABLE> <TR> <TD>Links</TD> �6 �!��������������������������� �,

links content �

��� + ������������ ������������� ������������<TD>���������� ��Content������� �������������������</TD>����,��<BODY> <TABLE> <TR> <TD>Links</TD> <TD>Content</TD>

links content �

Page 67: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� 4������������������� ��������� ���������</TR>������������ ���������������������</TABLE>����,��<BODY> <TABLE> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE>

��

Page 68: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!

����6 ������������������������� �8 ��������� ������� ����������� �������������� �������������������BORDER=”1”�� ����<TABLE>����,��<BODY> <TABLE BORDER=1> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE>�

�����)������������������������������ ��� ������ ���� ����������,�

��

Page 69: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"�

+��������������

��� + ��� �!���"���������� ����+ ����������WIDTH=”100%”����������� ����<TABLE>����,��<BODY> <TABLE BORDER=1 WIDTH=”100%”> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE>��

��� )���������������������������� ��� ������ ���� ����������,��

��

Page 70: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� �

, �� ��� $��-�� � �����#� ��7���������� ���������������������������������!����������H--I �8������������� ������ ��������������������� ����������� ��� ��� ����������� ������ ��� �!���� ���� � ������ ����������� ���������".���������� ������� ��� ����� �!��������� ��������BJ-���"�����,��*�&��� ���������!����" �������������� �

�� �&��� ��� ��� ��!!��#�����������������$�%������������������! �����������!����� ��� �

�� �&��� �����!� ���� �������� ������ ��$�������&� ��

�� �(&��� ��������� �������!� �������

���������������������".����������� ������������ ��� ������������������ �������.�� ���� ��� ��� ��,��

��,�� 8��������������%��������'���$�&�������

/������� ��$� ���� 8������$�&�������

Page 71: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%�

���� �� ����������� ����������������BORDER=”0”,�

�<BODY> <TABLE BORDER=”0” WIDTH=”100%”> <TR> <TD>Links</TD> <TD>Content</TD> </TR> </TABLE>�

���� &����������������������������������������������

BGOLOR=”#CCCCCC”�� ����������<TD>����,��<BODY> <TABLE BORDER=”0” WIDTH=”100%”> <TR> <TD BGCOLOR=”#CCCCCC”>Links</TD> <TD>Content</TD> </TR> </TABLE>��

��� )���������������������������� ��� ������ ���� ����������,��

��

Page 72: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� 6 �!���� ������������� ��Links�������������������������� ��������.������� �8 �����H3.��"������������������� ������������������� ���������������������CELLPADDING=”16”�� ����<TABLE>����,��<BODY> <TABLE BORDER=”0” WIDTH=”100%” CELLPADDING=”16”> <TR> <TD BGCOLOR=”#CCCCCC”>Links</TD> <TD>Content</TD> </TR> </TABLE>�

���� 8 ���������������������������������������������

CELLSPACING=”0”�� ����<TABLE>����,��<BODY> <TABLE BORDER=”0” WIDTH=”100%” CELLPADDING=”16” CELLSPACING=”0”> <TR> <TD BGCOLOR=”#CCCCCC”>Links</TD> <TD>Content</TD> </TR> </TABLE>�

���� )���������������������������� ��� ������ ���� ����������,�

��������

� ��,�������� � ����������-��� ��# � �� �� �-� � ��������C������ ��

� ������������ ���� # � �� ����"������� %&��� ��

Page 73: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��������������(���� ����������

��� �������� ��������=graphics>���������Travel�� ��� ��� ���������� ��

��� A �� ����������� ������#������ �����������������������?uva.gif@�����������������graphics�� �� �

���� �����������.�������� ������ ����������������� ��Content�

��������������=Traveling South.>�A����������������(� ��DE���������������������� ��������������� � ��

���� ������������������������������������������������� ��

��

��� C��������������������� �� �����������������������������,��If you've got a couple of weeks for vacation, you might want to visit the South. Richmond, Williamsburg, and Charleston are all beautiful cities. &�������"�����������(�.H ��

Page 74: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� ���������.������������������� ��Links�������������� ����������!����������� ��,�Richmond��Williamsburg����Charleston �)���������������<P>������������������������������ ���������(�.H ��8��� �� �������������� ����������,��

��

Page 75: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� )���������������������������� ��� ������ ���� ����������,��

��

Page 76: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-

��� 8 �������������.�������!��� ������ ����� �� ������������������������VALIGN=”top”�� ����������<TD>���� �?8 �� ���������������������������� ������ ��<TD>�����������@,��<TABLE BORDER=”0” WIDTH=”100%” CELLPADDING=”16” CELLSPACING=”0”> <TR> <TD BGCOLOR=”#CCCCCC” VALIGN=”top”> <FONT FACE="arial" SIZE=”-1”> Richmond <P> Williamsburg <P> Charleston </FONT> </TD> <TD VALIGN=”top”> <FONT FACE="verdana" SIZE=”+3”><B>Traveling South</B></FONT> <P> <IMG SRC="graphics/uva.gif"> <P> <FONT FACE="arial" SIZE=”-1”>If you've got a couple of weeks for vacation, you might want to visit the South. Richmond, Williamsburg, and Charleston are all beautiful cities.</FONT> </TD> </TR> </TABLE> �

Page 77: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� 8 �� ��� ����������� ������������������������������WIDTH=”20%”�� ����������<TD>���������������������WIDTH=”80%”�� ������ �,��<TABLE BORDER=”0” WIDTH=”100%” CELLPADDING=”16” CELLSPACING=”0”> <TR> <TD BGCOLOR=”#CCCCCC” VALIGN=”top”> <FONT FACE="arial" SIZE=”-1” WIDTH=”20%”> Richmond <P> Williamsburg <P> Charleston </FONT> </TD> <TD VALIGN=”top” WIDTH=”80%”> <FONT FACE="verdana" SIZE=”+3”><B>Traveling South</B></FONT> <P> <IMG SRC="graphics/uva.gif"> <P> <FONT FACE="arial" SIZE=”-1”>If you've got a couple of weeks for vacation, you might want to visit the South. Richmond, Williamsburg, and Charleston are all beautiful cities.</FONT> </TD> </TR> </TABLE> �

Page 78: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!

����)���������������������������� ��� ������ ���� ��� ����������,��

��

����

Page 79: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"�

����������������(���� �������

��� <�����+ �������������������Edit������Select All ���

��

��� <����������� � ������������������������Edit������Copy ��

��� �<��������������������File������New ��

��� 7������������������� �������������Edit������Paste ��

��

Page 80: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� �

��� )����������������C:\Travel�����������������richmond.html ���

��� 8��������������“Richmond, VA.”��

��� <������� �������� �� ����������� ������#����������$��� ���������������� ������������������������?capitol.jpg@������������������graphics�� �� ��

��� ���������“Traveling South”������������ �����������“Richmond, Virginia.”�A����������(� ��D2 ��

��� ���������� ��������������������������� ��������� �*��������������������������������������������������“Richmond is the capital of Virginia.”��

���������� ��=Home>��� ������ ������������.������� �7���� �!�� ������������ ���� ����������,��

Page 81: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%�

,����� 8'������� �������#� ��

,�� ��&����&���������&���������� ��������������������� ��������������� ���� ����������'�� ��'��������/��

���"# ��8 ������ ���8���������� ������ ���������� ��������������� ������#��� �

���� ����������� ��Williamsburg����Charleston�G�����������

Richmond ��� ���A�����������������"��� �����7����������������������������� ������#�������������� �A������������ ��������������"��������������� ������#��������$#����� ��

��� C��������� ���Richmond��Williamsburg��Charleston�����Home����������.�������� ������������������������������������7������� ����� ��� �������1��"���� �������� ����� #���������������������)(���, ���� �*��������������������'����

��� ����������"�������������������������� ���������� ��

��� �������������������� ������� �A������������� ��1���"������������ ��H2���"�� �A������������������� �����������"� ��

��� 7���� �!�� ������������������������ ��� ������ ���� ������ ����������������� ������#��� �

������

�����������

�,�� 2�'�� ��������� ��� ���� �������������#��������� ��� �� �� �� ������ � ��������������������� ��� �������#����� � ����

Page 82: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

�� � ��$������#����

�����������.���������������������������

��� �������� ��������=Travel West>� ��� ��������������C:\Travel West ��

��� �������� �����������=Traveling West for Vacation.>�)������������Travel West�� �� ��

��� *�������<BODY>����</BODY>������������������������ ��� �����E������������� �,���<TABLE> <TR> <TD> </TD> <TD> </TD> <TD> </TD> </TR> </TABLE>��

��� A������<TABLE>������������������,����WIDTH=”100%” Border=”0” CELLPADDING=”4” CELLSPACING=”0”��

��� ����������!��������������������� ��“California.”���������� �������“The Rockies,”��������������������“The Midwest.”���

��� &�����������EEI����?"����� ��������� �������������� ���E1I,���������������%����������������� ��H--I@ ��

Page 83: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� ��������� �������������������<CENTER>�����,��<TD WIDTH=”33%”> <CENTER> California </CENTER> </TD> <TD WIDTH=”34%”> <CENTER> The Rockies </CENTER> </TD> <TD WIDTH=”33%”> <CENTER> The Midwest </CENTER> </TD>�

���� ����������"�������������� ����������(�.H��������������

������ ���� � �� ������������ �����������?K������@ ���

��� 7���� �!�� ������������������������ ��� �8��������� ���� ����������,��

��

����*� �������������������������������������������=Traveling West >�&���������������(�D1��� � ��

�����*� ������������������������������������"�,�

�When you go West, be sure to visit the sights of California, the natural wonders of the Rockies, and the cities of the Midwest.��

Page 84: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

����&����������������������������(�.H�������������� ��

����������������������� ��� ������ ���� ����������,��

���

Page 85: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

�����������.�����������������������������������

��� ���������������������������california.html.�8�������“Vacationing in California.”���

��� &�����������G����������� �� ������ �������"���������1������������ ��E ������-�1��"���� ���������������������������������� ��� ��������� ���������������� ��������#��������������;<<=�������#�����>?=��� ��������

��� 4 �����������������"��G�������� ������ ����������������������� ������������������� ��?BGCOLOR=”#ffff00”@�� ��� ��=6 ������� >���

��� 7���� �!�� �������������������������������� ��� �8��������� ���� ����������,��

��

��� ��������� ��Home�� ����� ������(<A HREF=”index.html”>Home</A>@���������������� �

���� <������� ���������+ ��� �

���� ��������� ��California�� ��������� �������� ��

���� )��������� �

�����

Page 86: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-�

,����� 8�� � ��$������#����

"# ��8 ������ ���8�����7�������� �������������������������� ������#����� ����� ����������������������������������������������

midwest.html �����������8��&���������������������������� ��������� � ��

��� ���������������������������rockies.html �8�������8��� �������� �8�������“Nature in the Rocky Mountains.”�&��������������� �����������"��������������� ���������� �������� ��

��� ���������=6 �������>���� �������� ���� � ���� ���������� ���������� �8��� �������� ���

��� �����California��The Midwest����Home�� ������������������ ���

��� 7���� �!�� ������������������������ ��� ������ ���� ����������,��

��

Page 87: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� ������������ ����������������� ��������&����������� ����!��� �������� ������������� �������������� ��=� ������� >��

���� A �� ����� ����������������������� ������������The Rockies�

���The Midwest�� ������������������ ���

��� &��������"�������� ���� ���� ���������������� � �?5"����,�����=The Rockies>�� �� ��8��� �������� @�

���� 7���� �!�� ������������������������ ��� ������ ���� ��

������������������������ ������#����� ��

Page 88: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!�

+����#� �������� �

����������������������������� ��)������������'���

��� ���+ ����� ����������� ���������������Traveling West�7����� ���

��� *� ������������� ���������������� ������������������ ��� ������� ������������� � �A�����������������������,��WIDTH=”100%” BORDER=”0” CELLPADDING=”16” CELLSPACING=”0”��

��� &����������������2BI������������ ������0BI��� ���

��

��� ���������.����������������������� ���� ��������������� ��������� �,��The Golden Gate Bridge <P> Highway 101 <P> Big Sur��

Page 89: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"�

��� �����������.����������������������=Places to visit in California.>�*� ��������������������������������������������,��When in California, be sure to see the

Golden Gate bridge, Highway 101, and Big Sur.��

��� ���������� ������ ��� ��������� ����� �� ����� ��

��� &�������"�����������.������������ ���������������(�.H ���

��� &�����������������������.��������� ������������(�DE �&����������������������������������������(�.H ��

���� 7���� �!�� ���������������������������������� ��� �

8�������� ���� ����������,��

��

Page 90: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� �

��������)���������������

��� �������������������� ��������� ���8��A ���A���*�����$�������H-H����*���)��,��

,�� ��� ��� @��

The Golden Gate Bridge

Seeing the Golden Gate Bridge

goldengate.html

Highway 101 Driving Highway 101 highway101.html

Big Sur Staying in Big Sur bigsur.html

���� � �������������� ���������� ������������������������ ����

A ���A���*������� ���

��� <�����A ���A���*������������������������� ����=Seeing the Golden Gate Bridge.>�&��������(�D2 ��

��� *� �������������������������������� ���,��

The Golden Gate Bridge isn't golden--it's actually orange. �

��� &���������������(�.H ��

Page 91: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%�

��� ��������� ���California��Highway 101�����Big Sur�� ������������������ �����The Golden Gate Bridge�����������"��� ��� ��=� ������� >��

���� 7���� �!�� �������������������������������� ��� ����

�� ���� ����������,��

��

������ ���� ������� �������������� �� ������������������������ �������������������������������������������� �� ���8����� �������������������������� ������,�� ��������������������������������������������� ���� �������������!������������ ����������� ���

Page 92: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

,����� 8+����#� �������� �

,�� ����"�������������&���������������������������� �#�������������/���

��

"# ��8 ������ ���8�����7���7������� ������ ���������� ��������������� ������#������ ����� <����������� ������������+ ��� ������8��A ���A���

*�����$�������H-H����*���)���� ������������������ ��

��� <������A ���A���*������� �� ���� ����������� �������� ��

��� ������������������ ����$�������H-H���� ���

��� <�����$�������H-H��������������� ���The Golden Gate Bridge�� ����A ���A���*������� �A����� ��������� ��������� ���Highway 101�� ������ �������������"� ���

��� ���������$�������H-H����!���������������������"������������ ����� �����������,��

��

Page 93: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� 4 ��������*���)�������� �������� �������������� ������ ����������������A ���A���*�������$�������H-H����� ����������%��Staying in Big Sur �3� �� ���%��There are many excellent hotels right on the ocean in Big Sur.�

���� )����������� ��

���� 7���� �!�� ��������������������������������� ��������� �� ��

�������������������������� ��� ������ ���� ������ ����������������� ������#������ �

�����������������������

����������

�,�� -��&����������� �������� ��� �� �#������������ ���� ��� ��

Page 94: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

,��� �#� �������#� ��

��� ���+ ����� ������A ���A���*��������?goldengate.html@ ��

��� ����� ��� ����������������� ������������������������������������,��2�� ���1������������� ���WIDTH=”200”�CELLPADDING=”8” ���-����� ������������������#� ����������� ����@���������������� ������� �����������������������% <TR> <TD> </TD> </TR> <TR> <TD> </TD> </TR>��+ �,�������������������92--9������������������������"�������������������������� ��

��� � � ������ ����������?#0000ff@�������� �� ����������?#cccccc@ ���

��� ������� ��������������� ����“A Whole Lot of Paint.”���������� ��������������� � ���

Page 95: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� ������� �� �������������������,��The Golden Gate bridge is covered with enough paint to coat four battleships.�

���� &�������"�����������(�.H ��

���� )���������������������������� ��� �7���� �!�� ������

�� ���� ����������,��

��

��� &�������"��������� ���������� �' �����������������COLOR=”#ffffff”����������� ����<FONT>����,��<FONT FACE="arial" SIZE=”-1” COLOR=”#ffffff”> <B>A Whole Lot of Paint</B> </FONT>�

Page 96: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-

��� �����ALIGN=”right”����������� ����<TABLE>����,��<TABLE WIDTH=”200” BORDER=”0” CELLPADDING=”8” ALIGN=”right”>��

����)������������������������������ ��� �8�������� ���� ����������,��

Page 97: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

'������ � ������ �����-��� �������������������������������

7����� -��� ��=4����>����������� ������ ������� ��7��������������� ����� �����!�������,��

�������

������� ��������

�������"����� ������������������������������ �����%�#�� ���&���������������������������� ������������������������� ������.������� ��� �8���!��������������������� �����������,��

• 4������������������ ����� �5������������ �������� ��� �������� ���������� �,������������������������������� � ������ �� ������������ �

• 4������������ ����������� ��������%�����������=������>������� ��� ������� ����� �

• 4����� �����%����� ���� ���� ������ ����������� ������� ������ �

�$ ��������������������� �� �������,�������� ��������� ���������� ������������ ������������������������� ���� ��������������� ��� ����"����� ����������������������"������������������������� ����������� ���8��� �� �����"������ ��������� ��� ����������� ��� ���� �������������� �"���������� ��

Page 98: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!

��� <�����A ���A���*����������������������������� ����������� ������,��

Visit the Web site for the Golden Gate bridge at www.goldengate.org.����� � ����� ���������������� �������������� ��

��� ���������������������������������framesetgg.html �8��������������=������>����������� ����� � �������� ���

��� �����������$8&��� ���� ����������������,��<HTML> <HEAD></HEAD> <TITLE>Golden Gate Frameset</TITLE> <FRAMESET ROWS="50,*"> <FRAME NAME="topframe" SRC="backtogg.html"> <FRAME NAME="bottomframe" SRC="http://www.goldengate.org"> </FRAMESET> </HTML>����

Page 99: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"�

���-�����ROWS=”50,*” ��� �������������<FRAMESET>���������������� �#��������#������������� �#��?<���'��������������������������������#�� �#����������������� ������������������������������������������������� �#������������������������������������8������8����0 ��������������������#�� �#�������������������'�� ��������%����������������� ���

Link back to the Golden Gate Bridge page �

The goldengate.org site will display here �

���� )���framesetgg.html �

���� ���������������������������backtogg.html �8��������������

����������� ������������������� ����A ���A���*������� ���

��� A������������������������������� �������������������� ����,�Back to the Golden Gate Bridge page ���

��� C��������� ��������������TARGET=”_top”����������� ������������ ����A ���A���*�������,��<A HREF=”goldengate.html” TARGET=”_top”>Back to the Golden Gate Bridge page</A>���

Page 100: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� �

���-�����TARGET=”_top”���� ������������������������������������������������� ����� �#�A�������� � 3��� ���� ����� -���

�Back to the Golden Gate Bridge Page

� ��

Golden Gate Bridge Page

�L������������������������������������������������������#��������������#��� �#�%�������� � ,�� ��� �������� -���

Back to the Golden Gate Bridge Page

Golden Gate Bridge page

���

� �

���� &��������������������(�.H������ � �

���� )��������� �

Page 101: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%�

����<���framesetgg.html �������� ��� ������ ���� ����������,��

��

���������� �����Back to the Golden Gate Bridge page ����� ������ �������� �������� ����A ���A���*������� ���

Page 102: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

���-����#��������� �#����������#� ��� ���������������� &������������������������ ����������framesetgg.html%��<HTML> <HEAD> </HEAD> <TITLE>Golden Gate Frameset</TITLE> <FRAMESET ROWS="28,*" FRAMEBORDER=”0”> <FRAME NAME="topframe" SRC="backtogg.html" MARGINWIDTH=”12” MARGINHEIGHT=”4” SCROLLING=”NO” NORESIZE> <FRAME NAME="bottomframe" SRC="http://www.goldengate.org” MARGINWIDTH="12" MARGINHEIGHT="12" SCROLLING=”AUTO” NORESIZE> </FRAMESET> </HTML>�����

Page 103: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

' ������-�������� �!��"������

�,�� ��&��������#�� �������������������������������&����������#������������

� �� ������������ ������������������/���

��

0�� ������������#���#�#���#�� ���������������#���������������#������� �#������� �/���

��

"# ��&���� ���8�����7���7������� ����������� ��������� ��������������� ������#��������

���� ���� ������� ���������������������� ����� ����������California�

��� ������������� �����6�����������%��Nature in the Rocky Mountains��

��� ����������� ������������� ��� ��The Rockies���������� �,��Streams Snow Rock Formations��

��� &������������������������������������ ���G�����������A ���A���*�����$�������H-H����*���)������� ���

,�� ��� ��� 7 �����

Streams streams.html Mountain Streams Snow snow.html Snow in the Rockies

Rock Formations

rocks.html Rock Formations

Page 104: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

���

��� ������������ ������������Midwest����� �� �������� �8��������� ��� �����Midwest ���� ����,��St. Louis Chicago DeMoines �

,�� ��� ��� 7 �����

Midwest midwest.html Cities of the Midwest St. Louis stlouis.html St. Louis

Chicago chicago.html Chicago

DeMoines demoines.html DeMoines �

��� <����������� �������������� �.� ��� �.�������".����������2--���"���������������������� ��1 �� � ������������ ��?BGCOLOR=”#ffffcc”@ ���

��� ����������������������������“In the past, Chicago was home to Al Capone, Mayor Daley, and the nation’s biggest stockyards.”��

��� <�����)� �� ��������������� ����"������7��������� ��� ��� � ������������� ��3� �� ������ ���������������%��Find out what’s going on in St. Louis at www.stlouis.com. �

��� 7���� �!�� ��� ������8�����7��������������� ��� ������ ���� ����������� ��������� ��������������� ������#������ ����

����

Page 105: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��

���� ����������

���������������8�/�)5���������������$��

• "�� �/0�+���• �� � -����• ����� ������� �� �• 0����� ���� �• 1������� ���2 #� �$ �

��

9�)5����)�� ����������������'����'������$��

��

Page 106: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�--

"�� �/0�+����������������

��� ���+ ����� ���������� ������ �����Travel West�7����� ��

��� *��������<HEAD>�������������?<!--your name-->@����������������������<META>������ �����������������!��� �����,��<HEAD> <!--Created by Your Name--> <META NAME=”description” CONTENT=”This is the Travel West Web site. It contains information about vacationing in California, the Rockies and the Midwest.”> </HEAD>��

/0�+����&58����������$8&������������������������������� �� ��������������������=��� ���������� ��������� ������ ���� �&58����������������������� ����������"��������������� ��&58������� �!���� ����� ����7����� ����������������������������$8&��� �

Page 107: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-��

��� *��������=������� �>���������������������<META>������ ��������������� ��,��<HEAD> <!--Created by Your Name--> <META NAME=”description” CONTENT=”This is the Travel West Web site. It contains information about vacationing in California, the Rockies and the Midwest.”> <META NAME="keywords" CONTENT=”traveling, travel, west, California, rockies, midwest, golden gate bridge, highway 101, Big Sur, streams, snow, rock formations, St. Louis, Chicago, De Moines”> </HEAD>

�����

Page 108: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-!

�� � -�����

��� ���������������������������infoform.html ���

��� 8�����������=Request for Information>�����������������Travel West�� ��� ��� ���������� ��

��� *� �����<BODY>������������������,��Fill out the following form to get more information about traveling West:��

��� *� ��������������������<P>������������������<FORM>����,��<BODY> Fill out the following form to get more information about traveling West: <P> <FORM> </BODY>��

��� *� �����<FORM>�����������������������1�� ������2�������������� � �&�����������B-I������������������ ��1�������� ��� ��H ���

Page 109: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-"�

��� ������� ���������.�������������,��Name: Address: E-Mail:�

���� )���������������������������� ��� ������ ���� ����������,�

��

��� ������� �������.������������������"����������� �' ��������������<INPUT>����,��<TR> <TD>Name:</TD> <TD><INPUT TYPE=”text” NAME=”name” SIZE=”20”></TD> </TR>��

���-�����TYPE������������������)text�*��������#������������'���'������NAME������������������)name�*�������������������� � ��������������"����� ������������� ����� ���#�������SIZE����20���� ���� �!��������������������'���'��

Page 110: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�- �

��� )��������������������������� ��� ������ ���� ��� ����������,��

��

�����������"�� "��������������"��� �Address����E-mail������� �+�������������"�� "��"��� �Address�=address�>������������������"�� "��"��� �E-mail�=email >���<INPUT TYPE=”text” NAME=”address” SIZE=”20”>�

�����)���������������������������� ��� ������ ���� ��� ������

����,��

��

� �����#��

Page 111: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-%�

���������������� �!�������.���������������������������� ���<INPUT TYPE=”submit”> �C�����VALUE����������� ������������"��������� ��������� �,��<TR> <TD>E-mail:</TD> <TD><INPUT TYPE=”text” NAME="email" SIZE=”20”></TD> </TR> <TR> <TD></TD> <TD><INPUT TYPE=”submit” VALUE="Send me info"> </TD> </TR> </TABLE>��

����)���������������������������� ��� �7���� �!�� ������������ ���� ����������,��

��

Page 112: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-��

������ ������ ����� �����������������������"�����������.���������� ��������� ��MTD><P ALIGN=”right”>Name:</TD>�

�����&���������.��������������������� ��BI����������������.

��������������������� ��1BI��� ��

���-�0&�������&�������������������������������� ��� ��������������������� ���������������������#��������#����������

�����)�������������������������� ������������� ���� ����������,�

��

Page 113: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-�

����<������� ���������+ �����������������������,��Get more information about Western Travel mailed to you��

��������������������� �infoform.html ���

����)���������������������������� ��� ������ ���� ����������,��

��

���������� ��������������� ������ ���������������������������� �� �

��

Page 114: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-��

���

/������-��������8 �������� ���� ����������� ����������������� ��� �8 ���������� ��� �� ���� ���������ACTION����������� ����<FORM>���� ���� ������������ ���7����������������� ��� ����������������� ��� ���� ��������� �4 ��"������������� ��� ����� ���������� ��� ���������������,��<FORM METHOD=”POST” ACTION="http://www.yourdomain.com/cgi-bin/formmail.pl”> 8������������� ���� �� ������������ ����� ����������� ������ ��� ������ �� ���� � � �8������ ������������������� ����������.��������� ��� ����� ���� � �

Page 115: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�-�

,����� 8�� � -�����

��� ���������������������������favoritesform.html �8�������=My Favorite Places >��

��� ��������� ��������������������������� ���� �������� �������������� � �4���������������������"������ ��� �G��������� �,��

���-����������������� ���� �� �������������������������%��<SELECT NAME="select"> <OPTION>First Choice</OPTION> <OPTION>Second Choice</OPTION> <OPTION>Third Choice</OPTION> </SELECT> ����������������� � ����������������������������%��<input type="radio" name="radios" value="radio1" checked> This is radio button 1 <br> <input type="radio" name="radios" value="radio2"> This is radio button 2���

���� ����

���

>����

#����

Page 116: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��-�

��� ��������������������� �. �������,��California The Rockies The Midwest��

��� 7������������������������������������������ ��� ������ ���� ����������,��

���

Page 117: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

����

1� ��� �� �������������������������

�� ������������-��� �� ��)����������������"������ ������� ��� ��������� ������� ���������7������ �8������ �������������������� �������������������� ����� ��G���� ���������� ���4 ��������������� ���������H�---�����7��������������������������� �������� ���������������� � �� ������������ �!� ������� ���������������� � �� �� ���������� �7��� ��������������� �!������ �������H�---�������������� ��)���������������� ������������������ ����"����� ���������������� ����� �� � � �7���� ��� ���� ������� �� ���������������� ��������9���� �!�������������������������������5"�� ����� ��� ���8���!��������������� �����������������,����!���������������������������� ��� �����������.����������������������5"�� �������� ����������������� �����+������+������ �� �� ������ ���� ��

Page 118: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��!

�����������/����������

��� ���������������������������format.css ��

��� )��������������� ��� �����C:\����������CSS Site ���

���-�������������&��������������������������+�"������������������������������� #����������� ����������������"���� �������+����������������������������������� ����������'�������%�.css� ���� ������.html.��

��� <�����������format.css���������������� �� �������������� �,��.bodytext {font-family:"Courier New", Courier, mono; font-size:11pt; font-weight:bold; color:”#ff0000”; background-color:#ccccff”} $��������� �� ���������� ������ ������������������ ���� �����.bodytext�����,�� .bodytext """" 8������ ���"��� ���� ����� �

font-family

"""" 8��� �����������������"���� ����������� �4��������� ������� ���� ��� �����+�������� ������������� � ������ �� ��������4���������)-�� �� �$��*�������������#���� ���� �����������#����������������

font-size """" 8����(� ������"� �C��������$8&���������������� ����������� ������(��� ����� ��

font-weight

"""" * �� ���������"� ��

color """" 8��� � �� ������"� ��

background-color

"""" ����������� � �� �����������������������������"� �

Page 119: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��"�

��� )���format.css ������ ���� ����������,��

Page 120: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�� �

��/�����/����������

��� ���+ ���������������� �������������������CSS Site�� �� ���

��� 8�������� ������=Style Sheet Demo Page >��

��� *� �����<BODY>��������������"��CSS Site �&����������(�H�������������<H1>�����,��<BODY> <H1>CSS Site</H1>��

��� ������������������������������������������=���������)����)���������� �����������"����� ��� ��� ���������7������,>��<BODY> <H1>CSS Site</H1> <P>Cascading Style Sheets are a powerful and flexible tool for formatting Web pages</P>��

��� )���������������������������� ��� ������ ���� ����������,��

��

Page 121: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��%�

��� *� �����<HEAD>����������<LINK>����������� ������ �

format.css,��<HTML> <HEAD> <LINK REL="stylesheet" HREF="format.css"> </HEAD> <TITLE>Style Sheet Demo Page</TITLE>��

��� ������<P>�����������CLASS���������������� ������ ����.bodytext�����,��<P CLASS="bodytext">Cascading Style Sheets are a powerful and flexible tool for formatting Web pages.</P>��

��� )������� ������������������������ ��� ������ ���� ����������,��

�8��� �����!��<LINK REL="stylesheet" HREF="format.css">����������� �format.css�� ��� ������������������ �� ��8������������ ��������������� ����.bodytext������ ��format.css�� ��� ������������������ �� ���

Page 122: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

����

���-��������������#����&������������� #����������� ����������������@�������� ��������#��<LINK>�����������������������2� ����������������� ���� ��;<<��������������CSS Site�����&�������������������������#��<LINK REL="stylesheet" HREF="format.css">����������� #������&���'��������#����&��&�����������<P CLASS=”bodytext”>���������

Page 123: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

����

����������'����������������/�������������������������������������

;���������A��� �� ��)������������� ���������� ���������������7����������������� ������������ ������������������ �8������������ �������� ������� �� ��������������������������=���������)����)���,>��+���������������� C� �?<FONT COLOR=”#ff0000”> This is red text.</FONT>

?�$ ���� ����� ���������-��� ��� ?<STYLE TYPE="text/css"> .greentext { color: “#00ff00” } </STYLE> <BODY> <P CLASS=”greentext”> This is green text.

?������$ ���� ����� ���������-��� �� �<LINK REL=”stylesheet”HREF=”format.css”> </HEAD> <BODY> <P CLASS=”bodytext”> This is blue text.

�8��� �� �����"�������� ��������.�������� �

Page 124: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

����

��� �������))�)���� ���� ������� ���������+ ��� ��

�����*� �����<HEAD>����������������,��<LINK REL="stylesheet" HREF="format.css">�����������,��<STYLE TYPE="text/css"> <!-- A:link {color:"#ff0000"; text-decoration:none} A:visited {color:"#ff0000"; text-decoration: none} A:hover {color:"#00ff00"; text-decoration: underline} --> </STYLE>��

����*� ��������������������������������������,��A good resource for learning more about style sheets is Webmonkey.��

������������� ��=Webmonkey>�� ����"����������

http://www.webmonkey.com ���� ���������� ��Webmonkey�� � ��

����)������������������������������ ��� �7���� ������� ������� �� ������ ��Webmonkey������� ����������� �������������� �������������� ��

��

"��

����

Page 125: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

����

,����� 81������� �� ��

��� <���format.css����+ ��� ��

��� ������ �� ������������������� ���� ����� � ��"������,��.heading {font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 48pt} �

��� )���format.css ��

��� <������� ��������������,��<STYLE TYPE="text/css"> <!-- A:link {color:”#ff0000”; text-decoration: none} A:visited {color:”#ff0000”; text-decoration: none} A:hover {color:”#00ff00”; text-decoration: underline} --> </STYLE>���������� ��������<LINK>����,��<LINK REL="stylesheet" HREF="format.css">��

Page 126: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!-

��� �����CLASS=”heading”����������� ����<H1>���� ��<H1 CLASS=”heading”>��

��� )������� ������������������������ ��� ������ ���� ����������,��

�����

Page 127: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!�

1������� ���2 #� �$ ���������������������

��� ' ��� ��7)N48���5�������������� ���

��� <�������� ���� �6 ���� ����������������Session Properties���� � ������ ���� ����������,��

��

��,�48��������� ��=4���8��������� � � ���������� �������������������� ������� ������������ �C�� ������������ ���7��������%������������48��� ����� ���8��� ���� �������� ��������� ���� ����� ��� ��7��������� ������������7)N48� �8���5����� ����������������� ��� �������� ��� � � �� ����� ��� �� � � ���8���� ����� ��� ����OE/ /B������������ ���� ���������7������ ������ ����������������������� �������� � � ��*� �������������� ���� ����� �����������������������5����� � ��

Page 128: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!!�

��� ���������New����� � ���

��� ������Profile Name��"�� "������������� ��� ������ ���� �������������=Upload my Web site >���

��� ������Host Name/Address��"�� "������������� ���������� ��� ���7������ ����������� �����������www.visibooks.com��washington.patriot.net�� ��207.176.7.217 ���

���-�-�������&�� ������� � ���#����� ��� ����������������������$�#��� �+3�,�� �������&�� ������� � ������������ � ���#����� ��� ���������������&�&�� �5�� �+1�����3����� ����

���� �������Host Type�������Automatic detect������������ ���

User ID����Password ���

��� ��������Save Pwd������ "���������������Apply����� � �8��Session Properties���� ���� ���� ��� ��� ���������������,��

��

Page 129: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!"�

��� ���������OK����� ������������ ���7����������� ���������7)N48����� ������������ ������ ���� ��� ���������������,��

����

��� ������� �� ��������.����Local System���� ��� ���.������ ��������� ���� ���� ��� �� ���������������������� �' ���.���������������� ����� ����C:\���� ��

����' ���.������ ������ ���� ���������� ���7������� � �������� ��

���������������.����Remote System���� ��� ���.������ �����public_html�� ���� ������ ������������� �� ������� ��������� ���

B�������� � 2 #� �$ �

Page 130: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�! �

����6 ���� ���� ����� ���7������� ��� ���� ��������� ��� ���7������ �8 ���� ���� ���7�����������������������

���������� ����� ����� ��� ��������� ����7������ ��

���-�+����� ��� ���� ���&����������&�� ������� � ����������������&���������� ������ ���������������� �����������������#���������#���

Page 131: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!%

' ������-����� ��������

�� � �� ���� ��� ����� �

��� ����������� �����������=World Dances >�)���������C:\Dance ���

��� �������� ������� ��������������� �����������,��

���-�8�������� �������������'���� ������������������������ ����� #����!���

��� ������� �� �� �������������� ��������������������������.����������� ���� P� ����� �� ��

Page 132: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!�

�� � ����� ������� ��

��� ��������� ���American��Latin�����European��������������� ������� ������������� ������� ���������������������5�� ������������������ ��

���-�8��������#�����������'���� �������������������������� ����� #����!���8�������������������� ���� ����������,��

��

��� &���������������5�� ���������� ��� ������������������������������� ��

Page 133: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!�

�� � ��#� ������� ��

��� <������������������������������� ���Lindy Hop����Foxtrot�� ����������� ������� ���� ������ �8�������$ �������� ���� ����������,��

���-�8��������#�����������'���� ������������������ ������������������������������� ����� #���&���

���� &������4 "�� ������� ��� ���������������������$ ����� �

���� ��������������� �������8��� ��&���������)������ �����

���������� � ��

��� ��������������� �������7���(����� �����'�������� �����5�� �������� � �

Page 134: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!��

/0�+����

��� �����������&58��������� ��������� �����,��'������� ������7 ������������� ����� ���� ���������������������5�� �������� ��

��� ����������&58����� ���������� �����,��dance, worldwide, tango, merengue, salsa, lindy hop, foxtrot, waltz, contra dancing ��

Page 135: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�!�

�� ����-�����

��� <������ ���������������� ��������� �����������,��

��

��� 7���� �!�� �������������� ��7�������������� ��� ������ ���� �������������������������� ��������� #����! �

���

Page 136: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"-�

���

Page 137: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"��

&����������������

���������������8�/�)5���������������$��

• 0�����#������������� �• 0��������� �3"��• "�� ������4������� • �� ��-���� �������

��

9�)5������������������������'����'������$��

Page 138: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"!�

0�����#������������������

��� <���+ ��� ���

��� �������������������������������$8&�������������� .��������,��Rows: 1 Cells: 2 Width: 100 Percent Border: 0 Cell Padding: 18 Cell Spacing: 0��

��� )���������� ��� ���� �����!��'��� ������������������advlayout.html �8�������Advanced Layout ��

��

��� A���� ����������������������������������� ���� � ��?#000099@ ��

���� &����������������H-I������������� ������/-I��� �

Page 139: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�""�

��� A �� ���������� ��� �������� ��������������techtool.gif� ��� ���� �����!��'��� � �������������������.������� ��

���� A �� ���������� ��� �������� ��������������bkgd.gif� ��

� ���� �����!��'��� � �&��������������� ��� ����������.�����������������BACKGROUND���������,��<TD WIDTH=”90%” BGCOLOR="#000099" BACKGROUND=”bkgd.gif”>�

���� �����������.�����������������"���=The Magazine for People

Who Like Gadgets >��

��� &�������"�����������(�DH��� � ���

����� � ������"������ ���

������������������������� ��� ������ ���� ����������,��

���-�$������������������� ������������#���������������� ��bkgd.gif�������� ����������+�� �������������������� ������ ��������������������������������������������������������������;BC���'��������%�;<<���'������ ��������������������BC��� �-����3�������7;D���'������������������������#����������������9����bkgd.gif�������&�;>B���'��������E���� ��� ������ �"��;B���'��������������������������������'���������������#������������� �� �#������3����������2� ��� ���� �3����������� �����#������������� ������#����;BC���'�����������

Page 140: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�" �

����*� ����������������������������.��������������������� ��H--I������������� ��1 ���!��� ����������������� �����- �&�����������%������������� � ����������� ��

�����������������������������"���=���� �� >��������� ���=������ ���>����������������=�'�� >�&�������"��������������������������������� ��

����)���������������������������� ��� ������ ���� ����������,��

���

Page 141: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"%�

0��������� �3"���������������

��� A �� ����������� �����# ��#'�&������������spacer.gif� ��� ���� �����!��'��� � ��

��� *� ������ ���� ��������������������������G��������������������� ��

��� ������spacer.gif ���������.������� �A������������� ��100���������� ��1 ���<TD WIDTH="10%" BGCOLOR="#000099"><IMG SRC="spacer.gif" WIDTH="100" HEIGHT="1"></TD>��

���-����������� �8+2��� ��;';���'���������������� &�4�����&��������������������� �����������?<'?<����#������������ �����������������

���� ��������������� ���� � �� ���������� ���������spacer.gif�� �

���������� ��?#ffff00@ ���

2���� ���� �3"��D�)�����A�4��������� ������������������� ����"�������� �8������������������� ���������������������������� ��������!�������� ���� � � ����������A�4�������������"������� � ���������������� ��������.��������� ���������������� �������(� ���� ���� �� �������������� ������� ��

Page 142: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"��

��� �����"�������������.��������� ��������� ���������������������������� ���,��

��

��� )������� ����� �������� ���� �9H-21"03J���"�� �8�������� ���� ����������,��

�+ ����� ��������.���������������� ������ �� ���������������������������������� ���������� ������� �������� �������� ��

Page 143: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"��

"�� ������4������� �

��� *� ������"�������������.�����������������<P>������������������ ����� ��( ��������,��You can read our product reviews and also offer your own opinions and observations on high tech products. <P> <HR>���

���� 8�������������E.'���� �8 ����������������� ��������

����������NOSHADE ���SIZE=”1”�� ����<HR>����,��<HR NOSHADE SIZE=”1”>�

���� ������"���� ������ ��( ���������� ����� ����������������

������������ ���,��

Page 144: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"��

�� ��-���� ��������

��� ������<BODY>�����������LEFTMARGIN��RIGHTMARGIN��TOPMARGIN��MARGINWIDTH����MARGINHEIGHT���������� �A������������������ ��(� ,��<BODY LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0">��

���-�����LEFTMARGIN��RIGHTMARGIN������MARGINWIDTH�7�����������TOPMARGIN���������������� 9���� �������� �� ���������������������� �� ���� ������ �����%�+��� ����.'��� � � ������:���LEFTMARGIN��RIGHTMARGIN�����TOPMARGIN��������$��������$������ � ������:���MARGINWIDTH�����MARGINHEIGHT���

��� )�������������� ���� � �� �������?#ffffff@�� ���������� ���������������!���"� �)�������������� ���� � �� ����������?#000099@�� �������������� ���

��

Page 145: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�"��

��� )���������������������������� ��� �7���� �!�� �������� ���� ����������,��

���

��

Page 146: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� -�

' ������-�&��������������

���� A�������������� �������?��� ����������� ���������� ������

�'��@��������� ���

��� ����|�����������? ����������������������������\���������� ��� ������ ��@���������������� ��������� �������� ������������� �� ���

��� A�������������������|������������������ ��HI�������������!������������������������� ��

��� � � �����|��������������� �7���� �!�� ������������ ���� ��������� ��������������� �����# �#��� �#'�&,��

��

Page 147: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� ��

' ������������ ������

���������������8�/�)5���������������$��

• 0��#� �����$ ���������• 5� �� ��������• 6����� -�������

��

9�)5���������������)����������������'���'������$��

��

��������������.�������������'��

��

2������������� ����

���� �����������

Page 148: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� !�

0��#� �����$ �������������������������

2����E�$������D�:���)������������� ���������������������������������$8&��� � ����7����� ���!��� ��������������.���������������������DD��:����� ����������!������ ��� �����7������� ��������:���)������������� ���� ��������������� ����������7������ ����8��� �� ��������� ���� ���� ��� ��� ���� ��:���)�����!������� ��������������� �� ����� �!�������� ��� ��� �������� ���������:���)����� ������������� ��������������������G��������,�������������������������������������� ����� �������� ������ ��������� �!��������� ��� � ������������ �����:���)������������������ ��������� � ������� ������ ���8�������� ��������������������� �8�������� ������ ��:���)������������������������ ����� �����7���������� ������������� �!������� � ������7�����9����� ������� � �������� ��(���� ���2�������������� ��� �) ������� �!�������7�������������� �� �������=��� ���� ������������Q>��*���������������!��$8&�����:���)������� ����� ��� ���������� �� ��6 ��������� �� ���� ����� ������������� ������� �!��� ������ ������� ������ �)��������!��� ������ � ��� ����� �� ��7����������!����������� ������� ���8��� �� �����"������� ���� ��� ��� �� �������������� �������"�������:���)������� ������ �� ����������������� ��� ���7������ �

Page 149: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� "�

�������)������ ���

��� �������� ��� ��� ����������������=rollover�>����C:/rollover ��

��� C���������� ������ �� ����������� �����# �#��� �#'�& ��

��� ����������!��� ����� �������������View�������Source ��

��

Page 150: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� �

��/���)������ ���

��� ��� ��� ��+ ���������advancedlayout(1)�������������������������� �)�����������$8&�������� ����� ��

��

��� �����������������������+ �������������������� ���$8&��� ���� ��� �

���� )�������������C:\rollover����index.html �

���� �������� �������������rollover�� ��������graphics,�

C:\rollover\graphics ���

��� A �� ����������� ���������������� ��������������"�������������������������������graphics�� �� ��

Page 151: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� %�

��� A �� ����������� ������������� �8������������������������� ���������� �� ��������,�

���� ��������� ����� ������������������

���� ���������������������<SCRIPT>�����</SCRIPT>����� ���!����������<HEAD>����</HEAD>�����,��

��

��� � ��������:���)������� ��

��� ���������:���)������� ���������<HEAD>����</HEAD>���������index.html �

Page 152: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� ��

0� ��/���)������ ���

��� 6 �!���� ����������������� ���������������������������:���)������?laptops2.gif��laptops.gif��cellphones2.gifL@� �!��� ���� ��������������� ������������������ ������������� �� ���& �������� ����� �� ������������ ��������������� ��� �����������,��������img1on = new Image(); img1on.src = "graphics/lapbright.gif"; img2on = new Image(); img2on.src = "graphics/cellbright.gif"; img3on = new Image(); img3on.src = "graphics/pdabright.gif"; img1off = new Image(); img1off.src = "graphics/lap.gif"; img2off = new Image(); img2off.src = "graphics/cell.gif"; img3off = new Image(); img3off.src = "graphics/pda.gif";�

��

3������������ � �� �

���������--����

3���������������� ���������������

Page 153: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� ��

��� A ������� ����������� ���������������������� ������������������!��� ����� �)�� ��� ���������� �������� �� ������� ����������� ����������������������������� ����� ��

��� $������������� ���������� ��������������onMouseOver����onMouseOut����������������� ��������� ������?</a>@������������������������� ����������� �laptops.html,��

��

��� ���index.html�������� ������� ��������������|����������������� ��

Page 154: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� ��

��� ������������ ����������������������������� ����� �index.html�� ��������������� ��Laptops,��2 �#�����%��<TD WIDTH="33%" BGCOLOR="#000000"><CENTER><FONT FACE="arial" SIZE="-1" COLOR="#ffffff">Laptops</FONT></CENTER></TD>���������%��<TD WIDTH="33%" BGCOLOR="#000000"><CENTER><A HREF = "laptops.html" onMouseOver = "imgOn('img1')" onMouseOut = "imgOff('img1')"><IMG SRC="graphics/laptops.gif" WIDTH="120" HEIGHT="20" BORDER="0" name="img1" alt="Laptops"></a></CENTER></TD>��

���� ������������������ ������������������������� ��

laptops.gif�� �� ����������,�lap.gif ��

��� )���index.html������������������� ��� ������ ���� �����������,��

Page 155: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

� ��

,����� 80��#� �����$ ����������

��� �������������� ������ ��index.html������������ ���=������ ��>����=�'��>������� �� ����������� �C��������������cellbright.gif��cell.gif��pdabright.gif����pda.gif �����-������&���������� ����������#������������������ ���������� ���������������� �������<A HREF = "laptops.html" onMouseOver = "imgOn('img1')" onMouseOut = "imgOff('img1')"><IMG SRC="graphics/lap.gif" WIDTH="120" HEIGHT="20" BORDER="0" name="img1" alt="Laptops"></A> �

��� 7���� �!�� �������������������������������� ��� ������ ���� ����������,��

Page 156: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%-�

5� �� ���������

��� ���+ ����� ���������� ������� �����8�����7���7�����,�index.html����C:\Travel West ���

��� �������� ������ �� ����������� ����������� �� ���

��� �������� ����� �� �������� �$������������� ������:���)������� ���������<HEAD>����</HEAD>����� ��

��

��� ���������� �����<META>���������index.html,��

��

Page 157: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%��

��� ���������:���)������� �� ��������� ����infoform.html������������� �,��2 �#�����%��<SCRIPT LANGUAGE="JavaScript"> function Contact() { OpenNewWindow = window.open('contact.html','help','toolbar=no,location=0,directories=no,status=yes,menubar=0,scrollbars=yes,resizable=yes,width=300,height=350'); } </SCRIPT>���������%��<SCRIPT LANGUAGE="JavaScript"> function Contact() { OpenNewWindow = window.open('infoform.html','help','toolbar=no,location=0,directories=no,status=yes,menubar=0,scrollbars=yes,resizable=yes,width=300,height=350'); } </SCRIPT>�

���-����� ���������������!��"����� �� �##��������������+���� �������� ���������4������� ������������,��������"����������������������� ���������� ����������� �������� ������������������������� ������������

Page 158: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%!

��� �������� ����� �������������������� ����������� ������

��� 4���������� ��������������<BODY>����</BODY>����������������� ����:���)������������ ��Contact() ���<FONT FACE="arial" SIZE="+1"><B><A HREF="javascript:Contact()">Open new window with form inside</A></B></FONT>

���-�,���������������@����� �� #����&���� �� �#��������������������#���Contact()��+���@�������������������������������������������������������������������

��� � ���������� ���������������������� ���" ������ ��������������� ��������� ������2 �#�����%��<A HREF="infoform.html">Get more information about Western travel mailed to you</A>���������%��<A HREF="javascript:Contact()">Get more information about Western travel mailed to you</A> �

��� )���index.html������������������� ��� ���

Page 159: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%"�

���������� ��������������� ��������� ���� ���� �������������� �������,��

����-�����������������:����������� ������������������������������������������������������ �window.open%��OpenNewWindow = window.open('contact.html','help','toolbar=no, location=0,directories=no,status=yes,menubar=0, scrollbars=yes,resizable=yes, width=300,height=350')�

����� �����F���� ����-� ����#���� #����-

� ������

����� �������� ���$��� ������� ��4 �-

����������� ��

Page 160: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�% �

6����� -��������

#�������������'���

��� ���+ ����� ���infoform.html ������8�����7������ ��

��� �������� ������ �� ����������� ������#�� #� ��

��� ������ �����Send me info����� � �7���� �� ������������� ���� �������� �7���� ������� ����������������������� ����� ������������ ���� �������������������=Please input your address >�8������� �� ������������.���������� ��

��

Page 161: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%%�

�����������.��� �������������

��� �������� ���� ���������������������� ������#�� #������� ������:���)��������������<HEAD>�����,��<script> <!-- function validate() { if (document.info.name.value=="") { alert ("Please input your name.") return false } if (document.info.address.value=="") { alert ("Please input your address.") return false } if (document.info.email.value=="") { alert ("Please input your e-mail address.") return false } } //--> </script>

���-��� �"�������� �#�������'�����������if������#����� ������%�

if (document.info.address.value=="") �

��� ����������������<HEAD>���������infoform.html ��

���� ������� � �����-������ �%

��� E�$����������#� #���� ����� ����C

��������

�����-����� �� �-

@�� �--���

"� ��-� �����-� ��

� �� �#����-� ��

Page 162: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%��

0� ��/�����1+2304������

��� ����NAME����������� ����<FORM> ��� �+������� ���=��� ,>��<FORM NAME="info" METHOD=”POST” action="http://www.yourserver.com/cgi-bin/formmail.pl">��

��� ��������������ONSUBMIT�� ����<FORM> ��� �8������� �������������������������� ��������������� ������������ ��return validate(),��<FORM NAME="info" METHOD=”POST” ONSUBMIT="return validate()" action="http://www.yourserver.com/cgi-bin/formmail.pl">��

��� )��������� �+ ����� �����:���)�����!�������������������������������������������������� ��!������������,��(�� �$�)�(*""�!�������� ������+,�-��!�+���������!����� ���..//,�-���� ��+/0������$���1�� ����/,�� �� ��!����2��!�+���������!����� ��� ���..//,�-���� ��+/0������$���1�� ���� ���/,�� �� ��!����2��!�+���������!������ ���..//,�-���� ��+/0������$���1�� �"������� ���/,�� �� ��!����2�2�33"")�(3�� �$�)�

� (4�567�89�4:.;'�<;�=7660���9>?.;@;�5A��7�.;�;)(4�)(4��89�4:.;'<;)(0��69?>.; �%��;)>�#(34�)�(4��89�4:.;@'<;)�(9>0B4�4C07.;����;�>��7./��/��9D7.;��;)�(34�)(34�)(4�)�(4�)(0��69?>.; �%��;)��� ��#(34�)�(4�)�(9>0B4�4C07.47E4�>��7./�������/��9D7.;��;)�(34�)(34�)(4�)�(4�)(0��69?>.; �%��;)7"���#(34�)(4�)�(9>0B4�4C07.;�&�;�>��7./���/��9D7.;��;)�(34�)(34�)(4�)(4�)(34�)(4�)�(9>0B4�4C07.;�����;���6B7./�������!�/)�(34�)(34�)(34�567)�

���� ����infoform.html��������� ��� ������ ���� ������ �������

���� ���������������� ������#�� #� ��

Page 163: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%��

&����������)���� ����

�*����'�/�:���������'�/���;���� �.� ������ ��� �����������7������������������"��������� ����������� ���� ���<���<����:���������������;�5���� ����� �����������7�� ������������������������ �� ������������������������� ���� ����������� ��� ���������������� �������� �������� � ������� �����7������ ��=��>���������:������>����������;�R� ������������������������ ��� ��� �����������7������ �������������� ������������������� G��� � � �S�� ��S�����S���N���� ���� ��*���3�.����:���������.������;��������������� ������������ ��7���� �������������� ��� ������ ������'������'�� ������5.� ������&������������*���.5��7��������� �������� ��6?0&�6���:�������������;�A ��� �������������� ��� ����� ����� �� ���������������$8&������������������ �������� ������ ��������������$8&�������� �������������������)���������������� ��������������������� � � ���� ��:���';�������&������ ��*����R�����<!�����F��)*+,�-B/3---23T������ ���<!������� ��������� ������� ������� ���� ����������� ����� ��$8&����������������������� ��������$8&��� ��������T&�9���=�"�����������>����7���� ���� ����� ��5������� )���������@�.�#�����:�)�������)��(������AB�'���A>�A�)���������;�<�� ����� ��������:���)��������� ����������������"����� �5"����������=���>��������������=� �>� ���� ������������:���)����� ��6��#����8��� ���� ������$8&���������� ����� ���� ��������.��.��������� ������������������������������ ���������������� �' ��� ����E-.������������� �������� ������ � � �

Page 164: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%��

Page 165: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�%��

�������"��*� ��

����� ��� 0����� �� ���2 #���

�(:4�6)�(:7��)(3:7��)�(49467)(349467)�(5A�C)(35A�C)�(3:4�6)�

�(:4�6)��(:7��)��� �������������������������������������������������(3:7��)��(49467)��������������������������(349467)��(5A�C)���������������� ������������� ���������� �����������(35A�C)��(3:4�6)��

������ �

� �

�������������������

�(0)�

�4���������$� �% �$����

��������������������C�����������������

�(0���������� �)(30)��(0����������� ��)(30)��

�4����$� �% �$�������� ����������������1�����%������69?>���� �������

�0�'���������� �

�(5)(35)�

�4�����&������������

��� ���������

�(B6)(3B6)�

�4�����&�������������

����������)����� ������

�(B6)������(3B6)�

�• 6�������• 6���������

���������)���� ������

������(69)��������

����9��F�����9��F����

Page 166: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��-�

����� ��� 0����� ��� � �����

� ��

�&��'����������������������

�(��:�7G.;&����;)(3�)�

�4������������������������$�%�������E���$�����

������������(�������'�

�(��:�7G.H��� ������������)(3�)��

�1��I&�����

�&��'��������������������

�(��:�7G.�� ���!!!�������)(3�)�

�4��������������������������&������

�"�� ���������

� ��

���������������

�(9�?���=.;&�%�!;)��

��

������������������������������

�(9�?���=.;&�%�!;���������� �)��(9�?���=.;&�%�!;����������" �)��

�4&��!��������������������!����% �$����������J�����%��� �%���� ��!���

�� �.�������8��������������������)� �����������

�(9�?���=.;&�%�!;�#$%�&'����)��(9�?���=.;&�%�!;�($%�&'����)��

�= ���� ������������ �K������

�$���� �����% �$���������������%���������$1��

�3��.�A� ���� ���

�(9�?���=.;&�%�!;�)�*+'*��,�)��(9�?���=.;&�%�!;�)�*+'*��-�)��

��

��"�� �����4�������

��

�������������

�(:�)��

��

������ �������������������������

�(:����$(�+'�$�.'��-�)�

��

Page 167: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

����

����� ��� 0����� ������ ���� ���

� �

�����������'���)� ��������

�(5A�C�)�&���*��/��������)���

0�%������% 1�����% ������

�����������'8�.����� ����'��������

�(5A�C����0��/"",,,,��#���0��/,,"",,�)�

����������? ��������

�������������������

�(5A�C��1�%2�*�����,���'312�*�����,��*��(12�*�����,��2�*���4�+1(��,��2�*���('��(1��,�)��

�4&������% �$��������$�%�%�� �%�����������%�����

��� � ��#�

� �

��������������

�(4�567)�(4�)�(4�)(34�)�(4�)(34�)�(34�)�(34�567)��

�� ��

�#����/��� ����

�(4�567�4�+1(��-,,5�)�(4�)�(4��4�+1(��6,5�)�(4��4�+1(��7,5�)�(34�)�(34�567)��

���<� ��<��

�#����/���� ���

�(4�567�)�*+'*��,�)��

��

�=� �������

�(4�567�&'��%�++�����-8�)��

=������������ ������

�L�$�&���! ���%��!������

��

�#����������

�(4�567�&'��$%�&�����69�)��

�=����� ��$� ����

� �1��@�$�&���

��

Page 168: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��!

����� ��� 0����� ����������������'���)� ��������

�(4��5?=A6A�.;F������)���

�� ��

�����������'���)� ��������������

�(4��5�=M?�AB>�.;&�%�!;)�

��

�0�����-��� �

� �

������������������

�(:4�6)�(:7��)(3:7��)�(49467)�(349467)�(G���7�74��A8�./'��N/)�(G���7�>��7./��$! �/���=./&����/)�(G���7�>��7./�����! �/���=./1����/)�(3G���7�74)�(3:4�6)��

�"����� -����

� �

�<�������������

�(GA��)��

����������������

�(GA��)�(9>0B4�1:%'�� �� �)��

�#����/�������

�(9>0B4�4C07.;�&�;�$�.'��6,�)�

�#����/������

�(9>0B4���2'����)�

������������'����

�(9>0B4�1:%'������;<���)��

���������� ����)������

�(9>0B4�1:%'���=��)���

�0�'�����/���������'�����

�(9>0B4�4C07.; ����;���2'���=�<� ��#��>'���=�-�)��(9>0B4�4C07.; ����;���2'���=�<� ��#��>'���=�6�)�

��

Page 169: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��"�

����� ��� 0����� �������� ��( ����������

�(�767=4�>��7./&/)��(A049A>)(3A049A>)��(A049A>)(3A049A>)��(A049A>)(3A049A>)��(3�767=4)��

�(�767=4�>��7./&/)�(A049A>)����������(3A049A>)�(A049A>)���� �������(3A049A>)�(A049A>)����������(3A049A>)�(3�767=4)��

������������������ �

�(47E4��7��>��7./&/�=A6�./��/� ���./�/)(347E4��7�)��

��

���������)�����)�����

�(9>0B4�4C07.;�����;)��

��

�����������������)�����

�(9>0B4�4C07.;�����;�#��>'������ �� �����)��

Page 170: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

�� �

�1�?;� 1��� '��� ����0�������� �� �

� �

����������/���������

��� �!�������������&���������

���1�����������

����������/���

����1����-�2��

�#����/����������/�

����1����-��!���"!���1#;� ��������"� �!;�2��

��

�#����/�����������

����1����-��!���"��K#;��$�;�2��

�#����/�������������

����1����-��!���"��%��#;����;�2��

�#����/������������

����1����-������ #;F����!!;�2��

�#����/����'���)� ��������

����1����-������% ����"���� #;F����OO;�2��

�&��'��������/���������

�(69>M��76.;��1����;�:�7G.;��1����������;)��

���/�����/���

�(0������.;��1���;)��(:�������.;��1���;)��

�������������.�����������

��#�� �-����� #/F��!!��/P���&�"��� �����#���� ����2�

��

Page 171: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

��%�

����+�

�� ���������5"�� �� HH�+������� �������� � HH������������ HH�

���� ��"������ B-����� B2���� B-���������� 3B�

��� �������������������������������������������������������������������������������������������������������������������������������������� � H-J�������� � HB1�

���� ��������������������������������������������������������������������������������������������������������������������������������������� /2�

������ ��������� EJ������� �� HE2���������� E1�� ������� EB�� �������� 1H��������� E3�� �� �� H12������� HEB��������������� 10�

����������������� 1�������� 0�

������ ���!"�� ��������������������������������������������������������������������������������������������������������������#�$�%�&��� ������������������������������������������������������������������������������������������������������������������������'��

� ���������� � HBB�<���+��7�� � HB-��� �������� H12�� �� ��� H1/�

(��) �.���� EH�"���������� EE������ /1�� ������� 2B�

*�%��� �������� 03����� 20������ 11�� ������� 13�

Page 172: Html & javascript for visual learners

������������ �����������!� �! �������� ������������

����

&�+ ����+ ��� 1�

&�"�����,���������������������������������������������������������������������������������������������������������������������'��� ����� H11�� ������ H13�

& -���&��� ��������������������������������������������������������������������������������������������������������������������������������� HH1�������� HH2����������� HH0�

.�/�� ��������������������������������������������������������������������������������������������������������������������������������0��� �� 32�������� B/�� �������� 3E������������� JJ����� 3E�

.���M�U�?���� �@ 2J�M*<'6U /�M4<+8U HB�M$5�'U 0�M$8&�U 1�M�&AU E/�M&58�U H--�M�U H/�M8�*�5U B/�M8�8�5U /�

.�1 ��������� H/����� ��� 00����������� � � HJ����������� ��� H1������������( H3��������������� H0�������������� 2E�������� 2H�7��� ��� HB�

2����,������������������������������������������������������������������������������������������������������������������������������48� H2H�

3�/������� ����������� �� JB���� �� BJ�������� HEJ��� ����������� 23����� J�

3�/�&�%��������������������������������������������������������������������������������������������������������������������������

Page 173: Html & javascript for visual learners

.�/�������������0���� �1 �����+��6���#�������# �������� ������$���#�������������� ��������������� ���� ���!������� ����� ����������!������� ������������� ��� ������������������� ������� ��� ���� �*���������� ���� ��� ������ ��� ��� � ��� �������������������������� ��������������� � ��

�6���#������ -� �2��#���#��������D����� ������� �������� �������������������������� ����� �!������ ��������������� ���� ��� ���� �������������� ������������������ ���� ��� ��� �������� �,�

,��� " B���� �- =���=��������

=�������� �$����"����� ��$ �����%������������ ��������������� ��� 1��%��������%�����%�������%�����!!���$ ��� ��0�����"����� �����%�����M����J����� ���������������� ��%����������A �'����������$�����$������� ��$�%�������!��������!� ����%�����������������$��

� � ������������ � �

7�� ���� �$���Q��'��!� ��'��������!�$�$ ��$����Q���$�������!�$ ��� ��� � ��%��$����Q��!� �$�����������������%��

� � 6��������Q���!� ����$� ��"��������$1��$ ���������� 1��%���$�$ ������!���"���� ��� ���

���� �� ��!&���� ����������� ��G!��&�G����&��

� ����� �%� �����G������� ��

�H������ �� ���C���� ���������6���#����-��-� D8���� � ���� �������� ��,����������� �������%���$�� ��

�2��������� �� �6���#������ ��#���� �D)�������� ���� ���������.����,����������� ��������%'�$�� ��

Page 174: Html & javascript for visual learners

�5� �#������2 #��#�������-����

�����

��

1 ���'�"��2333��� ����������� �� ��4�����$�$���������������8�����������%�G ���0�%���������� �����$ � ����! ��$ ����� �������

��

. ��4/��� �(��� ����������� �� ��=� ������������������� �����!��� ���!�����!�������������������"�������%�$ �% �����

�*������������ �� 5��6������������"��"�7���' �8�����?����1�����������"���"�������!����"�������%���������$�$���������$������ %���K���������������%�!!��� �8��������

����