Manipulação e Formatação de Texto
Este módulo explora o controle e a formatação de elementos textuais em páginas web, focando na criação de estruturas semânticas e na apresentação de conteúdo. Veremos como definir títulos, parágrafos e listas, além de entender o papel das tabelas e formulários na interação com o usuário.
Exemplo de Estrutuar HTML para Conteúdo Textual
<html>
<head>
<meta charset="UTF-8">
<title>Exemplo de Formatação de Texto</title>
<link rel="stylesheet" type="text/css" href="estilos.css">
</head>
<body>
<h1>Projeto Exemplo: Criação de Páginas com Formulários</h1>
<h2>Visão Geral do Projeto</h2>
<p>O projeto "Nova Plataforma de Aprendizagem" visa fornecer um ambiente digital robusto para a aquisição de conhecimentos e habilidades, alinhado com a valorização do trabalho e do espírito inovador.</p>
<p>Formulários são interfaces essenciais para a entrada de dados pelo usuário e para a coleta de informações por parte do site. Eles permitem funcionalidades como registro de usuários, login, pesquisas e interações em fóruns. A validação de dados, tradicionalmente realizada com JavaScript, é agora simplificada com recursos nativos do HTML5, melhorando a experiência do usuário.</p>
<p>As páginas de login, registro e cadastro de informações do projeto "Nova Plataforma de Aprendizagem" utilizarão formulários e validação de dados.</p>
<h2>Objetivos do Aprendizado</h2>
<h3>Objetivos Comportamentais</h3>
<!-- Lista ordenada para objetivos -->
<ol>
<li>Cultivar o espírito de dedicação e a mentalidade de artesão.</li>
<li>Desenvolver a consciência sobre a importância de adquirir novas competências.</li>
</ol>
<h3>Objetivos de Conhecimento</h3>
<ol>
<li>Compreender a função dos elementos de formulário.</li>
<li>Dominar a criação de formulários semânticos.</li>
<li>Conhecer as funcionalidades básicas de validação de formulários no HTML5.</li>
</ol>
</body>
</html>
Personalização de Marcadores de Lista
É possível substituir os marcadroes padrão de listas (como pontos ou números) por imagens personalizadas, conferindo um design único aos elementos de lista.
Passos para Personalização:
- Selecione a imagem desejada para usar como marcador. Salve-a em formato PNG, preferencialmente com dimensões de 16x16 pixels para melhor compatibilidade.
- Armazene a imagem na pasta de imagens do seu projeto (por exemplo,
img/). Renomeie o arquivo para um nome descritivo em inglês.
Exemplo de Implementação CSS para Marcadores de Imagem
<html>
<head>
<meta charset="UTF-8">
<title>Marcadores de Lista Personalizados</title>
<style type="text/css">
ul, li {
list-style-image: url(img/marcador_personalizado.png); /* Caminho para a imagem do marcador */
}
</style>
</head>
<body>
<ul> /* Lista não ordenada */
<li>Tempo Ensolarado</li>
<li>Parcialmente Nublado</li>
<li>Nublado</li>
<li>Chuva</li>
</ul>
</body>
</html>