PrimeiraPaginaHTML

HTML

05/03/2018

<!doctype html>
<html lang="pt-br">
    <head>
        <meta charset="UTF-8">
 
        <title>DevMedia - Cursos de Front End Web</title>
    </head>
    <body>

    	<header>
     
        <h1>Cursos</h1>
 
        <h2>Front End Web</h2>
     
 
    <p>Confira nesta página os cursos mais recentes sobre Front End Web.</p>
 
    <nav>
        <ul>
            <li><a href="https://www.devmedia.com.br/cursos/java"
               title="Home">Home</a></li>
            <li><a href="https://www.devmedia.com.br/cursos/java"
               title="Cursos de Java">Cursos de Java</a></li>
            <li><a href="https://www.devmedia.com.br/cursos/net"
               title="Cursos de .Net">Cursos de .Net</a></li>
            <li><a href="https://www.devmedia.com.br/cursos/delphi"
               title="Cursos de Delphi">Cursos de Delphi</a></li>
            <li><a href="https://www.devmedia.com.br/cursos/php"
               title="Cursos de PHP">Cursos de PHP</a></li>
        </ul>
    </nav>
</header>

<main>
    <section>
        <h2>Primeiros passos</h2>
 
        <p>Os cursos de primeiros passos apresentam os 
             conceitos iniciais dentro de uma tecnologia.</p>
 
        <article>
            <h3>
                <a href="https://www.devmedia.com.br/cursos/frontendweb/o-que-e-html"
                   title="O que é HTML?">O que é HTML?</a>
            </h3>
 
            <figure>
                <img src="imagens/1.jpg" alt="O que é HTML?">
 
                <figcaption>
                    Figura 1 - <strong>O que é HTML?</strong>
                </figcaption>
            </figure>
 
            <p>Neste curso conheceremos a HTML.</p>
        </article>
 
        <article>
            <h3>
                <a href="https://www.devmedia.com.br/cursos
                     /frontendweb/primeira-pagina-em-html" 
                    title="Primeira página em HTML">Primeira página em HTML</a>
            </h3>
 
            <figure>
                <img src="imagens/2.jpg" alt="Primeira página em HTML">
 
                <figcaption>
                    Figura 2 - <strong>Primeira página em HTML</strong>
                </figcaption>
            </figure>
 
            <p>Neste curso criaremos uma página utilizando a linguagem HTML.</p>
        </article>
    </section>
 
    <section>
        <h2>Avançando no HTML</h2>
 
        <p>Os cursos avançando apresentam temas mais 
           específicos dentro de uma tecnologia.</p>
 
        <article>
            <h3>
                <a href="https://www.devmedia.com.br/cursos/frontendweb
                  /conhecendo-as-tags-semanticas-do-html" 
                title="Conhecendo as tags semânticas do HTML">
                 Conhecendo as tags semânticas do HTML</a>
            </h3>
 
            <figure>
                <img src="imagens/3.jpg" alt="Conhecendo as tags semânticas do HTML">
 
                <figcaption>
                    Figura 3 - <strong>Conhecendo as tags semânticas 
                     do HTML</strong>
                </figcaption>
            </figure>
 
            <p>Neste curso apresentaremos as tags semânticas 
               introduzidas no HTML5.</p>
        </article>
 
        <article>
            <h3>
                <a href="https://www.devmedia.com.br/cursos
                  /frontendweb/introducao-a-acessibilidade-com-html5" 
                 title="Introdução a acessibilidade com HTML5">
                  Introdução a acessibilidade com HTML5</a>
            </h3>
 
            <figure>
                <img src="imagens/4.jpg" alt="Introdução a acessibilidade 
                    com HTML5">
 
                <figcaption>
                    Figura 4 - <strong>Introdução a acessibilidade 
                      com HTML5</strong>
                </figcaption>
            </figure>
 
            <p>Neste curso conheceremos os atributos introduzidos 
               no HTML5 para acessibilidade na web.</p>
        </article>
    </section>
</main>


<footer>
    <nav>
        <ul>
            <li><a href="https://www.devmedia.com.br/devcasts"
              title="DevCasts">DevCasts</a></li>
            <li><a href="https://www.devmedia.com.br/artigos"
              title="Artigos">Artigos</a></li>
        </ul>
    </nav>
 
    <p>© www.devmedia.com.br</p>
</footer>

    </body>
</html>
Paulo Ramos

Paulo Ramos

Curtidas 0

Melhor post

Higor Rocha

Higor Rocha

09/03/2018

Bem legal. :)
Eu só acrescentaria o uso da 
<meta name="viewport" content="width=device-width, initial-scale=1">
e tá fechado.
GOSTEI 1

Mais Respostas

Rodrigo Duclerc

Rodrigo Duclerc

05/03/2018

Olá Paulo, sobre o problema com o carregamento de imagens, acredito que possa estar relacionado ao caminho para o arquivo. Este tipo de problema é comum quando a gente inicia no HTML pois precisamos de um entendimento sólido sobre Paths. O novo curso de HTML fala sobre paths na aula sobre links e retomamos este assunto na aula sobre inclusão de imagens. Sugiro que assista pelo menos estas duas aulas para entender melhor:

Links (paths absolutos e relativos):
https://www.devmedia.com.br/view/viewaula.php?idcomp=39542

Imagens:
https://www.devmedia.com.br/view/viewaula.php?idcomp=39543
GOSTEI 1
POSTAR