1
00:00:03,250 --> 00:00:07,080
Nessun autostima progettisti di pagine web,

2
00:00:07,080 --> 00:00:10,990
sarebbe oggi progettare pagine web senza includere

3
00:00:10,990 --> 00:00:15,665
qualche forma di immagini o media sui loro siti web.

4
00:00:15,665 --> 00:00:19,055
I professori di informatica sono un'eccezione.

5
00:00:19,055 --> 00:00:23,390
A questo punto, probabilmente ti aspetti che lo dica,

6
00:00:23,390 --> 00:00:26,270
ma non è quello che sto per dire.

7
00:00:26,270 --> 00:00:29,255
Ho intenzione di dire che,

8
00:00:29,255 --> 00:00:33,425
«Una foto vale $12 su iStockPhoto.com.

9
00:00:33,425 --> 00:00:38,060
Bootstrap fornisce un ampio supporto per l'inclusione di

10
00:00:38,060 --> 00:00:42,800
immagini e vari tipi di media nei vostri siti web e le vostre pagine web.

11
00:00:42,800 --> 00:00:49,040
Il tag HTML immagine sta ovviamente per essere utilizzato per includere le immagini nelle tue pagine web.

12
00:00:49,040 --> 00:00:55,170
Bootstrap fornisce anche un sacco di classi che è possibile applicare al

13
00:00:55,170 --> 00:01:02,215
tag immagine al fine di migliorare ulteriormente il modo in cui le immagini sono incluse nella vostra pagina web.

14
00:01:02,215 --> 00:01:08,535
Quindi potresti usare una classe di immagini chiamata img-fluid che renderà le tue immagini reattive,

15
00:01:08,535 --> 00:01:15,195
il che significa che la dimensione dell'immagine si adatta automaticamente alle diverse dimensioni dello schermo.

16
00:01:15,195 --> 00:01:22,585
Puoi anche usare un img-thumbnail che metterà un bordo bianco intorno all'immagine.

17
00:01:22,585 --> 00:01:29,480
È anche possibile gestire le forme e le dimensioni delle immagini come si

18
00:01:29,480 --> 00:01:36,635
vede in questa immagine qui in modo da poter avere immagini per le quali si creano angoli arrotondati,

19
00:01:36,635 --> 00:01:38,995
sia tutti i quattro angoli,

20
00:01:38,995 --> 00:01:42,020
o qualsiasi coppia di angoli scelta.

21
00:01:42,020 --> 00:01:45,595
Quindi puoi applicare la classe attorno ad essa per

22
00:01:45,595 --> 00:01:49,450
creare un'immagine con angoli arrotondati o puoi vedere

23
00:01:49,450 --> 00:01:53,130
un trattino arrotondato in alto in basso a sinistra o a destra per inserire

24
00:01:53,130 --> 00:01:57,905
gli angoli arrotondati in uno di questi quattro bordi dell'immagine.

25
00:01:57,905 --> 00:02:02,780
È inoltre possibile applicare un cerchio arrotondato per creare immagini circolari.

26
00:02:02,780 --> 00:02:05,170
Quindi, quando visiti siti web,

27
00:02:05,170 --> 00:02:10,310
vedresti già le immagini utilizzate in molti di questi modi.

28
00:02:10,310 --> 00:02:16,000
Ricorderete che abbiamo visto la classe Card nella lezione precedente e nell'esercizio.

29
00:02:16,000 --> 00:02:21,085
Qui, illustro l'uso della classe Card con un'immagine inclusa.

30
00:02:21,085 --> 00:02:27,320
Quindi, in questo caso, includiamo un'immagine con l'immagine della carta di classe superiore e se

31
00:02:27,320 --> 00:02:30,760
includi dimensioni sufficienti l'immagine che l'immagine verrà inclusa

32
00:02:30,760 --> 00:02:35,030
nella parte superiore e quindi racchiusa all'interno di una carta come questa.

33
00:02:35,030 --> 00:02:36,860
Se l'immagine è troppo piccola

