SoHTML/index.html at main · Fiuza3/SoHTML · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Projeto de demonstração de HTML puro - Portfolio de Marcus Fiuza">
    <meta name="keywords" content="HTML, Marcus Fiuza, Portfolio, Técnico em Eletrônica, TI">
    <meta name="author" content="Marcus Vinicius Fiuza Silva">
    <meta name="robots" content="index, follow">
    <title>Portfolio HTML Puro - Marcus Fiuza</title>
</head>
<body>
    <header>
        <h1>Projeto HTML - Demonstração Técnica</h1>
        <p><strong>Desenvolvido por:</strong> Marcus Vinicius Fiuza Silva</p>
        <p><em>Desenvolvedor Fullstack</em></p>
    </header>

    <nav>
        <h2>Navegação Principal</h2>
        <ul>
            <li><a href="#inicio" accesskey="1" title="Ir para início (Alt+1)">Início</a></li>
            <li><a href="sobre-html.html" accesskey="2" title="Guia técnico de HTML (Alt+2)">Guia HTML</a></li>
            <li><a href="portfolio.html" accesskey="3" title="Portfolio profissional (Alt+3)">Portfolio</a></li>
            <li><a href="contato.html" accesskey="4" title="Página de contato (Alt+4)">Contato</a></li>
        </ul>
    </nav>

    <main id="inicio">
        <section>
            <h2>Sobre Este Projeto</h2>
            <p>Este projeto demonstra o uso <strong>exclusivo</strong> de HTML puro, sem CSS, JavaScript ou outras tecnologias externas. O objetivo é mostrar domínio técnico completo da linguagem HTML através de:</p>

            <ol>
                <li><strong>Semântica rigorosa:</strong> Uso correto de elementos estruturais</li>
                <li><strong>Acessibilidade:</strong> Suporte a tecnologias assistivas</li>
                <li><strong>Padronização:</strong> Conformidade com W3C</li>
                <li><strong>Completude:</strong> Demonstração de todos os elementos relevantes</li>
            </ol>
        </section>

        <section>
            <h2>Resumo das Páginas</h2>
            <table border="1">
                <caption>Estrutura do Projeto HTML</caption>
                <thead>
                    <tr>
                        <th scope="col">Página</th>
                        <th scope="col">Descrição</th>
                        <th scope="col">Elementos Principais</th>
                        <th scope="col">Acesso</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th scope="row">index.html</th>
                        <td>Página inicial com navegação e resumo</td>
                        <td>header, nav, main, section, table</td>
                        <td><a href="#inicio">Atual</a></td>
                    </tr>
                    <tr>
                        <th scope="row">sobre-html.html</th>
                        <td>Guia técnico completo de elementos HTML</td>
                        <td>article, code, pre, dl, figure</td>
                        <td><a href="sobre-html.html">Acessar</a></td>
                    </tr>
                    <tr>
                        <th scope="row">portfolio.html</th>
                        <td>Portfolio profissional de Marcus Fiuza</td>
                        <td>address, iframe, img, aside</td>
                        <td><a href="portfolio.html">Acessar</a></td>
                    </tr>
                    <tr>
                        <th scope="row">contato.html</th>
                        <td>Formulário de contato funcional</td>
                        <td>form, fieldset, legend, label</td>
                        <td><a href="contato.html">Acessar</a></td>
                    </tr>
                </tbody>
            </table>
        </section>

        <section>
            <h2>Características Técnicas</h2>
            <h3>Acessibilidade</h3>
            <ul>
                <li>Textos alternativos em todas as imagens</li>
                <li>Rótulos associados a todos os campos de formulário</li>
                <li>Teclas de acesso (accesskey) para navegação</li>
                <li>Estrutura hierárquica de cabeçalhos</li>
                <li>Suporte a leitores de tela</li>
            </ul>

            <h3>Semântica</h3>
            <ul>
                <li>Elementos estruturais adequados (header, nav, main, section, footer)</li>
                <li>Marcação semântica para conteúdo (article, aside, figure)</li>
                <li>Tabelas com escopo e legendas apropriadas</li>
                <li>Formulários com agrupamento lógico</li>
            </ul>
        </section>

        <section>
            <h2>Demonstração de Elementos</h2>
            <h3>Formatação de Texto</h3>
            <p>Este parágrafo demonstra diversos elementos de formatação:</p>
            <p>
                <strong>Texto importante</strong>, <em>texto enfatizado</em>,
                <mark>texto destacado</mark>, <code>código inline</code>,
                <abbr title="HyperText Markup Language">HTML</abbr>,
                <time datetime="2024-05-24">24 de maio de 2024</time>
            </p>

            <h3>Citações</h3>
            <blockquote cite="https://www.w3.org/standards/">
                <p>"O objetivo da Web é servir à humanidade. Construímos a Web para que funcione para todos, independentemente de hardware, software, idioma, localização ou capacidade."</p>
            </blockquote>
            <cite>— W3C Mission Statement</cite>

            <h3>Código Pré-formatado</h3>
            <pre>
&lt;!DOCTYPE html&gt;
&lt;html lang="pt-BR"&gt;
&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;title&gt;HTML Exemplo&lt;/title&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;h1&gt;Olá, Mundo!&lt;/h1&gt;
&lt;/body&gt;
&lt;/html&gt;
            </pre>
        </section>
    </main>

    <footer>
        <hr>
        <address>
            <p><strong>Marcus Vinicius Fiuza Silva</strong></p>
            <p>Email: <a href="mailto:marcusvinifiuza739@gmail.com">marcusvinifiuza739@gmail.com</a></p>
            <p>Telefone: <a href="tel:+5531996350383">+55 31 99635-0383</a></p>
            <p>Belo Horizonte, MG - Brasil</p>
        </address>
        <p><small>&copy; 2024 - Projeto de Demonstração HTML Puro</small></p>
    </footer>
</body>
</html>