O que há de Novo?
Fórum Outer Space - O maior fórum de games do Brasil

Registre uma conta gratuita hoje para se tornar um membro! Uma vez conectado, você poderá participar neste site adicionando seus próprios tópicos e postagens, além de se conectar com outros membros por meio de sua própria caixa de entrada privada!

  • Anunciando os planos GOLD no Fórum Outer Space
    Visitante, agora você pode ajudar o Fórum Outer Space e receber alguns recursos exclusivos, incluindo navegação sem anúncios e dois temas exclusivos. Veja os detalhes aqui.


Preciso desse código aqui rápido pra dar uma estudada.

Bud Spencer Ghost

Mil pontos, LOL!
Mensagens
6.851
Reações
14.401
Pontos
1.013
Povo, estou estudando html e algum developer poderia passar os códigos disso?
Para eu fazer uma página HTML que possua:

  • Título
  • Marcação meta que apresenta o nome do autor da página
  • Um texto título
  • Um texto subtítulo
  • Um texto pré-formatado
  • Uma linha horizontal separando o título e subtítulo
  • Um link para a página https://www.google.com.br/
  • Uma imagem
  • Uma lista numerada
  • 1 tabela
Um código em html contendo tudo isso pra eu dar uma olhada por favor.
 
Ultima Edição:

trevz

Mil pontos, LOL!
Mensagens
13.464
Reações
26.078
Pontos
1.109
Quer estudar e tá pedindo o código pronto?

:khuebr


Se vc pretende seguir carreira na área e não consegue fazer nem o básico do básico sozinho recomendo procurar outra coisa pra fazer.
 


Arkarker

Ei mãe, 500 pontos!
Mensagens
6.871
Reações
1.342
Pontos
954
Ahlá dos dev de console criando o "código otimizado" mágico que faz o console rodar o jogo tudo no médio com resolução mais baixa e a 30 FPS.
 

Bud Spencer Ghost

Mil pontos, LOL!
Mensagens
6.851
Reações
14.401
Pontos
1.013
Valeu povo. Enquanto estava a OS aqui inacessível, eu descobri a metade dos códigos.
Quer estudar e tá pedindo o código pronto?

:khuebr


Se vc pretende seguir carreira na área e não consegue fazer nem o básico do básico sozinho recomendo procurar outra coisa pra fazer.

Agora estou pesquisando aqui como fazer o código do subtítulo. Valeu pessoal!

Edit:
Fiz o código. Tá certo pessoal? Vejam:


HTML:
<html>

      <head>

      <title> Página de teste </title>

      <meta name="Bud Spencer" content="Página básica">

      </head>

<body>

<title>         

            <div style="text-align: center;">

                Título simples</div>



    </title>



<h2 style="text-align: center;">Aqui é um texto título</h2>

<h3 style="text-align: center;">Aqui é um texto subtítulo</h3>

<p style="text-align: justify;">Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>



<p style="text-align: justify;">Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>



<p style="text-align: justify;">Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>



<p style="text-align: justify;">Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>



<p style="text-align: justify;">Ea duo atqui incorrupte, sed rebum regione suscipit ex, mea ex dicant percipit referrentur. Dicat luptatum constituam vix ut. His vide platonem omittantur id, vel quis vocent an. Ad pro inani zril omnesque. Mollis forensibus sea an, vim habeo adipisci contentiones ad, tale autem graecis ne sit.</p>

<hr />

<p><img src="https://imgadult.com/upload/big/2019/12/25/5e03d9027363b.jpg" style="width: auto;"></p>



<p><a href="https://www.google.com.br">&nbsp;Link para google (clique aqui)</a></p>

<ol style="color: rgb(51, 51, 51); font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255); padding: 0px; margin: 0px 0px 10px 2.5em;">

    <li style="line-height: 20px;">

        N&uacute;mero 1</li>

    <li style="line-height: 20px;">

        N&uacute;mero 2</li>

    <li style="line-height: 20px;">

        N&uacute;mero 3</li>

</ol>

