Baixe Introdução a HTML e CSS e outras Resumos em PDF para Linguagem de Programação, somente na Docsity!
Introdução a HTML e CSS
Sumário
IHC00 - Hello, World
IHC01 - Conhecendo as tags
IHC02 - As estruturas de um site
IHC03 - Tipos de títulos
IHC04 - Parágrafos, negrito e quebra de linhas
IHC05 - Imagens
IHC06 - Lista sequencial
IHC07 - Links clicáveis
IHC08 - Vídeos
IHC09 - Curriculum bagaceira
IHC10 - Criando um formulário
IHC11 - Inputs IHC12 - Labels IHC13 - Textare IHC14 - Checkboxes e Radio Buttons IHC15 - Select IHC16 - Botões IHC17 - Testando o formulário IHC18 - Google Fontes IHC19 - Fontawesome IHC20 - Primeiros passos no CSS IHC21 - Conhecendo a Tag Div
IHC22 - Dando estilo a DIV IHC23 - Atributo Class IHC24 - Font- size e Inline- style IHC25 - Salvando CSS separadamente IHC26 - Criando o Index IHC27 - Ajustes iniciais do cabeçalho IHC28 - Aperfeiçoando o cabeçalho IHC29 - Fechando o cabeçalho IHC30 - Área de contato IHC31 - Demais áreas IHC32 - Ajuste no layout
IHC33 - Ajustes finos IHC34 - Desafio do dia-a-dia IHC35 - Ajustes iniciais IHC36 - Lista horizontal IHC37 - Título, botão e imagem IHC38 - Área dos clientes IHC39 - Meus serviços IHC40 - Área do formulário IHC41 - Portfólio IHC42 - Ajustes finais IHC43 - Hospedando um Site
💡 Exercícios:
- HTML https://www.w3schools.com/html/html_exercises.asp
- CSS https://www.w3schools.com/css/css_exercises.asp
IHC00 - Hello, World
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/060ffb26-da2c -4459-b959-01ea8b9a5fa1/primeiro_site.html
Antes de tudo, eu queria mostrar para vocês como os sites da internet são construídos. Então vamos abrir aqui o site da DNC, clicar com o botão direito e depois clicar em Exibir código fonte da página. Vocês podem repetir estes passos aí em qualquer site no navegador de vocês, não precisa instalar nem configurar nada.
O que vocês vão ver aqui é o código fonte do site que é composto por HTML, CSS e Javascript. Todas as páginas da internet são compostas por pelo menos uma dessas tecnologias, que é o HTML. O HTML é uma linguagem de marcação (e cuidado para não confundir com linguagem de programação) que é responsável por definir os elementos, ou seja, botões, formulários, textos, titulos, tabelas e etc, que vão fazer parte da sua página pra internet. Já o CSS e o Javascript são opcionais para potencializar o visual e a interatividade dessas páginas, mas de qualquer forma, o HTML é a base de todos os sites que vocês conhecem...
Sites como o Facebook, o Google, o da DNC ou qualquer outro site que vocês acessarem vai ter como base código fonte em HTML.
Por isso, como Product Manager - que é uma profissão que participa da criação de produtos para internet - você precisa ter uma noção básica das bases que compõem esses produtos e por isso a gente vai falar disso durante este módulo.
Vou começar então mostrando para vocês como se cria uma página em HTML. Não se preocupe por enquanto em entender ou decorar o que eu vou escrever, o intuito
IHC01 - Conhecendo as Tags
💡 Referência de tags do HTML:^ https://developer.mozilla.org/pt-
BR/docs/Web/HTML/Element
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8957246- 9-4afc-97ff-7ed149608f16/primeirosite.html
Nessa aula, vocês vão começar a entender melhor sobre as estruturas do HTML e por a mão na massa criando seu próprio código.
O objetivo dessa aula é que vocês consigam criar uma página de currilum, como a seguir: https://s3-us-west-2.amazonaws. com/secure.notion-static.com/ c14eed-fd7e-417d-a2bf-c7e7b 524c8/cursoppm2-curriculum2-ht ml.pdf
Bom, o HTML, como já falamos na aula anterior, é uma linguagem de marcação. E novamente, Cuidado para não confundir com linguagem de programação, pois são coisas diferentes. Como linguagem de marcação, nós vamos usar marcadores para dizer como o conteúdo do nosso site deve ser exibido pelo navegador. Esses marcadores que a gente utiliza são chamados de TAGS.
A estrutura de uma tag é a seguinte: Símbolo menor que - Nome da Tag - Símbolo maior que
E aí a gente usa as tags pra dizer o que a gente quer que seja mostrado na página. Por exemplo:
Tag para criar tabelas
Tag para criar imagens
Tag
para pular linha
Meu título
E dessa forma, a gente vai estruturando nosso código. Você pode até usar tags dentro de outras tags, como a gente fez na primeira aula, onde criamos uma tag e dentro dela adicionamos a tag de cabeça e a tag de corpo .
Existem dezenas de tags no HTML. Até eu que trabalho com isso há anos as vezes esqueço de algumas e as vezes preciso consultar, então não se preocupa em decorar todas elas porque eventualmente você vai acabar memorizando as mais importantes sozinho enquanto você for usando aí no seu dia a dia.
E você pode a qualquer momento consulta-las no Google ou diretamente no link de referência que nós incluiremos aqui na plataforma.
IHC02 - As estruturas de um site
💡 Referência de tags do HTML:^ https://developer.mozilla.org/pt-
BR/docs/Web/HTML/Element
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8957246- 9-4afc-97ff-7ed149608f16/primeirosite.html
Nosso objetivo hoje, é criar uma página de currículo. E pra fixar esse tipo de conteúdo, é indispensável que você pratique um pouquinho, então eu quero te convidar a me acompanhar, criando a sua página de currículo aí no seu computador.
Bom, na aula anterior, nós falamos sobre o VS Code, o editor de texto que nós usaremos durante o curso. Então a primeira coisa a fazer, é você criar uma pasta no seu computador com o nome que você quiser. No meu caso, vou chamar essa página de ppm. Criei a pasta no computador, vou acessar agora o link do nosso VS Code (que é vscode.dev). Vou clicar em open folder e selecionar a minha pasta. Depois, vou criar um novo arquivo clicando aqui em New File. Clique em select a language e vamos digitar e selecionar HTML.
Nós vamos começar aqui criando uma tag chamada . A tag representa a raiz do nosso código em HTML, ela é a tag pai (ou mãe) de todas as outras tags que estão por vir. Essa hierarquia é importante no HTML, porque algumas tags (como a tag de listas que vocês verão mais pra frente) só funcionam se estiverem corretamente posicionadas dentro umas das outras.
Mas enfim, voltando ao assunto, criamos a nossa tag html que é a raiz do documento, e dentro dela vamos criar, lembrando sempre de abrir e fechar, mais duas tags: que são as tags e e a tag , traduzindo, a cabeça e o corpo do nosso documento. E aqui, mais uma vez, é importante prestar a atenção na hierarquia porque existem algumas tags que a gente só vai usar dentro da tag e outras que a gente só vai usar dentro da tag .
Outra coisa importante é a organização. Se você sai digitando o código sem nenhuma formatação, vai ficar muito difícil entender e fazer alterações no futuro. Então é regra sempre dar um espaço usando a tecla TAB sempre que você for descer um nível na hierarquia. Por exemplo, a tag HTML é a primeira da hierarquia, então ela não tem nenhum espaço. Já as tags head e body, são irmãs porque estão no mesmo nível da hierarquia, e são filhas da tag html, logo, elas são as primeiras filhas e por isso só tem 1 espaço.
Agora, dentro da tag vou criar uma tag chamada , ou título em Português. Essa tag serve pra definir o título que aparece aqui na aba do navegador quando a gente acessa algum site. E aí mais uma vez, a tag title é filha da tag head,
Pra finalizar essa parte dos títulos, vamos criar mais uma tag com o título "Experiência Profissional” debaixo de todos os outros títulos. Agora vamos salvar e visualizar nosso documento, lembrando sempre de adicionar a extensão .html. Veja como os títulos aparecem.
O H1, como o maior de todos. O reduz um pouco e o reduz mais ainda. Dessa forma, a gente consegue organizar nosso conteúdo através dos títulos, como se fosse um livro ou um artigo mesmo, sendo que o é o titulo principal e mais importante, e conforme o número vai aumentando o título vai se reduzindo, Sendo que o número 1 é o maior e o 6 é o menor e último que vocês podem usar.
Depois vocês vão ver que usando CSS, a gente consegue alterar isso, mudar estes tamanhos e as cores, mas isso é assunto pras próximas aulas.
IHC04 - Parágrafos, negrito e quebra de
linhas
💡 Referência de tags do HTML:^ https://developer.mozilla.org/pt-
BR/docs/Web/HTML/Element
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/b8957246- 9-4afc-97ff-7ed149608f16/primeirosite.html
Beleza, já aprendemos um pouco sobre os títulos e voltando agora pro editor, vamos falar sobre os parágrafos, que são representados pela tag
.
Então aqui, depois do titulo
eu vou criar um paragrafo escrito: "Meu curriculum vitae em HTML.".
Outra tag bastante usada é a tag que faz o texto entre ela ficar em negrito. Então eu vou vir aqui no paragrafo que a gente criou e adicionar a tag em volta do texto "curriculum vitae”.
Ou seja, teremos a tag e entre ela o texto "curriculum vitae”. Logo, o texto "tipos de animais" vai ficar em negrito. Vou salvar e abrir e vocês poderão ver isso aqui.
Outra tag bastante útil é a tag de quebrar linha. Podemos criar aqui um novo paragrafo com o texto: LEIA COM ATENÇÃO.
Vamos supor que eu quero que cada palavra desta frase fique em uma nova linha. Eu posso criar vários parágrafos, mas por padrão, o paragrafo tem um espaçamento maior entre as linhas. Pra criar quebras de linhas sem o espaçamento que existe entre os parágrafos, a gente usa a tag
. Essa tag tem uma característica diferente do que vimos até agora: ela não precisa de tag de fechamento. Então é só
Então aqui no vscode, vocês já conseguem ver que existe um novo arquivo profile.jpeg e a primeira coisa que faremos é adicionar essa foto no topo do nosso site. Então eu vou aqui em cima da tag H1 e vou adicionar uma tag img.
E aí vem mais um conceito muito importante sobre as tags em HTML. As tags podem possuir propriedades, que são caracteristicas que a gente define para nossas tags. Para definir uma propriedade da tag, a gente escreve o nome da propriedade, depois o sinal de =, abre aspas (simples ou dupla) e escreve o valor daquela propriedade.
No caso da imagem, por exemplo, eu preciso dizer de onde vem essa imagem, onde ela está localizada. Pra isso, a gente usa a propriedade src da tag . No meu caso, a imagem está na própria pasta, com o nome profile.jpeg. Então logo, o src vai ser = a abre e fecha aspas, profile.jpeg. Vale ressaltar que você pode usar um link aqui também, por exemplo, então você pega o link da imagem e coloca aqui no src.
Se eu abrir minha pagina, a imagem vai aparecer aqui. Mas eu quero reduzir um pouco essa imagem, eu quero que ela tenha uma largura de 100 pixels. Pra isso, eu adiciono mais uma propriedade chamada width (que significa largura em inglês), = "100". Vou salvar aqui e vocês verão que a imagem vai ser reduzida.
IHC06 - Lista sequencial
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/c20ab27f-1d 4-4d52-9d8d-aeac2ef730f6/primeirosite.html
Bom, agora que já aprendemos a criar imagens, vamos adicionar também uma lista, que é um tipo de elemento diferente do que vimos até agora porque ela depende de 2 tags (uma dentro da outra).
Começaremos adicionando aqui depois do título de “Experiências Profissionais” a tag ul, sempre lembrando de abrir e fechar ela. Depois, dentro da tag ul vou adicionar algumas tags li, e cada uma dessas tags vai representar um item da lista. Lembrando também de manter a formatação aqui dos espaços na hierarquia.
Vou criar aqui um item de experiencia profissional, com o título "Estagiário de marketing no DNC Group” e outro item com o título “Assessor de marketing no DNC
Group”. Vou salvar e agora vocês podem ver o resultado. No seu currículo aí, vocâ adiciona também as suas experiencias profissionais.
Aqui em cima, nas informações pessoais, vou adicionar mais uma lista e vou adicionar as informações pessoais, da seguinte maneira:
Nome: José da Silva
Sendo que o título da informação, que é aqui o Nome:, eu vou colocar entre uma tag de negrito, que é a tag b como a gente já falou.
Agora, eu vou copiar os itens da lista e adicionar mais informações, como o e-mail [email protected] e o telefone, que eu vou inventar aqui.
IHC07 - Links clicáveis
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4af795d1-2d 2-41fb-a140-d1c1b1eb6f3e/primeirosite.html
Agora, a gente vai aprender também como criar links. Os links, como vocês já sabem, são tags pra redirecionar o usuário para outro endereço na internet. E eu vou começar aqui criando uma tag H2, com o título Links pessoais.
Depois, vou criar mais uma lista usando a tag ul com 2 itens dentro dela através das tags li. No primeiro item eu vou escrever Linkedin. No segundo item, eu vou escrever Facebook.
Agora vem a tag de link. Tudo que a gente escreve dentro desta tag vai mudar de cor e passará a ser um link clicável. O nome dessa tag, é a letra A. Simplesmente uma letra mesmo, a letra a. Vou abrir e fechar ela aqui colocando o texto Linkedin dentro dela. Agora, eu preciso dizer pra onde esse link vai ser direcionado. No caso, vou colocar o link do Linkedin usando a propriedade href, que diz pra onde o usuário vai ser redirecionado. Vou digitar aqui “https://linkedin.com".
Agora eu vou salvar a página e abrir essa pagina no navegador. Vou clicar e por padrão, os links vem programado para serem abertos na mesma página onde o usuário está. Reparem que eu cliquei no link e ele foi aberto na mesma página. No nosso caso, eu acho que seria legal esse link abrir numa nova aba, pra que a pessoa que estiver lendo o meu curriculum não saia dele.
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9be9efdb-db a-47b3-83cf-162e9ec4c31d/primeirosite.html
Para fixar os detalhes até então:
- É importante se atentar para a ordem dos itens no seu site;
- A organização das listas é necessária, precisa se atentar na ordem que cada um dos itens é colocado;
- A ordem dos atributos não importa;
- Um erro bastante comum é a falha no fechamento das Tags.
IHC10 - Criando um formulário
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ddad22a1- 6-4c53-ac6c-fc90b42e7e55/Exemplo_Forms.html
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/0eb6ff1b-343b -42aa-8e87-c40cee416c9a/Resultado_Forms.html
Até agora, a gente trabalhou apenas com tags estáticas, ou seja, nosso site não tinha nenhuma interatividade além dos links. Nós não trabalhamos com formulários, botões e outras tags mais interativas.
Na aula de hoje, a gente vai focar nisso. O objetivo é criar um formulário de contato pros nossos usuários enviarem uma mensagem para nós. Isso é comum nos sites das empresas, blogs e tudo mais.
Pra fazer isso, a gente vai trabalhar com algumas tags que são usadas para criar formulários. A primeira dela, é a tag .
Os formulários são a forma principal de interação entre os usuários e os sites de vocês. Eles permitem que você colete dados preenchidos pelos usuários. Um
formulário é basicamente um conjunto de Campos, ou inputs. Os inputs, como o nome já diz, são as entradas de dados dos nossos formulários, ou seja, são aqueles campos onde a gente costuma digitar as informações nos sites que a gente visita.
Essa tag Form não muda nada visualmente na página, ela só diz pro navegador que tudo que está dentro dela vai ser preenchido e enviado.
Os formulários são definidos pela tag FORM e necessitam de dois atributos básicos. O primeiro é o atributo action, que representa o link para onde os dados do seu formulário serão enviados.
Já o segundo, é o atributo Method, que representa qual é o método pelo qual os dados serão enviados e ele pode ter 2 valores, GET OU POST. Basicamente, o método GET vai passar esses dados aqui através da URL, ou seja, esses dados vão poder ser visualizados através da URL. Enquanto no nosso caso, que usaremos o método POST, a gente vai estar dizendo que esses dados vão ser enviados dentro de um pacote HTTP, onde os dados não vão ser visíveis pela URL.
Vai ficar mais claro jajá quando eu mostrar para vocês, mas vale ressaltar que a gente não vai entrar muito em detalhes dessa parte porque isso envolve conceitos mais avançados de redes de computadores e de programação, pra receber esses dados, por exemplo, a gente precisaria programar um servidor rodando alguma linguagem de programação. Para enviar esses dados por e-mail, também. Por isso, no nosso caso, a gente vai usar um serviço que faz isso pra nós de forma automática. Na internet tudo funciona assim, sempre existem alternativas que não necessitam de conhecimento técnico avançado para funcionar.
O próprio código HTML por exemplo, pode ser gerado automaticamente usando alguma ferramenta das chamadas de NO CODE, que como o nome já diz, o intuito é que você não precisa saber programar para manipular. Então assim, hoje em dia, não saber programar não te limita em nada, sempre há uma solução alternativa, como essa que vamos usar hoje.
Mas voltando pro nosso formulário, a gente vai usar um serviço que vai ser responsável em receber os dados do nosso formulário e encaminha-los para algum endereço de e-mail. O nome desse serviço é formspree.io e ele é gratuito até 50 envios do formulário por mês. Vamos acessar aqui o formspree.io, Clicar em get started, preencher nossos dados e criar nossa conta. Você vai precisar acessar seu e-mail e clicar no link de validação que eles vão te enviar pra poder criar formulários, então faça isso antes de seguir.
Depois, você vai logar e clicar aqui em New Form. Depois que criar o form, você vai ver aqui que eles disponibilizam um link. E se a gente ler aqui, vocês vão ver que
required value name
O primeiro é o atributo placeholder. Como o próprio nome diz, este atributo define um texto que vai ficar guardando o lugar dentro do campo. Por exemplo, se eu colocar o placeholder Digite seu E-mail, o campo vai aparecer com este texto, porém, a clicar com o mouse, o texto some. Sempre que o campo estiver em branco o texto deste atributo será mostrado.
O segundo é o atributo type. Este atributo define o tipo de dados que nosso campo vai receber. Existem vários tipos de dados que a gente pode colocar aqui, como cores, datas, números e etc. Em geral, você pode sempre usar o tipo text porque ele vai abranger qualquer entrada de dados.
O terceiro atributo é o atributo required. O único valor possível pra esse atributo é required, ou seja, required= “required”. Quando este atributo existe, o formulário não poderá ser enviado até que este campo seja preenchido. Sendo que uma mensagem de erro será mostrada, da seguinte maneira.
Já o atributo value, é o valor daquele campo. Ou seja, se você quiser que esse campo já venha preenchido com algo para facilitar a vida do usuário, você pode usá-lo. Por exemplo, se você tem um site destinado a pessoas que moram em São Paulo, mas que eventualmente pode receber dados de pessoas fora de lá. Nesse caso, você pode definir o value dele como São Paulo pra facilitar a vida da maioria e, quando a pessoa for de outro local, ela pode editar esse valor. A diferença dele pro placeholder, é que o valor preenchido no placeholder nunca vai ser enviado como dado. O valor do value sim, é de fato o valor do campo e será enviado junto com ele.
No caso do atributo name, a gente define pra que quando o formulário é enviado a gente saber a qual input cada dado esta relacionado. Voce pode colocar o nome que quiser, mas por exemplo, se o meu objetivo é captar o nome de alguém, nada mais objetivo do que chamar esse input de nome.
IHC12 - Labels
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/05c2da8d- 3-4e4f-add9-ada158b36079/Exemplo_Forms.html
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ac7047c8-cc 0-4463-9afe-4c728539ea6e/Resultado_Forms.html
Beleza, já aprendemos a criar os inputs. Agora, a gente vai falar sobre as labels.
As labels funcionam como etiquetas, ou títulos para os nossos campos. Aqui, temos um formulário de login de exemplo com as labels e-mail e senha. A label costuma ser posicionada em cima do campo, mas você pode tratar dela da maneira que desejar, usando css.
A sintaxe da label é como a de qualquer outra tag, da seguinte maneira. Abre a tag label, escreve o texto e fecha a tag label.
IHC13 - Textarea
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/e8ac4d07- 4-4238-b896-ef104681df07/Resultado_Forms.html
https://s3-us-west-2.amazonaws.com/secure.notion-static.com/2e0d0eea-0b 1-4749-93f8-59acee07d18b/Exemplo_Forms.html
Além dos inputs e labels, temos também as textareas, que são como os inputs, porém, são maiores e comportam uma quantidade maior de texto, além de possuírem algumas qualidades especiais, como a possibilidade de se usar quebras de linhas no texto digitado.
Um detalhe: Diferente dos campos, ou inputs, as tags da textarea precisam ser fechadas. As textareas possuem basicamente os mesmos atributos que nós já
