Aprenda a codificar com HTML e CSS

1. Boas-vindas: Ei, todo mundo. Meu nome é Emily Maskin e estou super animado para ensiná-lo sobre HTML e CSS. Eu tenho sido um desenvolvedor web por quase 10 anos e eu amo constantemente encontrar novas maneiras de criar sites bonitos. Esta aula é ótima para qualquer um que já pensou, eu quero aprender a programar, mas eu não sei por onde começar. HTML e CSS são a maneira perfeita de mergulhar seus dedos porque você pode facilmente ver os resultados do que você está criando de forma muito direta e visual. No final desta aula, você poderá criar uma bela página de perfil para você ou para outra pessoa. É uma ótima maneira de mostrar suas novas habilidades e se promover ao mesmo tempo. Tudo o que você precisa para começar é um editor de texto. Forneci links de download na descrição da classe para alguns populares para você escolher. Então vamos começar e mal posso esperar para ver o que você inventou. 2. Anatomia de um site: É preciso um monte de diferentes idiomas e tecnologias para criar um site, ou pelo menos para fazer um que é mais complexo do que este. Uma maneira útil de pensar nas partes de um site é como partes do corpo humano. Primeiro, temos o esqueleto. Essa é a estrutura, as diferentes peças se encaixam. Isso é HTML. Todos os sites têm determinados componentes HTML básicos, como uma cabeça que vai sobre um corpo. Dentro da cabeça e do corpo, há muitos elementos HTML possíveis, e eles podem ir em qualquer ordem, mas nesse ponto, as metáforas do esqueleto começam a ficar estranhas, então talvez não vamos lá. Agora o que? Bem, nosso esqueleto precisa de pele, antes de tudo. Roupas também seria bom, talvez cabelo e maquiagem. Isso é CSS. É o que permite transformar informações estruturadas puras em algo que as pessoas gostariam de olhar. Agora, em algum momento, provavelmente vamos querer que essa pessoa realmente faça alguma coisa. Eles precisam de algum comportamento, ações, memórias, personalidade. É aí que JavaScript e algumas outras linguagens entram em jogo, mas por enquanto, não se preocupe, só vamos abordar HTML e CSS nesta classe. 3. Como começar: Vamos tirar um minuto para nos prepararmos. Primeiro, vamos criar uma pasta na área de trabalho. É aqui que vamos salvar todo o nosso trabalho. Você pode chamar esta pasta do que quiser. Você pode até mesmo deixá-la como pasta sem título, se quiser. Vou chamar a minha Emily. Agora, vamos abrir nosso editor de texto, eu estou usando o átomo e nós vamos apenas começar um novo arquivo e vamos digitar hello, world nele. Agora, vamos salvá-lo na pasta que acabamos de criar na área de trabalho e chamamos esse arquivo index.html. Isso é o que você sempre salva a página principal de um site como, salve-o e, em seguida, vamos abrir nosso navegador web e vamos apenas abrir esse arquivo diretamente no navegador. Então, abra, aqui está o meu arquivo index.html e podemos ver o texto Olá, mundo. 4. Introdução ao HTML: HTML é basicamente uma maneira de colocar conteúdo de um site em contêineres, a fim de criar estrutura. HTML usa tags no início e no fim de partes de conteúdo. Em geral, cada parte do conteúdo começará com uma tag de abertura e terminará com uma tag de fechamento. Por exemplo, uma <p> tag é usada para criar um parágrafo. Vamos ver como podemos colocar um em torno do nosso texto Olá, mundo. Começamos com a tag de abertura no início, que é apenas um p dentro de suportes pontiagudos. Em seguida, adicionamos nosso conteúdo. Em seguida, colocamos a tag de fechamento no final, que é a mesma que a tag de abertura, exceto com uma barra antes da p. Toda vez que você tem uma tag com ou sem conteúdo dentro dela, ela é chamada de elemento. Há também um monte de tags que você pode usar para criar cabeçalhos e subcabeçalhos em sua página. Estes são h1, h2, h3, et cetera, todo o caminho através de h6. Por padrão, eles ficam menores à medida que a lista continua. H1 é o maior, depois h2, et cetera. Por exemplo, poderíamos colocar um cabeçalho acima do nosso parágrafo Olá, mundo usando uma tag h1. Agora, dependendo do navegador que estamos usando, este código vai resultar em algo assim. Aqui está o nosso elemento h1 e o nosso elemento p abaixo dele. Não é particularmente bonito ainda, mas está tudo bem. É aí que o CSS entrará, em um vídeo posterior. Em seguida, temos tags div. Divs são usados principalmente para agrupar outros elementos juntos. Por exemplo, digamos que quiséssemos colocar uma borda em torno desses elementos ou colocar uma cor de fundo atrás deles ou movê-los para uma parte diferente da página, uma div poderia nos ajudar a fazer qualquer uma dessas coisas. Como você pode ver aqui, as tags podem ser aninhadas, o que significa que colocamos um elemento dentro de outro. Aninhamos etiquetas o tempo todo. Caso contrário, não haveria realmente uma boa maneira de organizar nosso conteúdo. O único truque com o aninhamento é que você tem que lembrar de fechar as tags na ordem correta. Lembre-se de como dissemos que um elemento é um recipiente. Assim como essas bonecas russas, você precisa fechar cada interior antes que você possa fechar o próximo exterior. 5. Vamos escrever um código: Vá em frente e exclua hello world do seu arquivo index.html, e vamos começar a escrever alguns html. Então, todos os documentos html começam com a declaração do tipo doc, que se parece com isso. Isso é apenas para dizer ao navegador que vamos usar html. Na próxima linha, vamos criar uma tag html. Aqui está a etiqueta de abertura e a etiqueta de encerramento. Então dentro disso, onde vamos colocar todo o nosso código, vamos criar uma etiqueta de cabeça e uma etiqueta de corpo. Colocamos informações sobre a página na cabeça e o conteúdo real que queremos exibir no corpo. Vamos começar pelo corpo e vamos dar a nossa página um cabeçalho. Então vamos usar a tag h1 e isso pode ser qualquer coisa que você quiser. Vou ligar para o meu por causa de mim. Salve-o e agora, se voltarmos ao navegador e atualizarmos, você deverá ver o cabeçalho que acabou de criar. Agora vamos dar ao nosso documento três parágrafos. Estes podem ser tão longos ou tão curtos quanto você quiser. Você pode escrever um romance. Vou manter o meu curto e doce. Então eu vou dizer, “Meu nome é Emily. Eu sou um desenvolvedor web. Adoro o meu gato.” Mais uma vez salvar e há meus três parágrafos. Finalmente, vamos adicionar um título. O título é o que aparece na guia do navegador. Como não é o conteúdo que é exibido na página em si, ele vai na tag head em vez do corpo. Eu vou dar, “Título da página da Emily ”, e voltar para o navegador, atualizar e aqui na aba, você pode ver a página da Emily. 6. Tudo sobre atributos: Tags não fazem muito por conta própria além de criar estrutura. O próximo passo é dar-lhes atributos. Elementos de link ou tags, use atributos para fornecer o endereço do link. Vamos criar uma etiqueta, um suporte para âncora, a propósito. Após o terceiro parágrafo, você pode apenas criar uma tag, e primeiro vamos colocar o texto que queremos exibir entre as tags de abertura e fechamento, assim como já vimos. Eu quero criar um link para o meu site pessoal, então eu vou apenas colocar o meu site. Você também pode criar um link para o seu Twitter ou um vídeo no YouTube, ou o site da sua empresa ou qualquer coisa que você queira. Em seguida, daremos a nossa tag e cada atributo HREF, que irá dizer-lhe qual URL deve ser vinculado. Dentro da tag de abertura logo após o a, vamos colocar um espaço e, em seguida, adicionar um atributo de HREF, que significa referência de hipertexto, e defini-lo igual a URL que você deseja vincular, e isso vai entre aspas. No meu caso, é http://emilymaskin.com, e se voltarmos para a página e atualizar, há o meu link. As imagens são outro elemento que dependem de atributos. Eles precisam de um atributo de origem para lhes dizer qual imagem real exibir. Vá em frente e encontre duas imagens para incluir na sua página. Você vai salvá-los na mesma pasta que criamos na área de trabalho. Você pode usar imagens que você já tem em seu computador copiando-as para essa pasta. Ou você pode encontrar imagens online e baixá-las para essa pasta. Dê às suas imagens nomes bastante simples ao salvá-las, como me.jpg, se for uma foto sua, para que você possa facilmente referenciá-las mais tarde. Eu já adicionei o meu. Escolhi fotos da minha gata Lucy. Sinta-se à vontade para pausar o vídeo e voltar quando estiver pronto. Agora adicione uma tag de imagem que seja IMG ao seu documento. Você notará aqui na minha que a etiqueta parece um pouco diferente das outras. Ele não tem uma tag de abertura e uma tag de fechamento porque as imagens não contêm conteúdo, elas são o conteúdo. Agora vamos dar a tag de imagem e atributo SRC fonte e defini-lo igual ao nome do seu primeiro arquivo de imagem. Novamente, ele vai entre aspas. Para mim, isso é Lucy1.jpg. Também lhe daremos um atributo alt. Alt é usado para fornecer textos para mostrar se por algum motivo há um erro ao carregar a imagem, e também é importante para acessibilidade, por exemplo, para usuários com leitor de tela. Vou dar-lhe mensagens de texto alternativo da minha gata Lucy. Agora vamos salvá-lo e voltar. Aí está a minha imagem. Se o seu saiu enorme, como o meu, não se preocupe com isso por enquanto. Vamos resolver isso muito em breve. Agora por conta própria, você pode fazer a mesma coisa para sua segunda imagem, e então nós retomaremos no próximo vídeo. 7. Introdução ao CSS: Usamos CSS para estilizar elementos dizendo essencialmente: “Ei navegador, toda vez que você vir um elemento correspondente a esta descrição, faça isso com ele.” Fazemos isso usando este formato. Eu sei que isso não deixa as coisas muito mais claras, então vamos ver como é na prática. Por exemplo, isso fará com que todo o texto em todas as marcas de parágrafo apareça vermelho. Vamos experimentá-lo. Adicione uma tag de estilo dentro de sua tag de cabeça. Dentro dele adicionará H1, chaves encaracoladas, cor, dois pontos, vermelho, ponto e vírgula. Isso vai deixar seu rumo vermelho. Cores básicas como: vermelho, verde, azul, etc., são reconhecidas como palavras. Caso contrário, podemos usar códigos hexadecimais, como FF0000, que também é vermelho. Se voltarmos e nos atualizarmos, nada muda, que é o que esperaríamos. Se você ir para HTML cor codes.com, você pode brincar com encontrar a sombra exata da cor exata que você está procurando. Alguns outros estilos que você pode dar ao texto são o tamanho da fonte, que é medido em pixels. Vamos dar 60 pixes. Isso é bem grande. Família Font, coisas como Times New Roman, Arial. Pessoalmente, eu gosto de Garamond. Alinhe texto, vamos com o centro. Vamos ver como isso parece até agora. Nosso rumo agora é 60 pixels, está centrado e está em Garamond. Vamos tentar colocar uma fronteira em torno do nosso cabeçalho. As bordas exigem três valores, ou seja, a largura, o estilo e a cor. Aqui está um exemplo: borda, dois pixels, sólido, azul. Salve e volte. Que é um pouco apertado no topo e no fundo. Vamos adicionar algum espaço dentro da caixa, então vamos usar o preenchimento para fazer isso. Preenchimento dar-lhe 20 pixels, salvar e voltar. Ok, há um pouco mais de espaço lá. Isso é muito bom. Talvez também devêssemos dar a essa caixa uma cor de fundo. Vamos usar um código hexadecimal desta vez. Vamos apenas com um tom de cinza claro. Acontece que eu já conheço esse. Mas, novamente, você pode simplesmente ir para HTML cor codes.com e encontrar qualquer sombra que você possa querer. Vamos também adicionar uma margem sob ele. Colocaremos 100 pixels sob o título. Agora, se voltarmos e atualizarmos, podemos ver que temos um fundo cinza claro e 100 pixels abaixo. Certamente não vai ganhar nenhum prêmio de design. Mas espero que você possa ver o potencial aqui. Tente brincar com algumas dessas propriedades em suas tags H1, P, A e div. 8. Como obter o específico com cursos: Suas imagens saíram enormes como as minhas? Podemos usar a propriedade width para reduzi-los, então aqui vamos usar a imagem como o seletor e dar-lhe uma largura de 300 pixels, salvá-lo e voltar, e agora nossas imagens são agradáveis e pequenas. Você vê algum problema com essa abordagem? E se você não quisesse que ambas as imagens fossem do mesmo tamanho? Podemos usar o atributo class para direcionar um ou mais elementos específicos enquanto ignoramos os outros, então vamos dar a uma imagem uma classe de pequena e outra uma classe de grande, agora podemos mudar a largura do pequeno para ser 300 pixels adicionando pequeno para o nosso seletor de imagem e é importante que não haja um espaço em torno do ponto aqui porque isso fará algo diferente, que é um pouco fora do escopo desta classe. Agora podemos voltar e atualizar, e vemos que apenas o primeiro é reduzido para 300 pixels, e o outro está de volta a ser enorme. Então agora vamos mudar o segundo para que possamos fazer imagem com pontos grandes, e vamos dar a isso uma largura de 500 pixels, salvar e atualizar, e agora um pouco maior, mas ainda bastante razoável. Outra coisa que você pode querer mudar aqui é o fato de que as imagens agora aparecem um ao lado outro e ao lado do link Meu site em vez de ser um acima do próximo, que acontece porque elementos de imagem e elementos de link todos por padrão, e o que display inline significa é que eles ocupam apenas o espaço que precisam, e vamos tentar ajustar o máximo possível na mesma linha. O oposto de exibição inline é o bloco de exibição, e que diz o elemento para ir para a próxima linha, mesmo se ainda há espaço. Então, podemos voltar para nossos seletores de imagem e fazer ambas as imagens serem exibidas bloqueadas, e então se atualizarmos e voltarmos, agora é um em cima do outro, agora você pode ir em frente e brincar com algumas das outras propriedades CSS que aprendemos talvez você queira criar margens entre as imagens, talvez você queira centralizar tudo, enlouquecer e se divertir. 9. Revisão: Vamos rever o que aprendemos. Primeiro, aprendemos como configurar um novo arquivo HTML. Em seguida, aprendemos algumas das tags HTML que você pode usar para adicionar conteúdo à sua página. Aprendemos como dar atributos a elementos para fornecer-lhes mais informações. Então aprendemos algumas propriedades CSS e como aplicá-las. Usamos o atributo de classe para direcionar elementos individuais ou subconjuntos de elementos. Aprendemos algumas das muitas propriedades CSS que você pode usar para estilizar seu site. Se você quiser saber mais sobre alguns dos outros, confira o link na descrição da classe ou apenas as propriedades CSS do Google. Para o seu projeto de classe, convido você a criar uma página de perfil sobre você ou outra pessoa. Use o HTML e CSS que aprendemos hoje para adicionar conteúdo à sua página e estilizá-lo. Divirta-se e seja criativo. Espero que tenham gostado desta introdução ao HTML e CSS, e estou tão animado para ver seus projetos.