Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Realizando o desafio #26

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Realizando o desafio #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
c9ed2a1
Realizando o desafio
Oct 19, 2024
94a0ef1
Primeiro commit
Oct 23, 2024
9aa073a
Atualizando parte 2
Oct 24, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@

A ideia deste desafio é elaborar um website, utilizando uma estrutura bem básica, utilizando tags aprendidas durante as aulas práticas até então.

Utilizar todas as tags explicadas nas aulas: `<h1>` até `<h6>`, `<p>`, `<mark>`, `<small>`, `<i>`, `<u>`, `<strong>`, `<ol>`, `<ul>`, `<li>`, `<a>`, `<hr>`, `<sub>`, `<sup>`, `<blockquote>`
Utilizar todas as tags explicadas nas aulas: `<h1>v` até `<h6>`, `<p>v`, `<mark>v`, `<small>v`, `<i>v`, `<u>v`, `<strong>v`, `<ol>v`, `<ul>v`, `<li>v`, `<a>v`, `<hr>v`, `<sub>v`, `<sup>v`, `<blockquote>v`

Utilizar novas tags sugeridas: `<font>`, `<del>`, `<p>`, `<abbr>` (a ideia é buscar estas tags na internet, entender como ela funciona e utilizar no texto)
Utilizar novas tags sugeridas: `<font>v`, `<del>v`, `<p>v`, `<abbr>v` (a ideia é buscar estas tags na internet, entender como ela funciona e utilizar no texto)

Importante dizer que, estas tags te "seguirão" durante TODO O CURSO, por isso, é bom que esteja bem aprendidas para aproveitarem ao máximo as próximas aulas.

Expand Down
122 changes: 76 additions & 46 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
<!DOCTYPE html>
<html lang="en">
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -8,55 +8,85 @@
</head>
<body>
<h1>Módulo 1 - Primeiros Passos com HTML</h1>
<hr />

<hr>

<h2>Índice</h2>
<p><strong><u>INSTRUÇÕES:</u> </strong>Neste índice você deve colocar os tópicos que mais entendeu. Estes apenas são sugestões.</p>
<h2 id="indice">Índice</h2>

<ul>
<li><a href="#">História dos computadores</a></li>
<li><a href="#">O que são <i>Clients</i>?</a></li>
<li><a href="#">O que são <i>Servers</i>?</a></li>
<li><a href="#">Como é uma estrutura básica de um HTML?</a></li>
<li><a href="#">Entendendo a diferença entre listas ordenadas e não ordenadas</a></li>
<li><a href="#">Links de referências</a></li>
<li><a href="#historia">História dos computadores</a></li>
<li><a href="#clients">O que são <i>Clients</i>?</a></li>
<li><a href="#servers">O que são <i>Servers</i>?</a></li>
<li><a href="#html">Como é uma estrutura básica de um <abbr title="HyperText Markup Language">HTML</abbr>?</a></li>
<li><a href="#lista">Entendendo a diferença entre listas ordenadas e não ordenadas</a></li>
<li><a href="#referencias">Links de referências</a></li>
</ul>

<h2>História dos computadores</h2>
<p><strong><u>INSTRUÇÕES:</u> </strong>Neste trecho, coloque com suas palavras o que entendeu sobre o assunto.
Não esqueça de colocar links para outros sites e também de formatar o texto com
<strong>negrito</strong>, <i>itálico</i> e <u>sublinhado</u> quando necessário.</p>
<p>Não esqueça também de colocar o link para voltar até o índice. (Lembra das âncoras?)</p>

<h2>O que são <i>Clients</i>?</h2>
<p><strong><u>INSTRUÇÕES:</u> </strong>Neste trecho, coloque com suas palavras o que entendeu sobre o assunto.
Não esqueça de colocar links para outros sites e também de formatar o texto com
<strong>negrito</strong>, <i>itálico</i> e <u>sublinhado</u> quando necessário.</p>
<p>Não esqueça também de colocar o link para voltar até o índice. (Lembra das âncoras?)</p>

<h2>O que são <i>Servers</i>?</h2>
<p><strong><u>INSTRUÇÕES:</u> </strong>Neste trecho, coloque com suas palavras o que entendeu sobre o assunto.
Não esqueça de colocar links para outros sites e também de formatar o texto com
<strong>negrito</strong>, <i>itálico</i> e <u>sublinhado</u> quando necessário.</p>
<p>Não esqueça também de colocar o link para voltar até o índice. (Lembra das âncoras?)</p>

<h2>Como é uma estrutura básica de um HTML?</h2>
<p><strong><u>INSTRUÇÕES:</u> </strong>Neste trecho, coloque com suas palavras o que entendeu sobre o assunto.
Não esqueça de colocar links para outros sites e também de formatar o texto com
<strong>negrito</strong>, <i>itálico</i> e <u>sublinhado</u> quando necessário.</p>
<p>Não esqueça também de colocar o link para voltar até o índice. (Lembra das âncoras?)</p>

