1
00:00:00,000 --> 00:00:06,986

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Oggi, ho intenzione di
parlare un po 'di HTML,

3
00:00:10,450 --> 00:00:12,330
HyperText Markup Language.

4
00:00:12,330 --> 00:00:14,450
Vedete HTML ovunque in questi giorni.

5
00:00:14,450 --> 00:00:17,190
In realtà, se stai guardando questo
il video in un browser, sei

6
00:00:17,190 --> 00:00:19,120
vedendo HTML in questo momento.

7
00:00:19,120 --> 00:00:22,760
HTML non è un linguaggio di programmazione,
piuttosto, è un linguaggio di markup usato da

8
00:00:22,760 --> 00:00:25,460
browser web per rendere le pagine
su internet.

9
00:00:25,460 --> 00:00:30,410
>> Così si potrebbe chiedere, esattamente come sta scrivendo
una pagina web in HTML diverso

10
00:00:30,410 --> 00:00:33,574
di scrivere un programma in una programmazione
linguaggio come C?

11
00:00:33,574 --> 00:00:38,010
Beh, C è un linguaggio con molto rigoroso
regole sintattiche che deve essere

12
00:00:38,010 --> 00:00:39,880
compilato prima di poter correre.

13
00:00:39,880 --> 00:00:43,070
Se hai mai dimenticato di includere un
punto e virgola al termine di una dichiarazione

14
00:00:43,070 --> 00:00:46,660
il codice C, sai di cosa sto parlando
circa per quanto riguarda la sintassi rigorosa.

15
00:00:46,660 --> 00:00:50,360
>> I browser Web, però, sono un po 'più
perdonare quando si tratta di HTML.

16
00:00:50,360 --> 00:00:53,860
Anche se il codice HTML non è sintatticamente
corretta, la pagina potrebbe essere ancora

17
00:00:53,860 --> 00:00:57,150
visualizzata da un browser, ma potrebbe
non guardare come si intende.

18
00:00:57,150 --> 00:00:59,640
Quindi è sempre meglio
seguire le regole.

19
00:00:59,640 --> 00:01:01,990
Il modo migliore per ottenere una intuizione
su come funzionano le cose è quello di

20
00:01:01,990 --> 00:01:03,300
passare attraverso un esempio.

21
00:01:03,300 --> 00:01:07,360
>> Quindi quello che abbiamo qui è un semplice
progetto per una pagina web.

22
00:01:07,360 --> 00:01:10,690
Probabilmente avrete notato un sacco di cose
tra parentesi angolari.

23
00:01:10,690 --> 00:01:12,900
Beh, quelli sono solo i tag.

24
00:01:12,900 --> 00:01:15,810
Tags fondamentalmente informano i browser web
che, hey, cosa

25
00:01:15,810 --> 00:01:17,150
sta arrivando il vostro senso.

26
00:01:17,150 --> 00:01:20,770
Ricordate, però, ogni volta che si apre un
tag, è necessario chiuderlo una volta che siete

27
00:01:20,770 --> 00:01:21,750
fatto usando.

28
00:01:21,750 --> 00:01:24,690
>> Così, per esempio, apro una sezione
di codice con aperto

29
00:01:24,690 --> 00:01:26,960
corpo della staffa, vicino staffa.

30
00:01:26,960 --> 00:01:31,280
Ho poi aggiungere del testo, in questo caso, il mio
prima pagina web poi quando sono andato a

31
00:01:31,280 --> 00:01:35,540
chiudere questa sezione, io uso quasi
tag identiche tranne questa volta con un

32
00:01:35,540 --> 00:01:37,660
slash prima del corpo.

33
00:01:37,660 --> 00:01:41,140
In generale, questo è il formato che sei
intenzione di utilizzare ogni volta che si apre

34
00:01:41,140 --> 00:01:42,680
e il tag di chiusura.

35
00:01:42,680 --> 00:01:47,900
Insieme, un tag di apertura e un tag finale
comporre ciò che è chiamato un elemento.

36
00:01:47,900 --> 00:01:51,870
>> Se si guarda alla prima riga, ti
vedi un punto esclamativo seguito da

37
00:01:51,870 --> 00:01:53,350
DOCTYPE html.

38
00:01:53,350 --> 00:01:56,280
Questo è in realtà solo dicendo tuo browser
che il file è una pagina web

39
00:01:56,280 --> 00:01:58,280
scritto in HTML.

40
00:01:58,280 --> 00:02:01,970
Il tag HTML dice in sostanza,
ecco che arriva un po 'di HTML.

41
00:02:01,970 --> 00:02:04,950
Poi abbiamo un tag testa con
un tag title al suo interno.

42
00:02:04,950 --> 00:02:09,430
Il tag head si può pensare come
comprendente il codice HTML che viene per

