Vivemos hoje a era digital, onde praticamente o mundo todo se tornou dependente da comunicação virtual, através da maior rede de interação do planeta, a Internet.
Nesse post, teremos um breve resumo sobre a história da internet, sobre a diferença entre linguagem de programação e linguagem de marcação e por fim, sobre o HTML.
A História da Internet
Quando o assunto é Internet, temos a sensação de que se trata de novidade. Engano nosso, pois o atual meio de comunicação que possibilita a troca de informações entre milhares de pessoas em todo mundo existe há anos.
Conta a história que, na década de 60, auge da Guerra Fria, o Departamento de Defesa dos Estados Unidos queria criar uma rede de computadores que não pudesse ser destruída por bombardeios e fosse capaz de ligar pontos estratégicos, como centros de pesquisa e tecnologia. Foi quando surgiu uma rede sem um comando central, onde a sua estrutura permitia que os dados corressem em qualquer sentido. Esse projeto ficou conhecido como ARPAnet, já que o setor responsável por sua realização foi a Advanced Research Projects Agency (Agência de Projetos de Pesquisa Avançada). Em 1970, essa rede interligava quatro universidades norte-americanas. Quatro anos depois, 40 instituições acadêmicas já faziam parte da ARPAnet, com seus computadores trocando mensagens e arquivos.
Em 1974, foi criada a Telenet, primeiro serviço comercial de acesso à rede nos EUA. O nome Internet só começou a ser usado em 1982. Pouco depois, em 1983, foi estabelecido o TCP/IP (Transmission Control Protocol/Internet protocol), até hoje o protocolo de comunicação (a "linguagem" comum) usado por todos os computadores conectados à rede.
Mas o que realmente possibilitou o futuro sucesso da Internet foi o desenvolvimento, em 1991, da World Wide Web (WWW), um sistema de hipertexto que tornou mais fácil navegar pela rede mundial.
O crescimento da Internet não foi planejado por ninguém. Ela é um conjunto de redes, que não pertence a ninguém nem é controlado por um grupo. Cada rede é independente e pode ser dirigida como prefiram seus donos. Esta é a causa da grande diversidade que se pode achar na Internet, mas também da dificuldade de encontrar informações que a caracterizam.
Mas não podemos esquecer que a internet é a evolução da troca de informações entre as pessoas desde os primórdios. Desde a criação do sistema binário em 1605 pelo filósofo inglês Francis Bacon (é a partir de códigos construídos por esse sistema binário, padronizado com os numerais 0 e 1, que os computadores realizam o processamento de dados),
do telégrafo usado pela primeira vez em 1844 entre as cidades de Baltimore e Washington, nos Estados Unidos, e não podemos esquecer do primeiro computador digital eletrônico, o ENIAC (Electrical Numerical Integrator and Computer) , criado em 1946 por cientistas norte-americanos. Pois é, devemos a toda essa evolução, a Internet que usamos hoje e que nos faz interagir com o mundo!
Fontes de pesquisa:
http://www.tecmundo.com.br/infografico/9847-a-historia-da-internet-pre-decada-de-60-ate-anos-80-infografico-.htm
http://www.educared.org/educa/index.cfm?pg=internet_e_cia.historia_principal
Linguagem de Marcação X Linguagem de Programação
Quando o assunto é internet, nos perguntamos sobre qual tipo de linguagem utilizamos nela. Então vamos esclarecer que existem tipos diferentes de linguagens utilizadas no mundo digital. Existem a linguagem de marcação e a linguagem de programação, com características que diferem uma da outra.
Enquanto a linguagem de marcação é representada por um conjunto de códigos empregados a dados e a textos, a função da linguagem de programação é servir como meio de comunicação entre computadores e humanos.
A linguagem de marcação é utilizada em diferentes segmentos, em especial na indústria editorial onde a marcação e a formatação de páginas são feitas a partir desse recurso. Já as linguagens de programação estão divididas entre dois tipos: as de baixo nível e as de alto nível. Os computadores interpretam tudo como números em base binária, ou seja, só entendem zero e um. As linguagens de baixo nível são interpretadas diretamente pelo computador, tendo um resultado rápido, porém é muito difícil e incômodo se trabalhar com elas.
Então agora sabemos que utilizamos a linguagem de marcação para editar e formatar as paginas na internet, o HTML, sobre o qual falaremos adiante.
Fontes de pesquisa:
http://www.mundoeducacao.com.br/informatica/linguagem-marcacao.html
http://www.infoescola.com/informatica/o-que-sao-linguagens-de-programacao/
HTML
Uma página da web (webpage) é uma fonte de informações que é adequada à World Wide Web e que pode ser acessada por um navegador web. Isso quer dizer que ela é um documento que é feito de modo à atender requisitos da rede mundial de computadores e capaz de ser visualizada a partir de um programa específico para esse fim.
A requisição e o acesso às paginas da web é feita por meio de um protocolo chamado HTTP (Hypertext Transfer Protocol, ou Protocolo de transferência de hipertexto).
As webpages utilizam de HTML (Hypertext Markup Language) para fazer a formatação dos dados. É importante notar que HTML não é uma linguagem de programação, mas sim de formatação.
a) Caracteristicas :
Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. É possível transformar um arquivo.doc (formato Word) para HTML.
A linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento.
Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser.
-> As TAGs aparecem sempre entre os sinais de “menor que” (<) e “maior que” (>);
-> Geralmente são utilizados em pares , sendo que a TAG de finalização de um comando é precedida de uma barra (/).
b)Estrutura básica de uma pagina:
Na estrutura básica de uma página HTML, são necessários no mínimo quatro tags básicas: HTML, head, title e body. Deverá ser assim:
<HTML>
<HEAD>
<TITLE>Post 1 Meus Tutoriais</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho.</H1><p>
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.<p>
Este é o segundo parágrafo
</BODY>
</HTML>
c) Metadados:
Head:
O texto contido ente as TAG <HEAD> e <HEAD> define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.
Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.
COMANDO:
<Hy> Texto do Cabeçalho </Hy>
Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho.
COMANDO:
<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 5 </H6>
As webpages utilizam de HTML (Hypertext Markup Language) para fazer a formatação dos dados. É importante notar que HTML não é uma linguagem de programação, mas sim de formatação.
a) Caracteristicas :
Os arquivos em HTML - HyperText Markup Language - Linguagem de Formatação de Hipertexto - pode ser gerados em qualquer editor de texto. É possível transformar um arquivo.doc (formato Word) para HTML.
A linguagem HTML utiliza marcações específicas e distintas para dizer ao navegador (Internet Explorer, Firefox, Mozilla, e outros) como exibir o documento.
Os comandos HTML são chamados de TAGS, compreende as marcas padrões que são utilizadas para fazer indicações a um browser.
-> As TAGs aparecem sempre entre os sinais de “menor que” (<) e “maior que” (>);
-> Geralmente são utilizados em pares , sendo que a TAG de finalização de um comando é precedida de uma barra (/).
b)Estrutura básica de uma pagina:
Na estrutura básica de uma página HTML, são necessários no mínimo quatro tags básicas: HTML, head, title e body. Deverá ser assim:
<HTML>
<HEAD>
<TITLE>Post 1 Meus Tutoriais</TITLE>
</HEAD>
<BODY>
<H1>Este é o primeiro nível de cabeçalho.</H1><p>
Bem-vindo ao mundo do HTML. Este é o primeiro parágrafo.<p>
Este é o segundo parágrafo
</BODY>
</HTML>
c) Metadados:
Head:
O texto contido ente as TAG <HEAD> e <HEAD> define o cabeçalho do documento. Estas informações são importantes pois indicam ao navegador a forma que a página deve ser apresentada graficamente.
Os cabeçalhos normalmente são usados para títulos e sub-títulos de uma texto da página. A linguagem HTML possui seis níveis de cabeçalhos, numerados de 1 a 6; quanto menor o nível, maior será o destaque.
COMANDO:
<Hy> Texto do Cabeçalho </Hy>
Onde o y é um número que poderá ser especificado entre 1 a 6, definindo o nível do cabeçalho.
COMANDO:
<H1> Cabeçalho nível 1 </H1>
<H2> Cabeçalho nível 2 </H2>
<H3> Cabeçalho nível 3 </H3>
<H4> Cabeçalho nível 4 </H4>
<H5> Cabeçalho nível 5 </H5>
<H6> Cabeçalho nível 5 </H6>
Title:
Todo documento em HTML deve possuir um título. O título é exibido em local separado da página, e é utilizado para identificar o documento em outros contextos, de modo que o título deve indicar claramente o conteúdo do documento.
As tag utilizadas para títulos são: <TITLE> e <TITLE>.
<html>
<title>Este é o título</title>
<body>
Aqui entra o texto do documento ...
</body>
</html>
Link:
O principal poder do HTML, está na capacidade de ligar partes de textos e imagens a outros documentos. A interligação entre documentos é feito utilizando a tag <a>, e não se restringe apenas a outras páginas. Os links podem apontar para qualquer recurso disponível na WEB, podendo ser uma página em HTML, uma imagem, um arquivo de som, um filme.
Style:
Define a formatação em CSS.
d) Sessões:
Body: Elemento que contém o corpo da pagina.
Article: elemento que representa uma composição independente no documento.
Section: elemento que define as seções do documento.
Nav: elemento de menu de navegação.
Aside: elemento que agrupa informações relacionadas ao conteúdo principal.
h1,h2,h3,h4,h5,h6: elementos que definem o tamanho que o cabeçalho vai aparecer na página, escritos sempre entre<>.
Hgroup: elemento que agrupa dois ou mais elementos h1 até h6, organizando-os.
Header: elemento que agrega conteúdo do cabeçalho de um documento ou de uma seção.
Footer: elemento que indica o rodapé do documento.
Address: define um elemento de endereço.
e) Comentário HTML:
Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível compreender o que foi feito.
COMANDO:
<!-- Comentário da página -->
f) Elementos de agrupamento:
<p>, define um parágrafo em uma página, acrescenta uma margem entre o texto que está em <p> e os demais textos.
<hr>, mostra uma quebra temática no texto da página, geralmente mostra uma linha horizontal usada para separar os textos.
<blockquote>, deve ser usado toda vez que você usar um texto que venha de outra fonte, como um site. Ele deixa esse conteúdo separado do resto do texto com espaço entre eles.
<ol>, define uma lista ordenada, nela pode-se usar números ou letras.
<ul> É usado como <ol>, porém esta será uma lista não ordenada, ou seja, em vez de números ou letras, aparecerão bolinhas, quadradinhos e etc. Para separar os elementos.
<li> Define cada elemento dentro de uma lista (<ol> ou <ul>).
<dl>, <dt> e <dd> definem uma lista de definições onde; <dl></dl> define onde começa e onde acaba essa lista, <dt></dt> define um elemento na lista e <dd></dd> mostra a definição do elemento
<div> define uma divisão em uma seção de uma página, para que seja estilizada por CSS. Essa tag é muito útil para separar e dispor qualquer elemento nas páginas HTML.
g) Elementos de texto semânticos:
<a>, define um hiperlink
<abbr>, define uma abreviatura e colocando se title="", definindo o significado da abreviatura entre as aspas, quem usa sintetizadores de voz conseguirão saber o que a sigla significa.
<span> fornece uma maneira de adicionar um gancho para uma parte de um texto ou de uma parte de um documento. Essa tag não fornece um efeito visual, para isso deve-se utilizar CSS.
d) Sessões:
Body: Elemento que contém o corpo da pagina.
Article: elemento que representa uma composição independente no documento.
Section: elemento que define as seções do documento.
Nav: elemento de menu de navegação.
Aside: elemento que agrupa informações relacionadas ao conteúdo principal.
h1,h2,h3,h4,h5,h6: elementos que definem o tamanho que o cabeçalho vai aparecer na página, escritos sempre entre<>.
Hgroup: elemento que agrupa dois ou mais elementos h1 até h6, organizando-os.
Header: elemento que agrega conteúdo do cabeçalho de um documento ou de uma seção.
Footer: elemento que indica o rodapé do documento.
Address: define um elemento de endereço.
e) Comentário HTML:
Os comentários são utilizados para explicar o código fonte para que mais tarde seja possível compreender o que foi feito.
COMANDO:
<!-- Comentário da página -->
f) Elementos de agrupamento:
<p>, define um parágrafo em uma página, acrescenta uma margem entre o texto que está em <p> e os demais textos.
<hr>, mostra uma quebra temática no texto da página, geralmente mostra uma linha horizontal usada para separar os textos.
<blockquote>, deve ser usado toda vez que você usar um texto que venha de outra fonte, como um site. Ele deixa esse conteúdo separado do resto do texto com espaço entre eles.
<ol>, define uma lista ordenada, nela pode-se usar números ou letras.
<ul> É usado como <ol>, porém esta será uma lista não ordenada, ou seja, em vez de números ou letras, aparecerão bolinhas, quadradinhos e etc. Para separar os elementos.
<li> Define cada elemento dentro de uma lista (<ol> ou <ul>).
<dl>, <dt> e <dd> definem uma lista de definições onde; <dl></dl> define onde começa e onde acaba essa lista, <dt></dt> define um elemento na lista e <dd></dd> mostra a definição do elemento
<div> define uma divisão em uma seção de uma página, para que seja estilizada por CSS. Essa tag é muito útil para separar e dispor qualquer elemento nas páginas HTML.
g) Elementos de texto semânticos:
<a>, define um hiperlink
<abbr>, define uma abreviatura e colocando se title="", definindo o significado da abreviatura entre as aspas, quem usa sintetizadores de voz conseguirão saber o que a sigla significa.
<span> fornece uma maneira de adicionar um gancho para uma parte de um texto ou de uma parte de um documento. Essa tag não fornece um efeito visual, para isso deve-se utilizar CSS.
<strong> dá destaque aoúdo texto e o define como importante, geralmente o texto entre <strong> fica em negrito.
<em> dá ênfase a um texto, geralmente o texto fica em itálico.
<br> pula a linha.
h) Conteúdo embutido IMG:
O navegador interpreta as imagens a partir da leitura da tag "<img />".
<img src="imagem.jpg" />.
Para conhecer mais sobre esse assunto vc pode acessar o Site http://www.primecursos.com.br , cursos de HTML básico e Webdesigner.
Parabéns!
ResponderExcluir