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

2
00:00:06,986 --> 00:00:10,450
>> Daven FARNHAM: Hoje, eu vou
falar um pouco sobre HTML,

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

4
00:00:12,330 --> 00:00:14,450
Você vê HTML em toda parte estes dias.

5
00:00:14,450 --> 00:00:17,190
Na verdade, se você está assistindo a esta
vídeo em um navegador, você está

6
00:00:17,190 --> 00:00:19,120
vendo HTML agora.

7
00:00:19,120 --> 00:00:22,760
HTML não é uma linguagem de programação,
em vez disso, é uma linguagem de marcação utilizada pelo

8
00:00:22,760 --> 00:00:25,460
navegadores para processar páginas
na internet.

9
00:00:25,460 --> 00:00:30,410
>> Então você pode perguntar, como exatamente está escrevendo
uma página web em HTML diferente

10
00:00:30,410 --> 00:00:33,574
de escrever um programa em uma programação
linguagem como C?

11
00:00:33,574 --> 00:00:38,010
Bem, C é uma língua com muito rigorosa
regras sintáticas que precisa ser

12
00:00:38,010 --> 00:00:39,880
compilado antes que ele possa ser executado.

13
00:00:39,880 --> 00:00:43,070
Se você já esqueceu de incluir um
ponto e vírgula no fim de uma instrução em

14
00:00:43,070 --> 00:00:46,660
seu código C, você sabe o que eu estou falando
sobre em relação à sintaxe estrita.

15
00:00:46,660 --> 00:00:50,360
>> Os navegadores da Web, porém, são um pouco mais
perdoando quando se trata de HTML.

16
00:00:50,360 --> 00:00:53,860
Mesmo que o seu HTML não é sintaticamente
correta, sua página pode ainda ser

17
00:00:53,860 --> 00:00:57,150
exibida por um navegador, mas talvez
Não olhe como você pretende.

18
00:00:57,150 --> 00:00:59,640
Por isso, é sempre melhor
seguir as regras.

19
00:00:59,640 --> 00:01:01,990
A melhor maneira de ter uma intuição
sobre como as coisas trabalho é

20
00:01:01,990 --> 00:01:03,300
passar por um exemplo.

21
00:01:03,300 --> 00:01:07,360
>> Então o que temos aqui é um básico
modelo para uma página web.

22
00:01:07,360 --> 00:01:10,690
Você deve ter notado um monte de coisas
entre colchetes angulares.

23
00:01:10,690 --> 00:01:12,900
Bem, essas são apenas as etiquetas.

24
00:01:12,900 --> 00:01:15,810
Marcações basicamente informar navegadores web
que, hey, algo

25
00:01:15,810 --> 00:01:17,150
está vindo em sua direção.

26
00:01:17,150 --> 00:01:20,770
Lembre-se, sempre que você abrir uma
tag, você precisa fechá-lo, uma vez que são

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

28
00:01:21,750 --> 00:01:24,690
>> Assim, por exemplo, eu abro uma seção
de código aberto com

29
00:01:24,690 --> 00:01:26,960
corpo do suporte, perto do suporte.

30
00:01:26,960 --> 00:01:31,280
Eu, então, adicionar algum texto, neste caso, o meu
primeira página web, em seguida, quando fui para a

31
00:01:31,280 --> 00:01:35,540
fechar esta seção, eu uso quase uma
tag idêntica só que desta vez com um

32
00:01:35,540 --> 00:01:37,660
de barra antes corpo.

33
00:01:37,660 --> 00:01:41,140
Em geral, este é o formato que você está
vai usar sempre que você está abrindo

34
00:01:41,140 --> 00:01:42,680
e fechando tags.

35
00:01:42,680 --> 00:01:47,900
Juntos, uma tag de abertura e uma tag final
compor o que é chamado um elemento.

36
00:01:47,900 --> 00:01:51,870
>> Se você olhar para a primeira linha, você vai
ver um ponto de exclamação seguido por

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

38
00:01:53,350 --> 00:01:56,280
Isto é realmente apenas dizendo seu navegador
que o arquivo é uma página da web

39
00:01:56,280 --> 00:01:58,280
escrito em HTML.

40
00:01:58,280 --> 00:02:01,970
A tag HTML diz essencialmente,
Aí vem um pouco de HTML.

41
00:02:01,970 --> 00:02:04,950
Então nós temos uma marca de cabeça com
um título de tag dentro dela.

42
00:02:04,950 --> 00:02:09,430
A marca de cabeça que você pode pensar como
compreendendo código HTML que vem para

43
00:02:09,430 --> 00:02:12,670
a maior parte da sua página da web do
conteúdo real.

