Modelo de Caixas na prática (parte 1) - @Curso em Vídeo HTML5 e CSS3

Introdução e Recado da Record

Visão Geral da Seção: Nesta seção, o instrutor introduz o capítulo 16 do material em PDF e menciona que a aula prática irá demonstrar como aplicar os conceitos aprendidos no vídeo anterior.

• A Record é uma organização patrocinadora do curso e oferece uma série de cursos gratuitos para preparar os alunos para o mercado de trabalho.

• Os cursos abrangem desde conhecimentos básicos, como ambiente Windows e pacote Office, até tecnologias avançadas, como internet das coisas e desenvolvimento de aplicativos móveis.

• Para participar dos cursos da Record, basta fazer a inscrição gratuita seguindo as instruções fornecidas pelo código exibido na tela.

Preparação do Ambiente

Visão Geral da Seção: Nesta seção, o instrutor orienta sobre a criação de uma nova pasta para o exercício e reforça a importância de ter assistido à aula anterior antes de prosseguir.

• Crie uma nova pasta para o exercício 021.

• Certifique-se de ter assistido à aula anterior antes de prosseguir com este exercício.

Demonstração Prática - Caixas Box Level

Visão Geral da Seção: Nesta seção, o instrutor inicia a demonstração prática sobre caixas do tipo Box Level. Ele cria um arquivo HTML chamado "caixa01.html" e mostra exemplos gráficos das caixas box level usando elementos H1, parágrafos e links.

• Abra o arquivo "caixa01.html" no editor de código.

• Crie uma caixa box level usando o elemento H1.

• Adicione exemplos de caixas box level usando parágrafos e links.

• Utilize o Google Chrome para inspecionar os elementos e visualizar as configurações CSS aplicadas às caixas.

Visualização das Configurações CSS

Visão Geral da Seção: Nesta seção, o instrutor mostra como visualizar as configurações CSS aplicadas aos elementos utilizando a ferramenta de desenvolvedor do Google Chrome.

• Clique com o botão direito na página e selecione "Inspecionar" ou pressione Shift + Ctrl + I para abrir a ferramenta de desenvolvedor.

• Na guia "Elements", você pode ver todas as configurações CSS aplicadas ao elemento selecionado.

• Feche a guia Console, se estiver aberta, pressionando Esc.

• Ajuste a visualização da ferramenta de desenvolvedor para facilitar a comparação com o editor de código.

Desanexando a Ferramenta de Desenvolvedor

Visão Geral da Seção: Nesta seção, o instrutor mostra como desanexar a ferramenta de desenvolvedor do Google Chrome para facilitar a comparação com o editor de código.

• Clique no ícone em forma de reticências na parte superior direita da ferramenta de desenvolvedor e selecione "Undock into separate window".

• Ajuste o tamanho da janela da ferramenta desanexada para que fique próximo ao tamanho do editor de código.

• Use a tecla Esc para ocultar ou exibir a ferramenta de desenvolvedor desanexada.

Selecionando Elementos e Visualizando Configurações CSS

Visão Geral da Seção: Nesta seção, o instrutor mostra como selecionar elementos na ferramenta de desenvolvedor e visualizar as configurações CSS aplicadas a eles.

• Clique em um elemento na página para selecioná-lo na ferramenta de desenvolvedor.

• Na guia "Styles", você pode ver todas as configurações CSS aplicadas ao elemento selecionado.

• Utilize o atalho Ctrl + "+" para aumentar o zoom na ferramenta de desenvolvedor, se necessário.

Essas são as principais seções e pontos-chave abordados no vídeo. Certifique-se de assistir ao vídeo completo para obter todos os detalhes e informações relevantes.

Configurando o Display de Elementos

Visão Geral da Seção: Nesta seção, aprendemos como configurar o display de elementos HTML usando CSS. O display pode ser alterado para diferentes valores, como "block" e "flex", afetando a forma como os elementos são exibidos na página.

Configurando o Display de Elementos

• O display padrão é "block", mas pode ser alterado para outros valores, como "flex".

