Exemplos de objetos HTML

De GuiaEaD
Revisão de 16h37min de 28 de agosto de 2017 por Milton (discussão | contribs)
Html.png

Existem inúmeras formas de melhorar o layout da sala virtual e torná-la visualmente mais atrativa. Dentre essas formas, utilizar códigos HTML é a maneira mais simples de tornar isso realidade. Entretanto, é necessário entender um pouco de HTML e CSS para criar esses objetos. Para facilitar o trabalho de quem quer melhorar o layout da sua sala, escreveremos códigos de alguns objetos importantes, bastando apenas copiar e colar no editor de textos, no modo HTML, claro.

Como o tema dos Ambientes Virtuais aqui do IFG utilizam como base o framework Bootstrap, faremos também o uso de suas classes para melhorar ainda mais o visual desses objetos.

Divisão de conteúdos

Utilizado para separar assuntos ou conteúdos diferentes dentro de um mesmo tópico.

DIV sem sombra

Objeto HTML - divisão de conteúdo.png

Verde:

<div style="background: #369831;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Azul:

<div style="background: #0000CD;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Cinza:

<div style="background: #808080;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Vermelho:

<div style="background: #B22222;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Amarelo:

<div style="background: #FFD700;"><h4 style="text-align: center; color: rgb(0, 0, 0); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Para utilizar outras cores, basta modificar o atributo "background" para o código hexadecimal da cor desejada. Clique aqui e confira uma lista de cores e seus respectivos códigos hexadecimais.

DIV com sombra

Objeto HTML - divisão de conteúdo sombra.png

Códigos:

Verde:

<div style="background: #369831;" class="shadow1"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Azul:

<div style="background: #0000CD;" class="shadow1"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Cinza:

<div style="background: #808080;" class="shadow1"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Vermelho:

<div style="background: #B22222;" class="shadow1"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Amarelo:

<div style="background: #FFD700;" class="shadow1"><h4 style="text-align: center; color: rgb(0, 0, 0); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>

Para utilizar outras cores, basta modificar o atributo "background" para o código hexadecimal da cor desejada. Clique aqui e confira uma lista de cores e seus respectivos códigos hexadecimais.

Cabeçalho do tópico ou seção

Uma forma interessante descrever os objetivos daquele tópico de estudo.

Objeto HTML - cabeçalho do tópico.png

Código:

<div style="background: #369831;" class="shadow1">
  <h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>
</div>
<div class="prom-box prom-box-default shadow1"><p style="text-align: justify;">
  <img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/603353277/jpg.png" alt="Imagem JPEG" width="128" height="128" class="img-responsive atto_image_button_left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ornare, nulla ut molestie faucibus, mi enim viverra arcu, vitae dignissim ante felis vel velit. Curabitur feugiat libero neque, sed consectetur lectus dictum non. Donec placerat, turpis sed eleifend mattis, mauris turpis iaculis ipsum, sit amet posuere risus dui a mi. Nullam viverra volutpat interdum. Sed finibus vulputate magna, sit amet condimentum metus feugiat quis.&nbsp;</p><p style="text-align: justify;">Nulla non eros porta, finibus sem eu, dictum velit. Nam ultrices sit amet mauris nec dapibus. Etiam eleifend massa congue metus feugiat, sit amet consequat ipsum sodales. In hac habitasse platea dictumst. Morbi ut nisi ac diam commodo efficitur sed eu est. Aliquam consectetur mattis lorem nec lobortis. Maecenas finibus id ipsum vel sagittis. In auctor dui et imperdiet varius. Donec tempor ipsum sit amet scelerisque venenatis. Phasellus vitae magna in sapien accumsan pellentesque. Sed non fringilla erat.</p>
</div>

As alterações dos textos (identificação do tópico e descrição) e da imagem, podem ser feitos através da interface visual do editor de textos de sua preferência. Atente-se ao tamanho da imagem, caso contrario ela pode ficar desproporcional ao tamanho do texto. Como referência, esta imagem de exemplo tem 128 pixels de largura e 128 pixels de altura.

Para utilizar outras cores, basta modificar o atributo "background" para o código hexadecimal da cor desejada. Clique aqui e confira uma lista de cores e seus respectivos códigos hexadecimais.

Tabela estilizada

Utilizada compartimentar informações, como por exemplo: mural de avisos, datas de atividades, horários de atendimento, dentre outros.

Objeto HTML - tabela estilizada.png

Código:

<table class="table table-hover table-striped">
	<thead>
		<tr style="background-color: #369831; border-bottom: 4px solid #2C7500;">
      <th><span style="color: #ffffff;">Coluna 1</span></th>
      <th><span style="color: #ffffff;">Coluna 2</span></th>
      <th><span style="color: #ffffff;">Coluna 3</span></th>
      <th><span style="color: #ffffff;">Coluna 4</span></th>
    </tr>
