O HTML ou HyperText Markup Language é uma linguagem de marcação extremamente utilizada, ainda mais com o crescimento do desenvolvimento de sistemas onlines, websites e aplicativos mobile. Além do HTML, estão presentes num sistema online ou website o JavaScript e o CSS, além do Ajax e JQuery que complementam e resultam em toda interatividade na página. Para entender melhor o conceito de uma página web e como cada uma dessas tecnologias se conversam fazendo uma comparação ao corpo humano. Dessa forma:

HTML -> Ossos e articulações. O HTML contém toda a estrutura da página que diz o que é o quê desde às mais antigas e primitivas como listas, links, tabelas, parágrafos, etc até os mais recentes como cabeçalho, menu, rodapé, seção e etc.

CSS -> Roupas e acessórios. O CSS é responsável pelo estilo da página, cores, tamanhos, transformações, efeitos e etc, tudo que personaliza uma estrutura é de função do CSS. Para conhecer mais sobre CSS, visite a categoria de CSS.

JavaScript -> Movimentos e dinâmica do corpo. O Javascript é responsável por interações na página sem conversar com o servidor, ele pode criar inúmeras dinâmicas de páginas, e pode ter funções completas sem precisar recarregar a página e, pelo contrário, ele perde toda alteração feita ao recarregar uma página. O desenvolvimento desta tecnologia, surgiu o Ajax, que tornou possível a comunicação com o lado servidor sem precisar recarregar uma página que se tornou muito útil, pois consultas podem ser feitas dinamicamente, tornando o carregamento da página mais rápido. Para saber mais de Javascript, clique aqui e para saber mais de Ajax, clique aqui.

Após este pequeno resumo, vamos focar apenas no HTML neste post. Ele funciona por meio de tags que o identificam e que formam sua estrutura. Toda página possui um cabeçalho () e um corpo () no qual o cabeçalho contem informações sobre links, CSS, Javascripts, Palavras-chaves, nome da página, Codificação e etc, enquanto que no corpo ficam todas as informações que o navegador irá mostrar ao usuário.

O nosso primeiro exemplo mostra uma página que dei o nome de “Iniciando com HTML – ex 1” e que simplesmente coloco um título e um parágrafo com um pequeno texto.

1
2
3
4
5
6
7
8
9
<html>
    <head>
        <title>Iniciando com HTML - ex 1</title>
    </head>
    <body>
        <h1>Hello World!!!</h1>
        <p>Esta é minha primeira página utilizando HTML, meu primeiro parágrafo simples.</p>
    </body>
</html>

Copie este código, cole num arquivo texto simples e o salve como ex1.html. Em seguida, abre-o em um navegador de sua escolha.