• Os elementos podem ter diferentes tipos de display, como "inline-block" e "inline".

• Ao modificar o display dos elementos, podemos observar as mudanças em tempo real no navegador.

• Elementos com display block ocupam toda a largura disponível na página.

• Elementos com display inline não iniciam uma nova linha e se ajustam ao conteúdo dentro deles.

Entendendo Margens e Bordas

Visão Geral da Seção: Nesta seção, exploramos as propriedades de margem e borda em CSS. Aprendemos como visualizar e modificar essas propriedades usando inspeção do navegador.

Margens e Bordas

• Os elementos têm margens por padrão, que podem ser modificadas através do CSS.

• As margens podem ser visualizadas no navegador usando a ferramenta de inspeção.

• É possível alterar as configurações das margens diretamente no navegador para testar diferentes valores.

• As bordas também podem ser adicionadas aos elementos usando CSS.

• Podemos definir a espessura, estilo e cor das bordas.

Modificando Altura e Largura de Elementos

Visão Geral da Seção: Nesta seção, aprendemos como modificar a altura e largura dos elementos HTML usando CSS. Também exploramos como essas alterações podem ser feitas diretamente no navegador.

Modificando Altura e Largura

• Podemos definir a altura e largura dos elementos usando CSS.

• Ao modificar a altura e largura, podemos observar as mudanças em tempo real no navegador.

• É possível alterar essas propriedades diretamente no navegador sem afetar o arquivo original.

• A altura pode ser definida em pixels (px) ou outras unidades de medida.

• A largura também pode ser definida em pixels (px) ou outras unidades de medida.

Manipulando Visualizações com CSS

Visão Geral da Seção: Nesta seção, aprendemos como manipular visualizações de elementos HTML usando CSS. Exploramos como desligar determinadas visualizações e fazer ajustes personalizados.

Manipulando Visualizações

• Podemos desligar visualizações específicas de um elemento usando CSS.

• Ao desligar uma visualização, o elemento volta ao tamanho normal.

• Essas modificações são feitas apenas na visualização do navegador e não afetam o arquivo original.

• É possível ajustar diferentes propriedades, como largura e altura, diretamente no navegador para obter resultados personalizados.

Configurando a borda do elemento

Visão geral da seção: Nesta parte do vídeo, o instrutor demonstra como configurar a propriedade de borda de um elemento usando o Dev Tools.

Configurando a borda

• É possível alterar a largura da borda de um elemento.

• Ao clicar no link, é possível observar a diferença entre um elemento com display inline-box e um elemento com display block.

• A propriedade border-style define o estilo da borda, podendo ser sólida, pontilhada, dupla, entre outros.

• A cor da borda pode ser modificada através da propriedade border-color.

Personalizando as configurações da borda

Visão geral da seção: Nesta parte do vídeo, o instrutor explora diferentes configurações para personalizar a aparência da borda.

Personalizando a borda

• É possível modificar os valores das propriedades relacionadas à borda para obter diferentes efeitos visuais.

• Além de definir a largura e o estilo da borda, também é possível alterar sua cor.

• Diferentes estilos de linha estão disponíveis para criar efeitos decorativos na borda.

• O valor "groove" cria uma aparência tridimensional na margem do elemento.

Caixas Box Level vs. Caixas Inline Level

Visão geral da seção: Nesta parte do vídeo, o instrutor explica as diferenças entre caixas box level e caixas inline level.

Caixas Box Level vs. Caixas Inline Level

• As caixas box level são caixas retangulares que ocupam espaço na página e podem conter outros elementos.

• As caixas inline level são elementos que não geram uma nova linha e se ajustam ao conteúdo dentro delas.

• É possível perceber as diferenças entre esses dois tipos de caixa ao observar o comportamento dos elementos no navegador.

Trabalhando com medidas de espaçamento

Visão geral da seção: Nesta parte do vídeo, o instrutor demonstra como utilizar medidas de espaçamento para posicionar elementos na página.

Medidas de espaçamento

• A medida "em" é dividida em quatro partes, permitindo configurar diferentes espaçamentos para cada lado do elemento.