<table style="height: 103px;" width="158">

    <tbody>

        <tr>

            <td style="width: 45px;">

                &nbsp;Nome</td>

            <td style="width: 45px;">

                &nbsp;idade</td>

            <td style="width: 46px;">

                &nbsp;Profiss&atilde;o</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Leandro</td>

            <td style="width: 45px;">

                &nbsp;28</td>

            <td style="width: 46px;">

                &nbsp;Advogado</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Paulo</td>

            <td style="width: 45px;">

                &nbsp;34</td>

            <td style="width: 46px;">

                &nbsp;M&eacute;dico</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Roberto</td>

            <td style="width: 45px;">

                &nbsp;60</td>

            <td style="width: 46px;">

                &nbsp;Advogado</td>

        </tr>

    </tbody>

</table>

</body>

</html>
 
Ultima Edição:

navossoc

Supra-sumo
Mensagens
1.319
Reações
788
Pontos
174
Tem uma AI que disseram que vai substituir os programadores em pouco tempo, pede isso ai pra ela que ela deve te entregar hahaha

[]'s
 

kageyame

Ei mãe, 500 pontos!
Mensagens
3.113
Reações
3.734
Pontos
979
Valeu povo. Enquanto estava a OS aqui inacessível, eu descobri a metade dos códigos.


Agora estou pesquisando aqui como fazer o código do subtítulo. Valeu pessoal!

Edit:
Fiz o código. Tá certo pessoal? Vejam:


HTML:
<html>

      <head>

      <title> Página de teste </title>

      <meta name="Bud Spencer" content="Página básica">

      </head>

<body>

<title>        

            <div style="text-align: center;">

                Título simples</div>



    </title>



<h2 style="text-align: center;">Aqui é um texto título</h2>

<h3 style="text-align: center;">Aqui é um texto subtítulo</h3>

<p style="text-align: justify;">Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>



<p style="text-align: justify;">Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>



<p style="text-align: justify;">Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>



<p style="text-align: justify;">Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>



<p style="text-align: justify;">Ea duo atqui incorrupte, sed rebum regione suscipit ex, mea ex dicant percipit referrentur. Dicat luptatum constituam vix ut. His vide platonem omittantur id, vel quis vocent an. Ad pro inani zril omnesque. Mollis forensibus sea an, vim habeo adipisci contentiones ad, tale autem graecis ne sit.</p>

<hr />

<p><img src="https://imgadult.com/upload/big/2019/12/25/5e03d9027363b.jpg" style="width: auto;"></p>



<p><a href="https://www.google.com.br">&nbsp;Link para google (clique aqui)</a></p>

<ol style="color: rgb(51, 51, 51); font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255); padding: 0px; margin: 0px 0px 10px 2.5em;">

    <li style="line-height: 20px;">

        N&uacute;mero 1</li>

    <li style="line-height: 20px;">

        N&uacute;mero 2</li>

    <li style="line-height: 20px;">

        N&uacute;mero 3</li>

</ol>

<table style="height: 103px;" width="158">

    <tbody>

        <tr>

            <td style="width: 45px;">

                &nbsp;Nome</td>

            <td style="width: 45px;">

                &nbsp;idade</td>

            <td style="width: 46px;">

                &nbsp;Profiss&atilde;o</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Leandro</td>

            <td style="width: 45px;">

                &nbsp;28</td>

            <td style="width: 46px;">

                &nbsp;Advogado</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Paulo</td>

            <td style="width: 45px;">

                &nbsp;34</td>

            <td style="width: 46px;">

                &nbsp;M&eacute;dico</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Roberto</td>

            <td style="width: 45px;">

                &nbsp;60</td>

            <td style="width: 46px;">

                &nbsp;Advogado</td>

        </tr>

    </tbody>

</table>

</body>

</html>


Algumas correções:

* a tag meta tem que estar antes da tag title (ideal que ela seja a primeira tag do head), e não está formatada corretamente, o correto seria:
HTML:
<head>
   <meta name="author" content="Bud Spencer">
   <meta name="description" content="Página básica">
...

* o titulo dentro do corpo do html (um que está como <title><div>...) está incorreto, o title sempre vem dentro da tag head, e somente uma por página, ela é usada para no cabecalho do navegador, para indexação da pagina por mecanismos de busca entre outros:

143811

o Titulo dentro da pagina como vc quer você faz usando a tag H1.

Na tabela, a primeira linha (titulo) tinha que usar o <thead> e os itens com TH para deixar visualmente diferente (thead diz mas sobre a estrutura da tabela mesmo, e TH diz como mostrar essa informação, isso é importante porque sistemas de indexação e leitores de tela usam essa informação).