44
00:02:12,670 --> 00:02:16,700
>> Em geral, você coloca o título do seu
página web aqui, embora existam alguns

45
00:02:16,700 --> 00:02:19,350
outras marcas que podem aparecer
aqui também.

46
00:02:19,350 --> 00:02:25,020
Em seguida, vem o corpo da sua página web, a
carne real e os ossos do seu site.

47
00:02:25,020 --> 00:02:28,910
No nosso exemplo, nós acabamos de colocar uma simples
sentença, minha primeira página Web,

48
00:02:28,910 --> 00:02:34,100
que, se corremos o nosso site, vai olhar
um pouco algo como isto.

49
00:02:34,100 --> 00:02:36,810
Nossa página web não é muito estranho,
mas não se preocupe.

50
00:02:36,810 --> 00:02:39,210
Vamos enfeitar-lo em breve.

51
00:02:39,210 --> 00:02:44,070
>> Então o código HTML acima, nós vamos dar-lhe um
modelo básico para uma página web,

52
00:02:44,070 --> 00:02:46,310
Nada extravagante, apenas o esqueleto.

53
00:02:46,310 --> 00:02:49,160
Mas se eu estou criando uma página web,
e se eu quiser adicionar um

54
00:02:49,160 --> 00:02:50,760
imagem de, digamos, eu mesmo?

55
00:02:50,760 --> 00:02:52,760
Bem, eu posso fazer isso.

56
00:02:52,760 --> 00:02:55,460
Há um par de maneiras de
adicionar imagens para o seu site.

57
00:02:55,460 --> 00:02:59,780
Se a imagem estiver na mesma pasta que
seu arquivo HTML, você pode ligar para o

58
00:02:59,780 --> 00:03:01,950
imagem via caminho assim.

59
00:03:01,950 --> 00:03:05,910
>> Você abre com uma tag de imagem seguido
por no atributo Alt no

60
00:03:05,910 --> 00:03:07,240
fonte da imagem.

61
00:03:07,240 --> 00:03:12,030
O valor do atributo Alt é apenas um
texto alternativo no caso de um usuário não pode

62
00:03:12,030 --> 00:03:13,580
ver a imagem.

63
00:03:13,580 --> 00:03:19,680
Alternativamente, você também pode ligar para o
imagens através de um URL completo, como este.

64
00:03:19,680 --> 00:03:24,180
Agora, que o site realmente não existe,
mas se houvesse uma imagem de

65
00:03:24,180 --> 00:03:27,760
me naquele endereço, eu poderia usar
o URL de origem para incluir

66
00:03:27,760 --> 00:03:29,930
sua imagem no meu site.

67
00:03:29,930 --> 00:03:35,590
De qualquer maneira, você acaba com um muito
site mais bonito, algo como isto.

68
00:03:35,590 --> 00:03:39,730
>> Bem, isso é muito legal, mas eu meio
de querer algum texto aqui também.

69
00:03:39,730 --> 00:03:43,020
Então vamos acrescentar algo
super simples acima do

70
00:03:43,020 --> 00:03:45,210
imagem, como o cabeçalho.

71
00:03:45,210 --> 00:03:50,830
Tudo o que eu fiz até agora é usar o cabeçalho
tag, H1, e uma quebra de linha tag, br.

72
00:03:50,830 --> 00:03:54,900
A tag de cabeçalho torna a fonte um pouco
pouco maior e mais proeminente.

73
00:03:54,900 --> 00:03:58,930
A tag de quebra de linha, por outro
lado, é legal.

74
00:03:58,930 --> 00:04:03,720
Diferente da maioria das outras tags, você não tem
uma tag de abertura e quebra de encerramento, apenas

75
00:04:03,720 --> 00:04:05,120
a mostrada acima.

76
00:04:05,120 --> 00:04:10,420
Isto porque pausa não tem conteúdo
e é, portanto, um elemento vazio.

77
00:04:10,420 --> 00:04:14,940
>> Os elementos vazios como este, você pode abrir
e perto ao mesmo tempo simplesmente por

78
00:04:14,940 --> 00:04:20,420
incluindo uma barra no
fim da declaração inicial.

79
00:04:20,420 --> 00:04:24,390
Então agora o meu site parece um pouco
algo como isto.

80
00:04:24,390 --> 00:04:27,410
Melhor, mas isso meio que se sente
como um beco sem saída.

81
00:04:27,410 --> 00:04:30,850
Não há outro lugar para ir além
desta página principal.

82
00:04:30,850 --> 00:04:33,075
Bem, vamos corrigir isso
incluindo um link.

83
00:04:33,075 --> 00:04:36,860
>> O que eu vou fazer aqui é usar um
atributo indicado por um e fazer o

