[Música tocando] ALLISON Buchholtz-AU: Tudo bem, todos. Bem-vindo de volta à seção. Portanto, a nossa agenda para hoje está acontecendo sobre muito mais coisas dev web. Eu não sei quantos de você já viu suas Série de Exercícios desde que foi lançado no início desta manhã. Eu faria como quantos pessoas leram a especificação, mas vendo como você teve tudo de, como, sete horas de olhar para ele e é uma segunda-feira e Você provavelmente já teve classe, Eu estou indo supor que a maioria de vocês não tem. Se você tiver, elogios extras. Você está basicamente ajudando implementar uma simples web servidor em C, que é uma marca nova pset, para que vocês conseguem ser as cobaias. Vai ser uma diversão, semana selvagem, mas eu acho que vai ser muito divertido e vai ser realmente um boa experiência na verdade. Então, para se preparar para que, na secção de hoje, nós estamos indo para ir chmod, TCP / IP, e em seguida, um pouco de HTML e CSS. No final, nós vamos realmente código uma página web simples juntos para ajudar vocês tipo de obter mais familiarizados com isso. E então se você ainda não pegou seus testes, eles estão na frente, mas eu tenho certeza que todo mundo aqui tem seu quiz. E também nessa nota, soluções não estão ainda, mas, logo que finish-- gosta, o últimos pessoas que tomam sua quizzes-- eles vão ser para cima. Se você tiver alguma dúvida Entretanto, fique à vontade para me enviar e-mail, pessoalmente. Vou responder com sua pessoa perguntas, como sempre faço. Então, nessa nota, chmod. Então, basicamente, tudo o que você precisa saber sobre o chmod é que ele é usado para alterar permissões de arquivos, certo? Portanto, é apenas alguns sistemas chamá-lo de alterar as permissões, como se diz aqui. E se você quiser ver quais permissões um arquivo tem, em vez de apenas fazer ls, você poderia fazer ls -l. l fica por muito tempo. Então você vai fazer longas listas de tudo, e vai lhe dar muito mais detalhado informações sobre cada um dos seus arquivos. E você vai ver que eu sou something-- vai pular para um second-- mas você vai ver algo semelhante a que a linha superior há para cada arquivo. E nós vamos passar o que isso significa. Então, basicamente, para mudar suas permissões de arquivo, você só quer usar chmod. Você pode pensar nisso como qualquer outra UNIX chamar como ls ou cd ou outros enfeites. É apenas uma espécie de outra chamada como. Então nós fazemos chmod e então nós vamos ter três dígitos normalmente. Existem algumas maneiras de fazer ele, um dos quais nós falaremos sobre. Mas, normalmente, você terá três dígitos que variam de 0 a 7 de cada vez. Então, uma coisa é que há três diferentes permissões que podemos dar a cada arquivo. E é legível, o que é representado por r, que vai fazer sentido em um pouco; w, que é gravável; e executável, que é x. Eu sei que o e um, executável, talvez não o mais sentido, mas nós representá-lo com x. E então o que acontece é cada um destes também tem a representação número. Então, nós temos 1, 2 e 4. E, basicamente, o que acontece é cada um destes três números aqui corresponde a um conjunto diferente de usuários aqueles que dizem respeito à permissões. Então você pode pensar que o primeiro número corresponde ao utilizador real ou o dono do arquivo, o segundo número corresponderá ao grupo, eo último refere-se para o mundo, OK? Então, o que acontece é lembrar os Números de r é 4, w é 2, x é 1, certo? Isto-- se você somar os para cima, que lhe dá que o primeiro número que poderíamos entrada em nosso chmod. Portanto, neste caso, o que que este número ser? Seria 4 mais 2 mais 1, que é a 7, certo? E, neste caso, estes não tem nada, de modo que este aqui seria traduzir para chmod 700, OK? E o que isso faz é que concede todos dessas permissões para o seu usuário. Então isso significa que o nosso usuário podem fazer o que quiserem. Podem ler este arquivo. Eles podem executar este ficheiro. Eles podem escrever para este arquivo. Mas o grupo e para o mundo, não permissões de qualquer natureza, OK? Assim, uma outra maneira de escrever que, nós podemos fazer chmod de três dígitos, cada um dos quais corresponde a qualquer que seja a soma ou que grupo específico é, subconjunto específico. Ou podemos fazer realmente outra coisa. Aguente. Podemos fazer alguma coisa com estes aqui. Quantos de vocês viu um exemplo onde como era chmod um plus x? Você viu que, na palestra, eu acho? Assim, uma suportes para todos. Significa dar a todos os usuários, que eu esqueci de colocar aqui. Mas uma vantagem x, se observar aqui, se fizermos para chmod-- o grupo que estamos falando mais as permissões queremos dar-lhes. Então, isso pode ser uma vantagem ou uma desvantagem. Além disso, acrescenta permissão. Minus tira permissão. Bastante intuitivo, eu acho. Assim, uma vantagem x significa chmod. Assim, alterar as permissões de todas as pessoas Se esta é uma autorização Adicionar A--. E x-- que significa que a permissão estamos concedendo todos. Ler, escrever ou executar? AUDIÊNCIA: Executar. ALLISON Buchholtz-AU: Executar. Então, nós estamos dando a todos os usuários permissão para executar esse arquivo, OK? Então, o que se queria fazer que, com a forma numérica? Então lembre-se com numérico, queremos três números. AUDIÊNCIA: 4. ALLISON Buchholtz-AU: O que foi isso? AUDIÊNCIA: 4. ALLISON Buchholtz-AU: Não 4. AUDIÊNCIA: 0, 0, 4. ALLISON Buchholtz-AU: Bem, nós queremos para dar a todos os usuários, certo? Então, nós vamos ter um número em cada slot. Isso vai ser o mesmo número em cada slot porque nós só queremos dar todos permissões executáveis. Então executável é 1, mas no caminho certo. Então, se nós fizemos chmod 111 que faria ser o equivalente de uma chmod mais x. Isso faz sentido para todos? Nós vamos passar por um par de exemplos. Assim, a grande takeaway aqui é um não é aqui, mas significa apenas dar a todos os usuários. u é se você quer apenas para dar ou tirar uma permissão específica do o usuário ou o proprietário. g é para o grupo, de modo que dígito do meio. E então os outros que você pode pensar como o mundo, que o último dígito. Então, com isso, vamos a um exemplo, porque eu sinto como exemplos sempre fazer essas coisas mais fáceis de entender. Então rwx-- passamos por isso- também poderia ser representar como 700. Esse é o exemplo que parecia em mais da imagem. Então chmod 444 em algum arquivo daria as permissões? Você estava muito perto. AUDIÊNCIA: legível para todos. ALLISON Buchholtz-AU: legível. Então legível para todos, certo? E então, o que é uma outra maneira de fazer isso? Se nós queremos fazer chmod com qualquer desvantagens de w do r ou, mais e, o que esse apelo parece? Seria chmod o quê? AUDIÊNCIA: um plus r. ALLISON Buchholtz-UA: um plus r no 5. OK, então isso é o mesmo que este, apenas duas traduções diferentes da mesma coisa. Então, com isso, temos estes. Então, eu quero que vocês tentar escrever este tipo de em seu caminho oposto. Assim, com chmod 555, o que seria a sensação? Seria um plus ou u para mais ou para outros enfeites? Para além de u x, dê-me os três números. E então me diga sobre o que permissões na verdade estamos concessão e para quem? Então, eu vou dar a vocês dois minutos para trabalhar nisso. Sinta-se livre para falar uns com os outros. Para aqueles de vocês que vieram em um pequeno tarde, há doces e camisas. Temos três camisas para a esquerda, e temos Kit Kats e Starbursts. Portanto, sinta-se livre para entrar grab alguns neste pequeno interlúdio. Além disso, a última é complicado. É duas chmods para o último. Na verdade, deixe-me fechar a porta enquanto vocês estão trabalhando nisso. Doce é sempre necessário em uma tarde de segunda-feira. OK, então chmod 555. O que é uma outra maneira poderíamos escrever isso? Qualquer idéias? Sim. AUDIÊNCIA: a rx plus. ALLISON Buchholtz-AU: r mais rx. Você quer explicar por que estaria rx? AUDIÊNCIA: Porque você tem 5, de modo que é 4 + 1, de modo que é lido mais executável, e é para todos. ALLISON Buchholtz-AU: Certo. Então, só para reiterar, 5 aqui sabemos como a soma de 4 e 1, porque cada número é o nosso trio soma das permissões para esse subconjunto, certo? Ou o utilizador, o grupo, ou do mundo. Portanto, neste caso, sabemos que 5 tem de ser formado por 4 e 1. E 4 e 1 corresponde à legível e executável. Nós estamos dando a todos, para que possamos fazer um chmod rx plus. E, obviamente, nós apenas fomos as perguntas lá, então agora este arquivo é executável e legível para todos. Assim que sobre o segundo? O que pode o número para que um ser? Qualquer idéias? Continue. AUDIÊNCIA: 100 [inaudível]. ALLISON Buchholtz-AU: 100. Exatamente. Então, você quer explicar por que 100? AUDIÊNCIA: Porque é para o usuário, por isso é na primeira posição. E então x é um executável. ALLISON Buchholtz-AU: Exatamente. Por isso, estamos concedendo executável permissões para apenas o usuário. Portanto, neste caso, seria de 100. E eu tenho todas as respostas se no próximo slide no caso você está escrevendo um monte de coisas para baixo. OK, então este próximo é realmente feito com dois chmods, você poderia fazê-lo. Então, alguém tem alguma idéia de como você pode obter chmod 640 reescrita no outro lado? Você pode alterar o usuário em primeiro lugar e, em seguida, você pode alterar o grupo é a minha dica. Então, se nós estávamos apenas mudando o usuário, que é esse primeiro aqui, o que poderia ser o nosso apelo? Assim o usuário é u, certo? Então chmod u mais o que? Mmhmm? AUDIÊNCIA: rw. ALLISON Buchholtz-AU: rw. Certo, para ler e escrever, porque leitura é 4, w é 2, aqueles em conjunto como soma 6. Então, nós temos chmod u mais RW, e nós temos o nosso primeiro 6 lá. Então para obter a 4, queremos agora para mudar nossas configurações do grupo. Então, nós vamos fazer chmod g mais o que? O que é um 4? AUDIÊNCIA: r. ALLISON Buchholtz-AU: r. Precisamente. Então, nós estamos dando ao proprietário ler e escrever permissões e nós estamos dando a leitura grupo permissões, o que temos tudo aqui. Mmhmm? AUDIÊNCIA: Se você pode escrever alguma coisa, isso implica que você pode executá-lo? ALLISON Buchholtz-AU: Você pode escrever para something-- Eu não acredito que ele implica que você pode executá-lo. Legal. Então, isso é tudo o que acabou de passar por. Por isso, nesta próxima, é casos apenas uma espécie de comuns que deseja manter-se em mente para definir o seu problema. Estes são tipicamente as permissões que nós gostamos de você usar. Assim, por 711, que dá nós, é claro, o usuário todas as permissões, que tende a fazer sentido. E então é executável pelo grupo no mundo, o que faz sentido se você tem algum diretório, você quer ser capaz de atravessar a ele. As pessoas precisam de acesso. Para qualquer arquivo não-PHP, você está indo usar 644, o que faria o que? O que isso implica, ou o que permissões é que isso dá? Assim, o proprietário pode o quê? AUDIÊNCIA: ler e escrever. ALLISON Buchholtz-AU: ler e escrever. E, em seguida, grupo e outros pode apenas ler, certo? E então chmod 600 para qualquer Arquivos PHP que você usa, seu proprietário, mais uma vez, pode ler e escrever para ela mas toda a gente é apenas uma espécie de bloqueada. Então, isso vai realmente ser mais útil quando você chegar ao seu problema definir na próxima semana, onde na verdade você está construindo um site. Então, se você já se deparou com quaisquer problemas estranhos onde ele não está carregando corretamente, talvez você precisa adicionar um executável permissão, ou talvez você precise de uma leitura ou permissão de gravação. Pequenas coisas que tendem a tropeçar pessoas up, mas isso é mais ou menos como o go-to quando você começa pset da próxima semana. E eu gostaria de dar-lhe mais dicas sobre pset desta semana, mas eu ainda tenho que olhar para ele uma vez que foi lançado esta manhã. Mas você me escreva, eu olhei para ele na hora que eu responder amanhã. Então, agora, está todo mundo bem com chmod? Quaisquer dúvidas remanescentes? Bastante simples. Apenas um tipo de manter o controle do que ler, escrever e executar números são é provavelmente a parte mais difícil. Assim, com o TCP / IP, todos esses protocolos, tipo como com suas estruturas de dados na semana passada, é muito mais importante tipo de obter intuição um nível mais elevado deles. Este não é CS143 para onde estamos indo para pedir-lhe para implementar uma rede, assim você estará bem se você não entende o âmago da questão de todos os protocolos. O que é importante entender é tipo como o que eles representam e por que eles são importantes. Assim, o TCP / IP, é claro, é a Transmission Control Protocol ou Internet Protocol, que é basicamente, apenas um conjunto de leis, basicamente ou normas que informam dados como ele deve ser tratado, como deve ser empacotado, transmitido, e recebidos. Por isso, basicamente, da mesma forma que diz aqui, aumenta as chances que os dados cheguem onde você quer que ele chegar. Tenho certeza que se vocês foram para palestra ou assisti-lo on-line, ele has-- eu não sei se ele fez isso este ano, mas eu sei que no ano passado, ele teve uma demonstração onde ele tinha uma foto de Rob e ele dividi-la em quatro e colocá-lo em envelopes e tentou obtê-lo através de Sanders. E você pode tipo de pensar nisso dessa forma. É apenas um conjunto de regras que contar dados como chegar em algum lugar e permite que você saiba se que está faltando dados, da mesma forma que se você estiver tomando várias páginas de notas e classificá-los com a página 104, página 204, e você voltar a estudar mais tarde e você está perdendo something-- você não pode encontrar a página que você sabe 304-- algo está errado, então você pode olhar através de suas notas novamente ou pedir a alguém para reenviar-lhe a palestra observa a partir desse dia. Da mesma forma que com os dados na internet. Se eu estou pedindo algo de algum servidor e ele precisa enviar -lo em vários pacotes, provavelmente vai número -lo de alguma maneira diferente, vamos me saber quantos eu deveria ter recebido, e diga-me, oh, este é um dos 10 ou este é um dos 10.000. Dessa forma, quando eu ir para remontar todas as peças juntas, Eu sei que se algo está faltando e eu posso pedir isso de novo. Será que isso faz sentido? Apenas um conjunto de regras. Na sua base, um conjunto de regras, OK? Então, nós também conversamos pouco sobre os portos. Isto é realmente apenas um padrão que permite que você saiba que tipo de dados está a ser transmitido nestes pacotes. Se formos com a nossa exemplo envelope, nós não sei que é uma imagem de Rob lá, a menos que escrevê-lo do lado de fora do nosso envelope. Assim, as portas são basicamente a mesma coisa. É apenas uma maneira de descobrir o que tipo de dados está sendo transmitido. Portanto, temos todo o Os mais comuns aqui. Então 21-- estes também são tipo de como as coisas boas de saber. É uma espécie de uma pergunta do quiz fácil. Seja como, o que é que a porta 80 faz? Ou, o que é que a porta 443 faz? Então as coisas boas de saber. Portanto, temos aqui, 21 é o arquivo protocolo de transferência, de modo que apenas as regras que governam a transferência de arquivos. 25, algo que todos nós utilizam muito mais, é e-mail. 53 é o nome de domínio sistema, que é basicamente apenas uma espécie de pesquisa para o Endereço IP de um nome de domínio. Então, eu tenho certeza de que era mencionado na palestra, se você ir para algo como google.com, ele tem um endereço de IP que está associado a ele. Não é, na verdade, google.com. E assim 53 é a porta que realmente leva cuidado com o tipo de traduzi-la em que o endereço IP para você. E, em seguida, 80 e 443 são muito comuns. Você quer ter a sua página web ou você tem a sua página da web segura, que um monte de páginas da web são transferência até agora. Então, esse é o tipo de alto nível Resumo do protocolo de transferência. Eu não vejo muito mais em profundidade. É o tipo de coisas legais se você estiver interessado. Há uma abundância de recursos. Wikipedia é realmente uma boa página. Então, eu estava olhando para ele apenas um pouco atrás, então eu recomendo olhando para ele se você estiver interessado ou tomar 143 em dois anos, porque Eu acho que é a cada dois anos. Assim, no final deste, estamos falando de páginas web e HTTP, que na verdade é o nosso próximo tópico para hoje antes de entrar em HTML e CSS e você pode realmente codificar uma página da web. Vai ser divertido. Nós vamos ter fotos de coelhos e vai ser ótimo. Então, HTTP, como você pode ver aqui, é uma das adoráveis ​​siglas Para esta semana, o que é HyperText Transfer Protocol. Então, novamente, é apenas outro conjunto de regras que governa hipertexto transferir, no presente caso. Então melhor maneira de aprender sobre isso é apenas uma espécie de para dividi-la em estas palavras individuais porque há um monte de palavras na tela lá. Então, vamos começar com hipertexto. Assim, "hiper", você pode pensar "Acima", como super-tipo coisa. Por isso é realmente apenas texto levado ao próximo nível, por isso é como super texto, como o próximo texto. Então, é basicamente apenas texto que nos dá mais informação do que texto normal faz, OK? Portanto, neste caso aqui, este é o hipertexto. Isto diz-nos que temos algum link que vamos, que é cs50.net, que agora é cs50.harvard.edu. Estes slides são um pouco velho. E vai para exibir como este, como um hiperlink, e, em seguida, um site muito legal. Portanto, é o texto, que é um pouco bocado de coisas muito legais lá. Então você pode ligar as coisas e você pode inserir imagens e você pode estilizar as coisas. E a coisa mais familiar que você caras provavelmente tem com hipertexto é HyperText Markup Language, HTML, que, naturalmente, é tudo da web que vemos ao nosso redor, concedido com um pouco de estilo CSS fique. Mas, se alguém foi muito grande com o MySpace, Tenho certeza de que todo o HTML usado todo o tempo para criar esses perfis perfeitos, certo? Eu sinto que isso pode ser um referência desatualizado agora, mas o que quer. Apenas um little-- vocês que não são muito mais jovem. Alguns de vocês são mais velhos do que eu. MySpace ainda era um coisa quando eu era jovem. Eu não sou tão velho. De qualquer forma, HTML apenas uma forma de hipertexto. Assim, o hipertexto é apenas texto com recursos adicionais. Assim, o protocolo de transferência é, provavelmente, a coisa mais duvidoso de explicar. Obviamente, transfer-- apenas transferir de dados. Assim, ou entre o cliente, como seu irmão web e um servidor. Então, basicamente, apenas o forma como a internet funciona. Assim, o pedido exacto de como esses trabalhos, estamos na verdade, vai olhar para um exemplo de solicitação e resposta. Mas como solicitamos informações a partir de um servidor e como o servidor responde a nós é o que este protocolo de transferência governa. Assim, o pedido ea resposta tem Para seguir estas conjunto específico de regras. É padronizada de modo que não importa onde você está usando a internet, trabalha sempre o mesmo, OK? Mais uma vez, o protocolo, conjunto de regras. É apenas uma normal, interacção da mesma maneira que o professor fala sobre Malan se alguém estende a mão, você sabe que é cortesia comum para alcançar seu fora e agitar sua mão. Isso é um protocolo, certo? Então eu dar algum pedido padronizado, que é que eu quero apertar sua mão, e você dá alguns padronizado resposta, o que é ou não obrigado ou você poderia tentar e apertar minha mão ou talvez você vai tentar e fist bump mim. E não temos um protocolo para isso. Ele quebra. Mas se todo mundo segue o mesmo protocolo, é claro, ele vai muito mais facilmente. As pessoas ficam a conhecer-se. Todo mundo está feliz. Assim, no mundo da web, todos seguem o mesmo rules-- ligeiramente melhor do que os padrões sociais. Mas com isso, vamos dar uma olhada a um pedido exemplo aqui. Então há esse pequeno chave aqui na parte inferior que diz que as cores diferentes, o que eles deveriam dizer. Assim branco é como o seu método de pedido e protocolo version-- o solicitem método, versão. E então esta é uma nome do campo eo valor desse campo, o que vamos ir para muito, muito em breve. Portanto, esta é uma solicitação de exemplo. Isto é como eu que estende para fora, querendo me apresentar. Isto é o que o cliente ou o que o seu navegador seria o envio para o servidor. Portanto, este é um pedido get, por isso é pedindo algo a partir do servidor. E é, é claro, de HTTP e é a versão 1.1. Então o resto deste aqui é o que chamamos o cabeçalho, e a sua informação extra que nos dá uma idéia melhor do o que na verdade estamos pedindo, ou informação que queremos dar o servidor que pode ser pertinente. Então User-Agent dá um pouco mais descrição on-- por exemplo, aqui, onda / 7.24.0 está realmente indo para contar o servidor que estiver usando o Google Chrome como o nosso browser. Então, se você já ouviu falar sobre as pessoas que falam sobre como fazer um aplicativo responsivo para vários navegadores, isso é algo que eles usaria, porque se você não sei o navegador o pedido está vindo, você não pode adaptar os dados para isso. Portanto, neste caso, o usuário é apenas dar este tipo de informações de identificação sobre o navegador o usuário está usando, OK? Então nós também temos de acolhimento, o que é onde estamos realmente querendo ir. Neste caso, queremos ir para apple.com, comprar alguns novos iPads legal ou algo assim, talvez bonito luzes em nossos dormitórios. E o valor nome no final é apenas um enchimento, apenas uma coisa geral para vocês verem. Na verdade, não corresponde a qualquer coisa aqui. Então você pode ter tanto ou tão pouco como você quer em cada caso. Na maioria das vezes, estes são opcionais. Depende apenas de que você precisa do navegador, de seu usuário, a fim de adequadamente dar o pedido. Ou isso depende do que o usuário realmente quer dar para o servidor. Assim você pode ter muitos, muitos destes nomes dos campos de cabeçalho ou você só tem um par. Tal como acontece com tantas coisas Eu já disse nesta seção, ele realmente depende do contexto de como você está usando isso. Então, isso faz sentido para todos? Este é apenas um exemplo de um pedido, cabeçalhos, outros enfeites. OK, então com isso, temos alguma resposta. Mais uma vez, temos o nosso código de status, protocolo versão e, em seguida, nome do campo e campo Valorizamos como sempre. Portanto, a nossa versão do protocolo e nosso código de status é de 200. OK, o que significa que, sim, tudo correu bem. Aqui está o que você quer. O tipo de servidor, o conteúdo type-- ele nos diz, OK, você é indo para obter algum HTML texto. Aqui é o comprimento e é aqui o que você deve fazer com a conexão. OK, então, novamente, dependendo sobre os dados que você está pedindo, dependendo do que o servidor quer voltar para você, você pode ter mais dessas campo nomes, você pode ter menos. Totalmente dependente do contexto. E, tanto quanto este estado código aqui, é claro, 200 não é a única você poderia ter, certo? Temos lotes de códigos de status. Alguém se lembra qualquer um dos outros que mencionamos na aula? Muitos deles começam com 4. AUDIÊNCIA: 404. ALLISON Buchholtz-AU: 404, o que é? AUDIÊNCIA: Arquivo não encontrado? ALLISON Buchholtz-AU: Arquivo não encontrado. Exatamente. Então, o que dizer de 403? AUDIÊNCIA: Proibido. ALLISON Buchholtz-AU: Proibido. Então, o que você acha isso significa que com chmods? AUDIÊNCIA: Isso significa que você não tem permissão para lê-lo. ALLISON Buchholtz-AU: Exatamente. De alguma forma, você não tem permissão para acessá-lo, certo? Então, 404, 403. Há um muito engraçado que nós sempre apresentar todos os anos que Eu deveria ter colocado até aqui, como 413, o que é que eu sou um bule de chá. Você pode google isso. É engraçado como, que é um código 413 e é que eu sou um bule de chá. Que eu não sei por que você faria precisar de que na internet, mas eu discordo. AUDIÊNCIA: Talvez você seja um bule de chá. ALLISON Buchholtz-AU: Talvez o servidor é um bule de chá. Quem sabe? Tudo bem, então estamos prestes a transição para a verdadeira codificação. Eu sinto que vocês vão sair daqui rapidamente. AUDIÊNCIA: Por que faz isso dizer "servidor: duas vezes? ALLISON Buchholtz-AU: Hm? Servidor duas vezes? Essa é uma boa pergunta. Não tenho certeza. Eu vou descobrir e Vou enviar e-mail a todos vocês. OK, quaisquer outras perguntas, além de que? Boa? Legal. HTML e CSS, e agora nós chegar a todas as partes divertidas. Assim como eu mencionei antes, HTML é provavelmente uma das coisas vocês estão mais familiarizados. Portanto, temos HyperText Markup Language. A melhor maneira de aprender isto-- eu não possui lâminas preparadas ou nada para vocês com HTML. É realmente sobre a aprendizagem da sintaxe. E se você estivesse no MySpace dia, você teria esse baixo. Então, realmente, a coisa mais importante é apenas para a prática e experiência. Um dos grandes recursos que eu faria recomendo usar é W3Schools. Então, basta W, 3, e em seguida, Escolas. Eles têm um monte de recursos em HTML, em CSS, e eles realmente têm um tipo de tela dividida de coisa onde eles vão te dar exemplo de código. Você pode mexer com ele, mudá-lo, e pressione Update, e ele vai mostrar o que realmente faz para a página web. Então eu recomendo usar isso. É muito legal. Você não terá falhas seg aqui quando as coisas dão errado. Se você conseguir ter uma falha de seg com HTML, deixe-me saber porque eu sou vai ser real, intrigado. Mas é muito legal porque você pode mudar as coisas, você pode vê-los atualizados ao vivo. E eu acho que você vai ter um grande compreensão mais intuitiva de HTML se você realmente apenas passar algum tempo experimentando com ele. É por isso que eu disse, prática e experiência. Google, a partir de agora para fora, provavelmente será um dos seus melhores recursos e amigos. Ou Bing-- estou a trabalhar na Microsoft, então talvez eu deveria dizer Bing. Mas praticamente qualquer coisa é apenas vai ser sintaxe, assim compreender o que as marcas são, understanding-- pelo menos com CSS-- como alterar certos atributos. Vai ser super útil. Assim, mesmo que nós não tem coisas preparadas, nós temos o tipo de algumas das melhores práticas que queremos que vocês para tentar cumprir por-- ou melhor, que deveria respeitar até novo aviso. Então feche todas as suas tags. Esperemos que todos has-- você sabe o que, se isso não faz sentido agora, Eu prometo que vai fazer sentido quando estamos a codificação até a página. Mas fechar todas as tags. Então, se você já tem algum cabeçalho que é suporte, H1, suporte, certifique-se de que sempre que você é feito com isso, você fecha o cabeçalho. Validar a sua página com W3 Validador. Se você não fechar as tags, você pode obter um comportamento inesperado. Ele vai dizer que sua página é inválido Se você executá-lo através deste validador. Assim, quando em doubt-- e especialmente nesta semana e na próxima semana pset-- da mesma forma que nós pedimos você usa o cheque de 50 e 50 estilo, Você pode pensar nisso como um de seus cheques, OK? Então, se ele não passar no validador W3. Isso é algo que vai aportar em você. Ou eu estou dizendo a você bem Agora, vou encaixá-lo em. Então, certifique-se que valida. Não é difícil. Você só colar no seu código e ele vai quer dizer bom trabalho ou você está perdendo algo da mesma maneira esse estilo 50 diz-lhe onde você está atrapalhando. E então, uma última coisa é que você quer separar sua marcação, que é tudo o que o HTML ou seu texto, e seu estilo. Então, vamos fazer um exemplo de que, logo após isso. Então, HTML e CSS deve ser separado. E nós vamos estar falando sobre MVC, que é Model View Controller, próxima semana. Vocês provavelmente deve aprender sobre isso na palestra amanhã se você tivesse já aprendeu hoje. E é apenas uma espécie de um paradigma que tendemos para usar ao criar web páginas para separar as coisas. Você pode pensar nisso da mesma forma que temos a tendência de funções separadas em C onde botar para encontrar coisas. É apenas uma maneira de tornar sua vida mais fácil. Ele separa a atributos ou código que você estaria usando uma e outra vez, mas desta forma, ele tipo de mantém-lo agradável e limpo. E se você quer mudar uma coisa, você alterá-lo uma vez e ele mudou toda a parte. Por isso é mais para o seu facilidade e flexibilidade. Assim, com CSS, é muito semelhante para HTML, mas em vez de tags que eu mencionei há pouco, nós usar o que é chamado de seletores. E eles basicamente só tipo de associar um determinado tag em HTML com atributos diferentes. E quando eu digo atributos, eu quero dizer coisas como cor da fonte, estilo da fonte, a cor do fundo, a cor do seu texto. Esses tipos de coisas. Como se ele está centrado, se é para a direita, se é inverted-- tudo dessas coisas legais. Quaisquer coisas estilísticas que você faz para o seu texto, isso é o que eu quero dizer com atributos. E então, duas coisas principais a saber é que selectors-- dois dos factors-- principal são ID, que é único. Você só pode usar isso para uma coisa. Caso contrário, ele vai gritar com você. E quando nós defini-lo em um arquivo CSS, que vai ser de hash ID e, em seguida, quais os atributos que queremos. Eu prometo que vamos passar por um exemplo. Ela vai fazer muito mais sentido. Classe pode se referir a vários blocos. Assim, você pode ter o seu primeiro e terceiro parágrafo têm o mesmo tipo de atributos se você associá-los com a mesma classe. E quando nós defini-los em CSS, fazemos uma classe ponto, com a classe sendo o que quer você quer que ele seja nomeado. Então, eu sei que isso é certo agora muito abstrato. É por isso que nós estamos indo para o código. Eu sei que vocês amam que, e todos vocês são vai me ajudar, porque esta é a sua página web. Esta é a página web da nossa secção, rapazes. Então, há alguma dúvida antes de eu desligar o PowerPoint, ou qualquer coisa Você quer que eu rolar para trás para antes de começar a codificação? AUDIÊNCIA: Quando você diz que jogo etiquetas, você quer dizer seletores ou tags? ALLISON Buchholtz-AU: Você pode considerá-los como a mesma coisa. É apenas palavras diferentes. Quero dizer, como seletores. Mas seletores também o mapa de tags. Assim, você pode pensar neles como eficazmente a mesma coisa. Eu prometo que vai fazer mais sentido quando código. Qualquer coisa, desde o PowerPoint ou dúvidas agora antes de realmente criar página de nossa seção? Todos prontos? Legal. Então, eu tenho um iniciado. Deixe-me aumentar a fonte para vocês. OK, então agora, só temos uma esqueleto página web aqui mesmo. Nós temos um pouco de HTML. Temos alguns cabeçalho, que nós veja aqui como exemplo de página web. Alguns título, alguma fonte. Estas são as tags, OK? Então, quando eu quero dizer fechar suas tags, vemos aqui esta cabeça suporte é a sua abertura tag, e este suporte / Cabeça é fechá-lo, OK? Então você pode pensar nisso como seu aparelho em suas condições se ou o seu para loops. Se você tiver um no início, você quer um no final. É ainda irá funcionar a maior parte do tempo se você não tem uma tag fechada, mas a melhor prática é fechar os tags. Portanto, neste caso, vamos mudar isso. Nós vamos ter seção sete. "Seção página da web." Então, eu estou indo só para mudar isso. E se formos por aqui e nós gotta reload-- salvar e reload-- percebe-se que até aqui ele mudou, certo? Legal. Então, isso muda o título. Isso é tudo o que está em seu guia. Portanto, este é o tipo de olhando tipo de chato. Eu não sei quanto a vocês. Eu acho que nós queremos algo mais aqui. Então o que podemos fazer é o cabeçalho é apenas lá. Vamos fazer algum tipo de corpo. Portanto, temos um corpo aqui. Eu sempre faço aberto e Fecho os tags para começar, da mesma forma que eu faço chaves. Ah. Espere, o quê? AUDIÊNCIA: [inaudível]. ALLISON Buchholtz-AU: Ah. Vocês me pegou. Bom trabalho. Estrela do ouro. OK, então nós temos um corpo aqui. E agora vamos começar a adicionar algum texto. Então, você tem um par diferente opções para adicionar texto. Nós temos coisas como cabeçalhos. Temos apenas o texto normal. Então vamos começar com um cabeçalho. Na verdade, se vocês querem para puxar para cima HTML da escola W3, você pode tipo de olhar em volta e se há alguma coisa particularmente que deseja experimentar com esta página web, podemos fazer isso. Portanto, neste caso, vamos fazer alguma h1. Então h1 é como a maior cabeçalho. Ele vai te dar algo que é muito grande e em negrito. E, neste caso, o que queremos para o primeiro texto na nossa página web? Qualquer coisa. Vocês estão indo para criar esta. Eu só vou escrever. AUDIÊNCIA: Bem-vindo. ALLISON Buchholtz-AU: Bem-vindo. OK, então se nós salvá-lo e recarregar, temos um grande bem-vindos. Então, só assim você pode ver o diferenças, vamos fazer alguma coisa em H6. O que nós queremos aqui? Certo? OK, então apenas para que você possa veja a diferença. Sim, Sublime. Então, se você notar, h1, muito, muito grande. h6, como ousada, mas muito menor, e você tem todo o resto. Então, você poderia ter H2, H3, H4. E estes são apenas cabeçalhos, por isso, se você está tentando para criar uma página web que tem seções diferentes, talvez você queira usar cabeçalhos em algum lugar. Legal. Então, vamos adicionar um pouco mais coisas em nosso corpo. Vejo que seria tipo de legal se tivéssemos uma foto. Eu sinto que todo mundo poderia usar talvez uma imagem bonito do coelho sobre a direita agora, então vamos encontrar uma imagem do coelhinho da primeira. Eu não sei se vocês tem alguma preferências sobre as quais uma que queremos. Você tem alguma preferência? Este aqui? Down. Está bem. Aquele que é. Boas escolhas. OK, então vamos ver a nossa imagem. Olhe para isso. Olha que coisa adorável. Como você pode ser triste numa segunda-feira com este? Então, nós apenas estamos indo para copiar a URL da imagem. E o que nós queremos fazer é, vamos apenas dizer que temos algum p por parágrafo. Nós vamos dizer: "Olha olhar para o coelho bonito. d'awwww ". Eu amo meus coelhos. Eu tenho um coelho em casa. Eu sinto falta do meu coelho. Então, o que nós estamos indo para fazer-- Eu não sei se vocês querem ao google isto-- mas com HTML, como você pode incluir uma imagem? Literalmente, se você procurar no google "Incluem imagem HTML" Por que não me dizer caras o que esta marca deve ser? AUDIÊNCIA: img source-- ALLISON Buchholtz-AU: img source-- AUDIÊNCIA: --equals-- ALLISON Buchholtz-AU: --equals-- AUDIÊNCIA: --quote-- sim. ALLISON Buchholtz-AU: Perfeito. Adorável. Veja, a geração MySpace, certo? Audiência: Neopets. ALLISON Buchholtz-AU: Neopets. Oh, OK. Uau. Tem sido uma loucura. Está bem. Então certifique-se eu tenho esse direito. Legal. Portanto, este deveria estar aqui. E então, se recarregar, temos a nossa coelho na página Não é este adorável? Isto é tão bonito. Você escolheu um grande, grande foto. Eu estou curtindo. OK, então nós temos este coelho adorável agora. Fomos capazes de adicionar um imagem, apenas como aquele. Então, basicamente, se há alguma imagem que você deseja adicionar à sua página web, você pode adicioná-lo como este. Outra coisa seria se você tem a imagem armazenada na mesma pasta este arquivo, você pode apenas escrever o nome dessa imagem é em vez de ter um link da web. Ainda seria entre aspas. Seria apenas como se tivéssemos chamado isto-- Se esse quadro tinha sido salvo na pasta com este arquivo HTML que eu estou editando e foi chamado bunny.jpg. Também poderia fazer isso e ele iria aparecer. No entanto, eu não tenho isso guardado em o arquivo e eu quero manter o coelho, então vamos manter o link. AUDIÊNCIA: Qual é rabbit.org? ALLISON Buchholtz-AU: rabbit.org. É uma appropriate-- olha, você pode adotá-lo. Adoção. bunny.jpg. Eu quero adotar este coelho. Oh, Deus, ele é tão bonito. OK, então nós adicionamos cabeçalhos. Nós adicionamos uma imagem. Obviamente, nós adicionamos algum texto aqui, certo? Se quiser adicionar outro textos, nós iríamos assim. Portanto, este é outro parágrafo. E dizemos "este é outro parágrafo." Além disso, eu sou um verificador ortográfico horrível, para que eu possa escrever mal as coisas. Apenas FYI. Então nós temos um outro parágrafo aqui, certo? Então, talvez você quer fazer algo um pouco mais interessante do que apenas tem todo o seu texto, como alinhado à direita. Talvez você deseja centralizar o texto, OK? Então, se alguém quiser usar os computadores acessíveis na frente de você e me diga como você está vai centrar este texto, AUDIÊNCIA: p align. ALLISON Buchholtz-AU: Então p align é igual a "centro". Ele está matando-o, rapazes. Vocês precisam intensificar. E nós temos "Este é centrado." E agora temos algo centrado. Da mesma forma, se você quer alinhado à esquerda, você poderia fazer igual align esquerdo, igual align direita. Totalmente até você. Se eu fiz aqui, então este should-- agora ele está alinhado à direita. AUDIÊNCIA: Allison? Por fonte de imagem, por que não é lá perto da fonte img? ALLISON Buchholtz-AU: Desculpe. Este deve ser Há agora que você é bom. Agora estamos bem. AUDIÊNCIA: Você não tem para fechá-lo lá, ou não? ALLISON Buchholtz-AU: Bem, então img fonte, este é só-- com a imagem, ele é visto apenas como um elemento, ao passo que se você observar para o resto destes, temos alguns tag então informação que que se refere ao e, em seguida, uma marca de fechamento. Mas com a imagem, tudo de apenas uma espécie de auto-contido. Legal. Então, vocês sabem como criar um cabeçalho, você sabe como a entrada de texto, você sabe como colocar uma imagem agora, você pode alinhar as coisas. Outra coisa que você pode querer ser capaz de fazer é criar uma lista de CS-- estamos tipo de entrar em pset da próxima semana. O material que nós tipicamente ensinar esta semana vai muito bem com pset da próxima semana, por isso estamos tipo de mistura, sobreposição de coisas aqui. Mas vai ser útil para a próxima semana. Então, se nós quisemos criar alguns lista, como podemos fazer isso? Você não pode responder a este tempo. Alguém tem de. Não é difícil, gente, prometo. Google "desordenadas lista HTML." O que é que foi isso? AUDIÊNCIA: [inaudível]. ALLISON Buchholtz-AU: Certo. Então, nós queremos ordenada ou desordenada? Vamos fazer uma desordenada. Portanto, temos alguns ul, que significa lista não ordenada. E o que temos para cada elemento? Será que ela precisa de sua própria marca? Podemos apenas começar a escrever coisas? AUDIÊNCIA: li. ALLISON Buchholtz-AU: li. Então, o que está a nossa lista vai ser? O que nós queremos aqui? Nós apenas fazemos nomes. Basta fazer o Jacob. Alimentos Coelho: audiência. ALLISON Buchholtz-AU: alimentos Coelho. OK eu gosto disso. Alimentos Coelho. OK, então nós temos cenouras. Eu gosto deste tema coelho. Estou curtindo muito. AUDIÊNCIA: Na verdade, eu pensei que Jacob seria um legit. ALLISON Buchholtz-AU: Jacob? Jacob é comida de coelho. Se você viu Jacob foto do horário de expediente, você pode ter pensado que ele tem atacado por um coelho assassino. AUDIÊNCIA: Eu tenho um coelho agora. Eu tenho um coelho assassino agora. ALLISON Buchholtz-AU: Você está brincando comigo? AUDIÊNCIA: Eu vou trazê-lo próxima seção. Eu tenho isso. ALLISON Buchholtz-AU: Isso é ridículo. Enfim. AUDIÊNCIA: [inaudível] AUDIÊNCIA: Sim, minha proctor tem um coelho bem. ALLISON Buchholtz-AU: Eu quero um coelho. OK, quem traz um coelho real para a próxima seção, brownie pontos totais. AUDIÊNCIA: [inaudível] AUDIÊNCIA: Oh, não é real. É um coelho de pelúcia. ALLISON Buchholtz-AU: Oh sim, podemos fechar estes. Parece rad. AUDIÊNCIA: Será que isso realmente importa? ALLISON Buchholtz-AU: Não faz. Com a maioria dessas coisas, você não fechar a tag, 99% do tempo nada de ruim está acontecendo a acontecer, mas é bom estilo, também. Então Jacob. E temos alface. AUDIÊNCIA: Para links, que é realmente importante. ALLISON Buchholtz-AU: Hm? AUDIÊNCIA: Para hiperlinks. ALLISON Buchholtz-AU: Para hiperlinks. Sim, hyperlinks precisar. OK, então vamos ver aqui. E temos o próximo da nossa lista. E olhamos para isso. Temos tudo-- Jacob, ali mesmo. Comida de coelho. Lembra-me de Bunnicula. AUDIÊNCIA: [inaudível] ALLISON Buchholtz-AU: Eu estou trazendo de volta todas as referências da velha escola hoje, não é? Apenas a todas as referências velha escola. Deveria ter trazido como Iogurtes ou algo para lanches. AUDIÊNCIA: Ou Gushers. ALLISON Buchholtz-AU: Oh. Está bem. Vou ver se posso acompanhar baixo Gushers para a próxima semana. Acho que posso fazer isso. Eu acho que pode ter alguns no escritório. OK, então nós cobrimos muito diferente coisas que você pode fazer com o HTML, certo? E como você provavelmente pode ver, é nothing-- espero, não muito intim-- se for, eu não quero dizer menosprezar ninguém. Se você está tendo problemas, por favor, venha falar comigo. Mas a maior parte é apenas olhando para a sintaxe, certo? Se você quiser uma lista não ordenada, se você quiser algum tipo de lista, se você deseja alinhar algo ou formato de alguma coisa, é tudo sobre apenas tipo de olhar para cima o sintaxe para HTML, certo? E uma coisa que é muito legal, na verdade, é se você vai a-- vamos ver, o que é um bom site que nós gostamos? Alguém tem alguma sites favoritos que são OK para trazer on-line? Você sabe o que, vamos apenas fazer CS50. Isso é bom e seguro, certo? OK, então CS50 aqui. Oh, olhe, há uma seção no momento. Se você gosta do jeito que parece. AUDIÊNCIA: [inaudível]. ALLISON Buchholtz-AU: Nós não somos vai fazer seção de meta, rapazes. Isso não está acontecendo. Seria legal, mas nós não vamos fazê-lo. Então o que você poderia fazer se você gosta da maneira isso funciona é que você pode sempre certo clicar em qualquer página da web que você gosta e você pode fazer View Page Source. Ela irá mostrar todo o HTML. E este é realmente um muito bom maneira de estilizar a sua própria página web. Ir para uma página da Web que você realmente gosto e olhar para o HTML e descobrir como eles fizeram isso. E literalmente, contanto como você citar coisas, contanto que você não é apenas roubando de pessoas, é OK. Especialmente para CS50 [? financiar?], estamos meio que esperando que você obtenha inspiração de outro site. Então, sinta-se livre. Olhe através de sites que você acha que são realmente muito e descobrir como eles usam HTML e CSS para fazer essas coisas. Então, como você vê aqui, há, obviamente, como as ligações e que temos uma classe aqui. Nós temos um link aqui. Temos uma lista. Nós provavelmente tem algum fotos em algum lugar por aqui. Temos algum estilo legal aqui. Esta é a próxima coisa vamos fazer. Então estilo, sempre que você vê estes suportes de estilo, é basicamente CSS. Ben, você tem uma pergunta? AUDIÊNCIA: Qual é div? ALLISON Buchholtz-AU: div é apenas o que é A-- div? AUDIÊNCIA: Divisão. ALLISON Buchholtz-AU: Divisão. Sim, é como separar elementos diferentes. OK, então aqui está o que nós somos indo para ir para o próximo. Portanto, este pode não ser o melhor estilo, porque, se você observar temos HTML e estilo na mesma página, e nós realmente queremos separar aqueles, Ok? E, na verdade, deixe-me abrir meu caminho certo porque este é suposto ser o PDF, por isso temos style.css. Então o que podemos fazer aqui é estes são coisas legais como alguns de fade e nós poderíamos tentar fazer isso, mas eu sinto como eu faria confusão que em tempo real, eu encorajo vocês a vá tentar isso em seu próprio país, mas eu não vou fazer isso agora. Então, se vocês, lembrem-se, se você nunca bateu conjunto de problemas, Rusgas em algo de lado. Tem a ver com o fade e a transição e outros enfeites. AUDIÊNCIA: E isso é tudo o CSS e HTML? ALLISON Buchholtz-AU: Todos CSS e HTML. Sim. Assim, você pode fazer um monte de realmente coisas legais com CSS e HTML. Assim, com a nossa incrível página web coelho aqui, nós vamos fazer um pouco bit de estilo CSS com ele. Então, se você já tem um estilo folha, o que temos aqui, você pode apenas chamar style.css. Você pode chamar do que quiser. O que é importante é que nós vamos fazer referência a ela em nosso web.html aqui. Então, o que nós vamos fazer é nós-- para que eu não faça bagunça neste up-- vamos ligar estes dois ficheiros juntos. Assim, da mesma maneira-- eu vou para fazer uma analogia com C aqui. Da mesma forma que se dispõe alguns library-- e temos cs50.h-- nosso compilador liga-lo. Este é apenas um explícito ligação da nossa parte. Assim, da mesma maneira que nós fazemos hash de incluir algum arquivo, o que Estou prestes a escrever é apenas o HTML / CSS equivalente a isso. Estamos apenas dizendo, OK, esta página web vai usar este estilo, OK? Portanto, temos link rel igual a folha de estilo. E então nós temos tipo, css. E então href igual. Está bem. Então, tudo isso fez aqui é que você pode pense nisso como a mesma coisa como um hash incluir. Obviamente que parece um pouco mais complicada, mas em todos os casos, é efetivamente a mesma coisa. Portanto, esta é apenas uma ligação de um folha de estilo, é do tipo text / css, eo nome dele é style.css. O que é importante saber é que a página web que eu estou trabalhando direito agora- web.html e style.css-- estão na mesma pasta. Porque em pastas diferentes, você precisa dar a raiz real para ele ou o caminho para ele. Mas, neste caso, nós estamos mantendo-o super simples e que vai estar aqui. Então, se fizermos isso, tenho algumas as coisas já na fila aqui. Portanto, temos um corpo, o que está acontecendo ter a nossa cor de fundo, o que agora é azul claro. Nós podemos mudar isso se quisermos, mas se bem me lembro isso corretamente, ele deve apenas mudá-lo à luz azul. E agora temos um fundo azul claro. E nós tivemos aqui-- pode alguém se lembra qual é o ID de hash ou classe? AUDIÊNCIA: ID. ALLISON Buchholtz-AU: ID. Legal. Então, o que nós queremos fazer é que estas fontes ou which-- queremos "Olhe o coelho bonito "ser roxo? Eu acho que nós queremos que seja roxo. Estou muito triste com isso sendo roxo. Então, o que você faz é que você faz ID equals-- neste caso Eu disse, o que, muito cor aqui. Nós recarregar. De repente, ele é roxo. OK, então com ID, lembre-se ele precisa ser único, então eu nunca deve estar usando este ID em qualquer outro lugar. Mas, com classe, como temos aqui com uma fonte bonita, Eu deveria ser capaz de usar que em qualquer lugar que eu quero. Então vamos fazer este aqui. Assim, podemos dizer classe é igual a fonte bonita. E se olharmos agora, temos este tipo de letra muito legal aqui. Então, talvez eu quero fazer ambos. OK, eu realmente não sei se isso é indo para o trabalho, mas eu quero tentar. E é assim que você aprender CSS e HTML. Você é como, você sabe o que, eu quero tentar isso. Eu não tenho certeza se ele vai funcionar. Vamos ver se funciona. E olha que isso. Agora é de púrpura e é um tipo de letra bonita. OK, então você tem tudo isso coisas diferentes que você pode fazer. Você tem uma pergunta? AUDIÊNCIA: Yeah. Bem, assim como as cores você está usando são palavras. Existe uma maneira de fazer cores com a RGB hexadecimal? ALLISON Buchholtz-AU: Você também pode fazê-lo com hexadecimal, eu acredito. Sim. Mas é bem legal se você Não quero procurá-los. Você pode ser como, roxo ou azul. AUDIÊNCIA: Vamos esperar que eles sabe o que isso significa. ALLISON Buchholtz-AU: Certo. Então, vamos fazer essa leitura ou chartreuse. Por que você nunca escolher chartreuse? É uma cor interessante. OK, então, obviamente, podemos ver que pode mudar as coisas no entanto que queremos. Se você quisesse create-- digamos queríamos criar uma outra classe. O que vocês pode querer mudar? Se você puxar para cima W3Schools ' Documentação CSS, Deixo a palavra a vocês. Nós podemos tentar fazer algo legal com este no último par de minutos. Porque eu tenho o tipo de dado-lhe uma Crash Course em um monte de coisas legais que você pode fazer. Mas, no final, como eu disse, se você apenas experiência, você vai aprender muito. AUDIÊNCIA: Você quis procurar essa fonte? ALLISON Buchholtz-AU: Sim, Eu olhei para essa fonte. Assim como, literalmente, eu fui a-- o que eu fiz? Eu fiz lista de fontes CSS, e então eu fiz pilha fonte, e então eu era como, olha, aqui são todas as fontes legais que você pode fazer. E havia um presente, então Copiei-o para minha prancheta. E então eu era como, OK, legal, lá vamos nós. Tudo feito. AUDIÊNCIA: Então você tem que ter certeza CSS que sabe o que é fonte. ALLISON Buchholtz-AU: Sim. AUDIÊNCIA: O que diz no final? Cursive? ALLISON Buchholtz-AU: Cursive. Sim. AUDIÊNCIA: Imagem de fundo. ALLISON Buchholtz-AU: Imagem de fundo. Está bem. Então você quer me dizer como fazer isso. Deixo isso para você. Eu só estou escrevendo aqui agora. A roda está em suas mãos. AUDIÊNCIA: OK ALLISON Buchholtz-AU: OK. O que estou fazendo? AUDIÊNCIA: Doing-- Eu sei o que vem depois da chaveta. ALLISON Buchholtz-AU: OK. Então, provavelmente no corpo, eu assumiria, porque estamos fazendo a imagem de fundo. AUDIÊNCIA: Sim, vamos fazer isso. ALLISON Buchholtz-AU: OK. AUDIÊNCIA: OK, então fundo cólon, e então nós precisa de um endereço URL dessa imagem. Talvez pseudo-código que, por agora, talvez. ALLISON Buchholtz-AU: O que você gostaria que eu a-- AUDIÊNCIA: Eu estou pensando como um GIF. ALLISON Buchholtz-AU: A GIF? Isso vai ser interessante. OK, o que estou pesquisando aqui? AUDIÊNCIA: Não, essa é a sua escolha. ALLISON Buchholtz-AU: Por não nós-- se é um coelho, Eu sinto que nós deveríamos ter um gramado bom ou algo assim. AUDIÊNCIA: Prado. Um prado. ALLISON Buchholtz-AU: Um prado? Está bem. AUDIÊNCIA: Ou Rachel Maddow. ALLISON Buchholtz-AU: Este parece bonito. Oh, isso é minúscula, porém. Precisamos de uma imagem em tamanho bom. Vamos ver. Oh, olhe. Isso é um prado bonito. Você sabe o que, eu gosto de um presente. Vamos copiar este. AUDIÊNCIA: OK, então eu acho que é o URL, parênteses abertos. ALLISON Buchholtz-AU: OK, URL. AUDIÊNCIA: Então o endereço. ALLISON Buchholtz-AU: OK. É tudo o que precisamos? AUDIÊNCIA: Close parênteses ponto e vírgula, e, em seguida, o espaço de fundo hífen dois pontos de fixação fixo, e chaveta. ALLISON Buchholtz-AU: OK. Vamos ver se isso funciona. Vai ser muito legal se isso acontecer. Estou muito animado aqui. Não funcionou. Eu me pergunto por quê. AUDIÊNCIA: Talvez a URL tem que ser em citações. ALLISON Buchholtz-AU: Talvez. E é assim que aprendemos, rapazes. AUDIÊNCIA: Podemos ter fundo imagem de fundo e cor? AUDIÊNCIA: Não. Um substitui o outro. ALLISON Buchholtz-AU: Eu não sei. Vamos ver. Vamos dar uma olhada e ver. AUDIÊNCIA: Oh, talvez, sim. [Interpondo VOZES] ALLISON Buchholtz-AU: OK, este é obviously-- I [inaudível] aqui. Então OK. AUDIÊNCIA: attachment fundo. ALLISON Buchholtz-AU: Ah. AUDIÊNCIA: OK, eu não sei. ALLISON Buchholtz-AU: É olha como ele deve funcionar. Tem certeza de que é dois pontos após a URL? AUDIÊNCIA: Não, é ponto e vírgula. ALLISON Buchholtz-AU: É ponto e vírgula. AUDIÊNCIA: Eu disse cólon? ALLISON Buchholtz-AU: Você disse uma vírgula. AUDIÊNCIA: Oh, não. ALLISON Buchholtz-AU: Lá vai você. AUDIÊNCIA: Oh, espere, agora não podemos ler o texto. ALLISON Buchholtz-AU: Agora você não pode ler o texto, mas temos a imagem de fundo. Mmhmm? AUDIÊNCIA: O HTML apoiar conteúdo dinâmico? Tipo, você pode redimensionar a foto dependendo do tamanho da janela, ou isso é um CSS-- ALLISON Buchholtz-AU: Então CSS tem que fazer isso. Então, se vocês estão interessados em aprender CSS avançado, Eu sou co-ensinar uma seminário sobre CSS no 7º. E eu prometo que vai ser muito mais em profundidade e fazer muito mais legal coisas nesta seção. E o meu co-professor é como mestre total de dev web front-end. Então vai ser muito legal se você quiser para aprender sobre todas as coisas legais que CSS pode fazer. Mas o que temos aqui com seu apego fundo fixed-- por isso é algum size-- fixo mas você pode realmente dynamically-- se você já viu páginas da web, como A maioria das boas páginas web vai fazer, quando você ajustar o tamanho do seu navegador, ajusta o fundo ou quanto está mostrando ou reformata as coisas, certo? Então, isso é o que chamamos posicionamento relativo. E CSS pode realmente pegar o quão grande o seu largura do navegador é ou o quão alto é, e você pode posicionar as coisas de acordo com os tamanhos relativos contra tamanhos absolutos. E isso é, obviamente, mais avançado CSS, mas isso é algo que você pode fazer. Se você quer aprender mais, venha ao meu seminário. Então, isso é algo que você pode fazer. E CSS pode, na verdade, fazer-- CSS e JavaScript, que nós vamos chegar no próximo week-- pode permitir que você alterar dinamicamente páginas sem ter que recarregá-los o tempo todo. E você começa a fazer alguma coisas muito legal. Então, há uma outra coisa que vocês pode querer fazer ou qualquer coisa que você deseja explorar? Temos 10 minutos restantes. Nós também pode sair mais cedo, mas se você quer fazer mais algumas coisas na web, pudermos, mas eu não sou vai forçá-lo a. Mas também podemos apenas comer doces. AUDIÊNCIA: Realce o texto branco para que você possa lê-lo. ALLISON Buchholtz-AU: OK. Portanto, neste caso, nós queremos algum p. AUDIÊNCIA: Devemos fazê-lo no corpo para que ele se aplica a toda a página? ALLISON Buchholtz-AU: Sim, nós podemos, na verdade. Essa é uma boa idéia. Então, nós have-- você sabemos o que deve ser? Eu não sei se podemos fazer a cor do texto. Eu estava indo para tentar criar uma outra classe aqui. AUDIÊNCIA: Como você obtenha que tem as sugestões? ALLISON Buchholtz-AU: Então se vocês estão interessados, este é um outro texto editor chamado Sublime. Você deve ser capaz de instalá-lo em seu aparelho. Às vezes fica um pouco complicado. Se você quiser ajudar com isso, Estou super feliz em ajudá-lo com isso, porque gedit é grande e é incrível, porque você pode compilá-lo na parte inferior, mas eu realmente como Sublime porque é bonito e ele faz coisas como auto-completa. Então você definitivamente pode se sentir livre para deixe-me saber se você quer fazer isso. Se você apenas google "Sublime texto ", ele normalmente tem instruções sobre como instalar em vários sistemas operacionais. É muito legal, eu acho que, na minha opinião. Então, p. Eu acho que eu só posso fazer texto-- ou podemos apenas fazer a cor é "branco". Lá. Então o que eu fiz aqui é que eu não mudar todo o texto. Mas p aqui é apenas um tag que temos, certo? Esta marca de parágrafo. Então, eu só criou um elemento CSS que disse, OK, qualquer coisa com esta tag p, fazer a cor branca. Então, se você percebeu, ele fez este branco e esse branco. Ele não fez nossa lista branca porque ele não está associada a isso. Você poderia passar e você pôde dizer: AUDIÊNCIA: Faça cor de fundo. ALLISON Buchholtz-AU: Cor do fundo? AUDIÊNCIA: Fundo de tubulação em cor onde você coloca a tag p. ALLISON Buchholtz-AU: OK. Você quer que ele branco? AUDIÊNCIA: Mmhmm. ALLISON Buchholtz-AU: OK. Lá você vai. AUDIÊNCIA: Isso é estranho. ALLISON Buchholtz-AU: Muito legal, né? Então, se você acabou de mexer, você vai aprender muito. E isso pode ser muito legal. Eu acho que é definitivamente mais gratificante do que, por vezes, porque você não tem que esperar para o seu programa para compilar. Você pode apenas bater Atualizar e você é como, oh, olha, ele trabalhou, ou oh, eu sou provavelmente faltando alguma coisa. E isso é algo que é realmente legal sobre isso na próxima parte da classe, é que é definitivamente, eu pensar, mais fácil de verificar que você vá ao longo do caminho contra ter que escrever esses programas longos e desejando e rezando que funciona no final. Então, com isso, eu acho que Vocês todos parecem bons. Se você tiver quaisquer perguntas, como sempre, vir falar comigo, venha me avise. Eu estarei bem fora para os próximos 15 minutos se você quiser conversar sobre tudo e qualquer coisa. Então, eu espero que você guys-- boa sorte com este pset. O prazo é sexta-feira ao meio-dia porque foi lançado no final. Então eu provavelmente será visto um monte de vocês na quinta-feira, mas espero que não. Talvez você vai tê-lo feito até então. Eu ficaria super orgulhoso. Mas se não, eu vou te ver quinta-feira. Você também pode usar uma data final, que estende até sábado ao meio-dia. Mas eu don't-- hein? AUDIÊNCIA: Dia das Bruxas. ALLISON Buchholtz-AU: É o Dia das Bruxas, a, e b, Eu não acho que haverá ser o horário de expediente na sexta-feira. Então realmente tentar fazê-lo por Sexta-feira para que todos nós possamos comemorar Fim de semana Hallow. Tudo bem, eu vou ver vocês na próxima semana.