HTML

Confira neste artigo:

Introdução

HTML (HyperText Markup Language) é a linguagem padrão usada para criar páginas web. Com HTML, podemos estruturar e organizar conteúdo na web, criando títulos, parágrafos, links, imagens, vídeos e outros elementos interativos.

O que é HTML?

HTML é uma linguagem de marcação que utiliza tags para estruturar o conteúdo de uma página web. Cada tag define um elemento, como parágrafos, cabeçalhos, listas, links, imagens e muito mais. Essas tags indicam ao navegador como exibir o conteúdo, e muitas vezes são acompanhadas de atributos que fornecem mais informações sobre os elementos.


<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo HTML</title>
</head>
<body>
    <h1>Bem-vindo ao HTML</h1>
    <p>Este é um exemplo de HTML básico.</p>
</body>
</html>

História do HTML

A história do HTML começou no início da década de 1990, quando foi desenvolvido como uma maneira de compartilhar documentos científicos entre pesquisadores. Sua simplicidade e eficiência permitiram que rapidamente se tornasse a base da criação de websites. Ao longo dos anos, várias versões foram lançadas, adicionando novos recursos e tornando a web mais rica e interativa. O HTML5, lançado em 2014, consolidou-se como a versão mais robusta, com suporte nativo para vídeos, gráficos e outras mídias.

HTML Semântico

HTML semântico melhora a acessibilidade e o SEO das páginas. Usar tags como <article> <section>, <header>, e <footer> ajuda os motores de busca e navegadores a entender melhor a estrutura e o propósito do conteúdo , facilitando a navegação e melhorando a usabilidade para pessoas com deficiência.

Elementos Básicos do HTML

Aqui estão alguns dos elementos básicos que você encontrará no HTML:

<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Exemplo HTML</title>
</head>
<body>

Elementos Básicos do HTML


    
1. Cabeçalhos

    
Os cabeçalhos são usados para definir títulos de diferentes níveis de importância. Eles variam de <h1> a <h6>.

    
<h1>Título Principal (h1)</h1>
<h2>Subtítulo (h2)</h2>
<h3>Subsubtítulo (h3)</h3>
    


    
2. Parágrafos

    
Parágrafos são usados para dividir o texto em blocos, facilitando a leitura.

    
<p>Este é um parágrafo de exemplo com texto explicativo sobre parágrafos no HTML.</p>
    


    
3. Links

    
Links são usados para navegar entre páginas ou sites. O atributo href define o destino.

    
<a href="https://www.exemplo.com">Clique aqui para visitar um site de exemplo</a>
    


    
4. Imagens

    
As imagens são adicionadas com a tag <img> e seus atributos src (origem) e alt (descrição).

    
<img src="https://via.placeholder.com/150" alt="Imagem de Exemplo">
    


    
5. Listas

    
Lista não ordenada (ul)

    
Listas não ordenadas usam <ul> para definir uma lista com marcadores.

    
<ul>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
    


    
Lista ordenada (ol)

    
Listas ordenadas usam <ol> para definir uma lista numerada.

    
<ol>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ol>
    


    
6. Tabelas

    
Tabelas organizam dados em linhas e colunas, usando as tags <table>, <tr>, <th> e <td>.

    
<table>
    <tr>
        <th>Nome</th>
        <th>Idade</th>
    </tr>
    <tr>
        <td>João</td>
        <td>30</td>
    </tr>
    <tr>
        <td>Ana</td>
        <td>25</td>
    </tr>
</table>
    


    
7. Formulários

    
Formulários permitem a interação do usuário com a página, por meio de campos de entrada e botões de envio.

    
<form action="/enviar" method="post">
    <label for="nome">Nome:</label>
    <input type="text" id="nome" name="nome">
    <button type="submit">Enviar</button>
</form>
    


    
8. Divs e Spans

    
As tags <div> e <span> são usadas para agrupar elementos e aplicar estilos específicos.

    
<div>
    <h3>Div</h3>
    <p>Este é um conteúdo dentro de uma div.</p>
