Aprendendo HTML na Prática - DIO.me®

Esta página é um exercício/ desafio do curso conduzido pelo Prof. Diogo Medeiros Mainardes

Desenvolvedor Sênior / Tech Lead @diogomainardes.dev

Realizado na plataforma DIO - Digital Inovation One

Está sendo uma excelente oportunidade para rever conteúdos que já vi em outros cursos na DIO, mas que me acendeu a esperança de poder dizer que ao término dessa formação, domino essa linguagem de marcaçao de texto tão essencial para uma carreira de programação.

"Faça coisas. Seja curioso, persistente. Não espere por um empurrão da inspiração ou por um beijo da sociedade na sua testa. Preste atenção. É tudo sobre prestar atenção. É tudo sobre captar o máximo que você puder do que está por aí e não deixar que desculpas e que a monotonia de algumas obrigações diminuam sua vida.” - Susan Sontag

Detalhes da obra de Daiara Tukano e clicando na figura você acessa o site da artista.


HTML, ou Hypertext Markup Language, é a linguagem padrão utilizada para criação e estruturação de páginas na web. Neste curso, vamos explorar os principais conceitos do HTML e como utilizá-los na prática.

Índice

  1. Surgimento da Internet e seus precursores e protagonistas
  2. Como Funciona o HTML
  3. Ferramentas Utilizadas
  4. Usando o Inspetor de Elementos
  5. Estrutura básica do HTML
  6. Falando sobre Tags
  7. Atributos básicos
  8. Executando uma página HTML
  9. Textos
  10. listas Ordenadas e Ordenadas
  11. Links
  12. Considerações Finais


1. Surgimento da Internet e seus protagonistas

A Internet é uma rede mundial de computadores que permite a conexão e troca de informações entre pessoas e dispositivos em todo o mundo. A história da Internet remonta aos anos 60, quando surgiram os primeiros esforços para conectar computadores e compartilhar informações entre eles.

Nessa época, pesquisadores como J.C.R.Licklider que propôs o conceito de uma "rede de computadores intergaláctica" e Robert Taylor ambos pesquisadores da ARPANET orgão governamental, cujo objetivo inicial deu lugar cada vez mais para o que depois veio se consolidar como compartilhamento de informações em escala global.

Um pouco depois, é a vez de Tim Berners-Lee vislumbrar a possibilidade de unir hypertexto e protocolos TCP/ IP e iniciar a criação da WWW. A partir daí, surgiram diversas tecnologias e linguagens que ajudaram a moldar a internet como a conhecemos hoje. Grandes nomes surgiram até nossos dias, mas vamos destacar o de Steve Jobs, criador da APPLE e Bill Gates.

Bill Gates é um empresário e filantropo americano, que ficou famoso por ser o co-fundador da Microsoft, uma das maiores empresas de tecnologia do mundo. Gates é considerado uma das pessoas mais influentes da história da tecnologia, sendo responsável por ajudar a criar e popularizar o uso de computadores pessoais em todo o mundo. Além disso, Gates também é conhecido por sua filantropia, tendo doado bilhões de dólares para causas como a erradicação da poliomielite e o combate à pobreza. Atualmente, ele é um dos homens mais ricos do mundo e continua a ser uma figura importante no mundo dos negócios e da tecnologia.

Steve Jobs ficou conhecido como um dos fundadores da Apple Inc., empresa responsável por revolucionar a indústria de tecnologia com produtos como o Macintosh, iPod, iPhone e iPad. Além disso, Jobs também foi um visionário e líder carismático, que se destacava pela sua habilidade de inspirar e motivar as pessoas ao seu redor. Apesar de sua morte prematura em 2011, seu legado continua a inspirar e influenciar a indústria de tecnologia e o mundo dos negócios até os dias de hoje.

Mas não podemos deixar de registrar as contribuições das primeiras mulheres envolvidas nos estudos de ciência da computação e do que viria a ser a Internet. Por isso deixamos aqui a imagem onde você pode clicar e ter acesso a uma página especial com mais e merecidas informaçoes sobre suas participações

imagem em ilustração de Ada Lovelace usando um laptop
Crédito da imagem: Mashable Composite Alfred Edward Chalon/Science & Society Picture Library

Clique na imagem ou aqui para a página especial

voltar


2.Como funciona o HTML(HyperText Markup Language)

HTML é a linguagem de marcação de texto padrão utilizada para criar páginas na web. O HTMLfunciona a partir de uma estrutura básica que consiste em elementos, tags e atributos. Os elementos são os blocos de construção básicos da página, como títulos, parágrafos, imagens e links. As tags são usadas para definir esses elementos e podem ter atributos que fornecem informações adicionais sobre o elemento.


voltar


3. Ferramentas utilizadas

Existem diversas ferramentas disponíveis para o desenvolvimento de páginas em HTML. Entre as mais populares, estão editores de texto simples como o Bloco de Notas (Windows) ou TextEdit (Mac), até editores de texto mais avançados como o Visual Studio Code ou o Sublime Text. Além disso, há diversos editores online que permitem criar páginas HTML diretamente no navegador, como o CodePen e o JSFiddle.

logo do editor de texto sublime text logo do Visual Studio Code logo do editor online codepen logo do editor online jsfiddle

voltar


4. Usando o Inspetor de Elementos

O Inspetor de Elementos é uma ferramenta presente em todos os navegadores modernos que permite visualizar e editar o código HTML de uma página em tempo real. Ele é útil para entender como as páginas são construídas e para fazer ajustes e correções na página. Para acessar o Inspetor de Elementos, basta clicar com o botão direito do mouse em qualquer elemento da página e selecionar "Inspecionar elemento" ou simplesmente "Inspecionar" conforme o navegador.

interface gráfica do usuário, botão direito na página do buscador google para acessar o inspetor de elemento

Fig.1 - clique com o botão direito do mouse para encontrar a ferramenta.


interface gráfica do usuário, com acaixa do inspector de elementos aberta

Fig.2 - inspecione os elementos do documento na caixa do lado direito.


voltar


5.Estrutura básica do HTML

A estrutura básica do HTML consiste em um documento HTML que inclui a declaração do tipo de documento <!DOCTYPE html>, a tag <html> que envolve todo o documento, e as seções <head> e <body>> que definem o cabeçalho e o corpo da página. 


	<!DOCTYPE html>
	<html>
	 <head>
	    <title>Título da Página</title>
	 </head>
	<body>
	Conteúdo da Página
	</body>
	</html>
voltar


6. Falando sobre Tags

As tags são elementos básicos do HTML, e são utilizadas para indicar ao navegador como exibir o conteúdo da página. Cada tag possui um nome e pode ter atributos que modificam seu comportamento ou aparência. As tags podem ser de abertura, como <p>, ou de fechamento, como </p>, ou ainda, tags auto-fechadas, como <img> ou <input>. Exemplo de código:

Tudo entre as tags vai ser executado conforme a interpretação do navegador.

<strong>negrito</Strong> o que for escrito entre as tags fica em negrito

<i></i> o que estiver entre as tags ficará em itálico

(Ambas exemplos de tags com fechamento)

Já as tags <img>, <input>,<br>, <hr> são exemplos de tags sem fechamento, ou auto auto-fechadas.