Transcrições
1. Introdução ao HTML: Se você quiser aprender
mais sobre HTML, até o ponto em que você pode criar seu próprio site simples, tudo em menos de 30 minutos se
chegar ao lugar certo. E a melhor coisa
sobre isso é que você nem precisa
instalar nada. Você pode acompanhar
este curso usando editores de textos
on-line
prontamente disponíveis. E vamos dar uma
olhada neles em um segundo. Mas primeiro, o que é HTML? Html significa Hypertext
Markup Language. que é usado? Você pode perguntar, seu DML garante a formatação adequada
de textos e imagens para o seu navegador
da Internet. Tenha em mente que o HTML não é uma linguagem de programação e a sensação de ter lógica
e condições, ele é usado apenas para exibir texto e imagens
em sua maior parte. Mas isso por si só torna muito
crucial para o desenvolvimento web. Porque o que é um site
sem texto ou imagens, certo? Então, as três seções principais
deste curso são o que é HTML? O que já passamos pela sintaxe
básica para garantir que tenhamos uma compreensão completa
de como o HTML escreveu. E, finalmente, fazer uma página da Web. Então, vamos começar. Vamos?
2. Crie sua primeira página na web!: Então, vamos dar uma
olhada em como podemos criar nosso próprio arquivo HTML para isso, digamos para a
área de trabalho ou onde você escolher ter seu arquivo
HTML criado. Só vou criar um
novo arquivo e nomeá-lo HTML. E, dentro desse
arquivo, clique com o botão direito do mouse em Novo. Em seguida, vamos
clicar em Documento de texto. Devemos ver novos
documentos criados. Agora, para visualizar a
extensão do nosso arquivo, clicaremos em Exibir com o botão esquerdo do mouse
nesta caixa que diz extensões de nome de
arquivo. Isso nos permite ver a
extensão do nosso arquivo. Nesse caso, é dxdy. Queremos que seja um arquivo HTML. Então, o que faremos é mudar
esse dx dy para HTML. Isso nos dará um
aviso de que estamos alterando a extensão do
nome do arquivo. Clicamos em Sim. E agora vamos alterar o nome do nosso arquivo
para índice, por exemplo. Agora, nossos fundos devem
ter um ícone do navegador para menos mostrar a idade
da Microsoft, mas prefiro
alterá-lo para o Google Chrome. Agora vamos
clicar duas vezes nele e abri-lo. Claro que parece preto. Isso ocorre porque não adicionamos nada ao arquivo HTML antigo. Para adicionar coisas ao nosso arquivo, vamos clicar com o botão direito e abri-lo com um editor de texto. Tenho o código do Visual Studio. Se você não tiver um editor de texto, basta usar a nota
padrão,
mas começar a escrever seu código. Mas isso não
parece muito prático. Em vez disso, vamos
escrever nosso código e um belo editor de texto
online. E, quando terminarmos, copiaremos colar
o arquivo HTML total que criamos aqui. Parece justo o suficiente.
Vamos começar. Vamos ao nosso navegador
e digitar a guia URL, W3 schools.com slash client. Clique duas vezes no editor de
frontend try. E, em seguida, excluiremos esse código. Agora temos uma
tela em branco para trabalhar. Então, como o HTML funciona? Parecia, em sua maior parte, é feito de tags que
nos permitem prettificar nosso texto. Caso contrário, poderíamos
digitar livremente sem nenhuma etiqueta e ele ainda
exibirá nossos textos
na página da Web. Por exemplo, meu primeiro site. Vamos clicar em Executar. Oh, você vê, eu apenas digito a nova linha
no código-fonte, mas ela não mostrou isso
no produto final
ou no navegador. É aqui que as tags
vêm e tocam. tags dizem ao seu navegador para exibir as coisas de
uma maneira específica. Então, agora vamos dar uma
olhada em como podemos usar tags para estruturar nossos textos e colocá-los onde quisermos. Então, digitamos olá. Em seguida, uma nova linha que diz
Este é o meu primeiro site. Então, temos que dizer
que há uma quebra de linha
no topo e rasgo. Para fazer isso, usaremos
tags para ser mais específico, a tag BR, que
significa quebra de linha. Então, vamos
ter Hello, depois BR. Vamos executar nosso código. E, a propósito, eu não preciso
colocar a pilha em uma nova linha, eu poderia colocá-la ao lado disso, e ainda
teria o mesmo efeito. Portanto, a tag BR aqui diz ao
navegador para iniciar uma nova linha. Agora diga, por exemplo, não
teríamos nosso texto em negrito. Vamos usar apenas a tag p, que significa Bolt. Por exemplo, notei que abri minha tag p aqui e tive que fechá-la aqui. Caso contrário, teria negrito todos os textos que
vêm depois dele. Por exemplo, se
tivéssemos mais texto depois, este é o meu primeiro site, não
fechamos a tag em negrito. Isso é o que vamos conseguir. Então, um HTML, às vezes temos uma tag de abertura e
, em seguida, uma tag de fechamento. Isso é para dizer ao
nosso navegador, ei, faça essa marcação apenas para
esses textos específicos. Então, agora, quando adicionamos
a tag de fechamento, nosso navegador entende
quais textos em negrito exatamente. E é praticamente
assim que funciona em geral. Você só tem uma tag que
faz alguma coisa e, em seguida ,
insere o texto entre ele que deseja que a
tag funcione. Para dizer, por exemplo, eu
queria criar uma lista. Acabei de procurar listas HTML
na Internet. Em seguida, vamos escolher os primeiros resultados da
pesquisa. Por exemplo. Podemos copiar esse texto e
colá-lo em nosso arquivo. Agora temos uma lista
em nosso arquivo HTML. Podemos editar as próprias necessidades do TO. Por exemplo, podemos
mudar o café para a Apple e
personalizá-lo e tomá-lo como um modelo, depois ajustado para ou precisa. Agora isso funciona porque nosso
arquivo tem uma extensão HTML, mas em um cenário do mundo real, precisamos adicionar tags na parte superior
do nosso código para especificar que este é
realmente um arquivo HTML. Portanto, a primeira etapa que precisamos
adicionar é a tag DOCTYPE. Então, vamos entrar em uma nova linha e
abrir espaço para o ataque. Cachorro. Claro que isso não
requer tags de fechamento. Não é realmente uma tag, é mais como inflamação para nosso navegador que este
é realmente um código HTML. Agora, depois que a
tag DOCTYPE vem a tag HTML. Esta é uma tag que
diz ao navegador que qualquer coisa dentro
dele é um código HTML. E agora dentro da
tag HTML vêm as duas tags principais. Essa é a cabeça e o corpo. Então é aqui que a cabeça começa e é isso que a cabeça termina. Da mesma forma, é
aqui que o corpo começa. E é aqui que o corpo e a tag corporal são, de fato,
o corpo da nossa página. Ele contém a maioria dos
conteúdos que vemos na página da Web. Então, para tornar nosso código
mais estruturado, vamos mover nosso código
para a tag body. Então, para torná-lo mais estruturado, vou destacar
tudo isso e pressionar Tab. Ok, então agora vamos dar uma
olhada nas principais tags que
usamos por padrão em qualquer
página da Web que criamos. O primeiro é o
metatag, a seção da cabeça. Para exibir uma
página HTML corretamente, um navegador da Web deve saber
qual conjunto de caracteres usar. Este é o
conjunto de caracteres
padrão que é usado UTF-8. O próximo metatag que queremos dar uma olhada é a tag viewport. Isso essencialmente torna
nossa página da Web mais responsiva definindo a
largura para a largura do dispositivo. Ele permite que muitos
baseados na Web mudem seu tamanho,
mantendo a legibilidade. Por exemplo, um telefone geralmente tem uma tela
menor do que um laptop. Essas metatags fazem com que
o telefone
também possa visualizar esta página da Web
sem problemas. Agora, depois dessas
tags de metal, vem a tag do título. A tag de título também. Eu intitulei que dá um título à nossa página
da web. Então deixe-me mostrar o que
estou falando. Se eu copiar esse código
e abri-lo com o Bloco de Notas e colar meu código
aqui e, em seguida, abra-o. Como você pode ver, o título
aqui é o nome do arquivo. Queremos mudar esse título. Para fazer isso,
usaremos a tag de título. Então, vamos voltar ao nosso código. Abra com o Bloco de Notas. Então, vamos criar um novo
título para nossa página da Web. Agora, depois de terminarmos
nosso título, nós o fechamos. Agora vamos executá-lo e
ver como ele se parece. Como você pode ver, ele
mostra o título aqui. Então, vamos voltar
ao nosso editor de texto. Vou colar
o título aqui, e é sobre isso
para a tag head. Vamos dar uma olhada na seção
do corpo. Aqui podemos colocar todo o
conteúdo do nosso salário. Então, primeiro, vamos dar
uma olhada na tag H1. Então, vamos digitar. Este
é um título grande, o maior a ser mais específico, temos seis níveis de cabeçalho, variando de H1 a H6. H1 é o nível de cabeçalho mais alto e o maior em
termos de tamanho de fonte. São seis são os mais baixos e os menores em
termos de tamanho de fonte, é muito improvável que você
use todos eles, mas vamos dar uma olhada
rápida neles. Agora, uma das
tags mais comuns que você usará e o corpo é a tag p
ou tag de parágrafo, como o nome sugere, é uma tag na qual você
pode escrever seus parágrafos. E então vamos dar uma olhada rápida. É assim que parece. No meio aqui,
baseamos nosso gráfico de produtos. Agora vamos preencher nossa tag p
com algum parágrafo aleatório. Para isso, vou pesquisar no Google algum documento aleatório da Wikipédia. Então eu vou colar meu parágrafo
aqui. Ou você sabe o quê? Na verdade, vou
movê-lo para baixo da lista. Podemos adicionar novas linhas ou
espaços no código-fonte, mas o navegador o
ignora porque cada palavra recebe apenas um espaço. E as linhas não quebram, a menos que você especifique
explicitamente
isso usando a tag PR. Ok, então vamos remover toda essa bagunça porque
deixe-me recuperar isso. Por exemplo, vamos
adicionar uma nova linha aqui. Talvez você queira outra linha. E se você notar que esses B são elementos não exigem
uma tag de fechamento. Isso é chamado de elemento vazio, evite elemento é um elemento. Cujo modelo de conteúdo
nunca permite que ele tenha conteúdo sob
nenhuma circunstância. Se quisermos forçar
nossos textos a serem representados da maneira como os
escrevemos no código-fonte. Podemos usar a tag p
em vez da tag p. Por exemplo. Vamos ver o que parece. Claro que parece uma bagunça. Talvez isso possa
ser útil para mostrar o texto do
código onde as
linhas e espaços são importantes. Então, como você pode ver, isso
parece uma bagunça, mas isso é um código de
exibição mais apropriado. Acho que este é um
de seus casos de uso. Agora que sabemos
como estruturar nossos textos HTML usando
quebra de linha e parágrafos. Vamos dar uma olhada em como podemos
estilizar nossos textos usando HTML. Tenha em mente que alguns deles não
estão sendo usados tanto hoje em dia devido ao CSS ser
certamente estilo Delta, o documento HTML para nós. Mas ainda podemos dar uma
olhada neles, no entanto, a primeira que
já vimos é a tag ousada, por exemplo, aqui. Há também um itálico. Há também a etiqueta da UE
ou o tak subjacente. Há também a
tag enfatizar e a tag forte. Eles são idênticos ao
itálico e à lâmpada. Ok, então vamos
remover essa pilha. Podemos separar
seções de nossa página da Web usando a
regra horizontal ou a tag HR, por exemplo, vamos separar
essas duas seções. Podemos criar links em nosso documento HTML usando
a âncora para a tag a. Ok, então vamos criar um hiperlink no
final do nosso parágrafo. Dentro do H ref ou da referência de
hipertexto, colocaremos o link para o
qual queremos levar o usuário. Vou usar o link da
Wikipédia aqui. E agora, entre esses dois, escreverei o
texto que quisermos. Estes são os textos em que o
usuário pode clicar. Agora vamos clicar em Executar. Agora, não vou clicar nisso porque isso
vai abri-lo
na mesma página e
isso vai
arruinar todo o nosso código aqui. Agora, se eu clicar
nisso, ele abrirá na mesma página. Oh, ok. Achei que ia
abrir. Certo. Isso não é ruim. Mas, de qualquer forma, queremos
abri-lo em uma nova guia quando
clicamos nele, é
isso que o
atributo alvo entra em jogo. Então, é assim que usamos
o atributo target para abrir nosso link em uma nova guia. Então, após o link da palavra, o alvo é igual a sublinhado, em branco. Agora vamos abrir nosso
código e clicar nele. Como você pode ver, ele abre em uma nova guia. Agora
isso é muito melhor. Agora, vamos aprender
como podemos adicionar uma imagem ao nosso documento HTML. Então, simplesmente é
assim que se parece. Você pode usar isso supondo que a imagem esteja salva
na mesma pasta, seu arquivo HTML seja salvo. Caso contrário, você pode usar um link, mas não é muito recomendável usar um link para uma
imagem porque pode não parecer tão boa quanto uma imagem já
baixada no seu PC. Então, se batermos na Internet para um pacote de cartas aleatório, por exemplo. E vamos escolher
isso, por exemplo. Vamos pegar esse URL
e colá-lo aqui. Vamos executar nosso código. Opcionalmente, podemos
adicionar uma tag alt. Isso funcionará como uma descrição para o visualizador que a
imagem não carrega. Por algum motivo, você pode
escrever uma pequena descrição. Certo? Portanto,
é claro que não vai aparecer porque a imagem está
carregada perfeitamente. Então, vamos cortar esse link, por exemplo, e
ver se ele funciona. Como você pode ver,
porque não parecia. Vamos adicionar uma nova linha aqui. Certo? Então, como
corrompemos o link, ele usa a tag alt. Então, vamos trazer de volta
o link completo. Também podemos controlar
a largura e a altura da
imagem, se quisermos. Caso contrário, ele usará
o tamanho padrão. Por exemplo, aqui
podemos adicionar a largura. Vamos dar a ele um valor
de 500, por exemplo. Também podemos adicionar imagem de armazenamento de
água usando o atributo border. Vamos adicionar borda igual a cinco. Por exemplo. Então, é assim que podemos adicionar
uma imagem usando um link. E se quisermos adicionar
uma imagem do nosso PC? Bem, primeiro não podemos usar um editor de texto
online para isso. E temos que ter uma imagem
na mesma pasta do nosso arquivo HTML. Então eu tenho uma imagem aqui
que diz corp dot PNG. Vou copiar colar
em toda a pasta HTML. Certo? Então, agora vamos copiar colar
este arquivo HTML de código. Abra com o Bloco de Notas. E então, para a fonte MH, em vez desse link, vou usar o carro. Esta é uma imagem que
criei como exemplo. Então agora vamos abri-lo e
ver como ele se parece. Como você pode ver as imagens lá. E essa é uma
das vantagens de
usar um editor de texto
desinstalado na área de trabalho. Ele permite que você
carregue as imagens do seu PC ao lado de
muitas outras coisas. Ok, então a próxima coisa que queremos
dar uma olhada é menor, na maior parte,
há dois tipos de listas, listas não ordenadas, listas ordenadas. Há um terceiro tipo
chamado lista de descrição. Vamos dar uma
olhada nisso em um segundo. Mas, por enquanto, é assim que as listas
não ordenadas se parecem. É assim que
as listas ordenadas se parecem. Observe que eles são quase idênticos exceto pela tag
que os contém. Listas não ordenadas têm uma tag UL. O U significa não ordenado, e o L significa lista
menos ordenada. Tenha uma etiqueta OL. O O significa encomendado. O L significa lista. Então, vamos dar uma olhada
na lista de descrição. O título da nossa descrição
vai para a guia d t, que pode significar o título da
descrição. E abaixo disso
com a tag DD, escreveríamos a
descrição do item. Poderíamos realmente
tornar esses títulos
ousados para
torná-los mais atraentes. Mas realmente isso não vai
fazer com que pareça atraente o suficiente. Para tornar nosso
site lindo. Precisamos de CSS para isso, mas esse é um tópico
para outro vídeo. Além disso, poderíamos
criar listas aninhadas,
ou seja, uma lista dentro de uma lista. Vamos dar uma olhada. Portanto, esta é nossa lista regular e
adicionaremos outro lado
menos do que o lado dela. Oh, eu esqueci de fechar a lista. Agora vou
remover o status porque eles
ocupam muito espaço. Agora isso significa que
o teclado são os elementos de equilíbrio e os
três elementos abaixo dele, ou os elementos filhos, porque estamos mantendo
nossa estrutura de código, podemos dizer facilmente
apenas olhando para o código de que este é o elemento pai e
este é o elemento filho. Mas se alguém quiser ignorar esses espaçamentos, o que você poderia, a
propósito, o navegador
leria seu código muito bem. No entanto, se você
ler seu código mais tarde ou alguém
quiser ler seu código, ele terá
dificuldade em fazê-lo. Então, o código de alguém era
ficar assim. Vai parecer exatamente
o mesmo como este, mas é muito difícil de ler. Ele funcionaria muito
bem como você pode ver. No entanto, não é muito legível e é considerado
uma má prática. Agora, finalmente, vamos
dar uma olhada nas tabelas. Podemos usar tabelas para organizar
dados em linhas e colunas. As tabelas usam a tag de tabela. Dentro da tag da tabela,
escreveremos tudo
o que a tabela inclui
de barras para coluna. Então, vamos criar uma função para isso. Usaremos a tag TR, que significa fita de linha. Dentro das linhas da tabela, criaremos as tags TH, o
que significa tags de cabeçalho da tabela. Agora vamos executar nosso código e
ver como eles se parecem. Sabe o quê? Vou levar isso no topo
da minha página da Web. Agora vamos fazer
outra linha de tabela. Para fazer isso, usaremos t. Mas em vez disso,
usaremos o TD desta vez porque isso é
apenas dados regulares. Portanto, o TD significa dados da
tabela e o th
significa cabeçalho da tabela. Agora vamos alterar os valores
para seus preços. Por exemplo. Ele está exibindo
informações como deveria, mas realmente parece muito básico e não tão
visualmente agradável. Podemos estilizar nossa tabela usando os atributos de tabela incorporados. Então, cada um que faremos,
vamos misturar uma mesa. Uma tabela é uma linha que separa
as linhas e as colunas. Então, vamos adicionar isso usando
os atributos de borda. Poderíamos aumentar esse número para cinco ou dez, por exemplo. Mas o que isso fará é
aumentar apenas a largura
da borda externa. Outra coisa que
poderíamos fazer isso exibir nossa tabela e um
assunto mais formal é o uso de preenchimento de células e atributo de
espaçamento celular. Também poderíamos tentar o atributo de espaçamento
celular. Talvez dez seja um pouco demais. Vamos tentar cinco. Mesmo isso é demais. Talvez dois sejam os melhores. Outra coisa que poderíamos
fazer é garantir que o número de linhas e
colunas esteja correspondente. Então, se excluíssemos
qualquer uma das células, pareceria confuso. Então, se excluirmos essa célula, por exemplo, mais uma coisa você poderia fazer é
fazer-se abranger duas colunas. Então, por exemplo, para o mouse, podemos fazê-lo abranger dois. Agora parece confuso porque está pegando as colunas
da tela. Assim, poderíamos nos livrar
da tela ou adicionar mais uma
célula na linha abaixo deles. Então, aqui, vamos adicionar uma célula e
dar US$7, por exemplo. Então agora digamos que o
mouse possa agora o preço de US $5 ou US $7, enquanto a tela
tem apenas um preço, que é de US $100, mas
não diz preço. Então, talvez o espectador não
entenda o que isso significa contornar e criar
uma célula que diz preço. Mas agora, porque as linhas e colunas não estão combinando,
parece confuso. Criaremos uma
célula fantasma na linha acima dela. Então criamos uma célula
e a deixamos vazia. Podemos expandir nossa tabela simplesmente copiando,
visitando esses elementos. Agora vamos dar-lhes preços
diferentes. Por exemplo, você pode
dizer que parece bom, mas os preços do teclado
são deslocados para a esquerda. Queremos que eles sejam centrados. Para isso, podemos usar
o atributo style. Então, esta é a célula em que os preços e o estilo do teclado. Agora, vamos copiar colar isso todas as células que estão presentes. Os valores do teclado, os preços do
teclado, sinto muito. Certo, é mais parecido com isso. Agora parece muito melhor, mas está repetindo o preço da
palavra várias vezes. Não é uma maneira de abranger o
preço em três linhas? Poderíamos fazer isso simplesmente
usando o atributo rowspan. Vamos dividir em três linhas. Então este é o preço de venda. Você quer um período de linha três. Agora, já que estamos todos gastando 23, vamos nos livrar
desses elementos de preço. Parece um pouco mais
minimalista agora. Agora podemos copiar esse código e
inseri-lo em nosso arquivo HTML. Vamos executá-lo e
ver como ele
se parece . Temos mais uma coisa. Vamos mudar a imagem para
ter desenhos animados PNG. Como não é uma rainha chamada
unimodal, é um cartão vermelho. Certo. Então é sobre isso. Você criou sua
primeira página da Web. Espero que tenha sido um
relógio que valha a pena e espero que tenha
dado uma compreensão geral dos fundamentos do HTML. Muito obrigado por assistir.
Naser Jamal, Computer Engineer