se vc está estudando html, eu recomendo usar esta pagina ao invéz da w3schools (que tem alguns erros e informações desatualizadas):

 

Bud Spencer Ghost

Mil pontos, LOL!
Mensagens
6.851
Reações
14.401
Pontos
1.013
Algumas correções:

* a tag meta tem que estar antes da tag title (ideal que ela seja a primeira tag do head), e não está formatada corretamente, o correto seria:
HTML:
<head>
   <meta name="author" content="Bud Spencer">
   <meta name="description" content="Página básica">
...

* o titulo dentro do corpo do html (um que está como <title><div>...) está incorreto, o title sempre vem dentro da tag head, e somente uma por página, ela é usada para no cabecalho do navegador, para indexação da pagina por mecanismos de busca entre outros:

Visualizar anexo 143811

o Titulo dentro da pagina como vc quer você faz usando a tag H1.

Na tabela, a primeira linha (titulo) tinha que usar o <thead> e os itens com TH para deixar visualmente diferente (thead diz mas sobre a estrutura da tabela mesmo, e TH diz como mostrar essa informação, isso é importante porque sistemas de indexação e leitores de tela usam essa informação).


se vc está estudando html, eu recomendo usar esta pagina ao invéz da w3schools (que tem alguns erros e informações desatualizadas):

Valeu cara. Vou seguir suas orientações.
 

mendingo_26

Mil pontos, LOL!
Mensagens
23.518
Reações
91.613
Pontos
1.254
Valeu povo. Enquanto estava a OS aqui inacessível, eu descobri a metade dos códigos.


Agora estou pesquisando aqui como fazer o código do subtítulo. Valeu pessoal!

Edit:
Fiz o código. Tá certo pessoal? Vejam:


HTML:
<html>

      <head>

      <title> Página de teste </title>

      <meta name="Bud Spencer" content="Página básica">

      </head>

<body>

<title>       

            <div style="text-align: center;">

                Título simples</div>



    </title>



<h2 style="text-align: center;">Aqui é um texto título</h2>

<h3 style="text-align: center;">Aqui é um texto subtítulo</h3>

<p style="text-align: justify;">Lorem ipsum dolor sit amet, nonumes voluptatum mel ea, cu case ceteros cum. Novum commodo malorum vix ut. Dolores consequuntur in ius, sale electram dissentiunt quo te. Cu duo omnes invidunt, eos eu mucius fabellas. Stet facilis ius te, quando voluptatibus eos in. Ad vix mundi alterum, integre urbanitas intellegam vix in.</p>



<p style="text-align: justify;">Eum facete intellegat ei, ut mazim melius usu. Has elit simul primis ne, regione minimum id cum. Sea deleniti dissentiet ea. Illud mollis moderatius ut per, at qui ubique populo. Eum ad cibo legimus, vim ei quidam fastidii.</p>



<p style="text-align: justify;">Quo debet vivendo ex. Qui ut admodum senserit partiendo. Id adipiscing disputando eam, sea id magna pertinax concludaturque. Ex ignota epicurei quo, his ex doctus delenit fabellas, erat timeam cotidieque sit in. Vel eu soleat voluptatibus, cum cu exerci mediocritatem. Malis legere at per, has brute putant animal et, in consul utamur usu.</p>



<p style="text-align: justify;">Te has amet modo perfecto, te eum mucius conclusionemque, mel te erat deterruisset. Duo ceteros phaedrum id, ornatus postulant in sea. His at autem inani volutpat. Tollit possit in pri, platonem persecuti ad vix, vel nisl albucius gloriatur no.</p>



<p style="text-align: justify;">Ea duo atqui incorrupte, sed rebum regione suscipit ex, mea ex dicant percipit referrentur. Dicat luptatum constituam vix ut. His vide platonem omittantur id, vel quis vocent an. Ad pro inani zril omnesque. Mollis forensibus sea an, vim habeo adipisci contentiones ad, tale autem graecis ne sit.</p>

<hr />

<p><img src="https://imgadult.com/upload/big/2019/12/25/5e03d9027363b.jpg" style="width: auto;"></p>



<p><a href="https://www.google.com.br">&nbsp;Link para google (clique aqui)</a></p>

