Exemplos de objetos HTML - Histórico de revisão

Milton em 12h28min de 6 de outubro de 2023

2023-10-06T12:28:40Z

← Edição anterior		Edição das 12h28min de 6 de outubro de 2023
Linha 1:		Linha 1:
	~~<table><tr><td>~~[[Arquivo:Html.png\|esquerda]]		[[Arquivo:Html.png\|esquerda]]

	Existem inúmeras formas de melhorar o layout da sala virtual e torná-la visualmente mais atrativa. Dentre essas formas, a utilização de 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, escrevemos os códigos de alguns objetos importantes, bastando apenas copiar e colar no editor de textos, no modo HTML.		Existem inúmeras formas de melhorar o layout da sala virtual e torná-la visualmente mais atrativa. Dentre essas formas, a utilização de 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, escrevemos os códigos de alguns objetos importantes, bastando apenas copiar e colar no editor de textos, no modo HTML.
Linha 6:		Linha 6:

	Dúvidas sobre como ativar o modo HTML do editor de textos do moodle? [[Incorporando vídeos#html\|Clique aqui!]]		Dúvidas sobre como ativar o modo HTML do editor de textos do moodle? [[Incorporando vídeos#html\|Clique aqui!]]
	~~</td></tr></table>~~

	<div style="float:right;">__TOC__</div>		<div style="float:right;">__TOC__</div>

2160231 em 10h51min de 15 de agosto de 2022

2022-08-15T10:51:55Z

← Edição anterior		Edição das 10h51min de 15 de agosto de 2022
Linha 1:		Linha 1:
	<table><tr><td>[[Arquivo:Html.png\|esquerda]]		<table><tr><td>[[Arquivo:Html.png\|esquerda]]
	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~~ os códigos de alguns objetos importantes, bastando apenas copiar e colar no editor de textos, no modo HTML~~, claro~~.
			Existem inúmeras formas de melhorar o layout da sala virtual e torná-la visualmente mais atrativa. Dentre essas formas, a utilização de 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, escrevemos os códigos de alguns objetos importantes, bastando apenas copiar e colar no editor de textos, no modo HTML.

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

Milton em 14h55min de 30 de abril de 2022

2022-04-30T14:55:42Z

← Edição anterior		Edição das 14h55min de 30 de abril de 2022
Linha 10:		Linha 10:

	== Videoaula sobre como adicionar objetos HTML na sua sala ==		== Videoaula sobre como adicionar objetos HTML na sua sala ==
	Antes de ver os exemplos, ~~recomendo~~ que acompanhe esta videoaula para aprender como adicionar os objetos HTML na sua sala virtual.		Antes de ver os exemplos, recomendamos que acompanhe esta videoaula para aprender como adicionar os objetos HTML na sua sala virtual.

	<youtube>V6-bmnQ0J54</youtube>		<youtube>V6-bmnQ0J54</youtube>

Milton: /* Alertas ou informações em destaque */

2021-12-15T13:19:40Z

Alertas ou informações em destaque

Milton: /* Alertas com mais texto */

2021-12-15T13:15:12Z

Alertas com mais texto

Milton em 13h08min de 15 de dezembro de 2021

2021-12-15T13:08:24Z

← Edição anterior		Edição das 13h08min de 15 de dezembro de 2021
Linha 93:		Linha 93:
	<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>		<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>
	</div>		</div>
	<div style="border-left: 6px solid #ff9933; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4~~; border-left: 6px solid #369831~~; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">		<div style="border-left: 6px solid #ff9933; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">
	<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/38663230/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. </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>		<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/38663230/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. </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>		</div>
Linha 100:		Linha 100:
	<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>		<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>
	</div>		</div>
	<div style="border-left: 6px solid #CD0000; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4~~; border-left: 6px solid #369831~~; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">		<div style="border-left: 6px solid #CD0000; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">
	<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/493242493/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. </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>		<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/493242493/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. </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>		</div>
Linha 107:		Linha 107:
	<h4 style="color: #fff; padding: 6px;"><b>Texto de identificação do tópico</b></h4>		<h4 style="color: #fff; padding: 6px;"><b>Texto de identificação do tópico</b></h4>
	</div>		</div>
	<div style="border-left: 6px solid #245196; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4~~; border-left: 6px solid #369831~~; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">		<div style="border-left: 6px solid #245196; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">
	<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/864091640/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. </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>		<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/864091640/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. </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>		</div>

Milton em 13h04min de 15 de dezembro de 2021

2021-12-15T13:04:58Z

← Edição anterior		Edição das 13h04min de 15 de dezembro de 2021
Linha 83:		Linha 83:

	'''Tópico verde'''<syntaxhighlight lang="html">		'''Tópico verde'''<syntaxhighlight lang="html">
	<div style="background: #369831;~~" class="shadow1~~">		<div style="background: #369831; box-shadow: 0 10px 6px -6px #aaa;">
	<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>		<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>
	</div>		</div>
	<div ~~class="prom-box prom-box-default shadow1"~~ style="color: #101010; font-size: 16px; line-height: 1.7;"><p style="text-align: justify;">		<div style="color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4; border-left: 6px solid #369831; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><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. </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>		<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. </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>		</div>
	</syntaxhighlight>'''Tópico laranja'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Tópico laranja'''<syntaxhighlight lang="html">
	<div style="background: #ff9933;~~" class="shadow1~~">		<div style="background: #ff9933; box-shadow: 0 10px 6px -6px #aaa;">
	<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>		<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>
	</div>		</div>
	<div ~~class="prom-box prom-box-default shadow1"~~ style="border-left: 6px solid #ff9933; color: #101010; font-size: 16px; line-height: 1.7;"><p style="text-align: justify;">		<div style="border-left: 6px solid #ff9933; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4; border-left: 6px solid #369831; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">
	<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/38663230/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. </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>		<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/38663230/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. </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>		</div>
	</syntaxhighlight>'''Tópico vermelho'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Tópico vermelho'''<syntaxhighlight lang="html">
	<div style="background: #CD0000;~~" class="shadow1~~">		<div style="background: #CD0000; box-shadow: 0 10px 6px -6px #aaa;">
	<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>		<h4 style="color: #fff; padding:6px;"><b>Texto de identificação do tópico</b></h4>
	</div>		</div>
	<div ~~class="prom-box prom-box-default shadow1"~~ style="border-left: 6px solid #CD0000; color: #101010; font-size: 16px; line-height: 1.7;"><p style="text-align: justify;">		<div style="border-left: 6px solid #CD0000; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4; border-left: 6px solid #369831; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">
	<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/493242493/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. </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>		<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/493242493/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. </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>		</div>
	</syntaxhighlight>'''Tópico azul'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Tópico azul'''<syntaxhighlight lang="html">
	<div style="background: #245196;~~" class="shadow1~~">		<div style="background: #245196; box-shadow: 0 10px 6px -6px #aaa;">
	<h4 style="color: #fff; padding: 6px;"><b>Texto de identificação do tópico</b></h4>		<h4 style="color: #fff; padding: 6px;"><b>Texto de identificação do tópico</b></h4>
	</div>		</div>
	<div ~~class="prom-box prom-box-default shadow1"~~ style="border-left: 6px solid #245196; color: #101010; font-size: 16px; line-height: 1.7;"><p style="text-align: justify;">		<div style="border-left: 6px solid #245196; color: #101010; font-size: 16px; line-height: 1.7; background-color: #f4f4f4; border-left: 6px solid #369831; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;"><p style="text-align: justify;"><p style="text-align: justify;">
	<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/864091640/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. </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>		<img src="http://ead.ifg.edu.br/draftfile.php/15/user/draft/864091640/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. </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>		</div>

Milton em 12h58min de 15 de dezembro de 2021

2021-12-15T12:58:12Z

← Edição anterior		Edição das 12h58min de 15 de dezembro de 2021
Linha 44:		Linha 44:

	'''Verde:'''<syntaxhighlight lang="html">		'''Verde:'''<syntaxhighlight lang="html">
	<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>		<div style="background: #369831; box-shadow: 0 10px 6px -6px #aaa;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>
	</syntaxhighlight>'''Azul:'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Azul:'''<syntaxhighlight lang="html">
	<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>		<div style="background: #0000CD; box-shadow: 0 10px 6px -6px #aaa;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>
	</syntaxhighlight>'''Cinza:'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Cinza:'''<syntaxhighlight lang="html">
	<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>		<div style="background: #808080; box-shadow: 0 10px 6px -6px #aaa;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>
	</syntaxhighlight>'''Vermelho:'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Vermelho:'''<syntaxhighlight lang="html">
	<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>		<div style="background: #B22222; box-shadow: 0 10px 6px -6px #aaa;"><h4 style="text-align: center; color: rgb(255, 255, 255); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>
	</syntaxhighlight>'''Amarelo:'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Amarelo:'''<syntaxhighlight lang="html">
	<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>		<div style="background: #FFD700; box-shadow: 0 10px 6px -6px #aaa;"><h4 style="text-align: center; color: rgb(0, 0, 0); padding: 6px;"><b>Fóruns de comunicação</b></h4></div>
	</syntaxhighlight>Para utilizar outras cores, basta modificar o atributo "background" para o código hexadecimal da cor desejada. [http://www.flextool.com.br/tabela_cores.html Clique aqui] e confira uma lista de cores e seus respectivos códigos hexadecimais.		</syntaxhighlight>Para utilizar outras cores, basta modificar o atributo "background" para o código hexadecimal da cor desejada. [http://www.flextool.com.br/tabela_cores.html Clique aqui] e confira uma lista de cores e seus respectivos códigos hexadecimais.

Milton em 16h46min de 4 de agosto de 2021

2021-08-04T16:46:45Z

@@ Linha 155: / Linha 155: @@
      </tr>
    </tbody>
 </table>
 </syntaxhighlight>

Milton: /* DIV sem sombra */

2021-07-30T19:14:53Z

DIV sem sombra

← Edição anterior		Edição das 19h14min de 30 de julho de 2021
Linha 23:		Linha 23:

	'''Azul claro:'''<syntaxhighlight lang="html">		'''Azul claro:'''<syntaxhighlight lang="html">
	<div style="background: #1E90FF;">		<div style="background: #1E90FF;"><h4 style="text-align: center; color: #FFF; padding: 6px;"><b>Fóruns de comunicação</b></h4></div>
	<h4 style="text-align: center; color: #FFF; padding: 6px;"><b>Fóruns de comunicação</b></h4>
	</div>
	</syntaxhighlight>		</syntaxhighlight>

← Edição anterior		Edição das 13h19min de 15 de dezembro de 2021
Linha 243:		Linha 243:

	'''Success'''<syntaxhighlight lang="html">		'''Success'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #d0f1bc9c; border-width: 3px 3px 3px 3px; border-style: solid; border-color: #369831; border-radius: 5px; line-height: 1.7; color: #101010; font-size: 16px; text-align: justify;">		<div style="background: #d0f1bc9c; border-width: 3px 3px 3px 3px; border-style: solid; border-color: #369831; border-radius: 5px; line-height: 1.7; color: #101010; font-size: 16px; text-align: justify; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;">
	<p><b>Nulla non eros porta finibus sem eu (success)</b></p>		<p><b>Nulla non eros porta finibus sem eu (success)</b></p>
	<p>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		<p>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
Linha 249:		Linha 249:
	</div>		</div>
	</syntaxhighlight>'''Warning'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Warning'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #fcf8e3; border-width: 3px 3px 3px 3px; border-style: solid; border-color: #ff9933; border-radius: 6px; line-height: 1.7; color: #101010; font-size: 16px; text-align: justify;">		<div style="background: #fcf8e3; border-width: 3px 3px 3px 3px; border-style: solid; border-color: #ff9933; border-radius: 6px; line-height: 1.7; color: #101010; font-size: 16px; text-align: justify; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;">
	<p><b>Nulla non eros porta finibus sem eu (warning)</b></p>		<p><b>Nulla non eros porta finibus sem eu (warning)</b></p>
	<p>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		<p>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
Linha 255:		Linha 255:
	</div>		</div>
	</syntaxhighlight>'''Danger'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Danger'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #eed3d78c;border-width: 3px 3px 3px 3px;border-style: solid;border-color: #CD0000; border-radius: 6px; line-height: 1.7; color: #101010; font-size: 16px; text-align: jusfity;">		<div style="background: #eed3d78c; border-width: 3px 3px 3px 3px;border-style: solid;border-color: #CD0000; border-radius: 6px; line-height: 1.7; color: #101010; font-size: 16px; text-align: jusfity; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;">
	<p><b>Nulla non eros porta finibus sem eu (danger)</b></p>		<p><b>Nulla non eros porta finibus sem eu (danger)</b></p>
	<p>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		<p>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
Linha 261:		Linha 261:
	</div>		</div>
	</syntaxhighlight>'''Pass'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Pass'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #d9edf7ad;border-width: 3px 3px 3px 3px;border-style: solid;border-color: #245196; border-radius: 6px; line-height: 1.7; color: #101010; font-size: 16px; text-align: jusfity;">		<div style="background: #d9edf7ad; border-width: 3px 3px 3px 3px; border-style: solid;border-color: #245196; border-radius: 6px; line-height: 1.7; color: #101010; font-size: 16px; text-align: jusfity; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;">
	<p><b>Nulla non eros porta finibus sem eu (pass)</b></p>		<p><b>Nulla non eros porta finibus sem eu (pass)</b></p>
	<p>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		<p>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

← Edição anterior		Edição das 13h15min de 15 de dezembro de 2021
Linha 218:		Linha 218:

	'''Success'''<syntaxhighlight lang="html">		'''Success'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #d6e9c6; color: #101010; font-size: 16px; line-height: 1.7;">		<div style="background: #d6e9c6; color: #101010; font-size: 16px; line-height: 1.7; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa; border-left: 6px solid #369831;">
	<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 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>		</p>
	</div>		</div>
	</syntaxhighlight>'''Danger'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Danger'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #eed3d7; border-left: 6px solid #CD0000; color: #101010; font-size: 16px; line-height: 1.7;">		<div style="background: #eed3d7; border-left: 6px solid #CD0000; color: #101010; font-size: 16px; line-height: 1.7; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;">
	<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 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>		</p>
	</div>		</div>
	</syntaxhighlight>'''Warning'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Warning'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #fcf8e3; border-left: 6px solid #EEAD0E; color: #101010; font-size: 16px; line-height: 1.7;">		<div style="background: #fcf8e3; border-left: 6px solid #EEAD0E; color: #101010; font-size: 16px; line-height: 1.7; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;">
	<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 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>		</p>
	</div>		</div>
	</syntaxhighlight>'''Pass'''<syntaxhighlight lang="html">		</syntaxhighlight>'''Pass'''<syntaxhighlight lang="html">
	<div ~~class="prom-box prom-box-default shadow1"~~ style="background: #bce8f1; border-left: 6px solid #3a87ad; color: #101010; font-size: 16px; line-height: 1.7;">		<div style="background: #bce8f1; border-left: 6px solid #3a87ad; color: #101010; font-size: 16px; line-height: 1.7; padding: 10px 10px; position: relative; margin-bottom: 15px; box-shadow: 0 10px 6px -6px #aaa;">
	<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 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>		</p>