<h2>Entendendo a diferença entre listas ordenadas e não ordenadas</h2>
<p><strong><u>INSTRUÇÕES:</u> </strong>Neste trecho, coloque com suas palavras o que entendeu sobre o assunto.
Não esqueça de colocar links para outros sites e também de formatar o texto com
<strong>negrito</strong>, <i>itálico</i> e <u>sublinhado</u> quando necessário.</p>
<p>Não esqueça também de colocar o link para voltar até o índice. (Lembra das âncoras?)</p>

<h2>Links de referências</h2>
<p><strong><u>INSTRUÇÕES:</u> </strong>Coloque links para outras páginas que falam sobre estes assuntos. Não esquece de que precisa abrir em outra aba/janela do navegador.</p>
<ul>
<li><a href="#">http://dio.me</a></li>
<li><a href="#">http://w3c.org</a></li>
</ul>
<hr>

<h2 id="historia"><strong><u>História dos computadores</u></strong></h2>

<p style="font-family: Arial, Helvetica, sans-serif;">Surgiu na segunda Guerra mundial e agora, vem facilitando nosso serviço do dia a dia. Ao passar dos anos, computador vem inovando a cada vez mais. O que era simplas computador que cabia em uma sala inteira, hoje em dia cabe em nossas mochilas e bolsas, por exemplo<sup>1</sup> notebook. <del>âncora</del> </p>
<blockquote cite="https://www.significados.com.br/evolucao-dos-computadores-geracoes-da-historia-da-informatica/?form=MG0AV3">Apesar da popularidade e importância dos computadores pessoais, os primeiros computadores tinham um propósito diferente: suprir a necessidade de realizar contas complexas em menos tempo. Eram grandes máquinas de calcular.

O avanço da tecnologia e a descoberta de materiais melhores e menores como componentes, fez com que os computadores assumissem outras funções, como os chamados sistemas embarcados, que são computadores com uma função específica. Câmeras fotográficas ou Smart TVs são considerados sistemas embarcados.</blockquote>

<h5><a href="#indice"><small>voltar</small></a></h5>
<!--Resumo com minhas palavras-->
<hr>

<h2 id="clients"><strong><u>que são <i>Clients</i>?</u></strong></h2>
<a>clientes</a>

<p style="font-family: Arial, Helvetica, sans-serif;">É a pessoa, onde solicita os serviços no software. Por exemplo<sup>2</sup> quando se usa um navegador de um site, neste caso o navegador é o cliente.</p>

<h5><a href="#indice"><small>voltar</small></a></h5>
<!--Resumo com minhas palavras-->
<hr>

<h2 id="servers"><strong><u>O que são <i>Servers</i>?</u></strong></h2>

<p style="font-family: Arial, Helvetica, sans-serif;">É o servidor que recebe pedidos de clientes, para ser processado e enviar a resposta, tipo um feedback. </p>

<h5><a href="#indice"><small>voltar</small></a></h5>
<!--Resumo com minhas palavras-->
<hr>

<h2 id="html"><strong><u>Como é uma estrutura básica de um HTML?</u></strong></h2>

<p style="font-family: Arial, Helvetica, sans-serif;">segue uma organização específica que define o esqueleto da página web. Os <mark>componentes principais</mark> são <sub>7</sub> DOCTYPE html (tipo do documento),html (Raiz do documento), head (título e charset), body (conteúdo visível da página), header (cabeçalho), main (conteúdo principal) e footer (rodapé). Esses elementos criam a base para uma página web funcional.
</p>

<h5><a href="#indice"><small>voltar</small></a></h5>
<!--Resumo com minhas palavras-->
<hr>

<h2 id="lista"><strong><u>Entendendo a diferença entre listas ordenadas e não ordenadas</u></strong></h2>

<p style="font-family: Arial, Helvetica, sans-serif;">As listas são marcação dentro do HTML, onde tem dois elementos que são lista ordenadas e não ordenadas

A diferença que a lista ordenada usada ol é para deixar na ordem, tipo a numeração 1, 2, 3 e assim vai.

E a lista não ordenada é mais utilizadas menu, onde não precisa deixar na ordem. Por exemplo<sup>3</sup> história, serviço e contato.</p>

<h5><a href="#indice"><small>voltar</small></a></h5>
<!--Resumo com minhas palavras-->

<hr>

<h2 id="referencias"><strong><u>Links de referências</u></strong></h2>
<ol>
<li><a href="#//www.significados.com.br/evolucao-dos-computadores-geracoes-da-historia-da-informatica/?form=MG0AV3">Evolução dos Computadores</a>
<li><a href="#https://rextopleads.com/blog/tecnologia/servidores-redes-e-sistemas/arquitetura-cliente-servidor-entenda-os-fundamentos-e-vantagens?form=MG0AV3">Clients e Servers</a></li>
<li><a href="#https://developer.mozilla.org/pt-BR/docs/Learn/Getting_started_with_the_web/HTML_basics?form=MG0AV3">Sobre HTML</a>
</li>
</ol>
<h5><a href="#indice"><small>voltar</small></a></h5>

<hr>

<footer>
<p><small>>&copy; 2024 Ricardo Santana - Aluno dio.com</small</p>
</footer>
</body>
</html>