<ol style="color: rgb(51, 51, 51); font-family: &quot;Helvetica Neue&quot;, Helvetica, Arial, sans-serif; font-size: 12px; background-color: rgb(255, 255, 255); padding: 0px; margin: 0px 0px 10px 2.5em;">

    <li style="line-height: 20px;">

        N&uacute;mero 1</li>

    <li style="line-height: 20px;">

        N&uacute;mero 2</li>

    <li style="line-height: 20px;">

        N&uacute;mero 3</li>

</ol>

<table style="height: 103px;" width="158">

    <tbody>

        <tr>

            <td style="width: 45px;">

                &nbsp;Nome</td>

            <td style="width: 45px;">

                &nbsp;idade</td>

            <td style="width: 46px;">

                &nbsp;Profiss&atilde;o</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Leandro</td>

            <td style="width: 45px;">

                &nbsp;28</td>

            <td style="width: 46px;">

                &nbsp;Advogado</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Paulo</td>

            <td style="width: 45px;">

                &nbsp;34</td>

            <td style="width: 46px;">

                &nbsp;M&eacute;dico</td>

        </tr>

        <tr>

            <td style="width: 45px;">

                &nbsp;Roberto</td>

            <td style="width: 45px;">

                &nbsp;60</td>

            <td style="width: 46px;">

                &nbsp;Advogado</td>

        </tr>

    </tbody>

</table>

</body>

</html>

Recomendo aprender o HTML + CSS porque mais na frente você vai ter dor de cabeça principalmente nas páginas responsivas e interativas com esse método de utilizar a estilização direto no HTML



 

Bud Spencer Ghost

Mil pontos, LOL!
Mensagens
6.851
Reações
14.401
Pontos
1.013
Recomendo aprender o HTML + CSS porque mais na frente você vai ter dor de cabeça principalmente nas páginas responsivas e interativas com esse método de utilizar a estilização direto no HTML




Chapa estou lendo os textos que meu curso pede e consegui fazer isso:

1. Faça uma página HTML que possua:



a) Plano de fundo da página azul

b) 1 título na cor vermelha e em itálico

c) 1 subtítulo na cor azul e sublinhado

d) Espaçamento entre as letras 2 milímetros

e) Espaçamento entre as palavras de 0.5 centímetro

f) Plano de fundo do título definido com uma imagem que não se repete

g) Um parágrafo que possua alinhamento à direita e espaçamento entre as linhas de 1 centímetro

h) Uma imagem com uma borda de espessura grossa e na cor verde

Parei na letra F. Isso usando o Google. Não consigo colocar a imagem centralizada no h1(atrás do h1). Tenho até o fim de semana pra entregar isso. Não sei como fazer. Código abaixo:

<!DOCTYPE HTML>

</div>
<html>
<head>
<style>
body {
background-color: #0066ff;
}
h1 .center{
background-image: url("https://www.amigododesigner.com.br/wp-content/uploads/2018/06/post-7-6-Bancos-de-imagens-grátis-e-sem-direitos-autorais-na-web-01.png");
background-repeat: no-repeat;
}

p {
background-color: #0066ff);
}
</style>

<meta name="author" content="Bud Spencer">
<meta name="description" content="Página básica 2">
<meta charset="utf-8">
<title> Atividade da 4ª Semana </title>
</head>
<body>
<body bgcolor="blue">
<div style="word-spacing: 0.5cm;">
<div style="letter-spacing: 2mm;">

<title>
<thead>
<div style="text-align: center;">
Primeira Página Criada</div>
</thead>

</title>
<img src="https://www.amigododesigner.com.br/wp-content/uploads/2018/06/post-7-6-Bancos-de-imagens-grátis-e-sem-direitos-autorais-na-web-01.png"
alt="imagem de amostra"
width="400"
height="341"
title="uma mulher sentado em frente a um computador">
<h1 style="text-align: center;"><span style="color:#FF0000">Atividade 03</span></h1>

<hr />
<span style="color:#00FFFF"><u><h2>Aula 3: 05 a 11 de Outubro - Atividade concluída</h2></u></span></h>
<h3><b>Discente:</b> Bud Spencer Santos Silva</h3>
<pre>Tarefa 4 - Exemplo de texto pré-formatado!</pre>


