Daven FARNHAM: Oggi, ho intenzione di parlare un po 'di HTML, HyperText Markup Language. Vedete HTML ovunque in questi giorni. In realtà, se stai guardando questo il video in un browser, sei vedendo HTML in questo momento. HTML non è un linguaggio di programmazione, piuttosto, è un linguaggio di markup usato da browser web per rendere le pagine su internet. 

Così si potrebbe chiedere, esattamente come sta scrivendo una pagina web in HTML diverso di scrivere un programma in una programmazione linguaggio come C? Beh, C è un linguaggio con molto rigoroso regole sintattiche che deve essere compilato prima di poter correre. Se hai mai dimenticato di includere un punto e virgola al termine di una dichiarazione il codice C, sai di cosa sto parlando circa per quanto riguarda la sintassi rigorosa. 

I browser Web, però, sono un po 'più perdonare quando si tratta di HTML. Anche se il codice HTML non è sintatticamente corretta, la pagina potrebbe essere ancora visualizzata da un browser, ma potrebbe non guardare come si intende. Quindi è sempre meglio seguire le regole. Il modo migliore per ottenere una intuizione su come funzionano le cose è quello di passare attraverso un esempio. 

Quindi quello che abbiamo qui è un semplice progetto per una pagina web. Probabilmente avrete notato un sacco di cose tra parentesi angolari. Beh, quelli sono solo i tag. Tags fondamentalmente informano i browser web che, hey, cosa sta arrivando il vostro senso. Ricordate, però, ogni volta che si apre un tag, è necessario chiuderlo una volta che siete fatto usando. 

Così, per esempio, apro una sezione di codice con aperto corpo della staffa, vicino staffa. Ho poi aggiungere del testo, in questo caso, il mio prima pagina web poi quando sono andato a chiudere questa sezione, io uso quasi tag identiche tranne questa volta con un slash prima del corpo. In generale, questo è il formato che sei intenzione di utilizzare ogni volta che si apre e il tag di chiusura. Insieme, un tag di apertura e un tag finale comporre ciò che è chiamato un elemento. 

Se si guarda alla prima riga, ti vedi un punto esclamativo seguito da DOCTYPE html. Questo è in realtà solo dicendo tuo browser che il file è una pagina web scritto in HTML. Il tag HTML dice in sostanza, ecco che arriva un po 'di HTML. Poi abbiamo un tag testa con un tag title al suo interno. Il tag head si può pensare come comprendente il codice HTML che viene per la maggior parte della tua pagina web contenuto effettivo. 

In generale, si mette il titolo del tuo pagina web qui, anche se ci sono alcuni altri tag che possono apparire anche qui. Segue il corpo della pagina web, la carne reale e ossa del tuo sito web. Nel nostro esempio, abbiamo appena messo un semplice frase, My First Webpage, che, se corriamo il nostro sito, cercherà un po 'di qualcosa come questo. La pagina web non è troppo strano, ma non preoccupatevi. Ti abete rosso è presto. 

Così il sopra HTML, ti daremo un modello di base per una pagina web, niente di speciale, solo le ossa nude. Ma se io sto creando una pagina web, cosa succede se voglio aggiungere un foto, per esempio, io? Beh, posso farlo. Ci sono un paio di modi per aggiungere immagini al tuo sito. Se l'immagine si trova nella stessa cartella il file HTML, è possibile collegare al immagine tramite il percorso come questo. 

Si apre con un tag di immagine seguita da nell'attributo Alt in fonte dell'immagine. Il valore dell'attributo Alt è solo una testo alternativo nel caso in cui un utente non può vedere l'immagine. In alternativa, è anche possibile collegare a immagini tramite un URL completo, come questo. Ora, che il sito in realtà non esiste, ma se ci fosse una foto di me a questo indirizzo, potrei usare l'URL di origine di includere la sua immagine sul mio sito. In entrambi i casi, si finisce con una più sito più bello, qualcosa di simile. 

Beh, è ​​abbastanza freddo, ma io tipo di volere un testo anche qui. Così facciamo solo aggiungere qualcosa super semplice sopra la immagine, come l'intestazione. Tutto quello che ho fatto finora è usare l'intestazione tag H1, e una rottura tag line, br. Il tag di intestazione rende il carattere un po ' po 'più grande e più importante. Il tag di interruzione di riga, dall'altro mano, è genere di freddo. A differenza di molti altri tag, non è necessario un tag di apertura e di chiusura pausa, basta quello sopra indicato. Questo perché pausa ha alcun contenuto ed è quindi un elemento vuoto. 

Elementi vuoti come questo, è possibile aprire e chiudere simultaneamente semplicemente tra cui una barra al fine della dichiarazione iniziale. Così ora il mio sito sembra un po ' qualcosa di simile. Meglio, ma che tipo di prova come un vicolo cieco. Non c'è altro posto dove andare a parte da questa pagina principale. Bene, vediamo di fissare che, includendo un link. 

Quello che ho intenzione di fare è utilizzare un attributo indicato con A e fare l' immagine un link per, diciamo, CS50 TV. In questo modo, ogni volta che qualcuno clicca su di me, il browser sarà indirizzato a un'altra, probabilmente più utile, pagina web. Ho dovuto ridurre la dimensione del testo un po 'perché la nostra pagina web è sempre più avanzate. Ma si spera, è ancora chiaro. Il mio sito web sembra esattamente lo stesso unico Ora, ogni volta che clicco sulla foto, il mio browser si aprirà un altro scheda della pagina web CS50.tv. 

Infine, diciamo che ho intenzione di stile questo sito in seguito utilizzando i CSS. CSS è ciò che è noto come un foglio di stile CSS. E fornisce essenzialmente un efficiente modo per modificare e stile blocchi simili di codice. Voglio iniziare ad organizzare la mia HTML facilitare acconciare seguito. Qui, ho creato due diversi tipi di identificatori per aiutare ad organizzare il mio codice. Ho usato l'attributo ID all'interno di un divisione, o tag div, e ho usato un Classe attributo all'interno un altro tag div. 

Attributi id e class funzionare in modo simile. L'unica differenza è che si può avere solo un elemento, l'ID specifico, ma qualsiasi numero di elementi possono condividere una classe. Così, per esempio, posso utilizzare la classe immagine più volte, ma non posso creare un'altra divisione con la parte superiore ID. Anche se io non sono andato in CSS, un'altra lingua comunemente utilizzata accanto HTML, una volta che comincio styling il mio codice con i CSS, posso utilizzare questi attributi organizzative influenza l'estetica della mia pagina web. 

Tutto nel massimo campionato avrà stylings similari o qualsiasi altro gruppo di HTML gruppo I nella l'immagine di classe condividerà un aspetto simile. Questo è molto più facile che cercare di modificare e immagini in stile o blocchi di testo individualmente. 

Così siamo andati oltre le basi di come fare una pagina web con HTML. HTML ha un sacco di altre caratteristiche troppo che se abbinato con altre lingue come CSS e JavaScript, può davvero rendere le pagine spiccano. Il modo migliore per mettersi a proprio agio con HTML è solo a pasticciare con essa, vedere cosa funziona e cosa no. 

Il mio nome è Daven Farnham. Questo è CS50. 

Così, per esempio, posso usare l'immagine di classe - No, ci sono così tanti attributi. Il mio nome è Daven Farnham. Questo è CS 650. Voglio dire CSS. Questo è il CSS.