38

IST 561 Spring 2009 Session4, March 2, 2009

Embed Size (px)

DESCRIPTION

The presentation covering CSS formatting and images for XHTML web pages.

Citation preview

Page 1: IST 561 Spring 2009 Session4, March 2, 2009

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

Page 2: IST 561 Spring 2009 Session4, March 2, 2009

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

2

Page 3: IST 561 Spring 2009 Session4, March 2, 2009

� #����$!����� ���+�� �������

<hr />

3

Page 4: IST 561 Spring 2009 Session4, March 2, 2009

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

� #����� ������ '��%��,)�%

� '��%��,� ���� '��%��,� ���

� '��%��,�����

h2 { border: 2px solid #ff0000 }

Page 5: IST 561 Spring 2009 Session4, March 2, 2009

� -��������&�� � %��!� �)�% �������&�� ���� �� ��. ��%�� ��'��)����& �$���/�����������%�)�% 0

� ����������&�� �� -��%������������! ������ �����&�� ���� ��

h2 { border: 2px solid #ff0000; }h2 { border: 2px solid #ff0000; }

a { border: 2px solid #ff0000; }

Page 6: IST 561 Spring 2009 Session4, March 2, 2009
Page 7: IST 561 Spring 2009 Session4, March 2, 2009

� 1���#��� �������$!�������������������&������%�����������&�� � '��%��,'� �&

� '��%��,���

� '��%��,��$

� '��%��, ��� '��%��, ��

h2 { border-bottom: 2px solid #ff0000 }

Page 8: IST 561 Spring 2009 Session4, March 2, 2009

� #����$!�����&� �������'� )���� ����� �� ���� ��23������&�� ��%� ��'��%��

� �� � ����.�'��%��!�

h2 { border: 2px solid #ff0000;padding: 5px; }

4���%%��$������$!��%"�

Page 9: IST 561 Spring 2009 Session4, March 2, 2009

� 1���#��� �������$!����%%��$�����������&������%�����������&�� � �%%��$,'� �&

� �%%��$,���

� �%%��$,��$

� �%%��$, ��� �%%��$, ��

h2 { border: 2px solid #ff0000; background-color: #cccccc;padding-left: 5px;

padding-bottom: 10px;padding-top: 10px;}

Page 10: IST 561 Spring 2009 Session4, March 2, 2009

� �)���!&�����5�!������������ $��� ���� �5�!�������$!���� ����%�'� �& ��%%��$

� �������%�5�!�������$!������� ��%���$ ��%%��$

h2 { border: 2px solid #ff0000; background-color: #cccccc;padding: 20px 10px;

}

Page 11: IST 561 Spring 2009 Session4, March 2, 2009

� *�!���!&�����5�!������������ $��� #����$!��� ������$ ��'� �& ���%���� ��%%��$

h2 { border: 2px solid #ff0000;width: 250px; background-color: #cccccc;padding: 30px 10px 5px 20px;

}

Page 12: IST 561 Spring 2009 Session4, March 2, 2009

h1 { background-color:#191970; color:#E6E6FA;color:#E6E6FA;padding: 15px;font-family: Georgia, "Times New Roman", serif; }

h2 { background-color:#AEAED4; color:#191970; font-family: Georgia, "Times New Roman", serif; border-bottom: 2px dashed #191970; }

Page 13: IST 561 Spring 2009 Session4, March 2, 2009

�� ���� ������'��� �� ��� ����%���(�'��$�� ��������.� ��� ���&������5����'��)�����%��5������ ���&6�7.�����

����( ����(�'��$����� ����$� ��� �����!����'���)�������%���%�����'��)����� ��'��%���%������ �%�������������'��) ������������ �%������ �%�������������'��) ������������ �)� � �������)��$���%�"

h2 { background-color: #ff0000border-top: thin solid #000000}}

13

Page 14: IST 561 Spring 2009 Session4, March 2, 2009

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

� 89�� 89�

� 94�

14

Page 15: IST 561 Spring 2009 Session4, March 2, 2009

� ��� ������ ��� �$��*��&

� -�� �!��%����������� ��%���$��

� .�&!& ��������������

� :������������'�������$!��%��� �������

� #��'����& �%

� 1���������������&��������� 1���������������&��������

� #��'���� �����%

15

Page 16: IST 561 Spring 2009 Session4, March 2, 2009

� 8��� �9 � �$�� ���7.��� �����!�� -�� �!��%������ � �$�� �� 1�� �����;�&�������������� 1�����������&��������� #��� �'����& �%� #��� �'����& �%� #��� �'��& %�� �������

� 9��$�����5��897��< ��&���� ���� �����%�%�����

16

Page 17: IST 561 Spring 2009 Session4, March 2, 2009

� 9�� '���4� )������� ��� �!���� �&������������������ �!���� �&!� �������5������� ���������/'! �'��)�����%���� �,,�����&� � ������ ������� �����������(�'�%�����0

� �!���� ��� ������$� �!���� ��� ������$� 1��������������&��������� #�&'����� ��'�� ������*�=�897�� -��)�����!���� ����$��)��$

17

Page 18: IST 561 Spring 2009 Session4, March 2, 2009

� #����$!����$�� ��������(�'��$�

� ����� ��'! �� *�����&����� ��$�� ��

� � �� ��'! �� #����$!����� ��� �� �. ���� �� � ��%�����'�� ��

<img src=“hat.gif” alt=“top hat” height=“100” width=“100” />

� #����$!����� ��� �� �. ���� �� � ��%�����'�� ��$�� ���

� ��$ �� ��'! �� 3��$ ���� ��$�� ��������.���

� )�% �� ��'! �� (�% ���� ��$�� ��������.���

18

Page 19: IST 561 Spring 2009 Session4, March 2, 2009
Page 20: IST 561 Spring 2009 Session4, March 2, 2009

� �%%��$�>�� ��������� 5������ ��'! �

� �%%��$�3���+�� ������� ������ ��'! �� ������ ��'! �

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

Page 21: IST 561 Spring 2009 Session4, March 2, 2009

� ?�@!���%"�� #����$!��� ��� � ��'! �� �� ��� �� �. ���� �� � �����5��� ��&����$A�� �� ���� ���&$�

� 4:�� ��������&����� ���&$�

� 1���� BCD������!�����%���� �5���&$��� 1���� BCD������!�����%���� �5���&$��

� :� ����"� #����$!��� �����$%���� ��'! �� 1��%�) ���&����$����� �'�����5���%���� ��� � �.

� 1�!�����1?�� ���(�'��$��)� � �.

Page 22: IST 561 Spring 2009 Session4, March 2, 2009

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

<a href="index.html"><img src="home.gif" height="19" width="85" alt="Home" /></a>

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

� #����$!���#��� �����&�� �� ��'��%��img {border:0 }

22

����

Page 23: IST 561 Spring 2009 Session4, March 2, 2009

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

� -��%��!� ��'��$��!�%��&$��� ����/���� 0body { background-image: url(background1.gif); }

Page 24: IST 561 Spring 2009 Session4, March 2, 2009
Page 25: IST 561 Spring 2009 Session4, March 2, 2009

h2 { background-color: #d5edb3;color: #5c743d;font-family: Georgia, "Times New Roman", serif;padding-left: 30px;

�����!&'!��� �$��"�

padding-left: 30px;background-image: url(trilliumbullet.gif);background-repeat: no-repeat; }

Page 26: IST 561 Spring 2009 Session4, March 2, 2009

����������!�'��� ��%�����'�� ��#��� �������$!����$�� ����&�%��������E�$� ��%�������������� ��'��$��!�%�������F �G����&�� �6

���#����!�%�����'�� ��#��� ������$!�����������&�%�'$�$��� ������ �5�� ������%�)�� ��'��$��!�%�����(�'��$�6�'��$��!�%�����(�'��$�6�

H����!�����*���6�( �����%��$��&$�����������!�&!� ������$!��� ���&$�� $�)� �'��%��BI�I� ��5��%� ��%��!� �'�!��'��%���

26

Page 27: IST 561 Spring 2009 Session4, March 2, 2009

� 1��������)�������� ����

� ����� �!����!�� ! ������&'�����%������

� ����� �� �$�� ��������. ��������/�����$�����E�$���E��$��������$0/�����$�����E�$���E��$��������$0

� J������!��������&���� �� �'! �%������ �5�� &��$���������''��� ���� ��

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

� &�&)� ���$���& ��'��E!� �'�! ���$

Page 28: IST 561 Spring 2009 Session4, March 2, 2009

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

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

<img src=“images/home.gif” alt=“Home” height=“100” width=“200”/>

28

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

Page 29: IST 561 Spring 2009 Session4, March 2, 2009
Page 30: IST 561 Spring 2009 Session4, March 2, 2009

� ���&����&$�������$!��%� ������� �����$���5���������� ��&$��

30

Page 31: IST 561 Spring 2009 Session4, March 2, 2009

� F&�G����&�� � �������� ��& �

� F��G����&�� � �������������������������& �� #��'���� � ������ �$�������������������$��� ����� �'! �� ����� �'! �

� � ���� ��'! �

� ����%��� ��'! �

31

Page 32: IST 561 Spring 2009 Session4, March 2, 2009

<map name="boat" id="boat"><area href="http://boat.com" shape="rect"

coords="24, 188, 339, 283" alt=“fishing boat" /></map><img src="boat.jpg" usemap="#boat" alt=“Lake Michigan"

width="416" height="350" />

Page 33: IST 561 Spring 2009 Session4, March 2, 2009

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

� �%�'��*���)����

� ���$��K��9����/ �"AA�����$��$�����&A0

� ��)���%�$�� �������& ��������� �

� 9!�� ��A%�)���%������������,@!�� ��$�� ���9!�� ��A%�)���%������������,@!�� ��$�� ���

� 9!�� ����$�� ���������� ��������#�

� ����%�$� ��� � �$�� �

� ������!��� � �$�� �

� ������!��%�)��$�

� 3�����$�� ���%���$���� ����� ��$�� ���

33

Page 34: IST 561 Spring 2009 Session4, March 2, 2009

� #����%����& $����%� �&�� ?�!����&$��� #����%����& $���������+��)� ��&$��@!�� �

� �������?����! ���� ��������%�&�������� �&&�< '��$ �����=���� ��

34

Page 35: IST 561 Spring 2009 Session4, March 2, 2009

� ���L ������������������������L ������������������������L ������������������������L ���������������������� ��&��5��� ����& �� 5�������������� ����%�������������1��� �$ ���� �� �'� )����'��$��!�%��%� �. ��������

� 9��5�%��� �. ��@!�5��� ��������9��5�%��� �. ��@!�5��� ��������9��5�%��� �. ��@!�5��� ��������9��5�%��� �. ��@!�5��� ��������,,,, �. � �. � �. � �. ����&�� �����&�� �����&�� �����&�� ��� 1��� ��� � ��'! �������!���& $�����&�� �� 1��� ��� � ��'! �������!���& $�����&�� �

� �����!���� ���5�$ ����!�����& $��������������!���� ���5�$ ����!�����& $��������������!���� ���5�$ ����!�����& $��������������!���� ���5�$ ����!�����& $������������5�%����&���� �. ������� � ��'� �& �������5�%����&���� �. ������� � ��'� �& �������5�%����&���� �. ������� � ��'� �& �������5�%����&���� �. ������� � ��'� �& ���� ���$� ���$� ���$� ���$��

35

Page 36: IST 561 Spring 2009 Session4, March 2, 2009

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

� ?�&�&'��� ������� � ��$!�%��������%�������'��� �����!������ �%� ��$�� �����

� 4!&'�����������������5��� ���� ����5��)�'��$������ ������$�����%�)���%� �&�,,) �����!��$������ ������$�����%�)���%� �&�,,) �����!����!���$��&$����'������!�� ��&���&�+�� ������!���

� ��)������5�%��� ��� �5��� ���&$���/�!� ��� �. ������0��%�!��� ��� � ��'! �������!���$���

36

Page 37: IST 561 Spring 2009 Session4, March 2, 2009
Page 38: IST 561 Spring 2009 Session4, March 2, 2009