Criação de lista ordenada (<ol>) e não ordenada (<ul>).
Primeiramente, aqui está o exemplo de como criar uma lista ordenada <ol> (ordered list) e não ordenada <ul> (unordered list):
<!DOCTYPE html>
<html>
<head>
<title>Criação de Listas</title>
</head>
<body>
<h1>Listas Ordenadas e Não Ordenadas</h1>
<h2>Listas Ordenadas</h2>
<ol>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Listas Não Ordenadas</h2>
<ul>
<li>Item A</li>
<li>Item B</li>
<li>Item C</li>
</ul>
<h2>Listas com Níveis de Aninhamento</h2>
<ul>
<li>Item 1</li>
<li>Item 2
<ul>
<li>Item 2.1</li>
<li>Item 2.2</li>
</ul>
</li>
<li>Item 3</li>
</ul>
<h2>Listas Ordenadas com Tipos de Numeração</h2>
<ol type="I">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ol>
<h2>Listas Não Ordenadas com Estilos Personalizados</h2>
<ul style="list-style-type: square;">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</body>
</html>Neste exemplo, utilizamos a tag <ol> para criar uma lista ordenada e a tag <ul> para criar uma lista não ordenada. Enfim, dentro dessas tags, utilizamos a tag <li> para definir cada item da lista.
Entretanto, você também pode aninhar listas dentro de outras listas, como demonstrado no exemplo. Isso é útil para criar hierarquias e estruturar informações mais complexas.
Além disso, é possível personalizar a numeração das listas ordenadas usando o atributo type, que aceita valores como "A" (maiúsculas), "a" (minúsculas), "I" (algarismos romanos maiúsculos) e "i" (algarismos romanos minúsculos).
Para as listas não ordenadas, você pode personalizar o estilo de marcadores utilizando o atributo style e o CSS. Então, utilizamos o estilo square para criar marcadores quadrados.
Lembre-se de que esses são apenas exemplos de uso das tags <ol> e <ul>. A criação de listas pode variar de acordo com a necessidade e o design do seu projeto.
Utilização de lista aninhada.
Aqui está um exemplo do conteúdo da aula sobre a utilização de listas aninhadas:
<!DOCTYPE html>
<html>
<head>
<title>Listas Aninhadas</title>
</head>
<body>
<h1>Listas Aninhadas</h1>
<h2>Listas Ordenadas Aninhadas</h2>
<ol>
<li>Item 1</li>
<li>Item 2
<ol>
<li>Subitem 2.1</li>
<li>Subitem 2.2</li>
</ol>
</li>
<li>Item 3
<ol>
<li>Subitem 3.1</li>
<li>Subitem 3.2
<ol>
<li>Subitem 3.2.1</li>
<li>Subitem 3.2.2</li>
</ol>
</li>
</ol>
</li>
</ol>
<h2>Listas Não Ordenadas Aninhadas</h2>
<ul>
<li>Item A</li>
<li>Item B
<ul>
<li>Subitem B.1</li>
<li>Subitem B.2</li>
</ul>
</li>
<li>Item C
<ul>
<li>Subitem C.1</li>
<li>Subitem C.2
<ul>
<li>Subitem C.2.1</li>
<li>Subitem C.2.2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>Neste exemplo, utilizamos listas aninhadas tanto para listas ordenadas <ol> quanto para listas não ordenadas <ul>. As listas aninhadas permitem criar hierarquias e estruturar informações de forma organizada.
No caso das listas ordenadas aninhadas, utilizamos a tag <ol> para criar a lista principal e as sublistas dentro dos itens com a tag <li>. Enfim, isso nos permite ter níveis de aninhamento, como exemplificado no código.
Desse modo, para as listas não ordenadas aninhadas, utilizamos a tag <ul> para criar a lista principal e as sublistas dentro dos itens com a tag <li>. Essas sublistas podem ser aninhadas conforme necessário.
As listas aninhadas são úteis para estruturar informações com várias camadas de subitens, como tópicos e subcategorias. Elas ajudam a organizar e apresentar o conteúdo de maneira clara e hierárquica.
Em suma, lembre-se de que esse é apenas um exemplo de como utilizar listas aninhadas. Enfim, a complexidade e a quantidade de aninhamentos podem variar dependendo da estrutura e das necessidades do seu projeto.
Construção de tabelas com as tags <table>, <tr> e <td>.
Aqui está um exemplo do conteúdo da aula sobre a construção de tabelas utilizando as tags <table>, <tr>, e <td>:
<!DOCTYPE html>
<html>
<head>
<title>Construção de Tabelas</title>
</head>
<body>
<h1>Construção de Tabelas</h1>
<table>
<caption>Título da Tabela</caption>
<thead>
<tr>
<th>Coluna 1</th>
<th>Coluna 2</th>
<th>Coluna 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dado 1</td>
<td>Dado 2</td>
<td>Dado 3</td>
</tr>
<tr>
<td>Dado 4</td>
<td>Dado 5</td>
<td>Dado 6</td>
</tr>
</tbody>
</table>
</body>
</html>Enfim, utilizamos a tag <table> para criar a tabela. Dentro da tabela, temos a tag <caption>, que permite adicionar um título descritivo à tabela.
A estrutura da tabela é dividida em três seções principais: <thead>, <tbody> e <tfoot>. O <thead> contém as informações do cabeçalho da tabela, especificamente com a tag <tr> (linha da tabela) e <th> (célula de cabeçalho). O <tbody> contém as informações do corpo da tabela, também com a tag <tr> e <td> (célula de dados). O <tfoot> é opcional e contém informações do rodapé da tabela, seguindo a mesma estrutura de <tr> e <td>.
Dentro das tags <tr>, temos as células da tabela representadas pelas tags <td> para dados regulares e <th> para cabeçalhos.
Por último, lembre-se de que esse é apenas um exemplo básico de como construir uma tabela. Ou seja, você pode adicionar mais colunas, linhas ou personalizar a aparência utilizando CSS para atender às necessidades do seu projeto.
