Ir para o conteúdo PROPLAN Ir para o menu PROPLAN Ir para a busca no site PROPLAN Ir para o rodapé PROPLAN
Ir para o conteúdo
GovBR Navegar para direita
  • International
  • Acessibilidade
  • Sítios da UFSM
  • Área restrita

Aviso de Conectividade Saber Mais

Início do conteúdo

Conversor de HTML

CONVERSOR DE HTML body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; color: #333; position: relative; background-color: #f0f4f8; } body::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://www.ufsm.br/app/uploads/sites/344/2024/11/AN1_8732-2.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -1; opacity: 0.9; } .container { max-width: 1050px; margin: 50px auto; background-color: rgba(64, 63, 59, 0.5); padding: 30px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; } .container.with-sidebar { margin-right: 350px; /* Espaço para a barra lateral */ } .header { text-align: center; margin-bottom: 35px; } .logo { width: 300px; height: 200px; object-fit: contain; margin-bottom: 15px; } h1 { text-align: center; font-size: 40px; font-weight: bold; text-align: center; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); color: #c99436; } h2 { text-align: center; font-size: 25px; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.2); font-family: 'Arial', sans-serif; padding: 10px; color: #0168A6; } h3 { text-align: center; font-size: 15px; font-weight: bold; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); padding: 15px; color: #FAFAFA; } h4 { text-align: center; color: #000; } .editor { width: 100%; height: 350px; padding: 10px; margin-bottom: 20px; font-size: 14px; border: 1px solid #ddd; border-radius: 12px; resize: vertical; background-color: #f5f7fa; text-align: justify; outline: none; overflow: auto; word-wrap: break-word; } .toolbar-container { display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 20px; gap: 3px; } .toolbar, .alignment-bar, .indent-bar, .color-bar { display: flex; gap: 5px; } .toolbar button, .alignment-bar button, .indent-bar button, .color-bar button, .manual-button { padding: 10px 15px; font-size: 10px; border: 1px solid #000; border-radius: 4px; cursor: pointer; background-color: #E9F9FF; color: black; transition: background-color 0.3s ease; height: 30px; } .toolbar button:hover, .alignment-bar button:hover, .indent-bar button:hover, .color-bar button:hover, .manual-button:hover { background-color: #3498db; } .separator { margin: 0 10px; color: #ccc; } .output-container { margin-top: 20px; } .code-output { border: 1px solid #ddd; padding: 12px;border-radius: 10px; background-color: #fafafa; min-height: 200px; font-family: monospace; overflow-y: auto; white-space: pre-wrap; height: 400px; } .button-container { text-align: center; margin-top: 0px; } .button-container button { padding: 15px 20px; font-size: 16px; border: none; border-radius: 10px; cursor: pointer; background-color: #E98C42; color: white; transition: background-color 0.3s ease; } .button-container button:hover { background-color: #218838; } .clear-button { background-color: #dc3545; } .clear-button:hover { background-color: #c82333; } .ementa-button { background-color: #EE8630; color: black; font-weight: bold; } .ementa-button:hover { background-color: #d77a29; } .separator { margin: 0 5px; color: #ccc; } .centered-image { display: flex; justify-content: center; align-items: center; margin-top: 10px; text-align: center; } .centered-image img { width: 1.71cm; height: 1.83cm; } .header-text { text-align: center; font-size: 14px; color: #3938FF; margin-top: 10px; } .subheader-text { text-align: center; font-size: 12px; color: #00B0E0; margin-top: 5px; } .normal-text { color: black; } .centered-cursor { text-align: center; color: black; } .color-bar { display: flex; justify-content: center; gap: 10px; margin-bottom: 10px; } /* Estilos para o Manual no Sidebar */ .sidebar { position: fixed; top: 0; right: -350px; /* Inicialmente escondido */ width: 330px; height: 100%; background-color: rgba(255, 255, 255, 0.95); overflow-y: auto; z-index: 1000; padding: 20px; box-shadow: -5px 0 15px rgba(0,0,0,0.1); transition: right 0.3s ease; } .sidebar.active { right: 0; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; border-bottom: 2px solid #0168A6; padding-bottom: 10px; } .sidebar-title { color: #0168A6; font-size: 20px; margin: 0; } .close-sidebar { color: #aaa; font-size: 24px; font-weight: bold; cursor: pointer; } .close-sidebar:hover { color: #333; } #manualContent { line-height: 1.6; } #manualContent h1 { color: #0168A6; text-align: left; font-size: 20px; margin-top: 20px; margin-bottom: 15px; text-shadow: none; } #manualContent h2 { color: #E98C42; text-align: left; font-size: 18px; margin-top: 15px; text-shadow: none; } #manualContent h3 { color: #333; text-align: left; font-size: 16px; margin-top: 10px; text-shadow: none; } #manualContent p, #manualContent li { color: #333; margin-bottom: 8px; text-align: left; font-size: 14px; } #manualContent ol, #manualContent ul { padding-left: 20px; margin-top: 5px; margin-bottom: 10px; } /* Botão de manual com destaque */ .manual-button { background-color: #0168A6; color: white; font-weight: bold; height: auto; } .manual-button:hover { background-color: #014e7d; } /* Destaque para os passos */ .step-highlight { background-color: #fffacd; padding: 5px; border-radius: 3px; border-left: 3px solid #E98C42; }