43
00:02:09,430 --> 00:02:12,670
la maggior parte della tua pagina web
contenuto effettivo.

44
00:02:12,670 --> 00:02:16,700
>> In generale, si mette il titolo del tuo
pagina web qui, anche se ci sono alcuni

45
00:02:16,700 --> 00:02:19,350
altri tag che possono apparire
anche qui.

46
00:02:19,350 --> 00:02:25,020
Segue il corpo della pagina web, la
carne reale e ossa del tuo sito web.

47
00:02:25,020 --> 00:02:28,910
Nel nostro esempio, abbiamo appena messo un semplice
frase, My First Webpage,

48
00:02:28,910 --> 00:02:34,100
che, se corriamo il nostro sito, cercherà
un po 'di qualcosa come questo.

49
00:02:34,100 --> 00:02:36,810
La pagina web non è troppo strano,
ma non preoccupatevi.

50
00:02:36,810 --> 00:02:39,210
Ti abete rosso è presto.

51
00:02:39,210 --> 00:02:44,070
>> Così il sopra HTML, ti daremo un
modello di base per una pagina web,

52
00:02:44,070 --> 00:02:46,310
niente di speciale, solo le ossa nude.

53
00:02:46,310 --> 00:02:49,160
Ma se io sto creando una pagina web,
cosa succede se voglio aggiungere un

54
00:02:49,160 --> 00:02:50,760
foto, per esempio, io?

55
00:02:50,760 --> 00:02:52,760
Beh, posso farlo.

56
00:02:52,760 --> 00:02:55,460
Ci sono un paio di modi per
aggiungere immagini al tuo sito.

57
00:02:55,460 --> 00:02:59,780
Se l'immagine si trova nella stessa cartella
il file HTML, è possibile collegare al

58
00:02:59,780 --> 00:03:01,950
immagine tramite il percorso come questo.

59
00:03:01,950 --> 00:03:05,910
>> Si apre con un tag di immagine seguita
da nell'attributo Alt in

60
00:03:05,910 --> 00:03:07,240
fonte dell'immagine.

61
00:03:07,240 --> 00:03:12,030
Il valore dell'attributo Alt è solo una
testo alternativo nel caso in cui un utente non può

62
00:03:12,030 --> 00:03:13,580
vedere l'immagine.

63
00:03:13,580 --> 00:03:19,680
In alternativa, è anche possibile collegare a
immagini tramite un URL completo, come questo.

64
00:03:19,680 --> 00:03:24,180
Ora, che il sito in realtà non esiste,
ma se ci fosse una foto di

65
00:03:24,180 --> 00:03:27,760
me a questo indirizzo, potrei usare
l'URL di origine di includere

66
00:03:27,760 --> 00:03:29,930
la sua immagine sul mio sito.

67
00:03:29,930 --> 00:03:35,590
In entrambi i casi, si finisce con una più
sito più bello, qualcosa di simile.

68
00:03:35,590 --> 00:03:39,730
>> Beh, è ​​abbastanza freddo, ma io tipo
di volere un testo anche qui.

69
00:03:39,730 --> 00:03:43,020
Così facciamo solo aggiungere qualcosa
super semplice sopra la

70
00:03:43,020 --> 00:03:45,210
immagine, come l'intestazione.

71
00:03:45,210 --> 00:03:50,830
Tutto quello che ho fatto finora è usare l'intestazione
tag H1, e una rottura tag line, br.

72
00:03:50,830 --> 00:03:54,900
Il tag di intestazione rende il carattere un po '
po 'più grande e più importante.

73
00:03:54,900 --> 00:03:58,930
Il tag di interruzione di riga, dall'altro
mano, è genere di freddo.

74
00:03:58,930 --> 00:04:03,720
A differenza di molti altri tag, non è necessario
un tag di apertura e di chiusura pausa, basta

75
00:04:03,720 --> 00:04:05,120
quello sopra indicato.

76
00:04:05,120 --> 00:04:10,420
Questo perché pausa ha alcun contenuto
ed è quindi un elemento vuoto.

77
00:04:10,420 --> 00:04:14,940
>> Elementi vuoti come questo, è possibile aprire
e chiudere simultaneamente semplicemente

78
00:04:14,940 --> 00:04:20,420
tra cui una barra al
fine della dichiarazione iniziale.

79
00:04:20,420 --> 00:04:24,390
Così ora il mio sito sembra un po '
qualcosa di simile.

80
00:04:24,390 --> 00:04:27,410
Meglio, ma che tipo di prova
come un vicolo cieco.

81
00:04:27,410 --> 00:04:30,850
Non c'è altro posto dove andare a parte
da questa pagina principale.

82
00:04:30,850 --> 00:04:33,075
Bene, vediamo di fissare che,
includendo un link.

