1 00:00:00,000 --> 00:00:06,100 2 00:00:06,100 --> 00:00:08,790 >> DOUG LLOYD: Così abbiamo trascorso about-- se la mia matematica è giusto, 3 00:00:08,790 --> 00:00:11,900 e penso che guardando back-- penso abbiamo speso circa 35 video a parlare 4 00:00:11,900 --> 00:00:15,139 su vari aspetti della C, forse un po 'di più, forse un po' meno. 5 00:00:15,139 --> 00:00:16,930 E noi non copriamo tutto in C, ma 6 00:00:16,930 --> 00:00:21,170 coperto una grossa fetta della lingua, la stragrande maggioranza di esso, 7 00:00:21,170 --> 00:00:22,882 certamente per usi comuni. 8 00:00:22,882 --> 00:00:25,090 Ora stiamo andando a parlare su un'altra lingua, HTML. 9 00:00:25,090 --> 00:00:28,180 E stiamo andando a coprire in un solo video. 10 00:00:28,180 --> 00:00:29,340 >> Ma che sta per essere OK. 11 00:00:29,340 --> 00:00:31,410 Che sta per diventare realtà qualcosa che si sta andando per abituarsi. 12 00:00:31,410 --> 00:00:33,535 Ora che avete la fondamenti di una lingua, 13 00:00:33,535 --> 00:00:35,776 in realtà è abbastanza facile per iniziare ad imparare altri. 14 00:00:35,776 --> 00:00:37,650 Quindi stiamo per iniziare fare un passo un po 'indietro 15 00:00:37,650 --> 00:00:43,340 e sorvolare la base differenze tra queste lingue 16 00:00:43,340 --> 00:00:45,750 e una sorta di lasciare ad esso. 17 00:00:45,750 --> 00:00:48,530 C'è un sacco di veramente grande risorse su internet, che 18 00:00:48,530 --> 00:00:51,279 stiamo per iniziare a voi dirigere verso perché Internet è 19 00:00:51,279 --> 00:00:53,340 un vasto archivio di informazioni. 20 00:00:53,340 --> 00:00:55,960 E così non è come avrete essere perdendo necessariamente 21 00:00:55,960 --> 00:00:58,349 non avendo le informazioni coperto da un video. 22 00:00:58,349 --> 00:01:00,640 Sarete ancora in grado di ottenere tutto il necessario e l'uso 23 00:01:00,640 --> 00:01:03,590 le conoscenze che hai già costruito attraverso la comprensione C 24 00:01:03,590 --> 00:01:07,130 per rendere la curva di apprendimento per questi altre lingue in realtà molto più piatte. 25 00:01:07,130 --> 00:01:08,640 Io prometto. 26 00:01:08,640 --> 00:01:12,770 >> Ma parliamo di una lingua che è davvero fondamentale per ogni web 27 00:01:12,770 --> 00:01:14,830 pagina, che è l'HTML. 28 00:01:14,830 --> 00:01:18,230 HTML è la Hyper Text Markup Language. 29 00:01:18,230 --> 00:01:22,700 HTML è un linguaggio ma è non un linguaggio di programmazione. 30 00:01:22,700 --> 00:01:23,900 >> HTML non ha variabili. 31 00:01:23,900 --> 00:01:26,430 Non ha logica o funzioni o qualcosa di simile. 32 00:01:26,430 --> 00:01:30,301 Noi non possiamo fare qualsiasi la programmazione di per sé in HTML. 33 00:01:30,301 --> 00:01:32,300 A volte si sente le persone si descrivono 34 00:01:32,300 --> 00:01:35,710 come i programmatori HTML, che Non è del tutto esatto. 35 00:01:35,710 --> 00:01:37,980 Non possiamo scrivere programmi HTML. 36 00:01:37,980 --> 00:01:40,770 >> HTML è solo utilizzato per marcare il testo. 37 00:01:40,770 --> 00:01:42,690 Si chiama un linguaggio di markup. 38 00:01:42,690 --> 00:01:47,680 E che questo does-- questo markup-- usiamo tag in HTML e questi tags-- 39 00:01:47,680 --> 00:01:51,600 questo markup-- semanticamente definisce la struttura di una pagina 40 00:01:51,600 --> 00:01:55,280 e fa sì che il testo che esiste tra i tag devono essere interpretati 41 00:01:55,280 --> 00:01:57,320 dai browser in modi diversi. 42 00:01:57,320 --> 00:02:00,370 E forse è meglio spiegare in questo modo per di un'illustrazione. 43 00:02:00,370 --> 00:02:06,450 >> Ecco una semplice pagina HTML, non un programma HTML, di nuovo, una pagina HTML. 44 00:02:06,450 --> 00:02:08,680 E noi sappiamo che è un Pagina HTML perché abbiamo 45 00:02:08,680 --> 00:02:11,480 delimitata tutto con tag HTML. 46 00:02:11,480 --> 00:02:13,850 Quindi questo è ciò che un tag HTML assomiglia. 47 00:02:13,850 --> 00:02:15,870 E 'tra le parentesi angolari. 48 00:02:15,870 --> 00:02:18,570 E notare in alto abbiamo HTML e in fondo, 49 00:02:18,570 --> 00:02:21,400 dopo che abbiamo fatto ciò che è apparentemente un sacco di altri HTML, 50 00:02:21,400 --> 00:02:24,310 abbiamo staffa angolare barra HTML. 51 00:02:24,310 --> 00:02:29,262 In modo che tipo di è il confine tra ciò che è HTML e cosa non lo è. 52 00:02:29,262 --> 00:02:32,220 E, naturalmente, convenzionalmente, appena come hai scritto tutti i vostri programmi C 53 00:02:32,220 --> 00:02:35,300 con le estensioni puntino C, tutti i file HTML 54 00:02:35,300 --> 00:02:37,909 si concluderà con estensioni HTML punti. 55 00:02:37,909 --> 00:02:39,200 Ma c'è di più succedendo qui. 56 00:02:39,200 --> 00:02:40,658 Non resta che questi tag. 57 00:02:40,658 --> 00:02:44,010 Abbiamo a quanto pare abbiamo questo cosa chiamata un tag testa. 58 00:02:44,010 --> 00:02:46,010 Bene, bene, che cos'è? 59 00:02:46,010 --> 00:02:48,550 >> Beh, forse è meglio distinguere attraverso un corpo, 60 00:02:48,550 --> 00:02:50,590 corpo essendo il contenuto della pagina web. 61 00:02:50,590 --> 00:02:55,860 Così forse il tag testa definisce roba che non è nella finestra del browser corretto, 62 00:02:55,860 --> 00:02:59,410 ma è in qualche modo importante per il nostro La pagina web viene visualizzato correttamente. 63 00:02:59,410 --> 00:03:02,490 Ad esempio, all'interno della tag head abbiamo tag del titolo. 64 00:03:02,490 --> 00:03:05,500 >> Così titolo essendo ciao mondo, Che in realtà sta per essere quello che 65 00:03:05,500 --> 00:03:08,797 si presenta nella scheda in Chrome o in safari o Firefox-- 66 00:03:08,797 --> 00:03:11,880 qualunque browser prefer-- che è quello che sta per presentarsi nel titolo. 67 00:03:11,880 --> 00:03:14,800 E prima linguette mostrerebbe in tutta la finestra del browser 68 00:03:14,800 --> 00:03:19,710 e si può avere una sola pagina aprire in una finestra alla volta. 69 00:03:19,710 --> 00:03:22,160 In modo che sara 'il titolo della mia pagina nella scheda 70 00:03:22,160 --> 00:03:24,600 o la barra di finestra del browser, ciao mondo. 71 00:03:24,600 --> 00:03:28,611 E poi il contenuto della mia La pagina web sarà mondo, ciao. 72 00:03:28,611 --> 00:03:31,360 Quindi, diamo uno sguardo a ciò che alcuni cosa del genere potrebbe essere simile. 73 00:03:31,360 --> 00:03:33,210 Questa è una bella semplice pagina HTML. 74 00:03:33,210 --> 00:03:35,970 Quindi sono qui nel mio CS50 IDE e Ho zoomato in un po '. 75 00:03:35,970 --> 00:03:38,290 E sto solo andando a aprire ciao puntino HTML 76 00:03:38,290 --> 00:03:42,000 e mostrare che questo è più o meno il contenuto della pagina che abbiamo visto prima. 77 00:03:42,000 --> 00:03:45,240 Le mie semplici tag HTML, testa, tag title, corpo, e così via. 78 00:03:45,240 --> 00:03:47,320 Ho rientrato essere pulito. 79 00:03:47,320 --> 00:03:51,530 >> E poi che cosa posso fare nel mio IDE è solo l'anteprima della pagina. 80 00:03:51,530 --> 00:03:52,630 E ce ne andiamo. 81 00:03:52,630 --> 00:03:56,070 Il contenuto della mia pagina è mondo, ciao, e non vedo niente 82 00:03:56,070 --> 00:03:58,500 in dai tag head lì. 83 00:03:58,500 --> 00:03:59,980 È solo il contenuto del corpo. 84 00:03:59,980 --> 00:04:00,780 Mondo, ciao. 85 00:04:00,780 --> 00:04:03,700 E di nuovo il corpo solo Detto questo, mondo, ciao. 86 00:04:03,700 --> 00:04:06,160 L'altra parte è mancante. 87 00:04:06,160 --> 00:04:07,610 >> Ecco, questo è davvero tutto qui. 88 00:04:07,610 --> 00:04:11,370 Questa è una pagina molto semplice HTML di base. 89 00:04:11,370 --> 00:04:14,280 Ora ho la mia rientrato HTML essere veramente bello e organizzato, 90 00:04:14,280 --> 00:04:15,840 ma io in realtà non devo. 91 00:04:15,840 --> 00:04:17,959 Potrei farlo sembrare piuttosto brutta. 92 00:04:17,959 --> 00:04:19,467 E questo potrebbe funzionare. 93 00:04:19,467 --> 00:04:21,050 Questa sarebbe la stessa pagina web esatto. 94 00:04:21,050 --> 00:04:23,100 Ho appena deciso di eliminare tutto lo spazio bianco. 95 00:04:23,100 --> 00:04:24,820 >> Come si è visto, lo spazio bianco è dati. 96 00:04:24,820 --> 00:04:28,540 E così quando siamo l'invio di dati da mittente al destinatario, dal server 97 00:04:28,540 --> 00:04:30,670 al cliente, i dati costa denaro. 98 00:04:30,670 --> 00:04:34,460 E così sbarazzarsi di spazio bianco in realtà è una buona idea 99 00:04:34,460 --> 00:04:37,320 se siete qualcuno che serve un sacco di contenuti web. 100 00:04:37,320 --> 00:04:39,820 E 'una cattiva idea se siete qualcuno che è l'apprendimento di questa roba 101 00:04:39,820 --> 00:04:41,528 e si desidera avere è ben organizzato. 102 00:04:41,528 --> 00:04:43,810 Questo è molto più facile da analizzare di questo. 103 00:04:43,810 --> 00:04:45,540 Ma è funzionalmente identici. 104 00:04:45,540 --> 00:04:48,720 >> Il rientro e cose del genere in realtà non importa in HTML. 105 00:04:48,720 --> 00:04:53,634 Tutto ciò che conta è tag di apertura e chiudere i tag nell'ordine corretto. 106 00:04:53,634 --> 00:04:55,050 Notate cosa è successo qui, però. 107 00:04:55,050 --> 00:04:58,450 Il markup ci dà un modo per comunicare le informazioni supplementari 108 00:04:58,450 --> 00:04:59,940 su ciò che abbiamo scritto. 109 00:04:59,940 --> 00:05:03,130 La parte Ciao, mondo era interpretato come il titolo. 110 00:05:03,130 --> 00:05:06,410 E il mondo, ciao parte è stata interpretato come il contenuto 111 00:05:06,410 --> 00:05:09,090 o quello che dovrebbe essere visibile sulla mia pagina web. 112 00:05:09,090 --> 00:05:12,167 >> Ci sono oltre 100 di questi diversi tag e un sacco di grandi risorse 113 00:05:12,167 --> 00:05:13,000 online per trovare loro. 114 00:05:13,000 --> 00:05:14,900 Stiamo andando a parlare di un alcuni di loro in questo video, alcuni 115 00:05:14,900 --> 00:05:16,440 delle cose davvero fondamentale. 116 00:05:16,440 --> 00:05:18,440 Ma non stiamo andando parlare su tutto, perché 117 00:05:18,440 --> 00:05:20,250 sarebbe esaustivo di farlo. 118 00:05:20,250 --> 00:05:22,880 >> Un'altra cosa che si può fare, però, è aprire strumenti di sviluppo. 119 00:05:22,880 --> 00:05:26,069 E se vi ricordate da il nostro video su HTTP, 120 00:05:26,069 --> 00:05:27,860 Ho spiegato come aprire su strumenti di sviluppo. 121 00:05:27,860 --> 00:05:32,020 In Chrome di solito è il tasto F12 per aprire la barra degli strumenti di sviluppo. 122 00:05:32,020 --> 00:05:35,909 Poi invece di scegliere la rete scheda, è possibile scegliere la scheda Elementi. 123 00:05:35,909 --> 00:05:37,700 E se si carica un web pagina, ti realtà 124 00:05:37,700 --> 00:05:40,280 vedere l'HTML che crea quella pagina web. 125 00:05:40,280 --> 00:05:44,090 E così si può imparare molto su HTML cercando in tuoi siti web preferiti 126 00:05:44,090 --> 00:05:48,474 e vedere come costruire il vari pezzi di loro che ti piace. 127 00:05:48,474 --> 00:05:50,890 Così forse c'è questo freddo modello o qualcosa di simile. 128 00:05:50,890 --> 00:05:52,140 Come fanno a fare con l'HTML? 129 00:05:52,140 --> 00:05:55,630 Beh si può solo aprire il tuo sviluppatore strumenti e passa il mouse sopra l'elemento 130 00:05:55,630 --> 00:05:57,700 e vedere esattamente ciò che lo rende HTML. 131 00:05:57,700 --> 00:05:59,450 Ecco, questo è davvero un buon modo per imparare l'HTML, 132 00:05:59,450 --> 00:06:02,330 e mi consiglia vivamente di lo si fa sia per imparare l'HTML 133 00:06:02,330 --> 00:06:04,930 e anche per imparare un po ' po 'su alcune delle opzioni 134 00:06:04,930 --> 00:06:07,050 a vostra disposizione in strumenti di sviluppo, che 135 00:06:07,050 --> 00:06:10,200 certamente tornare utile come si inizia a fare più intenso web 136 00:06:10,200 --> 00:06:11,090 programmazione. 137 00:06:11,090 --> 00:06:14,080 >> Quindi, diamo un'occhiata a un paio di tag HTML comuni. 138 00:06:14,080 --> 00:06:17,210 E faremo saltare e dare un'occhiata a che cosa questi tag saranno anche render 139 00:06:17,210 --> 00:06:20,490 come, cercando in alcuni file nel mio IDE. 140 00:06:20,490 --> 00:06:26,330 Così qui sono tre tag molto di base per tweaking l'aspetto visivo del testo. 141 00:06:26,330 --> 00:06:29,050 C'è tag B, tag e tag I U. 142 00:06:29,050 --> 00:06:33,170 E rispettivamente ciò che fanno è rendere il testo tra di loro in grassetto, 143 00:06:33,170 --> 00:06:35,430 corsivo, e sottolineature. 144 00:06:35,430 --> 00:06:40,430 Quindi cerchiamo di vedere cosa sarebbe guardare come su una pagina web attuale nel mio IDE. 145 00:06:40,430 --> 00:06:43,390 >> Quindi, qui nel mio IDE ho un file chiamato BIU puntino HTML. 146 00:06:43,390 --> 00:06:46,770 BIU dot HTML solo di essere grassetto, il corsivo, sottolineato. 147 00:06:46,770 --> 00:06:47,830 Aprirò in su. 148 00:06:47,830 --> 00:06:51,810 >> E vedremo che qui io avere questo testo è tag B grassetto. 149 00:06:51,810 --> 00:06:54,010 Questo testo è tag I corsivo. 150 00:06:54,010 --> 00:06:56,307 E questo testo è tag U sottolineate. 151 00:06:56,307 --> 00:06:57,640 Cosa è questo andare a guardare come? 152 00:06:57,640 --> 00:06:59,473 Bene ancora una volta, tutto quello che ho a fare è andare qui 153 00:06:59,473 --> 00:07:04,690 a mio browser, il browser di file, fare clic su Anteprima, e questo è quello che si presenta. 154 00:07:04,690 --> 00:07:07,520 >> Il testo tra la B tag è infatti ora in grassetto. 155 00:07:07,520 --> 00:07:10,720 Il testo tra la I tag è infatti ora in corsivo. 156 00:07:10,720 --> 00:07:14,634 E il testo tra U tag è infatti ora sottolineati. 157 00:07:14,634 --> 00:07:15,550 In modo che è abbastanza buono. 158 00:07:15,550 --> 00:07:18,450 Ora sappiamo come rendere il testo guardare un po 'più di fantasia 159 00:07:18,450 --> 00:07:20,360 o disegnare enfasi a certe cose. 160 00:07:20,360 --> 00:07:25,530 Un'altra coppia di tag comuni qui sono tag di paragrafo, i tag P, e di intestazione, 161 00:07:25,530 --> 00:07:27,980 che ho renderizzato qui come HX. 162 00:07:27,980 --> 00:07:32,520 >> Questi tag P, questi tag di paragrafo, rompere il vostro testo verso l'alto in paragrafi. 163 00:07:32,520 --> 00:07:34,646 Non è sufficiente per solo premere Invio e lasciare spazi, 164 00:07:34,646 --> 00:07:37,186 perché un computer è solo andare di fare ciò che gli si dice di fare 165 00:07:37,186 --> 00:07:39,450 e ignora bianco spazio per la maggior parte. 166 00:07:39,450 --> 00:07:41,636 Quindi non possiamo premi invio e si aspettano il nostro computer 167 00:07:41,636 --> 00:07:43,760 di interpretare che vogliamo per iniziare un nuovo paragrafo. 168 00:07:43,760 --> 00:07:47,670 Dobbiamo dire molto esplicitamente questo è uno paragraph-- questo è another-- 169 00:07:47,670 --> 00:07:50,740 racchiudendo ciascuno in un insieme di tag P. 170 00:07:50,740 --> 00:07:54,560 >> E abbiamo anche queste opzioni per i tag H, i tag di intestazione. 171 00:07:54,560 --> 00:07:57,000 Abbiamo sei livelli differenti di intestazioni, uno, due, tre, 172 00:07:57,000 --> 00:08:01,110 quattro, cinque e sei, che sono progressivamente più grandi 173 00:08:01,110 --> 00:08:01,710 intestazioni. 174 00:08:01,710 --> 00:08:04,360 Ed essi diventano più piccoli e più piccoli e più piccoli. 175 00:08:04,360 --> 00:08:07,690 Quindi abbiamo un colpo di testa alto livello, un secondo intestazione di livello, e così via, e così via. 176 00:08:07,690 --> 00:08:10,480 >> Diamo uno sguardo a magari un po ' Tag P e alcuni tag di intestazione 177 00:08:10,480 --> 00:08:13,110 in azione su una pagina web. 178 00:08:13,110 --> 00:08:18,180 Quindi, qui nel mio IDE ho un file chiamato PH puntino HTML, PH essendo paragrafi 179 00:08:18,180 --> 00:08:18,970 e tag di intestazione. 180 00:08:18,970 --> 00:08:20,709 Aprite che fino. 181 00:08:20,709 --> 00:08:23,000 C'è molto da fare qui perché ho messo un po 'lorem 182 00:08:23,000 --> 00:08:24,660 ipsum, del testo solo a caso qui. 183 00:08:24,660 --> 00:08:27,284 Quindi mi zoom out un po ' perché c'è così tanto da fare. 184 00:08:27,284 --> 00:08:31,980 Ma si noti che ho per lo top qui Ho un H1, un livello uno, 185 00:08:31,980 --> 00:08:32,802 tag di intestazione. 186 00:08:32,802 --> 00:08:36,010 Poi ho un paragrafo, che è solo un mucchio di casuale lorem text-- ipsum-- 187 00:08:36,010 --> 00:08:38,720 solo difetto di riempimento standard in formato testo. 188 00:08:38,720 --> 00:08:41,970 Così ho due paragrafi all'interno di tale livello uno intestazione e poi in basso ho 189 00:08:41,970 --> 00:08:46,850 avere un livello di due intestazione qui sulla linea 24, un secondo livello di intestazione, e altri due 190 00:08:46,850 --> 00:08:47,840 paragrafi. 191 00:08:47,840 --> 00:08:51,910 Beh, che cosa fa questo aspetto se ho vista nella mia anteprima? 192 00:08:51,910 --> 00:08:53,790 Vediamo. 193 00:08:53,790 --> 00:08:55,730 >> Così notare che il prima intestazione livello qui 194 00:08:55,730 --> 00:08:58,420 è in realtà un po 'più grande rispetto al secondo livello di intestazione. 195 00:08:58,420 --> 00:08:59,940 Così abbiamo utilizzato tag H1. 196 00:08:59,940 --> 00:09:03,820 E notare che i tag P ci consentono a rompere le cose in paragrafi. 197 00:09:03,820 --> 00:09:07,500 Se avessimo deciso di eliminare questi tag P e in realtà appena messo entra o Returns 198 00:09:07,500 --> 00:09:10,110 tra quello che speravamo sarebbe essere i diversi paragrafi, 199 00:09:10,110 --> 00:09:13,193 sarebbero tutti appena sbattono insieme e non avrebbe questa bella paragrafo 200 00:09:13,193 --> 00:09:15,840 separazione con spazio sopra e sotto. 201 00:09:15,840 --> 00:09:18,300 Ed è quello che il paragrafo tag e tag di intestazione 202 00:09:18,300 --> 00:09:22,440 sono comunemente usati per fare per disegnare attenzione alle porzioni della nostra pagina web 203 00:09:22,440 --> 00:09:23,550 in quel modo. 204 00:09:23,550 --> 00:09:27,560 >> Next up sono alcuni tag che usiamo per costruire liste sulla nostra pagina web. 205 00:09:27,560 --> 00:09:30,820 Così abbiamo ordinato lists-- ULs-- che sono solo 206 00:09:30,820 --> 00:09:34,090 elenchi puntati, ordinate Lista che sono numbered-- 207 00:09:34,090 --> 00:09:37,680 OLs-- e all'interno di entrambi uno di quelli che hanno bisogno di avere 208 00:09:37,680 --> 00:09:40,600 set di come per indicare voci di elenco, LI. 209 00:09:40,600 --> 00:09:44,370 E così abbiamo aperto tag UL e mettiamo oggetti al suo interno. 210 00:09:44,370 --> 00:09:46,920 E poi quando abbiamo finito con che, possiamo chiudere il tag UL. 211 00:09:46,920 --> 00:09:49,850 >> E allo stesso modo possiamo avere un elenco ordinato o numerato 212 00:09:49,850 --> 00:09:51,560 e mettere voci di elenco all'interno di questo. 213 00:09:51,560 --> 00:09:53,350 Quindi, diamo uno sguardo un paio di liste 214 00:09:53,350 --> 00:09:57,230 e che cosa farebbero render come il CS50 IDE. 215 00:09:57,230 --> 00:10:00,640 Così ho qui nel mio IDE un file chiamato liste punteggiano HTML. 216 00:10:00,640 --> 00:10:03,100 Diamo un'occhiata. 217 00:10:03,100 --> 00:10:08,482 >> E notate qui ho una non ordinata elencare cinque cose in esso. 218 00:10:08,482 --> 00:10:11,440 E poi ho un elenco ordinato, e Ho cambiato l'etichetta un po ', 219 00:10:11,440 --> 00:10:11,939 destra? 220 00:10:11,939 --> 00:10:13,152 Ho detto all'inizio è uguale a sei. 221 00:10:13,152 --> 00:10:16,110 Si scopre con un elenco Ho ordinato è possibile impostare il punto di partenza ovunque 222 00:10:16,110 --> 00:10:20,130 I want-- di default sarà tra-- semplicemente aggiungendo questo cosiddetto attributo 223 00:10:20,130 --> 00:10:21,190 a mio tag OL. 224 00:10:21,190 --> 00:10:23,572 E così questa lista sarà iniziare il conteggio alle sei. 225 00:10:23,572 --> 00:10:26,780 Quindi gli elementi di tale elenco numerato dovrebbe essere sei, sette, otto, nove, dieci, 226 00:10:26,780 --> 00:10:29,930 perché ci sono cinque elementi nella lista, anziché utilizzare una, 227 00:10:29,930 --> 00:10:33,770 due, tre, quattro, cinque, che sarebbe il caso se avessi detto OL 228 00:10:33,770 --> 00:10:36,730 senza specificare l'attributo di partenza. 229 00:10:36,730 --> 00:10:41,594 >> Quindi non ci resta Anteprima questo in modo da poter ottenere un senso di quello che sta succedendo qui. 230 00:10:41,594 --> 00:10:42,260 E ce ne andiamo. 231 00:10:42,260 --> 00:10:44,610 Ecco la mia lista. 232 00:10:44,610 --> 00:10:47,810 I primi cinque elementi sono liste non ordinate o puntati. 233 00:10:47,810 --> 00:10:51,010 E i prossimi cinque elementi sono una lista ordinata separata 234 00:10:51,010 --> 00:10:52,980 a partire da sei. 235 00:10:52,980 --> 00:10:56,247 Ecco come possiamo costruire le liste usando HTML. 236 00:10:56,247 --> 00:10:58,080 Un'altra cosa che si potrebbe vuole fare con l'HTML 237 00:10:58,080 --> 00:11:01,520 è costruire una tabella di Informazioni di righe e colonne 238 00:11:01,520 --> 00:11:04,560 di presentare le informazioni in un particolarmente organizzato modo. 239 00:11:04,560 --> 00:11:09,110 Per fare questo con l'HTML possiamo avere un definizione della tabella inizio parentesi aperta 240 00:11:09,110 --> 00:11:10,160 tavola. 241 00:11:10,160 --> 00:11:14,680 E poi dentro di noi quel tavolo potrebbe avere un insieme di righe, tag TR 242 00:11:14,680 --> 00:11:15,980 per indicare ogni riga. 243 00:11:15,980 --> 00:11:22,510 E poi i tag TD vanno all'interno dei tag TR per specificare una colonna in una riga. 244 00:11:22,510 --> 00:11:24,340 >> Perché si chiama TD e non tc? 245 00:11:24,340 --> 00:11:25,940 Beh, TD è sinonimo di dati della tabella. 246 00:11:25,940 --> 00:11:27,900 Di solito si è messa vostra informazione vi. 247 00:11:27,900 --> 00:11:29,440 Ecco perché si tratta di TD e non TC. 248 00:11:29,440 --> 00:11:31,140 E 'un po' di confusione. 249 00:11:31,140 --> 00:11:33,720 >> In modo da avere tag table e all'interno di tag table 250 00:11:33,720 --> 00:11:35,600 si dispone di un numero di righe, TR. 251 00:11:35,600 --> 00:11:40,030 E all'interno di ogni riga si ha TDS per il numero di colonne 252 00:11:40,030 --> 00:11:42,880 che si desidera avere in quella riga particolare. 253 00:11:42,880 --> 00:11:47,730 Diamo uno sguardo a un semplice tabella sopra in CS50 IDE. 254 00:11:47,730 --> 00:11:49,730 >> Così ho qui un file chiamato tavolo dot HTML. 255 00:11:49,730 --> 00:11:53,390 Diamo uno sguardo a quello che sembra. 256 00:11:53,390 --> 00:11:56,225 C'è molto da fare qui, ma se notate ho un tavolo aperto. 257 00:11:56,225 --> 00:11:57,850 Sto iniziando la definizione di tavolo. 258 00:11:57,850 --> 00:12:02,100 E poi nella mia prima fila mi pare hanno quattro colonne, uno, due, tre, 259 00:12:02,100 --> 00:12:02,660 quattro. 260 00:12:02,660 --> 00:12:04,290 E poi ho finito con quella riga. 261 00:12:04,290 --> 00:12:07,750 >> Poi comincio un'altra fila e fare due, quattro, sei, otto. 262 00:12:07,750 --> 00:12:08,850 Finisci quella riga. 263 00:12:08,850 --> 00:12:11,410 Fare un'altra fila, tre, sei, nove, 12. 264 00:12:11,410 --> 00:12:14,830 E poi un ultima fila, quattro, otto, 12, e anche se è 265 00:12:14,830 --> 00:12:16,560 un po 'tagliato fuori qui, 16. 266 00:12:16,560 --> 00:12:17,710 >> Ho finito quella riga. 267 00:12:17,710 --> 00:12:18,970 Ho finito il tavolo. 268 00:12:18,970 --> 00:12:21,430 E poi ho finito con il mio codice HTML. 269 00:12:21,430 --> 00:12:22,590 Che cosa significa questo aspetto? 270 00:12:22,590 --> 00:12:26,014 271 00:12:26,014 --> 00:12:27,430 Beh, non è davvero molto da vedere. 272 00:12:27,430 --> 00:12:31,690 Ho chiaramente organizzato le mie informazioni in un modo alquanto più organizzato. 273 00:12:31,690 --> 00:12:33,755 Ma non è super bello qui. 274 00:12:33,755 --> 00:12:36,130 E stiamo andando a che fare con che quando si parla di CSS. 275 00:12:36,130 --> 00:12:38,930 Rivisiteremo questa idea di quello che facciamo per fare un table-- 276 00:12:38,930 --> 00:12:41,260 forse formattarlo un po 'meglio? 277 00:12:41,260 --> 00:12:45,070 Ma io ho ancora quattro righe, ciascuno dei quali ha quattro colonne, 278 00:12:45,070 --> 00:12:48,890 e davvero quello che ciò equivale a è un molto semplice quattro da quattro moltiplicazione 279 00:12:48,890 --> 00:12:49,870 tavola. 280 00:12:49,870 --> 00:12:51,690 >> Ancora pochi tag Ne parleremo. 281 00:12:51,690 --> 00:12:54,617 Parliamo la concetto di un modulo HTML. 282 00:12:54,617 --> 00:12:57,450 Così si può avere visto questo nel contesto di registrazione in una pagina web. 283 00:12:57,450 --> 00:12:59,100 Solitamente si digita il proprio nome utente. 284 00:12:59,100 --> 00:13:01,510 Si digita la password, e siete pronti ad andare. 285 00:13:01,510 --> 00:13:04,170 Sarebbe l'inizio di un modulo. 286 00:13:04,170 --> 00:13:05,420 >> Saltando Div A secondo. 287 00:13:05,420 --> 00:13:07,987 Abbiamo anche ingressi che tipo di adattarsi all'interno di forme. 288 00:13:07,987 --> 00:13:10,320 Questi sono gli elementi che si sta effettivamente scrivendo in, 289 00:13:10,320 --> 00:13:12,580 oi pulsanti di opzione siete ticchettio, o l'assegno 290 00:13:12,580 --> 00:13:14,310 le caselle che si sta spuntando. 291 00:13:14,310 --> 00:13:15,770 Quindi questi vanno all'interno delle forme. 292 00:13:15,770 --> 00:13:18,500 E comprendono fondamentalmente ogni riga del modulo 293 00:13:18,500 --> 00:13:19,887 se il modulo è formattato bene. 294 00:13:19,887 --> 00:13:22,220 Poi c'è il concetto di un div, che non fa davvero 295 00:13:22,220 --> 00:13:25,060 adattarsi in una determinata categoria di tag come quelli che ho 296 00:13:25,060 --> 00:13:26,170 sta facendo in precedenza. 297 00:13:26,170 --> 00:13:29,790 E 'appena sorta di delimita il inizio di qualche division-- arbitrario 298 00:13:29,790 --> 00:13:31,670 div-- della pagina. 299 00:13:31,670 --> 00:13:33,210 Non c'è pausa visiva. 300 00:13:33,210 --> 00:13:34,800 Non c'è nessuna linea. 301 00:13:34,800 --> 00:13:37,180 Non è partì come un pezzo automaticamente separata. 302 00:13:37,180 --> 00:13:39,430 Avresti per lo stile che in questo modo per farlo. 303 00:13:39,430 --> 00:13:42,110 >> E 'appena sorta di dice Voglio un pezzo di spazio sulla mia pagina web, 304 00:13:42,110 --> 00:13:45,190 e sto solo andando a chiamare è questa divisione della mia pagina. 305 00:13:45,190 --> 00:13:47,619 Possiamo mettere roba dentro di div, e infatti, 306 00:13:47,619 --> 00:13:49,410 quando ci dirigiamo verso IDE in un secondo, faremo 307 00:13:49,410 --> 00:13:53,760 Vedo che sto mettendo la mia formarsi all'interno di un div. 308 00:13:53,760 --> 00:13:57,050 >> Così ho qui nel mio IDE un file chiamato div forma puntino HTML. 309 00:13:57,050 --> 00:13:59,260 Apriamo l'alto. 310 00:13:59,260 --> 00:14:01,460 Si noti che, come ho detto, div è una specie di arbitrario. 311 00:14:01,460 --> 00:14:01,640 Destra? 312 00:14:01,640 --> 00:14:02,973 In realtà non significa nulla. 313 00:14:02,973 --> 00:14:05,140 Così ho un arbitrario prima divisione della mia pagina. 314 00:14:05,140 --> 00:14:07,848 E poi invece di un altro div in seguito, a partire sulla linea otto, 315 00:14:07,848 --> 00:14:08,730 Ho questo modulo. 316 00:14:08,730 --> 00:14:13,594 E all'interno della forma ho un numero di ingressi, i campi del modulo. 317 00:14:13,594 --> 00:14:16,510 Così ho un campo il cui nome è A-- che in realtà non significa nulla 318 00:14:16,510 --> 00:14:19,350 now-- destra che a quanto pare prende testo, un altro che 319 00:14:19,350 --> 00:14:22,630 prende una password, un altro che è una radio pulsante, un altro che è una casella di controllo, 320 00:14:22,630 --> 00:14:24,797 e un altro che è un pulsante Invia. 321 00:14:24,797 --> 00:14:26,630 Ebbene, che cosa fa questo tutto davvero assomigliare? 322 00:14:26,630 --> 00:14:27,629 Bene, diamo un'occhiata. 323 00:14:27,629 --> 00:14:31,010 Apriremo in su nella nostra finestra di anteprima. 324 00:14:31,010 --> 00:14:33,557 Si noti che questo arbitrario prima division-- c'è 325 00:14:33,557 --> 00:14:34,640 nessuna separazione visiva qui. 326 00:14:34,640 --> 00:14:37,150 Non ha davvero fare niente, giusto? 327 00:14:37,150 --> 00:14:38,220 >> E poi ho la mia forma. 328 00:14:38,220 --> 00:14:39,890 E non ho fatto alcuna formattazione speciale. 329 00:14:39,890 --> 00:14:42,680 Quindi la forma è solo uno grande fila di informazioni. 330 00:14:42,680 --> 00:14:46,424 Se avessi formattato la mia forma in modo diverso, Potrei avere riga per riga per riga. 331 00:14:46,424 --> 00:14:47,590 Ma non ho fatto alcun styling. 332 00:14:47,590 --> 00:14:49,256 Anche in questo caso, non stiamo parlando di CSS qui. 333 00:14:49,256 --> 00:14:51,030 Stiamo solo parlando di HTML. 334 00:14:51,030 --> 00:14:53,980 >> Beh, nella mia forma di testo posso type-- ricordare che le forme di tipo text 335 00:14:53,980 --> 00:14:55,480 così posso mettere il mio nome. 336 00:14:55,480 --> 00:14:57,330 E nel mio password che ho può digitare la password. 337 00:14:57,330 --> 00:14:59,740 E perché quel campo è di tipo di password, 338 00:14:59,740 --> 00:15:01,470 non si sa che cosa la mia password è. 339 00:15:01,470 --> 00:15:02,800 E 'tutti i punti. 340 00:15:02,800 --> 00:15:09,140 >> Posso anche scegliere di spuntare un pulsante di scelta o spuntare una casella di controllo. 341 00:15:09,140 --> 00:15:10,420 O potrei inviare il mio modulo. 342 00:15:10,420 --> 00:15:11,810 E io non ho fatto niente, così quando presento la mia forma, 343 00:15:11,810 --> 00:15:13,090 pagina appena aggiornata. 344 00:15:13,090 --> 00:15:16,970 Ma potrei forse configurare il mio Pulsante Invia per fare qualcosa di diverso. 345 00:15:16,970 --> 00:15:20,410 E vedremo cosa possiamo fare con che in un futuro video su PHP. 346 00:15:20,410 --> 00:15:22,520 Ma questo costruisce un molto forma semplice che noi 347 00:15:22,520 --> 00:15:27,360 possono utilizzare per avere gli utenti interagiscono e inviare informazioni al nostro sito web. 348 00:15:27,360 --> 00:15:29,620 >> Un ultimo commento prima di passare ad alcuni altri tag 349 00:15:29,620 --> 00:15:32,040 sono di dare un'occhiata a questo tag input ancora una volta. 350 00:15:32,040 --> 00:15:35,760 Si noti che ho evidenziato le estremità del tag in rosso. 351 00:15:35,760 --> 00:15:39,390 Ogni altro tag che abbiamo visto fino ad ora ha avuto un inizio e una fine, un'apertura 352 00:15:39,390 --> 00:15:41,030 tag e un tag di chiusura. 353 00:15:41,030 --> 00:15:42,520 >> Ma un'etichetta di ingresso non è così. 354 00:15:42,520 --> 00:15:46,860 Non c'è nessun testo che va tra tag input. 355 00:15:46,860 --> 00:15:49,160 Tutte le informazioni siamo l'intenzione di trasmettere 356 00:15:49,160 --> 00:15:52,640 è legata come parte del attributi di tale ingresso. 357 00:15:52,640 --> 00:15:54,690 Notate abbiamo nome dell'ingresso è uguale a x. 358 00:15:54,690 --> 00:15:55,580 Tipo uguale a. 359 00:15:55,580 --> 00:15:57,660 Questo è davvero tutto il informazioni che ci servono. 360 00:15:57,660 --> 00:15:59,470 >> Questo si chiama un tag di chiusura automatica. 361 00:15:59,470 --> 00:16:02,470 Non richiede un'apertura e un vicino perché tutte le informazioni 362 00:16:02,470 --> 00:16:04,974 è contenuto all'interno tag e gli attributi. 363 00:16:04,974 --> 00:16:06,390 Così a volte si vedrà anche questo. 364 00:16:06,390 --> 00:16:10,400 Quindi, solo essere consapevoli che se si dispone di un tag che è completamente autosufficiente, 365 00:16:10,400 --> 00:16:14,170 si apre e si chiude con la staffa angolo aperto sulla sinistra 366 00:16:14,170 --> 00:16:17,000 e l'angolo di barra staffa sulla destra. 367 00:16:17,000 --> 00:16:20,580 Staremo a vedere un altro uno di quelli adesso con tag di immagine pure. 368 00:16:20,580 --> 00:16:23,300 >> Prima di parlare di immagini, abbiamo bisogno di parlare di collegamenti ipertestuali. 369 00:16:23,300 --> 00:16:26,080 Se vogliamo che la nostra pagina web per essere interattivo e ci muoversi, 370 00:16:26,080 --> 00:16:28,121 sarebbe bello essere in grado di fare clic su uno di quelli 371 00:16:28,121 --> 00:16:30,190 ciò che è in genere stato un link. 372 00:16:30,190 --> 00:16:34,440 Questo è in realtà il modo in cui costruiamo un collegamento ipertestuale nella nostra pagina web. 373 00:16:34,440 --> 00:16:36,540 E abbastanza interessante c'è un altro tag HTML 374 00:16:36,540 --> 00:16:39,000 chiamato link, che non è un collegamento ipertestuale. 375 00:16:39,000 --> 00:16:44,130 Una qui sta per l'ancora, e è così che indichiamo un collegamento ipertestuale. 376 00:16:44,130 --> 00:16:49,150 >> A href uguale x mezzi vanno a pagina web X. E tutto 377 00:16:49,150 --> 00:16:51,580 tra l'aperto Un tag e la stretta Un tag 378 00:16:51,580 --> 00:16:56,010 è quello che sta per essere sottolineato che testo blu che assomiglia a un collegamento 379 00:16:56,010 --> 00:16:57,590 che siamo a conoscenza. 380 00:16:57,590 --> 00:17:01,660 Qui di seguito che abbiamo un tag di immagine, che è un self tag di chiusura per la visualizzazione 381 00:17:01,660 --> 00:17:05,599 un'immagine situata a X. E si potrebbe essere in grado di cambiare 382 00:17:05,599 --> 00:17:08,280 quell'immagine specificando larghezza e altezza 383 00:17:08,280 --> 00:17:11,640 e altri attributi in che dot dot dot lì. 384 00:17:11,640 --> 00:17:14,260 >> In fondo molto qui abbiamo una molto interessante 385 00:17:14,260 --> 00:17:16,170 cercando tag che non lo fa avere un tag di chiusura. 386 00:17:16,170 --> 00:17:19,410 E 'punto esclamativo DOCTYPE HTML. 387 00:17:19,410 --> 00:17:23,300 Così HTML è stato intorno dal momento che la primi anni 1990 per la costruzione di pagine web, 388 00:17:23,300 --> 00:17:25,859 ed è andato subita diverse revisioni da allora. 389 00:17:25,859 --> 00:17:28,550 Più recentemente nel 2014 ha subito una revisione 390 00:17:28,550 --> 00:17:33,440 chiamato HTML5 che è ora l'attuale sorta di standard de facto HTML. 391 00:17:33,440 --> 00:17:36,730 >> Per indicare che il nostro web le pagine sono scritte utilizzando HTML5, 392 00:17:36,730 --> 00:17:38,160 questo è il modo in cui cominciamo. 393 00:17:38,160 --> 00:17:40,380 Può essere omesso ma cosa che in fondo 394 00:17:40,380 --> 00:17:45,930 mezzi è non è possibile utilizzare uno qualsiasi dei tag che sono i tag HTML5, questi nuovi tag. 395 00:17:45,930 --> 00:17:48,591 Così abbiamo sempre iniziamo se stiamo usando HTML5. 396 00:17:48,591 --> 00:17:51,340 E tutti i tag di cui abbiamo parlato in precedenza non sono i tag HTML5. 397 00:17:51,340 --> 00:17:55,470 Ma questo indicherebbe che Tag HTML5 saranno presenti. 398 00:17:55,470 --> 00:17:58,400 E così abbiamo esclamazione HTML doctype, che 399 00:17:58,400 --> 00:18:01,280 è proprio all'inizio del nostro File HTML, e poi, dopo che il punto 400 00:18:01,280 --> 00:18:04,930 in realtà abbiamo aperto il nostro HTML tag e procedere da lì. 401 00:18:04,930 --> 00:18:10,050 >> L'ultimo è un tag di commento, che sembra un po 'diverso, anche. 402 00:18:10,050 --> 00:18:12,810 Si inizia con l'angolo Staffa esclamazione dash 403 00:18:12,810 --> 00:18:15,220 dash ma alcuna parentesi di chiusura. 404 00:18:15,220 --> 00:18:20,150 Tra questi due elementi ci è dove scrivere i tuoi commenti. 405 00:18:20,150 --> 00:18:28,420 E diamo un'occhiata a immagini e commenti e link in CS50 IDE. 406 00:18:28,420 --> 00:18:32,850 >> Così ho qui un file chiamato link immagine dot HTML che ho intenzione di aprire. 407 00:18:32,850 --> 00:18:36,420 E notate ho un paio di commenti qui nei miei commenti HTML. 408 00:18:36,420 --> 00:18:38,990 Quindi, proprio come in C e altre linguaggi di programmazione, 409 00:18:38,990 --> 00:18:43,169 HTML solo fatto di essere un linguaggio di markup non hanno la possibilità di avere commenti. 410 00:18:43,169 --> 00:18:45,710 E così mi sembra di andare a inserire una foto di Rick Astley 411 00:18:45,710 --> 00:18:49,060 da qualche parte tra questo div tag, questa divisione arbitraria. 412 00:18:49,060 --> 00:18:51,497 A quanto pare questo file è situato a Rick puntino JPEG, che 413 00:18:51,497 --> 00:18:53,580 se ci dirigiamo di nuovo verso il mio albero di file per un secondo, 414 00:18:53,580 --> 00:18:55,490 è un file che esiste in la directory corrente. 415 00:18:55,490 --> 00:18:56,031 Ecco, questo è OK. 416 00:18:56,031 --> 00:18:57,710 Posso farvi riferimento. 417 00:18:57,710 --> 00:18:59,680 >> Allora posso avere collegamenti interni. 418 00:18:59,680 --> 00:19:05,080 Così notare sulla linea 11 qui il mio href è ciao puntino HTML. 419 00:19:05,080 --> 00:19:09,050 In modo che si riferisce solo a ciao puntino HTML che esiste nella directory corrente. 420 00:19:09,050 --> 00:19:12,980 E posso anche avere esterna link da solo specificando HTTPS 421 00:19:12,980 --> 00:19:16,180 per indicare che non sto parlando su un file nella mia directory corrente. 422 00:19:16,180 --> 00:19:19,730 Sto parlando di un file che esiste da qualche parte su internet, che ho 423 00:19:19,730 --> 00:19:23,370 per richiedere utilizzando il protocollo HTTP. 424 00:19:23,370 --> 00:19:25,990 >> Quindi, diamo un'occhiata a ciò che questa pagina potrebbe essere simile 425 00:19:25,990 --> 00:19:29,500 e preparatevi per una foto di Rick Astley di presentarsi sul vostro schermo. 426 00:19:29,500 --> 00:19:31,490 Così io in anteprima questo. 427 00:19:31,490 --> 00:19:33,800 C'è Rick Astley al molto alto in questo arbitrario 428 00:19:33,800 --> 00:19:35,008 divisione ho messo in cima. 429 00:19:35,008 --> 00:19:36,960 E poi giù in basso ho avere i miei link, giusto? 430 00:19:36,960 --> 00:19:39,330 >> Ho un link per ciao puntino HTML. 431 00:19:39,330 --> 00:19:42,860 E se clicco che, ottengo spostato a questa pagina 432 00:19:42,860 --> 00:19:47,050 che siamo molto familiare con da Fin dall'inizio del nostro programma. 433 00:19:47,050 --> 00:19:50,880 Se ho pop che la pagina aperta di nuovo, se io pop link immagine aprire ancora una volta, 434 00:19:50,880 --> 00:19:54,420 Posso anche andare all'esterno al sito di CS50. 435 00:19:54,420 --> 00:19:56,740 E lì abbiamo see-- io sarò diminuire un po 'qui-- 436 00:19:56,740 --> 00:20:00,260 staremo a vedere il sito web di CS50 sorta di incastonato nel bel mezzo della nostra pagina. 437 00:20:00,260 --> 00:20:04,670 Così mi è stato in grado di fare un interno collegare così come un collegamento esterno. 438 00:20:04,670 --> 00:20:07,200 >> L'ultima regola con HTML che stiamo andando a parlare qui 439 00:20:07,200 --> 00:20:09,510 è che il codice HTML deve essere ben formata. 440 00:20:09,510 --> 00:20:13,020 In C abbiamo parlato molto le varie sintassi delle cose. 441 00:20:13,020 --> 00:20:17,650 In HTML sintassi davvero ruota intorno tags. 442 00:20:17,650 --> 00:20:19,660 Ogni tag si apre deve essere chiuso. 443 00:20:19,660 --> 00:20:22,630 E infatti, ogni tag si apre dovrebbe essere chiuso in ordine inverso. 444 00:20:22,630 --> 00:20:25,790 >> Quindi, se si apre un tag grassetto, italico un tag, e quindi un tag sottolineatura 445 00:20:25,790 --> 00:20:28,120 fare tutti e tre per un particolare insieme di testi, 446 00:20:28,120 --> 00:20:30,070 li si dovrebbe chiudere in ordine inverso. 447 00:20:30,070 --> 00:20:32,270 Quindi, se si apre in grassetto, corsivo, sottolineato, è 448 00:20:32,270 --> 00:20:35,240 vuole chiudere sottolineato, corsivo, grassetto. 449 00:20:35,240 --> 00:20:39,990 Questo tipo di incapsulamento è ciò che mantiene HTML piacevole e organizzato. 450 00:20:39,990 --> 00:20:44,370 >> A differenza di C, però, gli errori di sintassi non sarà effettivamente paralizzare il codice HTML forse. 451 00:20:44,370 --> 00:20:48,730 Il codice HTML può essere non bene formata ma sarebbe ancora lavorare. 452 00:20:48,730 --> 00:20:50,589 E così questi errori può ordinare di diapositiva. 453 00:20:50,589 --> 00:20:52,130 E 'a voi per essere veramente vigilanti. 454 00:20:52,130 --> 00:20:54,760 A volte falliranno ma a volte si può farla franca. 455 00:20:54,760 --> 00:20:56,509 >> Può essere un veramente compito difficile, però, 456 00:20:56,509 --> 00:21:00,660 per tenere traccia di quando avete aperto un tag, quando si è chiuso esso, 457 00:21:00,660 --> 00:21:04,110 tanto più che il codice HTML file diventano sempre più grandi. 458 00:21:04,110 --> 00:21:05,490 Avrai voglia di qualche aiuto. 459 00:21:05,490 --> 00:21:07,560 E ci sono in linea strumenti validatore che 460 00:21:07,560 --> 00:21:11,474 possono utilizzare per dare un'occhiata al vostro web pagina e vedere se è ben formato HTML. 461 00:21:11,474 --> 00:21:13,390 E si dovrebbe sicuramente dare un'occhiata a quelli 462 00:21:13,390 --> 00:21:16,620 e iniziare a usarle come voi iniziare a fare qualche lavoro con HTML, 463 00:21:16,620 --> 00:21:20,800 scrivere HTML, solo così si ottiene alcune buone abitudini circa l'organizzazione 464 00:21:20,800 --> 00:21:24,377 il codice HTML in un buon modo e buon stile e fare in modo 465 00:21:24,377 --> 00:21:27,210 che non si sta facendo tutto ciò che potrebbe creare un errore di sintassi che 466 00:21:27,210 --> 00:21:30,270 potrebbe causare un po 'di un problema lungo la strada. 467 00:21:30,270 --> 00:21:31,190 >> Sono Doug Lloyd. 468 00:21:31,190 --> 00:21:33,450 Questo è CS50. 469 00:21:33,450 --> 00:21:34,859