Globais
Que funcionam em todas as Tags.
HTML
Este texto-base aborda os seguintes temas. Clique para navegar.
HTML
Este texto-base aborda os seguintes temas. Clique para navegar.
É possível desenvolver um site inteiro apenas com o Bloco de Notas?
A resposta para essa pergunta é SIM! Porém existem ferramentas mais eficientes que podem ser utilizadas pelos desenvolvedores para auxiliá-los em seu trabalho.
No Blog Umbler, você encontra 9 tipos de ferramentas essenciais para todo desenvolvedor web.
Confira neste site!
Como você pode perceber, existem várias opções de ferramentas para desenvolvimento Web e, além desses, existe também o NotePad++, que é bem simples e oferece alguns recursos. Veja como ficaria o código da 1ª página Web que desenvolvemos, utilizando esse software:
Neste link você encontra um tutorial de download e instalação do programa Notepad++.
Repare que as tags foram colocadas na cor azul e que esse software possui um recurso de IntelliSense simples, porém de grande ajuda!
Você sabe o que é esse termo IntelliSense?
O termo “IntelliSense” é de uso geral para vários recursos: Listar Membros, Informações do Parâmetro, Informação Rápida e Completar Palavra. Esses recursos ajudam você a aprender mais sobre o código que está usando, a manter o acompanhamento dos parâmetros que está digitando e a adicionar chamadas a métodos e propriedades pressionando apenas algumas teclas.
Visual Studio Code
Neste curso, utilizaremos o Visual Studio Code, que, como você viu no Blog, é um software simplificado de editor de código com suporte para operações de desenvolvimento -, como: depuração, execução de tarefas e controle de versão -, ou seja, ele tem muito mais recursos a oferecer que o NotePad++.
O objetivo do Visual Studio Code é fornecer as ferramentas que um desenvolvedor precisa para um ciclo rápido de desenvolvimento e verificação de código.
Por que a escolha do Visual StudioCode?
Esse software também é gratuito e oferece muito mais recursos. Além disso, o seu IntelliSense é muito melhor, o que nos ajudará a economizar mais tempo.
Observação: Lembre-se de que você é livre para escolher qualquer ferramenta, até mesmo o Bloco de Notas, para o desenvolvimento de todos os conteúdos.
Agora vamos ver um exemplo do porquê utilizar o Visual Studio Code:
Abra o programa, clique em “File”, depois em “New File”, ou apenas pressione CTRL + N.
Será aberto um novo arquivo com um nome provisório “Untitled-1” (que, em tradução livre, significa “sem título”), conforme mostra a imagem abaixo.
Agora vamos salvar o arquivo e nomeá-lo como “testandoVSC”. Clique no menu “File”, em “Save”, escolha o “local” (1) onde será salvo o arquivo e digite o “nome de arquivo”(2), sem se esquecer de escolher o “tipo de arquivo”(3) que queira salvar: “HTML”, conforme mostra a imagem a seguir.
Pronto! Agora que está tudo configurado, digite html e repare que irão aparecer algumas opções. Esse é o IntelliSense! Ele já prevê que o arquivo html está vazio e, quando você começa a digitar, já aparecem possíveis complementos. Selecione com a seta do teclado a opção “html<: 5” e pressione a tecla Enter.
Automaticamente, o Visual Studio Code criará toda a estrutura básica, facilitando o trabalho de digitação, evitando erros e ganhando tempo no desenvolvimento. Veja:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Você já imaginou quantas tags tem a linguagem HTML?
A reposta é “muitas!”. Confira acessando este link.
São muitas tags e vamos aprender a utilizar diversas!
Para começar, é melhor entender as tags e os novos códigos que apareceram conforme utilizamos o IntelliSense do Visual Studio Code. Observe a codificação:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
Entenda a codificação deste exemplo:
Linha 3 <htmllang=”en”>
Repare que existe um novo código dentro da tag html. Trata-se de informações que passamos dentro da tag, ou seja, entre os símbolos “<>” para que essa tag se comporte da maneira esperada ou notifique algum tipo de informação para navegadores ou motores de busca (Google, Bing etc). Existem basicamente dois tipos de atributos:
Que funcionam em todas as Tags.
Que são direcionados para cada Tag, por meio de especificação.
Por definição, os atributos possuem um nome e um valor e o uso de atributos dependerá das necessidades da sua página.
O atributo HTML lang pode ser usado para declarar o idioma de uma página da Web ou parte de uma página da Web, servindo de referência para motores de busca e navegadores. Nesse exemplo, o atributo está definido no idioma inglês. Para alterá-lo para português do Brasil, coloque entre as aspas “pt-br”, como representado a seguir:
Neste link você pode encontrar várias opções de valores para o atributo lang.
Linha 5
O próximo código linha 5 <metacharset=”UTF-8”> trata-se de uma Tag com o atributo charset. Perceba que:
meta é uma Tag implementada no código de páginas web entre as tags head do site (<head> e </head>). Algumas têm como função passar instruções a programas externos. Por exemplo, passar aos sites de busca, como o Bing e o Google, as instruções sobre a página web desenvolvida. Então, podemos definir que são meta-dados, ou seja, dados sobre os dados da página.
O atributo colocado nessa tag meta é o charSet com o valor “UTF-8”, que serve para indicar o formato de codificação de caracteres utilizados no documento. Algumas codificações existentes como o ASCII, o UTF-8, o AN- SI e ISO-8859-1 são exemplos de charsets.
Para cada caractere que digitamos ou lemos em uma página ou um site, existe uma representação dele, em byte, na memória. Cada tipo de codificação charset representa o caractere em memória de uma forma diferente. O charset UTF-8 é o que usamos na web atual e faz parte de um padrão chamado Unicode. A ideia é que com ele possamos representar qualquer caractere, de qualquer idioma.
Linha 6
Na linha 6, encontramos outra tag meta, porém com atributos diferentes da primeira: <metaname=”viewport”content=”width=device-width, initial-scale=1.0”>
Trata-se de uma configuração de visualização da área visível de uma página da web. Essa área varia de acordo com o dispositivo, por exemplo: a visualização em um celular será menor do que em uma tela de computador. Antes dos tablets e dos telefones celulares, as páginas da web eram desenvolvidas apenas para telas de computador, ou seja, eles adotavam um design estático e tamanho fixo. Logo que foi possível navegar na Internet, usando tablets e telefones, as páginas web ficavam desproporcionais, gerando dificuldades para visualizar o seu conteúdo em telas pequenas.
O valor width=device-width, definido ao atributo content, define largura da página, de acordo com a tela do dispositivo que está exibindo a página. Com o uso da vírgula, é possível colocar dois ou mais valores em um atributo. O valor initial-scale=1.0 define o zoom inicial quando a página é carregada pela primeira vez pelo navegador. É possível observar, na imagem a seguir, a diferença de exibição com o uso da meta tag e sem o uso dela.
Linha 7
Por fim, na linha 7, encontra-se outra meta tag. Observe que, apesar de existirem padrões a cada evolução, os navegadores tratam os códigos de maneira diferente. Esse código é utilizado para forçar o Internet Explorer a renderizar a página web com a versão mais recente. A partir da versão IE11, não é mais necessário o uso dessa meta, mas, se o navegador for anterior a essa versão, é preciso fazer seu uso, conforme apresentado:
<meta http-equiv= ”X-UA- Compatible”content= ”ie=edge”>
Criação de páginas
Agora que você já conhece a estrutura HTML, vamos começar a criar páginas com várias tags diferentes.
Vamos lá?
Crie um arquivo HTML novo com o nome de “título”.
Tag <h>
A tag header (<h1>, <h2>, <h3>, <h4>, <h5> e <h6>) é utilizada para destacar títulos e subtítulos de uma página. H1 é a abreviação do inglês para Header 1, sendo ele o de maior importância. Puramente , o H1 possui um destaque maior, uma fonte maior e é geralmente o elemento de texto mais visível da página.
A tag H1 é um importante elemento que os motores de busca utilizam para determinar o principal assunto abordado, visto que o título de uma página, conceitualmente, define seu conteúdo.
Com o arquivo aberto, digite html: 5 e pressione a tecla “Enter” para que toda a estrutura básica seja criada pelo VSCode. Entre as tag <body> e </body>, insira as tags <h1> e </h1> e digite a seguinte frase: “HTML 5 – Vamos Programar”.
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title> Document </title>
</head>
<body>
<h1>HTML 5 – Vamos Programar!</h1>
</body>
</html>
Salve a codificação pressionando CTRL + S, localize a pasta onde tenha salvo o arquivo e execute-o. O resultado deve ser parecido com a imagem a seguir:
É notável que tudo o que fica entre as tags <h1> e </h1> é marcado como título e recebe uma configuração padrão: o aumento do tamanho da letra.
Faça uma alteração no código do mesmo arquivo, deixando-o dessa forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<h1>HTML 5 – Vamos Programar!</h1>
<h2>HTML 5 – Vamos Programar!</h2>
<h3>HTML 5 – Vamos Programar!</h3>
<h4>HTML 5 – Vamos Programar!</h4>
<h5>HTML 5 – Vamos Programar!</h5>
<h6>HTML 5 – Vamos Programar!</h6>
</body>
</html>
Salve (CTRL + S), volte ao navegador em que a página está sendo exibida e pressione a tecla F5. Você deve obter um resultado como o mostrado na imagem a seguir.
Perceba que mesmo sem utilizar a tag <br>, o texto pula de linha por causa das configurações padrões das tag’s header!.
Tag <p>
Crie um arquivo HTML novo, com o nome de “parágrafo”. Não esquecendo de criar a estrutura básica.
Sempre que for necessário ou quiser que um texto seja visto como parágrafo, devemos colocá-lo entre as tags <p> e </p> e o navegador irá se encarregar de dispor o parágrafo da melhor maneira possível.
Para demostrar isso, vamos escrever as seguintes frases, uma em cada tag <p>.
1. Basicamente você assiste à TV para desligar seu cérebro e usa o computador quando você o quer de volta!
2. Já dizia o velho sábio: O computador veio para resolver os problemas que nós ainda não tínhamos.
3. Quando a esmola é demais, o Santo desconfia que tem vírus anexado.
O código deve ficar como o demonstrado a seguir:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content= "width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<p> Basicamente você assiste à TV para desligar seu cérebro e usa o computador quando você o quer de volta!
<p> Já dizia o velho sábio: O computador veio para resolver os problemas que nós ainda não tínhamos.
<p> Quando a esmola é demais, o Santo desconfia que tem vírus anexado.
</body>
</html>
Salve a codificação pressionando CTRL + S, localize a pasta onde foi salvo o arquivo e execute-o.
O resultado dever ser parecido com a imagem a seguir:
O princípio da marcação é sempre o mesmo, tudo que estiver entre as tags será marcado com as configurações da respectiva tag.
Tag <img>
A tag <img> é uma abreviação da palavra image (imagem). Com ela, é possível colocar imagens no site, viabilizando, dessa forma, melhorar o design e a aparência de uma página da web.
Crie um arquivo HTML novo e salve-o com o nome de “imagem”.
Não se esqueça de criar a estrutura básica.
Primeiro precisamos fazer o download de uma imagem e colocá-la na mesma pasta do arquivo.
Para descobrir qual o tipo da imagem que você salvou, basta clicar com o botão direito do mouse em cima da imagem e escolher a opção “propriedades”. Logo no início da caixa de diálogo, é informado qual é o tipo da imagem. Nesse caso, é do tipo JPG.
Com o arquivo HTML e a imagem salvos na mesma pasta, é preciso, agora, programar a tag <img>. Para isso, utilizaremos um atributo chamado scr, responsável por informar ao navegador onde se encontra a imagem para que seja possível exibi-la de forma adequada.
O código deve ser: <img src = ”html 5.jpg”>
Lembrando que a imagem deve estar na mesma pasta do arquivo html. A imagem escolhida tem o nome html 5 e é do tipo jpg.
O código deverá ficar conforme demonstrado a seguir:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<img src = ”html 5.jpg”>
</body>
</html>
O resultado será uma página com uma imagem, como pode ser visualizado a seguir.
O atributo src é referente ao local da imagem. Esse local pode ser de uma página na internet e, se você possuir o link da imagem, é possível exibi-la sem a necessidade de fazer o download do arquivo. Vamos a um exemplo: o link a seguir se refere a uma imagem, basta copiar e colar esse link dentro do atributo src=””.
O código deverá ficar conforme demonstrado a seguir:
<img src=”https://upload.wikimedia.org/wikipedia/commons/thumb/1/10/CSS3_and_HTML5_logos_and_wordmarks.svg/1280px-CSS3_and_HTML5_logos_and_wordmarks.svg.png”>
O resultado será uma página com uma imagem que foi obtida por meio do link inserido no atributo src, conforme representado na imagem a seguir:
A tag img ainda possui um outro atributo: o alt.
Quando você o utiliza e a imagem, por qualquer motivo, não é exibida, o conteúdo desse atributo é colocado no lugar da imagem.
Observe este exemplo:
Insira o atributo alt na tag img com o valor “Html 5 e Css 3” e deixe o atributo src vazio.
<img src="" alt = "Html 5 e CSS 3">
O resultado será como demonstrado na imagem a seguir:
Existem também outros atributos, tais como width e heitgh (largura e altura, respectivamente), porém, é melhor utilizá-los a partir do CSS, que é o assunto da próxima Unidade!
A partir do HTML 5, foi incorporada uma nova tag que auxilia muito o desenvolvimento de páginas para definir imagens, gráficos etc., de forma mais adequada ao HTML. Trata-se de tag <figure>, com ela é possível definir uma marcação para a legenda da imagem. Apesar de parecer simples, é de extrema importância para os motores de busca, que as utilizam para obter melhores resultados para seus usuários.
Observe o código do arquivo imagem.html com as tags <figure> e <figcaption>:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<figure>
<img src= "html5.jpg" alt= "Html e e CSS 3">
<figcaption> Logo HTML 5 e CSS</figcaption>
</figure>
</body>
</html>
No navegador, teríamos o resultado conforme a imagem a seguir:
Visualizando o resultado na página, a diferença é mínima: aparece, no canto esquerdo da tela, uma legenda sem nenhuma formatação com o conteúdo escrito na tag <figcaption>: Logo HTML 5 e CSS 3. Apesar de simples, essa legenda é muito importante para o próprio navegador e motores de busca como o Google.
Tag <a>
Com certeza, você já entrou em algum site e clicou em algum texto ou imagem que fez com que o navegador abrisse uma nova página. O local em que você clicou é um link, que pode estar em forma de texto, geralmente sublinhado, ou de uma imagem.
O link é facilmente notado quando posicionamos o mouse sobre ele e o cursor se transforma em uma mão com o indicador esticado, sinalizando que aquilo é um link.
Você está usando um link quando:
Procura algo no Google e clica no resultado desejado.
Abre seu e-mail e clica em “Caixa deEntrada”.
Clica em ‘curtir’ no Facebook.
Enfim, o uso e importância dos links é notório e você já deve ter certeza disso.
A tag <a> é responsável por fornecer esse recurso para páginas web.
Crie um novo arquivo HTML e salve com o nome de “links”.
Não se esqueça de criar a estrutura básica.
Vamos começar criando um link para o Google em nosso site. Para isso, será necessária a utilização do atributo href.
Repare em dois detalhes:
O código completo da página ficaria desta forma:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="https://www.google.com">Link para google </a>
</body>
</html>
Veja o resultado no navegador e repare que o texto fica no formato de link (sublinhado e na cor azul), mudando de cor quando o link já foi visitado.
Você já deve ter notado que, algumas vezes, quando clica em um link, uma nova aba aparece e, outras vezes, a página é carregada na própria aba. Isso acontece porque a tag <a> tem um atributo nomeado target, que faz essas escolhas dependendo da codificação.
Observe: os principais valores são _blank e _self e suas funções são:
Observação: a opção _self é adotada como padrão quando a tag <a> tiver o atributo target definido.
Confira os dois exemplos:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<a href="https://www.google.com"target="_blank">Link para google </a>
<a href="https://www.google.com"target="_self">Link para google </a>
</body>
</html>
Tag <video>
A tag <video> surgiu no HTML 5. Anteriormente, para usar vídeos em páginas web, era necessário utilizar um plug-in, com o flash, para conseguir reproduzi-los corretamente. A tag <video> em HTML 5 especifica uma maneira padrão de incorporar um vídeo em uma página da web.
A imagem a seguir mostra os principais navegadores e quais versões suportam totalmente a utilização da tag <video>. Veja:
Novamente, vamos criar um arquivo HTML para inserir um vídeo em uma página.
Salve com o nome “video” e crie a estrutura básica do HTML.
Observação: da mesma maneira que você insere imagens numa página, você deve escolher um vídeo e salvá-lo na mesma pasta do arquivo html que será desenvolvido.
O vídeo desse exemplo está nomeado como “geeadIntro”, do tipo mp4. Utilizaremos a tag <video>, com o atributo controls, e a tag <source>, com os atributos src e type. O código do arquivo video.html ficará assim:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<video controls>
<source src="geeadIntro.mp4"type="vídeo/mp4">
</video>
</body>
</html>
Note que no atributo controls não é necessária a definição de nenhum valor. Ele tem a função de colocar controles como play, pause e modo tela cheia para o usuário da página, conforme mostra a imagem a seguir:
Os atributos da tag <source>, src e type, se referem, respectivamente, à localização, nome e tipo do arquivo. No caso do exemplo, o vídeo está nomeado como “geeadIntro”, está localizado na mesma pasta do arquivo html e o tipo do vídeo é mp4.
Outros atributos da tag <video>, são:
Há outra tag chamada <áudio> que tem a mesma formatação da tag <video>,mas que, ao invés de reproduzir o vídeo, reproduz áudio.
Comentário
Como o próprio nome define, são notas, informações ou observações que podem ser incluídas no código fonte. Esses comentários não são renderizados pela página e auxiliam o programador a organizar melhor seus códigos. Você pode adicionar comentários ao seu arquivo HTML usando a seguinte sintaxe:
<!-- Seu comentário --|>
Perceba que há um ponto de exclamação “!” no início da tag, mas não no final da tag. Com comentários, você pode inserir notificações e lembretes em seu HTML. Veja:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible"content="ie=edge">
<title>Document</title>
</head>
<body>
<!-- Vídeo Introdução Geead -->
<video controls>
<source src="geeadIntro.mp4"type="video/mp4">
</video>
<!-- Colocar mais vídeos sobre o GEEAD.-->
</body>
</html>
Outra função do comentário é fazer a verificação do código HTML, deixando as tags como comentário quando suspeitar que existe algum erro, já que o comentário não é utilizado pelo navegador.
Ao comentar uma tag, você a desativa, logo, poderá constatar se ela está ocasionando algum possível erro em sua página. Observe:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
| No título (aba) da página: |
| Qual meu filme favorito? |
| No corpo da página: |
| Como título, o nome do Filme. |
| Abaixo, uma foto do filme. |
| Algumas informações como subtítulo: |
| Ano/Produção, |
| Dirigido por, |
| Duração, |
| Classificação (se houver), |
| Gênero, |
| País de Origem. |
| No final a sinopse do filme. |
Dicas
| 1. Colocar título da página entre as tag <title> e </title>; | ||
| 2. Usar a tag <h1> para título do filme; | ||
| 3. Colocar a imagem do filme na mesma pasta do arquivo HTML | ||
| 4. Ano Produção, Dirigido por, Duração, Classificação, Gênero, País de Origem – utilizar tag <h2> | 5. Utilizar a tag <p>, para a descrição da sinope e tag <h2> para o título “sinopse”; | |
| 6. Link interessante para encontrar informações do seu filme favorito: https://filmow.com/. | ||
| 7. Opcional: Se você quiser testar seus conhecimentos, tente colocar o trailer do filme também na página. |
<meta name="viewport"content="width.device-width, initial-scale=1.0">
<meta http-equiv="x-ua-compatible"content="ie.edge">
<title>document</title>
</head>
<body>
<!-- não será exibido esse vídeo
<video controls>
<source src="geeadlntro.mp4" type="video/mp4">
</video>
-->
</body>
</hteil>
Repare que o Visual Studio Code deixa o comentário na cor verde para facilitar o reconhecimento dos códigos comentados. Você perceberá, ao longo de sua trajetória, como programador Web, que comentar códigos poderá auxiliá-lo bastante, principalmente em projetos longos.