83
00:04:33,075 --> 00:04:36,860
>> Quello che ho intenzione di fare è utilizzare un
attributo indicato con A e fare l'

84
00:04:36,860 --> 00:04:40,780
immagine un link per, diciamo, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
In questo modo, ogni volta che qualcuno clicca su di me,
il browser sarà indirizzato a

86
00:04:44,460 --> 00:04:47,810
un'altra, probabilmente più
utile, pagina web.

87
00:04:47,810 --> 00:04:51,040
Ho dovuto ridurre la dimensione del
testo un po 'perché la nostra pagina web è

88
00:04:51,040 --> 00:04:52,470
sempre più avanzate.

89
00:04:52,470 --> 00:04:54,590
Ma si spera, è ancora chiaro.

90
00:04:54,590 --> 00:04:59,460
Il mio sito web sembra esattamente lo stesso unico
Ora, ogni volta che clicco sulla foto,

91
00:04:59,460 --> 00:05:04,410
il mio browser si aprirà un altro
scheda della pagina web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Infine, diciamo che ho intenzione di stile
questo sito in seguito utilizzando i CSS.

93
00:05:08,970 --> 00:05:11,730
CSS è ciò che è noto come un
foglio di stile CSS.

94
00:05:11,730 --> 00:05:15,230
E fornisce essenzialmente un efficiente
modo per modificare e stile

95
00:05:15,230 --> 00:05:16,910
blocchi simili di codice.

96
00:05:16,910 --> 00:05:21,290
Voglio iniziare ad organizzare la mia HTML
facilitare acconciare seguito.

97
00:05:21,290 --> 00:05:26,900
Qui, ho creato due diversi tipi di
identificatori per aiutare ad organizzare il mio codice.

98
00:05:26,900 --> 00:05:31,170
Ho usato l'attributo ID all'interno di un
divisione, o tag div, e ho usato un

99
00:05:31,170 --> 00:05:34,120
Classe attributo all'interno
un altro tag div.

100
00:05:34,120 --> 00:05:37,190
>> Attributi id e class
funzionare in modo simile.

101
00:05:37,190 --> 00:05:41,210
L'unica differenza è che si può avere solo
un elemento, l'ID specifico, ma

102
00:05:41,210 --> 00:05:43,600
qualsiasi numero di elementi
possono condividere una classe.

103
00:05:43,600 --> 00:05:47,690
Così, per esempio, posso utilizzare la classe
immagine più volte, ma non posso

104
00:05:47,690 --> 00:05:50,533
creare un'altra divisione
con la parte superiore ID.

105
00:05:50,533 --> 00:05:54,750
Anche se io non sono andato in CSS,
un'altra lingua comunemente utilizzata

106
00:05:54,750 --> 00:05:59,700
accanto HTML, una volta che comincio styling
il mio codice con i CSS, posso utilizzare questi

107
00:05:59,700 --> 00:06:03,730
attributi organizzative influenza
l'estetica della mia pagina web.

108
00:06:03,730 --> 00:06:07,600
>> Tutto nel massimo campionato
avrà stylings similari o qualsiasi

109
00:06:07,600 --> 00:06:12,010
altro gruppo di HTML gruppo I nella
l'immagine di classe condividerà un aspetto simile.

110
00:06:12,010 --> 00:06:15,700
Questo è molto più facile che cercare di modificare
e immagini in stile o blocchi di

111
00:06:15,700 --> 00:06:17,690
testo individualmente.

112
00:06:17,690 --> 00:06:21,480
>> Così siamo andati oltre le basi di come
fare una pagina web con HTML.

113
00:06:21,480 --> 00:06:25,280
HTML ha un sacco di altre caratteristiche troppo
che se abbinato con altre lingue

114
00:06:25,280 --> 00:06:29,220
come CSS e JavaScript, può davvero
rendere le pagine spiccano.

115
00:06:29,220 --> 00:06:32,960
Il modo migliore per mettersi a proprio agio con
HTML è solo a pasticciare con essa,

116
00:06:32,960 --> 00:06:35,120
vedere cosa funziona e cosa no.

117
00:06:35,120 --> 00:06:36,570
>> Il mio nome è Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Questo è CS50.

119
00:06:37,820 --> 00:06:40,640

120
00:06:40,640 --> 00:06:45,690
>> Così, per esempio, posso usare
l'immagine di classe -

121
00:06:45,690 --> 00:06:48,028
No, ci sono così tanti attributi.

122
00:06:48,028 --> 00:06:52,500

123
00:06:52,500 --> 00:06:53,950
Il mio nome è Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Questo è CS 650.

125
00:06:58,560 --> 00:06:59,810
Voglio dire CSS.

126
00:06:59,810 --> 00:07:02,325

127
00:07:02,325 --> 00:07:03,575
Questo è il CSS.

128
00:07:03,575 --> 00:07:05,408