22
! <UL> </UL> Attributo: TYPE "# $ " %&’()*+&’,%( ! <LI> </LI> Attributi:TYPE "# $ " %&’()*+&’,%( - - <UL> <LI> </LI> <LI> <LI> </LI> </UL>

Lezione14 HTML - 2 - INTRANET - Dipartimento di Informatica · -4 / ˘ c ˝ ˘ < ˘ ˘ ˝ ˘ ˘ ˘ 8 usemap ˛ img * ˛ map area ˘ ˆ ˘ ˝ @ ˘˝ qd/˙- ˇ ˝

Embed Size (px)

Citation preview

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

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

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

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

��

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

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

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

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

� ����������

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

��

������� ������ � ��������!������������ ���������������<UL>

</UL>� Attributo: TYPE "�#�� �$

� �� �" �%&���'�()*+&�'�,%(�����������

� ������������������� ��������!������������ ���������������<LI> </LI>

� Attributi:TYPE "�#�� �$� �� �" �%&���'�()*+&�'�,%(�����������

--

<UL><LI> ��������������</LI><LI> ��������������<LI> ��������������</LI></UL>

���� ��

..

<H1>%��������</H1><UL><LI TYPE="DISC"> /���</LI><LI TYPE="CIRCLE">0����<LI TYPE="SQUARE"> 1�������<LI> �������</UL>

���� ��

22

��������������� � ��������!������������ ���������������<OL> </OL>

� TYPE "�#3$������������� ������������ 3�"��'�+'�4'�%'���� ��������������������������'�5�����'�5����� ������������������������

� START "�#3$��3����������������������������� %����������!����!�� �������� �����

� ������������������� ��������!������������ ���������������<LI> </LI>� Attributo:

� VALUE "������� 6��������� ����������� �������������������

77

+����8�������9:�;���9*�;� COMPACT

� 5���������!������ ( �����������������������!��88������������������������������ �����

� 5��<��� ��������� ������

� =��� ������

>>

�������������� 5��������������������������������

� *��!��������������� �?�������!�����������������������@����������� �

� �������9*�;� ���������������������9:�;���!���!����

AA

���� ���3�� �� �� <BR><UL TYPE=“DISC"><LI>���������4<LI>����������<UL TYPE=“CIRCLE"><LI>����������<LI>���������-</UL></UL>

4B4B

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

Dobbiamo essere noi ad imporre una formattazione in grassetto

4444

�����������������9,�;� ,���,������� ����

� C��������������������������������������������������������������������

� <DL> </DL>� +����8����COMPACT

� 6���������� ����������������'�������@����������������������8��!��

� =��������8�����������������!�����

4�4�

D���9,D;���9,,;� <DT> ������������������ �������

� ,������� D���� %�������������������������������������<����������������������

� <DD> ������������������ �������� ,������� ,���� 0����������� �������������������

4�4�

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

<H1> �� �����������</H1>

<DL>

<DT> ��������������</DT>

<DD> ����������������������������@����� </DD><DT> ������ ������</DT>

<DD> ���������������� �������������� ������</DD><DT> ����������������</DT>

<DD> ���������������<��������������� ������������</DD>

</DL>

4-4-

&��������

4.4.

0������������������ %����������������������������������������������8����������� E%0

� E�� ���� %�������� 0������

� FC�E��FCE�� F����C������� �����3 �����E���

� C5E� C����8�� 5�����G�E�� ����

� %���������������������������8����

4242

%���������������9%/E;� H������ � ���������� � ������!����� ���!��� ������������������

� <IMG SRC=“H�������” WIDTH=“82” HEIGHT=“2>”>

4747

+����8����I 4�� SRC"#���$

� %������J��������K�������������������

� ALT"#�����$� !������������������� ���������K�����������@��������<�!���������8����!������������

� BORDER"#�����$� %�����������������������K�!�������8������������!�����!��������������������� ���������������������

4>4>

+����8����I �� WIDTH

� � ��������������������� ���������� ����K�������'�!������������� �3��

� HEIGHT� �������������� ����������� ������K�������� ����������

� VSPACE� ���������� �������������������8������ ������������K��������

� HSPACE� ���������� �������������������8�����������������������������K�������

4A4A

+����8�����+�%E5"# ��$� ( ����������� ������������K����������� ���������������������������!����� ���� LEFT��� ��������<��������������������������������� RIGHT��� ��������<�������������������������������� TOP�������������� ����������������� ��������<���������������������

� MIDDLE��������������� ��������<����������������������

� BOTTOM�������������������������������� ��������<���������������������

� +����8������ �������B�B

���� ��

Ci sono due paragrafi, ognuno contiene un’immagine. Le immagini fanno parte del flusso normale del testo ed interagiscono con esso attraverso l’attributo ALIGN

�4�4

(����������� %��8������������������������������ �����������!���������<����������������

� E��������8����WIDTH ��HEIGHT ���!��� ������������ ��������(����� �������������������'����8�������������� ������������������

� %������������!������� ������������ ���8������� �?����������������L���������� ������������!����� �������������������������������������������������

� (������������������������������� �������'��������<������������#� �����$����5����� �'������8������������������� ��������������������

����

(����������� 5��������������������������� ������������ ����

� *������������� �M� ����������-BN8L��� *����������E%0����� ������ *���������� E%0� ������������� � ���� FCE� ��������!�

� *�����������������������������434���� ��������� %������������ ������ �������'��������O������������ �������������!�'���������������������������434�

� /������ ��������������� �����!�������������� ������������!���O����������������

����

���� ��� )����������!������������ ���������������!�������� �������'������� <BR CLEAR=“+��"> � ��� <P CLEAR=“+��">

<IMG SRC=“����P �" ALIGN="&%EQD"><IMG SRC=“�������" ALIGN="��0D"><BR CLEAR="+��"><CENTER>D�(D:�+��%5�+D:�+����5D&:�,�����,*��%//+E%5%</CENTER>

�-�-

&��������

�.�.

+����8�������+&����H&� <BR CLEAR="&%EQD"> ��<BR CLEAR="��0D"> ��8���� ����������������������������������?�����������<���������0*:&%�������� ������������������������ (����@��!��������<BR CLEAR=“+��">

� C��!����������!���������������QD/��������������������������������������������������������������������������<BR CLEAR="..."> ���!������������������

�2�2

%���������� ����� C�������������������� ���������������������� �������� �?� �������� ��������E%0����� ���������434� �3���� %���������������������������������������8����WIDTH�� HEIGHT ��� �?�������������� ��������������� ��!��������<IMG SRC=“� ������" WIDTH=�. HEIGHT=4><IMG SRC=“� ������" WIDTH=4 HEIGHT=�>>

�7�7

%���G��������������� (�� ���������R��������R������� �����'���������'��K�������'���� �?��������������K������ �����S�8

� )������������������������������������������������ *K��������<���������������������������K��������������� �����SSS�

� C����������� ��������������������<A HREF="*&�"> �</A>

� HREF ���� ���QL ����3� &������� �>�>

� *&�� *�*&�� �?�������

� &�����!�������� �������������������������������������������� ���� � ����� ����� � ����

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

� C�?����������������������� ������������������ ��� ���������������3� � �����T(��4

�A�A

%������9+;� D�������?�����������!������<A> � </A> ��!����R������8���R

� %��8���������������������� ��!!����O�����!������������������ ��������������������� ���������������������������������� ����((� ���������������������������!���������!�������������������������9+;���9�+;

�B�B

%� ������� �������G���� �?������������������������������������������L�� ������!��������������������������3���� ������������������������ �������<��������������

� (��� *&������������������������������L���!�������������� *&������� ��������������������������O���������������QDDC�� ��� ������ ����������������%50:� � ������ ������ ����������������%50:�

�4�4

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

<A HREF= # ���U���U��������$> ��G�</A>

� (��!����������������G���������� ����������!�������������������������������������������� <A HREF= “�������”> ������ @�� </A>

� (��!����������������G����������� ����������!�������������������������<A HREF= “������������������”> ������ @�� </A>

����

(�����8���I 4�������������

� (��!��������������������������� ������ ����������������������

� ���� �����8����NAME'�����������������8������ ���������������G���!������������������ <A NAME=“5���*���”> D����+����</A>

� 5���*�����!����������������������� ������������������� D����+���� <�� ������� </A> <�� ������

Non sarà sottolineato

����

(�����8���I �� C��������������G������������8�������������������������������� 6���������<A HREF=“T���U���”> ����</A> ������������

� (�� �?�������������������������� �������������������������������� 6���������<A HREF=“�� 4����T���U���”> ����</A> ������ ������4

�-�-

��G������������ * �������� �?������������G'�8��������������������%/E���� ���������+

<A HREF="home.html"><IMG SRC=“��������"></A>

<A HREF="home.html"><IMG SRC=“house.gif“

BORDER=0></A>

�.�.

( �������V������������G

� (�� �?���������K���������� ������������!���������V������� <A HREF="�������indirizzo_E-mail"> ��G</A>

� ����������G������G�������!�����!������ �������������������������� ����� �������������������� ���������!������ �V����� =���8���������� ��������������������������� ������ ���������

�2�2

+����8�������9+;� TARGET=“���”

� (��!�� �������������@�����������������������!�O������������������K��������������������@����K������ TARGET=“UH�+5N” ��������������������������!���������

� TITLE=“���”� D���V�� � *����������������������� �������������������

�7�7

+����������8�������9+;� +���((N�W

� %!�����������!��������G������� ����������������������������'�<� ����8��������!����������� �����������8���������������+�D������������������� �������������� �����8����ACCESSKEY

� D+H%5,�X� %��!���������� �����8����<�������������������������� (��!����� ���������������@��������������8������� �����O���������4 �����G�����!����������������8

�>�>

%������9H+(�;

� (��!�� ��������������#8���$���� ������� ����������������������������

� *���������� ������������������������������!����� �������������������!�

� ,�!���������� ����������������������HEAD

�A�A

���� ��� (���������������� <���������������������

<BASE HREF=“��� ����������������%50:�”>

� +�����'����������������<A HREF=“���������”> </A>���O��������������������������� ����������������%50:����������

-B-B

/� �����GY��������� *���� ��<�� ����������!�������������������������V��������������� *�������� <�����������������8��� �����������������G

� ����� ������������������������!�� ���������������G������� �������8

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

-4-4

/� ������������� C���������������� �������������<������������������������ ������������ ���������������� �����8����USEMAP ��������IMG

� *�����������MAP ���AREA �������������������� � ��������� ��������@��������� ������������������QD/��

-�-�

���� ��<img border=0 src="mappa.gif" width="200"

height="200" usemap="#menumap">

<map name="menumap"><area shape="rect" coords="2,2,90,90 " href="no.html"><area shape="rect" coords="100,2,190,90" href="ne.html"><area shape="rect" coords="2,100,90,190" href="so.html"><area shape="rect" coords="100,100,190,190" href="se.html"></map>

-�-�

&��������

esempio----

%������/+C� %������������������ �������� �

� �����������������������AREA �������!��� �����!������� �������������������������MAP �������������8�������G�

� %�����������8��������� ��+(('�,%&'�%,'��+5E'�5+/�'�(DW��'�D%D��� 5+/� ���!����#���������$������ ����� ���������*(�/+C"T����

-.-.

+����8�������+&�+� SHAPE

� %��!��������������������!���!������������������8���������������������

� 6�������CIRCLE �CIRC�'�POLYGON �POLY����RECTANGLE�RECT�

� COORDS� ,���������������������������������� %��������������������������������� ���������� ������������������������������

-2-2

(Q+C�����::&,(�I 4� CIRC

� COORDS"#3'�L'��$� �3'L�� ������������������� ���� ������������������

� RECT� COORDS "#34'�L4'�3�'�L�$� �34'�L4�����!������������������������ �3�'�L������!���������8�������������

-7-7

(Q+C�����::&,(�I �� C:�W

� COORDS "#34'�L4'�3�'�L�'�3�'�L�Z$� �34'�L4�� �����!����������� �������� �3�'�L����������!����������� �������� �3�'�L���������!����������� ������� Z� (����������������������!������� %�� �������<��������������������������<������������� ��������� �����!�������

->->

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

x

y

(0,0) (70,0)

(70,120)(0,120)

-A-A

*��������������8�������+&�+� HREF

� &������������������������ (���������������������A

� NOHREF� ,����������������� ���������<����������� ��������������� �����������������

� 5�������AREA �?�������� ����������������������������8���� ��������

� TARGET'�TITLE'�ACCESSKEY'�TABINDEX� (��������������� ����������A

.B.B

%������9D+H��;� *����8�������!����������������������������

<TABLE> </TABLE>

� *����8�����<������!���������������������������<������!������������ :����������������8�������!�����������������������������<TR> </TR>

� :�����������������8�������!�����������������������������<TD> </TD>

.4.4

H�������������8����� %��8�������������8�����<�������������������� �����8����BORDER

<TABLE BORDER=4><TR><TD> ����� </TD></TR></TABLE>

.�.�

D��������������8����� (�������������<CAPTION> ��� ��������������

<TABLE>� +����8����

� TOP��������� �������������8��������������� BOTTOM��������������������������8����

� (�� ���������������������� ���������������G� ���3�V��!�� ��� ���������<CAPTION>

.�.�

%������9DQ;� (��!�� ������������ �����������������������

� %�������������������<����������������������

.-.-

<HTML>

<HEAD> <TITLE> Esempio di tabella </TITLE></HEAD>

<BODY>

<TABLE BORDER>

<CAPTION ALIGN=BOTTOM> Una semplice tabella </CAPTION>

<TR> <TH> Heading 1 </TH> <TH> Heading 2 </TH> <TH> Heading 3</TH> </TR>

<TR> <TD> item 1 </TD> <TD> item 2 </TD> <TD> item 3 </TD> </TR>

<TR> <TD> item 4 </TD> <TD> item 5 </TD> <TD> item 6 </TD> </TR>

<TR> <TD> item 7 </TD> <TD> item 8 </TD> <TD> item 9 </TD> </TR>

</TABLE>

</BODY> </HTML>

Codice della tabella precedente

....

+����8�������9D+H��;� ALIGN��� ��������� �������������������8�������� ��������������������� �������� ��0D'�&%EQD'���5D�&

� WIDTH��� ���������������������� WIDTH"#4-B$� � �3���� WIDTH"#-B[$�� ����������

� HEIGHT��� ��������� ���������� �������� �3������� ���������� �������������������������%����5

.2.2

���� ��<TABLE BORDER=�WIDTH=4BB[>

<TR> <TD>+�'�E�����'������</TD> </TR>

</TABLE>

.7.7

���� ��<TABLE BORDER=�WIDTH=�BBHEIGHT=7.><TR><TD WIDTH=�B[>

+�</TD><TD WIDTH=>B[>

E�����</TD></TR></TABLE>

.>.>

���� ��� %��!���������� �����8����WIDHT !�����������������������������������!�

.A.A

+����8�������9D+H��;� CELLPADDING"#�����$

� (��8����������� ������������������������������������������8����

� CELLPADDING"#4B$

� CELLSPACING"#�����$� (��8����������� ������������8����������������� CELLSPACING"#.$

2B2B

CELLPADDING ��CELLSPACING

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

2424

���� ����������C+,,%5E<TABLE BORDER=� CELLPADDING=4�><TR><TD >+�</TD><TD> E�����</TD><TD >�����</TD></TR><TR><TD>&�8����</TD><TD>+����</TD><TD>/�������</TD></TR></TABLE>

2�2�

���� ����������(C+�%5E<TABLE BORDER=� CELLSPACING=4�><TR><TD >+�</TD><TD> E�����</TD><TD >�����</TD></TR><TR><TD>&�8����</TD><TD>+����</TD><TD>/�������</TD></TR></TABLE>

2�2�

���8������������������8���<TABLE BORDER=� CELLSPACING=4��CELLPADDING=4�><TR><TD >+�</TD><TD> E�����</TD><TD >�����</TD></TR><TR><TD>&�8����</TD><TD>+����</TD><TD>/�������</TD></TR></TABLE>

2-2-

D�8�������������� BGCOLOR"RT����88R

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

� BORDERCOLOR"RT����88R�� ������������%����5������� ���TABLE�'��������������������������!�����!������8�������������8����

� (��������8������� TABLE� TR� TD� TH

2.2.

���� ��<TABLE BORDER=� BGCOLOR=“T00��22”><TR><TD >+�</TD><TD> E�����</TD><TD >�����</TD></TR><TR><TD>&�8����</TD><TD>+����</TD><TD>/�������</TD></TR></TABLE>

2222

C������O���������8���� %��!����������������8�������������������<TR

ALIGN=“��0D”> #�� ��$�@�����������8�����<TABLE ALIGN=“&%EQD”>

� %��!����������������8������������������<TD ALIGN=“��5D�&”> #�� ��$�@��������������<TR ALIGN=“��0D”>

2727

D�8�������!����������<TABLE BORDER=3 BGCOLOR=“T0022��”>

<TR BGCOLOR=“TBBAABB“ >

<TD BGCOLOR=“TAAAA00“>+�</TD><TD> E�����</TD><TD >�����</TD></TR><TR><TD>&�8����</TD><TD>+����</TD><TD>/�������</TD></TR></TABLE>

rosa

verde

2>2>

+����8�������9D&;���9D,;� ALIGN"#�� �$

� +��������������������������������� ��0D����������'�&%EQD'���5D�&'�F*(D%0W�

� VALIGN"#�� �$� +����������!��������������������

� /%,,������������'�D:C'�H:DD:/

� BGCOLOR=“T����88“� ���������������

2A2A

+����8����NOWRAP� )�����<� ������'�@�����������8����8���������������8��������������8�������������� ������������� �������������������

� � �����8����<��� �������,�!��88���������������������������������� �������8�������������� ������������� ��������<����������������������'�@�����������8���� �?�����������������������!�������� ��

7B7B

���� ��� 5�� ������ �� 8������� �� ������

BORDERCOLOR ����������������� Usate CSS

��

7474

+����������8�������9DQ;���9D,;� WIDTH "#!�����$

� ( ��������� �� ������������������ 6�������� �������� �3����� ���������

� HEIGHT "#!�����$� ( ��������� �������������������� 6�������� �������� �3����� ���������

7�7�

�:�(C+5���&:S(C+5� COLSPAN=�����

� ���������������������������������������������� �?����������=� ����8���������������������������������� �M������

� ROWSPAN=������ ,�������������������������������������������������

7�7�

���� �������:�(C+5<TABLE BORDER=�><TR><TD COLSPAN=�>

+�</TD><TD>E�����</TD></TR><TR><TD>&�8����</TD><TD>+����</TD><TD>/�������</TD></TR></TABLE>

7-7-

���� ������&:S(C+5

<TABLE BORDER=3><TR> <TD ROWSPAN=2>+�</TD><TD>E�����</TD><TD>�����</TD></TR><TR><TD>+����</TD><TD>/�������</TD></TR></TABLE>

Solo due celle

7.7.

��������������8������������������� C���������������L������������8�����������!��������������������������� ��� �M��������������'���� ������������������������ ������ ,�����������8�������������8����������� ,���������������������������� �@����������������������� �������8�����

� ����������������������� ����� ����@���������������� (�����������������������������������������'������������������������� ����������� ������������� ��������!����������������8�����

� +��������� �?�����������������������8����

7272

���� ��

tabella finale struttura a celle

7777

&������ ���D,� &������4

� :��������������O���TD �������������!������� ������������������������� �������������������

� &�������� (����TD �������� ��������������������!����������������8�����'��������� �����8����COLSPAN �ROWSPAN���������O���!������ ���������������������'�������������������������������������������������!����

7>7>

���� ��

2 TD

3 TD

2 TD

COLSPAN=2 per il secondo TD

ROWSPAN=2 per il primo TD

7A7A

������������������<TR ALIGN=CENTER><TD> 4</TD><TD COLSPAN=2> �</TD>

</TR><TR ALIGN=CENTER><TD ROWSPAN=2> �</TD><TD> -</TD><TD> .</TD>

</TR><TR ALIGN=CENTER><TD> 2</TD><TD> 7</TD>

</TR>

>B>B

&����� ��������������� C�������������� ���������������������8�������

� THEAD %������������������8����� TFOOT C�<� �������������8����� TBODY *���� �M������������������

� )��������!������ �����������8������������ ��������������������������������������������� �������������������������� �<� �������������8���������� �������

� )�������8�����������������!��������� ���'������������������ ����������������� ��������������� ������������� �������������������������������8������ ������������� ���������������5����� ��

>4>4

���� ��<TABLE BORDER=1 CELLPADDING=4 RULES="GROUPS">

<THEAD><TR><TH COLSPAN=2>D�8�� Q���

<TBODY><TR><TD>E�� ��4<TD>E�� ��4<TR><TD>E�� ��4<TD>E�� ��4

<TBODY><TR><TD ROWSPAN=2>E�� ���<TD>E�� ���<TR><TD>E�� ���

<TBODY><TR><TD COLSPAN=2 ALIGN=CENTER>E�� ���<TR><TD>E�� ���<TD>E�� ���

<TFOOT ALIGN="CENTER"><TR><TD COLSPAN=2>0�����

</TABLE>

>�>�

&��������

>�>�

&����� ��������������� COLGROUP

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

� +����8���� ���� ���� SPAN ��������������������������� ���������

COLGROUP� WIDTH ������� �� �����������������������������

COLGROUP� ALIGN ����������������������������������� VALIGN �����������!��������������������������������

>->-

&����� ��������������� COL

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

� +����8���� ���� ���� SPAN ������@�������������������!��������������������

COL� WIDTH - ALIGN - VALIGN

>.>.

���� ��<TABLE CELLPADDING=3 RULES="GROUPS"><COLGROUP>

<COL ALIGN="CENTER"><COL ALIGN="LEFT"><COL ALIGN="CENTER">

<COLGROUP ALIGN="RIGHT"><THEAD>

<TR><TH> +�<TH>5���<TH> D� �<TH> �����<TBODY>

<TR><TD> 1965 <TD>��3��L���� <TD> M <TD> 447.<TR><TD> 1976 <TD>E��� 0������<TD> M <TD> 7.B<TR><TD> 1984 <TD>/LH���� <TD> P <TD> 4�BB<TR><TD> 1985 <TD>(����� ,� :��<TD> P-G <TD> .BB<TR><TD> 1989 <TD>H������� E��<TD> P <TD>4-.B

<TFOOT><TR><TD COLSPAN=4>/V������CV �������EV�����

</TABLE>

>2>2

&��������