Não tenho medo de código (nem de zumbis): HTML e CSS para escritores, editores e iniciantes

1. Introdução: Quer você escreva para viver ou apenas blog aqui e ali, conhecer alguns HTML e CSS irá ajudá-lo a se destacar na paisagem pós-apocalíptica que chamamos de Internet. Este curso vai expandir seu conhecimento de HTML e CSS, e deve ajudá-lo a realmente matar zumbis onde quer que eles possam aparecer. Se você nunca teve um HTML ou CSS antes, eu recomendo que você volte e dê uma olhada no meu curso, Código não é tão assustador quanto zumbis, é HTML e CSS para escritores, editores e iniciantes. Isso vai realmente começar você sobre como escrever Tags, como escrever CSS, essas coisas. Se você já sabe disso ou tem alguma idéia, então você pode, por favor, ir em frente neste curso e aprender. Meu nome é John Ray e sou um desenvolvedor web e professor universitário que tem construído sites desde o último milênio. Vamos aprender algumas habilidades e derrotar alguns zumbis. 2. Ferramentas de Zumbis (sinalize se você tiver tomado "Code não é específico que isn't como Zombies"): Olá. Neste episódio vamos falar sobre quais ferramentas você precisará para trabalhar com este curso. A verdade é que você não precisa de muita coisa. Existem muitas coisas diferentes que você pode usar, mas aqui estão algumas recomendações. Primeiro de tudo, editor de texto simples, você pode obter isso de, se você estiver no Windows, você pode usar o Bloco de Notas ou se acontecer de você estar em um Mac, você também pode usar a edição de texto, embora você deve usá-lo em seu modo de texto simples. Tudo isso dito, enquanto você pode usar um editor de texto simples, provavelmente não é o mais ideal só porque ele não lhe dá tanta ajuda quanto possível. Para isso eu recomendo extra um editor de codificação de cores. O que ele faz, ele vai codificar o código de cor para que você possa realmente ver que tipos de código ou pedaços de código, como eles interagem uns com os outros e as tags ficam em uma cor diferente, então dizer, conteúdo e algumas dessas coisas. Isso torna muito mais fácil depurar e descobrir se você tem um erro de sintaxe ou algo acontecendo ou algum outro tipo de erro. Para esses erros de ponto feliz, Notepad ++ eu acredito estar disponível em toda a plataforma, mas definitivamente está disponível no Windows. Atom está definitivamente disponível em toda a plataforma, outro, Brackets e, em seguida, Sublime Texto é provavelmente um pouco além do nível de habilidade. É um grande editor de texto, e um editor de texto muito poderoso e provavelmente mais do que você precisa. Eu não compraria se não precisasse. Notepad ++, Atom e Brackets são todos gratuitos para download. Realmente qualquer outra coisa que você usa, qualquer outra ferramenta de codificação para HTML e CSS deve funcionar bem, praticamente qualquer coisa, realmente. O outro que eu vou recomendar embora é Codepen.io. Este é um site que está disponível, gratuito para usar, é fácil de usar, atualiza automaticamente conforme você digita, que é super útil como você está aprendendo, e ele cuida de todas as coisas inquietas com apenas como construir uma página e o que fazer por essas coisas. Ele permitirá que você apenas se concentre no código que você deseja focar, em vez de ter que lidar com todo o código em torno desse código que você precisaria se você estiver usando apenas um editor de texto básico. Qualquer classe demo bem ser Codepen.io. Vamos dar uma olhada nisso. Vamos ver como configurar, como criar uma conta gratuita. É importante salvar seu trabalho principalmente para que você possa voltar para ele e corrigi-lo e também jogar com ele. Quando você começa a trabalhar em seu projeto, é bom tê-lo no lugar onde você pode salvá-lo ao longo tempo enquanto você percorre o curso e é capaz de então apenas publicá-lo para que outras pessoas possam ver e olhar para o que você fez. Vamos dar um soco na garganta dos zumbis. Este é o site da caneta de código. Aqui embaixo, no canto inferior esquerdo, você vai ter que se inscrever. Clique nisso, inscreva-se com um e-mail. Esse processo é bem típico. Vou fazer login só porque já tenho uma conta, fazendo login. Agora, uma vez que você está logado, eu já tenho, estas são algumas canetas que eles acham que você pode estar interessado em. Mas o que vamos fazer é ir para explorar, vamos criar em uma caneta. Em CodePen uma caneta é apenas isso. É uma parte HTML, CSS e JavaScript de uma página que você pode jogar com ela. A parte JavaScript não é algo que precisamos. O que vou fazer é minimizar isso. Na verdade, não vamos lidar com CSS agora. Chegaremos a isso um pouco mais tarde no curso. Vou minimizar isso também. Só temos um pouco de HTML. Eu só vou escrever uma coisinha rápida aqui, Olá mundo. A maneira padrão de começar a aprender uma linguagem de programação é digitar hello world e enviá-la para a tela. Como você pode ver quando eu digitei ele saiu. Codepen.io é apenas uma ótima ferramenta para usar, muito fácil e espero que torne sua vida muito mais simples como você tenta acompanhar. Essas são as ferramentas. Obrigado. Vamos para a próxima seção. 3. Marcação sem morto: Neste vídeo, vamos falar sobre maneiras de marcar conteúdo para exibição, comunicação, inscrições e sobrescritos, definições e abreviaturas, elemento de tempo ou tag de tempo, conteúdo e código pré-formatados, e a poderosa tag pequena. A primeira coisa que queremos falar é a sub tag ou subscrito, e ele apenas faz o que você esperaria que um subscrito faça, desloca a linha de base para baixo 25% e usa texto menor do que o texto ao seu redor. É melhor usado para notas de rodapé, como tenho certeza que você está bem acostumado. Também para fórmulas químicas como H2O etc. Ou para numerar variáveis matemáticas como Z1 a Z horda etc. Sobrescrito cria texto sobrescrito, muito como você esperaria com expoentes. Apenas a linha de base acima 50 por cento, usa um tamanho de texto menor, e é melhor usado para expoentes. Z em cubo, por exemplo. Também algo chamado letras superiores, que é um estilo de abreviação comum em francês e línguas de possibilidade. É tecnicamente uma coisa diferente do sobrescrito, mas se você está implementando em HTML normalmente é feito com a tag sup ou a sub tag. Também números ordinais, o 106º ou terceiro ou quinto ou qualquer outra coisa. Às vezes você precisa de uma marcação, uma definição ou uma abreviação, algo que você verá, comumente. A tag dfn é a marcação para uma tag de definição. Com o fn você também pode usar um atributo título que define a coisa exata definida. Você também pode adicionar um link da tag dfn diretamente a uma definição que pode estar mais abaixo na página. Estou usando algo chamado fragmentos de página ou tags âncora. Falaremos sobre isso daqui a pouco. Com a tag abbr, você pode configurar abreviaturas. Sim, abreviatura é uma abreviatura para abreviaturas. Você também pode fazer acrônimos e uma grande variedade desses também. Semelhante à definição, você também pode usar um atributo title. Mas a coisa sobre atributos de título para abbr e dfn, é que eles só são úteis para usuários do mouse porque ninguém mais pode ver a dica de ferramenta. Eles só são úteis também para o subconjunto deles que sabem passar o mouse sobre a abreviatura com o mouse, ou saber que a abreviatura está sendo usada, eles podem até passar o mouse. Bem, eu recomendo adicionar o atributo title para ambos os seus dfns e abbrs, menos que você usá-los em conjunto, então você só precisa dele em abbr que está dentro de um dfn. Eu teria cuidado não só para usar isso, mas para garantir que você, como é particularmente boa prática, defina a sigla de abreviação quando você usá-lo pela primeira vez apenas para garantir que todos estão na mesma página e Todo mundo sabe o que está acontecendo. O elemento de tempo, que é usado para marcar datas e horas específicas ou durações de tempo. Por exemplo, horário de 23 de agosto, duração de 12 horas e 37 minutos. Para torná-lo um pouco mais fácil para SEO e um pouco mais fácil se o som de pé para leitores de tela, há algo chamado o atributo datetime. formatação deste é muito importante porque ele tem que ser legível por máquina. Ele tem que vir em um formato que a máquina está esperando ou o computador está esperando. Por exemplo, temos isso é 23 de agosto 2025 às 17:00, 52 minutos e 42 segundos. Geralmente, se você soltar qualquer parte disso, você pode criar uma string válida como 2025-08-23 ou 2025-08 ou 1752, etc. Esses são todos valores de data e hora válidos. A tag pré, usamos para código ou para outro texto pré-formatado. Ele é formatado em uma fonte monoespacial, geralmente courier novo, e espaço em branco é mantido intacto e não é recolhido em um único espaço como normalmente é em HTML. Se você tiver dois espaços no lugar, ele mostrará dois espaços em vez de apenas mostrar um espaço. A tag pequena originalmente é usada para tornar o texto menor agora está em HTML 5, usado para coisas como avisos legais, avisos de direitos autorais e comentários secundários. Usar este código é muito mais semântico significando que ele fornece mais informações para o navegador e [inaudível], etc Em seguida, apenas ter um div genérico ou span genérico que torna o texto menor. Vamos dar uma olhada em algum código ao vivo. Aqui nós começamos com o subscrito, você pode ver que o contágio zumbi pode ser obliterado. Assinado de um aqui mesmo usando sub tag ou aqui água H20 também carrega praga zumbi ou a soma de Z1 para Z horda. Superscritos, temos o Z, três ou Z em cubos. Era medo de mortos-vivos. A letra superior para os homens era O. mademoiselle zumbi significa Mademoiselle zumbi ou os números ordinais para a 106ª infantaria. Além disso, temos definição e abreviação. Aqui temos o dfn do título de zumbi. Aqui se eu passar o mouse sobre ele, ele me mostra o que está no atributo título. Então eu só tenho a informação além dela, o que você quiser colocar. Temos uma abreviatura sob zumbi, que está aqui em cima, esta informação aqui. Então, na resistência humana, coloquei uma abreviatura dentro de um dfn e então só fiz um título na abreviatura, não apenas na definição. Então, novamente, coloque isso logo depois dele para ter certeza de que todos estavam na mesma página. O valor de tempo, tag de tempo está aqui, apenas envolve aqui, não faz nenhuma alteração real no texto subjacente, não faz nenhuma alteração de formatação ou qualquer coisa assim. Só o torna mais legível por máquina. Temos a data e hora aqui de 23 de agosto de 2025 em 1752 42. Você pode incluir mais específico ou eu também poderia tê-lo deixado na primeira parte aqui. Então também temos duração. Se estou durando, não preciso de um encontro. Eu só tenho a quantidade de tempo, tais como 12 horas 37 minutos, datetime etc Logo em seguida temos texto pré-formatado, e para isso eu joguei em torno de um pouco com formatá-lo. Eu peguei a abreviatura só para ter um texto lá. Então eu brinquei com espaçamento, de modo que eu tenho todas essas coisas extras e o espaço em branco permanece intacto. Isso é um espelho direto do que é mostrado no código. Quanto a todos aqui temos uma pequena etiqueta. Este é o texto de tamanho normal. Então eu realmente fiz uma pequena etiqueta, que é esta aqui, que é apenas um pouco menor. Então eu adicionei uma segunda etiqueta pequena dentro da pequena etiqueta apenas por diversão. Isso é divertido estranho. É uma pequena tag dentro de uma pequena tag, e isso o tornou ainda menor, um nível mais abaixo. Então, é claro, no fundo aqui temos a nossa nota de rodapé. É isso para a nossa marca de mortos-vivos. Agora, vamos falar sobre edição. 4. Como editar Zumbis: Este vídeo vamos falar sobre edição. Estamos falando de maneiras de marcar conteúdo, para mostrar material editado, vamos falar sobre excluir tag para remover conteúdo, o site e atributos de data e hora para ajudar a explicar quando as coisas aconteceram e como elas aconteceram . Uma tag de inserção, que será quando você adicionar conteúdo. Novamente, cite e data-hora atributos, também vai trabalhar com eles e uma marca marca que destaca as coisas e, em seguida mostrar-lhe como você pode adicionar uma seção sem grupo ou pergunta apenas para uma maneira de fazê-lo. Muito bem, isto é a edição de Zombie. Às vezes você precisa mostrar marcas de edição. Eu recomendo que você faça isso somente se as edições precisam ser públicas com como uma lei ou com estatutos ou algo assim, algo onde é realmente importante que você possa ver o histórico editado dele. Para diferenças de documentos legais entre dois documentos e para garantir que você é transparente. A tag del coloca uma linha através do texto, assim como tachado. Cite atributo permite que você faça referência a uma URL para por que as alterações foram feitas para minutos de reunião ou, possivelmente, um documento legal, etc atributo data-hora leva uma string de data devidamente formatado e apenas dá a hora ou data em que esse foi feita uma mudança específica. E também há algo chamado “S tag “, que é para “strike-through”. Visualmente, estes fazem a mesma coisa, a diferença realmente é que Del é usado mais para significar edição, enquanto S é um pouco mais para conteúdo não é mais válido. O INS ou ins mostra onde o texto foi inserido. Novamente, você é o atributo cite, mesmo que o del, é uma URL referenciando o motivo da mudança. Atributo data-hora, novamente, mesmo que del, mesmo que a cadeia de tempo, não sai da data e hora da alteração. Em seguida, há a marca marca que é um destaque, marca destaca texto, coloca um fundo amarelo atrás dele, deve ser usado para conteúdo de relevância, não conteúdo de importância. Strong deve ser usado para conteúdo de importância. Mas eu acho que Mark poderia ser usado muito com edição apenas para ter certeza de que você é ou para apontar coisas que talvez alguém queira olhar para ele, certificar-se de que eles estão corretos. Novamente, por importância, você deseja usar a tag B mais forte de preferência a tag forte. Marcar instrução não ser usado quando o mesmo conteúdo ao mesmo tempo, eo contexto de edição pode ser conteúdo que precisa de um segundo olhar ou alguma atenção especial. Talvez o editor não sabia como recompensar essa frase, etc Eu também queria chegar a uma maneira de escrever notas em porque às vezes não é suficiente para o mercado, você também quer escrever uma nota de algum tipo, então há não é uma maneira padrão de fazer isso, mas vou te dar uma espécie de exemplo. Qual é o CSS para torná-lo bonito? Então você terá a opção de fazer isso ou se você encontrar uma maneira melhor, você é bem-vindo para fazer isso também. A nota é grande o suficiente, você pode colocá-lo em um elemento de lado, mas isso é um elemento de nível de bloco. Ele não funciona muito bem para notas embutidas, então o método que estou usando é uma tag span e alguns CSS para torná-lo um pouco diferente do resto do conteúdo. Eu só estou usando uma classe de nota e apenas embrulhando a nota nessa classe particular com a tag span. Certo, então vamos dar uma olhada em algum código. Aqui tenho a carta do Presidente aos nova-iorquinos depois da invasão dos zumbis, alguma edição, espero antes de sair. Estes são alguns del tags, como você verá aqui. Eu também adicionei uma operação cite e uma data-hora para este del particular. Eu não fiz citações em todo apenas este conteúdo só porque ele iria ficar realmente esmagador. Eu fiz aqui e fiz para a inserção aqui, e você provavelmente deveria fazer isso para cada lugar que você está fazendo mudanças, mas neste caso, eu não fiz isso para deixar as coisas um pouco mais limpas. Mas eu adicionei data-hora para quase tudo porque, em teoria, a data-hora mudaria um pouco cada vez que é mudado, assumindo que você está usando segundos, etc Quão granular você quer ser é até você e os requisitos de A sua situação. Temos uma exclusão aqui, temos uma inserção, temos uma marca. Mais inserção, mais exclusão. Agora uma coisa que está acontecendo aqui, e eu realmente adicionei algumas notas aqui. Ainda não as estás a ver porque não as mostrei porque é confuso. Se você não sabe o que eles são, eles apenas aparecem como texto normal, e uma coisa que eu não gosto sobre a tag Inserir é que ela sublinha as coisas. A razão pela qual eu não gosto disso é porque isso é muito mais usado para links do que para texto inserido, poderia confundir algumas pessoas, então eu apenas fiz alguns CSS para ajudar a tornar as coisas mais claras. Tudo bem, então se adicionarmos estes, eu configuro-o para que as exclusões sejam fundo de vermelho, as inserções têm um fundo verde, as marcas ainda são amarelas, e então eu adicionei um fundo de azul às notas. Você pode ver que há notas adicionadas aqui. Há muita coisa apagada, provavelmente para ajudar a salvar a cara do Presidente. Mas estas são apenas algumas coisas que você pode fazer para ajudar a garantir que a comunicação é adequada e que você está fazendo o que precisa para explicar isso às pessoas. Tudo bem, é isso para a edição. Agora vamos passar para símbolos HTML. 5. Apocalipse simbólico: Neste vídeo, vamos falar sobre símbolos HTML. Os colchetes angulares ou comerciais são usados para designar código. Então, quando você realmente precisa mostrar isso, você pode fazer uma coisa um pouco diferente e diz, nós vamos falar sobre aqui. Falaremos sobre espaços inquebráveis, marcas de propriedade intelectual, moeda , aspas e traços e hífens. Qual é o símbolo? Muitas vezes você precisará mostrar um colchete angular ou outro caractere que designe código. Então você precisa ter alguma maneira de mostrar que não é código. A maneira como você faz isso é através de um símbolo HTML. Os símbolos começam com um e comercial e com um ponto-e-vírgula. Muitos dos comuns receberam um nome mais memorável e são chamados de entidades HTML. Há muito mais símbolos que você pode usar do que aqueles que são nomes memoráveis e eles têm um código numérico com eles. Por exemplo, aqui temos menos que e maior que. Então ele vai para comercial e ponto e vírgula LT. Então LT para menos e maior que, ele vai ser comercial GT para maior do que ponto-e-vírgula. “ Ampersand”. Como o e comercial agora significa o símbolo HTML, precisamos fazer algo diferente com ele. Então e comercial é, na verdade, quando um ponto e vírgula AMP comercial. Agora alguns, você verá às vezes que um e comercial apenas por si só também será pego como um e comercial em vez de como código. Para uma melhor compatibilidade, eu recomendo ter o ponto e vírgula AMP completo e comercial. Mas há contextos em que pode estar tudo bem ou pode funcionar apenas para ter o e comercial. Espaço não-quebrável. Isso é usado muito para apenas se você é uma daquelas pessoas que tem que ter dois espaços após uma linha. A única maneira de fazer isso em HTML é ter um espaço regular e um espaço não-separável. Então, duas palavras que são unidas por um espaço não quebrando não irão quebrar uma quebra de linha. Então você pode manter essas duas palavras juntas, não importa onde o texto caia. Ele também impede que o espaço em branco seja recolhido em um único caractere. Então, normalmente, se você adicionar como seis espaços ao espaço, duas coisas fora, o melhor espaçamento deve ser feito com CSS em vez de com HTML. Mas por alguma razão precisa de alguns espaços extras, você pode fazer o espaço não-quebrando um par de vezes, e isso vai sair como esse número de espaços em vez de recolhê-los todos em um único espaço. Parece comercial, NBSP é para espaço não-quebrando. Então, no domínio da propriedade intelectual, e nós temos direitos autorais. Temos o símbolo de direitos autorais, que é comercial e cópia. Há também um sinal registrado, que é comercial e cume, e o símbolo de marca comercial, que é comercial e comercial. O Euro vai ser um euro comercial, centavo vai ser um centavo comercial, libra, Libra comercial, iene, iene comercial. Bastante auto-explicativo nesses casos. Às vezes, quando você está trabalhando com sistemas de gerenciamento de conteúdo, haverá alguns campos que não lidam muito bem com aspas. A principal razão que isso acontece é que as aspas podem confundir o código e fazer com que ele termine antes que seja suposto. Então, a maneira de contornar isso é, se você ainda pode acessar o back-end da página, você pode adicionar aspas através de símbolos HTML. Então comercial e quot, Q-U-O-T funcionará para aspas duplas de despejo. Você também pode usar esses códigos numéricos para adicionar aspas inteligentes ou para esquerda e direita e inteligente single e smart double. Então, isso é inteligente single aspas esquerda. Esta é a citação simples inteligente, certo? Esta aspas duplas inteligentes à esquerda, e a aspas duplas inteligentes à direita. Existem três tipos de traços em HTML. O primeiro é o hífen, esse é o do seu teclado. É o mais curto dos três, e é usado conectar duas palavras relacionadas. Estamos bastante familiarizados com isso. Para colocá-lo no HTML, basta usar a tecla do teclado para en traços e traços apenas um pouco mais longos do que um hífen com a letra n. Ele é usado para uma gama de números ou conexão entre duas palavras. Aqui estarão alguns exemplos. Em HTML, você vai usar comercial En traço, ou o número é 8211. Em traços semelhantes a En traço, é a largura da letra m, e é o mais longo dos três. É usado para separar duas cláusulas relacionadas, mas separadas ou configurar uma cláusula da frase. Então, ser um zumbi disse que não. Colocando um HTML você usa o traço Em e comercial ou 8212. Tudo bem, vamos dar uma olhada em algum código. Então eu só tenho exemplos aqui para mostrar como tudo isso funciona. Então temos menos do que, aparecendo aqui corretamente com maior que, comercial e GT, comercial e aparecendo aqui. Temos o espaço não-quebrando está mostrando como um espaço. Você pode ver que há realmente dois espaços lá. O segundo é o espaço não-quebrável. Temos o símbolo de direitos autorais, temos a marca registrada e temos a marca registrada. Nós temos Euro, centavo, Libra, Yen, burro, aspas duplas, aspas simples inteligente esquerda inteligente aspas simples direita, smart double aspas esquerda, smart double aspas direita. Agora temos nossos três traços. Temos um hífen, o traço e o traço em. É isso para cada um dos símbolos. Agora vamos passar para fragmentos e outros tipos de links. 6. Frades de Zumbis e outros links: Neste vídeo, vamos falar sobre links para fragmentos de página, links de e-mail, links de telefone e links de SMS. Fragmentos permitem vincular a uma parte de uma página ou a um fragmento de uma página. Os usos possíveis incluem alguns subnavegação e termos conectados às suas definições, conectando perguntas às suas respostas, link na parte inferior da página, backup para o topo da página. Há duas partes nisso. Um é o fragmento ao qual você está se ligando, e o outro é o link para esse fragmento. Fragmento é definido por um atributo ID no elemento HTML. Qualquer elemento HTML que você deseja usar e, em seguida, o link que você usa deve ter uma hashtag e, em seguida, o nome do ID. Se é um link dentro da página e o ID é morto-vivo, você pode simplesmente fazer hashtag mortos-vivos, volta para mortos-vivos, etc Você também pode adicioná-lo ao final de qualquer URL, assumindo que o ID existe dentro da página, o irá rolar para baixo até onde você está. Por exemplo, se olharmos aqui provavelmente não vai funcionar porque eu não acho que eu tenho uma identificação como essa na página do instituto de mortos-vivos, mas se houvesse, isso estaria lá. É assim que você faria ligando a um fragmento. Se precisarmos vincular a um endereço de e-mail, usaremos a tag âncora como fizemos antes, mas em vez de um URL, usamos email para dois-pontos e, em seguida, o endereço de e-mail que estamos tentando enviar por e-mail. Nós também ligamos para números de telefone, o que é particularmente útil em dispositivos móveis, onde você pode tocar em um número e ligar para ele. Por exemplo, neste caso você teria tel, dois pontos e, em seguida, o número de telefone. Eu acredito que ele não precisa ser nesse formato particular de três números traço três números traço quatro números. Para uma chamada americana, é claro, se você estiver fazendo internacionalmente, provavelmente você vai querer fazer um mais um e depois o resto do número. Assim como um link de telefone, você também pode fazer um link SMS e basicamente funciona exatamente o mesmo, exceto para SMS dois-pontos em vez de tel, e ele enviará um texto em vez de uma chamada. Vamos ver isso em código. Aqui Temos o correio para e, em seguida, o instituto zombiekilla @undead. Você também tem um link telefônico de 855-555. Agora o número de telefone real apenas [inaudível] Aqui nós temos o link SMS que eu estou em então para demonstrar o fragmento, o que eu tenho é uma pergunta aqui e, em teoria, isso seria mais perguntas. Se eu quiser clicar sobre isso, ele vai me levar mais para baixo na página para onde está a resposta. Isso me leva até o fim e há um pouco de espaço extra lá. Mas então eu posso rolar todo o caminho de volta para cima e ver a página novamente. Se eu clicar nele, eu vou novamente, é claro, voltar todo o caminho para baixo e rolar de volta para cima. Isso é tudo para fragmentos. Em seguida, vamos falar sobre multimídia. 7. Hastes multimídia: Em primeiro lugar, precisamos falar sobre o elemento fonte, que é a base para alguns desses outros elementos. O elemento de imagem, que é uma tag fantasia ou imagem. Falaremos sobre isso em um segundo. Há codecs de áudio e vídeo, ou como áudio e vídeo podem ser armazenados e quais algoritmos são usados para compactá-los, e então temos o elemento de áudio e o elemento de vídeo, e finalmente, o elemento iframe. HTML5 trouxe consigo suporte para uma variedade de mídia. Os backbones dessas mídias são compatíveis com a tag de origem. Diz ao navegador onde procurar o arquivo e oferece várias opções com base no que um codecs que esse navegador específico suporta. Tudo bem. O elemento de imagem permite que você defina imagens diferentes para diferentes tamanhos da tela. Ele também lhe dá um fallback se o navegador não acontecer para suportar o elemento de imagem. Neste caso, o elemento de origem usa um atributo de conjunto de código-fonte, mas o áudio e o vídeo usam apenas o atributo de origem. Há também outra maneira de fazer isso usando um atributo de conjunto de código-fonte na tag de imagem em si, mas acho isso um pouco mais difícil de envolver sua mente e os benefícios são comparativamente pequenos nesta fase. Pode ser um pouco mais eficiente. Dê ao navegador um pouco mais de margem de manobra na escolha da imagem certa. Mas o elemento de imagem também permite que você faça imagens diferentes de tamanhos diferentes e fazer o que é chamado de Art Directing, que permite que você coloque em diferentes partes de uma imagem que você pode estar interessado em mostrar nos diferentes tamanhos. O elemento de imagem parece algo assim. Temos a fonte definida aqui com o arquivo real que vamos usar. Sua consulta imediata aqui com 40em min-width. Como você pode se lembrar da última classe ou de outras classes que você tomou talvez, 1em é igual ao tamanho padrão da fonte para o site. razão pela qual estou associando a consulta de mídia com o tamanho da fonte é que algumas pessoas farão sua fonte maior. Se o conectarmos em uma espécie de tamanho da fonte, então nossas consultas de mídia ainda funcionarão e elas também funcionarão bem quando chegarmos ao tamanho certo do pixel. É apenas uma maneira um pouco mais robusta de definir nossa consulta de mídia. Agora, nosso padrão será essa outra imagem. Agora, na primeira imagem, o zumbi não tem cartola. Na segunda imagem, esta imagem de fallback, o zumbi tem uma cartola. É assim que veremos a diferença entre as duas imagens. Então, finalmente, temos a imagem da barra. Agora, se o navegador não entendesse o elemento de imagem ou o elemento de origem, ele simplesmente ignoraria esses dois e ele iria apenas mostrar o elemento de imagem lá. Um codec é uma maneira de salvar o algoritmo de compactação de arquivos de áudio ou vídeo. Há também arquivos de contêiner, que é a extensão do arquivo e pode conter uma variedade de codecs diferentes. Nem todos os navegadores suportam todos os codec ou mesmo todos os arquivos de contêiner. Alguns codecs são de código aberto, mas não são bem suportados. Alguns são amplamente suportados, mas não são tão bons em comprimir o arquivo ou manter a qualidade do vídeo alta, etc. Existem codecs diferentes que são usados para fins diferentes em momentos diferentes. Tudo bem. Vamos falar sobre áudio. Tag de áudio permite que você reproduza áudio diretamente na página. Você precisa incluir o atributo controls para mostrar os controles de áudio para o usuário. Caso contrário, nada será realmente mostrado na própria página. O atributo controls também é um atributo booleano, que significa que você não tem que dizer controles é igual a true, ou controles é igual a controles, você pode simplesmente adicionar a palavra “Controles” lá e ele vai trabalhar para adicionar controles. Então também temos alguns elementos de origem. Por exemplo, aqui temos três elementos fonte diferentes, so.oog é um arquivo Ogg Vorbis. Geralmente é muito pequeno, mas nem sempre bem apoiado. Para A é provavelmente algo com o qual você está um pouco mais familiarizado. É a próxima, a especificação MPEG4, que é bastante alta qualidade, e também temos o MP3, que provavelmente é um pouco menor de qualidade, mas tem suporte muito amplo. Por fim, tivemos esse link para o arquivo MP3, basta fornecer esse fallback no caso de alguém estar usando um navegador que não suporta o elemento de áudio ou fonte. Há também a tag de vídeo, que funciona de forma muito semelhante à tag de áudio. Ele também precisa do atributo controles. Controles de vídeo, e então temos algumas fontes. WebM é um formato de arquivo que torna o vídeo muito pequeno, mas a partir dessa gravação, ele realmente só funciona no Chrome. Oggv é o Ogg Theora, que é o componente de vídeo de Ogg Vorbis, ou a especificação Ogg, a especificação de código aberto. Então temos o MP4, e finalmente temos um link para aqueles navegadores que não suportam vídeo ou fonte. Por último, vamos falar sobre o elemento iframe, que é usado com mais frequência para incorporar vídeos. Tecnicamente, um iframe está exibindo uma página da Web dentro de outra. Quando você está incorporando um vídeo em sua página, você está basicamente dizendo: “Pegue a página do YouTube e coloque-a nesta outra página aqui.” Aqui está um exemplo de um iframe. Temos um conjunto de largura e altura, temos um conjunto de fontes, que é o vídeo do YouTube, temos borda de quadro e permitir, permite que um monte de opções diferentes e permitir tela cheia, e, em seguida, o fechamento de o iframe. Tudo bem. Vamos dar uma olhada nestes em código. Primeiro temos um elemento de imagem. É o mesmo elemento de imagem que mostrei antes, e se mudarmos o tamanho aqui, eventualmente teremos uma cartola. À medida que descemos para estar dentro de 40em, o tamanho da página estava dentro de 40em, que o topo tinha aparecido. Se eu for acima disso de novo, ele cai fora. É só uma forma de mostrar imagens diferentes. Agora este RH aqui é apenas uma regra horizontal e eu estou apenas usando isso como um separador. Isto é para a regra horizontal aqui. Aqui temos áudio. (AUDIO TOGADO) Temos um áudio encantador , porque está mostrando controles, está mostrando aqui, e está mostrando qualquer um desses arquivos que é mais facilmente compreendido pelo navegador, ou o primeiro que é entendido pelo navegador, ele vai usar isso. Dentro do Chrome, eu acho, M4A e MP3 são ambos suportados. Eu não acredito que Ogg seja, mas é suportado no Firefox e talvez em outro navegador. Em seguida, tivemos vídeo. Este é o vídeo tag direto, e o vídeo está sendo reproduzido. É só um vídeo rápido desses caras dançando. Como você pode ver aqui, há controles estão incluídos. Temos nossa fonte, temos controles, fontes diferentes, e então um recuo se precisarmos dela, o que, neste caso, não precisamos. Então aqui está um iframe, o mesmo iframe que mostramos nos slides. Aqui é apenas reproduzi-lo através do YouTube, o que leva um pouco mais para pensar e, em seguida, ele mostra alguns outros vídeos. Tudo bem. Isso é tudo para hordas multimídia. Em seguida, são tabelas HTML. 8. Smacking com uma tabela (HTML): Neste vídeo, estamos falando de tabelas HTML. Estamos falando sobre o elemento tabela, o elemento de legenda, o elemento de linha da tabela e o elemento de dados da tabela, ou células da tabela. Você teria que ter cuidado com as mesas. Eles fazem um ótimo trabalho de colocar os dados. Eles tendem a ser orientados horizontalmente, e em um mundo de design responsivo onde seu site funciona tanto em um desktop gigante quanto em um pequeno relógio ou telefone, ser orientado horizontalmente pode tornar muito difícil para as tabelas mostrar corretamente em ambos os contextos. Basta ter cuidado com eles e certifique-se de colocar apenas coisas realmente que você precisa lá, não realmente usar tabelas para layout de elementos de página reais, mas realmente, apenas para dados reais. Tabelas usam muitas tags como você provavelmente viu na parte superior deste vídeo. Primeiro de tudo, temos que ter o elemento tabela. Em seguida, há também uma descrição da tabela, que é a legenda, linha da tabela e, em seguida, dados da tabela ou célula. Há também célula de cabeçalho da tabela, que é th. Aqui está uma tabela, abertura tag tabela e temos uma legenda, A Tableau Zombies. Então temos que começar uma linha de tabela. Então temos uma tabela de dados. Primeira linha, Zombie 1, dados da tabela 2. Nossa primeira fila para Zombie 2, então estamos fechando a fila da mesa. Essa é a primeira fila da nossa mesa. Então temos a nossa segunda fila. Segunda fila para Zombie 3, segunda linha, Zombie 4, linha de mesa de fechamento. Então fechamos a mesa e um pouco entraremos no código e eu mostrarei como isso realmente se parece. Com títulos, tipo semelhante de coisa. Temos tabela de abertura, nós re legenda, começar com a linha da tabela e, em seguida, vamos fazer a primeira linha dos cabeçalhos da tabela. Temos zumbis coluna esquerda e re zumbis coluna, fechamento de uma linha de tabela e, em seguida, temos a nossa segunda linha, que é a nossa primeira linha de dados reais, dados tabela primeira linha Zombie 1, primeira linha Zombie 2, fechar a linha da tabela, Feche a mesa. Vamos olhar para esse código e ver como eles realmente se parecem. Eu fiz um pouco de CSS só para ter certeza de que as coisas pareciam bem. Eu só desmoronei as fronteiras para que eles não tivessem espaços entre eles. Então eu coloquei uma borda sólida em torno dos tds e ths. Temos a nossa mesa, h2 apenas designando onde a mesa está. Temos a nossa etiqueta de abertura, e temos a nossa legenda, que é o que aparece aqui. Temos a nossa primeira linha de tabela, por isso temos o nosso primeiro elemento aqui. Primeira linha Zombie 1 Então temos a nossa segunda tabela de dados, Zombie 2 bem aqui, e depois temos a nossa segunda linha. Aqui está a segunda fila. Então temos a segunda fila Zombie 3 bem aqui. Segunda linha Zombie 3, segunda linha Zombie em 4, segunda linha Zombie 4. Fechar a linha da tabela, fechar a tabela. Agora, com cabeçalhos, ele vai parecer exatamente o mesmo, exceto que esses ths ou cabeçalhos de tabela estão indo para por padrão mostrar como negrito. Temos mesa de abertura, nossa legenda. Começamos com a linha da tabela, cabeçalho da tabela, Zombies da Coluna Esquerda, Zombies da Coluna Esquerda. Temos tabela direita Coluna Zombies, Coluna Direita Zombies. Demasiado longe. Zombies Coluna Direita e, em seguida, temos a segunda linha e foi a nossa primeira linha de dados. Primeira linha Zombie 1, e nossa segunda tabela de dados bem aqui. Primeira linha Zombie 2, feche o tr, feche a mesa. Isso é tudo para as mesas. Em seguida, vamos passar para seleções e alguns CSS. Bondade. 9. Seleção de Zombie: Neste vídeo, nós vamos estar olhando para seletores descendentes, pseudo-classes e outras, pseudo-classes, primeiro filho, último filho, e nth filho, então vamos falar sobre zebra listrando uma mesa. Seletores descendentes, às vezes eles também são chamados seletores contextuais e eles são basicamente uma combinação de um id, uma extremidade de classe ou seletores de elemento separados por um espaço. Por exemplo, você poderia ter este id de horda ou com uma classe de zumbi com um elemento de b, eles não precisam ser um id, uma classe, um elemento. Pode ser dois elementos, pode ser duas classes em um ID, pode ser um ID e um elemento. Pode ser qualquer combinação que você quer, como muitos você quer e neste contexto, este significa apenas b tags que estão dentro de um elemento com uma classe de zumbi e que também é um elemento com um ID de horda. Dado o zumbi da horda B, temos uma identificação da horda aqui. Nós temos uma classe de zumbi e b, então este é selecionado uma vez que não há b, este não é selecionado uma vez que este não está em uma classe de zumbi, este não é selecionado. Embora este seja um zumbi clássico com um b, ele não é selecionado porque não está dentro do ID da horda. Pseudo-classes são maneiras de selecionar elementos com base em aspectos sobre eles. Primeiro filho vai selecionar o primeiro filho de outro elemento e pseudo-classes são escritas com dois pontos entre o seletor e a pseudo-classe. Então ul li: o primeiro filho é um exemplo. Dado ul li: primeiro filho, temos uma horda ul li:primeiro-filho. Temos um ul aqui, temos um li, então este é o primeiro filho da UL. Este é selecionado, este é um li dentro de um ul, mas não é o primeiro filho, então não está selecionado. Aqui temos outro ul, o primeiro filho, no entanto, é uma tag b, então não é selecionado, não é um li e isso como um li não é o primeiro filho, então não é selecionado. Vamos dar outra olhada nisso no código 2 para ter certeza de que está claro. último filho vai trabalhar da mesma forma que o primeiro filho, eles simplesmente não vão da direção oposta. Dado ul li: último filho, temos um ul, temos li. Este é o primeiro filho, não é o último filho, então não está selecionado. Mas este li, é selecionado porque é o último filho. Agora, se você tivesse apenas um elemento li aqui, então seria tanto o primeiro quanto o último filho, então ele será selecionado como o único filho que seria selecionado tanto para primeiro filho, último filho e aqui temos outro ul. O b é o primeiro filho, li, é o último filho, por isso é selecionado e a tag b, é claro, não é. Depois há nth-child e esta é uma função que pode pegar um número, uma palavra-chave, ou uma fórmula. Por exemplo, se nós apenas colocar um sete, ele vai selecionar o sétimo filho de ul, mas apenas se for um li, você pode colocar mesmo que vai selecionar todas as crianças iguais, por exemplo , 2, 4, 6, 8. Quem nós apreciamos? Zumbis zumbis. Aqui temos uma função 3n menos 2. Quando n é 1, 3 vezes 1 é 3, menos 2 é 1. Quando n é 2, temos 6 menos 2 que é 4, e depois 7 e 10, etc Isso seria uma função que selecionaria esses elementos particulares. Agora, listragem de zebra é quando você faz fileiras de tabelas cores alternativas, a fim de tornar mais fácil para as pessoas seguirem a linha. Você pode usar nth-child para isso com, por exemplo, tr: nth-child (ímpar) definir a cor de fundo para um cinza claro seria uma ótima maneira de fazer isso. Vejamos alguns códigos têm os mesmos exemplos de antes. Temos aqui, dada a horda hashtag. zumbi b. O que eu fiz aqui é apenas definir cores naqueles que são selecionados para ajudar a deixar claro que eles são selecionados ou não. Deve ser cor azul da tag b dentro de um zumbi dentro de uma horda. Aqui temos uma tag b, que diz que está selecionada, mas é uma tag b dentro de um zumbi dentro de uma horda, então é azul e nenhum desses outros são selecionados, assim como falamos antes. Este não está selecionado, porque não há tag b, este não está selecionado porque não há tag zumbi e este não está selecionado porque não há tag horde. primeiro filho não é o mesmo código que vimos antes e aqui estou apenas mudando a cor para verde para aqueles que são selecionados. Primeira horda, tivemos que adicionar uma identificação só para deixar claro, então a primeira horda ul li:first child. Estamos na primeira horda ul li:first child, este selecionado, e este é o verde. Este é o segundo filho, então não está selecionado. Este é um ul ainda dentro da primeira horda, mas o primeiro filho não é uma tag li, então não é selecionado, é apenas negrito. Em seguida, temos o último filho, então o último filho aqui. Último seletor filho, temos #last -horde ul li:last-child, tudo está dentro do div id last-horde. Temos o Ul e Li que é o primeiro filho, não é o último filho, então não está selecionado. Então temos uma classe de zumbi que é selecionado porque é o último filho, então ficou vermelho. Temos outro ul o primeiro filho é uma tag b, o último filho é uma tag li, por isso também é selecionado e por isso é vermelho. Então, por fim, aqui temos uma mesa que estava listrando zebra, então vamos apenas definir a linha da mesa com um enésimo filho de ímpar. Escolha primeiro, terceiro, quinto, sétimo, etc Cor de fundo de um, apenas um ligeiro cinza e aqui temos a tabela de abertura, temos a legenda, temos a primeira linha, zumbi 1, zumbi 2, segunda linha zumbi 3, zumbi 4 . Terceira fila zumbi 5, zumbi 6. Quarta fila, zumbi 7, zumbi 8. Quinta fila, zumbi 9 zumbi 10. Sexta linha zumbi 11, zumbi 12, etc, todo o caminho até zumbi 16. Como você pode ver, as linhas ímpares têm um fundo que é cinza, então nós temos este primeiro, terceiro, quinto, sétimo. Isso é tudo para a seleção de zumbis, onde a seguir vamos falar sobre a Polka zumbi, ou melhor, menus de acordeão. 10. Polka de Zombie: Tudo bem, neste vídeo estamos falando sobre o elemento de detalhes e o elemento de resumo e como você pode criar seus próprios menus de acordeão. Primeiro de tudo, temos a tag de detalhes, que é um elemento de nível de bloco, e você vai colocar a maior parte do conteúdo nesse elemento e temos a tag de resumo que vai dentro da tag de detalhes, deve ser tão curto quanto faz sentido. Quando renderizado, o elemento de resumo será exibido com um triângulo à esquerda. Em seguida, você clica nele e o triângulo abre e mostra o conteúdo dentro. Vamos ver como isso se parece. Mais uma vez, aqui temos detalhes. Em seguida, temos o resumo como o primeiro gráfico de detalhes é a melhor prática. Ele também deve ter apenas uma tag de resumo se você tem múltiplo pode confundir o navegador e, em seguida, fechar a tag detalhes aqui depois de todo este Caro Diário. Se descermos aqui, vemos que a tag de resumo aqui, é o que é mostrado aqui e se eu clicar sobre isso e então ele me mostra todo o conteúdo aqui. Se eu clicar nele novamente, ele fecha. Eu posso clicar diretamente no triângulo, ou eu posso clicar no texto em si e lá você tem seus menus acordeão. Vamos ver o que acontece se colocarmos um segundo aqui e 3,2. Se colocarmos um segundo, ele só vai assumir como parte do conteúdo. Isso é tudo para menus de acordeão. 11. Conclusão: Obrigado por vir junto na aventura de matar Zombie, foi ótimo ter você junto. Eu adoraria ver qualquer um dos projetos que você fez. Por favor, sinta-se livre para compartilhá-los comigo e com colegas de classe. Adoraria ver o que fez e o que aprendeu. Obrigado e te vejo na próxima aula. Tchau