<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.ifpb.edu.br/imagens/logotipos/ifpb-1" alt="IFPB" width="352" height="427" /></p>
<p style="text-align: center;"><a href="https://www.ifpb.edu.br/"> Clique aqui e acesse a p&aacute;gina</a> <!--fazendo um link comum --> <br /><br /></p>
<br><br></p>
<p> <h2><font color="black">Lista de Aulas já realizadas </font></h2></p>
<ol>
<li>Aula 01</li>
<li>Aula 02</li>
<li>Aula 03</li>
<li><font color="blue">Aula 04 - vai iniciar em 12 de outubro de 2020</font></li>

</ol>
<p><h2>Lista com a cidade e nota dos alunos</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">

<tbody>
<tr>
<td style="width: 45px;">
&nbsp;Nome</td>
<td style="width: 45px;">
&nbsp;Cidade</td>
<td style="width: 46px;">
&nbsp;Nota</td>
</tr>
<tr>
<td style="width: 45px;">
&nbsp;Leandro</td>
<td style="width: 45px;">
&nbsp;Salvador</td>
<td style="width: 46px;">
&nbsp;7,0/10,0</td>
</tr>
<tr>
<td style="width: 45px;">
&nbsp;Paulo</td>
<td style="width: 45px;">
&nbsp;Itu</td>
<td style="width: 46px;">
&nbsp;8,5/10,0</td>
</tr>
<tr>
<td style="width: 45px;">
&nbsp;Roberto</td>
<td style="width: 45px;">
&nbsp;Catu</td>
<td style="width: 46px;">
&nbsp;9,0/10,0</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

</html>
 
Ultima Edição:

mendingo_26

Mil pontos, LOL!
Mensagens
23.518
Reações
91.613
Pontos
1.254
Chapa estou lendo os textos que meu curso pede e consegui fazer isso:

1. Faça uma página HTML que possua:



a) Plano de fundo da página azul

b) 1 título na cor vermelha e em itálico

c) 1 subtítulo na cor azul e sublinhado

d) Espaçamento entre as letras 2 milímetros

e) Espaçamento entre as palavras de 0.5 centímetro

f) Plano de fundo do título definido com uma imagem que não se repete

g) Um parágrafo que possua alinhamento à direita e espaçamento entre as linhas de 1 centímetro

h) Uma imagem com uma borda de espessura grossa e na cor verde

Parei na letra F. Isso usando o Google. Não consigo colocar a imagem centralizada no h1(atrás do h1). Tenho até o fim de semana pra entregar isso. Não sei como fazer. Código abaixo:

Se tiver dúvidas de visualização do código, dá uma olhada no código pronto do codepen



<!DOCTYPE HTML>

</div>
<html>
<head>
<style>
body {
background-color: #0066ff;
}
h1 .center{
background-image: url("https://www.amigododesigner.com.br/wp-content/uploads/2018/06/post-7-6-Bancos-de-imagens-grátis-e-sem-direitos-autorais-na-web-01.png");
background-repeat: no-repeat;
}

p {
background-color: #0066ff);
}
</style>

<meta name="author" content="Bud Spencer">
<meta name="description" content="Página básica 2">
<meta charset="utf-8">
<title> Atividade da 4ª Semana </title>
</head>
<body>
<body bgcolor="blue">
<div style="word-spacing: 0.5cm;">
<div style="letter-spacing: 2mm;">

<title>
<thead>
<div style="text-align: center;">
Primeira Página Criada</div>
</thead>

</title>
<img src="https://www.amigododesigner.com.br/wp-content/uploads/2018/06/post-7-6-Bancos-de-imagens-grátis-e-sem-direitos-autorais-na-web-01.png"
alt="imagem de amostra"
width="400"
height="341"
title="uma mulher sentado em frente a um computador">
<h1 style="text-align: center;"><span style="color:#FF0000">Atividade 03</span></h1>

<hr />
<span style="color:#00FFFF"><u><h2>Aula 3: 05 a 11 de Outubro - Atividade concluída</h2></u></span></h>
<h3><b>Discente:</b> Bud Spencer Santos Silva</h3>
<pre>Tarefa 4 - Exemplo de texto pré-formatado!</pre>


