Transcrições
1. Como criar HTML: Olá, bem-vindo a este
curso sobre HTML. Aprendendo. Html é o passo perfeito para começar
a aprender a criar sites. Depois que você pode usar HTML, as oportunidades são infinitas. Ao fazer este curso, você criará uma página da Web
básica. Através de exemplos. Começaremos por
entender o que é HTML e veremos como
configurar um documento HTML. Em seguida, passará para
tópicos como o uso de texto, imagens, listas e
introdução de estilos básicos. Terminaremos o curso
analisando o uso de
tabelas e formulários. Este curso é
destinado a iniciantes. Portanto, mesmo que você nunca tenha
programado antes, este curso o ajudará
em sua jornada de aprendizado. Meu nome é Emma e trabalho como programador
na indústria hoje. Adoro programar e
adoro como posso aprender? Espero que você tenha gostado deste curso.
2. O que é HTML?: Então, o que é HTML? Toda vez que você visita um site, você está sendo exposto ao HTML, introduzido em 1993
por Tim Berners-Lee. Html significa Hypertext
Markup Language. Então, o que o HTML é útil? Bem, HTML é o
esqueleto de todas as páginas da Web e é usado para estruturar
a página e mostrar o conteúdo usando HTML, podemos adicionar e formatar
texto, mostrar links, listas ,
tabelas e formulários,
e podemos incluir imagens e vídeos
na página da web. O mundo mudou
muito desde 1993, e a tecnologia
evoluiu muito hoje. A versão atual é HTML5. O World Wide Web
Consortium
gerenciou os padrões para HTML e
decidiu o que acontece nele. Dentro do seu navegador,
você pode inspecionar o HTML de qualquer
site que você visitar. Você pode usar qualquer navegador, mas tentaremos isso usando o Chrome. Vamos dar uma chance a isso.
Visitaremos google.com. Basta clicar com o botão direito do mouse e escolher guia
Inspecionar mostrando que os elementos aparecem e podemos ver
o HTML da página. Eu disse que o HTML significa linguagem de marcação de
hipertexto. O que isso significa? Bem, o hipertexto descreve
o texto que fornece acesso
a outra página. Ele faz isso pelo nosso link, que é conhecido como hiperlink. Se eu visitar um site
que exibe a previsão do tempo e
depois eu inspecionar a página, o país aqui é um
exemplo de hiperlink. E posso confirmar isso
quando vejo os elementos. Quando clico no botão, eu sou navegado para uma nova página. Uma linguagem de marcação é uma linguagem de computador que descreve como o texto é exibido, assim como quando
você sublinhou ou destacou alguns textos, talvez em um livro didático
ou em um documento. Uma linguagem de marcação é
uma linguagem de computador que especifica a estrutura
e a apresentação. Nós envolvemos o texto que queremos que o navegador exiba
em elementos e tags para que o navegador saiba como
exibi-lo corretamente.
3. A anatomia de um tag: Neste vídeo,
vamos apresentar tags
HTML e a
anatomia do ataque. Combinar vários
elementos é o que compõe a estrutura geral
de uma página da Web em HTML, os
próprios elementos geralmente são compostos de uma tag de abertura
e fechamento, que pode ser pensada como
invólucros ou recipientes. Há mais de
um tipo de tag, o mais seguiu a
estrutura de um pedaço de texto começou com uma tag de abertura e terminando com uma tag de fechamento. Vamos começar observando
a etiqueta de abertura. O caractere colocado dentro
dos colchetes é o
tipo da tag. Para um parágrafo,
colocaremos a letra P. A tag de fechamento
é exatamente a mesma, exceto que usamos
uma barra após o primeiro colchete. Os atributos nos permitem adicionar mais informações
sobre o elemento. Colocamos o atributo
dentro da etiqueta de abertura. Para fazer isso, usamos um nome e um valor unidos
por um sinal de igual. O nome é o tipo
do atributo e o valor é o valor
que você deseja que seja atribuído. Para práticas recomendadas, o nome do
atributo deve ser minúsculas e incluído
entre aspas duplas. No último vídeo,
mencionei como o HTML evoluiu muito
desde que foi criado. Um dos aspectos
disso é como os nomes de tags para formatação começaram a se
inclinar para o que chamamos de semântica. Ou, em outros termos, o
significado no passado, texto em
negrito
seria chamado negrito e itálico como itálico. Embora ainda possamos usá-los, hoje em dia está se tornando
mais comum usar palavras como fortes e
enfatizadas.
4. Configure o documento: Agora temos um pouco de
entendimento sobre o que é HTML. Podemos começar a analisar a
configuração do nosso documento. Para configurar
um documento HTML, certos elementos são necessários. Começamos com a declaração
de tipo de documento, que deve ser a primeira linha
do código no documento HTML. Este é um ponto de
explicação DOCTYPE HTML. Isso permite que o navegador saiba
que estamos usando HTML. O comportamento atual de usar HTML aqui é que
o navegador
assumirá que estamos usando HTML5 pois é a versão
padrão atual. Ao salvar o arquivo, você deve salvá-lo,
terminando com um HTML de ponto. Chamaremos nosso índice de arquivo HTML. Após a declaração DOCTYPE, podemos adicionar tags HTML de abertura e
fechamento. Tudo o que estiver entre
essas tags HTML será lido ou interpretado como código
HTML pelo navegador. Em seguida, usamos a tag ou o elemento de
cabeça. Isso conterá metadados, que são informações sobre
a página da Web do navegador, e não são exibidos
na própria página. Dentro da cabeça, podemos dizer ao navegador onde
encontrar outros arquivos, como para o CSS
e o JavaScript. Outro exemplo
é a tag de título. A tag de título é importante
para leitores de tela e mecanismos de pesquisa,
dependendo do navegador, isso será exibido
na barra de guias. Devemos definir um título
não vazio aqui. Em seguida, continuamos
adicionando a tag body. Somente os elementos dentro
das tags do corpo serão
exibidos na tela.
5. Hierarquia e formatação: Bem-vindo de volta. Então, antes de prosseguirmos, vou discutir brevemente a hierarquia e também a formatação. É importante entender
a estrutura ou a
hierarquia do HTML. Porque à medida que você trabalha com
mais HTML e também CSS, esses elementos podem herdar comportamento ou estilos uns
dos outros. Podemos pensar em HTML como fazemos quando olhamos para
uma árvore genealógica. Então, temos pais, filhos, irmãos, avós
e assim por diante. Quando aninhamos um elemento
dentro de outro elemento, chamamos o elemento
no interior da criança e o elemento do
lado de fora dos pais. Dois elementos quando aninhados
dentro do pai, eles podem
ser chamados de irmãos. Com relação à formatação, o HTML geralmente ignora o espaço em branco, mas é bom entrar em práticas de
formatação
para garantir que o
documento seja legível, é melhor colocar novas
tags em um nova linha. E qualquer coisa dentro da etiqueta deve ser recuada em um nível. Então, geralmente, são dois espaços. É bom garantir
que seu editor de texto esteja configurado corretamente para usar espaços em vez de tabulação
genuína quatro espaços não são incomuns de ver, mas isso pode tornar o conteúdo
um pouco mais difícil de trabalhar com porque ele pode começar
a cair da tela.
6. Como escolher: Agora temos nossa configuração de
documentos. Podemos seguir em frente para
adicionar alguns elementos. Quando você lê um documento, geralmente o documento
tem um cabeçalho que é maior que
o restante do texto nessa página. Isso é muito comum em publicações
impressas
, como revistas. Os cabeçalhos
em HTML funcionam da mesma maneira. Em HTML, existem seis tipos
diferentes de cabeçalhos, e nós os chamamos de cabeçalhos. H1 é o maior e eles gradualmente ficam menores à medida que você
trabalha até H6, uma boa maneira de
lembrar os títulos é que o H1 será o cabeçalho principal. subtítulo seria H2 também
vale a pena saber
que o
tamanho padrão em que o navegador
exibirá o cabeçalho varia ligeiramente
dependendo do navegador, mas isso pode ser gerenciado
usando CSS em nosso documento. Vamos em frente e adicionar uma tag H1 com o
texto, nossos esportes. Usamos o suporte de abertura H1
e, em seguida,
fechamos o colchete e adicionaremos o colchete de fechamento, que é a barra
para frente H1 e
o colchete entre os dois, vamos adicionar o texto são esportes. Em seguida, adicionaremos uma tag H2 com a mensagem atletas
famosos. Por fim, adicionaremos tags a3 h3. Dê a estes textos, natação, corrida
e ginástica. Vamos salvar isso e executar
o código em nosso navegador. Em nosso navegador,
selecionamos Abrir arquivo
e, em seguida, abrimos o arquivo HTML. Agora podemos ver a página
que começamos a criar.
7. Parágrafos: Neste vídeo, vamos
analisar a criação de parágrafos. Para criar um parágrafo, você coloca o texto dentro de tags contendo P. O comportamento
padrão para vários parágrafos é
que o parágrafo será colocado em uma nova linha com
algum espaço adicionado entre eles. Não há limite para
quanto tempo ou curto o texto dentro das tags
p precisa ser. Vamos adicionar três tags de parágrafo, uma em cada um
dos títulos H3 que criamos no último vídeo. No primeiro, diremos que um
nadador famoso é pensado EN. No segundo, diremos que um corredor famoso é Usain Bolt. E no terceiro, diremos que uma
ginasta famosa é Simone Biles. Vamos salvar isso e
executar a página novamente. Podemos simplesmente recarregar a
tela no navegador. Agora podemos ver que os
três parágrafos foram adicionados à tela. Então, antes de seguirmos em frente, vamos recapitular o que
acabamos de aprender. Podemos criar cabeçalhos
usando cabeçalhos, que podem ser qualquer coisa
de H1 a H6. Também podemos colocar texto
dentro de tags de parágrafo, que usaram a letra
P dentro da tag.
8. Elementos inline e bloqueios: Em HTML, cada elemento é exibido como um
elemento de bloco ou um elemento embutido. Se você imagina que
está fazendo uma viagem ao supermercado
do que a ilha, o supermercado geralmente
ocupa todo o espaço do chão e , portanto, seria
o elemento de bloco. Por outro lado,
quando um item é colocado em uma prateleira
dentro de um supermercado, ele se encaixa ao lado dos outros itens, ocupando
apenas o
espaço necessário. Portanto, isso é como
um elemento em linha. Quando criamos um
elemento em HTML, o elemento é reparado em uma nova linha ou aparece
dentro de algum conteúdo. Quando criamos um cabeçalho, queremos que o cabeçalho se destaque e seja uma entidade por conta própria, e ele aparece em uma nova linha. Então, esse seria
um elemento de bloco. Quando fazemos alguma tecnologia forte, não
queremos interromper o
fluxo do conteúdo em torno do texto forte e ele
não aparece em uma nova linha. Portanto, este é um elemento em linha. Tags de cabeçalho, listas e elementos de
parágrafo são
exemplos de elementos de bloco. Os elementos de bloco ocuparão
toda a largura disponível. Por outro lado, os elementos
inline não começam em uma nova linha e o
fluxo do conteúdo ao redor do elemento não
muda forte e as
tags am são um exemplo de
elementos em linha como as imagens. Os elementos em linha só
ocupam a
largura necessária.
9. Atributos: Bem-vindo de volta. Neste vídeo,
veremos os atributos. O que são atributos? Atributos, vamos adicionar
informações extras a um elemento. Adicionamos o
atributo à tag de abertura. Exemplos de
atributos comuns que podemos usar incluem o título, o id, a classe e o estilo. Embora existam outros, o uso principal de um
atributo ou para aplicar estilo ou informação, como
informações relacionadas ao idioma. Há duas partes
para um atributo, o nome e o valor. Eles são separados
por um sinal de igual e o valor é colocado
dentro de aspas duplas. O nome é o nome do atributo e deve estar em letras minúsculas. O valor é o valor que queremos definir
para o atributo. E isso deve ser enrolado
dentro de aspas duplas. Vamos usar
os atributos id e adicioná-los às mortes que
criamos no último vídeo. A primeira div
usará o cabeçalho de valor. A segunda div
usará o conteúdo de valor.
10. Divs e vãos: Em HTML, div é
abreviação de divisão. Isso representa um contêiner que divide a página em seções. Usando uma div, você pode agrupar os elementos do
HTML juntos. Quando você usa uma div, o usuário não verá
nenhuma diferença na página, mas eles são muito úteis quando
você deseja adicionar estilos a grupos de elementos
posteriormente usando uma div, você pode aplicar os estilos ao
seção inteira de uma só vez, você pode envolver qualquer coisa
dentro de uma div, mas é uma boa prática
lembrar de recuar os elementos que
você aninha dentro do dia para
melhor legibilidade. No último vídeo, mencionei elementos em
linha e bloco. Uma div é um elemento de bloco, então o conteúdo dentro da div será
colocado em uma nova linha. Você pode envolver um grupo de
parágrafos dentro de uma div. E a mesma abordagem
pode ser aplicada a imagens ou títulos em HTML, também
podemos usar span. Uma extensão geralmente é aplicada a algum conteúdo em linha e é,
por si só, um elemento embutido. Portanto, ele não aparecerá em
uma nova linha e
só ocupará tanto espaço
quanto o conteúdo. Você pode aplicar dois
pequenos pedaços de texto ou imagens em que não deseja
dividir o conteúdo
ao redor. Se você quiser segmentar apenas
um
conteúdo específico na
mesma linha que alguns outros textos, então é melhor
usar uma extensão quando
quiser dividir seu
conteúdo em blocos, então é melhor usar uma div . Vamos adicionar alguma
profundidade à nossa página. Envolveremos as
tags H1 e H2 dentro de uma div. Em seguida, também envolveremos todas as tags H3 dentro
de outra div. Vamos salvar isso e
recarregar a página. Visualmente, nada mudou, mas se quisermos
aplicar alguns estilos a alguns grupos de
elementos mais tarde, agora
podemos fazer isso com
muito mais facilidade. Então, para resumir, em HTML, temos elementos de bloco e em
linha. Elementos de bloco aparecem
em uma nova linha, enquanto elementos em linha
aparecem dentro do conteúdo. Podemos usar mergulhos e vãos, que são muito úteis quando
queremos aplicar algum estilo. Divs são elementos de bloco e
vãos são elementos em linha.
11. Forte: Bem-vindo de volta. Mencionei anteriormente
sobre forte e enfatizava ser usado para texto em
negrito e itálico. Neste vídeo, vamos
fazer os nomes de nossos famosos atletas em nossa
página para usar tags fortes. Para fazer isso, aninharemos as
tags e colocaremos as tags fortes dentro das tags p
ao redor do pedaço de texto que
queremos usar fortes. Quando aninhamos tags, devemos nos certificar de que
fechamos as tags na ordem inversa de
como elas foram criadas. Portanto, a última tag criada deve ser a primeira
tag a ser fechada. Então, vamos começar
adicionando tags fortes ao redor do texto que
diz E e Thorp. Também faremos isso
no segundo parágrafo em torno do texto que diz Usain Bolt. Por fim, faremos isso em torno dos textos que
dizem Simone Biles. Vamos salvar isso e
recarregaremos a página no navegador. Agora podemos ver que os nomes de
nossos atletas parecem mais ousados do que o resto dos textos nos parágrafos.
12. Em: Bem-vindo de volta. No último vídeo,
adicionamos tags fortes em torno dos nomes dos atletas
para deixar o texto em negrito. Neste vídeo,
veremos as tags EM, o que significa que o texto
é enfatizado. Usando a tag EM, podemos enfatizar o que
significa itálico o texto. Essas tags funcionam de
forma semelhante às tags fortes. Então, nós os colocamos dentro das
tags que contêm os textos que queremos
enfatizar em itálico. Vamos fazer isso
com os nomes esportivos que estão incluídos
dentro dos cabeçalhos h3. Começaremos com a formação
dentro da tag h3. Agora adicionamos uma tag EM. Fechamos as tags
na ordem inversa em que
elas foram criadas. Então, logo após o final
da palavra natação, fechamos a tag EM. Vamos repetir isso para os outros dois esportes,
corrida e ginástica. Vamos salvar isso e recarregar
a página em nosso navegador. Agora podemos ver que o texto para
cada uma das cabeças está
nadando, correndo e a ginástica
parece enfatizada. Itálico.
13. Sublinha: Bem-vindo de volta. Quando estamos
trabalhando com HTML, outro elemento que está
disponível para nós quando estamos trabalhando com texto é
o elemento subjacente. O elemento subjacente
sublinhará algum texto. Para usar o elemento subjacente, usamos as tags
com a letra U. Existem algumas advertências com
esse elemento para estar ciente. Para sublinhar alguns textos em
HTML é melhor aplicar um estilo em CSS por meio de uma propriedade
chamada decoração de texto, para a qual você define
o valor subjacente
ao próprio
elemento subjacente HTML, destinado a ser usado para marcar
alguns textos de alguma forma. Por exemplo, se tiver
um erro de ortografia ou se você estiver usando textos
chineses, o elemento subjacente não
deve ser usado apenas por motivos de
exibição sem
outro motivo válido, como o erro ortográfico. Apenas para fins de demonstração, vamos adicionar o elemento
subjacente à palavra nadador, corredor e ginastas
dentro de cada uma das tags p. Mais tarde, revisaremos
isso e implementaremos corretamente usando CSS em nosso HTML. No primeiro parágrafo em torno do
trauma, adicionamos a tag. Você fechará isso
logo após a palavra. Vamos repetir esses passos
para corredores e ginastas. Vamos salvar nosso HTML e
recarregá-lo no navegador. Você pode ver agora que o
texto foi sublinhado, mas isso pode ser facilmente
confundido com um link clicável.
14. Links: Bem-vindo de volta. Neste vídeo,
veremos
links para adicionar um
link a uma página da Web, você usa o elemento âncora. Isso é representado
pela letra a. Entre as tags de abertura
e fechamento, colocamos o texto
que o usuário deve ver quando pressionar o link
dentro da tag de abertura, usamos um atributo para definir
onde os links devem ir para. Isso pode ser um
caminho ou um endereço para um arquivo em seu
computador ou em um servidor. Normalmente, porém, para links, o caminho para o
atributo é um URL. O nome do
atributo é H ref, e isso significa referência de
hiperlink. Hyperlink é um
termo técnico para um link. Também podemos usar um atributo de
destino que especificará onde
os links devem ser abertos. O comportamento padrão
não altera esse atributo é que ele será aberto na janela
atual. Se você alterar o valor
para sublinhado em branco, ele
será aberto em uma nova
janela ou guia em nosso HTML, vamos adicionar três links, um dentro de cada um dos esportes, que navegará pelo usuário para uma página da Wikipédia
sobre esse esporte. Então, a partir do
parágrafo sobre natação, usaremos a tag a para fazer tags de
abertura e fechamento. Adicionaremos o texto do link. Saiba mais sobre
natação. Dentro da etiqueta. Adicionará o atributo H ref e adicionará o
link da Wikipédia para nadar. Em seguida, faremos o
mesmo para correr. Adicionamos as tags a. Adicionamos o texto do link, Saiba mais sobre a execução. Em seguida, adicionaremos o atributo
H ref e adicionaremos o
link da Wikipédia para execução. Por fim, faremos o
mesmo novamente abaixo do parágrafo sobre ginástica. Adicionamos as tags a e,
em seguida, o texto do link. Saiba mais sobre ginástica. Adicionamos o atributo H ref
e, em seguida, o
link da Wikipédia para ginástica. Vamos salvar isso e
recarregaremos a página em nosso navegador. Quando peguei o link, saiba mais sobre natação. Agora sou navegado até o link da
Wikipédia para nadar. Então, para resumir o que
aprendemos neste vídeo, adicionamos links usando
o elemento âncora, o link que o usuário vê é colocado como texto entre as tags de
abertura e fechamento. Usamos um atributo H ref para definir o local
para o link. Se você quiser
alterar o comportamento de como o link é aberto, use o atributo
target.
15. Imagens: Bem-vindo de volta. Neste vídeo,
vamos ver
a adição de imagens à nossa página. Para adicionar imagens à página, usamos o elemento image. Estas são as letras
IMG dentro da tag. Embora a maioria dos elementos em HTML exija que usemos tags de abertura
e fechamento, a tag de imagem é o que é
chamado de tag de fechamento automático, ou às vezes chamada
de elementos Vazios. Isso ocorre porque o
implementamos usando apenas uma tag. A razão para isso é que não
há conteúdo que precise ser colocado entre a tag de abertura e fechamento. Você pode ver alguns exemplos que usam uma tag de fechamento separada. Mas em HTML5, isso não
é uma necessidade. Você pode pensar em adicionar
imagens, como adicionar links, porque adicionamos um atributo com o caminho da imagem que
queremos exibir. Mas a estrutura da etiqueta em si é um pouco diferente. Para definir um caminho da
imagem que queremos exibir, usamos um atributo
chamado source. Isso é representado
pelas letras S, RC. Também definimos outro
atributo chamado esse atributo dance
para texto alternativo. E ele deve conter
uma descrição
da imagem caso
ela não seja carregada, definindo tudo como
atributo também é realmente importante para fins de
acessibilidade. Então, por exemplo,
se alguém deficiência
visual
visitou nossa página, usando o
atributo ALT que pode ser lido uma descrição
da imagem pelo leitor de tela usando
o atributo alt é também muito útil quando se trata otimização de mecanismos de pesquisa, porque os
próprios mecanismos de busca não conseguem ver as imagens quando você está
adicionando imagens à sua página, você pode usar um link direto para o imagem de
outro lugar na web. E isso seria
chamado de hotlink king. No entanto, geralmente, isso não é uma boa prática
porque significa que agora você está dependendo de outro site e assumindo que a imagem sempre
estará lá, repente, isso pode se abrir muito mais oportunidades
para ocorrerem erros. Então, vamos adicionar
uma imagem à nossa página que ficará abaixo do
título, nossos esportes. Você pode
usar qualquer imagem aqui, mas vou usar uma
do site pixabay. Dentro do diretório
do arquivo index.html, você precisa criar uma nova
pasta chamada imagens. Em seguida, você precisa
baixar a imagem
do site Pixabay para o seu computador e
copiá-la para esse diretório. Depois de tudo isso,
você poderá ver a imagem dentro
do editor de texto. Agora, quando usamos a imagem, porque ela faz parte
do mesmo projeto que o arquivo index.html. Podemos usar o caminho relativo, e isso será
interpretado automaticamente para o caminho completo no
código HTML sob o cabeçalho. Agora vamos adicionar a imagem. Então, começamos usando as
letras IMG dentro da tag. Em seguida, vamos adicionar o atributo
source. Então, adicionamos as letras SRC, seguidas pelo sinal de igual. E para o valor,
colocamos o caminho da imagem. Agora, para o atributo de
textos alternativos, vamos adicionar um valor. Vamos dizer
um estádio esportivo. Porque esta é uma descrição do que a imagem representa. Agora vamos salvar isso e recarregar
a página em nosso navegador. Agora podemos ver que a
imagem foi adicionada à nossa tela
com sucesso.
16. Listas: Bem-vindo de volta. Neste vídeo,
veremos listas em HTML. Quando você está trabalhando com HTML, você tem algumas opções sobre como
deseja exibir seu texto. Já vimos como
usar o elemento de parágrafo, mas pode haver momentos em que
você tem alguns textos que
gostaria de exibir como
uma lista em HTML, existem dois tipos de listas. Podemos usar listas ordenadas
e listas não ordenadas. As listas ordenadas são representadas por uma tag usando as letras O, L e as listas não ordenadas são representadas por uma tag
usando as letras UL. Com ambos, itens dentro
da lista
são chamados de itens da lista, e eles são representados por
uma tag com as letras LI. Por padrão, o
navegador recuará as listas, listas ordenadas. As listas ordenadas exibem os itens da
lista com números. Portanto, se você tiver uma lista
que representa etapas ou resultados ou algum tipo de item que precisa ser
exibido em uma sequência, isso pode ser realmente útil. Por outro lado, as listas não ordenadas usam marcadores para
exibir os itens da lista, e eles podem ser estilizados via CSS. Listas não ordenadas também podem ser
úteis para navegação no site. Uma coisa a ter
em mente quando você está criando uma lista é que
a lista ordenada ou o elemento da lista
não ordenada é mais parecido com um
contêiner para a lista. Os textos com os itens da
lista devem ser encapsulados dentro
da tag do item da lista. Então, em nossa página, vamos adicionar uma lista. Não precisamos
usar uma lista ordenada para isso porque não há nada para
exibir em uma determinada ordem. Mas vamos
implementar isso primeiro usando uma lista ordenada e depois reimplementado usando
uma lista não ordenada. Vamos começar adicionando o elemento da lista
ordenada. Por isso, criamos tags de abertura e fechamento com
as letras OL. Temos três esportes,
queremos que nossa lista contenha natação, corrida
e ginástica. Então, vamos adicionar itens de lista
para cada um deles, usamos as letras LI dentro das tags para os itens da lista. Selecione, Crie três desses. No primeiro item da lista, adicionaremos o texto para mim. No segundo, correndo. A terceira ginástica. Vamos salvar isso e recarregar
a página no navegador. Agora podemos ver nossa lista e cada item na lista
tem um número ao lado dela, porque estamos usando
uma lista ordenada. Vamos alterar isso para
usar a lista não ordenada, pois não precisamos que
os itens da lista estejam em qualquer ordem dentro das tags OL. Vamos alterá-los para usar a UL. Na verdade, isso é tudo o
que precisamos mudar, pois os itens da lista em si são os mesmos para
qualquer tipo de lista. Desta vez, podemos
ver nossa lista novamente, mas os itens da lista usam marcadores porque estamos
usando a lista não ordenada. Vamos recapitular o que
acabamos de aprender. Podemos criar listas
em HTML usando OL para lista ordenada ou
UL para lista não ordenada, representamos os itens
na lista usando a tag LI. Listas ordenadas são
úteis para exibir itens em uma sequência
e usar números, listas
não ordenadas,
usar pontos de marcadores.
17. Estilos: Bem-vindo de volta. Neste vídeo, vamos apresentar o
uso de estilos em HTML. Este é um curso HTML, então não vamos mergulhar
profundamente neste tópico, mas ainda é incrivelmente
útil conhecer o básico. Quando queremos adicionar
estilos à página da Web, precisamos usar CSS. Css significa Folhas de estilo em
cascata e é uma linguagem de estilo. Existem três
opções disponíveis para como usar CSS
na porcentagem, podemos usar CSS externo. CSS interno, CSS embutido. CSS externo significa
que importamos os estilos de outro arquivo
que foi salvo externamente. CSS interno significa que
os estilos são armazenados dentro do elemento de estilo
dentro do mesmo arquivo. CSS embutido significa que
usamos um atributo de estilo diretamente nos elementos
individuais aos quais queremos aplicar estilos. Se você quiser
aplicar apenas alguns estilos, o CSS embutido é bom, mas geralmente é mais limpo manter os estilos isolados
do HTML. Se mais de uma pessoa estiver
trabalhando na página da web, isso é definitivamente
algo que você deve considerar. E, a longo prazo e a folha de estilos
externa geralmente
é uma abordagem mais
sustentável. Outro benefício de não usar estilos em
linha é que você
pode criar uma regra de estilo, mas aplicar isso a
vários elementos. Isso significa menos digitação
e duplicação. Vamos começar
observando estilos em linha. Isso significa que colocamos
os estilos diretamente
nos elementos HTML por
um atributo de estilo. Usamos o atributo style
seguido por um sinal de igual
e, em seguida, as aspas
dentro das aspas substituíram o estilo ou estilos que queremos
aplicar ao elemento. Ao declarar os estilos, você usa o
nome da propriedade e, em seguida, o valor. E você
os separa com dois pontos. Se você quiser usar
vários estilos, coloque um ponto e vírgula
no final de cada bloco. Normalmente, porém, é
bom entrar na prática de apenas
adicionar o ponto e vírgula após o estilo para que
possamos adicionar mais estilos mais tarde sem arriscar
criar erros. A primeira coisa que
vamos fazer em nossa página com
estilos é remover o elemento
subjacente de uso incorreto que implementamos
em um vídeo anterior. Como queremos sublinhar o texto apenas
para fins de exibição. Fazer isso com o elemento
subjacente não
é a maneira certa de
conseguir isso. Em vez disso, vamos usar uma propriedade chamada decoração de
texto. Essa propriedade permite adicionar
alguma decoração ao texto que você possa colocar uma linha através
do texto sobre o texto, sob o texto estão
abaixo e sobre o texto. No nosso caso, queremos
colocar uma linha através do texto para que possamos definir essa
propriedade como sublinhada. Vamos prosseguir e
implementar isso. Vamos começar mudando o
elemento subjacente para ser uma extensão. Isso significa que podemos segmentar
o conteúdo em linha sem aplicar estilos
ao conteúdo ao redor. Em seguida, adicionamos o atributo style, seguido por um sinal de igual
e, em seguida, algumas aspas. Dentro das aspas, adicionamos a propriedade de
decoração de texto, dois pontos e, em seguida,
subjacente para o valor. Também adicionamos um ponto e vírgula. Vamos repetir essas etapas para os outros dois elementos
sublinhados. Vamos salvar isso e recarregar
a página em nosso navegador, vemos o texto subjacente. Mas desta vez,
implementamos isso corretamente
usando estilos em vez de
usar o elemento subjacente.
18. Mais estilos: Bem-vindo de volta. Agora que implementamos
nosso primeiro estilo, vamos
refatorar isso para usar uma folha de estilos interna e
depois uma folha de estilos externa. Então, como lembrete, uma
folha de estilos interna é onde usamos o elemento de estilo
dentro do nosso documento e substituímos todos os estilos
do nosso documento dentro desse elemento usando seletores de classe
CSS. Os seletores de classe Css
nos fornecem uma maneira de
rotular nossos estilos. E colocamos um ponto antes do
que rotulamos o estilo, e depois do rótulo, colocamos um conjunto de chaves encaracoladas. Classes Css também significam que somos capazes de dar a mais de um
elemento os mesmos estilos. Então você não precisa escrever
os estilos toda vez que
quiser usá-los. Em seguida, adicionamos
o atributo
class ao elemento que deseja
aplicar os estilos. E usamos o nome da classe como
o valor do atributo. Como este é um atributo, separamos o
nome e o valor por um sinal de igual e o valor
é colocado dentro das aspas. Então, vamos voltar ao nosso HTML e implementar isso em nossa página. Vamos mover o
estilo em linha que criamos para a decoração de texto para
uma folha de estilo interna. Então, em nossa página sob
o elemento title, vamos adicionar
o elemento de estilo. Fazemos isso usando tags de abertura
e fechamento com o estilo de texto. Agora, dentro do elemento de estilo, vamos adicionar o estilo que queremos
usar em uma classe chamada texto
subjacente. Usamos um ponto seguido pelo nome
do texto sublinhado, seguido de abertura e
fechamento de chaves. Dentro dos
aparelhos encaracolados, adicionamos os estilos. Então, no nosso caso, queremos adicionar sublinhado de decoração de
texto. Agora, precisamos adicionar uma
classe ao elemento. Removerá os estilos em linha. E substituiremos isso
pelo nome da classe. Dizemos que classe é igual
e, em seguida, usamos aspas. Dentro das aspas, adicionamos o nome da classe. Vamos salvar isso e recarregar
a página e nosso navegador. A página ainda parece a mesma quando usamos estilos embutidos. Agora, se quiséssemos dar
um passo adiante, poderíamos extrair esses estilos em uma folha de estilos externa. Começaremos criando
um novo diretório para armazenar o arquivo CSS. Dentro do diretório
criará um arquivo chamado main.css. Agora, vamos mover os estilos
do elemento style em nosso arquivo HTML para
nosso arquivo main.css. Em seguida, podemos remover
os elementos
de estilo do documento HTML. Então, como importamos esse
arquivo CSS para nosso arquivo HTML? Bem, em HTML, podemos usar um elemento chamado
elemento link. O elemento link
permite declarar a
relação entre o arquivo atual e outro recurso de
fora do arquivo, usamos um atributo
chamado relacionamento e isso é representado
pela linha de textos. Isso indicará a
relação entre o arquivo atual e o
arquivo que vamos vincular. Também precisamos usar
um atributo H ref para adicionar o local para o
arquivo que vamos vincular. O link não exibe
nada diretamente, então só precisamos usar uma
única tag dentro da tag. Vamos adicionar o atributo rail. Em seguida, definiremos isso para
a folha de estilo de texto porque esse é
o relacionamento. Em seguida, vamos adicionar
o atributo HREF e, em seguida, a localização
do arquivo CSS. No nosso caso, esta é a barra CSS main.css porque o
arquivo main.css agora está armazenado
no diretório CSS. Agora vamos salvar o arquivo e
recarregá-lo em nosso navegador. Novamente, nada mudou visualmente da perspectiva
do usuário, mas o CSS agora está sendo
importado de um arquivo externo.
19. Estilos adicionais: Bem-vindo de volta. Agora nos
familiarizamos mais com folhas de estilo. Vamos adicionar
mais alguns estilos ao nosso documento. A primeira coisa que
vamos fazer é fazer com a página inteira use uma
cor de fundo azul claro. E também vamos
centralizar todo o texto. Então, adicionaremos uma classe
à tag body chamada plano de fundo
principal. Agora, no arquivo CSS, vamos adicionar a classe. E então definiremos a cor de
fundo para azul
claro e o centro de
alinhamento de texto. Em seguida, faremos nosso cabeçalho
H1 ser marinho, então ele se destaca um pouco mais. Então, adicionaremos um custo ao elemento
H1 chamado cabeçalho. Dentro do arquivo CSS, adicionaremos a classe e
definiremos a cor como azul marinho. Em seguida, queremos ter certeza de que
nossa imagem será centralizada. Então, adicionaremos uma classe ao elemento de
imagem chamado image. Em seguida, adicionaremos isso
ao arquivo CSS. No CSS, definiremos
a exibição para bloquear a margem esquerda, automática. Margin-right, largura automática para 50%. Usando margem automática menos o centro de um
elemento de bloco horizontalmente. Agora vamos adicionar alguns
estilos adicionais à nossa lista, que
isso também fique centralizado. Vamos adicionar uma classe
chamada estilos UL. No arquivo CSS. Vamos adicionar essa classe. Estou pronto
para exibição em bloco embutido. Isso significa que o elemento é tratado como um elemento em linha. Portanto, não há força nova linha, e ela só ocupará a largura
necessária, mas também alinhará o texto à esquerda para que ele apareça ao
lado dos pontos de bala. Agora vamos salvar nosso
arquivo e recarregá-lo. O navegador. A página mudou e obtemos todos os estilos que acabamos de aplicar
mostrando na tela.
20. Tabelas: Bem-vindo de volta. Neste vídeo, veremos o
uso de tabelas em HTML. Às vezes, quando você está
trabalhando com HTML, você pode ter alguns dados
que deseja exibir em uma tabela. Um exemplo pode ser
alguns resultados de pontuação. Isso também poderia ser útil se você tivesse uma página na
qual deseja que ela exiba alguns
detalhes financeiros em HTML, as tabelas são representadas
pelo elemento da tabela. Isso é abrir e fechar
tags com a tabela de impostos. Cada linha dentro da tabela é representada pelo elemento de linha da
tabela. E essas são as tags de abertura
e fechamento com o texto T geralmente são quando você cria uma tabela
na primeira linha, você usa cabeçalhos para as colunas. E podemos fazer isso em HTML
com o elemento de cabeçalho da tabela. Para usar isso, usamos as
tags de
abertura e fechamento com as letras TH
nos cabeçalhos da tabela. Também podemos definir um atributo de
escopo, o que é muito útil
quando alguém com um leitor de tela visita o site. Neste atributo, definimos quando o valor é uma linha ou coluna. Com tudo isso, você
tem uma tabela configurada, mas nenhum dado na tabela. Para adicionar dados à tabela, usamos os elementos de dados da tabela. Isso é abrir e fechar
tags com as letras t, d. Se você precisar que os dados da tabela sejam abrangidos por várias
linhas ou colunas, poderá usar os atributos de
extensão de linha ou colspan. E você define um número para
o valor que indicará quantas linhas ou colunas, mas
os dados devem se espalhar. Então, vamos começar a
implementar uma tabela em nosso arquivo. Vamos adicionar
uma tabela que
mostrará o número total de medalhas de cada um de nossos atletas como uma
nas Olimpíadas das quais eles
participaram. Vamos adicionar uma tabela antes dos cabeçalhos h3 com os esportes. Vamos começar adicionando
o elemento da tabela. Adicionamos
tags de abertura e fechamento com a tabela de impostos. Nossa tabela terá duas colunas, uma para o nome dos atletas e outra para a contagem
total de medalhas. Diante disso, queremos adicionar
dois cabeçalhos à nossa tabela. Então, para adicionar os cabeçalhos
à nossa tabela, primeiro
precisamos adicionar uma
linha para conter os cabeçalhos. Adicionamos as
tags de abertura e fechamento com as letras TR. Dentro dessas tags, podemos adicionar os cabeçalhos. Então, adicionamos o elemento de
cabeçalho da tabela usando tags com as letras TH. Vamos adicionar dois desses. Como esses cabeçalhos das
colunas definirão o
atributo scope com um valor chamado
em cada um dos elementos. Dentro do primeiro cabeçalho, adicionaremos o atleta de texto. E dentro do segundo cabeçalho, adicionaremos as medalhas de texto. Antes de prosseguirmos, vamos salvar isso e dar uma olhada. O que fizemos até
agora no navegador. O que vemos são nossos dois títulos porque não
adicionamos dados, mas estamos a caminho para
criar nossa primeira tabela. Então, agora vamos em frente e
adicionar alguns dados à nossa tabela. Uma, a primeira linha,
vamos adicionar quantas medalhas que são
Thorpe é uma. Então, começamos criando uma linha. Em seguida, precisamos
adicionar duas células de dados, uma para o nome e outra
para o total de metal. Fazemos isso usando os elementos
de dados da tabela. Então, criamos
tags de abertura e fechamento com as letras td. Dentro do primeiro, adicionaremos as informações do texto. Dentro do segundo, adicionaremos nove
à contagem de medalhas. Agora precisamos
repetir esses passos novamente para os outros
dois atletas. Vamos começar
adicionando outra linha. Agora precisamos adicionar outros
dois elementos de dados de tabela. No primeiro,
adicionaremos o texto Usain Bolt
e, em seguida, o segundo
adicionará oito para a contagem do meio. Finalmente, precisamos adicionar uma linha de tabela final e outros
dois elementos de dados da tabela. Dentro do primeiro, adicionaremos o texto Simone Biles
e, dentro do segundo,
adicionaremos sete os dados da tabela. Vamos salvar nosso arquivo e
recarregá-lo no navegador. Agora podemos ver nossa tabela
com todos os nossos dados. Mas não está muito alinhado com o
resto da página. Então, vamos adicionar alguns estilos
dentro do elemento da tabela. Adicionaremos um
atributo de classe com a tabela de atleta de valor. Agora, dentro do nosso arquivo CSS, vamos adicionar essa classe. Na classe, vamos
definir a largura para 22,5 por cento. Margin-left auto,
margin-right auto. E vamos dar à tabela uma cor de
fundo verde. Vamos salvar tudo
novamente e recarregar a página. Desta vez, nossa tabela está centralizada e tem sua
própria cor de fundo.
21. Como criar formulários: Bem-vindo de volta. Neste vídeo,
vamos introduzir formulários em HTML em nosso dia-a-dia, muitas vezes
preenchemos
formulários quando precisamos compartilhar algumas informações
para algum propósito. Talvez estivessem participando de
uma consulta de saúde ou talvez estejamos nos
candidatando a um emprego. Mas às vezes usamos apenas um formulário para selecionar alguns
itens que queremos comprar. Normalmente, um formulário é algum tipo de documento com
espaços em branco que você preenche com seus detalhes ou faz algumas seleções em HTML, formulários funcionam de
forma semelhante aos de papel. Podemos usar o
elemento de formulário para coletar informações de pessoas
que visitam nossa página da web. Às vezes, quando visitamos
uma página da Web que
usa apenas um campo de entrada de texto
, como a Pesquisa Google. Na verdade, estamos usando um formulário
para usar um formulário em HTML, usamos o elemento de formulário, que é o formulário de texto
dentro do imposto. Vamos começar adicionando
um formulário à nossa página. Faremos isso antes da tag
do corpo de fechamento. Usamos a tag com
o formulário de texto. E então nós o fechamos. Podemos adicionar algum texto
dentro do formulário, assim como fazemos no resto
da página com cabeçalhos
ou parágrafos, Vamos adicionar um título para o
formulário dentro das tags H1. Vamos chamá-lo de perguntas. Formulário. Não é muito útil, a menos que o usuário possa realmente
inserir alguns dados. Usamos campos de entrada dentro do nosso formulário usando o elemento
de entrada. Dentro do elemento de entrada, podemos definir um
atributo type que definirá como o campo de entrada será
exibido na página da Web. E também define o tipo de dados que o
usuário pode inserir. Por padrão, o
atributo type é definido como
texto para que o usuário possa
digitar texto nele. Poderíamos alterar isso para
senha se quiséssemos que o usuário insira uma
senha ou número oculto, se quisermos usá-lo
para adicionar alguns números, podemos pré-preencher um campo de entrada de
texto usando o atributo value. Também precisamos usar
um atributo name. O atributo name fica
emparelhado com o valor inserido na entrada
quando o formulário é enviado. Por exemplo, se
tivéssemos um campo de entrada chamado primeiro e o usuário
digitado em seu nome, que era Fred quando
o formulário é enviado, primeiro seria igual a
thread em nossa página. Vamos adicionar uma entrada ao nosso formulário. Começamos usando as tags
com o elemento de entrada. Vamos pedir ao nosso usuário que insira seus esportes favoritos. Então, definimos que o tipo é texto, o nome como pergunta. Também definiremos um
id com Favorito. Para rotular uma entrada, usamos o elemento label. Isso ajuda o usuário a
identificar qual é a entrada para o elemento de rótulo
usa tags de abertura e fechamento e
o texto do rótulo é colocado entre
as tags
para que o rótulo seja corretamente correspondido
a entrada correta, precisamos definir um
atributo id na entrada
e, em seguida, um atributo afford com o mesmo valor é
definido no rótulo. Vamos adicionar um rótulo à
entrada que acabamos de adicionar. Então, usamos tags de abertura e
fechamento com rótulo. Definimos o ID da
entrada que era favorita. E entre as tags, dizemos, qual é o seu esporte
favorito? Se quiséssemos apresentar
várias opções aos nossos usuários e permitir que eles
selecionem qualquer número de opções. Poderíamos usar o elemento de entrada e configurá-lo para a caixa de seleção tipo. Vamos adicionar um
conjunto de caixas de seleção ao nosso formulário para pedir
ao usuário que selecione seus atletas
favoritos, começaremos usando o elemento de
parágrafo com o texto, selecione seus atletas favoritos. Em seguida, adicionaremos
três caixas de seleção, uma para cada um de nossos atletas. Começamos usando
o elemento label e definiremos para dois. Thorpe também adicionará
o texto em Thorpe. Em seguida, adicionamos a entrada. Definimos id para o mesmo valor que o atributo for
no rótulo, que é o nome para atleta, tipo, caixa de seleção
e valor para Thorpe. Vamos repetir esses passos
novamente para nossos outros atletas. Então, usamos o elemento label. E desta vez nos
sentamos para dois barcos. Também adicionará o
texto Usain Bolt. Em seguida, adicionamos a entrada. Dissemos id para o mesmo valor que o atributo for no
rótulo, que é barco. Move esse nome para atleta, tipo, caixa de seleção
e valor para votar. Por fim, faremos isso de
novo para Simone Biles. Então, usamos o elemento rótulo
e nos sentamos para duas biles. Também adicionará os
textos Simone Biles. Em seguida, adicionamos a entrada. Então, definimos o ID
para o mesmo valor o atributo for no
rótulo, que é Bíblias. Em seguida, definimos o nome para atleta, tipo, para chatbox e
valor para comprar casas. Vamos também adicionar uma
quebra de linha entre cada uma
das caixas de seleção para que cada caixa de seleção apareça
em uma nova linha. Para fazer isso, usaremos
o elemento quebra de linha, que é as letras
BR dentro da tag. Só precisamos usar uma
única tag para quebras de linha. Agora vamos salvar isso e
recarregar a página e nosso navegador ou formulário está
começando a tomar forma. Mas vamos alterar brevemente a ordem da primeira entrada e rótulo para que o rótulo apareça
antes do campo de entrada. Então, de volta ao nosso código, colocará o rótulo para o elemento de entrada. Vamos salvar isso e
recarregar a página novamente. Desta vez, vemos que o rótulo
aparece antes do campo.
22. Botões de formulário: Bem-vindo de volta. No último vídeo, introduzimos formulários em HTML. No final do vídeo, adicionamos algumas
caixas de seleção ao nosso formulário. Isso é ótimo quando não nos importamos quantas opções
o usuário seleciona, mas se quisermos apenas que
ele selecione um item do que um botão de opção pode
ser mais apropriado. Neste vídeo, vamos
adicionar um botão de opção ao nosso formulário,
que pergunta ao usuário
se ele gostou do nosso site e
dá a ele a opção de selecionar sim ou não para criar um botão de opção, usamos os elementos de entrada
e rótulo, assim como quando
criamos as caixas de seleção. Desta vez, porém, definimos o atributo type no elemento
de entrada como rádio. Vamos voltar à nossa
página e implementar isso. Então, começaremos
adicionando algum texto dentro das tags
p para perguntar ao usuário
se ele gostou do nosso site. Agora vamos adicionar os
dois botões de opção. Então, adicionamos o elemento de entrada com o tipo definido para rádio ou DTS. Nome para pergunta e valor. Sim. Agora, para o elemento label, criamos o rótulo
usando as etiquetas de rótulo. E entre as tags, adicionamos o texto, sim. Também definiremos o atributo
for como yes, pois esse é o ID
no elemento de entrada. Vamos repetir essas etapas novamente, mas desta vez para a opção sem. Então, adicionamos o elemento de entrada
com o tipo definido como rádio, ID
Musette para saber, nome, pergunta
e valor a ser conhecido. Agora, para o elemento label, criamos o rótulo
usando as etiquetas de rótulo. E entre as tags,
adicionamos os textos, não. Também definiremos o atributo
for para saber , pois esse é o ID
no elemento de entrada. Vamos salvar isso e recarregar a página e nosso navegador novamente. Agora podemos ver nossos
botões de opção foram adicionados
à página para que o usuário
possa selecionar sim ou não.
23. Como enviar o formulário: Bem-vindo de volta. Na computação, os computadores enviam e recebem informações
usando solicitações HTTP. Se você pensar na Internet
como rede de computadores, em poucas palavras, o cliente, que geralmente é o navegador, pode enviar uma solicitação para um servidor
e, quando o fizer,
usa o protocolo HTTP. Este é essencialmente
um conjunto de regras ou procedimentos para o envio de dados. O servidor responderá de
alguma forma usando o
mesmo protocolo HTTP. Quando usamos um formulário, o usuário fornece
algumas informações que serão
entregues ao servidor dentro da
solicitação HTTP para
satisfazer a capacidade de enviar os dados
do formulário para um servidor, temos que obter os elementos do
formulário e atributos para onde
as informações
do formulário devem ser enviadas e para que tipo de
solicitações HTTP devem ser feitas. Para fazer isso, usamos o
atributo action para indicar para onde
as informações são enviadas
e, em seguida, um atributo de método
para o tipo de solicitação. E isso pode ser GET ou post. Mas se você estiver usando dados
confidenciais, você deve usar o post aqui, vamos definir a ação
para um URL fictício em nosso formulário, que chamaremos de HTML fictício, criará esta página. Agora. Vamos deixá-lo em branco, pois isso é puramente para fins de exibição. Em seguida, usaremos o método post. Para enviar
o formulário que perdemos, precisamos adicionar um
botão de envio à nossa página. Para fazer isso, usamos
o elemento de entrada com o atributo type
definido para enviar. Em seguida, definimos o valor para os textos que devem ser
exibidos no botão. Se não definirmos esse atributo de
valor, ele será enviado por padrão. Então, vamos encerrar nosso formulário
adicionando o botão enviar, fará isso no
final do formulário. Então, usamos o elemento de entrada. Definimos o tipo para enviar. Também definiremos o
valor para ser concluído. Agora vamos salvar isso e recarregar
a página no navegador. Agora temos nosso formulário completo ao lado
do resto da nossa página. Agora vamos preencher a
forma de alguns valores. Vamos prosseguir e pressionar
o botão Enviar. Nós somos navegados para
a página HTML de ponto fictício, que estava em branco. No entanto, podemos abrir
as ferramentas do desenvolvedor
em nosso navegador. No Chrome, acessamos
isso selecionando Exibir console
JavaScript do desenvolvedor. Em seguida, vamos para a guia
que diz rede. Então, vamos voltar à nossa
página e reenviar o formulário. Agora, podemos inspecionar
a solicitação e ver os dados do formulário
que foram enviados. Se tivéssemos usado get
como método, os
dados do formulário enviado ficariam visíveis na URL do arquivo na tela, razão pela
qual isso não é
sugerido para dados confidenciais.
Emma Williams
