Introdução O HTML é uma linguagem de marcação utilizada para desenvolvimento de sites. Esta linguagem surgiu junto com o HTTP, ambos possibilitaram a internet ser popularizada. História O HTML foi criado em 1991, por Tim Berners-Lee, no CERN (European Council for Nuclear Research) na suíça. Inicialmente o HTML foi projetado para interligar instituições de pesquisa próximas, e compartilhar documentos com facilidade. Em 1992, foi liberada a biblioteca de desenvolvimento WWW ( World Wide Web), uma rede de alcance mundial, que junto com o HTML proporcionou o uso em escala mundial da WEB. Como funciona O HTML é uma linguagem de marcação. Estas linguagens são constituídas de códigos que delimitam conteúdos específicos, segundo uma sintaxe própria. O HTML tem códigos para criar paginas na web. Estes códigos que definem o tipo de letra, qual o tamanho, cor, espaçamento, e vários outros aspectos do site. No início era muito complicado aprender HTML, pois eram muitos comandos para fazer algo simples. A cada
nova versão, o HTML fica mais fácil de utilizar, e adquire mais funções. Atualmente qualquer pessoa pode acessar a internet a aprender a construir um site básico em questão de horas, seguindo os passos de tutoriais e aprendendo as funções de cada código. O HTML foi à primeira linguagem de nível mundial, porem não é a única. Existem muitas outras linguagens destinadas á criação de paginas da web, porém o HTML ainda prevalece. Atualmente já é possível integrar varias linguagens na mesma pagina da Web, sendo possível usar duas ou mais linguagens no mesmo site. Para criar e editar códigos em HTML é necessário qualquer editor de texto comum, como bloco de notas. Para testar os códigos, basta salvar o arquivo em formato HTML e executar. Para o teste é necessário ter um navegador configurado como padrão. Não é necessária internet, pois o arquivo com os códigos esta na máquina onde esta sendo executado. Alguns códigos em HTML e suas funções: <title> Define o titulo da pagina. <script> Permite adicionar funções em paginas com script, podendo assim adicionar códigos em Java Script (Este código permite que alguns sites em HTML tenham joguinhos ou animações, verificações de formulários antes do envio para o servidor, entre outras funcionalidades) <style> Define formatação em CSS. A maioria dos códigos em HTML precisa ter um código de inicialização e um de finalização - são as chamadas Tag's (tag de abertura e tag de fechamento). Por exemplo, para definir o titulo da pagina, é necessário escrever:
<title>título da minha Página</title> O </title> serve para avisar que ali acaba o titulo, caso não seja posto, todos os códigos definidos depois serão considerados parte do titulo. Um código HTML para uma pagina onde apareça infoescola escrito em vermelho, em um fundo preto: <HTML> <Head> <Title>Título</title> </head> <body bgcolor="black" text="red"> Infoescola </body> </HTML> Basta copiar o código para um editor de texto, salvar em HTML e abrir no navegador. Existem programas profissionais para criação de páginas em HTML automaticamente, como o Adobe Dreamweaver, entretanto, com o tempo o desenvolvedor precisará criar páginas complexas demais, sendo necessário ele mesmo digitar alguns códigos HTML.
ESTRUTURA DA INDEX DO PORTIFÓLIO DIGITAL linguagem HTML: (Hiper Text Makup Language) Indica onde colocar o texto, imagem ou vídeo; <html xmlns="http://www.w3.org/1999/xhtml"> <head> <link rel="shortcut icon" href="images/favicon.ico" /> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> //teg-title:adiciona o tituloda página <title>projeto Integrador - Modelo</title> <style type="text/css"> @import url("css/css.css");.css { } </style> </head> // background:plano de fundo da página
<body background="imagens/madeira2.jpg"> <!--Table: tag para criar tabela, align= center : alinhado ao centro, width: tamanho em pxels </table> e consiste em linhas e colunas. A interseção de uma linha com uma coluna é chamada de célula. As linhas de uma tabela são criadas pelo comando <TR> </TR>. As células de uma linha são criadas pelo comando <TD> </TD>--> <table align="center" width="1024" cellspacing="2"> <tr> <!--O comando <IMG> é responsável por definir a posição em que uma imagem será inserida. SRC: É o nome da figura (se estiver em outro diretório o caminho completo) width é usado para ajustar a largura da imagem 1024 é o numero de pixels do exemplo acima--> <! colspan =x: Utilizado para expandir uma coluna atributo scope é usado para associar células de cabeçalho a células de dados em tabelas de dados Width ajusta o tamanho em pixels (height) modifica a altura de um elemento--> <th colspan="6" scope="col"><img src="imagens/header.jpg" width="1024" height="201" alt="banner" /></th> <!--BGcolor: especifica a cor do texto. Seu valor pode ser especificado em hexadecimal, RGB ou através de um nome predefinido de cores--> <tr bgcolor="#ffffff"> <!--comando <A> de âncora, onde href especifica o endereço da URL (Universal Resource Locator) ao qual o link está associado, pode ser uma outra página da internet, um arquivo para download Align: Alinhamento da tabela na página. Pode ser right, left ou Center--> <td><div align="center"><span class="botons"><a href="home.html" target="_meio" class="botons">home</a></span></div></td> <td><div align="center"><span class="botons"><a href="modulo1.html" class="botons" target="_meio">módulo I</a></span></div></td>
<td><div align="center"><span class="botons"><a href="modulo2.html" target="_meio" class="botons">módulo II</a></span></div></td> <td><div align="center"><span class="botons"><a href="modulo3.html" target="_meio" class="botons">módulo III</a></span></div></td> <td><div align="center"><span class="botons"><a href="modulo4.html" target="_meio" class="botons">módulo IV</a></span></div></td> <td><div align="center"><span class="botons"><a href="modulo5.html" target="_meio" class="botons">módulo V</a></span></div></td> <tr> <td colspan="6"> <iframe src="home.html" name="_meio" height="500" width="1024" class="iframe" scrolling="auto" frameborder="0"> </iframe> </td> <tr> <td colspan="6"><img src="imagens/banner2.jpg" width="1025" height="52" alt="banner" /></td> </table> </body> </html>