<p><img style="display: block; margin-left: auto; margin-right: auto;" src="https://www.ifpb.edu.br/imagens/logotipos/ifpb-1" alt="IFPB" width="352" height="427" /></p>
<p style="text-align: center;"><a href="https://www.ifpb.edu.br/"> Clique aqui e acesse a p&aacute;gina</a> <!--fazendo um link comum --> <br /><br /></p>
<br><br></p>
<p> <h2><font color="black">Lista de Aulas já realizadas </font></h2></p>
<ol>
<li>Aula 01</li>
<li>Aula 02</li>
<li>Aula 03</li>
<li><font color="blue">Aula 04 - vai iniciar em 12 de outubro de 2020</font></li>

</ol>
<p><h2>Lista com a cidade e nota dos alunos</h2>
<table border="1" cellpadding="1" cellspacing="1" style="width:500px">

<tbody>
<tr>
<td style="width: 45px;">
&nbsp;Nome</td>
<td style="width: 45px;">
&nbsp;Cidade</td>
<td style="width: 46px;">
&nbsp;Nota</td>
</tr>
<tr>
<td style="width: 45px;">
&nbsp;Leandro</td>
<td style="width: 45px;">
&nbsp;Salvador</td>
<td style="width: 46px;">
&nbsp;7,0/10,0</td>
</tr>
<tr>
<td style="width: 45px;">
&nbsp;Paulo</td>
<td style="width: 45px;">
&nbsp;Itu</td>
<td style="width: 46px;">
&nbsp;8,5/10,0</td>
</tr>
<tr>
<td style="width: 45px;">
&nbsp;Roberto</td>
<td style="width: 45px;">
&nbsp;Catu</td>
<td style="width: 46px;">
&nbsp;9,0/10,0</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>

</html>


Refiz a sua página manolito e como disse em uns posts acima, é OBRIGATÓRIO você aprender CSS para que a página não fique uma bagunça e depois você não quebre a cabeça com a estilização da mesma, como por exemplo o fundo fixo da página:

Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Atividade da 4ª Semana</title>
    <link href="index.css" rel="stylesheet">
</head>
<body>

<div id="centralizar_tudo">

    <img id="imagem_cabecalho" src="https://www.amigododesigner.com.br/wp-content/uploads/2018/06/post-7-6-Bancos-de-imagens-grátis-e-sem-direitos-autorais-na-web-01.png">

    <h1 id="titulo_H1">Atividade 03</h1>

    <hr> <!-- linha horizontal na página -->

    <h2 id="titulo_H2">Aula 3: 05 a 11 de Outubro - Atividade Concluída</h2>

    <h3><b>Discente:</b> Bud Spener Santos Silva</h3>
    <pre>Tarefa 4 - Exemplo de texto pré-definido</pre>

    <br> <!-- Quebra de linha -->

    <img id="logo_IFPB" src="https://www.ifpb.edu.br/imagens/logotipos/ifpb-1">

    <br>
    <br>

    <a href="https://www.ifpb.edu.br/">Clique aqui e acesse a página</a>

    <br>

    <h2>Lista de aulas realizadas</h2>

    <ul>
        <li>Aula 01</li>
        <li>Aula 02</li>
        <li>Aula 03</li>
        <li id="texto_azul">Aula 04 - Vai iniciar em 12 de outubro de 2020</li>
    </ul>

    <h2>Lista com a cidade e nota dos alunos</h2>

    <table>

        <thead> <!-- Cabeçalho da tabela -->
            <tr>
                <td>Nome</td>
                <td>Cidade</td>
                <td>Nota</td>
            </tr>

            <tbody> <!-- Agrupa o corpo da tabela -->
            <tr>
                <td>Leandro</td>
                <td>Salvador</td>
                <td>7.0 / 10.0</td>
            </tr>
            <tr>
                <td>Paulo</td>
                <td>Itu</td>
                <td>8.5 / 10.0</td>
            </tr>
            <tr>
                <td>Roberto</td>
                <td>Catu</td>
                <td>9.0 / 10.0</td>
            </tr>
            </tbody> <!-- Fim o corpo da tabela -->

        </thead> <!-- Fim do cabeçalho da tabela -->

    </table>
</div>
</body>
</html>

Código:
/* Isso é um arquivo CSS que fará a personalização da sua página */

/* Colocando imagem de fundo no corpo da página */
body{
    background-image: url("https://i.ibb.co/NTqFz2R/image.png");
    background-size: cover; /* Redmensiona a imagem para cobrir toda a página */
    background-position: center; /* centraliza a imagem */
    background-attachment: fixed; /* Aqui fixa a imagem no fundo ao rolar a página */
}