</div>
<p>Texto com <span>destaque em span</span>.</p>
    


    
9. Comentários

    
Comentários são usados para adicionar anotações no código que não serão exibidas na página.

    
<!-- Este é um comentário que não será exibido na página -->
    


    
10. Blocos Semânticos

    
Os blocos semânticos como <header>, <section> e <footer> ajudam a estruturar a página de forma organizada.

    
<header>
    <h1>Cabeçalho do site</h1>
</header>
<section>
    <h2>Seção de conteúdo</h2>
    <p>Este é um exemplo de conteúdo dentro de uma seção.</p>
</section>
<footer>
    <p>Rodapé do site</p>
</footer>
    

</body>
</html>

Portfólio Simples HTML

Este é um exemplo básico de um site de portfólio desenvolvido em HTML

Exemplo de Portfólio Simples 

                            <!DOCTYPE html>
<html lang="en"> <!-- Define o tipo de documento como HTML5 e o idioma como inglês -->
<head>
    <meta charset="UTF-8"> <!-- Define a codificação de caracteres como UTF-8 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Torna o site responsivo em dispositivos móveis -->
    <title>Portfolio</title> <!-- Define o título da página que aparece na aba do navegador -->
</head>
<body>
    <!-- Cabeçalho do site -->
    <header>
        <h1>João Silva</h1> <!-- Nome do desenvolvedor -->
        <p>Desenvolvedor Web</p> <!-- Breve descrição -->

        <!-- Menu de navegação -->
        <nav>
            <ul>
                <!-- Links que direcionam para diferentes seções da página -->
                <li><a href="/#sobre">Sobre Nós</a></li>
                <li><a href="/#habilidades">Habilidades</a></li>
                <li><a href="/#Projetos">Projetos</a></li>
                <li><a href="/#contato">Contato</a></li>
            </ul>
        </nav>
    </header>
    <hr/> <!-- Linha horizontal para separar as seções -->

    <!-- Seção "Sobre Mim" -->
    <section id="sobre">
        <h2>Sobre Mim</h2> <!-- Título da seção -->
        <img src="img/joao.jpg" alt="Imgem João" width="150px" title="Minha Foto"> <!-- Imagem representativa -->
        <p>Lorem Ipsum é um texto fictício usado como padrão na indústria gráfica...</p> <!-- Texto fictício como exemplo -->
    </section>
    <hr/>

    <!-- Seção "Habilidades" -->
    <section id="habilidades">
        <h2>Habilidades</h2> <!-- Título da seção -->
        <ul>
            <!-- Lista de habilidades -->
            <li>HTML</li>
            <li>PHP</li>
            <li>JAVASCRIPT</li>
            <li>GIT</li>
        </ul>
    </section>
    <hr/>

    <!-- Seção "Projetos" -->
    <section id="projetos">
        <h2>Projetos</h2> <!-- Título da seção -->
        <ul>
            <!-- Primeiro projeto -->
            <li><strong>Site Pessoais</strong></li>
            <img src="img/projetos.jpg" alt="Meus Projetos"> <!-- Imagem representativa do projeto -->
            <p>Lorem Ipsum é um texto fictício usado como padrão...</p>
            
            <!-- Segundo projeto -->
            <li><strong>Blog de tecnologias</strong></li>
            <img src="img/blog.jpg" alt="Blog" width="200px"> <!-- Imagem do blog -->
            <p>Lorem Ipsum é um texto fictício usado como padrão...</p>
        </ul>
    </section>
    <hr/>

    <!-- Seção "Contato" -->
    <section id="contato">
        <h2>Contato</h2> <!-- Título da seção -->
        <p>Email: <a href="#contato">seuemail@gmail.com</a></p> <!-- Link para o email -->
        <p>Youtube: <a href="https://www.youtube.com" target="_blank"> Ver Aqui!</a></p> <!-- Link para o YouTube, abre em nova aba -->
    </section>
    <hr/>

    <!-- Rodapé -->
    <footer>
        <p>&copy; 2024 Todos os direitos reservados</p> <!-- Mensagem de direitos autorais -->
    </footer>
</body>
</html>