</thead>
  <tbody>
    <tr>
      <td><br></td>
      <td><br></td>
      <td><br></td>
      <td><br></td>
    </tr>
    <tr style="border-bottom: 1px solid #ddd;">
      <td><br></td>
      <td><br></td>
      <td><br></td>
      <td><br></td>
      </tr>
    <tr>
      <td><br></td>
      <td><br></td>
      <td><br></td>
      <td><br></td>
    </tr>
    <tr style="border-bottom: 1px solid #ddd;">
      <td><br></td>
      <td><br></td>
      <td><br></td>
      <td><br></td>
    </tr>
  </tbody>
</table>

Alertas e avisos

Utilizados para dar ênfase a alguma informação ou aviso aos alunos. Por exemplo: dizer que a atividade foi concluída; leitura de determinado tópico foi finalizada; aprovação ou reprovação em determinada atividade; dentre outros.

Alertas com pouco texto

Objeto HTML - alertas.png

Códigos:

Success

<div class="alert alert-success" role="alert"><b>Inserir o texto aqui (success)</b></div>

Danger

<div class="alert alert-danger" role="alert"><b>Inserir o texto aqui (danger)</b></div>

Warning

<div class="alert alert-warning" role="alert"><b>Inserir o texto aqui (warning)</b></div>

Pass

<div class="alert alert-info" role="alert"><b>inserir o texto aqui (pass)</b></div>

Alertas com mais texto

Objeto HTML - alertas maiores.png

Success

<div class="prom-box prom-box-default shadow1" style="background: #d6e9c6;">
  <p style="text-align: justify;"><b>Nulla non eros porta finibus sem eu</b></p><p style="text-align: justify;">Dictum velit. Nam ultrices sit amet mauris nec dapibus. Etiam eleifend massa congue metus feugiat, sit amet consequat ipsum sodales. In hac habitasse platea dictumst. Morbi ut nisi ac diam commodo efficitur sed eu est. Aliquam consectetur mattis lorem nec lobortis. Maecenas finibus id ipsum vel sagittis. In auctor dui et imperdiet varius. Donec tempor ipsum sit amet scelerisque venenatis. Phasellus vitae magna in sapien accumsan pellentesque. Sed non fringilla erat.
  </p>
</div>

Danger

<div class="prom-box prom-box-default shadow1" style="background: #eed3d7; border-left: 6px solid #CD0000">
  <p style="text-align: justify;"><b>Nulla non eros porta finibus sem eu</b></p><p style="text-align: justify;">Dictum velit. Nam ultrices sit amet mauris nec dapibus. Etiam eleifend massa congue metus feugiat, sit amet consequat ipsum sodales. In hac habitasse platea dictumst. Morbi ut nisi ac diam commodo efficitur sed eu est. Aliquam consectetur mattis lorem nec lobortis. Maecenas finibus id ipsum vel sagittis. In auctor dui et imperdiet varius. Donec tempor ipsum sit amet scelerisque venenatis. Phasellus vitae magna in sapien accumsan pellentesque. Sed non fringilla erat.
  </p>
</div>

Warning

<div class="prom-box prom-box-default shadow1" style="background: #fcf8e3; border-left: 6px solid #EEAD0E">
  <p style="text-align: justify;"><b>Nulla non eros porta finibus sem eu</b></p><p style="text-align: justify;">Dictum velit. Nam ultrices sit amet mauris nec dapibus. Etiam eleifend massa congue metus feugiat, sit amet consequat ipsum sodales. In hac habitasse platea dictumst. Morbi ut nisi ac diam commodo efficitur sed eu est. Aliquam consectetur mattis lorem nec lobortis. Maecenas finibus id ipsum vel sagittis. In auctor dui et imperdiet varius. Donec tempor ipsum sit amet scelerisque venenatis. Phasellus vitae magna in sapien accumsan pellentesque. Sed non fringilla erat.
  </p>
</div>

Pass

<div class="prom-box prom-box-default shadow1" style="background: #bce8f1; border-left: 6px solid #3a87ad">
  <p style="text-align: justify;"><b>Nulla non eros porta finibus sem eu</b></p><p style="text-align: justify;">Dictum velit. Nam ultrices sit amet mauris nec dapibus. Etiam eleifend massa congue metus feugiat, sit amet consequat ipsum sodales. In hac habitasse platea dictumst. Morbi ut nisi ac diam commodo efficitur sed eu est. Aliquam consectetur mattis lorem nec lobortis. Maecenas finibus id ipsum vel sagittis. In auctor dui et imperdiet varius. Donec tempor ipsum sit amet scelerisque venenatis. Phasellus vitae magna in sapien accumsan pellentesque. Sed non fringilla erat.
  </p>
</div>
Disponível em “https://guiaead.ifg.edu.br/index.php?title=Exemplos_de_objetos_HTML&oldid=1825”