84
00:04:36,860 --> 00:04:40,780
imagem um link para, digamos, CS50 TV.

85
00:04:40,780 --> 00:04:44,460
Dessa forma, sempre que alguém clica em mim,
seu navegador será direcionado para

86
00:04:44,460 --> 00:04:47,810
outro, provavelmente mais
útil, página web.

87
00:04:47,810 --> 00:04:51,040
Eu tive que diminuir o tamanho do
texto um pouco, porque a nossa página web é

88
00:04:51,040 --> 00:04:52,470
ficando cada vez mais avançada.

89
00:04:52,470 --> 00:04:54,590
Mas espero que, ainda é clara.

90
00:04:54,590 --> 00:04:59,460
Meu site parece exatamente o mesmo só
agora, sempre que eu clicar sobre a imagem,

91
00:04:59,460 --> 00:05:04,410
meu navegador vai abrir outro
guia para a página web CS50.tv.

92
00:05:04,410 --> 00:05:08,970
>> Por último, vamos dizer que eu estou indo para o estilo
este site mais tarde, usando CSS.

93
00:05:08,970 --> 00:05:11,730
CSS é o que é conhecido como um
folhas de estilo em cascata.

94
00:05:11,730 --> 00:05:15,230
E, basicamente, fornece um eficiente
maneira de editar e estilo

95
00:05:15,230 --> 00:05:16,910
blocos semelhantes de código.

96
00:05:16,910 --> 00:05:21,290
Eu quero começar a organizar meu HTML para
tornar mais fácil para o estilo mais tarde.

97
00:05:21,290 --> 00:05:26,900
Aqui, montei dois tipos diferentes de
identificadores para ajudar a organizar o meu código.

98
00:05:26,900 --> 00:05:31,170
Eu usei o atributo ID dentro de um
divisão, ou tag div, e eu usei um

99
00:05:31,170 --> 00:05:34,120
Classe de atributo dentro
outra tag div.

100
00:05:34,120 --> 00:05:37,190
>> Atributos id e class
funcionam de forma semelhante.

101
00:05:37,190 --> 00:05:41,210
A única diferença é que você só pode ter
um elemento, a identificação específica, mas

102
00:05:41,210 --> 00:05:43,600
qualquer número de elementos
pode compartilhar uma classe.

103
00:05:43,600 --> 00:05:47,690
Assim, por exemplo, eu posso usar a classe
imagem várias vezes, mas eu não posso

104
00:05:47,690 --> 00:05:50,533
criar outra divisão
com a parte superior de identificação.

105
00:05:50,533 --> 00:05:54,750
Embora eu não tenha ido para CSS,
outra língua de uso corrente

106
00:05:54,750 --> 00:05:59,700
ao lado de HTML, uma vez que eu começar styling
meu código com CSS, eu posso usá-los

107
00:05:59,700 --> 00:06:03,730
atributos organizacionais à influência
estética da minha página web.

108
00:06:03,730 --> 00:06:07,600
>> Tudo dentro da primeira divisão
terá stylings similares ou qualquer

109
00:06:07,600 --> 00:06:12,010
outro grupo de grupo de HTML que na
imagem de classe irão compartilhar um olhar similar.

110
00:06:12,010 --> 00:06:15,700
Isto é muito mais fácil do que tentar editar
e as imagens ou blocos de estilo

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

112
00:06:17,690 --> 00:06:21,480
>> Então fomos até o básico de como
para fazer uma página web com HTML.

113
00:06:21,480 --> 00:06:25,280
HTML tem um monte de outros recursos também
que, quando combinado com outros idiomas

114
00:06:25,280 --> 00:06:29,220
como CSS e JavaScript, pode realmente
tornar as páginas se destacam.

115
00:06:29,220 --> 00:06:32,960
A melhor maneira de se sentir confortável com
HTML é apenas para mexer com ele,

116
00:06:32,960 --> 00:06:35,120
ver o que funciona eo que não funciona.

117
00:06:35,120 --> 00:06:36,570
>> Meu nome é Daven Farnham.

118
00:06:36,570 --> 00:06:37,820
Este é CS50.

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

120
00:06:40,640 --> 00:06:45,690
>> Assim, por exemplo, eu posso usar
a imagem da classe -

121
00:06:45,690 --> 00:06:48,028
Não, há tantos atributos.

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

123
00:06:52,500 --> 00:06:53,950
Meu nome é Daven Farnham.

124
00:06:53,950 --> 00:06:58,560
Este é CS 650.

125
00:06:58,560 --> 00:06:59,810
Eu quero dizer CSS.

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

127
00:07:02,325 --> 00:07:03,575
Este é CSS.

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