O Browser ao renderizar sua página HTML ele tenta passar por cima de todos os erros possíveis.
Portanto, ao esquecer de fechar uma tag HTML e erros menores o browser exibirá sua página normalmente.
No painel de depuração do browser (F12) você poderá ver esses erros.
Tente evitar de esquecer de fechar uma tag. A maioria não dá erro mas o código fica muito confuso porque a
gente espera o correto, sempre.
Normalmente a gente identa o código deslocando tudo o que esta dentro de uma tag para a direita
e ao fechar esta tag a gente coloca esse efeito na identação. Fica bem visível o código, como no exemplo
do modelo básico HTML logo abaixo.
Contudo há erros bem imbecis que o browser se perde totalmente. É o caso de num style, por exemplo, esquecer
de fechar aspas. Até o erro a página é exibida corretamente e logo após tudo que está escrito é como se
fosse jogado fora.
Toda página HTML é um documento escrito na 'linguagem' HTML. Na verdade, HTML é um padrão de montagem
de documentos e não uma linguagem mas vamos simplificar.
A primeira coisa é o padrão do documento. Os sistemas operacionais associam a extensão do nome do aquivo ao programa que deve ou pode tratá-lo. Sendo assim um documento .txt no windows quem abre é o bloco de notas, um arquivo .doc é o Word e um arquivo .xls é o Excel e assim por diante.
Portanto a primeira coisa de um arquivo HTML é colocar a extensão correta, ou .htm ou .html.
No windows estes tipos de arquivos estão associados para serem abertos pelo browser.
A segunda coisa é o formato do arquivo em si. Ele não é somente puro texto, tem as tags que carregam
informações não texto que o browser deve tratar de maneira diferenciada.
Portanto a segunda coisa é caracterizar o documento como uma página HTML e para isto utilizamos
a tag doctype como abaixo :
<!DOCTYPE html>
Até aqui nem começamos nossa página HTML, só definições. Todo documento HTML começa com <html> e termina como </html>.
Os próximos componentes do documento HTML foram criados com finalidades específicas. Temos os elementos
(ou tags) que queremos que o usuário veja mas podemos ter necessidade de informar algumas coisas
ao browser que não são para ser exibidas para o usuário.
Sendo assim, temos 2 partes : Uma chamada de <head> que conterá tudo que não deve ser exibido para o usuário e
outra chamada <body> que conterá todos elementos(ou tags) da página.
No <head> (topo) da página colocaremos tudo que não deve ser exibido ao usuário como códigos JavaScript, estilos, bibliotecas ( como bootstrap ), tags meta ( de instruções ao sites de busca ), etc.
No <body>(corpo) do documento colocamos tudo que desejamos que o usuário veja...imagens, textos, sons,
etc.
Note que se você colocar mesmo um simples texto ele será exibido como um componente do 'body-corpo' do
documento.
Resumindo o que foi falado até aqui e colocando as tags nos seus devidos locais ou sequencia temos :
Portanto de agora em diante para montar sua página HTML é só saber o que encaixar e onde encaixar e você já tem uma boa pista de onde é o lugar correto. Mas a gente tem muito que seguir em frente.
Explicarei neste documento como criar um documento HTML das mais diversificadas maneiras possíveis.
Nos exemplos explicarei utilizando um documento HTML mais simples possível e depois, nos assuntos do
site, veremos como agregar novos itens a esses documentos. No final da página explico as novas tags e
para que servem.
Este é um exemplo básico mas é o fundamento, nele você fará alterações incorporando o que deseja exibir ao usuário mas tudo será em volta deste modelo básico.
Procedimento para criação da página HTML com bloco de notas :
1-Vá com o mouse até o inicio do texto (logo após Início--->)
2-Clique no botão esquerdo do mouse e o segure pressionado
3-Arraste o mouse até o fim do texto (logo antes de <--Fim)
4-Clique com o botão direito do mouse e selecione 'copiar'
5-Abra o bloco de notas
6-Cole o que foi copiado (no documento clique como o botão direito do mouse e selecione 'colar')
7-Salve o arquivo (Arquivo, salvar)
8-Selecione a área de trabalho e salve como HTML1.html
9-Feche o bloco de notas
10-Abra o windows Explorer e localize o arquivo HTML1.html
11-Clique duas vezes com o botão esquerdo do mouse...o arquivo será aberto pelo browser.
Como foi e será explicado nas páginas do assunto html, a única coisa escrita nesta página que será exibida
ao usuário esta no <body> do documento e será 'Conteúdo da página'. O restante do conteúdo
da página será exibido no topo da janela do browser(title-Página Web Básica)
Se quiser saber para que serve cada elemento desse documento html veja :
05-Minimo-Basico.html
Se você optou por usar estes editores deverá saber como usar e como são basicamente iguais ao bloco de notas
é só seguir o procedimento do bloco de notas e salvar o arquivo gerado na área de trabalho.
Abra o documento e certifique-se que funciona corretamente.
Procedimento:
1-Abra o visual studio
2-Crie um novo projeto.
3-Na escolha do tipo do projeto selecione 'Solução em branco'
Nota : A solução aonde você ira colocar seu conjunto de páginas ligadas a um site, por
exemplo.
4-Digite um nome para a solução
5-Escolha uma pasta para salvar os documentos criados. Guarde bem esta pasta porque tudo que você criará
ficará dentro dela.
6-Clique no botão 'criar'
7-No painel 'Gerenciador de soluções' Selecione 'Adicionar Novo Projeto'
8-Selecione no tipo de projeto 'web'
9-Selecione 'Aplicativo web asp net (.net framework)'
10-Clique no botão próximo.
11-Escolha um nome para a aplicação - Seria o nome do site.
12-Escolha a pasta a armazenar os arquivos.
13-Clique no botão 'Criar'
14-Selecione 'vazio'
15-Clique no botão 'Criar'
16-Mesmo tendo pedido para usar um pacote vazio vVem um monte de baboseiras junto com o projeto.
Clique no item e depois com o botão direito do mouse escolha 'Remover'. Exclua tudo que puder.
17-Clique com o mouse no nome do projeto no 'Gerenciador de Soluções' e clique no botão direito do
mouse selecione 'Adicionar', 'Novo Item'.
18-Escolha 'Página HTML'. No rodapé da página digite o nome da página ( HTML1.html ).
19-Clique no botão 'Adicionar'.
20-Cole o conteúdo copiado do site na página.
21-Selecione o Menu 'Arquivo' e 'Salvar'
22-No 'Gerenciador de soluções' clique na página criada ( HTML1.html ) e pressione o botão direito
do mouse e selecione 'Exibir no Navegador'
23-Verifique se a página esta correta.
O Visual studio e Code parecem muito dificeis quando criamos um novo projeto mas é um projeto por site
e você pode gerenciar diferentes sites no mesmo projeto (como o frontend e o backend de um site).
Verá que é um meio que simplifica muito a nossa vida quando gerenciamos projetos.
Caso tenha dúvida sobre o que significa FrontEnd e Backend Veja
Siglas e Termos
O exemplo acima é bem simplificado e acho que um exemplo real viria bem a calhar.
Digamos que real é maneira de dizer porque não usariamos tabela para posicionar campos numa tela, mas
para simplificar o entendimento acredito que vale a pena a simplificação.
A intenção aqui não é que você conheça ou mesmo reconheça tudo mas que observe como ela foi feita.
O exemplo é uma página de Login em um site. O Login é a página de autenticação do usuário, ou seja,
se o usuário for autenticado ele pode prosseguir e trabalhar com as páginas do site e se não
for autenticado voltará a página de login. Veja o exemplo abaixo :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Página de Login</title>
</head>
<body style="font-family: arial;">
<div style="text-align:center;background-color:aqua;padding: 30px;">
<b>Bem vindo ao site</b>
</div>
<div style="text-align:center;background-color:lightblue;padding: 30px;">
Permissão de acesso ao Sistema
</div>
<p> </p>
<div style="text-align: right;">
Mensagens : <input type='text' id="lblmsgErro" text="" disabled=disabled />
</div>
<p> </p>
<table style="width: 100%">
<tr width="100%" style="text-align:center">
<td width="50%" style="text-align:right;">Usuário:</td>
<td width="50%" style="text-align:left"><input type='text' id="txtUsuario" /></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr style="text-align:center">
<td style="text-align:right;">Senha:</td>
<td style="text-align:left";><input type='text' id="txtSenha" /></td>
</tr>
<tr><td colspan="2"> </td></tr>
<tr style="text-align:center">
<td colspan="2" style="text-align:center" >
<input type='button' id="btnProsseguir" value="Prosseguir" />
</td>
</tr>
</table>
</body>
</html>
Repita o copiar e colar feito com a primeira página e exiba esta segunda página. Não é um grande começo
mas como começo vale a pena.
Explicando o conteúdo da página.
<table> e </table> indica que o conteúdo entre estas tags é de uma tabela, exatamente como no Excel.
Ela se compõe de linhas (rows em Inglês) indicadas pela tag <tr> e </tr>.
As colunas da tabela estão dentro das tags <td> e </td>.
O HTML se encarrega de dividir o espaço da linha de acordo com o tamanho do conteúdo da coluna e, se não der,
vai expandir a coluna para que ocupe 2 linhas, como o Excel faria se você tivesse setado a opção quebrar
coluna por default.
Ha muito tempo atras a tabela era utilizada para colunar elementos na mesma posição vertical. Hoje temos
novos recursos do browser como o grid mas você só vai conhecer ele quando estudar o assunto CSS, por isso
utilizei a tabela que é uma tag html comum.
A tabela neste documento tem apenas 2 colunas mas poderia ter quantas quiséssemos.
Quando queremos que uma coluna ocupe mais de uma coluna ( como mesclar colunas do word ) usamos o colspan e
o número de colunas que desejamos que a nossa coluna ocupe.
Os textos exibem mensagens ao usuário para informar o que desejamos que ele coloque no campo
a seguir...pode ser seu nome, endereço, telefone, senha, o que quisermos.
O input type=text é o campo que o usuário irá digitar o dado. Ele poderá digitar o que quiser porque
não fizemos nada além de declarar o campo.
Finalmente o input type=button que é o botão que enviaria as informações ao servidor mas neste exemplo, para
simplificar, foi retirado o mecanismo de envio mesmo porque não é isso que queremos no exemplo.
Os textos style="text-align:center" é para alinhar o texto no centro do campo. Veremos isso no assunto CSS.
Uma coisa imporante que acho bom frizar no segundo exemplo é que ao criar os inputs type=text nós não falamos nada para o browser e ele usou seu estilo default para a tag. Portanto o browser tem a maneira default de exibir todos os elementos HTML mesmo se a gente não der detalhes, tipo, preciso que caiba 1000 caracteres. Ele se vira. Contudo algumas vezes precisamos dar um jeitinho pra ficar do jeito que queremos.