Primeiro HTML5 | Tutorial de HTML5 | #01 | #uninerds | Universo dos Nerds

Channel:

Universe of Nerds

Subscribers:

2,410

Published on September 7, 2017 11:19:53 PM ● Video Link: https://www.youtube.com/watch?v=RjuwP06DAc8

Game:

Counter-Strike: Source (2004)

Category:

Tutorial

Duration: 16:36

174 views

13

Código fonte da vídeo aula:
http://www.uninerds.net/?locale=pt_BR#!html-css-e-javascript/tutorial-de-html5

validator.w3.org da W3C:
https://validator.w3.org/

html5.validator.nu da WHATWG:
https://html5.validator.nu/

Redes Sociais
Facebook: https://www.facebook.com/uninerds
Twitter: https://www.twitter.com/uninerds
YouTube: https://www.youtube.com/user/uninerds?sub_confirmation=1
LinkedIn: https://www.linkedin.com/company/uninerds
Instagram: https://www.instagram.com/uninerds

Gostou do vídeo? Veja 10 opções de como você pode apoiar o Universo dos Nerds:
https://youtu.be/KYAljlRtlb4

Faça parte de um grupo focado em Tecnologia: https://www.facebook.com/groups/DevAt

Hashtags: #uninerds #html #html5

Afiliado: http://www.cursos24horas.com.br/parceiro.asp?cod=promocao131331

Contato: uninerds@uninerds.net

No HTML todo o comando é colocado entre e e os comandos que possuem conteúdo dentro dele deve ter um comando de fechamento que é o mesmo entre / e .
PS: Em HTML os comandos são chamados de 'tags'.

A tag !DOCTYPE html serve para definir qual é a versão do HTML em que a página foi desenvolvida, neste caso é a versão 5.
A tag html informa que tudo o que estiver entre sua abertura e fechamento deve ser interpretado pelo navegador como uma página HTML.
A tag head que fica dentro da html serve para definir as configurações da página.
A tag title que fica dentro da head serve para definir o título da página.
A tag body que fica dentro da html define o conteúdo da página.

Todo código HTML deve ser salvo com a extensão .htm ou .html, por exemplo teste.htm ou teste.html, então salve o código e abra em um navegador.

Ao abrir a página no navegador irá perceber que o 'á' do 'Olá' não apareceu corretamente, isso acontece porque o conjunto de caracteres padrão para a Web é 'ASCII' que é americana, mas ela não possui acentuação, então para corrigir o problema é necessário uma configuração que ficará na tag head, para isso coloque dentro dela o seguinte comando:

Isso irá definir o conjunto de caracteres para 'UTF-8' que no caso possui acentuação, a tag meta é uma tag vazia, sendo assim ela não tem conteúdo, por isso que ela tem / antes do , isso acontece com todas as tags vazias.
PS: Embora não seja obrigatório o uso da / em tags vazias aconselhamos a utilizar porque você nunca sabe como seu usuário irá acessar sua página e se ele acessar de um leitor XML não irá funcionar se não tiver colocado / no final das tags vazias, e também pode ser que futuramente você tenha que desenvolver uma funcionalidade em que sua página tenha que passar por um leitor XML, e se não tiver colocado / em todas as tags vazias também não irá funcionar.

Salve o arquivo e no navegador atualize a página e então o 'á' aparecerá corretamente.

O HTML não faz diferença entre maiúscula e minúscula, ou seja, para ele html e HTML é a mesma coisa, mas o recomendado é colocar as tags em minúsculo.

Para saber se o seu código HTML está correto existem duas ferramentas para isso que são:

- validator.w3.org da W3C.
- html5.validator.nu da WHATWG.

Nesses dois tem as seguintes opções para realizar validação:

- Address - colocar a URL.
- File Upload - fazer upload do arquivo.
- Text Input - colocar em uma caixa de texto o código.

Dicas:

- Ao desenvolver em HTML utilize tabulações para deixar o código organizado para facilitar manutenções futuras.
- Embora o HTML não faça diferença entre maiúsculas e minúsculas utilize sempre minúsculas para as tags.
- Não utilize caracteres especiais, espaços em branco e acentuação no nome dos arquivos HTML porque isso pode trazer problemas ao colocar seu site em um servidor de hospedagem.
- Sempre utilize / nas tags vazias, assim conseguirá evitar alterações futuras caso seja necessário.
- Sempre que possível utilize as ferramentas de validação para garantir que seu HTML esta seguindo os padrões de desenvolvimento, com isso terá menos problemas com navegadores diferentes.

Other Statistics