34
00:02:36,860 --> 00:02:41,245
, può essere posizionata in un angolo della scheda.

35
00:02:41,245 --> 00:02:47,315
Quindi usa un'immagine abbastanza grande per essere in grado di definire una carta pulita come questa.

36
00:02:47,315 --> 00:02:52,030
Quindi qui vedrai l'immagine descritta con,

37
00:02:52,030 --> 00:02:56,035
le classi applicate a quella compresa l'immagine della carta superiore

38
00:02:56,035 --> 00:03:00,510
e img-fluid per rendere l'immagine reattiva automaticamente.

39
00:03:00,510 --> 00:03:04,470
Quindi, questo è il modo in cui è possibile utilizzare le immagini con la classe Card

40
00:03:04,470 --> 00:03:08,525
per definire le schede che si utilizzano sulle pagine web.

41
00:03:08,525 --> 00:03:16,605
Un altro modo per includere immagini e contenuti correlati nelle pagine Web è un oggetto multimediale.

42
00:03:16,605 --> 00:03:20,740
Un oggetto multimediale consente di specificare un'immagine che è possibile posizionare

43
00:03:20,740 --> 00:03:26,225
a sinistra o a destra della descrizione.

44
00:03:26,225 --> 00:03:29,690
Inoltre, è possibile includere un corpo multimediale

45
00:03:29,690 --> 00:03:32,880
che contiene la descrizione associata all'immagine.

46
00:03:32,880 --> 00:03:35,110
Quindi, come vedete in questo esempio qui,

47
00:03:35,110 --> 00:03:41,270
il corpo del supporto stesso racchiude qualsiasi contenuto HTML formattato qui.

48
00:03:41,270 --> 00:03:44,820
Quindi qui sto usando un h2 e h4 insieme a

49
00:03:44,820 --> 00:03:49,755
una classe p all'interno del corpo del supporto per definire il contenuto effettivo.

50
00:03:49,755 --> 00:03:54,240
Useremo l'oggetto multimediale nell'esercizio che segue.

51
00:03:54,240 --> 00:03:57,670
Puoi anche eseguire un incorporamento reattivo di contenuti.

52
00:03:57,670 --> 00:04:03,360
Ad esempio, se hai un video che vuoi racchiudere nella tua pagina web,

53
00:04:03,360 --> 00:04:07,690
puoi usare una classe iframe per inquadrare il video

54
00:04:07,690 --> 00:04:10,760
e quindi racchiuderlo all'interno del div con le classi

55
00:04:10,760 --> 00:04:16,410
reattive incorporate dando dimensioni in modo da poter 16by9,

56
00:04:16,410 --> 00:04:21,020
4by3 o video, contenuti da visualizzare.

57
00:04:21,020 --> 00:04:27,630
Quindi l'incorporamento reattivo, puoi usare i

58
00:04:27,630 --> 00:04:34,450
tag HTML embed o iframe o video o oggetto e quindi racchiuderlo all'interno di un div.

59
00:04:34,450 --> 00:04:41,345
Applicando il responsive di incorporamento e anche insieme al responsivo di incorporamento,

60
00:04:41,345 --> 00:04:47,295
specificando le dimensioni che si desidera utilizzare per le dimensioni 4by3 o 16by9.

61
00:04:47,295 --> 00:04:53,685
Quindi questo è il modo in cui puoi anche racchiudere contenuti video nelle tue pagine web.

62
00:04:53,685 --> 00:04:57,570
Ora, che abbiamo visto il supporto per le immagini e i media,

63
00:04:57,570 --> 00:05:02,230
è il momento di andare su un esercizio in cui vedremo come possiamo includere

64
00:05:02,230 --> 00:05:07,310
le immagini nella pagina web o nel sito web su cui abbiamo lavorato.

65
00:05:07,310 --> 00:05:11,345
Apporteremo alcune modifiche alla pagina index.html

66
00:05:11,345 --> 00:05:17,200
includendo alcune immagini e contenuti utilizzando l'oggetto multimediale.