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

2.2 Texto com Imagem ao Lado seguido de mais Texto

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

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

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

7.1 Links Úteis

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

• Visite o Google
• Acesse o GitHub
• Confira a Documentação do Markdown

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"