HYPERTEXT MARKUP LANGUAGE CONVERSOR

FORMATAÇÃO

|
|
|
|
|
O código fonte será exibido aqui.

DESENVOLVIMENTO - COORDENADORIA DE PLANEJAMENTO ADMINISTRATIVO

let indentLevel = 0; function applyAlignment(alignment) { const editor = document.getElementById('inputText'); document.execCommand('justify' + alignment); } function applyTag(tag) { const editor = document.getElementById('inputText'); if (tag === 'link') { const url = prompt("Digite a URL:"); if (url && url.trim() !== "") { const selection = window.getSelection(); const range = selection.getRangeAt(0); const selectedText = selection.toString(); // Usando atributos inline mais fortes para o Elementor const linkHTML = `${selectedText}`; range.deleteContents(); range.insertNode(document.createRange().createContextualFragment(linkHTML)); } } else { document.execCommand(tag); } } function applyIndent(direction) { const editor = document.getElementById('inputText'); if (direction === 'left') { document.execCommand('outdent'); indentLevel--; } else { document.execCommand('indent'); indentLevel++; } } function applyEmenta() { const editor = document.getElementById('inputText'); const selectedText = window.getSelection().toString(); if (selectedText.trim() === "") { return; } const range = window.getSelection().getRangeAt(0); const ementaHTML = `${selectedText}`; range.deleteContents(); range.insertNode(document.createRange().createContextualFragment(ementaHTML)); } function insertCabecalho() { const editor = document.getElementById('inputText'); const imgTag = '
Brasão República Federativa do Brasil
'; const texto1 = '

MINISTÉRIO DA EDUCAÇÃO

'; const texto2 = '

UNIVERSIDADE FEDERAL DE SANTA MARIA

'; const texto3 = '
'; const texto4 = '
'; document.execCommand('insertHTML', false, imgTag + texto1 + texto2 + texto3 + texto4); } function formatHTML(html) { let formatted = ''; let reg = /(>)(<)(\/*)/g; let xml = html.replace(reg, '$1\r\n$2$3'); xml.split('\r\n').forEach(function(node) { formatted += node + '\r\n'; }); return formatted.trim(); } function convertToHTML() { const editor = document.getElementById('inputText'); const output = document.getElementById('codeOutput'); let htmlContent = editor.innerHTML; // Formatar o HTML antes de exibir let formattedHTML = formatHTML(htmlContent); // Certificar-se de que todos os links tenham as propriedades preservadas do Elementor formattedHTML = formattedHTML.replace(/]*)>/g, ''); output.textContent = formattedHTML; } function clearText() { const editor = document.getElementById('inputText'); editor.innerHTML = ''; } function copyHTML() { const output = document.getElementById('codeOutput'); navigator.clipboard.writeText(output.textContent).then(() => { alert("HTML copiado para a área de transferência!"); }); } function applyColor(color) { const editor = document.getElementById('inputText'); document.execCommand('foreColor', false, color); } function insertRodape() { const editor = document.getElementById('inputText'); const url = prompt("Digite o link do Portal de Documentos:"); let rodapeTexto; if (url && url.trim() !== "") { // Usando atributos mais fortes para o Elementor rodapeTexto = `

Este texto não substitui o documento original, publicado no Portal de Documentos. Disponível em ${url}

`; } else { rodapeTexto = `

Este texto não substitui o documento original, publicado no Portal de Documentos. Disponível em: [Link não informado]

`; } document.execCommand('insertHTML', false, rodapeTexto); } // Preservar formatação ao colar document.getElementById('inputText').addEventListener('paste', function(e) { // Evita o comportamento padrão que poderia limpar a formatação e.preventDefault(); // Obtém o texto colado com formatação const text = e.clipboardData.getData('text/html') || e.clipboardData.getData('text'); // Insere o conteúdo preservando a formatação document.execCommand('insertHTML', false, text); }); // Função para alternar a visibilidade do manual function toggleManual() { const sidebar = document.getElementById('manualSidebar'); const mainContainer = document.getElementById('mainContainer'); sidebar.classList.toggle('active'); // Ajusta o espaço principal quando o sidebar está visível if (sidebar.classList.contains('active')) { mainContainer.classList.add('with-sidebar'); } else { mainContainer.classList.remove('with-sidebar'); } }
Conteúdo acessível em Libras usando o VLibras Widget com opções dos Avatares Ícaro, Hosana ou Guga. Conteúdo acessível em Libras usando o VLibras Widget com opções dos Avatares Ícaro, Hosana ou Guga.