Algumas observações são importantes: nota-se que para toda tag que eu “abro”, uma tag de fechamento é necessário e esta tag possui “</>” enquanto que a abertura possui apenas “<>”. Além disso, não há nenhuma personalização nos textos escritos como fonte, cor e tamanho a não ser das características de tags que utilizei. Este é o exemplo mais simples no qual espero que tenha entendido a simplicidade do HTML. A seguir, escreverei as tags mais importantes e comuns numa página:

  1.  <p> -> Parágrafo de um texto
  2. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <html>
        <head>
            <title>Iniciando com HTML - Parágrafos</title>
        </head>
        <body>
            <h1>Trabalhando com parágrafos</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam magna dolor, vulputate sed elementum at, posuere ut dui. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla vitae cursus odio. Aliquam hendrerit malesuada lorem, non blandit magna sollicitudin et. Maecenas vestibulum diam nec tempus ultricies. Phasellus nec metus vestibulum, facilisis mauris eleifend, bibendum nunc. Cras aliquam, turpis ut luctus dictum, felis mi faucibus odio, ac placerat ante elit in nunc. Vestibulum et arcu scelerisque odio tincidunt imperdiet at non elit. Duis maximus condimentum pulvinar. Fusce interdum dictum arcu, quis tristique felis ullamcorper nec. Mauris lectus lectus, viverra quis vehicula non, consectetur sit amet tortor. Suspendisse ultricies quam augue, vel lobortis ligula congue a. Mauris quis placerat velit, non aliquet ligula. Nam at risus vitae augue venenatis eleifend.</p>
     
    <p>Sed tincidunt massa ac velit commodo, ut condimentum neque tempus. Integer rutrum diam vitae enim facilisis, vel molestie turpis bibendum. Cras viverra suscipit commodo. Vestibulum posuere consequat nisl pretium aliquet. Fusce convallis magna non magna consequat vulputate. Praesent scelerisque finibus ipsum quis dictum. Aliquam accumsan eros metus, eu aliquam sapien imperdiet in.</p>
        </body>
    </html>
  3. <h1>, <h2>, <h3>, <h4>, <h5>  e <h6>  -> Definem títulos de um texto e possuem diferentes tamanhos e semânticas, sendo <h1> o maior e o <h6> o menor, como mostrado abaixo.
  4. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    
    <html>
        <head>
            <title>Iniciando com HTML - Headers</title>
        </head>
        <body>
            <h1>Cabeçalho 1</h1>
            <h2>Cabeçalho 2</h2>
            <h3>Cabeçalho 3</h3>
            <h4>Cabeçalho 4</h4>
            <h5>Cabeçalho 5</h5>
            <h6>Cabeçalho 6</h6>
        </body>
    </html>
  5. <a> -> Utilizado para links. Acompanha atributos que definem o destino do link e a forma de abertura sendo o href e o target. São utilizados da seguinte maneira.
  6. 1
    2
    3
    4
    5
    6
    7
    8
    9
    
    <html>
        <head>
            <title>Iniciando com HTML - Links</title>
        </head>
        <body>
            <a href="http://www.google.com">Este é um link normal direcionando para o google</a><Br />
            <a href="http://www.google.com" target="_blank">Este é um link normal direcionando para o google abrindo em outra aba</a>
         </body>
    </html>
  7.  <table>, <tr> e <td> -> Estas tags se referem à tabelas, sendo table a tabela em si, tr cada linha e td cada coluna. Veja um exemplo de como são construídas as tabelas.
  8. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    
    <html>
        <head>
            <title>Iniciando com HTML - Tables</title>
        </head>
        <body>
            <table border="1">
                <tr>
                   <td> Esta é a primeira coluna da primeira linha</td>
                   <td> Esta é a segunda coluna da primeira linha</td>
                </tr>
                <tr>
                   <td> Esta é a primeira coluna da segunda linha</td>
                   <td> Esta é a segunda coluna da segunda linha</td>
                </tr>
            </table>
         </body>
    </html>
  9.  <ul> e <li> -> Estas tags se referem à listas, sendo ul a lista em si e li cada item da lista. Veja um exemplo de como são construídas as listas.
  10. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    
    <html>
        <head>
            <title>Iniciando com HTML - Listas</title>
        </head>
        <body>
            <ul>
                <li> Esta é o primeira item da lista</li>
                <li> Esta é o segundo item da lista</li>
            </ul>
         </body>
    </html>
  11.  <img> -> Esta é a tag para inserir imagens na página. Ao utilizar esta tag, é necessário utilizar o atributo src que contém o endereço da imagem que pode ser absoluto (http://) ou relativo (de acordo com a localização da página atual). Além disso, é muito comum utilizar os atributos alt e title para inserir informações da imagem. Exemplo
  12. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    
    <html>
        <head>http://gustavofrancisco.com.br/wp-admin/tools.php
            <title>Iniciando com HTML - Imagens</title>
        </head>
        <body>
            <img src="http://moodle.clip.pt/pluginfile.php/5059/coursecat/description/IT.jpg" alt="Este é o alt da imagem" title="Este é o title da imagem - Caminho absoluto" /> 
            <img src="img/img_exemplo.jpg" alt="Este é o alt da imagem" title="Este é o title da imagem - Caminho relativo" /> 
     
         </body>
    </html>
  13.  <div> -> Esta é, na minha opinião, uma das tags mais importantes. Ela é utilizada para iniciar um bloco qualquer. Ela não possui uma visualização direta, mas é extremamente importante no momento de criar uma página para definir caixas e as personalizá-las com as cores, posicionamento e etc. Veja um exemplo da importância das divs, e para melhor ilustrar, inseri uma pequena informação do CSS.
  14. 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    
    <html>
        <head>http://gustavofrancisco.com.br/wp-admin/tools.php
            <title>Iniciando com HTML - DIVs</title>
        </head>
        <body>
            <div style="float: left; border: 1px solid #ccc; background: #f0f0f0; width: 40%">
                <h1> Este é o título da div 1</h1>
                <p> Aqui eu insiro um texto da div 1 informando qualquer coisa. Para explicar o CSS brevemente, por exemplo, o float: left significa que deixarei ela flutuando à esquerda, o border inserindo uma borda de 1px contínua na cor cinza, o background informando uma cor cinza clara no fundo e width 40% informando que minha div terá 40% do tamanho da tela</p>
            </div>
            <div style="float: right; border: 1px dotted #333;width: 40%">
                <h2> Este é o título da div 2</h2>
                <p> Aqui eu insiro um texto da div 2 informando qualquer coisa. Para explicar o CSS brevemente, por exemplo, o float: right significa que deixarei ela flutuando à direita, o border inserindo uma borda de 1px pontilhada na cor cinza e width 40% informando que minha div terá 40% do tamanho da tela</p>
            </div>
         </body>
    </html>

Acredito que estas sejam as tags mais importantes e utilizadas na criação de páginas. Espero que tenha entendido o raciocínio de como funciona o HTML e que consiga utilizar tudo que passei alinhando sua criatividade, testando as tags dentro de outras e conferindo o resultado. Gosto de dizer que qualquer página pode ser construída de diversas formas, sabendo combinar os elementos e o CSS é possível construir qualquer coisa.

Baixe o conteúdo do código escrito neste post contendo todos os exemplo clicando aqui.

O que não pode perder

Até mais, espero ter ajudado!