Resumo da Estrutura HTML para Jogo da Velha

Estamos de volta, vamos falar aqui da estrutura de HTML para o jogo da velha que a gente vai usar. Então, deixa eu adicionar o texto aqui. Então, para o tabuleiro, a gente vai usar um adiv, tá? Com o ID tabuleiro, tá certo? Então, vai ter um container que vai conter todo o tabuleiro. Vamos usar um adiv. Tá? Deixa eu aumentar esse texto. Aí dentro do tabuleiro, vamos ter 1, 2, 3, 4, 5, 6, 7, 8, 9, tá? Outros divos para significar cada espaço. Então, essa diva vou dar a classe espaço, tá? Então, vai ter 9. Deixa eu ver aqui 4, copiar 4, 8, 9, opa. Tá? Cada diva vai ter a classe espaço. 1, 2, 3, 4, 5, 6, 7, 8, 9, tá? O espaço vai ser para o estilo para a largura e altura. E para cada um desses caras, a gente vai dar um ID de valor único para diferenciar cada espaço. Então, vou adicionar o ID, por exemplo, a maneira, a convenção que eu vou usar aqui, é eu vou começar aqui do centro aqui, dessa linha do centro, da esquerda para a direita, e eu vou falar que esse cara aqui é o chamado centro, e esse outro cara aqui vai ser o chamado esquerda, e esse outro cara vai ser chamado direita, tá? Esse espaço, opa, de inglês. A esquerda, centro e direita para esse espaço. Aí, para eu ver o cara de cima, eu vou dizer centro a cima, tá? Traço a cima. Vou tirar essa bola daqui. Então, o centro aqui e para esse cara de baixo, eu vou dizer centro a baixo. Tá? Centro, centro a cima, centro a baixo. Quero ver você deduzir qual vai ser a esquerda ali, vai ser esquerda a cima, traço a cima que eu vou usar, tá? E o lado de baixo vai ser esquerda, traço a baixo. Mesma coisa, mesma convenção para o cara da direita, tá? Deixa eu tirar esse cara daqui. Então, de cima vai ser direita a cima, traço a cima, e o de baixo vai ser direita a baixo. Tá? Então, nós temos esquerda a cima, centro a cima, direita a cima. Esquerda, centro direita. Esquerda a baixo, centro a baixo, direita a baixo. Então, eu vou começar de cima para baixo e esquerda para direita, tá? A primeira deva vai ser do deva-espasso, e a UID vai ser esquerda a cima. Tá? Deixa eu mover esse cara. Você vê melhor. Opa! Então, a primeira deva vai ser espaço. Toda deva vai ter classe-espasso, mas vão diferenciar cada dev usando UID. Tá? Desculpa, estou movendo esses caras aqui. Então, espaço. Primeiro vai ser esquerda a cima, o segundo vai ser centro a cima, terceiro vai ser direita a cima. Aí depois pula para a segunda linha da esquerda para a direita, e despaça com UID esquerda. O outro vai ser centro, outro vai ser direita. Aí depois a última linha da esquerda para direita, esquerda a baixo, centro a baixo, direita a baixo, tá? Então, essas vai ser as devas que vão aparecer em ordem, tá? Com essas, cada deva tem a classe-espasso, e o ID que vai diferenciar cada um desses caras. Tá? Então, essa primeira linha é esquerda para direita, a segunda linha da esquerda para direita, e a terceira linha da esquerda para direita. Então, vou criar uma estrutura dessa maneira, tá? Aí a gente vai usar o ID para poder adicionar essas bordas, tá? Por exemplo, o esquerda a cima, a gente vai adicionar a borda a baixo e a borda a direita. Para o centro a cima, a gente pode adicionar a borda a baixo e borda a direita, tá? E para o direita a cima, borda a baixo. Ou também você pode olhar de outra maneira, que é adicionar da esquerda a cima, você adiciona a borda para baixo, borda a direita. Para o centro a cima, você adiciona a borda a esquerda, a direita e a baixo. E para a direita a cima, a esquerda e para baixo, que assim pude antes, tá? Para poder ter um espaço igual entre as bordas aqui entre os caras, tá? Então, com isso, vai ser a estrutura de HTML. Então, a próxima aula a gente vai começar fazendo essa estrutura, tá? Então, até lá.