Ir para o conteúdo principal

Minhas obras

Bem-vindo à Minha Página Markdown

Este é um exemplo de uma página construída com Markdown. Aqui você encontrará a formatação de texto, imagens, vídeos, seções organizadas, links e botões.

1. Exemplo de Texto

1.1 Cores e Formatação

Este texto está em VERMELHO e em NEGRITO.

Este texto está em azul e itálico.

Este texto está em verde e sublinhado.

Este texto está em laranja e tem um tamanho de fonte maior.

Este texto está em roxo com o fundo amarelo.

Este texto está em roxo negrito com fundo azul claro e centralizado.

Este texto está em verde escuro negrito com fundo amarelo claro e alinhado à direita.

1.2 Fontes

Este texto está usando a fonte 'Times New Roman' com serifa.

Este texto está usando a fonte Arial, uma fonte sem serifa.

Este texto está usando a fonte 'Courier New', uma fonte monoespaçada.

Este texto está usando a fonte 'Comic Sans MS', que é uma fonte cursiva.

Este texto está usando a fonte 'Papyrus', uma fonte do tipo fantasia.

Se você quiser explorar mais opções de fontes para usar no CSS, visite esta página com uma lista completa de nomes de font-family: Lista de Fontes Web Seguras.

2. Imagens

Abaixo, você verá uma imagem de exemplo:

2.1 Texto com Imagem ao Lado

Este é um exemplo de como alinhar uma imagem personalizada ao lado de um texto, ocupando toda a largura disponível. Usamos HTML e CSS para criar essa estrutura flexível. Você pode ajustar o tamanho da imagem e o layout conforme necessário.

2.2 Texto com Imagem ao Lado seguido de mais Texto

Este é um exemplo de como alinhar uma imagem personalizada ao lado de um texto, ocupando toda a largura disponível. Usamos HTML e CSS para criar essa estrutura flexível. A imagem e o texto juntos preenchem a largura da página.

Agora, temos mais texto que ocupa toda a largura da página. Esse segundo bloco de texto é totalmente independente e não tem imagens ao lado, garantindo que ele preencha toda a largura. Você pode adicionar mais informações aqui, incluindo parágrafos longos, listas, ou qualquer outro tipo de conteúdo que você desejar.

2.3.1 Bordas em Imagem

  • Borda Sólida

  • Borda Tracejada

  • Borda Pontilhada

  • Borda Dupla

  • Borda Groove

  • Borda Arredondada

2.3.2 Borda em Texto e Imagem

Atenção: Esta seção contém uma imagem importante e um texto explicativo.

Esta é uma seção que destaca uma borda em volta de uma imagem e texto para chamar atenção. A imagem representa o conteúdo visual relacionado ao texto.

Imagem de Exemplo

Este é um exemplo de como alinhar uma imagem personalizada ao lado de um texto, ocupando toda a largura disponível. Usamos HTML e CSS para criar essa estrutura flexível. Você pode ajustar o tamanho da imagem e o layout conforme necessário.

3. Vídeo

3.1 Vídeo do YouTube Incorporado abaixo

Aqui está um exemplo de como incorporar um vídeo do YouTube diretamente em sua página.

3.2 Vídeo do YouTube Incorporado ao lado

Este é um exemplo de como alinhar um vídeo do YouTube ao lado de um texto. Usamos HTML e CSS para criar essa estrutura flexível. Você pode ajustar o tamanho do vídeo e o layout conforme necessário.

4. Subtítulo com Lista

Aqui está uma lista de tópicos:

  • Markdown
    • Sintaxe simples e fácil
    • Amplamente usado em projetos de código aberto
  • Imagens
    • Inclua imagens com URLs
    • Suporte a formatos populares como .png, .jpg
  • Links
    • Link para qualquer site
    • Use texto âncora descritivo

5. Detalhes

Clique para ver mais detalhes Aqui estão os detalhes adicionais.

6. Emojis

Você pode usar emojis diretamente no seu conteúdo, copiando e colando os símbolos em sua plataforma de blog ou wiki. Para encontrar mais emojis, você pode visitar a Emojipedia.

⚠️ Atenção: Este é um aviso.
✅ Feito: A tarefa foi completada.
🎯 Objetivo: Alcançar a meta estipulada.

7. Entre em contato

Aqui estão alguns links úteis para você explorar:

7.2 Entre em Contato - Botões

8. Resumo

8.1 Tags HTML:

  1. <h1> a <h3> - Cabeçalhos utilizados para organizar o conteúdo por importância.
  2. <p> - Parágrafos para estruturar o texto.
  3. <a> - Links para redirecionamento para outra página ou site.
  4. <img> - Inserção de imagens.
  5. <div> - Divisão de seções ou blocos de conteúdo.
  6. <ul> - Lista não ordenada (bullets).
  7. <li> - Item de lista.
  8. <iframe> - Embutir conteúdo externo, como vídeos do YouTube.
  9. <details> e <summary> - Exibir/ocultar detalhes ao clicar.
  10. <code> - Exibir código ou trechos de código.
  11. <strong> - Destacar texto em negrito.
  12. <em> - Destacar texto em itálico.
  13. <img> - Aplicação de bordas a imagens.
    • Exemplo: <img src="url" style="border: 5px solid black;">

8.2 Atributos CSS:

  1. color - Define a cor do texto.

    • Exemplo: color: red;

  2. background-color - Define a cor de fundo.

    • Exemplo: background-color: lightblue;

  3. font-weight - Define o peso da fonte (negrito).

    • Exemplo: font-weight: bold;

  4. font-style - Define o estilo da fonte (normal, itálico).

    • Exemplo: font-style: italic;

  5. text-decoration - Define a decoração do texto (sublinhado, etc.).

    • Exemplo: text-decoration: underline;

  6. font-size - Define o tamanho da fonte.

    • Exemplo: font-size: 20px;

  7. padding - Define o espaçamento interno de um elemento.

    • Exemplo: padding: 5px;

  8. text-align - Define o alinhamento do texto (esquerda, centro, direita).

    • Exemplo: text-align: center;

  9. font-family - Define a família de fontes.

    • Exemplo: font-family: Arial, sans-serif;

  10. width e height - Define a largura e altura de elementos, como imagens e vídeos.

    • Exemplo: width: 150px; height: 150px;

  11. display - Controla o layout do elemento (flex, block, inline, etc.).

    • Exemplo: display: flex;

  12. align-items - Alinha os itens dentro de um contêiner flexível.

    • Exemplo: align-items: center;

  13. flex - Define como o elemento deve se ajustar dentro de um contêiner flexível.

    • Exemplo: flex: 1;

  14. border - Define o tipo, espessura e cor da borda de um elemento.

    • Exemplo: border: 5px solid black;

  15. border-radius - Define os cantos arredondados de um elemento.

    • Exemplo: border-radius: 5px;

  16. target - Especifica onde o link será aberto (_blank para abrir em nova aba).

    • Exemplo: target="_blank"
Voltar ao topo