/* Centralizar a imagem do cabeçalho da página */
#imagem_cabecalho{
    display: block; /* imagem fixada na página */
    margin-top: -8px;
    margin-left: auto;
    margin-right: auto;
}

/* Centralizar na página textos e imagens */
#centralizar_tudo{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Centralizar as bolinhas da lista no texto */
ul {
    text-align: center;
    list-style: inside;
}

/* Centralizar tabela na página */
table{
    border-collapse: collapse; /* junta os espaços das linhas da tabela */
    width: 400px;
    border: black 1px solid;
    margin: auto;
    text-align: justify;
}

tr, td{
    border: black 1px solid;
    width: 46px;
    padding: 10px;
}

#titulo_H1{
    color: red;
}

#titulo_H2{
    color: #00FFFF;
}

#texto_azul{
    color: blue;
}

Se mesmo assim não conseguir visualizar os código, dá uma olhada no código pronto do meu Codepen

 

Bud Spencer Ghost

Mil pontos, LOL!
Mensagens
6.851
Reações
14.401
Pontos
1.013
Refiz a sua página manolito e como disse em uns posts acima, é OBRIGATÓRIO você aprender CSS para que a página não fique uma bagunça e depois você não quebre a cabeça com a estilização da mesma, como por exemplo o fundo fixo da página:

Código:
<!DOCTYPE html>
<html lang="pt-br">
<head>
    <meta charset="UTF-8">
    <title>Atividade da 4ª Semana</title>
    <link href="index.css" rel="stylesheet">
</head>
<body>

<div id="centralizar_tudo">

    <img id="imagem_cabecalho" src="https://www.amigododesigner.com.br/wp-content/uploads/2018/06/post-7-6-Bancos-de-imagens-grátis-e-sem-direitos-autorais-na-web-01.png">

    <h1 id="titulo_H1">Atividade 03</h1>

    <hr> <!-- linha horizontal na página -->

    <h2 id="titulo_H2">Aula 3: 05 a 11 de Outubro - Atividade Concluída</h2>

    <h3><b>Discente:</b> Bud Spener Santos Silva</h3>
    <pre>Tarefa 4 - Exemplo de texto pré-definido</pre>

    <br> <!-- Quebra de linha -->

    <img id="logo_IFPB" src="https://www.ifpb.edu.br/imagens/logotipos/ifpb-1">

    <br>
    <br>

    <a href="https://www.ifpb.edu.br/">Clique aqui e acesse a página</a>

    <br>

    <h2>Lista de aulas realizadas</h2>

    <ul>
        <li>Aula 01</li>
        <li>Aula 02</li>
        <li>Aula 03</li>
        <li id="texto_azul">Aula 04 - Vai iniciar em 12 de outubro de 2020</li>
    </ul>

    <h2>Lista com a cidade e nota dos alunos</h2>

    <table>

        <thead> <!-- Cabeçalho da tabela -->
            <tr>
                <td>Nome</td>
                <td>Cidade</td>
                <td>Nota</td>
            </tr>

            <tbody> <!-- Agrupa o corpo da tabela -->
            <tr>
                <td>Leandro</td>
                <td>Salvador</td>
                <td>7.0 / 10.0</td>
            </tr>
            <tr>
                <td>Paulo</td>
                <td>Itu</td>
                <td>8.5 / 10.0</td>
            </tr>
            <tr>
                <td>Roberto</td>
                <td>Catu</td>
                <td>9.0 / 10.0</td>
            </tr>
            </tbody> <!-- Fim o corpo da tabela -->

        </thead> <!-- Fim do cabeçalho da tabela -->

    </table>
</div>
</body>
</html>

Código:
/* Isso é um arquivo CSS que fará a personalização da sua página */

/* Colocando imagem de fundo no corpo da página */
body{
    background-image: url("https://i.ibb.co/NTqFz2R/image.png");
    background-size: cover; /* Redmensiona a imagem para cobrir toda a página */
    background-position: center; /* centraliza a imagem */
    background-attachment: fixed; /* Aqui fixa a imagem no fundo ao rolar a página */
}

