Fundamentos do desenvolvimento web: HTML e CSS

1. Introdução: Olá e bem-vindo ao Web Development Fundamentals, HTML e CSS. Eu sou Chris, eu auto-ensinado desenvolvedor web e o criador de duas aulas de sucesso aqui no Skillshare, compreendendo o desenvolvimento web e como construir eficientemente sites WordPress com Divi. Nesta classe, vamos cobrir algo que é muito fundamental para construir para a web e que é o uso de HTML e CSS. HTML é a linguagem de marcação que dá estrutura a páginas da Web e aplicativos em toda a web, enquanto CSS é a linguagem de folha de estilo usada para descrever a apresentação de HTML. HTML e CSS trabalharam muito em conjunto para criar a aparência visual e layout de seu site ou aplicativo web. Nesta aula, vamos cobri-los juntos. Qualquer que seja o caminho específico que você escolher para seguir como um desenvolvedor web, uma coisa é com certeza que você vai precisar de algum conhecimento de HTML e CSS. Se você está pronto para mergulhar e aprender os fundamentos de HTML e CSS fique assistindo e eu vou vê-lo no próximo vídeo. 2. Do que você vai precisar: Antes de começarmos, você precisará de algumas ferramentas necessárias para o desenvolvimento web, já que estamos fazendo apenas desenvolvimento web front-end, apenas com HTML e CSS. Tudo o que precisaremos são duas coisas, ambas disponíveis gratuitamente. O primeiro é, um navegador da web. Eu uso o Google Chrome. Seu navegador da Web para aqueles de vocês que não ouviram o termo antes, é apenas a coisa que você usa para navegar na Internet, mas você também pode usá-lo para abrir qualquer página da web, mesmo que seja apenas no seu computador escrito em arquivo de texto. Ele basicamente interpreta o que estamos construindo hoje, HTML e CSS, e exibi-lo. Isso é muito importante para o que estamos prestes a fazer. A segunda coisa é um editor de código, e eu uso um átomo de código. É desenvolvido pelo GitHub, e é um dos mais populares, mas você pode usar o que quiser para o EVA. Em termos de navegadores, a maioria das pessoas usará Firefox, Safari, Internet Explorer ou Edge, que na verdade cobre 90% dos usuários da Internet. Firefox e Chrome, que é o que eu uso estão disponíveis no Windows, e Safari está disponível no Mac, e eu tenho certeza que Internet Explorer ou Edge, que é uma versão mais recente, é apenas Microsoft Eu acho que é apenas PC, mas eu recomendaria Chrome, Safari ou Firefox. Tenho tudo isso instalado no meu computador também. Deixe-me abrir o Firefox também. A razão pela qual eu recomendo estes três é que todos vêm com ferramentas de desenvolvedor. O que eu quero dizer com isso é se eu entrar no Google Chrome, que é o meu navegador preferido, e eu pressionar Alt comando I. Isso vai trazer o meu console de desenvolvedor, e você pode não entender o que está acontecendo em todos esses diferentes aqui, mas é muito poderoso ter isso. Isso facilita muito a depuração. Podemos editar o nosso site ou qualquer página web em tempo real para testar coisas novas, podemos ver estilos que estão aplicando. É muito bom ter essas ferramentas quando você está desenvolvendo para a web. Safari, creio que seja, chamado Inspetor Web. Mostrar o Inspetor da Web. Acho que precisamos ir a uma página de verdade primeiro. Vamos apenas ir para Google.com.au, mostrar o Web Inspector, e como você pode ver aqui, temos uma interface semelhante, e no Firefox, como eles chamam isso? Consola. Eu só uso cromo. Não sei como chamam, mas descobriremos em um segundo. Eles só chamam de inspetor. Então você pode ir para, Ferramentas, desenvolvedor web, e clique em qualquer um destes para obter uma interface semelhante. Você verá o inspetor onde você pode inspecionar elementos console, depurador. Novamente, não fique sobrecarregado por tudo isso. Só estou avisando em termos de escolha do seu navegador. Se você se ater apenas ao Chrome, Firefox ou Safari, você ficará mais do que bem. Se você quiser acompanhar o mais de perto possível, Chrome é definitivamente uma boa opção. A segunda coisa que você vai precisar é de um editor de código. Eu tenho usado Atom por um tempo agora e eu realmente gosto dele, mas há outras opções de um livre opções como Sublime Text, você poderia usar Vim, ou você poderia usar outro chamado colchetes. Todos estes tenho certeza que são livres, e todos eles funcionam de forma semelhante. Novamente, se você quiser acompanhar o mais próximo possível com o que estou fazendo e você simplesmente não tem uma preferência em relação a um editor de código, você pode simplesmente escolher átomo. Uma coisa que eu devo dizer é tecnicamente, se você estiver em um PC, você poderia usar o Bloco de Notas para desenvolver páginas da web também. Tenho certeza que no Mac, eu poderia usar TextEdit teoricamente para criar documentos da web, mas você não terá todos os recursos especiais que facilitam o desenvolvimento para a web como você faria em um editor de código como Atom, Vim, ou texto sublime. Eu recomendaria vivamente pegar um editor de código adequado, e não desenvolver através do Bloco de Notas ou TextEdit. Mais uma vez, se você não sabe do que estou falando, basta baixar Atom ou Sublime Text ou Vim, e você será doce. Se você tem um editor de código e um navegador da web, você está praticamente pronto para ir. Essas são as duas coisas que você realmente precisa. Mas em termos de conhecimento, se você está começando do zero, se esta é sua primeira vez aprendendo sobre desenvolvimento web, eu definitivamente recomendo que você vá e confira um dos meus cursos anteriores, então você pode simplesmente ir para o meu e meu curso anterior, compreendendo desenvolvimento web, um guia para iniciantes para a web. Isso lhe dará uma visão geral de todo o desenvolvimento web, e então eu recomendo que qualquer pessoa venha aos meus cursos depois daquele para voltar e se referir a esse. Falamos de conceitos, como HTML e CSS, mas também como isso se encaixa na programação back-end. A diferença entre front-end e back-end, como implantar seus sites, obter um servidor, todas essas coisas diferentes. Eu apenas forneço uma visão geral do desenvolvimento web nesse curso, e por isso eu recomendo que um primeiro. Só para que você saiba, onde HTML e CSS estão se encaixando no quadro geral do desenvolvimento web. Caso contrário, se você acha que tem uma boa compreensão de desenvolvimento web ou já fez este curso. Estamos praticamente prontos para mergulhar diretamente e começar com alguns HTML. Estou muito animado para começar e te vejo no próximo vídeo. 3. O que é HTML e CSS: Neste vídeo, vamos abordar o que é HTML e CSS. Nós realmente discutimos como HTML e CSS em uma de minhas classes anteriores, entendendo desenvolvimento web, então se você tomou este, você provavelmente já tem uma boa compreensão do que HTML e CSS é. Mas neste vídeo e nesta aula em geral, vamos mergulhar um pouco mais fundo nele. Um bom lugar para começar a entender HTML é a introdução no w3schools.com. Se eu for para w3schools.com, clique em “Aprender HTML” e depois clique em “Introdução HTML”, ele fala sobre o que é HTML e nos dá um documento HTML simples. Eu acho que eles fazem um bom trabalho de resumir HTML, ele significa Hyper Text Markup Language, e descreve a estrutura de páginas web usando marcações. Você tem elementos que fazem os blocos de construção de páginas HTML, elementos são representados por tags e tags internas são pedaços de conteúdo. Uma coisa importante a observar é que os navegadores não exibem HTML, mas eles os usam para renderizar o conteúdo da página. Então, basicamente, o que vemos aqui é o código que é interpretado pelo nosso navegador, a fim de construir a página e ver o que é que você vê em seu navegador. Isso é um pouco meta, mas estamos em uma página web agora. O que estamos vendo são os resultados de HTML e CSS reunidos em nosso navegador para criar um site. Mas como chegamos a esse ponto é através de HTML. Só para perfurar esta casa, podemos ir a qualquer página web, digamos, por exemplo, esta página web, e clicar com o botão direito do mouse sobre ela e clicar em “View Page Source”, e então você verá o que realmente é alimentado para o navegador dar-lhe esse resultado aqui. Este é um exemplo bastante complicado, eu acho, você tem no início, muitos CSS aqui que está incorporado na página. Você pode rolar para baixo e ver alguns JavaScripts lá. Eu não ficaria muito confuso com isso, mas você pode começar a ver aqui lotes de HTML com classes e outros atributos. Eu não espero que você entenda completamente o que está acontecendo aqui, é sobre isso que este curso é sobre. Mas eu só queria destacar os pontos, tudo o que você está vendo em seu navegador é HTML e entre outras coisas como CSS e JavaScript. Como você pode pensar em HTML? Gosto de pensar nisso como uma estrutura, mas também elementos que definem. Como você pode ver em nosso documento aqui, uma vez que criamos uma tag, estamos definindo-a, mas onde colocamos dentro do documento, também define a estrutura. Como você pode ver, esta tag de parágrafo está atrás deste cabeçalho tags então, se fôssemos mudar a ordem, isso mudaria a estrutura, e como você verá enquanto passamos pelo curso, podemos aninhar tags dentro de tags e criar, Eu acho, uma árvore de elementos que é conhecido como o Modelo de Objeto Documento ou o DOM. Novamente, não se preocupe muito com isso, vamos cobrir o Document Object Model por muito tempo. Isso é um pouco sobre como HTML, o que é CSS? Bem, nós podemos ir para o item de menu CSS em w3schools.com e ir para a página de introdução disso e nós temos um pouco de uma visão geral. Basicamente, CSS descreve como elementos HTML devem ser exibidos em sua tela, no papel ou em outras mídias, como diz aqui. Significa Folhas de Estilo em Cascata, e podemos armazenar nosso CSS em lugares diferentes, reutilizar estilos diferentes, apenas torna tudo mais organizado quando armazenamos CSS em arquivos separados ou definimos regras dentro do mesmo documento que o HTML. Novamente, vamos cobrir tudo isso, então você verá isso acontecendo bem na sua frente. Mas se voltarmos para a fonte da página de qualquer site, vamos apenas fazer este site porque ele está bem na nossa frente, nós temos CSS bem aqui, e isso é realmente regras CSS incorporadas no documento. Mas se descermos a qualquer elemento, talvez possamos começar a ver, e eu não estou vendo algo surgir imediatamente, mas podemos procurar estilo, e podemos começar a ver um elemento HTML com um atributo de estilo, onde também podemos definir alguns CSS também. Você pode ir para qualquer página da web e você pode ver CSS e você pode ver HTML. Mas muitas vezes, o código CSS é armazenado em outro documento que é referenciado por este documento. Veremos isso muito em breve também. Enquanto isso, para aprofundar em casa a diferença entre CSS e HTML, Eu quero mostrar-lhe uma página web que não tem CSS qualquer. Para isso, vou precisar de uma certa extensão. Você não precisa baixar esta extensão, eu só baixei para a finalidade desta demonstração para que você possa apenas acompanhar. Mas se vamos a qualquer site, vamos apenas para Google.com, e eu tenho essa extensão aqui que me permite desativar todos os estilos. Eu posso entrar no menu CSS disso, pressionar “Desativar todos os estilos”, e você pode ver como a página inicial do Google se parece sem qualquer CSS. Estou logado no momento, então há algumas das minhas informações lá. Mas, essencialmente, você pode ver que a caixa de pesquisa lá, está lá, você está recebendo as sugestões, eu acho, isso está aparecendo e você está recebendo os botões e as imagens, mas está em todo o lugar e não tem estilo agradável. Se voltarmos a ativá-lo, você começará a ver que tudo está definido, e você pode começar a ver a importância de ter CSS porque este site aqui é praticamente inutilizável. Mas para ser justo, a Internet hoje em dia depende fortemente do CSS e do estilo. Há exemplos que eu poderia mostrar a partir dos anos 90 ou algo assim, onde não há CSS envolvido qualquer coisa. Na verdade, tenho um exemplo para te mostrar. Se eu ir para www-cs, Eu encontrei esta página web que aparentemente é criado sem qualquer CSS qualquer. Consegui entrar e descobrir que estava carregando uma folha de estilo, mas podemos simplesmente entrar e excluir esse link. Isso é muito bonito como um site se parece sem CSS. Como você pode ver, os links aqui são de cor roxa ou marrom escuro, eu acho, você pode chamar isso de roxo escuro, azul, ou se você clicar neles, você pode ficar vermelho. Você verá que os elementos são como empilhados um em cima do outro, não há colunas, são basicamente apenas imagens, textos. Você pode negrito algum texto, isso é sobre isso, você pode colocar em alguns caracteres chineses que se parecem, você pode colocar em links, você pode colocar nesta regra horizontal, e você pode empilhar links em cima do outro, mas você está bastante limitado. Quero dizer, nos anos 90, você pode ser capaz de escapar com um site como este sem CSS, mas nos dias de hoje, você absolutamente precisa de CSS e é tão vital para fazer qualquer tipo de documento web. Espero que isso comunique a você o quão importante é ter CSS ao lado de seu HTML, e como juntos eles são fundamentais e complementares. Uma coisa que vou mencionar sobre HTML e CSS é que quando você começa a pesquisá-lo na web ou conferir outros cursos, você pode ouvir pessoas ou ler pessoas se referindo a HTML e HTML5 como se fossem coisas diferentes. Como se eu pesquisar HTML5 no Google, eu recebo um monte de artigos com HTML5 neles obviamente, e se eu pesquisar HTML, eu apenas obtenho HTML. É tipo semelhante, sites como w3schools.com, ambos têm uma página em HTML e HTML5. Pode ser bastante confuso saber, bem, o que você está aprendendo em HTML ou HTML5? Como você pode ver, HTML5 é a versão mais recente do HTML, e está fora há quase três anos ou cerca de três anos agora. É definitivamente a nova versão do HTML que existe há algum tempo. Eu só vou me referir nesta classe para HTML e HTML5 como basicamente a mesma coisa porque devemos estar desenvolvendo em HTML5, não HTML4 se estamos aprendendo desenvolvimento web hoje em 2018, ou para sempre se você está ouvindo nos anos para vir. Mesma coisa com CSS e CSS3. Se escrevermos CSS, veremos todos esses links, CSS3 e você tem páginas da web semelhantes que diferem de CSS para CSS3. Novamente, CSS3 é apenas a versão mais recente do CSS e eu acho que como HTML, ele está fora há muito tempo. Eu só vou me referir a CSS, e CSS3 como basicamente a mesma coisa neste curso. Chega de teoria por enquanto. Eu não sei se eu precisava falar sobre CSS e CSS3 mas é algo que me confundiu também porque eu vi HTML aqui e HTML5. As pessoas geralmente se referem a eles como coisas separadas, mas no final do dia, estamos aprendendo HTML e CSS em 2018 ou além. Podemos pensar em HTML e HTML5 como a mesma coisa. Chega de teoria por enquanto. No próximo vídeo, vamos parar de falar sobre HTML e CSS e começar a desenvolver alguns. Vejo você no próximo vídeo. 4. Primeiros passos com HTML: Primeiro vamos abrir nosso editor de código. Para mim, é Atom. Enquanto isso está carregando, eu vou voltar para nosso navegador e vamos revisitar essa página por escolas W3. Então eu vou lá. Clique em “Aprender HTML”, clique em “Introdução HTML”. Então eu quero que você role para baixo até onde ele mostra este documento HTML simples. Vamos dar uma olhada no que está acontecendo aqui. Há duas partes nisto, e uma é a etiqueta. Você pode ver as tags destes menos que sinal e maior que sinal com um pouco de texto no meio. Em seguida, há conteúdo, que é apenas texto neste caso. Você tem Título da Página, Meu Primeiro Título, Meu Primeiro Parágrafo. É realmente formatado muito bem aqui e seu editor de código deve fazer o mesmo. Você pode ver essas partes diferentes codificadas por cores. Então você pode dizer que esta é uma tag e você pode dizer que este texto é parte desta tag a partir da cor. Então, com tags, você tem tags de abertura e fechamento e tags sem conteúdo. Então aqui em cima, por exemplo, esta é uma tag que não tem uma abertura ou fechamento. Você só precisa colocar isso uma vez. Mas se você olhar para a próxima tag, nós temos HTML. Mas aqui em baixo temos de novo, mas com uma barra na frente, e isso denota a etiqueta de fechamento. Basicamente, qualquer coisa que esteja entre a tag de abertura e fechamento compõe o que é essa tag definindo. Isso soa abstrato, mas se olharmos para um exemplo mais concreto aqui com o título, isso denota que o título está começando. Em seguida, colocamos o título e, em seguida, usamos a tag de fechamento para dizer que terminamos de colocar no título. O título vai para o que é chamado de seção principal do seu documento HTML, mas também há uma seção de corpo que é aberta e fechada aqui. Nós vamos entrar na cabeça e corpo em apenas um minuto, mas o que eu quero atravessar aqui é que nós temos etiquetas. Esta é a base do HTML e o que está entre as tags e o que está na tag aqui define o elemento. Neste exemplo, temos apenas texto, mas podemos colocar qualquer coisa lá, podemos colocar outras tags lá. Podemos colocar imagens no meio, e basicamente, isso é HTML. Esta é a nossa marcação , será um exemplo muito simples. Agora o que eu quero fazer é pegar todo esse exemplo e movê-lo para o nosso editor de código. Então eu vou apenas selecionar tudo. Pressione “Comando C” em um Mac para copiar. Vou me livrar dessas mensagens de boas-vindas do átomo. Vou clicar em “Novo arquivo”, e recebemos um arquivo em branco. Agora não há formatação ainda porque ele não sabe que tipo de documento ele é. Então o que eu vou fazer é clicar em “Arquivo” e salvar isso imediatamente. Então, o que você precisa fazer agora é navegar para onde deseja armazená-lo. À medida que nos movemos ao longo do curso, estaremos adicionando mais arquivos, então devemos realmente configurar um diretório de projeto. Eu estou indo apenas para ir para desktop e criar HTML e projeto Css. Vou chamar-lhe assim. Agora temos uma pasta para abrigar nosso projeto. O que eu vou nomear isso é index.html. Você não precisa chamar o seu index.html. A parte importante é que você tem ponto HTML no final porque isso vai dizer ao seu computador e qualquer outra coisa que está tentando interpretar o que esse arquivo é, você está dizendo especificamente que este é um documento HTML. Índice é uma palavra ou nome comum para fornecer um documento HTML que fica no centro do seu projeto. Então eu acho que índice neste caso, dot HTML é um nome realmente apropriado. Vamos clicar em “salvar” e, de repente, você começará a ver as cores serem semelhantes às que tínhamos aqui. Então vamos ver alguma formatação aqui e podemos ver claramente o que é uma tag e o que é um pedaço de texto ou conteúdo dentro da tag. A outra grande coisa sobre ter um editor de código que é, eu posso clicar na abertura e ele vai destacar o fechamento para que você possa começar a ver onde ele fecha. Se eu fizesse isso e me livrasse do encerramento, isso quebraria meu documento. Talvez ainda apareça neste caso. Mas uma vez que você tem um documento completo, você definitivamente quer estar fechando o tempo todo. Agora só para tornar um pouco mais fácil mostrar o aninhamento, eu quero recuar o título para que você possa ver que ele fica dentro da cabeça, e eu quero recuar isso porque ele fica no corpo. Se fôssemos criar outra tag e colocá-lo por baixo, eu esperaria para tabular através também. Você verá isso muito no desenvolvimento web para mostrar o aninhamento, mas cobriremos o aninhamento em um vídeo futuro. Neste momento, só queria rever as etiquetas que tínhamos aqui. Eu mencionei que temos tags vazias, então não há necessidade de uma tag de fechamento, mas então temos essas tags de abertura e fechamento. No topo, temos HTML, que define que este é um documento HTML. Não há muito mais a dizer sobre essa etiqueta, exceto que tentar manter tudo entre aqueles dois. Temos a seção da cabeça. A seção principal é onde você coloca seus metadados. Nós vamos fazer um vídeo completo sobre a cabeça HTML mais tarde nesta classe. Mas, por enquanto, uma das coisas que você vai precisar em sua página web é um título. Então podemos colocar o título entre as tags de cabeça. Então, quando você visualizar seu documento em um navegador, talvez vamos entrar agora. O que eu posso fazer é clicar em “localizador” nova janela do localizador. Eu posso navegar para onde meu projeto está e posso literalmente arrastar esta gravação index.html no meu navegador. Como você vê aqui, este não é um endereço na internet, mas ainda foram capazes de interpretá-lo através do nosso navegador porque é simplesmente HTML e Css e JavaScript quando o adicionamos a este projeto. Como você pode ver, título da página fica aqui. Se eu fosse voltar para o editor de código e alterar Título da página para documento HTML e clique em “Salvar”, em seguida, recarregue este arquivo. Você verá que o título desta página agora é documento HTML. Então você pode começar a ver que aqui tudo dentro da janela do seu documento é o corpo. Então tudo o que está na cabeça, se voltarmos para aqui, são coisas que apoiam isso. Então você tem o título que vai para, quando você está olhando para uma guia no Google Chrome ou você está abrindo uma janela que aparecerá na própria janela. Você pode colocar em outras coisas aqui relacionadas ao SEO, você pode vincular folhas de estilo externas aqui. Mais uma vez, vamos entrar na cabeça com mais detalhes mais tarde, mas essa é essencialmente a diferença entre cabeça e corpo, que é o que você vê aqui. Eu disse que cobriria o aninhamento em um vídeo posterior, mas é um conceito simples, então eu vou apenas cobri-lo agora. Eu vou jogar alguns elementos que você pode não estar familiarizado com. Não se preocupe, vamos cobri-los mais tarde. Mas só para demonstrar o aninhamento, se eu pegasse essa etiqueta de parágrafo, colocasse aqui, chamasse este segundo parágrafo. Então aqui dentro tem outra tag div. Divs são basicamente apenas blocos em HTML. Então eu posso colocar no meu terceiro parágrafo, você pode começar a ver nidificação acontecendo aqui. Então, como você pode ver, nós temos corpo e dentro do corpo temos h1, P e div. Dentro desta div temos P mais outra div, e dentro dessa div temos um P, que é essencialmente aninhando. Neste momento, não vai fazer muito sentido até termos mais elementos apresentados logicamente na página. Mas, essencialmente, você tem essa tag h1, uma tag P, e então uma div que vai logo depois dela. Se fôssemos definir alguns estilos nesta tag div, isso afetaria tudo dentro dela. Estes são chamados filhos desta tag e isso é chamado de pai. Mas, novamente, estou ficando um pouco técnico aqui. Não precisamos entrar em tantos detalhes ainda. Mas, essencialmente, você vai ver isso muito em HTML e é chamado de aninhamento. Eu só vou reverter essas mudanças pressionando Control Z. Isso praticamente cobre o documento básico que você tem que encontramos no exemplo aqui. Então neste vídeo, nós nos familiarizamos com o título, nós nos familiarizamos com h1 e P. Mas há muito mais elementos para usar em HTML. Então, nos próximos vídeos, vamos cobrir alguns dos outros elementos que podem fazer o seu documento HTML. Então, vejo-te no próximo vídeo. 5. Cabeçalhos e parágrafos: Neste vídeo vamos cobrir títulos e parágrafos. Nós já temos um título e um parágrafo dentro do nosso documento, mas nós realmente não explicamos como cada um desses elementos funciona. Com tags de cabeçalho, podemos voltar para W3Schools e começar a cavar em títulos um pouco mais. Mas como você pode ver, eles têm um ótimo exemplo aqui onde eles estão criando seis títulos diferentes em seis tamanhos diferentes. Mas, na realidade, os títulos são mais importantes do que apenas o tamanho. Os mecanismos de pesquisa realmente usam cabeçalhos para indexar a estrutura e o conteúdo da sua página web. Há dois pontos importantes a mencionar aqui sobre as rubricas. Vamos voltar ao nosso documento aqui e ver que temos uma tag h1, por que temos uma tag h1? Bem, h1 é feito para ser o título de nível superior. Se eu voltar para o nosso documento, eu vou abrir uma nova guia e apenas arrastá-lo novamente para que eu possa ter ambos abertos, e se isso foi digamos, uma postagem de blog ou um documento sobre página ou qualquer outra coisa, vamos apenas dizer que é uma página sobre, você usaria h1 para dizer “Sobre nós”. Só por consistência, criaremos um título aqui que diz “Sobre nós” também. Certifique-se de que você está sempre economizando. Eu só estou usando Control S, mas você também pode ir “File Save” lá e voltar para o seu documento e, como você pode ver, o título é sobre nós eo título de nível superior, que é definido por h1 está lá. Talvez se você estivesse fazendo um documento, um post sobre nós, você teria sobre nós, um primeiro parágrafo, mas talvez você queira alguns subtítulos também. O próximo título de nível seria h2. Sobre nossa história, talvez se isso for como uma empresa ou um duo, talvez você queira ter um título de sub-nível, e então você colocaria em outra tag de parágrafo talvez e então poderíamos ter vários h2 nesse nível, se isso faz sentido. Nossa história, nossos valores, digamos, colocar lá, e eu poderia jogar mais texto nesses parágrafos, mas isso é apenas propósitos de demonstração, obviamente. Se eu voltar para o nosso navegador e atualizar, você pode ver que nosso título de nível superior é sobre nós e nossa história e nossos valores vem sob isso. Agora, em HTML você tem até seis níveis, então você pode ir mais fundo e mais fundo, talvez haja dois títulos em nossa história. Então você iria e usar o próximo número h3 para ir mais fundo e ter outro cabeçalho de sub-nível, mas como mencionamos pouco antes, também é importante que títulos você está usando para SEO. Não pense apenas em h1's como a grande aversão de h2 e apenas pense no tamanho quando você está escrevendo seu documento HTML, você definitivamente quer seguir a estrutura onde você tem seu cabeçalho de nível superior, que é h1 e, em seguida, tudo sob ele vai para baixo em números. Não é apenas sobre o tamanho do título, é também sobre torná-lo mais legível para o usuário, mas também dizer mecanismos de pesquisa como o Google, a estrutura da sua página e que é uma ferramenta que o Google usa para descobrir como indexar sua página , mas também para descobrir o quão legível ela é. Estrutura é importante para o leitor, também é importante para os motores de busca e tudo o que você tem que saber é que você tem que ter o título um como seu título de nível superior e, em seguida, trabalhar para baixo a partir daí. Se vamos ter um rumo abaixo da direção um, será h2 e, em seguida, indo por baixo h2 seria h3 e assim por diante e assim por diante. A outra coisa que você pode fazer, que não é realmente um título, é uma regra horizontal. É definido com o “h” também. Mas basicamente, se quisermos ter uma separação entre esses dois títulos, podemos colocar uma etiqueta h. Esta não é uma tag “desculpe”, é uma etiqueta de fechamento automático, então você não precisa colocar nenhum conteúdo nela. Você não precisa fazer isso, por exemplo, você pode simplesmente colocar o sinal de menos que, hr, maior que sinal. Voltando para nossa página e você pode ver que há uma regra horizontal lá dentro. A próxima coisa é parágrafos e eu vou me referir a W3Schools também. A coisa importante a observar sobre HTML e fazer parágrafos é que você não pode alterar a saída adicionando espaços extras ou linhas extras em seu código HTML. Isso deve ser definido usando parágrafos dizendo especificamente que você quer ter uma quebra de linha, e você terá que colocar em entidades HTML e similares para obter mais espaço em branco. Novamente, não se preocupe muito com isso, estaremos cobrindo isso em uma lição futura, mas por enquanto, vamos apenas demonstrar isso. Nosso primeiro parágrafo, e então vamos espaço para baixo e dizer olá, adeus. Vamos voltar e você pode ver o espaço em branco mais antigo que criamos e delineamos quebrar, ele não se depara. Parágrafo, se você queria ter separação de linhas, uma maneira que você poderia fazer isso é colocando isso em outra tag p e que diz ao seu navegador que este é um novo parágrafo, então ter algum espaçamento entre eles. Se eu quiser colocar isso de volta como era, coloque em “olá “, adeus. Agora você verá que está em uma nova linha porque é um novo parágrafo. Está nesta nova tag de parágrafo, mas novamente, o espaço em branco no meio, não está lá. Uma maneira de se locomover que é usando a tag pré. Se você usar a tag pré, ela será exibida com uma fonte fixa e preservará ambos os espaços e quebras de linha. Se eu voltar aqui e criarmos um pré. Na verdade, vamos apenas modificar o que já temos, vou adicionar e voltar a isso. Agora que elemento de parágrafo, essa tag de parágrafo agora é pré tag, e como você pode ver, nós temos essa fonte estranha, mas nós temos nosso espaçamento de linha. Eu não sei de uma situação em que você precisaria usar pré. Às vezes, como desenvolvedor, pode ser útil exibir código porque o código que você deseja mostrar recuo e um pouco de formatação, mas muitas vezes é melhor usar pré se você quiser. quantidade estranha de espaço em branco entre as palavras, há maneiras de você fazer isso, mas se você queria separação entre ter novas linhas, você pode ter uma nova tag p como esta. Outra maneira de ter novas linhas é também usar outro código de tag vazio, br. Se eu entrar no meio dessas duas palavras e colocar um br dentro, tenho certeza que isso significa intervalo e você pode ir até aqui e ver que agora há uma quebra de linha. É um pouco separado porque não há preenchimento ou margem entre essas duas linhas. Se você só queria quebrar a linha, você pode fazer isso, mas se você estivesse escrevendo muitos parágrafos, você talvez uma vez que você colocá-los em tags de parágrafo diferentes e tê-lo estruturado assim irá torná-lo mais fácil de estilizar para baixo a pista, porque você pode definir o quão grande você quer que a lacuna seja entre os diferentes parágrafos. O mesmo vale aqui em cima com o título um em seus estilos, que vamos entrar em CSS, podemos definir o tamanho dessa margem entre aqui e nosso primeiro parágrafo. Isso é basicamente títulos e parágrafos. Estes são os blocos de construção mais simples do seu documento, mas no próximo vídeo, vamos entrar em três realmente comuns que você verá o tempo todo em documentos HTML. Vejo-te no próximo vídeo. Vamos continuar construindo nosso documento HTML no próximo vídeo. 6. Links, imagens e botões: Como mencionei no vídeo anterior, links, imagens e botões são bastante comuns em HTML, e é isso que vamos abordar a seguir. O que cada um deles faz é bastante auto-explicativo. Eu só vou pular direto e colocar alguns links, botões e imagens em nossos projetos imediatamente. Vou primeiro precisar de uma imagem, e devo admitir que não preparei uma antes, então vou encontrar uma agora, e forçar a frente. Eu tenho esta imagem aleatória aqui, e o que nós vamos fazer é colocá-la no diretório do projeto ao lado do meu documento HTML. É um nome louco. Eu só vou chamar esta foto apenas para a simplicidade Saca. Lá temos uma foto que podemos referenciar e trazer para o nosso projeto. Eu vou voltar para o meu editor de código e eu vou atrás da tag headfirst cabeçalho, a tag H1, e eu vou criar uma imagem, que é bem simples. Só fazemos uma imagem assim. Agora, é claro, se eu apenas pressionar uma tag de imagem lá, nada realmente vai acontecer porque nós não estamos realmente dizendo ao documento de onde a imagem está vindo. Tem de haver um atributo. Esta vai ser a nossa primeira olhada nos atributos, mas vamos aprofundar mais tarde. Se fizermos um espaço após o nome da tag e colocar em algum texto, vamos ver que em marrom no meu caso particular porque eu estou usando Adam. O que estamos fazendo aqui é atribuir um atributo. Vou pressionar “Iguais” e então vou abrir e fechar parênteses. Porque o que estamos colocando aqui dentro é chamado de corda. Uma string é apenas um termo técnico para algum texto. Mas as aspas dizem basicamente: “ Pegue esta palavra por palavra”. Novamente, não fique muito preocupado com toda a sintaxe aqui. Basta saber que você tem que colocar em algum texto, igual, e então algum texto do outro lado que é igual entre aspas. Você também pode fazer aspas simples, bem como se preferir. Isso, veremos as implicações disso mais tarde. Tudo que preciso colocar aqui é se voltarmos aqui, o nome do arquivo e onde está armazenado. Parecendo que está na mesma pasta que o nosso documento HTML, eu posso colocar isso aí. Vou pressionar “Salvar”. Volte para o nosso documento HTML e de repente você vê a imagem lá. Mas o que ele vai fazer é explodir isso até a altura e largura total da foto original. O que podemos fazer é colocar em alguns outros atributos aqui, largura e altura. Você também pode definir largura e altura em CSS. Mas como as imagens têm sido em torno desde os primeiros dias do HTML, nós somos capazes de definir larguras e alturas deles também. O que eu vou fazer aqui é restringir a 100 pixels, e a unidade para pixels é px. Não coloque um espaço no meio. Certifique-se de tê-lo bem ao lado do dígito. Então o que vou fazer é apertar “Salvar”. Eu vou voltar para aqui. Então você verá que são 100 por 100, mas infelizmente, a imagem não estava quadrada para começar, então você tem algum alongamento aqui. Se eu for, desculpe, eu fiz isso um pouco rápido demais, usando o Chrome, eu posso clicar com o botão direito do mouse aqui, clique em “Inspecionar”. Eu posso ver o nosso documento HTML de uma forma interativa dentro do nosso navegador. O que eu fiz apenas então foi eu fui inspecionar esse elemento em particular e ele vai me mostrar a tag que está criando esse elemento. Então o que eu fiz foi pairar sobre a foto. JPEG. Posso ver aqui o tipo natural de proporção e pixels que era originalmente. Você pode ver aqui que esses dois números são iguais. Se eu fizer um quadrado, vai parecer um pouco estranho. Deixe-me fazer alguns cálculos rápidos para descobrir como podemos manter essas proporções. Queremos que seja 9,6 vezes menor do que originalmente é. Podemos colocar a altura em 75. Vou voltar aqui e colocar a altura em 75. Isso deve nos dar aproximadamente as mesmas dimensões, aí vai. Aí está a nossa imagem. Nós também podemos colocar em um link. Podemos fazer isso usando o que é chamado de tag âncora, e é muito simples. É apenas um, e então você fecha com uma tag e, em seguida, qualquer coisa entre estes um tags é o texto que está vinculado. Vou colocar, isto é um link, e se salvarmos, volte aqui. Podemos ver que há uma ligação lá, mas está incompleta. Isso é porque não lhe demos um atributo importante chamado href. Se eu espaço para adicionar um atributo e eu colocar em href, e eu usar a mesma convenção, é igual e, em seguida, aspas duplas. Posso ligá-lo em algum lugar. Agora, na verdade, não temos outra página para vincular. O que eu vou fazer é colocar um espaço reservado aqui e um espaço reservado comum é apenas um hash ou um sinal de libra se você for da América. Vou pressionar “Salvar”, e vou voltar aqui. Então, de repente, podemos ver o link é formatado como um link. Não só fica azul, e se eu clicar nele, fica vermelho. Então, depois que eu cliquei nele, ele vai virar para esta cor roxa. É também, você pode ver meu cursor mudar quando eu passar por cima. Aqui eu tenho esses textos, ferramenta de destaque. Então aqui eu tenho um cursor para indicar que eu posso clicar sobre isso. Novamente, não vai fazer nada porque não ligamos a nada. Digamos que tínhamos uma página que se chamava blog. Depois voltamos. Se eu fosse clicar sobre isso, você vai obter arquivo não encontrado porque nós não temos isso. Na verdade, eu fiz um erro de digitação lá. Eu só quero colocar assim. Se pressionarmos isso, teremos um blog. Mas não temos nada nos blogs, então não veremos nada. Bom espaço reservado por enquanto, é apenas ter o hash ou a libra, e ainda temos a formatação de um link e o comportamento de um link, ele simplesmente não vai a lugar nenhum. Agora a última coisa foi um botão. Eu acho que um botão funciona semelhante, mas ele vem com certos atributos ou propriedades estilísticas que apenas vêm padrão. Podemos definir um botão como este. Então, entre as tags de abertura e fechamento, podemos colocar no texto que vai aparecer no botão. Podemos dizer que é um botão. Eu, vou salvar isso, voltar, e você pode ver aqui, isso é um botão. Podemos conseguir um visual semelhante, estilo, uma tag de link. Mas um botão só te dá um botão direto para fora do portão. Se você quiser apenas colocar para fora um botão, ele pode ser atribuir algum JavaScript para ele. Você pode tê-lo para que quando você clicar neste “Botão”, vamos demonstrar isso com uma propriedade extra chamada on-click. Podemos apenas fazer o alerta básico, Button clicou. Não se preocupe muito com isso. Isso é tudo JavaScript que não estamos cobrindo neste curso. Mas se eu clicar sobre isso agora, a página diz botão clicado. É assim que podemos ter alguma interação com botões. Mas essencialmente, muitas vezes eu vou encontrar-me estilizando um link tag para torná-lo mais parecido com um botão. Você pode obter uma aparência semelhante e um comportamento semelhante de um botão, como você pode de uma tag de link. Aí está, os blocos de construção do HTML básico. Nós temos uma imagem, nós temos um link que realmente não liga a lugar nenhum, e nós apenas temos um botão aleatório que nos dará um alerta. Como você notou, nós entramos em atributos um pouco neste vídeo. Expandimos apenas os nomes das tags, apenas o conteúdo, mas agora também atribuímos atributos. No próximo vídeo, vamos mergulhar mais em atributos para que possamos entender que mais atributos são muito importantes em HTML. Vejo você no próximo vídeo. 7. Atributos HTML: Neste breve vídeo, eu só queria falar um pouco mais sobre atributos. Como você viu no último vídeo, nós usamos alguns deles, mas eu só queria obter um pouco mais teórico aqui, para que você entenda melhor os atributos e nós possamos seguir em frente e usá-los com mais frequência sem que haja nenhum confusão. Se voltarmos para W3Schools e clicarmos no item de menu para atributos, aqui estão alguns realmente comuns. O atributo href que acabamos de usar. Nós damos o endereço de link de uma tag com href. Mais uma vez, você verá esse formato continuar. Temos o nome do atributo, temos o sinal de igual para atribuição, e então temos um pedaço de texto entre aspas duplas ou aspas simples. vez, fizemos src no último vídeo, para que possamos dar uma tag de imagem, o endereço real da imagem em que queremos exibir. Podemos definir largura e altura. Outro atributo importante é a tag alt. A tag alt é um atributo que especifica texto alternativo a ser usado quando uma imagem não pode ser exibida. É basicamente uma maneira de descrever a imagem porque talvez o título desta imagem não seja tão descritivo ou não se sabe realmente o que é a imagem, especialmente quando alguém está ouvindo uma página web ou seja, uma pessoa cega. Existem certos leitores de tela que podem realmente ler imagens, mas somente se você definir uma tag alt. Se você tem uma foto de uma garota com uma jaqueta, você deve colocar um atributo alt lá para compartilhar com o leitor de tela o que a imagem realmente é. A outra coisa a notar sobre alt é que é uma boa idéia para fins SEO. Para que seu site apareça no Google com mais regularidade, para ter uma tag alt porque então você está dando mais informações ao Google para descobrir se seu artigo é relevante. Se você está escrevendo um artigo sobre meninas vestindo roupas diferentes e você tinha cada uma de suas etiquetas de imagem com uma menina com um casaco, menina com um vestido, assim por diante, assim por diante, você está mostrando ao Google que essas imagens são realmente relevantes para o conteúdo da sua página. Nós descemos e vemos outro atributo realmente importante, e isso está na fronteira com CSS aqui, é o atributo style. Não precisamos criar um documento CSS separado para definir estilos em um elemento. Podemos ir direto para um elemento, então eu vou te mostrar aqui e podemos definir um estilo. Mesma convenção, estilo é igual a citações abertas e fechadas. Podemos colocar cor na ortografia americana. Digamos verde. Você coloca o ponto-e-vírgula lá para dizer que este é o fim desse estilo e nós clicamos em “Salvar”, voltar para aqui e podemos ver que esse parágrafo é verde e podemos vê-lo acontecendo em nossas ferramentas de desenvolvedor. Esse é realmente importante, vamos nos aprofundar mais em vídeos posteriores. Atributo de título, podemos adicionar a p tags para exibir uma dica de ferramenta. Essa é uma pequena característica legal. Nunca realmente usado que, embora, e temos algumas recomendações aqui de W3Schools que eu acho que são muito boas recomendações. Ele não requer nomes de atributos minúsculos, mas eles recomendam que você os use. É bom ter uma convenção. Poderíamos fazer estilo assim, mas não há necessidade. Basta manter as coisas limpas e tê-lo como uma palavra minúscula. Também é importante que você certifique-se de usar aspas. Aparentemente, você pode contornar isso. Aparentemente, HTML5 não requer aspas mas ainda é uma boa idéia tê-las e se há um espaço entre como neste exemplo, isso vai quebrar porque ele não sabe onde o atributo e sua está terminando. Se você colocar um espaço lá, isso pode ser um novo atributo. Nós não sabemos. Sempre use aspas. Mas não precisamos fazer aspas duplas, podemos fazer aspas simples também. Poderíamos entrar aqui, por exemplo, e em vez de aspas duplas, colocar uma aspas, salvar isso, voltar para a página, obtemos o mesmo resultado. Isso não importa de qualquer maneira podemos usar aspas simples ou aspas duplas. Se fôssemos fazer este exemplo aqui e colocar um título em um dos p, poderíamos, vamos ver. Vamos entrar no título aqui e dizer que este é o segundo parágrafo chamado, e então colocamos em outras aspas duplas, segundo parágrafo. Veja como quebramos agora. Temos essas aspas duplas para iniciar e terminar o valor do atributo. Como você pode ver a partir da coloração aqui, parece que para o editor de código e o navegador que nós terminamos essa string. Não sei o que vai acontecer. Se atualizarmos a página e passarmos para o nosso segundo parágrafo, veremos que termina depois chamado porque colocamos uma nova aspas. Se olharmos para o elemento em nossas ferramentas de desenvolvedor, podemos ver que o segundo e parágrafo surgiram e eles estão em uma cor diferente e é apenas uma bagunça. O que podemos fazer para contornar isso é simplesmente alterando o tipo de citações. Podemos usar aspas simples agora em vez e, em seguida, podemos pressionar “Salvar” e, em seguida, quando passamos o mouse sobre, podemos ter parte do texto que aparece entre aspas. Mas se você queria aspas duplas, por exemplo, nós só precisamos mudar o posicionamento destes. Poderíamos ter, começando com aspas simples e terminando com aspas simples, e então este texto em particular tem aspas duplas em torno dele. Se passarmos por cima, podemos ver isso. É importante que, se você quiser aspas dentro do texto real em seu atributo, você precisa usar o oposto do que você usa, o alternativo. Se você abriu com aspas duplas, você vai precisar usar aspas simples dentro, e se você abriu com aspas simples, você vai ter que fazer vice-versa. É uma palavra final sobre atributos. Se você quiser ficar mais nerd e nerd sobre isso, definitivamente confira esta página em w3schools.com. Mas essas são basicamente as coisas que eu queria mencionar sobre atributos. Agora sinto que podemos seguir em frente e usar atributos em todo o nosso projeto. No próximo vídeo, vamos cobrir três outros elementos importantes em HTML. Vamos cobrir mesas, listas e blocos. Vejo-te no próximo. 8. Tabelas, listas e blocos: Neste vídeo, vamos cobrir tabelas, listas e blocos. Novamente, um ótimo lugar para começar é em w3schools.com Eles têm uma boa referência para listas, tabelas e blocos aqui. Começando com listas, existem dois tipos de listas. Basicamente dentro de HTML, uma lista não ordenada, que é como pontos, e uma lista ordenada que é pontos que têm uma ordem, então em 1, 2, 3, 4. Você inicia essas listas de duas maneiras diferentes. UL, para uma lista desordenada assim como este e ol para uma lista ordenada. Eu acho que se eu rolar para baixo aqui, lá estamos nós, ol. Isso marca a abertura de uma lista. Isso marca o fechamento de uma lista. Em seguida, no meio você vai colocar seus itens de lista, que usa as tags li. Vamos fazer isso agora mesmo em nosso projeto. Vamos voltar à nossa página, navegar até o nosso editor de código. Em vez de termos um parágrafo aqui, podemos ter uma lista desordenada. Eu vou abrir uma lista desordenada e depois fechá-la imediatamente para eu não esquecer e então eu vou para dentro disso, colocar em alguns itens da lista. Digamos integridade, digamos honestidade. Estou inventando coisas aqui, empoderamento. Se eu pressionar Salvar sobre isso, voltar para o documento, você pode ver aqui que temos uma lista desordenada. Para mudar isso para uma lista ordenada tudo o que eu preciso fazer é ir para o u e ul e mudar isso para o para lista ordenada. Eu posso voltar e agora ele terá um número incrementado para cada um deles. Agora você pode levar listas ainda mais por ter tipos. Você pode descrevê-los de maneiras diferentes. Você pode fazer uma lista de descrição. Honestamente, eu quase nunca faço essas coisas avançadas com listas. Muitas vezes, é apenas uma lista desordenada ou uma lista ordenada e, em seguida, alguns pontos. Novamente, você pode aninhar dentro deles também. Se você quiser ter um conjunto de pontos dentro de um ponto ponto, você pode fazer isso também. Posso colocar uma lista desordenada aqui e colocar um ponto sub-ponto, integridade para os clientes, integridade para as nossas coisas. Guarde isso. Volte para aqui. Agora você pode ver que é um subponto desse ponto. Você pode aninhar listas ordenadas e listas não ordenadas. Eu posso mudar isso para ordenado e agora você pode ver que você pode trocar os dois. Se você quiser obter mais detalhes com listas. Definitivamente confira isso na referência. Mas acho que isso cobre listas de uma forma básica. Não tenho que fazer coisas avançadas para ser honesto. Isso cobre muito do que você precisa fazer com listas. O próximo que eu disse são mesas. Vou clicar em tabelas HTML aqui e você pode definir uma tabela básica com a tag tabela. Então você pode definir uma linha de tr. Você pode fazer a primeira linha um th, que significa que está lá linha de cabeçalho, e, em seguida, cada célula será definida com um td. Vamos ver o que faz sentido aqui, pode ser colocado em uma linha do tempo aqui usando a tabela. Voltarei para aqui e criarei uma mesa. Para a primeira linha, ele vai ser uma linha de cabeçalho então, em vez de células de tabela regulares como aqui com td, nós vamos dar a primeira linha th. Vou ligar para este dia de Janeiro de 2016. Então eu tenho sido outro. Novamente, estou inventando tudo isso para fins de demonstração. Vamos guardar isso e ver o que temos até agora. Está bem. Neste momento não temos borda da tabela, então você não verá o contorno da tabela, mas chegaremos a isso em apenas um segundo. Podemos adicionar em uma nova linha e colocar em algumas células de tabela agora, que porque não é a primeira linha, porque não é um cabeçalho, vai apenas usar td. Então começamos a nossa empresa. Voltando para trás, agora você pode ver que ele está alinhado em colunas, mas você não pode realmente ver o contorno da tabela. Se você quiser fazer isso, podemos adicionar um atributo à tabela para borda. Vamos dar uma olhada em como fazemos isso. Se eu fizer fronteira. Eu posso ver que eu posso aplicar alguns estilos, mas nós não vamos fazer isso ainda porque nós não chegamos a essa parte do curso ainda. Então uma maneira antiga de dar a nossa mesa uma fronteira é entrando aqui e digitando a fronteira 1. Se guardarmos isso, volte aqui. Agora temos essas antigas fronteiras da escola só para ver que realmente temos uma mesa. Pense que a maneira moderna de fazer isso hoje em dia é formatar uma tabela usando CSS. Mas ainda não chegamos ao CSS, então vou guardar isso para um pouco mais tarde. Mas aqui você pode ver que temos uma mesa. Agora, se quiséssemos adicionar outra linha, poderíamos facilmente fazê-lo adicionando outra tag tr e, em seguida, colocando em células da tabela. Talvez possamos colocar alguns comentários sobre esses diferentes pontos da linha do tempo. Salve esse movimento e você pode ver que adicionamos uma nova linha. Agora, se você quiser que essas linhas e colunas se expandam sobre várias colunas e linhas, vamos apenas mostrar que agora eu vou excluir uma das células da tabela, então nós temos apenas uma aqui e ver o que isso faz. Você tem essa mesa toda, mas podemos ver que está faltando uma cela aqui. O que acontece se quisermos que esta célula se estenda por toda a mesa? Bem, podemos fazer isso dando um atributo a esta célula de tabela chamada colspan. Eu vou dizer 2 porque eu quero que ele abranja duas colunas em vez de apenas uma e lá vai você. Podemos fazer todo o alinhamento e formatação dentro dessas tabelas, mas vamos chegar a isso em CSS essencialmente se você quiser fazer a mesma coisa com linhas. Talvez adicionemos outro aqui, isso provavelmente não fará sentido, mas vou demonstrar de qualquer maneira. Podemos colocar na frente desta fileira de três. Vou pressionar Save nisso. Você pode ver que temos uma coluna que atravessa três linhas. Isso é essencialmente tabelas. Isso não faz muito sentido, então eu vou me livrar dessas linhas estendidas agora. Vou me livrar dessa terceira fila porque não acrescenta nada. Lá vamos nós. Temos um pouco de uma história que poderíamos entrar, criar outra linha, outra coluna colocando em uma nova célula em cada uma dessas linhas. Lá vai você, há mesas. Uma coisa que eu vou dizer sobre tabelas é não confiar nelas para estruturar seu documento HTML. Tabelas devem ser usadas apenas para tabelas. Se eu quisesse apresentar cronograma ou talvez um cronograma ou algo que precisasse de uma mesa. Eu usaria uma tabela, mas para ter colunas em uma página e ter um design responsivo. As mesas não são as melhores e para isso o que é ótimo são blocos. Vou voltar para w3schools.com e clicar em blocos HTML. O elemento de nível de bloco mais comum que você verá em HTML é, de longe, a tag div. Você verá divs absolutamente em todos os lugares e uma div por padrão sempre começará em uma nova linha e ocupará toda a largura disponível. Em vez de falar sobre isso, vou jogá-lo agora e mostrar-lhe o que é um bom lugar para colocá-lo. Nosso projeto está um pouco confuso no momento, mas o que eu vou fazer é colocar em outra linha horizontal, colocar em outro título e vamos apenas dizer Nossos Serviços. Eu vou colocar em nossa tag div e dentro da tag div, eu vou ter um pouco de texto. Deixe-me ir a Lorem Ipsum. Este é um site onde você pode obter Lorem Ipsum. É apenas um texto falso. Eu vou colocar isso lá e então eu vou criar outro div embaixo dele e colocar aquele Lorem Ipsum novamente. Eu vou salvar isso, vá até aqui e você verá que ele entra em uma nova linha. Mas ao contrário dos parágrafos, não há espaçamento entre eles. Neste momento, acho que não faz sentido por que você teria um div. Mas à medida que avançamos para estilizar e estruturar nosso documento com CSS, você verá como uma div é flexível. Por exemplo, se eu só quisesse modificar isso agora mesmo, eu posso ver esta div aqui. Posso restringir a largura da div. Vou restringi-la a 100 pixels, e agora só aparecerá com uma largura de 100 pixels. O que eu posso fazer é mudar a exibição para exibição em linha. Mais uma vez, vamos falar sobre isso mais tarde. Mas se eu disse que para os dois divs, largura, 100px e display inline-bloco. Agora você verá que eles aparecem um ao lado do outro. Esse é apenas um dos exemplos de como podemos modificar de qualquer maneira que queremos o conteúdo dentro de uma div. Mas novamente, eu estou ficando à frente de mim mesmo ou precisamos saber por enquanto, é que divs são bons blocos de construção de HTML e você vai vê-los muito quando você está desenvolvendo HTML e CSS. Eu tenho um bloco elementos de nível em HTML incluem estes. Então é claro que você tem elementos inline. Estes não iniciam uma nova linha e só ocupam a largura necessária. Um dos mais comuns que você verá é uma extensão. Uma extensão ajuda você a modificar apenas o que está dentro. Ele não cria nenhum novo preenchimento ou espaçamento. Mais uma vez, é melhor mostrar o que quero dizer quando digo isto. Se fôssemos voltar ao nosso documento e eu fosse colocar um espaço antes do manequim e fechar o espaço depois. Isso me dá controle sobre essa palavra manequim. Eu posso ir estilo e eu posso adicionar alguns estilos a ele. Eu poderia fazer o tamanho da fonte muito maior do que tudo o resto naquele parágrafo. Eu posso torná-lo tamanho de fonte 50% maior e agora você pode ver que a palavra é 50% maior do que tudo o resto nesta div. Eu posso usar isso para outra formatação. Posso ousar partes diferentes. Eu posso mirar partes diferentes, colocar uma aula sobre elas. Sempre que você quiser segmentar ou uma mudança, apenas uma palavra ou uma frase, span é uma boa opção. Novamente, se você se referir ao documento e w3schools.com, há um monte de boas informações lá. Como diz aqui, o elemento div é frequentemente usado como um recipiente para outros elementos HTML. Ele não tem atributos necessários, mas muitas vezes você verá que haverá um estilo, uma classe ou um ID. Estes métodos para ser capaz de segmentar e estilizar o conteúdo. Você pode quase ver div como um grupo de conteúdo, mas você também pode fazer o que quiser com ele. É basicamente um bloco de HTML que você pode segmentar individualmente e transformá-lo em colunas, transformá-lo em um quadrado, transformá-lo em qualquer coisa que você quiser. Muito expansível. Muita coisa que você pode fazer com div e eu acho que em vez de falar mais sobre isso, eu acho que você vai começar a entender mais sobre por que div é poderoso à medida que passamos. Especialmente quando entrarmos na seção CSS, estaremos estilizando um monte de divs. Por enquanto, isso é tudo que você precisa saber sobre divs. Vamos nos aprofundar nisso à medida que formos. No próximo vídeo, vamos cobrir como elementos de layout HTML. Estou ansioso para vê-lo no próximo. 9. Elementos do layout: Tudo bem, então neste pequeno vídeo, eu queria rever brevemente os elementos semânticos HTML5. Se formos para a página layouts HTML em w3schools.com, podemos rolar para baixo aqui e ver que HTML5 oferece novos elementos semânticos que definem diferentes partes da página web. Só para demonstrar isso, há um exemplo aqui. Em vez de rotular as diferentes seções como divs ou outros elementos de nível de bloco, eles estão rotulando-o com essas novas tags, cabeçalho, nav, seção, artigo, lado, rodapé, detalhes, resumo. Basicamente, a única coisa que realmente está acontecendo que é diferente aqui é o nome, então estes funcionam praticamente da mesma forma que um div, é apenas mais fácil de entender quando você cria um documento HTML que você será capaz entender a estrutura e ver que esta tag é um cabeçalho, esta tag é uma seção, esta tag é um rodapé. Só para trazer este tempo, o que eu quero fazer é criar um novo arquivo, então eu vou voltar para o meu Editor de Código, onde eu tenho o index.html aberto. Vou criar um novo arquivo, e vou salvá-lo imediatamente para que saibamos que estamos trabalhando com um documento HTML. Eu estou indo para ir para o nosso diretório de projeto e eu vou chamar este layout.html. Lembre-se a primeira parte desse layout, não é muito importante. Você pode rotular o que quiser, mas você precisa da extensão HTML ponto para que seu programa saiba que é HTML. O que eu vou fazer é colocar essas janelas lado a lado. Na verdade, antes de fazer isso, vou “Clique com o botão direito do mouse” neste exemplo e vou apenas copiar o exemplo deles. Estou usando o inspetor aqui no Google Chrome. É uma função semelhante, tenho certeza no Safari e Firefox, mas basicamente, você não precisa necessariamente seguir por aqui. Eu só vou copiar o que está aqui e colocá-lo em nosso próprio documento. O que eu vou fazer é encontrar aquele elemento que captura tudo isso, e eu posso ver isso pelo que ele está destacando. Vamos para “Clique com o botão direito”, clique em “Editar como HTML”. Pressione “Command A” em um mapa para copiar todo esse HTML, guia através do meu layout.html, e agora temos todo esse código. Poucas coisas que eu vou me livrar são as aulas, qualquer classe porque isso vai ser puxar em uma folha de estilo que nós não temos. Isso só está no site da W3School. Temos essas aulas também, mas podemos deixá-las por um segundo. O que eu quero mostrar a vocês neste exemplo é que se quisermos abrir uma nova guia aqui, e puxarmos o layout.html, ele não se parece nada com isso. Este é o ponto que eu quero passar aqui é que apenas usando esses elementos semânticos, nós não estamos dando o estilo da página. Ainda precisamos usar CSS para obter esse layout. Mas o que estamos fazendo é quando lemos o código, podemos ver, “Oh, isso é um cabeçalho, isso é uma seção, isso é um artigo, isso é um rodapé.” Então podemos também, em vez de alvo com base na classe, que é o que temos aqui, podemos segmentar apenas no nome do elemento. Mas novamente, eu estou indo um pouco para CSS, que nós não mergulhamos fundo ainda. Você começará a ver isso assim que entrarmos na seção CSS. Mas neste vídeo, eu só queria compartilhar com vocês esses elementos semânticos porque você pode vê-los muitas vezes em HTML, e apenas para que você saiba que eles são praticamente a mesma coisa que um elemento de nível de bloco como div, eles são apenas um pouco mais descritivos. No próximo vídeo vamos passar para formulários HTML. Formulários são algo, você provavelmente vai se deparar com muitos sites de desenvolvimento também. Então, vejo-te no próximo vídeo. 10. Formulários em HTML: Tudo bem. Neste vídeo sobre formulários HTML, vamos mais uma vez uma referência w3schools.com. Se você rolar para baixo neste menu aqui você encontrará formulários HTML. Um formulário para aqueles de vocês que não sabem, eu acho que vocês deveriam se deparar com eles muito online. Deve ser bastante óbvio, mas basicamente é só isso onde você tem entrada e então você tem um botão para enviar esses dados em algum lugar e então você obtém um certo resultado. Muito vago eu sei, mas uma vez que você envia esses dados para algum lugar, você pode interpretá-los como quiser. Mas como estamos falando apenas de HTML e CSS neste curso particular. Eu só vou te mostrar como criar um formulário no front-end. Este recurso em W3Schools é muito bom em explicá-lo. Primeiro de tudo, você vai precisar de um elemento de forma e , em seguida, dentro que você vai colocar em várias entradas. Em seguida, o tipo de entrada é determinado por este atributo chamado tipo. Tiveste alguns exemplos aqui em baixo. Você pode fazer botões de rádio. Você pode fazer um botão de envio que irá realmente enviar o seu formulário e assim o que enviar o seu formulário realmente faz é que ele leva os dados e envia-lo para uma determinada página ou endereço particular. Isso é determinado pela ação no formulário. Nós também podemos definir outros atributos que vamos entrar em apenas um segundo. Fica um pouco técnico aqui com GET e post. Estas são duas formas de enviar dados. Isso está ficando um pouco mais nas coisas de back-end, mas você não deve se preocupar muito com isso. Isso é mais sobre como configurar um formulário em HTML. O que eu vou fazer é realmente construir um formulário em nosso pequeno site de exemplo. Esta é a página Sobre Nós e é bastante confuso no momento. Eu vou me livrar deste layout.html e eu vou fazer é criar uma página Fale Conosco. Eu vou pressionar “Novo arquivo” e então eu vou salvá-lo imediatamente para que eu sei que é um arquivo HTML e então eu vou para os projetos, vamos chamá-lo de contact.html. Agora o que eu posso fazer é apenas configurar, na verdade eu vou copiar algumas dessas coisas daqui, eu vou copiar esta primeira parte. Vou copiar esta última parte. Então eu só fiz isso para economizar algum tempo, eu sabia que ia precisar de um título e um título de alto nível. Vou copiar isso. O que eu vou fazer é arrastá-lo diretamente para dentro, abrir uma nova guia primeiro, e depois arrastá-lo diretamente para o nosso navegador para que possamos começar a trabalhar com ele. Não é mais a página Sobre Nós, então eu vou mudar isso para Fale Conosco, e então o que eu vou fazer é colocar em uma div e, em seguida, colocar em um formulário. Aqui estou eu começando um formulário e é muito simples, é apenas forma. Se eu colocar isso, tenho certeza que não veremos nada do formulário. Não há entradas reais nele ainda. O que podemos fazer é colocar algumas entradas de texto. Nós cobrimos este jogo em uma tag formulário e agora podemos colocar em texto tipo de entrada. Então o que eu vou fazer é duplicar isso três vezes, pressionar “Salvar” e voltar para a página e eu vou te mostrar o que temos. Tenho estas três caixas de texto. Não há rótulos. Não há indicação do que isto é. É muito não-descritivo, mas pelo menos podemos ver algumas coisas dentro da nossa forma. O que precisamos fazer é dar alguma formatação, dar alguns rótulos, então também nomear essas entradas para que elas não sejam apenas para a mesma coisa. O nome é muito importante porque quando enviamos os dados para a próxima página ou para o endereço, vai emparelhar o valor com o nome desse campo. Você pode realmente dizer qual valor está vindo de onde. O que vou fazer agora é dar um nome a todos esses. O primeiro, vou fazer o primeiro nome. Segundo, sobrenome. Terceiro, e-mail, e na verdade eu vou fazer mais um para mensagem. Claro, se nós apenas salvarmos isso é apenas um atributo. Na verdade, não vai aparecer na página real. O que vamos fazer é colocar um texto cru. Estou fazendo para fazer o primeiro nome, sobrenome, e-mail, endereço e sua mensagem. Agora, a outra coisa que você vai notar é que está tudo na mesma linha. Então, se nós apenas colocar esses rótulos vai ser tudo na mesma linha. Vou colocar algumas etiquetas de quebra. No futuro vamos formatar isso com CSS e será muito melhor. Mas, por enquanto, podemos usar tags de quebra para separá-las. Vamos pressionar “Salvar” e agora você tem uma forma muito básica, muito feia. Mas pelo menos temos um formulário na nossa página. Agora este formulário não vai fazer nada, é claro, nós não temos um botão para enviar nada ainda. Esse é o próximo passo importante e o que vou fazer para isso é copiar isso. Certifique-se de que está dentro das tags de formulário, tudo para o seu formulário precisa estar dentro daqueles para abrir e fechar tags de formulário. O valor aqui representa o que vai estar no botão. Se salvarmos isso, volte, ele dirá, “enviar no botão”. Podemos dizer, em vez disso, o que quisermos, talvez mande uma mensagem. Salve, mexa-se e verá que agora está mudado. O importante é que você coloca tipo enviar em vez de digitar texto obviamente. Mas além disso, você quase tem uma forma e o que eu quero dizer com isso é que você precisa de um outro atributo e que é colocar uma ação no formulário. Agora não temos back-end. Mas se tivéssemos um back-end, enviaríamos esses dados de formulário para uma página, uma página PHP ou qualquer que seja o nosso back-end. Esse back-end levará esses dados, validados e depois os colocará em um banco de dados ou iniciará o processo. Depois que o formulário é enviado, ele requer alguma programação que nós não vamos entrar neste curso. Mas em termos de HTML, isso é basicamente o que um formulário se parece. Vou dar-te um exemplo aqui. Se darmos uma ação para este formulário e isso é copiar exatamente o que eles têm aqui porque nós não temos que página em nenhum lugar. Vamos copiar isso, salvar isso. Vamos entrar em contato conosco, vamos expandir completamente, e eu vou colocar algumas coisas aqui. Sua mensagem, olá, e então eu vou pressionar “Enviar mensagem” e ver o que acontece. Você verá aqui e assim será um pouco confuso para as pessoas que são novas no desenvolvimento web. Você verá aqui que a primeira parte é action_page.php. Que se você se lembrar, nós colocamos como uma ação, e o que é feito é um ponto de interrogação e, em seguida, enviamos os pares de valor chave. Basicamente, lembre-se quando eu disse, é importante quando você nomear seus campos. Você pode ver aqui que é o nosso primeiro campo de nome porque nós o nomeamos que, e então nós temos iguais e a entrada que colocamos em. Este é o nome e, em seguida, o valor. Então nós temos um fim, e então ele vai de novo. Temos sobrenome igual a Dodd, e-mail igual a, e assim por diante. Esses são chamados de parâmetros get e, por padrão, estamos enviando uma solicitação get. Novamente, está ficando bastante técnico, mas aqui embaixo também podemos enviar um pedido de postagem. Às vezes você não quer usar uma solicitação get porque ele envia essa inflamação no URL. O que é um risco de segurança, talvez. Se você estiver enviando informações confidenciais ou pessoais que provavelmente deseja usar o método de postagem e usando o post, você poderá enviar esses dados e eles não entrarão na URL. Você também pode usar o campo definido aqui para agrupar dados relacionados em um formulário que é útil quando você deseja estilo. Você também pode usar uma tag chamada legenda que definirá uma legenda para esse conjunto de campos. Mas entraremos em formas de estilo mais tarde nesta aula. Por enquanto, temos nossa página Fale Conosco, é muito básico e feio, admito, mas pelo menos temos um formulário lá. Espero que isso traga formulários para você. No próximo vídeo, vamos passar por cima de ativos, símbolos e entidades [inaudíveis] . Te vejo então. 11. Charsets, entidades e símbolos: Neste vídeo, vamos cobrir entidades, símbolos e charset. Este provavelmente será mais um breve, porque estes não aparecem frequentemente ao desenvolver em HTML, pelo menos para mim, mas é importante saber o que são estes e como usá-los para quando você precisar deles. Usando W3Schools, vou clicar em Entidades HTML. Você verá aqui que existem alguns caracteres reservados em HTML. Agora, o que tudo isso significa? Bem, vamos dar uma olhada no nosso código aqui. Alguns desses caracteres que estamos usando, estamos usando um sinal menor que e um sinal maior que, muitas vezes, estamos usando aspas, estamos usando sinal de igual. Estes são usados para compor HTML. O problema que você pode encontrar quando você está desenvolvendo HTML é, às vezes, você só quer que o sinal menor que, maior que exibido em sua tela. Mas então é claro, quando você está colocando isso aqui, seu software e o navegador, pode interpretar como HTML, ou que você está tentando criar HTML. O menor que, maior que exemplo é provavelmente o mais comum. Como você pode ver aqui, o navegador pode misturá-los com tags. Se você quiser escrever um sinal menor que, precisamos usar uma entidade HTML. Aqui eles dizem quais você pode usar. Se voltarmos para a página Sobre Nós e talvez queiramos colocar em nosso link, duas setas para trás. Podemos colocar, acredito que precisamos colocar um ponto-e-vírgula depois disso, e então pressionamos Salvar. Agora podemos ver que temos duas flechas ou dois sinais a menos. Neste fim, no lado HTML, você tem essas entidades HTML estranhas, mas quando chega ao navegador, você pode ver que é perfeitamente o que precisamos, dois sinais a menos. Essa é uma entidade HTML comum lá. Se descermos para um espaço não-quebrável. Em HTML, se você escrever 10 espaços em seu texto, seu navegador removerá todos eles, exceto um. Para obter a separação entre palavras, vai permitir uma, mas então se você colocar em mais espaços, ele vai apenas cortá-la para baixo. Vamos mostrar-lhe um exemplo disso. Na verdade, temos o exemplo aqui. Olá, adeus. Se nos livrarmos dessa tag br, então está na mesma linha. Você pode ver que ele reduziu para apenas um espaço. Não importa quantas vezes nós espaçamos por aqui e criamos espaço em branco, ele reduz para um personagem de espaço em branco. Como contornamos isso? Podemos usar um espaço não-quebrável. Eu posso copiar esta pequena entidade HTML e em vez de ter todo esse espaço, você vai ter alguns espaços não-quebrados. Obviamente, se você quer uma tonelada de espaço em branco, isso vai ficar bem feio, mas talvez você só quisesse um pouco de espaço no meio. Colocá-lo em algumas vezes provavelmente não é grande coisa. Lá vai você. Temos algumas entidades HTML para substituir esse comportamento e dizer ao nosso navegador, hey, queremos um espaço em branco aqui não reduza para apenas um espaço. Se eu voltar para a página, ele vai nos dizer algumas outras entidades de caracteres HTML úteis. Basicamente, sempre que você está querendo colocar um desses caracteres em seu projeto e você está achando que ele simplesmente não está funcionando, você provavelmente precisa colocar em uma entidade de caracteres HTML. Eu definitivamente referenciei esta página ou outras páginas na Internet para descobrir qual é a entidade apropriada. Mas, essencialmente, os principais são o espaço não-quebrando e os símbolos que já estão em HTML, mais comumente menor e maior que. Brevemente agora vamos entrar em símbolos, e símbolos que são semelhantes no sentido que usamos esses códigos estranhos para colocar em um símbolo, mas não está em conflito com os caracteres que usamos para criar HTML. Simplificando, se quiséssemos exibir um sinal de euro, poderíamos usar uma entidade HTML. Parece que você pode usar um nome, você pode usar um número de entidade, um decimal ou uma referência hexadecimal aqui. Não há necessidade de lembrar de tudo isso. É só que se você quiser colocar em um sinal de euro ou um sinal de libra ou algum símbolo estranho, você só teria que procurar o que o número, entidade ou nome é e apenas como a exibição isso. Normalmente, estas entidades e símbolos começam com um sinal &. Se você vir um & e, em seguida, um nome, ou algum código como esse, você provavelmente está olhando para um símbolo ou uma entidade. Sim, se precisar colocar um sinal de direitos autorais ou algo assim, qualquer símbolo, procure por símbolos nessas referências. Finalmente, charset. Charset é algo que você coloca em sua meta tag. Como você pode ver quando você rola para baixo, há algumas diferenças entre diferentes conjuntos de caracteres. Às vezes você pode querer definir o conjunto de caracteres especificamente e, em seguida, descobrir qual a diferença na entidade estaria fazendo esse conjunto de caracteres. Se você olhar aqui, muitos deles são praticamente iguais. Digamos aqui em baixo, menos de sinal é a mesma coisa. sinal maior que é a mesma coisa em todos eles. Na verdade, é um pouco difícil identificar as diferenças, mas existem algumas diferenças. Basicamente, às vezes você pode precisar escolher seu conjunto de caracteres. Não é algo que você tem que fazer com frequência, mas se relaciona bem com entidades e símbolos. Charset será o conjunto de caracteres, então entidades e símbolos é o que você usaria para criar esses símbolos e caracteres em todo o seu projeto. Espero que isso tenha lhe dado alguma clareza para quando você vê algo como isso em HTML, você saberá que isso é provavelmente um símbolo ou uma entidade, e você pode procurar o que é ou tentar você mesmo e incorporá-lo em seus projetos. Isso abrange charset, entidades e símbolos. No próximo vídeo vamos terminar falando sobre o corpo HTML, e vamos cobrir alguns outros elementos que você pode querer usar em seu projeto. Vejo-te no próximo. 12. Outros elementos do corpo do HTML: Este é o vídeo final que eu vou fazer sobre a cobertura dos elementos do corpo de HTML. Nós cobrimos um monte de elementos corporais que você usaria em HTML. Pelo menos os realmente comuns como cabeçalhos, parágrafos, botões, imagens, links, tabelas. Todos estes são bastante comuns e provavelmente compõem mais da metade de quando você está indo para estar desenvolvendo HTML, claro Dibs bem, aqui em baixo e elementos de nível de bloco. Mas neste vídeo, eu só queria cobrir alguns outros que você pode encontrar. Novamente, se há algo que não tenhamos abordado, HTML é bastante expansivo, então sinta-se livre para voltar a este site ou outro site e referência. Eu não vou explicar cada elemento HTML que está disponível porque faria o curso muito grande e então eu estou apenas focando nos mais importantes aqui. Neste vídeo, eu só queria mostrar alguns outros. Um deles é HTML Iframe. Então, como você pode ver aqui, nós temos praticamente uma janela dentro da nossa página web. Se você vir esta tag, “iframe”, você pode basicamente pegar qualquer site que você quiser, colocar a URL em que campos SRC, e então certamente você tem um site dentro do seu site. Não é tão comum porque não há muita razão para colocar um site dentro de um site, mas você ainda pode vê-lo. É uma coisa da velha escola, eu acho. Outra coisa que é novo em HTML5 é a mídia. Então você já viu imagens incorporadas, mas agora você pode incorporar vídeo. Antes do HTML5 sair, muitos navegadores estavam contando com flash, mas agora se você incorporar um vídeo do YouTube e cavar fundo o suficiente nele, você verá que ele está usando vídeo HTML5. Você pode ver uma tag que diz vídeo e você pode definir a largura e a altura e os controles, colocando esses atributos para obter a origem. muito legais. É a nova versão da web, está suportando todos os tipos de mídia e você também pode incorporar áudio também. Aqui você pode ver uma tag de áudio, funciona muito semelhante à tag de vídeo e, em seguida, se você quiser ir para baixo para esta referência no YouTube, você pode ver que você pode reproduzir um vídeo do YouTube com um iFrame. Algumas coisas avançadas que você tem em HTML, você pode desenhar gráficos em sua tela usando HTML, você pode geolocalizar, para que você possa determinar a localização da pessoa usando seu site com base em seu navegador. Você pode arrastar e soltar elementos, armazenamento web, web workers e isso vai um pouco para o lado mais complicado do HTML, e então você tem toda essa referência aqui. Eu só queria deixá-lo lá fora com corpo HTML. Novamente, há muita profundidade com você ir para isso e se você vir uma tag que você não entende, se você vê algo como isso e você não sabe o que é um Iframe, basta procurá-lo, basta ir para o Google e ser como Iframe, por exemplo elemento HTML, e então você vai começar a obter todas essas informações. No próximo vídeo, eu queria cobrir a outra seção de HTML, que é a seção principal. Vejo-te nessa. 13. Cabeçalho HTML: Neste vídeo, vamos cobrir a seção principal do nosso documento HTML. Novamente, vamos fazer referência ao W3schools.com porque eles têm um artigo muito bom sobre os diferentes elementos que podemos incluir em uma seção de cabeça. É apenas acessível através deste menu aqui, você pode clicar na cabeça HTML e então você pode conferir os diferentes elementos que podemos colocar em nossa seção de cabeça. Claro que há tittle que já incluímos em nosso projeto aqui. Se formos remover o título completamente e clicar em “Salvar” sobre isso, volte para essa página, veja o que acontece com o título aqui. O que acontece é que ele muda para o nome do arquivo que não vai ser o nome mais apropriado na maioria das vezes. Ele vai ter a extensão nele, índice HTML não é um título ou título muito amigável para a página. Vou pressionar “Salvar” para levar de volta para “Sobre Nós”. A próxima seção é a tag style e, à medida que nos movemos para CSS, estaremos usando a tag style para incorporar estilo em uma determinada página da web, mas por enquanto vou mostrar como podemos usá-lo imediatamente. Vou copiar este exemplo aqui, passar para a nossa página, mas depois ir para o nosso editor de código. Eu vou abrir um pouco de espaço aqui em nossa seção de cabeça e eu vou colocar em nosso estilo. Recuado, pressione “Salvar”, atualize e podemos ver que nosso cabeçalho de nível superior é vermelho e, o que mais ele está definindo? O cabeçalho de nível superior é vermelho, nossa cor de fundo é azul pó e nossa cor de parágrafo é azul. Isso é útil quando você tem apenas uma página à qual deseja aplicar estilos, mas digamos, por exemplo, que você tem um site com várias páginas que você vai querer colocar seus estilos em um arquivo separado que é referenciado pelas páginas que precisam dele. Na verdade, se olharmos para o próximo exemplo neste documento, podemos ver o elemento link que é exatamente o que eu acabei de descrever. Ele está puxando um documento externo com seus estilos em seu projeto. Vamos fazer isso na seção sobre CSS, então eu quero criar um arquivo inteiro agora e mostrar-lhe isso como um exemplo. Mas basicamente só para ver o que parece em vez de ter todos esses estilos, você teria apenas um link para uma folha de estilo externa e importaria basicamente todos esses estilos. Eu vou me livrar de ambos para aqueles, o próximo é meta. A meta descrição é usada principalmente por motores de busca, é usada por navegadores, bem como sobre como exibir conteúdo e outros serviços web, mas a maior razão para usar meta palavras-chave, descrições e títulos é para os motores de busca. Porque os motores de busca, se você digitar algo aleatório no Google como, digamos, curso HTML, o que surge aqui nesses resultados é determinado pela sua meta informação então SEO é muito importante e você quer ter isso otimizado. Como você pode ver aqui, podemos colocar em uma descrição meta, você pode colocar em algumas palavras-chave que eu ouvi não é muito relevante nos dias de hoje e idade com SEO porque o Google é muito mais sofisticado do que apenas dar-lhe palavras-chave, mas você pode definir o autor e você pode definir coisas aleatórias como atualizar a página a cada 30 segundos Eu não tenho certeza porque você gostaria de fazer isso, mas isso é uma opção também. Um bom exemplo aqui é dar a uma página alguma descrição, palavras-chave e autor. Outra coisa que você pode fazer é definir a janela de exibição. HTML 5 introduziu um novo método para permitir que os web designers assumissem o controle sobre a viewport através da meta tag. Basicamente o que isso significa é que se você começar a criar este design responsivo móvel em qualquer uma dessas páginas, ele pode não funcionar sem colocar nesta pequena tag. Este é apenas um pouco de um pré-requisito para web design responsivo, mas vamos entrar em que quando falamos sobre design responsivo na seção CSS. A outra coisa que você pode incluir na cabeça é uma tag de script. Assim como mostramos no exemplo anterior, podemos incorporar alguns estilos, mas também podemos incorporar scripts. Em vez de fazer isso, eu posso pegar isso e isso não vai realmente funcionar porque nós não temos um elemento pelo ID da demonstração que é o que ele está tentando segmentar, mas nós podemos colocar em HTML todos os mesmos e eu acho que vamos ter provavelmente um erro de JavaScript aqui, estamos enviando uma função. Na verdade, tudo o que está fazendo é enviar uma função, mas novamente não estamos cobrindo JavaScript neste curso particular, apenas saiba que você pode incluir JavaScript da mesma forma que você incluiria folhas de estilo assim, você pode vincular um documento JavaScript externo, mas então você também pode incorporá-lo exatamente como fizemos aqui para que seus scripts sejam executados apenas nessa página. Este é algo que eu realmente não uso que muitas vezes, mas você pode especificar um elemento base e ele dá um alvo base para todos os URLs relativos na página. Você também pode ver aqui que você pode realmente omitir HTML cabeça e corpo, mas eu realmente não recomendá-lo e W3Schools não recomendá-lo tanto assim certifique-se de incluir esses elementos. Lá vai você, aqui está um pouco de um resumo. Você pode colocar em um título, link base para um documento ou recurso externo, colocar em metadados sobre esse documento, incluir alguns JavaScript e incluir algumas informações de estilo na cabeça. Isso praticamente cobre a cabeça, vamos começar a ver à medida que desenvolvemos com CSS, estaremos ligando e colocando alguns estilos aqui para que venha para sempre, mas por enquanto, título é suficiente para colocar em nossa cabeça. No próximo vídeo, vou terminar de falar sobre HTML falando sobre como podemos formatar HTML sem CSS. Isso fornecerá uma boa continuação no estilo do nosso documento com o próximo tópico e um realmente importante, CSS. Vejo você no próximo vídeo. 14. Formatação HTML: Para terminar nossa seção sobre HTML, vou cobrir a formatação HTML. A razão pela qual eu deixei isso até o fim é porque eu pensei que iria fornecer uma boa continuação em CSS e você pode começar a ver quais são as opções de formatação disponíveis em HTML, quão limitadas elas são, e quanto mais você pode conseguir usando CSS. Vamos voltar para o nosso bom amigo w3schools.com e ir para a formatação HTML. As principais coisas que você pode fazer é texto em negrito, itálico, enfatizar , torná-lo menor e fazer subscript e sobrescrito. Provavelmente os principais são ousados e itálico. Você pode ir até aqui e ver que se quisermos ousar qualquer texto, podemos usar um B, mas B é uma etiqueta antiga para usar. Muitas vezes nos dias de hoje, se você quiser ousar algo ou enfatizar algo, você usaria forte. Vamos entrar e mostrar forte em ação agora. Na nossa página “Sobre nós”, vamos deixar esse “olá” em negrito. Tudo o que temos que fazer é enrolar algumas etiquetas em torno dele e então certamente temos fortes. Coisas muito básicas. Uma vez que vamos para HTML itálico e EM, é uma coisa semelhante. Podemos usar I para itálico ou podemos usar EM para enfatizar, e novamente, acrescentou importância semântica e é mais comum no HTML moderno usar EM diferente de I. Eu praticamente nunca vejo mais eu nos dias de hoje. Eu definitivamente recomendo se você está fazendo itálico, escolha EM. Podemos embrulhar adeus em EM e então certamente temos texto em negrito e itálico. Você também pode usar pequeno para quando quiser texto menor dentro de um elemento de cabeçalho. Se temos sobre nós, e talvez quiséssemos colocar em texto menor, nossa história e valores. Só para prefaciar o que está por vir. Se eu salvar isso, você verá que o que envolvemos nas pequenas etiquetas é menor, ligeiramente menor. Novamente, se você não gosta de como isso é estilizado, nós somos capazes de segmentar tudo nessas tags. Nós somos capazes de dizer, eu quero elementos fortes para agir assim ou olhar assim. Eu quero que os elementos enfatizados EM se pareçam com isso. Quero que pequenos elementos se pareçam com isso. Isso é tudo o que podemos fazer com CSS. Se não for pequeno o suficiente para a sua falta, ainda o use porque ele lhe dará um bom direcionamento e, em seguida, seguirá na seção CSS, porque mostraremos como estilizar as coisas como quiser. É outro para Mac, que acho que nunca usei antes. Mas você pode destacar partes do texto. Vou entrar aqui e colocar uma marca ali. Coisas muito básicas. Estamos apenas colocando texto e colocando etiquetas em torno dele para dar um pouco de estilo. Há um monte de outros aqui. Eu não vou colocar todos eles em um projeto. Eles são bastante auto-explicativos. Mas sim, você pode fazer referência aqui e ver o que você pode fazer em HTML com formatação HTML. O que eu vou dizer sobre formatação HTML é que é bastante limitado e é por isso que com certeza precisamos CSS para fazer essas belas páginas web. Isso atualmente parece terrível e não podemos realmente fazer isso parecer agradável sem CSS. Mas esses elementos que você ainda verá ao longo de seu tempo olhando para HTML, porque eles definem importância semântica. Se eu fosse colocar em algum texto e, em seguida, defini-lo como forte, isso me dá um alvo para passar e na minha folha de estilo, dizer que todo o texto forte deve ter um estilo ou comportamento particular. Você vê isso na seção CSS, mas para estruturar e ser capaz de segmentar várias partes da sua página. Se você quiser algo em negrito, você ainda deve usar a formatação HTML como strong e, em seguida, se você quiser mudar esse estilo em particular, podemos fazer isso com CSS. Isso é tudo que eu queria cobrir em HTML. Uma vez que você entende tags, uma vez que você entende a diferença entre cabeça e corpo e você entende atributos, você está muito definido com HTML que cobre a maior parte do que você precisa saber de HTML. No próximo vídeo, vamos pular para CSS e começar a aprender CSS. Esse será o segundo tópico do nosso curso aqui. Vejo você no próximo vídeo. 15. Primeiros passos com CSS: Neste vídeo, vamos começar com CSS e para esta seção da turma, vamos fazer referência a W3 Schools novamente. Passando para o menu CSS agora e clicando em “Introdução”, somos levados de volta ao lugar que começamos quando introduzimos CSS pela primeira vez. Agora, para introduzir CSS em nosso projeto, eu vou mudar para o nosso editor de código. Se você vê aqui, já temos um exemplo de CSS em nosso projeto. Bem aqui, nós temos uma tag P e temos um atributo nele, estilo de código. Style é um atributo que nos permite aplicar CSS a qualquer elemento particular. Você pode ver nesta tag P particular, temos um atributo de estilo, e dentro desse atributo, temos uma regra CSS que define a cor verde. Então, se eu voltar para o documento, nós abrimos, você pode ver que o primeiro parágrafo é verde, exatamente onde colocamos aqui. Isso é chamado de estilo in-line. Mas talvez quiséssemos ter um estilo que se aplicasse a todos os “p”. Então o que eu poderia fazer aqui, se eu fosse fazer estilos inline é apenas copiar e colar isso e , em seguida, meu segundo parágrafo também seria a cor verde. Vamos ver isso. Agora, uma vez que temos muito mais parágrafos e talvez quiséssemos colocar estilos em um título também. Nos nossos divs. Pode começar a ficar bastante confuso e podemos começar a nos repetir um monte de vezes. Se tivéssemos 10 P diferentes e tivéssemos todos com estilo, cor verde. É melhor definir uma regra que todos os p têm a cor verde. É quando podemos começar a usar seletores CSS. Agora vamos entrar em sintaxe no próximo vídeo. Mas por enquanto, eu estou mostrando a segunda maneira que podemos incluir estilos em nosso projeto e nós realmente vimos isso na lição antes na cabeça HTML. Vou até a minha seção principal aqui, criar uma linha após título e abrir algumas tags de estilo. Assim que tivermos essas tags de estilo de abertura e fechamento, podemos começar a colocar um CSS puro e faremos a sintaxe no próximo vídeo. Então não se envolva com o que está acontecendo aqui. Mas em vez de ter uma cor verde aplicada a cada P usando um atributo de estilo, vou me livrar disso e colocar essa regra aqui em cima. Como eu faria isso é pressionar “P” para atingir todos os “p”. Abra alguns colchetes para definir uma regra que iria apenas para esse seletor e então eu vou colocar no mesmo estilo de antes, cor verde. Quando salvarmos isso, esperamos ver todos os parágrafos ou as tags P ser a cor verde. Aí você vê, há um segundo parágrafo aqui para “Olá, adeus”. Esse também é afetado. Então nós demos a ele um seletor e dado a isso uma regra. Vamos entrar em sintaxe no próximo vídeo. O que acontece se quisermos aplicar a cor verde a cada P? Não é apenas nesta página em particular, mas em todas as nossas páginas web em nosso site. Bem, a melhor maneira de fazer isso seria criar uma folha de estilos externa, colocar as regras na folha de estilos externa, e elas apenas vinculá-las aos nossos documentos HTML. Então, novamente, nós abordamos isso na seção HTML head, mas eu vou voltar e mostrar a vocês. Então vamos voltar para escolas W3. Vou abrir HTML em uma nova seção e descer para “HTML Head”. Nós rolamos para baixo, você pode ver, sim, podemos inserir estilos para uma única página HTML ou podemos vincular a uma folha de estilos externa e, em seguida, copiar esses estilos para todas as nossas páginas. Vou copiar esse exemplo, colocá-lo onde tínhamos nossas tags de estilo e vamos falar sobre o que está acontecendo aqui. Então essa tag de link é uma tag de fechamento automático, não precisamos colocar uma tag de fechamento no final. Temos dois atributos nele. O primeiro é REL, e define que tipo de arquivo é. É uma folha de estilo. Tudo o que você tem a fazer é apenas chamá-lo de uma folha de estilo no atributo REL, em seguida, o segundo atributo define onde a folha de estilo real está localizada. Eu quero chamar meu style.css, não meu style.css, e eu vou salvar isso. Vamos voltar à nossa página. Você não notaria nada diferente além dos estilos que acabamos de remover. Ele não vai explodir sua página web ou qualquer coisa, mas se eu entrar no meu console, você pode ver que ele está dizendo que há arquivo era não encontrado e isso é porque nós realmente não criamos o arquivo ainda. Então o que eu vou fazer, é entrar em “Atom”, criar um novo arquivo, e salvar isso imediatamente como style.css. Então vamos em style.css. mesma regra se aplica aqui com HTML. Nós definitivamente precisamos do pote HTML dot, mas para a primeira parte podemos essencialmente chamá-lo do que você gosta. Vou clicar em “Salvar” nisso e agora se voltarmos e recarregar a página, e então eu verificar meu console novamente, não há erros. Mas é claro que não há nada a passar porque ainda não estabelecemos regras. Então eu vou definir a mesma regra que tínhamos antes, cor P verde. Vamos voltar. [ inaudível], todos os parágrafos agora estão verdes, porque nós vinculamos essa folha de estilos externa a este projeto. Podemos fazer referência a esta folha de estilo, que é uma folha de estilo em todas as nossas páginas web do nosso projeto. Se quiséssemos entrar em contato aqui, poderíamos colocar exatamente o mesmo link e não precisamos reescrever nossos estilos todas as vezes. Então lá vai você. Isso abrange as três maneiras de colocar CSS em um documento. Podemos fazê-lo em linha através de uma tag estilo como mostramos antes. Assim, se quisermos apenas segmentar um estilo que não faça sentido para criar uma regra, podemos criar uma tag de estilo em uma cabeça aqui, e apenas definir todos os P com a cor de verde. Ou podemos simplesmente nos livrar disso e colocar todos esses estilos em uma folha de estilos, que é a maneira mais limpa de fazer isso com mais frequência, especialmente quando seu projeto se torna maior, você vai reutilizar estilos muito. Definitivamente é uma boa idéia ter uma folha de estilo e a partir de agora vamos estar focando em colocar nossos estilos em suas próprias folhas de estilo. No próximo vídeo vamos entrar em sintaxe. Como nós realmente escrevemos todas essas regras e como isso funciona? Sim. Vejo você no próximo vídeo. 16. Sintaxe e selecionadores básicos: Então, no último vídeo, incluímos CSS em nosso projeto e começamos com nossa regra de estilo individual aplicada aqui na linha na tag p, mas então definimos uma regra na seção head também e agora temos uma folha de estilo externa para trabalhar com. Então, para começar com Sintaxe, novamente, eu vou voltar para fechar esta guia e, em seguida, voltar para a página Sintaxe em w3schools. Aqui você pode ver uma representação visual agradável de um CSS. Então a primeira parte que temos é um seletor, e então temos o bloco declaração. Então, é simples no sentido de que há apenas duas partes. Temos este seletor e o bloco de declaração. Dentro do bloco de declaração temos essas diferentes opções definidas. Assim, a primeira parte é a propriedade e a segunda parte é o valor. Então, quando definimos a cor para verde, estávamos definindo a propriedade de cor para o valor de verde. Podemos separar as regras com ponto-e-vírgula aqui. Na verdade, devemos, e cada regra de um ponto e vírgula apenas por causa da completude. Isso nos salvará de quando colocarmos um novo, não esqueceremos de colocar o ponto-e-vírgula e não quebrará. Então, aqui no exemplo você pode ver isso irá definir todos os elementos p para alinhados centralmente com uma cor de texto vermelho. Então este é outro atributo que você pode usar para centralizar o texto. Você também pode alinhar à esquerda ou à direita dependendo do que você alterar esse valor para. Mas você pode ver aqui com este seletor, é apenas p, que significa que todos os elementos com esse nome serão alterados para cor vermelha com texto alinhado ao centro. Então a primeira parte é o seletor, é claro, e há diferentes seletores que podemos usar para encontrar ou selecionar elementos HTML com base no nome do elemento, id, classe, atributo e praticamente qualquer coisa. Assim, desde que você possa diferenciar atributos por qualquer uma dessas partes, você será capaz de segmentar elementos específicos ou grupos de elementos. Então, o primeiro é o seletor de elementos. Então, ele seleciona todos os elementos com base no nome do elemento. Temos o mesmo exemplo novamente. Estamos selecionando todas as tags p. O próximo é o seletor de id. Então isso é se quiséssemos selecionar um elemento específico. Então eu acho que a melhor maneira de mostrar isso é mergulhando direto no código. Mas como fazemos isso é com um haxixe. Então o que eu vou fazer, há duas partes nisso. Estou indo para o meu editor, vá para o meu HTML. Vamos apenas dizer que este título em particular nós queríamos fazer efeito. Então o que eu faço é dar-lhe o atributo de id. Então eu vou dar-lhe id de segundo título, digamos. Então, agora o que eu fiz foi dar a este um identificador único que podemos usar para direcioná-lo. Então, se eu voltar para style.css, eu posso usar o hash. Lembre-se hash com id e eu posso fazer segundo título e, em seguida, eu vou abrir um colchetes e que estilo deve ser aplicado aqui? Vamos ver. Nós já fizemos cores, então talvez vamos fazer sublinhado de decoração de texto. Então agora ele está dizendo qualquer coisa com o id de segundo título, devemos ser apenas um porque id deve se aplicar a apenas um elemento na página. Vamos dar-lhe um sublinhado. Então vamos voltar para a nossa página e dar uma olhada e lá vai você. Nosso cabeçalho que definimos com o id do segundo título tem a decoração de texto agora de sublinhado. Passando pelos seletores. O próximo é o seletor de classe, e o seletor de classe funciona muito semelhante ao seletor de id, exceto que este é usado para selecionar vários elementos. Então, por exemplo, se entrarmos em nosso documento aqui e talvez este div, e nós vamos ter alguns desses div-s. Queríamos dar-lhe uma certa classe, na qual vamos mudar os estilos. Então eu vou entrar e fazer isso exatamente como fizemos com a ID. Eu vou fazer aula em vez de ID, e eu vou chamar isso de div especial. Então eu vou salvar isso, ir para style.css e como podemos segmentar uma classe é em vez de usar um hash ou um sinal de libra, vamos usar um ponto. Então eu vou entrar com um ponto e dizer “div especial”. Agora, o que devemos fazer com um div especial? Vamos usar esse exemplo text-align e vamos text-align ele à direita. Então pressione “Salvar” nisso. Agora temos a regra baseada neste seletor. Nós também definimos a classe no elemento HTML real. Então, agora, quando pressionamos isso, devemos ver que o primeiro parágrafo ou este, mas primeiro div aqui, todos os textos dentro dele estão alinhados à direita. Agora, se quiséssemos fazer isso de novo, tudo o que faríamos é ter outra div com a classe de div especial. Lembre-se classes são destinados a ser colocados em vários elementos, enquanto id são apenas para um elemento na página. Então, agora, se voltarmos aqui, veremos que cada div com a classe de div especial vai ter a regra de alinhar texto direito sobre ele. Considerando que este é apenas um div e não tem classe ou div especial. Portanto, ele tem o comportamento padrão. Voltando ao documento aqui, também podemos usar uma combinação de elementos e seleção de classe. Então, como você pode ver aqui, nós temos o p e nós temos um centro de pontos. Então isso basicamente diz que se você tem um p com a classe de centro, aplique esta regra. Então você precisa ter duas coisas: você precisa ter a classe sobre este elemento que você deseja segmentar, e também tem que ser desse elemento particular. Então eu vou copiar e colar isso agora, na verdade, e demonstrar isso. Então eu copiei isso lá dentro, e agora eu vou encontrar um parágrafo. Vamos fazer o meu primeiro parágrafo e dar-lhe a classe do que era a classe novamente? Centro. Então nós damos a ele essa classe. Volte para aqui, e agora podemos ver que está vermelho e centrado. Também podemos combinar com id também. Então talvez só quiséssemos atingir o rumo dois com uma identificação de segundo título. Talvez tenhamos colocado o segundo título em outro elemento que não fosse um H2. Podemos torná-lo realmente específico e dizer que apenas h2 com um id de segundo título, o estilo será aplicado. Então eu só vou voltar aqui e colocar h2 na frente ali e vamos ver o mesmo resultado. Então, se eu salvar e atravessar, você verá o mesmo resultado se eu colocar o segundo título em algo que não era um h2. Então talvez eu coloque a segunda posição aqui em cima. que, a propósito, não é uma boa idéia porque já estamos quebrando a regra de ter apenas um id para cada elemento. Mas apenas como um exemplo, se eu voltar para aqui, você verá que a decoração de texto de sublinhado não está se aplicando a este título particular porque ele não compartilha os mesmos elementos e regra de id. Então, se tirarmos essa parte do elemento e voltarmos, você verá que ela sublinha. Então, espero que isso faça sentido. Eu vou remover este id do título um porque nós só devemos usar um id específico uma vez em um documento. Então, sim, tente ficar com ele. Se você tem um id particular que é suposto para definir um elemento, se você quiser afetar vários elementos que você define, você pode usar classe. Então, voltando para Sintaxe e seletores novamente, você também pode agrupar seletores que você não tenha que repetir a si mesmo uma e outra vez. Então, neste exemplo, você vê h1, h2 e p todos têm as mesmas regras CSS. Então o que podemos fazer é minimizar isso apenas colocando em vírgulas. Então, em vez disso, podemos fazer isso. Outra coisa é um comentário, e isso é usado para explicar código e podemos fazer isso abrindo com uma barra e depois o asterisco, e depois fechando com um asterisco e barra. Então os comentários apenas dar-lhe a capacidade anotar o seu código para tornar mais fácil de entender para alguém para lê-lo, vamos apenas colocar em um comentário arbitrário aqui, e eu vou dizer sublinhar todos os segundos títulos. Você pode ver o meu software de edição de código sabe que este é um comentário e tem desbotado. Então esses são os seletores de sintaxe básicos. Há alguns mais avançados que vamos entrar em um vídeo mais tarde. Mas essencialmente o que você tem é o seletor de elementos, você tem seletores de id, você tem classe, e você também pode combiná-los. Na verdade, você pode combinar todos os três em um. Digamos, por exemplo, que você tinha um p com o id do segundo título e a classe de div especial, você poderia escrever algo assim. Então você poderia fazer div especial, segunda posição. Mas agora você está ficando um pouco louco demais com os seletores. Não há sempre uma razão para você ter que fazer algo assim. Certo, então isso cobre a sintaxe básica. No próximo vídeo, vamos cobrir a hierarquia CSS, e isso é o que dá CSS o nome de folhas de estilo em cascata porque, como você verá no vídeo a seguir, há uma hierarquia de especificidade que determina quais regras substituir outras regras. Esta é a parte complicada do CSS e vamos mergulhar nele no próximo vídeo. 17. Hierarquia CSS: Neste vídeo, vamos cobrir a hierarquia de regras CSS. Para isso, tenho dois documentos abertos. Só vou mudar para uma nova janela. Há dois documentos sobre escolas W3 que falam sobre isso. Um é o procedimento geral e o outro é sobre especificidade. Neste procedimento, já vimos as três maneiras de inserir CSS. Fizemos estilo embutido e folha de estilo interno, e uma folha de estilo externa. Então você viu uma folha de estilo externa aqui. Você viu uma folha de estilo interna, apenas colocando uma etiqueta de estilo em sua cabeça e você viu um estilo embutido. Mas há também a questão de várias folhas de estilo. Digamos, por exemplo, que algumas propriedades foram definidas para o mesmo seletor em diferentes folhas de estilo, qual delas realmente tem precedência? Vamos dar uma olhada neste exemplo. Digamos que temos uma folha de estilo que tem uma regra para h1 de cor marinha, mas então há outra folha de estilo que tem uma regra para h1 de cor laranja. Bem, o que acontece aqui? Que cor realmente vai ser este h1? Aqui você pode ver que a resposta é o valor da última folha de estilo lido será usado. Se descermos aqui e temos uma tag de link referenciando folha de estilo externa, e então temos uma folha de estilo interna. A folha de estilo interna é definida depois, então vem depois deste link. Portanto, esse estilo substituirá todos os estilos h1 nesta folha de estilos em particular. Mas, infelizmente, não são apenas várias folhas de estilo que você precisa se preocupar, há várias maneiras de se sobrepor com CSS, e é aí que a ordem em cascata entra. Ele pergunta aqui, que estilo será usado quando há mais de um estilo especificado para elemento HTML? O que ele diz aqui é que podemos dizer que todos os estilos vão cascata em uma nova folha de estilo virtual pelas seguintes regras, onde o número um tem a maior prioridade. Se tivermos um estilo embutido, isso substituirá uma folha de estilo externa e interna. Vou demonstrar isso agora. Nós temos esta regra para todos os parágrafos são verdes, mas o que acontece se houver apenas um parágrafo que você não quer verde? Bem, nós podemos entrar e podemos ir para este parágrafo e podemos dar-lhe um estilo embutido, chamá-lo de cor preta. Agora, se eu salvar isso e abrir essa página, podemos ver que este parágrafo agora é preto. Isso é porque se colocarmos um estilo em linha, ele vai substituir a regra geral. Isso se relaciona com a especificidade. Para especificidade, vamos entrar neste artigo agora sobre escolas W3. O que é especificidade? Bem, se houver duas ou mais regras CSS conflitantes que apontam para o mesmo elemento, o navegador segue algumas regras para determinar qual delas é a mais específica e, portanto, ganha. Você pode pensar na especificidade como uma pontuação que determina quais declarações de estilo são finalmente aplicadas a um elemento. No nosso caso particular, esta é uma regra bastante geral. Estamos dizendo que todas as tags p são verdes. Isso é muito geral. Eles estão dizendo, esta tag p em particular nesta página em particular que queremos preto é altamente específica. Então, é assumido pelo seu navegador que você quer que isso seja especificamente preto e que você não quer que uma regra geral como esta para substituí-la. Suposição bem segura, eu diria. Mas a questão não é apenas com estilos embutidos, mas também com regras como essa. Então, se voltarmos ao documento e lermos mais sobre especificidade, podemos olhar para a hierarquia aqui. Estilos embutidos sempre substituirão o que está em suas regras, nas regras gerais seja sua classe ou ID. Há uma exceção a isso, que vamos entrar um pouco mais tarde neste vídeo. Mas estilos inline é o mais específico. Então temos identificação. ID é, naturalmente, um identificador exclusivo para um elemento de página em uma página específica. Então vamos para classes, atributos e pseudo-classes. Nós não entramos em segmentação através de atributos ou pseudo-classes. Mas estes são todos mais gerais do que apenas apontar para um elemento específico. Em seguida, o mais geral é segmentação por um determinado tipo de elemento HTML ou pseudo elementos. No exemplo de p, estamos direcionando todos de um elemento específico. Essa é a regra mais geral que você pode ter. Se você quiser quantificar a especificidade, você pode fazer isso também. Aqui está um pouco de um guia sobre isso. Outra regra de especificidade e é semelhante à que tivemos aqui com as várias folhas de estilo, a última regra conta. Talvez não teríamos essas regras lado a lado porque é bastante óbvio ver que elas estão direcionando a mesma coisa, mas talvez mais abaixo em uma folha de estilo grande, você tem outro seletor de segmentação h1. O que está escrito por último será aplicado e substituirá este. Outra coisa a notar é que os seletores de ID têm uma especificidade maior do que os seletores de atributo. Este aqui é um seletor de atributos e ainda não revisamos os seletores de atributos, então não espere que você entenda isso. Mas os seletores de ID, como seria de esperar, sendo o segundo nível de especificidade, têm mais de um peso do que atributos. Rolando para baixo para ver mais regras de especificidade, ele diz aqui seletores contextuais são mais específicos do que um seletor de elemento único. Digamos, por exemplo, que se você tivesse uma folha de estilos externa e uma folha de estilos interna, a folha de estilos interna está mais próxima do documento do que a externa, então isso teria precedência sobre esse estilo nessa instância. O exemplo final que dá aqui é que um seletor de classe bate fora qualquer número de elementos seletores. Como diz aqui, as classes são mais específicas do que segmentar apenas todos os elementos de um tipo específico. Digamos, por exemplo, que você tinha um h1 com a classe de introdução que assumiria a cor amarela e substituiria isso porque este é apenas um seletor de elementos. Espero que isso ajude um pouco com a especificidade. uma vez, há muito o que fazer aqui. Esta é uma das áreas mais complicadas do CSS, então eu não espero que você tenha dominado isso depois desta lição em particular. Mas você verá à medida que aprofundarmos o CSS, mais sobre por que ele é chamado de folhas de estilo em cascata, e veremos essa hierarquia trabalhando na frente de nossos olhos. Na verdade, há mais seletores que podemos usar, mas vamos cobrir os seletores avançados em um vídeo posterior. Uma coisa que vou mencionar antes de encerrarmos aqui é que podemos anular esse comportamento de especificidade. Fazemos isso usando um pouco de um código de fraude importante. Digamos que, por exemplo, com este segundo título, eu realmente quero mudá-lo para ter um sublinhado, mas talvez haja um estilo específico aqui onde diz decoração de texto. Quais são as opções disponíveis para nós? Digamos que nenhuma. Se eu clicar em “Salvar” e voltar a esta página, ela substituirá nossa regra de ID aqui de sublinhado porque é um estilo embutido. Lembre-se, inline é mais específico do que criar uma regra de ID aqui. O que acontece se estivermos em uma situação específica em que não somos capazes de alterar esse documento específico, talvez ele esteja bloqueado em HTML. Existem algumas situações em que nós realmente não temos acesso para alterar o HTML ou ele é gerado por um backend, e ele tem este estilo fixo. Bem, há uma fraude que podemos usar e não é exatamente a melhor solução, a melhor solução seria se livrar dessa tag de estilo. Mas supondo que literalmente não podemos fazer isso, um hack que podemos fazer é dar a esse estilo algo chamado importância. Vamos começar com um ponto de exclamação e, em seguida, colocar importante. Você pode ver meu editor de código sabe que esta é uma palavra-chave importante, ele está destacando que em roxo. Agora, quando eu voltar aqui, vocês verão que isso agora está sublinhado, mesmo que haja um estilo aqui. Isso é mais específico do que uma regra de ID. Mas ainda consigo fazer com que isto apareça colocando em algo importante. Agora, o importante é que você não quer usá-lo o tempo todo. Então vamos digitar no Google. Risco de usar importante. Você vai ver, mesmo se você apenas pesquisá-lo no Google, você vai descobrir por que importante é a má prática em algumas situações. Portanto, é provável que cause efeitos indesejáveis mais abaixo da linha. Se você realmente precisa usá-lo, você pode, mas ele está substituindo o comportamento usual do CSS. O desafio realmente vem quando, digamos, por exemplo, eu queria sobrescrever isso. Bem, não há oportunidade de sobrescrever isso agora porque eu coloquei importante nisso. Então, digamos, por exemplo, que temos a situação oposta de antes onde não tínhamos acesso a este arquivo HTML. Talvez tivéssemos acesso a este ficheiro HTML e não tivéssemos acesso a este ficheiro. Se alguém é colocado importante aqui, então não há como nós ignorar isso. Podemos colocar em um estilo e é super específico, mas ainda não vai bater para fora importante. Isso é, eu acho que um dos riscos de usar importante. Você vai vê-lo várias vezes se você entrar profundamente em CSS, que importante causa problemas, por isso ele só deve ser usado como um último cenário caso. Pode não fazer todo o sentido agora, mas confie em mim quando digo que quer usar essa hierarquia de especificidade primeiro. Então, se você quiser obter específico em um determinado elemento, dê-lhe um estilo embutido, segmente seu ID, e não necessariamente dar-lhe importante menos que você realmente precisa e você sente que essa é a única opção. Mas à medida que nos aprofundarmos no CSS, você aprenderá quando é importante usar o importante, e é aí que deixarei a importância por enquanto. Agora, nós cobrimos a especificidade e nós cobrimos a sintaxe. Há um conceito, conceito geral que eu quero cobrir chamado o modelo de caixa no próximo vídeo. Então vamos para todas as diferentes opções disponíveis para nós. Provavelmente nem todos eles, mas a maior parte deles, e mostrar-lhe o que você pode fazer em CSS. Eu vou vê-lo no próximo vídeo para falar sobre modelo Box. 18. O modelo da caixa: Antes de mergulhar nas várias opções de estilo diferentes, eu queria cobrir mais uma coisa, que é chamado de modelo de caixa. Então, se você quiser ir para W3Schools, e selecionar CSS o modelo de caixa, podemos começar a aprender um pouco sobre isso. Vou fechar a guia da lição anterior, e vamos olhar para o modelo da caixa. No início, como elementos HTML pode soar como algo um pouco abstrato. Mas uma maneira de pensar neles é como caixas. Em CSS, esse modelo de caixa termo é usado quando se fala sobre design e layout. O modelo de caixa CSS é essencialmente uma caixa que envolve cada elemento HTML. Consiste em margens, bordas, preenchimento e o conteúdo real. Você pode ver nesta imagem abaixo uma ilustração do modelo de caixa. O que temos nas diferentes partes é conteúdo, preenchimento, borda e margem. Novamente, acho que a melhor maneira de mostrar isso é na prática real. Temos um exemplo aqui, mas eles não mostram um exemplo HTML. Vamos entrar no nosso documento de novo. Vou fechar algumas guias aqui para limpá-lo, e aqui está uma página clara olhando ainda. Eu estou indo para ir aqui, alternar sobre o index.html, e o que eu quero fazer é apenas criar uma caixa aleatória. O que eu vou fazer é colocar em uma regra horizontal, novamente para criar uma divisão, e eu vou colocar em uma div. Então, dentro dessa div, coloque outra div, e esta div vai ser a nossa caixa. A fim de estilizar esta div em particular, eu vou dar-lhe uma classe de caixa. Quando entramos em nosso documento HTML novamente, você pode ver que a linha horizontal apareceu, mas você não pode realmente ver nada sob ele. Agora, isso é porque temos um div que é basicamente um pedaço vazio de nada basicamente. Se eu entrar no inspetor aqui e realmente olhar para o que está acontecendo. Você pode ver aqui que há o div lá definido no HTML, mas ele não tem altura. O div pai e div com a caixa de classe nele é basicamente nada agora. Agora, a maneira que podemos realmente ver o div e realmente criado em algo é ir para o nosso style.css e criar um estilo para caixa. Eu vou segmentar todos os elementos com a classe de caixa fazendo.box, e eu vou copiar os estilos do exemplo aqui. Vou dar-lhe uma largura de 300, uma borda de 25, verde sólido, estofamento de 25, e margem de 25, então vou guardar isso. Então, se entrarmos em nosso documento, podemos começar a ver esta caixa verde. Agora, o que é ótimo com o Google Chrome e eu acho que em outros navegadores é que você pode clicar com o botão direito sobre este elemento e você pode realmente ver o modelo da caixa. Aqui eu tenho uma representação real do modelo de caixa aqui. Agora você verá que a parte do conteúdo real não tem altura. Você verá 300, que é a largura que definimos, mas nenhuma altura lá. Mas você pode realmente ver que um tem alguma altura e isso é porque nós temos um monte de estofamento, um monte de borda e alguma margem. Eu só vou dar um pouco de altura também. Vou dar-lhe uma altura de 200 pixels. Poupe isso, volte. Agora temos uma caixa com uma altura também, e vocês podem ver na nossa representação visual do modelo de caixa aqui que temos 300 por 200. Podemos realmente ver uma certa parte da caixa sendo destacada quando fazemos isso. Lembre-se antes, eu vou apenas comentar isso. O que eu fiz lá é transformá-lo em um comentário, modo que ele realmente não se aplica, se alguém quer saber. Se eu voltar aqui e tentar passar o mouse sobre o conteúdo, seção do meio, nada está destacando aqui. Você vê como eu pairei sobre isso. Nada está lá porque não tem altura. Se dá a altura de volta, e agora você pode ver que ele tem uma área de conteúdo. Agora há uma camada fora dessa chamada estofamento. Agora o preenchimento é eu acho que apenas a área entre o conteúdo e a borda. Isso, se você pode ver o verde claro, eu não posso pairar sobre ambos ao mesmo tempo. Mas se você pode ver aquele verde claro aparecendo agora, essa é a área de preenchimento. Então, é claro, a borda, nós definimos a borda para um verde sólido, e dado em 25 pixels para que você possa ver claramente a borda, e isso lhe dá um extra 25. Então fora da fronteira é margem. Se eu colocasse duas dessas caixas juntas, vamos fazer isso agora mesmo. Eu tenho que fazer é copiar e colar. Agora eu tenho duas dessas caixas, agora você pode ver margem, porque se eu não tivesse margem, eu poderia realmente desligá-la aqui. As caixas se conectariam umas às outras porque não há margem entre elas. Novamente, a margem é o que está do lado de fora da fronteira. Outra coisa que posso fazer para trazer isso para casa é colocar algum conteúdo dentro de uma dessas caixas. Vou colocar a Caixa 1 e a Caixa 2. Vamos salvar isso, volte. Aqui você pode ver que temos conteúdo lá, e não é certo contra as fronteiras porque temos 25 pixels de preenchimento, que podemos ver claramente pairando ali. Também poderíamos fazer mais estilo para alinhar o texto no centro. Mas se não tivéssemos esse preenchimento, o conteúdo pressionaria contra a fronteira. Espero que o modelo de caixa esteja começando a fazer sentido para você. Se voltarmos ao conteúdo aqui, você verá apenas um aviso sobre como calcular a largura total e a altura de uma caixa. Você tem que reconhecer que não é apenas o conteúdo, é também o preenchimento, a borda, e a margem, que compõe toda a área de quanto este pedaço de conteúdo ocupa ou este elemento particular. Se nos livrássemos de tudo isso, lembre-se, é basicamente uma div vazia que só é tão grande quanto o conteúdo dentro dela. Lembre-se que não havia conteúdo nele antes, então nós realmente não vimos nada. Agora nós realmente vemos o conteúdo, mas não há nenhum modelo de caixa em torno dele. Agora mesmo, se fôssemos apenas dar-lhe uma borda de um pixel só para que possamos ver as bordas dele. Vai estender toda a largura. Não há margem entre eles, e há apenas a altura que precisa para ter o texto. Com todos esses outros atributos que aplicamos, podemos ter um div estilizado. Você verá em um vídeo posterior, podemos fazer com que eles sejam exibidos um ao lado do outro. É aí que podemos começar a ver colunas e muito mais agradável, design mais responsivo. Isso é só um pouco no modelo da caixa. Só um pouco de teoria extra que pensei em compartilhar com vocês antes de entrarmos em mais opções de estilo. Espero que isso ajude a visualizar o que realmente está acontecendo quando você cria um div ou um elemento. No próximo vídeo, vamos pular direto para algumas opções de estilo. Vamos começar com cores, fundos e opacidade. 19. Cores, fundo e opacidade: Neste vídeo, vamos começar a correr através diferentes opções que você tem para styling em CSS. Vamos começar com cores, fundos e opacidade. Se eu for para cores CSS, já definimos cores em nosso documento. Nós temos cor aqui, nós temos cor lá, nós estamos usando cor em lugares bastante aleatórios. Como você pode ver em nossos documentos, temos apenas uma incompatibilidade de cores aqui. Em todos esses exemplos, o que fizemos foi apenas usar uma palavra para definir a cor. Se estamos usando cores sólidas como preto, vermelho e verde, podemos simplesmente jogá-las e CSS saberá o que fazer. Mas, na verdade, há outras maneiras de definir cores também. Se eu descer aqui para valores de cor, se eu apenas digitar em vermelho, eu vou ter uma cor muito particular. Mas o que eu posso fazer é definir qualquer cor específica com base em valores RGB, valores hexadecimais, HSL, valores RGBA e valores HSLA. Não fique muito sobrecarregado com isso. Na maioria das vezes eu uso valores HEX. Aqui está um valor RGB, e aqui está um valor HEX. Você deve ter visto isso antes, na verdade, eles têm um hash, e então há alguns caracteres hexadecimais. Pode ser os caracteres do alfabeto romano inglês aqui, e alguns dígitos também. Podemos realmente ver isso em qualquer página web. Na verdade, podemos conferir isto nesta página web em particular. Podemos clicar com o botão direito do mouse e usar nosso Inspetor aqui se você estiver no Google Chrome, e podemos ver aqui que temos um código de cor bem aqui. Podemos realmente, no Chrome, ver o valor hexadecimal dessa cor e onde ela se encaixa no espectro de cores. Podemos clicar nisso e alterá-lo para um valor RGBA. Podemos alterar isso e alterá-lo para um valor HSLA e, em seguida, voltar para HEX. À medida que mudamos isso, podemos começar a ver tanto a mudança ali, mas também o valor hexadecimal aqui embaixo está mudando. Só vou escapar para reverter isso. Nós poderíamos facilmente colocar em vez de um valor hexadecimal, então eu vou apenas voltar para esse elemento particular novamente. Em vez de ter um valor hexadecimal, poderíamos ter apenas a palavra verde, mas então obtemos um verde genérico. Isso é basicamente a mesma coisa que este valor hexadecimal. Se você quiser uma mistura específica, você pode obter qualquer mistura usando valores hexadecimais ou HSL ou todos os outros. Eu só tenho o Controle Z e eu trouxe de volta para essa cor particular que é representada com esse valor hexadecimal. Outra coisa que você pode fazer com RGBA e HSLA, é dar alguma transparência, bem como uma cor particular. Novamente, se eu voltar a mudar a cor deste botão e eu queria torná-lo um pouco mais transparente, eu posso clicar sobre isso, converter isso para RGBA, e você verá que na propriedade final, nós temos um, que é basicamente uma opacidade de 100 por cento. Se eu fui aqui e mudei para 50%, você pode ver que está um pouco desbotada em seu fundo, que é uma cor cinza. Posso mudar isso para 0,1 para mostrar 10 por cento de opacidade ou 0,9 para mostrar 90% de opacidade. Mas sim, você pode mudar a opacidade e a cor para que você possa fazê-la desaparecer em seu plano de fundo. Isso é muito legal. Falamos sobre RGB, falamos sobre valores HEX, falamos sobre HSL. Uma coisa que eu não mencionei é que se você quiser que ele seja completamente transparente, você pode colocar em um valor zero. Essencialmente você pode colocar o que quiser nesses três primeiros valores porque ele vai ser completamente transparente de qualquer maneira. Mas então, é claro, você pode trabalhar seu caminho até 20% de opacidade, 40% exatamente como eu mostrei no exemplo. Rolando até o topo da página, há alguns lugares onde podemos colocar uma cor e não é particularmente óbvio quando olhamos para um elemento HTML e vemos a cor da palavra, qual cor está realmente afetando, e cor, na verdade, se usarmos apenas a palavra cor sem dizer cor de fundo, por exemplo, isso afetará o texto. Você pode pensar em cor como cor de texto, e você pode ver aqui hash ffff, que é basicamente branco, então poderíamos facilmente colocar em branco aqui e nós obtemos o mesmo resultado. Ao definir cor, lembre-se de que essa é a cor do texto. Mas, em seguida, também sobre esse link particular, podemos definir uma cor de fundo, e de modo que é o fundo desse link em particular será este tom de verde. Voltando para a página, podemos vê-lo agora, podemos definir a cor de fundo para qualquer elemento HTML usando esta propriedade particular, e que é fundo, cor traço. Como eu disse, a cor do texto é apenas cor. Nós não temos que dizer cor da fonte, cor do texto, apenas a palavra cor em si é a propriedade para cor do texto. A terceira cor que ainda não mostrei é a cor da borda. Há algumas maneiras de fazer isso. Você pode usar a propriedade de borda na qual você pode definir uma largura da borda, se ela é sólida ou pontilhada ou tracejada, e, em seguida, a cor dessa borda. A segunda maneira que você poderia fazer isso é usando um atributo chamado cor de traço de borda. Por exemplo, se eu quisesse ironicamente fazer a cor da borda do título, dê-lhe realmente uma borda com uma cor. Eu poderia ir aqui no estilo elemento e fazer borda cor azul. Mas é claro que ainda não há fronteira, então eu tenho que definir um, e eu vou apenas fazer um px sólido. Você pode separar a cor em um atributo diferente usando a cor do traço da borda. Mas eu também poderia, se eu apenas desativar isso e eu quiser colocar isso na mesma linha, eu poderia fazer azul logo após a palavra sólido, e lá vamos nós. Vamos cobrir a fronteira no próximo vídeo. Quando se trata de tamanho sólido e tracejado ou pontilhado, vamos falar sobre isso no próximo vídeo. Já passei muito tempo com cores. Mas finalmente, podemos afetar várias coisas sobre o fundo, não apenas a cor. Podemos dar-lhe uma imagem e também controlar a posição dessa imagem. Aqui podemos ver um exemplo de cor de fundo, mas também podemos vincular usando esta propriedade, eo valor para isso tem que seguir esta convenção de URL, colchetes abertos, abrir, aspas duplas, papel dot gif ou qualquer outra coisa o nome do arquivo é que você está fazendo referência. Assim como quando estávamos fazendo SRC, começamos com imagens. Como aqui, se quisesse que fosse uma imagem de fundo, poderíamos. Vamos fazer isso agora mesmo. Vá para a nossa caixa aqui. Dê um estilo e dê a ele uma URL de imagem de fundo, e vamos colocar no photo.jpg. Vamos tentar isso para o tamanho e ver como fica. Há a caixa e o que podemos fazer é mudar o posicionamento também, então posição x, podemos centralizá-lo. Podemos alinhá-lo à esquerda, alinhá-lo à direita porque a imagem é realmente maior que a caixa. Estamos recebendo algumas colheitas aqui que podemos posicionar também. Podemos definir o fundo para repetir, usando isso, podemos repetir no eixo y ou no eixo x. Você não vai ver nada porque já é muito maior do que a própria caixa. Mas talvez se fizéssemos esta caixa muito grande. Não vamos fazer largura, vamos fazer alturas de 1000 px. Você vai começar a ver que ele se repete em um eixo y. Se fôssemos fazer o oposto e fazê-lo com largura, poderíamos obter isso para ser 1000 pixels, e se eu fechar isso, você verá que no eixo horizontal, ele está começando a se repetir. Essa é uma maneira de colocar uma imagem de fundo em nosso documento. Novamente, se você gostaria de saber mais sobre como colocar fundos em CSS, há muitas informações aqui neste documento. Este vídeo está ficando um pouco longo, então vou deixá-lo lá. Isso é basicamente cores e fundos e em termos de opacidade, nós cobrimos aqui com o valor final de HSLA, e RGBA. Podemos definir opacidade assim. Então isso são cores e fundos. No próximo vídeo, vamos ir um pouco mais fundo em algumas das opções que abordamos no modelo de caixa. Estou falando de bordas, margens, estofos, altura e largura. Vejo você no próximo vídeo. 21. Formatação texto, fontes e ícones: Neste vídeo, vamos falar sobre fontes de formatação de texto e ícones. Para isso, só precisamos ir um passo para baixo no menu e clicar no texto CSS. A primeira propriedade com a qual já trabalhamos é a cor. Eu só vou brilhar sobre isso. Aprendemos como definir a cor usando a propriedade color. A próxima coisa é o alinhamento de texto. A propriedade align text é usada para definir o alinhamento horizontal do texto. Usei isso em um dos vídeos anteriores, se você se lembra. Na verdade, usámo-lo em duas ocasiões distintas. Eu usei para centralizar alinhar esta caixa quando ele está no bloco inline-. Eu também usei aqui em div especial para centralizar a direita. Podemos também alinhar texto justificar e o que isso faz é fazer cada linha esticada de modo que cada linha tem igual largura e que as margens esquerda e direita são retas. Você pode ter visto isso em revistas, jornais ou livros. Vou apenas demo-lo agora mesmo para ti. Se fôssemos mudar div especial para justificar, pressione Salvar e agora você verá que o texto sempre acaba bem na borda. Legal. Voltando para aqui, outra coisa é decoração de texto. Lembre-se, eu uso decoração de texto para dar um sublinhado no segundo título. Já vimos isso aqui, mas foi anulado. Só vou me livrar desse estilo que o substitui. Pressione Salvar, lá vamos nós. Há um exemplo de decoração de texto, mas sublinhar não é a única coisa que podemos fazer. Podemos colocar uma linha através dela, podemos também fazer uma linha de sobreposição. Também podemos transformar o texto. Com a propriedade text dash transform, podemos especificar letras maiúsculas e minúsculas no texto. Ele transforma tudo em maiúsculas ou minúsculas, ou vai capitalizar a primeira letra de cada palavra. Aqui embaixo, vemos recuo de texto, para que possamos recuar a primeira linha de texto em um parágrafo. Vamos demostrar isso muito rapidamente. Nas minhas regras para a tag p, vou dar-lhe um recuo de texto de 10 pixels. Pressione Salvar sobre isso, e você verá que estes são realmente parágrafos aqui em baixo. Mas verá que há um recuo aqui. Se pudéssemos colocar alguns parágrafos adequados nesses parágrafos, em vez de apenas texto aleatório. Você vai ver isso. Primeiro, o primeiro é a linha central, então vou me livrar disso. Mas você verá aqui a primeira linha é recuada por cerca de 10 pixels. Esse é aquele. Também podemos alterar o espaçamento entre letras. Vamos dar uma olhada nisso. Vou para a página 1 aqui. Em vez de mudar as regras, vou apenas colocar em um estilo embutido e definir espaçamento entre letras. Espaçamento para 10 pixels e veja o que isso faz. Lá vai você. Você tem algum espaçamento de letras realmente selvagem lá. Quais são outras opções? Altura da linha. Altura da linha é usado para especificar o espaço entre linhas. Direção de textos, podemos mudar a direção do texto para inverter. Nunca fiz isso para ser honesto. Como temos um monte de opções aqui que você pode ir para baixo na lista e dependendo do que você quer com a formatação de texto, estas são todas as coisas diferentes que você pode fazer para alterá-lo. Lá praticamente você pode fazer quase qualquer coisa em CSS. Você também pode alterar o espaçamento entre palavras. Se você quiser ver tudo o que você pode fazer, definitivamente venha a esta página e confira alguns dos atributos. Seguindo em frente, vamos olhar para fontes. Uma das coisas mais comuns que você verá é a propriedade da família de fontes. Nesta propriedade particular, podemos definir a família de fontes Times New Roman, Arial, Courier New, essa coisa. O que podemos fazer é adicionar uma vírgula e, em seguida, colocar fontes de fallback AVA aqui. O que você deve fazer é começar com a fonte que você realmente deseja. Mas se o navegador que o usuário está usando, não tem essa fonte, ele vai cair de volta para isso e então ele vai voltar para isso. Muitas vezes, você terá uma fonte muito específica na frente e, em seguida, na parte de trás, você vai apenas definir se é Serif ou Sans-Serif. Você pode ler sobre a diferença entre Sans-Serif e Serif aqui em cima. Aqui estão alguns exemplos de fontes Serif e Sans-Serif e Monospace. Estilo de fonte permite que você para itálico seu texto e também torná-lo oblíquo, que é como itálico. Nunca usei oblíqua antes, então acho que não vale a pena gastar muito tempo. O tamanho da fonte é comum. Novamente, você pode usar pixels como sua unidade, mas você também pode usar algo chamado EM. Um EM é igual ao tamanho da fonte atual. Se quiser usar EM, aqui estão os cálculos aproximados. É baseado em um tamanho de fonte padrão de 16 pixels. Se, por exemplo, você queria que um texto fosse 50% maior do que o texto que o rodeia, você poderia alterar o tamanho da fonte usando uma unidade relativa aqui ou seja, um sinal de porcentagem. Vamos voltar para aqui e dizer, por exemplo, que eu queria que o texto fictício fosse 50% maior do que o resto do texto que o rodeia. Bem, eu já fiz isso aqui. Você pode ver aqui um tamanho de fonte relativo. Posso entrar e fazer o oposto e torná-lo menor do que o outro texto que o rodeia. Você pode ver lá que é três quartos do tamanho do texto circundante. Vou colocá-lo de volta para 150. Você também pode alterar o peso da fonte. O peso da fonte é basicamente o quão negrito é a fonte. Outra coisa que você pode fazer é definir a unidade para VW. Eu realmente não fiz isso antes, mas você pode ver aqui, onde ele foi? O tamanho da fonte realmente muda com base no tamanho da tela. Isso é muito legal. A unidade VW representa um por cento da largura da porta de visualização. Se a porta de visualização tiver 50 centímetros de largura, que é a porta de visualização é basicamente a tela em que você está visualizando, um VW terá cerca de 0,5 centímetros. Em seguida, uma variante de fonte especifica se o texto deve ou não ser exibido na fonte minúscula. Novamente, eu realmente não uso este com frequência, mas novamente, é outra opção disponível em fontes. Vou trazer isto de volta à largura total. Aqui estão todas as propriedades de fonte CSS que você pode usar. Definitivamente, volte a isso para referência. Mas, por enquanto, vamos nos mover rapidamente para ícones. Se eu trazer a página para ícones, o que podemos fazer é usar uma fonte de ícone para poder colocar em alguns ícones e tratar esses ícones como se fossem uma fonte ou texto em si mesmos. Agora, talvez, você precise ver isso em ação. Uma biblioteca de fontes de ícone comum é fonte Awesome. Você pode procurar fonte Awesome aqui. É um dos mais famosos que você pode usar. Ele tem um monte de fontes que eles estão constantemente expandindo, e aqui você pode ver um monte de diferentes logotipos e símbolos e eles até têm aqueles que representam diferentes aplicativos e serviços. Se voltarmos para aqui, podemos ver que podemos incluir fonte impressionante em nosso projeto, vinculando a ele usando rel stylesheet. O que eu vou fazer é copiar isso, colocá-lo em nosso projeto para que possamos ver como podemos usar fontes de ícones. Temos o link e isso significa que podemos começar a usá-lo. O que você pode fazer aqui é criar uma tag I. Vou trocar por aqui. Talvez antes de entrarmos, começamos nossa empresa. Vamos colocar em uma tag I e a classe na tag I dirá ao nosso documento qual ícone realmente usar. Vou guardar isso, colocar isso e verá que temos uma nuvem na frente de cada uma dessas linhas. A razão pela qual temos uma nuvem é porque estamos usando a nuvem de código FA. Para usar qualquer número desses ícones, temos o nome da classe aqui. Vamos rolar para baixo, e digamos que queríamos usar um símbolo de maçã. Podemos ir para o nosso código e em vez de nuvem FA, podemos colocar FA maçã. Certifique-se de colocar a classe FA em primeiro lugar e, em seguida, a classe FA específica para o ícone real que você deseja usar. Voltando para aqui, agora vemos que o ícone é maçã. Neste caso, o ícone da Apple não faz sentido. Então vou carregar mais um exemplo. Digamos que queremos flecha, círculo direito. Mais uma vez, vou abrir o meu editor de código e mudar a maçã para a seta circular à direita. Lembre-se com o traço FA lá. Lá vamos nós. Agora nós incluímos a fonte do ícone e estamos fazendo referência a essa fonte do ícone usando um elemento I, e somos capazes de dizer ao nosso documento qual ícone queremos usar usando classes. Muito legal. Se voltarmos para a nossa página aqui por escolas W-3, podemos ver que também podemos usar ícones Bootstrap. Bootstrap é um framework front-end que vamos aprender no final desta classe de compartilhamento de habilidades. Eles também têm suas próprias fontes de ícones, assim você pode obter alguns desses ícones também. Google tem sua própria fonte de ícone, você pode encontrar uma variedade de fontes de ícone on-line. Mas essencialmente, como os ícones funcionam é que você precisa carregá-los quase como uma fonte. Se você está usando uma fonte que lhe dá caracteres em inglês ou uma fonte que lhe dá ícones é essencialmente tratada da mesma forma em HTML. Deixe-me demonstrar isso rapidamente antes de encerrarmos esta lição e passarmos para a próxima. Vou definir um parágrafo em particular. Vamos escolher este para a família de fontes. Na verdade, vamos definir todo o nosso documento. Uma maneira que podemos fazer isso é adicionando uma regra de estilo de nível de elemento e usando todo o corpo como o elemento de destino e, em seguida, podemos escolher o estilo de fonte ou font-family de todo o corpo do documento. Eu não tenho nenhuma preferência com a fonte, então eu vou voltar para a lição sobre fontes aqui, e apenas copiar este exemplo. Indo para repassar, copiá-lo, e então você verá aqui que a fonte mudou ligeiramente para Times New Roman. Vamos mudar isso para Arial. Quero que seja um pouco mais diferente. Agora, temos a família de fontes Arial. O que eu vou fazer agora é abrir meu inspetor, e você pode ver aqui que ele é padrão para o corpo e eu posso ver minha família de fontes Arial lá. Se eu remover isso, ele volta para a fonte padrão. Se eu descer até aqui onde o ícone está, você verá que ele está puxando uma fonte em si. Ao usar esta classe FA, dá-lhe uma fonte de fonte impressionante, que é a fonte ícone. Se eu fosse remover isso, você verá que aparece como uma caixa quadrada. Mas agora, quando eu ligá-lo, vocês verão que estamos essencialmente fazendo a mesma coisa que estamos fazendo aqui em cima. Estamos usando uma fonte para dar a aparência do texto e também estamos usando uma fonte aqui para pegar essa tag ícone e transformá-la em um elemento específico usando nossos nomes de classe. Se você rolar para baixo aqui, você pode ver aqui um pseudo elemento, este conteúdo e este pequeno código aqui que diz fonte Awesome qual deles carregar para cima. Mas para você, você só precisa usar o nome da classe, usando esse nome descritivo para direcionar essa parte específica do conteúdo. Isso é tudo o que funciona no back-end da fonte Awesome. Mas essencialmente, o tempo que você está carregando, Times New Roman ou fonte impressionante. Você está carregando uma fonte. Isso apenas cobre formatação de texto, fontes e ícones. No próximo vídeo, vamos passar sobre como estilizar três dos elementos HTML mais comuns que falamos na seção HTML, que são imagens, links, listas e tabelas. Vejo-te no próximo. 22. Imagens de estilo, links, listas e tabelas: Neste vídeo, vamos abordar como estilizar alguns elementos HTML comuns, como imagens, listas, links e tabelas. Nós já fizemos um pouco de imagens, mas se rolarmos para baixo até este link em particular no w3schools.com, podemos começar a ver que temos algumas opções de estilo disponíveis para nós em CSS para estilizar imagens. Também podemos tornar a imagem responsiva e escalar para cima e para baixo com CSS. Vamos tentar isso agora com a imagem que já temos em nosso documento. Vou trocar, esta é a nossa imagem. Então o que eu vou fazer é ir até o nosso editor de código e eu vou colocar em uma regra para todas as imagens. Estou usando um seletor de nível de elemento e vou seguir o exemplo aqui. Vou dar-lhe uma largura de 100 e uma altura de auto. Voltando ao meu editor de código, eu guardo isso. Agora você verá que ele estende toda a largura da tela. Então, se foi para fechar isso, ele estende a largura total absoluta da tela e a proporção é a mesma, independentemente do tamanho da tela. Isso é o Heights Auto trabalhando para nós lá. A largura 100 por cento significa que queremos que a imagem seja 100% do elemento pai. Neste caso, se olharmos para o documento, o elemento pai é corpo. Então, será apenas 100 por cento do corpo do documento, a janela neste caso. Há um pouco de código que podemos facilmente obter nossas proporções em ordem e tê-lo responsivo. Voltando para a página web agora, nós também podemos definir uma largura máxima, como eu demonstrado antes, mas em um elemento diferente. A outra maneira de incluir imagens é usá-las como plano de fundo. Às vezes, você vai querer incluir uma imagem como plano de fundo em vez de um arquivo de imagem real como este. Um exemplo seria se você quisesse ter uma imagem esticada como esta até a largura total de uma área de conteúdo ou cortar a imagem de uma forma mais responsiva com base no tamanho desse conteúdo para o qual ela é o plano de fundo. O que você também pode fazer é alterar a imagem de fundo com base em diferentes tamanhos de tela. Aqui vemos uma consulta de mídia, e ainda não entramos em consultas de mídia, mas consultas de mídia nos permitem definir estilos em telas de larguras específicas. Vamos falar disso em um vídeo mais tarde. Mas por enquanto, saiba que podemos alterar a imagem com base no tamanho da tela. Há também um novo elemento em HTML5 chamado o elemento de imagem. Eu nunca tive que usar o elemento de imagem, mas permite que você defina mais de uma imagem. Sinto que poderíamos passar muito tempo aqui com imagens, mas há algumas outras coisas que precisamos cobrir. Se você precisa saber mais sobre imagens, definitivamente volte para esta página agora, vamos passar para links, listas e tabelas. Links e listas devem ser bem simples, mas como você verá nas tabelas, existem algumas opções de estilo diferentes com base nas diferentes partes da tabela. Na seção de links CSS em w3schools, podemos ver que podemos mudar a cor de um link, também podemos alterar a propriedade text-decor e que é usado principalmente para remover os sublinhados de links. O comportamento padrão com o link é ter este sublinhado e essas cores diferentes e isso tem sido o caminho desde o início do HTML. Não é o mais bonito e está desatualizado agora. Você verá isso muitas vezes em que o sublinhado é removido usando text-decor none. Você também pode, naturalmente, definir a cor de fundo. O que você deve notar olhando através deste documento é que você pode começar a ver algo um pouco diferente, e esses dois pontos com outra palavra. Estas são pseudo-classes, e nos permite estilizar o link com base no estado em que ele está. Por exemplo, temos este seletor um:link que nos permitirá direcionar um link normal não visitado, mas se o link foi visitado, podemos mudar o estilo disso. Um comum que usaremos com muita frequência é pairar. Se o mouse se move sobre um link, então podemos mudar o estilo e ativo é o momento em que um link é clicado. Se clicarmos aqui para “Experimente você mesmo”, podemos ver aqui que nosso link ficará vermelho, mas uma vez visitado, ficará verde e se eu passar o mouse sobre ele, será rosa quente, e quando estiver ativo será azul. Vamos testá-lo. Você pode ver agora como meu cursor passa por cima do link, ele se transforma em rosa quente. Isso é baseado nesta pseudo-classe aqui que diz que se o estado está pairando sobre este link, então coloque-o rosa quente. Vamos ver o que acontece quando eu clicar nele. Você pode ver brevemente que ele ficou azul e isso é porque ele estava ativo, mas então, claro, nós carregamos a nova página para que desapareceu. Agora que foi visitado, está verde. Você pode começar a ver aqui toda a extensão de diferentes estados e este link passando por diferentes estilos. Novamente, eu realmente não uso ativo, visitado e link com muita frequência, mas um muito comum é pairar, porque muitas vezes você quer que o link se destaque e por tê-lo mudar de cor ou mudar de estilo sempre que você passar o mouse sobre um link, isso é algo que é bastante comum. Voltando para a nossa referência W3schools aqui, eu vou passar para listas. Se você se lembra de nossa seção sobre listas HTML5, temos dois tipos desordenados e ordenados. Um pedido significa apenas uma lista numerada. Se rolarmos para baixo, podemos ver a primeira propriedade list-style-type e que especifica o tipo de um marcador de item de lista. Podemos mudá-lo daqui de cima do que quer que seja para um círculo, um quadrado, e outros tipos diferentes de listas. Se você clicar em “Experimente você mesmo” aqui, podemos começar a ver isso. Aqui podemos ver esta primeira lista desordenada. Nós fomos em uma classe de a e aqui a lista não ordenada com uma classe de a vai ter o tipo de lista de estilo de círculo. Aqui nesta lista, nós demos b, e para isso nós temos quadrado, estes superior romano e inferior alfa. Você pode alterar a coisa que vem na frente dos diferentes itens da lista. Voltando à referência, você também pode definir o marcador de item de lista para uma imagem que você mesmo escolher. Neste caso, temos esta imagem gif quadrado-roxo, e podemos definir que seja o marcador da lista. Você pode definir qualquer coisa que você deseja para ser o marcador de lista se você tê-lo como uma imagem. Rolando para baixo, você também pode alterar a list-style-position. Assim, você pode fazer o ponto bala fora do conteúdo ou dentro. Novamente, eu só estou passando por isso porque há um monte de opções diferentes. Muitos desses que eu não necessariamente uso em uma base regular, então se isso é algo que você quer fazer, definitivamente volte e revise isso. Pelo amor do tempo, vou passar o resto disto. Rolando para baixo, você tem o resumo das diferentes propriedades que você pode acessar com a lista. Vamos para as mesas. Tabelas é algo que pode ser muito melhorado com CSS bastante obviamente. Vamos rolar para baixo e olhar para a nossa mesa aqui, é muito velha escola. Tabelas podem definitivamente fazer com um olhar melhor com CSS, e como você pode ver aqui, este é um pouco de um exemplo old-school que é semelhante ao nosso. Nós definimos a borda usando HTML, então se você voltar para o nosso documento e encontrar a nossa tabela aqui, fomos capazes de colocar um atributo neste elemento pelo nome de fronteira e dar-lhe um valor de um. Se fôssemos mudar esse valor para dois, voltar, então ele se torna um pouco maior, mas não temos que dar a borda sobre o elemento real usando esse atributo, podemos fazê-lo em CSS. O que eu vou fazer é pressionar Salvar sobre isso, agora não há fronteiras, mas eu vou adicioná-los em CSS. O que você precisa fazer é voltar aqui, e precisamos especificar bordas na tabela, os cabeçalhos da tabela e as células da tabela. Eu só vou pegar esse pedaço todo um código. Na verdade, por uma questão de consistência, vou colocar todos os meus seletores de elementos no topo. Vou pressionar “Salvar” nisso, voltar para aqui e temos a mesma coisa. A diferença é que temos muito mais flexibilidade dentro do CSS e podemos copiar esse estilo em várias tabelas. Voltando para a referência aqui, uma coisa que é velha escola neste projeto é que ele tem duas linhas para a fronteira. Muitas vezes, só queremos uma única fronteira, que possamos definir isso para um colapso fronteiriço colocando esse estilo em toda a mesa em si. Vou colocar isso acima do que temos lá, e agora temos talvez um comportamento mais esperado da nossa mesa. Você também pode definir a borda ao redor da tabela por si só, então esta é a diferença entre definir a borda na tabela versus as células, configurá-la na tabela vai colocá-lo em torno de toda a tabela e, em seguida, definir uma borda nas células está em torno das células. Movendo-se para baixo, podemos definir a tabela para ter uma largura total, e podemos definir os títulos para ter uma altura fixa de 50 pixels. O que eu vou fazer é passar por este documento e, em seguida, nós podemos realmente aplicar alguns destes para a nossa mesa, porque ele está na necessidade de um estilo melhor, com certeza. Descendo para o alinhamento horizontal, podemos alinhar texto do conteúdo dentro das células para a esquerda, direita ou meio. Também podemos alterar o alinhamento vertical. Nesse caso, definimos o conteúdo das células para estar na parte inferior. Também podemos configurá-lo no topo. Podemos criar preenchimento, entre o conteúdo e as bordas da célula. Também podemos criar bordas com base na parte inferior, superior, esquerda e direita. Este é um design muito agradável, nós estamos apenas tendo fronteiras na parte inferior para esta pequena lista agradável. Também podemos alterar o estilo de uma linha usando essa pseudo-classe que vimos antes quando estávamos trabalhando com links, chamando hover. Quando o mouse passa o mouse sobre essas linhas diferentes, vamos mudar a cor de fundo para esta cor particular. Pode fazer tabelas listradas usando outra pseudo-classe chamada, nth-child. Isso é um pouco mais avançado, mas basicamente o que está fazendo é cada linha par que estamos dando uma cor de fundo disso. Claro, um comum seria mudar a cor de linhas particulares e células particulares, e então você pode obter um design agradável como este. A parte mais complicada com tabelas, eu acho, é torná-lo responsivo. Se olharmos para este exemplo, e mudarmos o tamanho da janela, podemos ver que a tabela está respondendo, mas mesmo assim chega a um certo ponto onde você ainda tem que rolar para a esquerda e para a direita para ver todos os conteúdo. Esse é o problema muitas vezes com tabelas e por que você não deve usá-las para estruturar sua página web, como mencionamos anteriormente, é porque essas tabelas têm um elemento de layout fixo, mas é claro, há maneiras de torná-los responsivos, e vamos falar mais sobre isso talvez nos vídeos sobre design responsivo. Aqui estão algumas das nossas opções para uma tabela CSS. O que eu vou fazer agora, trazer tudo isso para casa é estilizar nossa mesa aqui. Usando algumas das coisas que aprendemos neste documento em particular, o que eu vou fazer é eu quero horizontal-alinhar e vertical-alinhar o conteúdo da minha tabela. Eu vou abrir meu editor de código e meu documento, e o que eu vou fazer é criar um estilo visando minhas células de cabeçalho e minhas células normais, e eu vou dar um alinhamento vertical do meio e um alinhamento horizontal do centro. Agora, ele está sentado bem contra a fronteira, então podemos não ver isso. O que eu vou fazer, bem como dar-lhe um pouco de enchimento. Vou fazer 20 pixels de preenchimento. Vamos ver como isso se parece agora. Lá você pode ver com algum preenchimento e algum alinhamento, você pode ver que temos um pouco mais agradável de uma mesa. Eu gostaria de tornar a linha de cabeçalho um estilo diferente, então eu vou segmentar os estilos de cabeçalho separadamente, e eu vou dar-lhe uma cor de fundo de, deixe-me ver, verde claro. Pressione “Salvar” nisso e agora você pode ver que a linha superior é um verde claro. O que mais podemos fazer aqui? Fizemos o estofamento. Nós fizemos listrado. Talvez queiramos usar este aqui e nós podemos fazer, eu acho que nós não temos tantas linhas aqui, mas se nós fôssemos começar uma nova linha, nós poderíamos colocar este estilo em cada criança uniforme teria uma cor de fundo desse cor particular. Se formos duplicar esta linha apenas como um exemplo, copie e cole isso, você verá que a primeira é cinza usando essa cor de fundo que especificamos para até mesmo crianças, e esta não é porque não é uma criança uniforme, então se colocarmos em um terceiro, você verá que alterna entre os dois. Vamos duplicar isso de novo, e então você vê lá. Há um monte de opções de estilo disponíveis em tabelas, definitivamente, eu encorajo você a ir e experimentar com eles. Nós vamos usar estruturas CSS que fazem muito disso para nós em um vídeo futuro, então você não precisa saber absolutamente tudo sobre tabelas de estilo, mas também é uma coisa boa de saber. Isso basicamente abrange links de estilo, tabelas, listas e imagens. Admito que nos apressamos um pouco porque há muito conteúdo para cobrir, mas é claro, você sempre pode voltar a essas páginas para referência e a melhor maneira que você vai aprender é fazendo, então definitivamente colocar uma tabela em seu documento e, em seguida, começar a pesquisar se você não sabe como fazer alguma coisa. Esta referência é muito boa e isso abrange muitas das opções que você gostaria de fazer, mas talvez você queira fazer algo extra com sua mesa. Há tantas opções disponíveis no CSS e poderíamos gastar para sempre nisso, mas há muito mais conteúdo para cobrir. No próximo vídeo, vamos cobrir as propriedades de exibição. Mostrei um pouco de exibição em um vídeo anterior, mas vamos aprofundar essas propriedades de layout, muito fundamentais em CSS, mas um pouco complicado, então estou ansioso para vê-lo no próximo vídeo. 23. Layout CSS — Propriedade de exibição: Neste vídeo, vamos cobrir um layout CSS e vamos nos concentrar na propriedade display dentro do CSS. Quero dizer, é apenas uma propriedade, mas é tão importante e fundamental no CSS e talvez um pouco difícil de entender. Vamos cavar imediatamente. É o próximo link do nosso menu aqui. Como você vê, a propriedade display é a propriedade CSS mais importante para controlar o layout. A propriedade display especifica se e como um elemento é exibido. Cada elemento HTML tem um valor de exibição padrão dependendo de qual tipo de elemento é. O valor de exibição padrão para a maioria dos elementos é bloco ou inline. Lembre-se quando tivemos esses elementos de nível de bloco, então esta div aqui, eles são elementos de nível de bloco e por padrão eles têm um valor de exibição de bloco. Mas aqui com uma caixa de classe, fomos capazes de mudar esta div particular para uma exibição de bloco inline. Isso foi uma pequena prévia do que vamos cobrir neste vídeo. Se rolarmos para baixo para ler mais sobre elementos de nível de bloco, um elemento de nível de bloco sempre começa em uma nova linha e ocupa toda a largura disponível. Lembre-se quando tivemos este bloco aqui, se removermos o bloco inline-, eu só vou fazer isso fazendo um comentário para que ele não se aplique mais. Estou refrescando isso. Agora é um elemento de nível de bloco, então ele só vai ocupar toda a largura da página. Aqui você pode ver alguns exemplos de elementos de nível de bloco. Estes são basicamente exibir bloco por padrão, então div, você tem as tags de cabeçalho, formulário p, cabeçalho, rodapé, e seção. Há também elementos em linha que exibem inline por padrão. Um elemento inline não começa em uma nova linha e ocupa apenas a largura necessária. Um exemplo comum disso é o elemento span, que usamos, não tenho certeza se ainda o temos em nosso projeto. Se eu for procurar o Span. Sim, ainda temos. Lembre-se aqui nós mudamos uma palavra em particular em nosso parágrafo e tornamos 50% maior do que as outras palavras. Se entrarmos aqui, essa mudança é feita em linha. Este pedaço de conteúdo, esta palavra não é dividido em uma nova linha ou ocupando toda a largura da página como um elemento de bloco faria. É feito em linha. Esses são os dois tipos principais diferentes. O outro que podemos usar é display: nenhum. Se quiséssemos que isso não fosse exibido, poderíamos entrar e fazer “display: none”. Se eu economizar nisso, ele não será exibido. Mas se inspecionarmos em nossa página web e descermos, podemos realmente ver que a div ainda está lá. Ele simplesmente não é exibido e nós podemos realmente alternar esta propriedade de exibição ligado e desligado. Lá vai você. Estou marcando essa caixa e ela é exibida. Agora, por que você gostaria de ter um elemento na página, mas não exibindo? Bem, nós podemos realmente alternar a propriedade de exibição como estamos fazendo aqui, mas usando JavaScript. Esse é um conceito mais avançado e que está se movendo para JavaScript, que não estamos cobrindo neste curso. Mas saiba que se você vir um elemento que está em exibição: nenhum, as chances são, haverá algo no código que permitirá que esse elemento apareça em certas situações. Tendo exibição: nenhum em um elemento quando a página carrega permite que ele comece oculto e, em seguida, podemos exibi-lo mais tarde. Isso é exibição: nenhum. Vou atualizar para remover essas alterações e me livrar da nossa tela: nenhuma aqui, salve isso e voltamos para onde estávamos antes. Voltando para a referência, podemos substituir o valor de exibição padrão usando esta propriedade chamada display, que é exatamente o que fizemos de volta aqui, fazendo a exibição caixa na linha em vez de exibir bloco. De volta à referência novamente. Podemos realmente alterar o comportamento padrão de um elemento inline para bloquear, que podemos fazer isso de ambas as maneiras; podemos alterar um elemento de nível de bloco para exibir inline, mas também podemos alterar um elemento inline para exibir em um bloco. Aqui podemos fazer essa extensão e nos tornar um elemento de nível de bloco. O que isso faz é criar uma quebra de linha. Se eu fosse remover este estilo e, em seguida, executá-lo, torna-se um elemento em linha e, em seguida, se eu estou para colocar isso de volta, ele vai dividi-los porque lembre-se no elemento nível de bloco ocupa toda a largura da página. Se rolarmos para baixo, veremos um pequeno ponto de confusão com exibição: nenhum. Existe uma outra propriedade chamada visibilidade. Qual é a diferença entre display: none e visibility: hidden? Bem, a grande diferença é que o elemento ainda vai ocupar o mesmo espaço que antes. Ele será oculto, mas ainda afetará o layout. Vamos tentar isso agora. Vamos tornar esta imagem invisível, para que não seja exibida: nenhuma, mas invisível. Visibilidade; podemos definir para invisível. Acho que oculto é o termo não invisível. Vou colocar isso ali, visibilidade: escondida. Você verá que ele ainda ocupa o espaço na página que estava indo se ele estava visível, mas agora ele está apenas escondido. Contrastando isso com display: nenhum, se eu exibir: nenhum, repente o elemento não aparece e não ocupa nenhum espaço na página também. Nenhum desses são dois práticos, então eu vou me livrar disso, pressionar “Salvar” e voltar a ser como era antes. Legal. Uma coisa que não foi realmente abordada nesta referência em particular é exibir inline-block. Como você vê, nós temos isso aqui em baixo, mas em W3Schools é na verdade uma lição separada. Vou clicar no display inline-block aqui. Vamos aprender um pouco mais sobre isso. Aqui podemos ler mais sobre display inline-block. Há algumas diferenças que você pode ler sobre aqui, mas a principal diferença é que se quiséssemos exibir uma lista de itens horizontalmente em vez de verticalmente, precisaríamos usar inline-block. Por exemplo, no caso de criar links de navegação como aqui em cima, nós exigiríamos inline-block porque o comportamento padrão de elementos HTML é apenas empilhar em cima uns dos outros como demonstramos antes quando não tínhamos obteve este CSS. Vou clicar em “Experimente você mesmo” aqui. Você pode ver que estes estão exibindo bloco inline-. Se foi para remover este estilo e executar, você vai ver que eles empilham em cima do outro. Esse é o comportamento padrão, mas se tivermos display inline-block aqui, eles serão exibidos em uma linha. Inline-block é um muito comum que você verá especialmente com links de navegação como neste exemplo. Se você quiser saber mais sobre quais são as diferenças específicas, você pode ler sobre isso aqui, mas você verá inline-block chegando muito. Estou um pouco cauteloso com este vídeo se arrastando para fora, então eu vou terminar lá. Este é um conceito muito importante para entender, a propriedade de exibição e é essencialmente uma maneira que podemos ter elementos exibir nível de bloco, então empilhados um após o outro em linha ou uma combinação que tira vantagem de ambos. Essa é a propriedade de exibição. No próximo vídeo, vamos rever o posicionamento. Vejo-te no próximo. 24. Propriedade de posição CSS: Neste vídeo, vamos rever a propriedade position em CSS. Este é um romance, envolve bastante propriedade em CSS, por isso merece sua própria lição. Eu vou para a posição CSS na W3Schools. Aqui podemos ver os cinco valores de posição diferentes: estático, relativo, fixo, absoluto e pegajoso. Então, usando alguns deles, você é capaz de posicionar elementos absolutamente em qualquer lugar da página em um lugar específico. Você pode posicioná-los na parte superior, inferior à esquerda e direita de elementos específicos relativos a eles, mas isso não funcionará menos que você use a propriedade position e defina a direita primeiro. Então, cobrir o primeiro é a posição estática. Elementos HTML são, na verdade, estáticos por padrão. Então, se você colocar em uma propriedade de topo, inferior, esquerda e direita, ele não vai realmente funcionar, ele não será afetado em tudo por essas propriedades. Como diz aqui, um elemento com posição estática não é posicionado de forma especial, é sempre posicionado de acordo com o fluxo normal da página. Então é apenas o comportamento padrão. rolagem para baixo na próxima é a posição relativa. Um elemento com posição relativa é posicionado em relação à sua posição normal. Agora você é capaz com a posição relativa ao conjunto de propriedades de topo, direita, inferior e esquerda para posicionar relativamente um elemento ajustado longe de sua posição normal. Agora eu sei que isso provavelmente não faz sentido, apenas falar sobre isso, então vamos realmente dar uma olhada em um exemplo real. Vou clicar em “Experimente você mesmo”. Você pode ver aqui, se fôssemos remover posição relativa, o que nos permite posicioná-lo para começar e movemos a propriedade esquerda e clique em executar. Neste momento, esse é o comportamento padrão desta div particular e você pode ver a borda da div porque nós lhe demos uma borda aqui. Se eu colocar em posição relativa, agora eu sou capaz de fazer esse elemento aparecer 30 pixels à esquerda de onde ele estava originalmente indo para ser posicionado. Então, podemos adicionar mais um aqui e podemos torná-lo top 50. Agora são 30 pixels para a esquerda e 50 pixels do topo em uma posição diferente para onde estaria de outra forma. Podemos fazer o oposto aqui. Podemos usar o direito em vez disso, e podemos posicioná-lo 100 pixels à direita de onde deveria estar. Agora você pode ver que ele está indo para fora do limite esquerdo da janela. Então, não é muito prático, mas às vezes você pode precisar fazer isso. Vou fechar este exemplo e o anterior e também esses ícones porque não precisamos mais deles. Outra opção na posição é fixa. Um elemento com uma posição fixa é posicionado em relação à janela de exibição, que significa que ele permanecerá sempre no mesmo lugar, mesmo que a página seja rolada. Então, sempre que você vê aqueles menus ou coisas como esta que ficam em uma determinada parte da janela e nunca se movem, que é estilizado com posição fixa. Vamos apenas dar uma olhada no nosso exemplo. Nós não podemos realmente rolar aqui porque não há conteúdo suficiente, mas aqui você pode ver um elemento que está fixo no canto inferior direito. Provavelmente é melhor olhar para esta página, porque nós podemos realmente ver como nós rolamos, que parece estar em cima do conteúdo porque ele é corrigido independentemente de onde você se move no documento. Assim, você pode definir a posição como fixa. Como você vê aqui, são 0 pixels da parte inferior e 0 pixels da direita, que significa que está no canto inferior direito. Nós definimos uma largura nele e uma borda para dar esse estilo e isso vai ficar lá a menos que nós mudemos esta propriedade posicionada. Indo para baixo, podemos olhar para a posição absoluta e posição absoluta é posicionado em relação ao ancestral posicionado mais próximo em vez de relativo à janela de exibição como fixo. Então isso provavelmente não fez sentido, mas vamos dar uma olhada em um exemplo aqui. Vou clicar em “Experimente você mesmo” e você pode ver aqui que temos uma combinação aqui. Um é um div que é relativo, M1 é um div que está posicionado absolutamente. Então olhando para a div absoluta aqui, se fôssemos remover este atributo ou esta propriedade e executá-lo, ele volta para o comportamento padrão de HTML que é elementos empilhando em cima do outro. Mas se quisermos dar-lhe uma posição de absoluta, somos capazes de escolher a sua posição dentro desta caixa. Então agora ele vai ficar 80 pixels no topo desta caixa e 0 pixels à direita desta caixa. Então você pode ver que está bem em cima da borda aqui. Isso é porque estamos em 0 aqui e está 80 pixels do topo. Podemos sempre mudar isso, podemos fazê-lo vir um pouco da direita, para que eu possa dar 10 pixels lá. De repente, saiu um pouco do limite. Eu também posso, em vez de direita, afetar a esquerda e tê-lo sair da borda, tanto quanto era antes, mas no lado esquerdo. Lá vai você. Essa é a posição absoluta. O próximo é a posição pegajosa e é baseado na posição de rolagem dos usuários. Então, ele realmente alterna entre relativo e fixo com base na posição de rolagem e é posicionado em relação até que uma determinada posição de deslocamento seja atendida na janela de exibição. Novamente, provavelmente soa como bobagem técnica, mas para dar um exemplo, esta div em particular está realmente se movendo quando eu rolar, mas uma vez que eu bati, ele de repente fica pegajoso. Então, novamente, eu vou para tentar você mesmo aqui e você pode ver como nós rolamos, ele fica lá em cima. Considerando que o comportamento padrão, se fôssemos remover a posição pegajosa, seria ficar com a página, mas se eu colocar sticky lá, uma vez que ele atinge essa posição, ele vai para a posição top 0. Então, ele vai ficar no topo. Eu posso mudar isso para quando ele não ir fixo e talvez posição em 10 pixels a partir do topo. Vamos dar uma olhada nisso. Agora você pode ver que há um intervalo de 10 pixels entre o topo da janela ou o quadro aqui e a div real. Então, voltando para trás, também podemos ter elementos sobrepostos usando absoluto. Então vamos dar uma olhada nisso. Temos uma imagem e um título que se sobrepõem uns aos outros e somos capazes de conseguir isso tendo a imagem absoluta. Mais uma vez, se removermos a posição absoluta, isso é o que seria parecido. A imagem ficaria sob o título, como o comportamento padrão em HTML. Seguindo em frente, podemos ver como podemos posicionar texto sobre uma imagem e há muitos mais exemplos aqui. Você pode testar-se com exercícios. Isso é provavelmente outra coisa boa de mencionar. Mas então você pode ver o resumo das propriedades de posicionamento aqui. Eu sei que isso é muito para cobrir e pode não fazer todo o sentido agora, mas novamente, à medida que você começa a desenvolver usando a propriedade position, você vai começar a entender melhor as diferenças. Mas eu acho que os exemplos realmente comuns que você verá com o uso da propriedade position é; número 1, esta posição fixa, como este elemento apenas fica com você, independentemente de onde você rolar. Na verdade, isso é algo que podemos ver aqui com este menu. O menu chega a um determinado nível de rolagem. Ele fica lá em cima e vamos entrar e verificar isso agora mesmo. Vamos inspecionar, tentar encontrar os elementos e , na verdade, está mudando de relativo para fixo. Então não está usando pegajoso. Mas você pode ver aqui a posição enquanto estamos rolando é fixa e aqui em cima é relativa. Então, pegajoso e posição fixa são bons para criar menus fixos que seguem você enquanto você rola. Isso também pode ser corrigido, ou apenas em um quadro diferente. Absoluto, somos capazes de posicionar as coisas em qualquer lugar na página, e relativo, somos capazes de empurrar diferentes elementos ao redor com base na posição que eles deveriam ser originalmente. Espero que isso tenha dado uma boa visão geral da propriedade da posição. Novamente, à medida que desenvolvemos mais, você começará a ver a propriedade e a ação da posição e começará a internalizá-la mais. No próximo vídeo, vamos cobrir transbordamento e flutuar. 25. CSS overflow e float: Neste vídeo, vamos cobrir transbordamento e flutuar. Isso vai acabar falando sobre as diferentes propriedades em CSS, e então vamos cobrir algumas coisas mais avançadas. Vamos apenas mergulhar e fazer o checkout overflow. A propriedade de estouro de CSS controla o que acontece com o conteúdo que é muito grande para caber em uma área. Como você pode ver aqui, este bloco de conteúdo provavelmente tem apenas uma altura fixa, mas ele tem mais textos do que poderia realmente caber naquele bloco. Podemos controlar como o conteúdo dentro vai se comportar usando CSS overflow propriedade. A propriedade overflow basicamente especifica se o conteúdo deve ser recortado ou adicionar barras de rolagem quando o conteúdo de um elemento é muito grande para caber em uma área especificada. O primeiro que você verá é visível estouro. Isso significa que o conteúdo de estouro não é cortado e ele renderiza fora da caixa do elemento. Como você pode ver aqui, temos uma div de largura e altura fixas, mas nós simplesmente temos muito texto para realmente caber nessa caixa. Uma maneira de corrigir isso é ter o tamanho da fonte menor, mas talvez precisássemos desse tamanho de fonte específico ou não temos controle disso, então uma coisa que podemos fazer é permitir que o estouro seja visível. Este é realmente o comportamento padrão, e se clicarmos em, experimentá-lo, podemos realmente remover overflow visível clique em “Executar”, e veremos exatamente a mesma coisa. Você provavelmente não vai usar overflow visible dado que é o comportamento padrão. Uma coisa que você pode usar é estouro escondido. Com transbordamento escondido, é óbvio o que faz, esconde todo o transbordamento. Na verdade, ele irá cortar o resto do conteúdo e certificar-se que o conteúdo adere às dimensões especificadas. Se clicarmos em “Experimente você mesmo”, veremos que especificamos que queremos que a div aqui tenha 200 pixels de largura e 50 pixels de altura, e se houver algum texto que leve isso além disso, vamos apenas cortá-la. Se removermos isso e executá-lo, ele voltaria para overflow visível. Então também há rolagem de overflow, que é o que vimos acima aqui, ele nos permite manter o tamanho da caixa, mas apenas ter uma barra de rolagem aparecer para que possamos percorrer o conteúdo dessa div particular. A próxima é estouro automático, e é semelhante à rolagem, mas adiciona barras de rolagem somente quando necessário. Neste caso, é necessário, mas se entrarmos em Experimente você mesmo e fizermos isso um pouco maior, então não precisamos realmente das barras de rolagem. Voltando ao documento, podemos afetar o estouro em eixos específicos bem como onde quisermos, na horizontal ou na vertical. Overflow x especificará o que fazer se as bordas esquerda e direita do conteúdo e overflow y especificarão o que fazer com as bordas superior e inferior do conteúdo. Isso é transbordamento, basicamente não muito complicado. Se você tem conteúdo que está transbordando fora de uma div particular, você só terá que decidir o que você quer fazer se ele. Isso provavelmente não é o ideal, talvez você queira escondê-lo ou talvez você queira tê-lo rolar. Caso contrário, você pode ter uma situação em que você altera o tamanho da fonte de modo que realmente se encaixa em tamanhos de tela diferentes, mas essas são as diferentes opções disponíveis em overflow. O próximo que eu queria cobrir neste vídeo é flutuar. Flutuador é muito comum. Você verá no CSS, há duas propriedades aqui. Um é flutuador, e o outro está limpo. A propriedade flow é usada para posicionamento e layout em uma página da Web, e a propriedade flow pode ter um dos seguintes valores. Esquerda, se flutua para a esquerda, direita, ele flutua para a direita, nenhum, ele simplesmente não flutua e herda significa que ele herdará o valor float de seu pai. Em seu uso mais simples, a propriedade float pode ser usada para contornar o texto em torno de imagens. Se olharmos para isso e fizermos a imagem flutuar para a direita, ela flutuará para a direita do texto. Este é o benefício do float, ele irá envolver em torno de seu conteúdo existente. Vamos tentar nós mesmos. Você pode ver aqui que nós temos a imagem flutuando direito. Se eu excluísse isso, nós executamos isso, veremos que a imagem aparece exatamente onde ela está posicionada dentro do HTML. Você pode ver este parágrafo, que vai terminar, esta imagem vai começar, e vai formar o início deste parágrafo. Se voltarmos e o fizermos flutuar para a direita, e ele vai enrolar o texto. Nós também podemos flutuá-lo para a esquerda, como tal, e ele vai flutuar para a esquerda. Nós também podemos adicionar margem para torná-lo um pouco mais agradável, então ele não está indo direto contra o texto, então ele nos permite criar um layout mais fluído, que é realmente importante. Já vimos flutuar à esquerda, nenhum flutuador fará com que ocorra como era antes, com a imagem apenas aparecendo de acordo com o texto, e o que temos é a propriedade clear. A propriedade clear especifica quais elementos podem flutuar ao lado do elemento limpo e de qual lado. A propriedade limpa pode ter praticamente os mesmos valores, exceto que também tem um código, buff. A maneira mais comum de usar a propriedade clear é depois que você usou propriedade float em um elemento e você deseja limpar o float. Aqui está um exemplo aqui que esperamos compartilhar conosco como ele funciona. Como você pode ver, ter flutuador pode causar alguns problemas. Você pode ver aqui que os dois divis estão competindo pelo espaço, enquanto aqui eles são limpos, isto é devido à propriedade clara. Eu acho que a melhor maneira de você entender claro é se nós mergulharmos de volta em nosso projeto e realmente demonstrarmos isso. Vamos apenas pegar nossa imagem aqui, e vamos torná-la 25 por cento para que não ocupe tanto espaço, e então eu vou colocar a imagem bem no parágrafo. Eu vou pegar isso e colocá-lo neste primeiro parágrafo aqui. Agora ele só vai ser exibido em linha com o texto, mas se eu dar-lhe uma propriedade de flutuadores esquerda e salvar, então ele vai flutuar com o conteúdo na página. Vamos dar-lhe alguma margem para a direita e para baixo que ele não venha direto contra este texto, e então você tem esta imagem. Agora, em termos de propriedade clear, ele é usado principalmente para limpar a funcionalidade flutuante quando você tem várias coisas flutuando ao redor. Vou copiar a imagem e colocá-la lado a lado aqui. Temos duas imagens flutuantes e talvez queiramos que a segunda imagem seja limpa, então vou colocá-la na linha aqui. Eu só estou mirando no único elemento, e eu vou deixar claro ambos. Agora, você pode ver que estes empilhamento em cima do outro porque ele está limpando todos os elementos flutuantes para sua esquerda e sua direita. Se quiséssemos limpar à esquerda, provavelmente teria o mesmo comportamento, se criássemos direito, você verá que está de volta ao lugar onde estávamos antes porque não há elementos flutuantes à sua direita. Só para esclarecer isso de novo, nenhum trocadilho pretendido, eu vou me livrar desse estilo, e vamos dar uma olhada no comportamento padrão. O que temos são duas imagens que estão flutuando à esquerda, mas talvez queiramos que isso apareça em uma nova linha. Precisamos limpá-lo para a esquerda de seu elemento flutuante para que nós coloquemos em clara esquerda ou clara ambos funcionariam neste caso também. Aí está você. Se dermos a isto um flutuador de direita, ambos podemos ir para a esquerda e flutuar para a direita. Então você tem alguma variação com a flutuação das imagens. É assim que você pode obter elementos flutuantes para aparecer um sobre o outro ou em novas linhas, em vez de tê-los ao lado do outro, mesmo que eles tenham a mesma propriedade flutuante de esquerda ou direita. Voltando ao documento, há uma outra coisa para cobrir aqui, e que é o Clear-fix Hack. O que acontece se um elemento é mais alto do que o elemento que o contém e é flutuado? O que vai acontecer é que vai transbordar fora do contentor assim. Uma coisa que podemos fazer é usar ordem de estouro para corrigir esse problema e que se relaciona bem com o que cobrimos pouco antes com overflow. Para demonstrar isso, vou voltar ao nosso projeto. Vou abrir a página, entrar no editor de código. Eu vou fazer isso em tela cheia porque nós temos muito mais conteúdo na página agora. A primeira coisa que eu vou precisar fazer é mover essa tag de imagem para o parágrafo que está ao lado. Como você pode ver aqui, parece que esta imagem é provavelmente mais neste parágrafo do que este parágrafo, mas na verdade ele está sentado bem aqui em cima. Eu vou movê-lo para o parágrafo, pressione “Salvar”, e agora você pode ver que o texto envolve um pouco mais em torno dele mas o que eu vou fazer é me livrar dessas alturas fixas e larguras que eu defini como atributos HTML e coloquei em uma altura de 200 pixels para que seja maior do que o conteúdo na tag de parágrafo. Então você vai, você pode ver que está se alongando. Para ver as restrições reais desta tag parágrafo, eu vou dar-lhe uma borda para que possamos realmente ver as bordas deste elemento. Vou dar a isso uma borda preta sólida, guarde isso. Agora você pode ver o exemplo que tivemos em escolas W-3. A imagem está sentada fora das restrições do elemento pai. Eu vou voltar aqui, e o que eu posso fazer é como no exemplo, definir este parágrafo para ordem de estouro. Guarde isso. E agora, de repente, o conteúdo desta tag parágrafo e agora em conformidade com esta tag imagem. Então, novamente, a diferença é entre isso e isso. Essa é uma oportunidade ao usar o clear and float para corrigir esse pequeno problema que você pode estar enfrentando. No nosso caso, a imagem não tem 200 pixels de altura, então ela não precisa ser tão alta, mas apenas no caso de você ter essa opção disponível e você pode ver aqui mesmo em uma altura menor, ela ainda transborda. Então, podemos ir overflow auto novamente e ver que agora podemos tê-lo para que ele sempre é uma parte deste elementos em particular que neste caso é uma tag de parágrafo. Isso cobre transbordamento e flutuação, há algumas outras coisas aqui que você pode aprender mais e mais sobre como float é usado no mundo real. Eu vou apenas brisa sobre isso e levá-lo para baixo para todas as propriedades de vôo CSS para referência, e no próximo vídeo, vamos cobrir mais seletores CSS antes de encerrar esta seção CSS e obter você começou com a implementação do Bootstrap e iniciando seu projeto de classe. Estamos chegando ao fim agora, tempos muito emocionantes, espero vê-lo no próximo vídeo. 26. Sintaxe e selecionadores avançados: Neste vídeo, vamos cobrir seletores avançados. Se você se lembrar de volta no episódio sobre Sintaxe e Seletores, nós cobrimos alguns básicos, incluindo o ID do Elemento e o seletor de Classe. Agora eu tenho algumas abas abertas de w3schools para que possamos entrar em algumas das opções de seleção mais avançadas. O primeiro é Combinadores CSS e você pode encontrar isso no menu aqui. Um combinador CSS é algo que explica a relação entre os seletores. Existem quatro diferentes que podemos usar. Um deles é um Seletor Descendente, um seletor Filho, e um seletor Irmão Adjacente, e um seletor Irmão Geral. Isso provavelmente não faz sentido até entrarmos e vermos isso em ação. O mais comum é um seletor Descendente. O seletor Descendente corresponde a todos os elementos que são descendentes de um elemento específico. O exemplo a seguir que vemos aqui irá selecionar todos, p, elementos dentro, div, elementos. Isso é bastante amplo, mas vamos tentar dar um exemplo em nosso projeto atual. Eu tenho o projeto aqui em nosso navegador, e eu tenho o código para o meu bem aqui. Digamos que, por exemplo, temos esses parágrafos, e dentro do parágrafo temos imagens. O que podemos fazer é selecionar todas as imagens dentro de parágrafos colocando em uma regra como esta. Comece com p, então colocamos um espaço e colocamos imagem. Agora, cada regra que colocamos aqui dentro será aplicada a imagens que estão dentro de p. Ela cobre todos os descendentes, mesmo se tivéssemos um p e, em seguida, dentro que tivéssemos uma div, e então dentro que tínhamos uma imagem que ainda selecionaria. Qualquer imagem com pais, seja imediata ou não, qualquer imagem com um pai de p. Vamos fazer isso agora. Vamos fazer flutuar direito. Vou salvar isso. Vou mover o código para a direita. Abra isso e verá que nossas imagens estão flutuando para a direita. Agora você pode estar pensando, nós temos flutuador para a esquerda já afetando todas as imagens, mas lembre-se de especificidade e hierarquia. Estamos sendo mais específicos aqui para dizer que qualquer imagem dentro de um parágrafo, vai flutuar para a direita. Isso é especificidade trabalhando para nós lá. Se você não está claro sobre o que eu quero dizer com isso, talvez volte e reveja a lição sobre hierarquia. Mas aqui está uma maneira que podemos usar o seletor Descendente usando dois seletores de elementos. Nós também podemos combinar elementos seletores e seletores de ID e seletores div. Se eu rolar para baixo para tentar encontrar um exemplo, digamos, por exemplo, que queríamos selecionar todos os gastos dentro de qualquer elemento que tivesse div especial como a classe. Poderíamos fazer isso entrando em nossa folha de estilo aqui e sob div especial, eu vou criar um seletor Descendant. Eu vou ter div especial como a primeira parte do seletor, e então eu vou colocar span. Agora isso seleciona cada span dentro de um elemento pai que tem essa classe. O que podemos fazer com esses vãos? Vamos mudar a cor. Mudaremos a cor para verde. Agora, cada espaço dentro de um elemento pai que tem div especial, neste caso, serão esses divs bem aqui e devemos começar a ver o span mudando para verde. Lá vai você. Se colocarmos isso nesta div particular sem a classe nele, pressione Salvar e olhe para isso. Vamos ver que este manequim de texto não é verde porque ele não tem um elemento pai que tem esta classe nele. Se você vê aqui temos uma extensão, se você vai para seu pai, ele tem uma classe de div especial. Se você for até aqui e olhar para seu pai, ele não tem uma classe de div especial. Isso é algumas maneiras que podemos criar uma classe e, em seguida, elementos de destino dentro do elemento que tem essa classe. Seguindo em frente, temos o Seletor de Crianças. O seletor filho é bastante semelhante ao seletor Descendente, exceto que ele seleciona todos os filhos imediatos de um elemento especificado. Lembre-se que eu disse aqui que este irá selecionar qualquer imagem que tem um pai de p e não tem que ser o pai imediato, ele pode ser mais acima da cadeia. Voltando à nossa folha de estilos, nós realmente não temos um exemplo claro, mas o que eu vou mostrar aqui é que vou configurar outra seção. Vamos fazer uma div aqui, e então dentro dessa div, teremos outra div e então dentro dessa div teremos uma imagem de src, foto dot jpg. Agora temos uma imagem que tem um pai e pai imediato de div e, em seguida, outro pai mais acima na cadeia. O que poderíamos fazer para atingir esse alvo usando um seletor Descendant e isso nos permitirá ver a diferença entre descendente e filho é colocando em uma regra aqui, div image. Cada imagem que tem uma div, como seu pai devemos dar-lhe uma borda de dois pixels, verde sólido. Agora, se atualizarmos a página, essas imagens não têm um pai de div, mas se rolarmos para baixo, podemos ver que esta imagem, que tem um pai de div, está aparecendo agora com um verde sólido de dois pixels fronteira. Bem aqui, temos nossa imagem dentro de uma caixa, mas isto é, se você se lembra, apenas uma div com uma imagem de fundo. Por exemplo, se eu fosse remover esta borda aqui para essa div particular, nós não teríamos uma borda verde porque este é realmente um elemento div com uma imagem de fundo, não um elemento de imagem real. Vou reverter isso e voltar para aqui. O que eu vou fazer é ser um pouco mais específico aqui porque esta imagem tem um pai de div aqui, mas também um pai de div mais abaixo da linha. Eu quero ser mais específico aqui e fazer que div pai em vez do seletor de elemento para div. Se atualizarmos a página, você verá o mesmo resultado. Agora vamos dar uma olhada no que aconteceria se usássemos um seletor filho. Lembre-se, o seletor filho seleciona todos os elementos que são filhos imediatos do elemento especificado. Vou voltar ao meu editor de código e trazer o meu documento no navegador. Vou colocar um sinal de maior que entre aqueles dois. Isso denota que só queremos atingir crianças imediatas. Vou pressionar Salvar e, em seguida, atualizar a página. De repente, a fronteira desapareceu da nossa imagem, e a razão é porque se olharmos para os filhos imediatos deste div pai, os únicos filhos imediatos que ele tem, ele só tem um filho e isso é outro div. Nós não estamos segmentando esta tag de imagem mais porque ela não é um filho imediato desta div pai. Se fôssemos, por exemplo, empilhar estes, que podemos fazer em CSS, agora isso deve funcionar porque estamos direcionando uma imagem que está contida por uma tag div, que está contida por um elemento com um pai classe div. Podemos combinar esses combinadores diferentes também. Vou colocar isso de volta ao que era antes. Vamos passar para o próximo seletor. O próximo é o Seletor de Irmãos Adjacentes. Como o nome sugere, o seletor irmão adjacente seleciona todos os elementos que são irmãos adjacentes de um elemento especificado. O que significa adjacente está imediatamente a seguir. Por exemplo, o exemplo a seguir selecionará todos os elementos p que são colocados imediatamente após elementos div. Em vez de colocar isso em nosso código, eu vou apenas executar o exemplo aqui. Agora estamos direcionando todos os elementos p que vêm depois de uma div e estamos dando a eles uma cor de fundo de amarelo. Como você pode ver aqui, temos uma div com dois filhos, um é um p e o segundo é também um p. Mas estes não vêm depois de uma div, eles são na verdade filhos desta div, então eles não são direcionados nesta regra CSS. Uma vez que descemos aqui, este p vem depois desta div, modo que na verdade é acionado por esta regra. Se mudarmos isso para um seletor Criança, por exemplo, repente essas crianças aparecem com uma cor de fundo amarelo. Isto é apenas o alvo das crianças imediatas de Div. Por exemplo, se eu quisesse colocar em outro tipo de elemento aqui, talvez uma seção, e eu comecei esta seção e dentro eu tinha um parágrafo. Agora vou fazer isso e ver o que acontece. Somente o primeiro parágrafo terá a cor de fundo de amarelo. Isso porque este p não é mais um filho imediato de div, é um filho imediato de seção, e seção é um filho imediato de div. Mas este p não é um filho imediato do div. Se eu mudar isso e me livrar do seletor filho imediato e apenas mudá-lo para um seletor descendente e clique em “Executar”. Agora ele está de volta a destacar ambos estes porque p tem um pai de div mesmo que seja pai imediato. Estou combinando três exemplos lá. Espero que isso faça sentido para vocês agora ou esteja começando a fazer sentido. Novamente, à medida que você ganha mais experiência com isso, ele começará a solidificar um pouco mais. O último na seção de combinadores CSS é o seletor de irmãos geral. O seletor irmão geral seleciona todos os elementos que são irmãos de um elemento especificado. Pais e filhos são provavelmente um novo conceito para você nesta classe. Mas, essencialmente, se você entende pais e filhos, você deve entender o que é um irmão. São os outros filhos de um pai em particular. Em vez de criar uma nova seção em nosso documento, vou apenas clicar em “Experimente você mesmo”. Como você pode ver aqui, temos um seletor geral de irmãos bem aqui. O que isso está nos dizendo é que, cada p seguinte div no mesmo nível, queremos aplicar esse estilo particular também, que é cor de fundo amarelo. Uma das coisas confusas sobre esta regra em particular é, sim, ele alvo irmãos, mas apenas irmãos que vêm após a primeira parte do seletor, então, neste caso, a div. Este parágrafo 1, por exemplo, não está selecionado porque não vem depois desta div. Se eu cortasse isso e colocasse isso aqui, seria destacado. Esse é um dos pequenos truques deste seletor em particular. Mas como você pode ver este segundo parágrafo, que é na verdade uma criança deste div não tem o estilo de fundo cor-amarelo. Isso é porque não é um irmão, é na verdade uma criança. Isso cobre esses seletores de combinadores. Claro, mencionei que estes são alguns dos seletores mais avançados. Então eu não espero que você os domine neste vídeo, mas definitivamente experimente-os, experimente e você vai começar a entendê-los muito melhor. Outro seletor avançado é uma pseudo-classe. Lembre-se que usamos um exemplo de uma pseudo-classe. Usamos o estado de foco em um link. Você pode ver aqui que é o primeiro exemplo. Esse é provavelmente o exemplo mais comum de uma pseudo-classe. Mas você pode dar uma olhada aqui em baixo da sintaxe. Nós basicamente temos qualquer seletor que vamos ter de qualquer maneira, mas, em seguida, para direcionar o estado em que seletor particular, podemos ter dois pontos e, em seguida, colocar a pseudo-classe. Vimos aqueles para tags de link anteriormente nesta classe. Como você pode ver aqui, esses papéis, pseudo-classes. Pseudo-classes vêm mais comumente em links porque existem diferentes estados para links e links são, naturalmente, um elemento comum em HTML. Mas você pode ver alguns exemplos aqui de como poderíamos fazer um estado pairar sobre uma div ou outro elemento. Esse é provavelmente o uso mais comum de pseudo-classes para o estado alvo. Mas também podemos usá-lo para encontrar o primeiro filho ou qualquer número de crianças de um determinado elemento. Aqui podemos tomar o primeiro filho de um p, modo que ele irá combinar qualquer elemento p que é o primeiro filho de qualquer elemento e aqui podemos também combinar um seletor descendente ou qualquer número de seletores com este pseudo- classe do primeiro filho. Como você pode ver, está ficando um pouco complicado agora. Estamos usando alguns dos seletores de combinação que aprendemos pouco antes, e agora estamos combinando com uma pseudo-classe, que você possa encadear um seletor bastante longo em CSS. Você também pode usá-los em uma ordem diferente, para você possa direcionar todas as tags de ícone que tenham um pai que seja o primeiro filho de outro elemento. Você pode fazer qualquer número de combinações. Você também pode usar a pseudo-classe lang, que eu não tenho experiência com, então eu vou apenas para brilhar sobre ele. Há muitos exemplos de pseudo-classes aqui, então se você quiser usar isso como uma referência. Os principais são aqueles que você usou para determinar o estado de um link ou determinar se você está pairado sobre algo ou não, e os outros comuns são selecionar uma criança ou uma posição de uma criança. Por exemplo, este enésimo filho, isso irá selecionar todos os ps que são o segundo filho de seus pais. Você pode direcionar um filho específico dentro de um elemento pai. Seguindo em frente, vamos entrar em pseudo-elementos. Pseudo-elementos são como pseudo-classes aceitar, usamos outro dois-pontos. Para ser honesto, não estou usando pseudo-elementos tanto. Mas algumas coisas que podemos fazer com pseudo-elementos é direcionar a primeira linha de um parágrafo, e podemos direcionar a primeira letra de uma palavra ou parágrafo. Podemos combinar isso com classes como vimos na aula pseudo-classe, e podemos direcionar a primeira letra e a primeira linha de ps no mesmo documento CSS. Provavelmente o pseudo-elemento mais comum é antes ou depois. Usando antes que somos capazes de inserir algum conteúdo antes do conteúdo real do elemento. Neste exemplo, podemos inserir uma imagem antes de qualquer elemento em particular. Então aqui é o oposto, podemos inserir algum conteúdo após o conteúdo de h1s. Há também o pseudo-elemento de seleção que corresponde à parte do elemento que é selecionado pelo usuário. Eu não usei este antes, mas podemos dar uma olhada no exemplo aqui. Se selecionarmos qualquer conteúdo na página, podemos ver que nossa seleção agora está estilizada usando este pseudo-elemento. É um truque muito legal. Eu nem sabia que você poderia fazer isso antes de eu começar a preparar este curso. Aqui está uma lista completa de pseudo-elementos e também uma lista completa de pseudo-classes para você usar. Finalmente, e isso está se tornando uma grande lição, então talvez você queira atualizar depois disso voltando e verificando. Mas o seletor final sobre o qual eu queria falar é um seletor de atributos. O seletor de atributos nos permite selecionar elementos com um atributo específico. Aqui mesmo, se tivéssemos um atributo e valor de alvo é igual a sublinhado em branco, aplicaríamos um estilo a esse elemento específico que tem esse atributo e valor específicos. Vamos apenas clicar no primeiro “Experimente você mesmo” e dar uma olhada nisso. Basicamente, isso se aplicará a qualquer tag de link que tenha um atributo de destino, independentemente do valor desse atributo. Você pode ver aqui, estes dois têm um atributo alvo e não se importa qual é o valor desse atributo alvo, ele só se importa se esse atributo existe. Mas podemos ser mais específicos e dizer que só queremos direcionar tags de link que têm esse atributo e têm um valor especificado. Podemos entrar e dizer que só queremos direcionar tags de link que têm um atributo de destino com o valor de branco. Se eu executar isso, então você verá que só este é selecionado. Voltando aqui para este que usa um título, este seletor particular é usado para selecionar elementos com um valor de atributo contendo uma palavra especificada. Podemos pesquisar dentro do valor do atributo para esta palavra em particular, e se ela corresponder a qualquer parte do valor, este estilo particular será acionado. Vou fechar este e começar de novo com este exemplo. Você pode ver aqui que o título tem flor nestes dois benignos, este. Você pode ver que estes dois têm o estilo especificado, que é borda, 5px amarelo sólido. Outra maneira de usar esses seletores com pipe igual, e que será usado para selecionar elementos com um atributo especificado, começando com um valores especificados. Vamos apenas mergulhar no exemplo. Você verá aqui que tudo o que começa com a palavra que especificamos aqui e depois é quebrado por um traço será selecionado, mas não este em particular. Isso é apenas uma regra aqui que você pode ver uma nota, ela só vai ter como alvo uma palavra inteira, seja sozinho assim ou com um hífen. Este é um pouco de um seletor estranho. Acho que nunca usei este antes, mas isto é um material avançado. Há todos esses diferentes operadores especiais que você pode usar. Não vou gastar muito tempo nisso. Se você quiser ter essa criatividade com seus seletores, definitivamente volte e veja isso. Mas essencialmente as principais coisas que eu queria passar neste vídeo são os seletores avançados como combinadores e pseudo-classes, e muitos dos exemplos mais comuns que eu já coloquei em nosso projeto. Temos o seletor de crianças imediato, e acho que usamos aqui, o seletor descendente. Esses são os mais comuns. Não se preocupe se você não entendeu completamente os seletores de atributo de nível mais avançado aqui. Definitivamente você quer entender este para que você possa segmentar elementos com um atributo específico e valor que eu acho muito útil. Mas esses que eu honestamente nunca tive que usar antes, então não fique muito preso com eles. Os principais que eu realmente quero que você saiba são estes aqui, os combinadores, porque você definitivamente vai precisar usá-los em algum momento. Você definitivamente verá este, o seletor de crianças também. Pseudo-classes também para o estado, especialmente em um link, e especialmente para pairar, mas então é claro que você tem todos esses pseudo-elementos loucos para segmentar primeira linha, primeira letra, muitas opções disponíveis em CSS, mas não é necessário saber absolutamente tudo. Você sempre tem este site para referência. Espero que o vídeo não tenha sido muito longo e você não esteja totalmente sobrecarregado. No próximo vídeo, vamos encerrar as opções avançadas em CSS. Então vamos começar a compartilhar com vocês uma estrutura que vai tornar tudo isso muito mais fácil e economizar muito tempo. Vejo você no próximo vídeo. 27. CSS avançado — Media Queries: No último vídeo eu disse que iria cobrir alguns dos tópicos mais avançados em CSS, mas se olharmos para este menu aqui, há uma tonelada de opções diferentes disponíveis para nós. Podemos olhar para as opções avançadas disponíveis para cantos arredondados. Podemos usar imagens como fronteiras. Podemos criar fundos de gradiente. Podemos dar diferentes partes de nossa sombra de documento. Podemos aplicar sombras para adicionar DIVs ou aos nossos elementos de texto. Há tanta coisa que podemos fazer em CSS e é muito para cobrir neste curso, que provavelmente já é bastante longo. Se você quer que eu crie um curso CSS mais avançado, eu estou definitivamente aberto a ele, mas por enquanto, eu quero falar sobre algo que é muito importante no CSS e que é Media Query. No CSS2, Media Query foram introduzidas e o que eles fizeram foi possível definir regras de estilo diferentes para diferentes tipos de mídia. Mas agora no CSS3, eles mais comumente usados para olhar para a capacidade do dispositivo. Onde quer que haja vista a largura e a altura da janela de visualização ou do dispositivo, a orientação, seja paisagem ou retrato, e a resolução. Media Queries, como diz aqui, são técnicas populares para fornecer uma folha de estilo personalizada para desktops, laptops, tablets e telefones celulares. Consultas de mídia super importantes para Web Design Responsive e Desenvolvimento. Se rolarmos para baixo, podemos ver a Sintaxe de Consulta de Mídia e isso pode não fazer muito sentido aqui neste tipo de visão geral, mas se descermos aqui, podemos começar a ver alguns exemplos. A maneira como você iniciar uma consulta de mídia é com @media , em seguida, o primeiro pequeno valor aqui é tela. Tela, como você pode ver aqui, é usado para telas de computador, tablets, smartphones, etc Quando estamos fazendo web design responsivo, tela é o que queremos usar. Em seguida, colocamos um fim em dizer que estamos definindo uma nova condição e, em seguida, colocamos em min-width ou max-width ou ambos. Podemos restringir esses estilos específicos que definimos dentro dos colchetes desta Media Query para apenas o tamanho da tela de mais de 480 pixels. Os exemplos aqui estão um pouco faltando, então eu vou para a próxima lição aqui e olhar para mais alguns exemplos. Um bom exemplo aqui, se eu rolar para baixo, é este exemplo aqui que eu acho que é simples o suficiente para entender. Aqui temos nossos estilos padrão para cada tamanho de tela e, em seguida, temos nossas consultas de mídia. Este está dizendo, aplicar todos esses estilos quando a largura da tela é um mínimo de 600 pixels. Está dizendo que qualquer DIV com a classe de exemplo, queremos definir o tamanho da fonte para 80 pixels. Agora este está falando sobre o oposto. Quando o tamanho da tela for inferior a 600 pixels, queremos que cada DIV com a classe de exemplo tenha um tamanho de fonte de 30. Agora podemos ver o efeito disso se começarmos a redimensionar a janela do navegador. Bem aqui ele vai nos dizer quão grande esta janela em particular é. Se arrastarmos nossa própria janela até chegar a menos de 600, começaremos a ver uma mudança. Aqui vamos nós, estamos um pouco acima de 600 e então, assim que cruzarmos 600, o tamanho da fonte deste vai para baixo. Isso é porque nós especificamos isso assim. Mas podemos entrar aqui e especificar o que quiser. Podemos mudar a cor para verde. Poderíamos mudar a família das fontes. Vou clicar em Executar sobre isso e depois mostrar-lhe isso agora. Veja quando chega a menos de 600 pixels, temos tamanho da fonte 30 pixels e cor verde. Uma outra coisa que quero mostrar a vocês aqui que não mostra é vocês podem combinar a largura máxima, a altura máxima. Digamos, por exemplo, que eu queria criar outro nível dentro deste, eu vou manter esse max-width na verdade. O que eu vou fazer é outro e, e aqui, eu vou colocar em um min-width. Entre as larguras de 400 pixels e 600 pixels, vamos fazer o tamanho da fonte 10. Não vai parecer ótimo, mas estou pressionando Salvar apenas por uma força de hábito. Não vai parecer ótimo, mas pelo menos vai demonstrar neste exemplo. Vou colocar para aqui, uma largura máxima de 400 e fazer isso ainda menor. O que vai acontecer agora é, por padrão, nosso tamanho de tela é 825, que é maior que 600, então vamos ter um tamanho de fonte de 80. Mas quando reduzirmos entre 600 pixels e 400 pixels, teremos um tamanho de fonte de 10 pixels e uma cor de vermelho. Então, menos de 400, vamos ter um tamanho de fonte de cinco e uma cor de verde. Vamos ver se isto funciona. Agora vamos descer, agora estamos abaixo dos 600, mas acima dos 400. Temos uma maré vermelha de 10 pixels aqui. Agora, se descermos mais e descermos abaixo dos 400, vamos ver o que acontece. De repente, temos um pedaço de texto ainda menor e a cor é verde. Novamente, não é o exemplo mais prático, mas você pode ver que podemos definir diferentes, eu acho, folhas de estilo ou é realmente a mesma folha de estilo, mas diferentes seções da folha de estilo e definir estilos para larguras de tela particular. Isso é muito importante em CSS e você pode verificar aqui para exemplos extras. Também podemos direcionar a orientação. Podemos segmentar se é em paisagem ou retrato e, em seguida, o exemplo aqui é usando max-width e min-width para que possamos segmentar entre larguras de tela particular para fazer estilos específicos. O Media Query e Responsive Web Design é algo que veremos um pouco mais tarde agora que vamos começar a implementar o Bootstrap em nosso projeto. Vamos transformar essa bagunça gigante em algo um pouco mais agradável e construir mais algumas páginas. Depois disso, começaremos seu projeto de aula. Obrigado por levar comigo através desta classe bastante envolvida em HTML e CSS. Nos próximos vídeos, vamos começar realmente a construir algo que vai parecer muito agradável. Vejo você no próximo vídeo. 29. Reconstruindo nossa página web com Bootstrap: Agora, se você é um pouco de um auto-iniciante, você pode usar o conhecimento que você aprendeu nesta classe com HTML e CSS e a documentação aqui no bootstrap e começar a criar sua página web ou site. Mas para aqueles de vocês que precisam de um pouco mais de orientação, fiquem por perto porque neste vídeo, eu vou reconstruir nossa página usando Bootstrap. Há um monte de trabalho que precisa continuar com nossa página web atual é muito horrendo Eu não vou mentir. Isso é porque temos tentado incluir todos esses diferentes exemplos e elementos. O que eu vou fazer primeiro é removê-lo completamente e reconstruí-lo com Bootstrap. As coisas que eu vou me livrar para ter isso pronto é que eu não preciso de alguns desses estilos, então eu vou removê-los. Vou me livrar desses links e botões aleatórios. Vou deixar o primeiro parágrafo dele com a foto. nossa história é o segundo título, mas já não preciso da identificação. Vou me livrar deste segundo parágrafo. Vou manter a mesa como uma linha do tempo. Eu vou manter nossos valores como um ponto escuro e nossos serviços, eu vou sair como um div sem nenhuma classe particular sobre ele. Vou certificar-me de que não apaguei muitos div. Não, parece que estamos bem. Vamos ver onde estamos agora. Eu digo. Legal. Eu também vou excluir os estilos no meu styles.css. Você não tem que fazer isso sozinho se você passou muito tempo nele e você realmente gosta desses estilos, isso é apenas uma bagunça completa também. Vou apagar todos os meus estilos e começar completamente do zero. Aqui está. Você tem uma página web com um monte de elementos e praticamente nenhum estilo além disso aqui que eu vou me livrar, nós realmente não precisamos e os estilos que estão sendo aplicados automaticamente por bootstrap. A primeira coisa que queremos fazer é colocar tudo isso em um recipiente. Se queremos aprender sobre contêineres, acho que está aqui no layout. Só vou procurar o contentor. Você pode ver no layout, podemos usar contêineres para criar o sistema de grade. O que ele também faz é criar uma largura máxima em diferentes pontos de interrupção. Quais pontos de interrupção, para aqueles de vocês que não estão familiarizados com a idéia de um ponto de interrupção, é o que tínhamos antes quando estávamos fazendo as consultas de mídia que estávamos definindo e chicotes máximos. Então, quando chegou ao ponto de ruptura, foi quando começamos a mudar o conteúdo da página. Mas você vai vê-lo agora mesmo se eu voltar para aqui e eu criar uma div, dar-lhe uma classe de recipiente perto que eu vou colocar tudo isso em um pouco e, em seguida, colocar a tag div de fechamento. Agora devemos começar a ver esta limpeza muito bem. Vou atualizar a página. Agora, com uma largura de tela maior, podemos ver que ele só ocupa o suficiente para torná-lo mais legível. Mas se quisermos reduzir o tamanho dele, a largura máxima do contêiner muda. Se ficarmos muito apertados, vai só ir de largura total. Você pode ver pontos de interrupção aqui. Você vê como ele está alterando a largura do contêiner com base em diferentes tamanhos de tela. Esta é realmente uma característica poderosa do Bootstrap e temos web design responsivo direto para fora do portão. Implementar o contêiner é uma das vitórias mais fáceis que podemos ter no Bootstrap. Vamos ver o que mais podemos consertar no Bootstrap. Uma oportunidade que eu posso ver aqui além de eu ter que me livrar desse título. Deixe-me consertar isso. Uma coisa que podemos consertar aqui é esta mesa. Se eu quiser voltar para a documentação do Bootstrap, digite tabelas, e vamos ver como podemos estilizar tabelas de uma maneira agradável usando Bootstrap. A primeira coisa que precisamos fazer é dar à mesa uma classe de tabela. Mais uma vez, aproveitando as classes em bootstrap, podemos simplesmente colocar em uma classe e obter alguns estilos imediatamente. Vamos dar à mesa uma classe de mesa. Então, de repente, temos uma mesa estilizada. Como isso é ótimo. Temos mais algumas opções aqui. Podemos fazer a cabeça de uma cor diferente. Talvez usemos uma seção de cabeça de chá em nossa mesa para podermos ir em cima da cabeça. Temos aula de chefões, Doc de alimentação. Depois colocávamos isto e colocávamos a etiqueta de fecho. Vamos guardar isso e dar uma olhada no que parece. Sim, então agora temos uma linha de cabeçalho de doca, e agora a fonte foi alterada para a cor de branco. Talvez para os nossos serviços queiramos alguns cartões. Vamos digitar cartas. Lembro que coloquei um código como exemplo antes. Eu só vou selecionar isso. Vou criar uma seção aqui onde coloquei algumas cartas. Essa é a primeira carta. Posso colocar um segundo cartão. Vou pressionar “Salvar” nisso e ver o que acontece. Estes estão se exibindo um em cima do outro. Bloco de exibição, se você se lembra. O que podemos fazer é entrar em nosso style.css e tê-lo para que nossos cartões sejam exibidos em linha. Podemos modificar o estilo que já existe no Bootstrap. Podemos exibir bloco inline, pressione salvar e, de repente, eles exibem inline. Agora eu quero dar-lhe alguma margem, então eu vou dar-lhe alguma margem como esta. Vou fazer 10 pixels. Então, de repente, temos algum cartão com alguma margem. Vou duplicar isto. O que você pode ver aqui é que estamos aproveitando o Bootstrap, mas então também somos capazes de adicionar urna e estilos e modificar em cima dele. O Bootstrap tira muito do trabalho de base dele. Então podemos entrar e usar nossos próprios estilos e apenas referenciar as classes que eles criam, mas também modificar as classes que eles criam para obter algo que queremos. Para os nossos serviços, talvez nós colocamos negócios, talvez nós colocamos design. Só estou inventando isso aqui. Impressão e consultoria, design, impressão de um erro de consulta lá. Então vamos encontrar uma imagem para cada um desses cartões. Eu não acho que vale a pena ir e sourcing e nova imagem apenas para este exemplo. Eu só vou usar para o SRC de cada tag imagem, Eu só vou colocar na foto. Pressione “Salvar”. Agora você pode ver que temos três cartas e dizer, por exemplo, esta foi a nossa página sobre. Você foi aos serviços. Você pode clicar nesses botões e, de repente, ser levado para essa página. Agora nós só temos que hash para um espaço reservado, mas você pode apenas atualizar isso aqui. Tudo isso é apenas uma tag de link, mas é estilizado usando Bootstrap para parecer um botão. Podemos também alterar o texto sobre estes, por isso poderíamos dizer serviços de consultoria. Em seguida, atualize isso para design aqui. Confira nossos serviços de design. Nós já temos esses modelos configurados e podemos apenas entrar e modificá-lo. Esse é o poder do Bootstrap. Espero que tenha o suficiente para continuar um. No próximo vídeo, vou compartilhar com vocês seu projeto de aula. 30. Bônus: estilizando o contato e a página de layout: O último vídeo era para ser o último vídeo de compartilhamento de tela nesta aula, mas acabei de lembrar que prometi a vocês que iríamos estilizar um formulário, então eu estou incluindo este vídeo como um vídeo bônus, e nós temos a oportunidade aqui de estilizar as outras duas páginas HTML que temos em nosso projeto. Estou falando de contact.html e layout.html, e dentro contact.html, temos um formulário, então essa é uma boa oportunidade para mostrar como podemos estilizar um formulário usando bootstrap. Eu vou abrir uma nova guia para que possamos manter a documentação do bootstrap aberta, e assim como antes, eu vou arrastar em contact.html para que seja aberto em nosso navegador. Aqui está a nossa forma mal estilizada. Mas o que eu vou fazer é modificar isso usando Bootstrap e espero que pareça muito mais agradável. Voltando para a documentação, eu vou clicar em “Formulários” e como podemos ver aqui, é assim que nosso formulário vai começar a se parecer. Tem bons rótulos e estofamento, e botões agradáveis também, e aqui podemos ver o código que irá gerar este formulário aqui. Mas antes de tudo em nosso novo documento, precisamos realmente incluir Bootstrap, então o que eu vou fazer é abrir meu editor de código, e você pode ver aqui em index.html, a tag que usamos para incluir Bootstrap no índice. html. Vamos precisar copiar isso para contact.html, a fim de incluir o Bootstrap nesse documento também. Tudo o que eu vou fazer é copiar isso, passar para contact.html, e abaixo da tag título basta colar isso em. Vou pressionar “Salvar” sobre isso e depois passar por aqui, e agora devemos começar a ver nosso formulário mudar um pouco apenas incluindo bootstrap. Lá vai você. O botão mudou, a margem mudou, a fonte mudou, mas ainda não parece tão bom. O que eu vou fazer, é voltar para aqui, e fazer referência ao que está aqui em Bootstrap. Vou mover isso para um lado da tela, e assim podemos trabalhar exclusivamente com isso. Agora a primeira coisa que você vai notar é que há um elemento de forma obviamente, que nós temos, e então há diferentes divs com a classe de form-group, e dentro dessas divs, você tem todas as coisas diferentes que compõem essa parte do formulário. Você tem o rótulo, a entrada e algum texto no caso de haver um erro de validação. Aqui você tem a mesma coisa, rótulo e entrada, aqui embaixo, entrada de rótulo. Na verdade, você tem o rótulo abaixo da entrada neste caso. Então, finalmente, você tem botão do tipo enviar em vez de uma entrada do tipo enviar, coisa muito semelhante, mas apenas um elemento diferente. A primeira coisa que precisamos fazer é envolver cada parte do formulário no grupo de formulários, e isso nos dará o estilo que vai dividi-lo em várias linhas, então o que podemos fazer é nos livrar dessas tags br, nós não precisamos mais delas, e agora uma vez que isso é feito, eu vou abrir uma div, dar-lhe a classe de grupo de formulários, e então eu vou recuar isso, fechar a tag div, e eu vou fazer isso para o resto dos campos, então eu vou correr rapidamente através disso. Nós temos cada um deles envolvido em um grupo de formulários, mas a outra coisa que você vai notar é que nosso rótulo está apenas sentado lá sem quaisquer tags html envolvendo-o em torno dele. O que podemos usar é este elemento HTML chamado rótulo para fazer isso aparecer um pouco mais agradável, então o que eu vou fazer é envolver tudo sobre rótulos com o elemento de rótulo. Vamos fazer isso agora mesmo. Agora, você vai notar que há um atributo que ainda não temos, ele é chamado de atributo for, e o que isso faz é depois que você definir um ID na entrada, você pode colocar esse ID no atributo anterior, e que irá indicam que esse rótulo é antes dessa entrada específica. Não é 100% necessário, mas vamos seguir como um exemplo, e colocar em um atributo de frente. Agora, a segunda parte disso é realmente dar o mesmo ID para entrada. Mas antes disso há uma outra coisa que precisamos colocar em nossa entrada, e que é a classe de controle de forma. Assim como aqui, eu vou mover essa entrada para outra linha, e eu vou antes do nome. Na verdade, não importa onde ele está na posição da entrada. Vou colocar o controle do formulário de classe final. Agora eu posso colocar no ID do primeiro nome campo, e isso deve preencher um dos grupos de formulários. Vou passar agora e fazer essas mudanças para o resto dos grupos de formulários. Isso é quase tudo que precisamos para obter esta forma a afiada bem, a última coisa é mudar esta entrada do tipo enviar para botão do tipo enviar, e as principais diferenças entre uma entrada de tipo enviar é o valor, que é o que irá aparecer no botão vai para o campo de valor em uma entrada, mas em um botão, ele vai entre essas duas tags de botão. Primeiro de tudo, eu vou mudar isso para botão, e em vez do valor aqui, eu vou criar o início da tag e, em seguida, colocar na tag de fechamento. O passo final para isso é colocar na classe, então ele vai pegar todos os estilos de um botão no Bootstrap, então btn e, em seguida, btn primário. Guarde isso, e agora, quando formos para o formulário de contato, ele deve aparecer um pouco diferente. Vamos torcer para que pareça muito melhor. Lá vamos nós, podemos ver que está tudo quebrado em duas linhas diferentes agora, e o botão parece um pouco diferente. Mas o maior problema com isso é, claro, o preenchimento e a margem, então nós vamos apenas para alguma margem agora. Salve isso, e agora você tem um formato mais agradável. Vou deixá-la lá para os formulários. Há muito mais que você pode fazer para que seu formulário pareça diferente. Você pode adicionar entradas diferentes, então definitivamente confira a referência aqui para modelar formulários. Vou passar agora em layout.html e mostrar-lhe como podemos obter um layout semelhante ao que vimos no exemplo que copiamos. O que eu vou fazer é pegar nosso layout.html, soltá-lo aqui e então eu vou voltar para escolas W3, e lembre-se que encontramos isso na página de layout HTML. O que eu vou fazer é, como você pode ver este cabeçalho de primeira seção está estendendo toda a largura e então você tem seções e asides, eu acredito. Mas vamos realmente entrar e abrir esse arquivo, então eu vou entrar em html e abrir layout.html. Como você pode ver aqui, temos um elemento de cabeçalho com uma classe de cabeçalho, um elemento de seção com uma classe de seção, e elemento de artigo com uma classe de artigo, e, finalmente, um elemento de rodapé com uma classe de rodapé. Nós temos todos os elementos lá para segmentar e todos os estilos lá para criar um certo estilo, então o que eu vou fazer é em vez de criar uma folha de estilo totalmente nova, eu vou apenas incluir uma tag de estilo para que possamos incorporar alguns estilos. Tag de abertura de estilo, tag de fechamento de estilo, e uma coisa que realmente não foi mencionada no curso é que podemos incluir tags de estilo em qualquer lugar em nosso documento, ele não precisa estar na cabeça, mas é recomendável colocar na cabeça se você tiver uma seção head, este documento específico, nós realmente não temos uma seção head, e para este exemplo particular, nós realmente não precisamos configurar uma. Mas geralmente, é claro, você teria uma seção de cabeça. Primeiro, eu vou fazer referência a isso, dar ao cabeçalho uma cor de fundo de cinza e uma cor de texto de branco. Eu vou então para o centro de alinhamento de texto, e vamos ver o que temos agora. Legal. Bem aqui nós temos um monte de preenchimento, então eu vou adicionar um pouco de preenchimento agora, eu tenho preenchimento de 30 pixels. Lá vamos nós. Certo, então essa é a nossa cabeça. A próxima seção é esta seção de navegação aqui em baixo. Eu não deveria usar a seção de palavras porque você pode estar se confundindo com este elemento de seção real. Mas o próximo elemento de nível de bloco que podemos estilizar é este elemento nav aqui. O que eu vou fazer é entrar aqui nav, dar-lhe uma cor de fundo de cinza claro. Vou dar-lhe um pouco de estofamento e vamos ver o que acontece. Aí está, mas é claro, está ocupando toda a largura porque é um elemento de nível de bloco. O que eu vou fazer é para Nav e o elemento adjacente, que é artigo, definir estes para inline-block. Vou exibir o bloco inline. Você pode ver aqui que ele realmente está quebrando para uma nova linha. Mas se expandirmos a tela, você verá que ela aparece juntos. O que precisamos corrigir isso, é apenas restringir a largura da seção do artigo. Eu vou restringir a largura de 500 pixels, voltar para aqui, e agora você pode ver o lado do outro. Como você pode ver aqui, esta seção não é alinhada vertical para o topo, então eu vou corrigir a próxima linha vertical, topo. Guarde isso. Agora está aqui em cima. Eu vou dar alguma margem esquerda para o artigo, que não seja tão longe contra essa fronteira. H_1 era um pouco maior neste exemplo. Eu vou dar artigo usando um seletor descendente aqui, Artigo H_1. Isto irá selecionar qualquer H_1's dentro artigos, e eu vou fazer o tamanho da fonte duas vezes maior. Lá vamos nós. A seção final é o rodapé e tem um estilo semelhante ao cabeçalho, então eu só vou copiar palavra cabeçalho por palavra. Vou colocá-lo aqui e mudar isso para rodapé. Como você pode ver aqui, estamos usando seletores de nível de elemento todo o caminho, mas nós temos classes aqui também. Poderíamos alvejar através das aulas também. Em vez de cabeçalho, poderíamos usar cabeçalho ponto porque temos uma classe de cabeçalho. Poderíamos usar uma classe de nav em vez do seletor de elemento nav. Isso nos permitiria criar outro nav que não tivesse necessariamente essa classe e não tivesse essas regras afetadas. Vou guardar isso, ver como é e agora temos este rodapé. A próxima coisa que você vai notar é que este elemento não está se estendendo até o rodapé. O que precisamos fazer para isso é dar à seção uma certa altura e, em seguida, ter ambos os elementos em conformidade com uma altura de 100 por cento de seu elemento pai. O que eu vou fazer é só aqui, eu vou colocar em uma regra para mirar a seção. Vou dar à seção uma altura de 500 pixels. O que eu vou fazer é definir estes para ter uma altura de 100 por cento. Isso vai ser 100 por cento do elemento aparente, que é a seção. Salve e recarregue a página. Infelizmente temos alguma sobreposição aqui, e isso é porque temos estofamento. Então, para corrigir isso, vou remover o preenchimento do próprio equipamento de navegação. Agora você pode ver que está alinhando, mas não há preenchimento nisso. O que posso fazer é dar o estofamento, não o nav. Eu estou indo para nav ul preenchimento dez pixels. Você pode ver isso começando a aparecer um pouco mais agradável. Os pontos estão indo para o lado, mas não vamos usá-los de qualquer maneira porque estamos criando o exemplo aqui. Na verdade, se dermos mais estofamento, ele volta para cima. Podemos facilmente conseguir isso colocando em um estilo de lista, tipo de nenhum para se livrar desses pontos. Tudo bem, então agora parece muito parecido com o que temos aqui. Se expandirmos a janela, podemos ver essas seções serão responsivas a um certo ponto. Então, quando chega aqui, ele pára. Vamos precisar de alguns estilos mais responsivos. Então, para corrigir esse estilo em um tamanho de tela menor, você adivinhou, eu vou usar uma tag de mídia, então eu vou colocá-lo no topo. A razão pela qual eu estou colocando um top é que é uma coisa pequena. Mas, essencialmente, se eu fosse carregar esta página em uma rede lenta no celular, os estilos carregam de cima para baixo. Estes carregariam primeiro. Então, se eu tivesse mídia na parte inferior, ele iria carregar os estilos móveis por último. Pode haver esse tipo de atraso onde ele exibe os estilos de desktop e, em seguida, como ele carrega os estilos móveis, é uma coisa muito pequena que eu não me preocuparia, mas é por isso que eu estou colocando no topo e eu vou definir o ponto de interrupção aqui. Se abrirmos essa largura total e abrirmos o inspetor, o inspetor realmente nos dá a largura da janela. Vou arrastar isto para baixo até que se quebre. Há um pequeno atraso, mas o ponto de interrupção parece ser cerca de 640. O que eu vou fazer, fechar isso, voltar aqui e dizer largura máxima, 640 pixels. Vamos ver o que está acontecendo aqui. Se eu reduzir a largura da janela, como você pode ver aqui, é esta seção de artigo que está batendo para a parte inferior. Agora, o que eu realmente gosto de fazer quando estou depurando código é usar o inspetor. Eu definitivamente recomendo se você está confortável em usá-lo, definitivamente usá-lo. Vou pressionar o comando Alt I no Mac usando cromo. O que eu posso fazer é clicar com o botão direito do mouse neste texto que foi para baixo na página e inspecionar o elemento. Estou inspecionando o artigo aqui e posso ver que uma largura de 500 pixels está se aplicando. Temos um tamanho de tela agora de menos de 500 pixels. Vai causar alguns problemas com o tamanho da tela. O que eu vou fazer é em vez de 500 pixels, mudar isso para 250 pixels. Veja se isso funciona mesmo você adicionar um tamanho de tela menor ir para baixo. Ele ainda está quebrando em um tamanho de tela menor. Talvez eu faça um 150 pixels. Tudo isso acontece apenas no nosso navegador. Então, se eu atualizar a página, essas alterações não são permanentes. Mas se eu entrar aqui e criar uma regra para o artigo, então abaixo da largura de 640 pixels, a largura dos artigos agora será de 150 pixels. Agora, você provavelmente quer usar mais termos relativos aqui. Mas neste exemplo básico, eu vou apenas colocar em um valor fixo. Mais uma coisa que precisamos ter certeza de que isso substitui o que está aqui embaixo nesta decoração de regra é a tag importante. Neste caso, não há problema em usar importante. Lembre-se, você tem que ter cuidado com o importante, mas nós realmente queremos que a largura diminua. A alternativa seria mudar isto e tornar este termo mais relativo. Mas para este exemplo, eu só vou jogar importante. Vou atualizar a página e você verá que não há diferença ainda. Mas se eu reduzir a largura da janela e ela chegar a esse ponto de quebra de 640 pixels, o texto fica menor. Lá você pode ver mesmo em um tamanho de tela minúsculo, ele ainda está aparecendo bem. Agora está me incomodando um pouco que uma vez que chega aqui, é muito pequeno. Então eu vou tentar criar isso com uma largura relativa. Vou colocar isso de volta, e vou mudar isso para uma largura relativa de 55%. Salve isso e, mais uma vez, você não verá alterações até que realmente alcancemos esse ponto de interrupção de 640 pixels. Mas se eu descer mais, você verá que ele atinge esse ponto de interrupção e, em seguida, tem uma largura relativa. Se descermos todo o caminho, ainda vai funcionar. Tudo bem, então isso é praticamente o mais longe que eu queria ir neste vídeo bônus, agora você pode me ver trabalhando através de um desafio de estilo usando CSS. Espero que isso vai mostrar que há desafios ao longo do caminho com CSS, você joga alguns estilos em, você percebe que afeta outros elementos na página. Em seguida, você modifica atributos diferentes, altera a estrutura de HTML às vezes também, para criar a aparência que você está procurando e certificar-se de que ele funciona em todos os tamanhos de tela. Espero que este vídeo tenha sido um bom complemento para sua aprendizagem nesta aula. No próximo vídeo, vamos encerrar tudo e começar seu projeto de aula. Então, vemo-nos na próxima. 31. Conclusão e projeto do curso: Tudo bem, então eu espero que você esteja pronto para terminar de construir o resto do seu site baseado em conteúdo estático com HTML e CSS. Lembre-se, pessoal, se você precisar de alguma dica ou orientação, certifique-se de deixar seu comentário na caixa de discussão abaixo, e eu farei o meu melhor para apontá-lo na direção certa. Quanto à implantação do seu site, que é colocá-lo ao vivo na internet, eu já abordei isso anteriormente na minha classe, entendendo o desenvolvimento web. Então, basta ir para o primeiro vídeo sobre implantação nessa classe e você terá seu site pronto e funcionando em nenhum momento, se é isso que você quer. Então isso conclui esta classe em HTML e CSS. Obviamente, apesar de aprofundar essas duas línguas, há muito mais na web do que apenas estrutura e estilo. Então fique ligado. Pretendo lançar mais cursos para você construir seus conhecimentos de desenvolvimento web nos próximos meses. Então, obrigado por assistir e espero vê-lo em algumas outras aulas.