• É possível definir margens e preenchimentos utilizando diferentes unidades de medida, como pixels (px).

• Ao ajustar os valores das medidas de espaçamento, é possível posicionar os elementos conforme desejado.

Ordem de indicação das medidas de espaçamento

Visão geral da seção: Nesta parte do vídeo, o instrutor explica a ordem correta para indicar as medidas de espaçamento.

Ordem de indicação das medidas

• A ordem correta para indicar as medidas de espaçamento segue o sentido horário, começando pelo topo (top), seguido pela direita (right), inferior (bottom) e esquerda (left).

• Ao ajustar os valores das medidas, é possível posicionar os elementos corretamente na página.

Apoiando o canal Curso em Vídeo

Visão geral da seção: Nesta parte do vídeo, o instrutor convida os espectadores a apoiarem o canal Curso em Vídeo.

Apoiando o canal Curso em Vídeo

• Os espectadores são incentivados a acessar o site do Curso em Vídeo e se tornarem apoiadores.

• Ao se tornar um apoiador, é possível ter acesso a vídeos exclusivos, como um curso básico de programação usando Portugol Studio e aulas adiantadas do curso de HTML.

• Em breve, também serão oferecidos certificados para os apoiadores.

Utilizando medidas de pedem

Visão geral da seção: Nesta parte do vídeo, o instrutor demonstra como utilizar medidas de pedem para configurar elementos no Visual Studio Code.

Medidas de pedem

• A medida de pedem é dividida em quatro partes (top, right, bottom e left), permitindo configurar diferentes espaçamentos para cada lado do elemento.

• É possível ajustar os valores das medidas para posicionar corretamente os elementos na página.

Configuração de Caixas no Débito

Visão geral da seção: Nesta seção, o palestrante explica como configurar caixas no débito e demonstra como ajustar as margens e os espaçamentos.

Configurando o posicionamento das caixas

• O palestrante mostra como mexer no pezinho de baixo para ajustar a posição das caixas.

• É possível configurar a parte verde embaixo da caixa e também mexer no lado esquerdo.

• As configurações podem ser feitas dentro do débito, permitindo personalização conforme necessário.

Copiando e colando medidas

• É possível copiar medidas de uma parte do texto e colá-las em outra sem problemas.

• Isso é útil quando se deseja aplicar as mesmas medidas em diferentes partes do conteúdo.

Ajustando margens e espaçamentos

• Ao clicar em um link, é possível perceber que agora existe um pezinho de 10 e uma margem de 10.

• É possível aumentar ou diminuir o tamanho do pezinho top para ajustar o espaçamento vertical.

• Esses ajustes não afetam o texto, apenas alteram seu posicionamento na página.

Utilizando o débito para entender as caixas

• O débito é uma ferramenta útil para compreender melhor como funcionam as caixas dentro de um site.

• Permite brincar com as configurações das caixas para obter resultados desejados.

• Ideal para solucionar problemas de encaixe entre elementos.

Comportamento dos Elementos Box Level e Inline Level

Visão geral da seção: Nesta seção, o palestrante aborda o comportamento dos elementos Box Level e Inline Level em HTML.

Elementos Box Level

• O palestrante destaca que elementos como H1 são considerados Box Level.

• Demonstra como as configurações de margem e espaçamento afetam esses elementos.

Elementos Inline Level

• O palestrante menciona que ainda não foram abordadas as medidas de margem outline.

• Explica que os elementos Inline Level também possuem comportamentos específicos em relação às caixas.

Próximos Passos e Simplificações

Visão geral da seção: Nesta seção, o palestrante fala sobre os próximos passos do curso e menciona a simplificação das configurações.

Continuação no próximo vídeo

• O palestrante informa que no próximo vídeo serão abordados outros aspectos das configurações de caixas.

• Promete ensinar sobre margem outline e apresentar algumas simplificações.

Encerramento

• O palestrante se despede, convidando os espectadores para o próximo vídeo.

• Reforça a importância de entender modelos de caixas em HTML.

• Agradece pela atenção e encerra a transmissão.