/* Centralizar a imagem do cabeçalho da página */
#imagem_cabecalho{
    display: block; /* imagem fixada na página */
    margin-top: -8px;
    margin-left: auto;
    margin-right: auto;
}

/* Centralizar na página textos e imagens */
#centralizar_tudo{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

/* Centralizar as bolinhas da lista no texto */
ul {
    text-align: center;
    list-style: inside;
}

/* Centralizar tabela na página */
table{
    border-collapse: collapse; /* junta os espaços das linhas da tabela */
    width: 400px;
    border: black 1px solid;
    margin: auto;
    text-align: justify;
}

tr, td{
    border: black 1px solid;
    width: 46px;
    padding: 10px;
}

#titulo_H1{
    color: red;
}

#titulo_H2{
    color: #00FFFF;
}

#texto_azul{
    color: blue;
}

Se mesmo assim não conseguir visualizar os código, dá uma olhada no código pronto do meu Codepen


Estou em dúvida de que na atividade tem que criar uma página CSS e html separada e a index.html chamar ela.

Você não colocou a imagem no título atrás do título e não fez o código baseado no enunciado que botei. Mas eu vou me virar. Tenho até dia 25 pra terminar essa bagaça. Valeu!
 

Forbidden Memories

Mil pontos, LOL!
VIP
GOLD
Mensagens
2.746
Reações
7.111
Pontos
1.004
Só espero que esse curso te ensine no mínimo CSS e um pouco de Javascript.

Me lembrou da minha época de faculdade onde o curso de computação gráfica era ficar fazendo gl_start() e gl_draw() naquela pipeline fixa dos anos 90 vs. meu intercâmbio onde o mesmo curso ensinava projeção de perspectiva, fazer biblioteca de calculo vetorial no C++ e fazer shader de vertice/geometria/fragmento em GLSL moderno.

Eu se fosse você mandava a ver em estudos por fora de HTML + CSS e depois de frameworks como o React (quer tema para estudos? pesquise DEV FRONTEND em algum site de empregos de TI e veja os requisitos básicos -- pronto!), mesmo se for coberto pelo teu curso. Se estiver sério em arranjar emprego na área e não só querendo tirar nota mínima nessa matéria, claro.
 

Bud Spencer Ghost

Mil pontos, LOL!
Mensagens
6.851
Reações
14.401
Pontos
1.013
A tarefa dessa semana é criar tudo em UMA página apenas. Tive que botar o CSS dentro do html mesmo:
<!DOCTYPE HTML>
<html>
<head>
<meta name="author" content="Bud Spencer">
<meta name="description" content="Página básica">
<meta charset="utf-8">
<title>Exer&iacute;cio Semana 5</title>
<style type="text/css">
#imagem {img src=
width: 100px;
height 100px;
}

#texto {
position: absolute;
margin-top: -450px;
font-size: 200%;
color:red

}

#borda{
border-width: thick;
border-color: green;
border-style: solid;

}

#espacamento {
line-height: 1cm
} </style>
</head>
<body bgcolor="#0000FF">
<div style="word-spacing: 0.5cm;">
<div style="letter-spacing: 2mm;">
<div style="line-height: 1cm;">
<a href="https://ibb.co/8cLYY2h"><img src="https://i.ibb.co/6B7XXbd/table.jpg" alt="table" border="0"></a>
<div id="texto">
<font-size:30% color:red="">
<center>
<em><red>
<h1>
T&iacute;tulo em vermelho e it&aacute;lico&nbsp;</h1>
</red></em></center>
</font-size:30%></div>
<p align="right">
<span style="color:#ffffff;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing</span></p>
</div>
<p>
&nbsp;</p>
<h3 style="font-family: arial; font-size: 200%; color: blue; text-align: center;">
<span style="color:#00ffff;"><ins><left>Texto em azul e sublinhado</left></ins></span></h3>
<h3 style="font-family:arial;font-size:200%;color:blue">
<ins><left><left>
<p>
&nbsp;</p>
</left></left></ins></h3>
<p>
&nbsp;</p>
<div id="espacamento">
<span style="color:#ffff00;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</span></div>
<img height="300" id="borda" src="https://i.ibb.co/pffNyTp/tenor.gif" style="float: right;" width="370" />
<p>
&nbsp;</p>
</div>
</div>
<p>
&nbsp;</p>
</body>
</html>
 
Ultima Edição:
Topo Fundo