You are on page 1of 22

HTML

Professora: Hanna Sérgia Sousa de Magalhães
E-mail: hanna_magalhaes@yahoo.com.br

Aula 01 - HTML
Introdução

compartilhamento de arquivos como músicas e fotos. serviços de comunicação instantânea.. empresas.O que é INTERNET? • Internet é um conjunto de redes mundial. e etc. e tornou-se um fenômeno. formada por residências. em qualquer lugar no mundo. • A internet é composta por milhões de redes particulares. universidades. redes sociais. e uma infinidade de outros temas. além de uma grande variedade de recursos e serviços. órgãos do governo. pois é através dela que as pessoas tem a possibilidade de coletar informações sobre qualquer assunto do seu interesse. como emails. . • A internet permite o acesso a informações de todos os tipos e de muitas transferências de dados.

que especifica o endereço único que cada página vai receber. em português. e é como ela vai ser encontrada quando os usuários digitarem. que [é o navegador e servidor enviam informações. e HTML que é um método de codificar a informação da internet. onde é possível acessar qualquer site para consulta na Internet. HTTP. • A Web funciona através de três parâmetros:  a URL. para ser exibida de diversas maneiras. O www é um sistema em hipermídia. que significa rede de alcance mundial. que é a reunião de várias mídias interligadas por sistemas eletrônicos de comunicação e executadas na Internet. .O que é WWW: • WWW é a sigla para World Wide Web.

Internet Explorer. Safari.O que é Web: • Web é uma palavra inglesa que significa teia ou rede. A web passou a designar a rede que conecta computadores por todo mundo. Opera. O significado de web ganhou outro sentido com o aparecimento da internet. Mozilla Firefox. som e outras animações digitais) que permitem ao usuário acessar uma infinidade de conteúdos através da internet. • A web significa um sistema de informações ligadas através de hipermídia (hiperligações em forma de texto. São exemplos de navegadores: Google Chrome. Web pode ser uma teia de aranha ou um tecido e também se utiliza para designar uma trama ou intriga. a World Wide Web (WWW). Para tal é necessário ligação à internet e um navegador (browser) onde são visualizados os conteúdos disponíveis. vídeo. . etc.

As páginas são organizadas dentro do site numa hierarquia observável no URL. As páginas num site são organizadas a partir de um URL básico. embora as hiperligações entre elas controlem o modo como o leitor se apercebe da estrutura global. e geralmente residem no mesmo diretório de um servidor. de hipertextos acessíveis geralmente pelo protocolo HTTP na internet. ou sítio. isto é. O conjunto de todos os sites públicos existentes compõe a World Wide Web.O que é Site? • É um conjunto de páginas web. modo esse que pode ter pouco a ver com a estrutura hierárquica dos arquivos do site. . onde fica a página principal.

telefones celulares. . criado por Marc Andreessen quando ele estudava na Universidade de Illinois. musicas. Com ela voce pode compartilhar fotos. textos e fazer muitas coisas. A linguagem HTML foi criada com a visao de que todos os dispositivos deveriam ser capazes de usar informacoes da Web: PCs com placas de videos e monitores de diferentes resolucoes e profundidades de cores. Foi popularizado pelo aparecimento do browser Mosaic. dispositivos para processar entrada e saida de voz. Foi a primeira linguagem no setor e e usada amplamente ate os dias atuais. Foi criada pelo Tim Berners-Lee quando ele trabalhava como pesquisador para o CERN (Laboratorio Europeu de Fisica de Particulas.O que e HTML? HTML (HyperText Markup Language . videos. computadores com taxa de transferencia alta ou baixa e assim por diante. na Suica).Linguagem de Marcacao de Hipertexto) e a uma linguagem considerada a base de todas as outras linguagens de desenvolvimento de projetos para WEB.

por exemplo. a TAG <BODY>voce precisara fechar repetindo a TAG assim: </BODY>. sendo que quando você abre alguma TAG como. A maioria dos comandos e usada em pares. A TAG com barra (/) significa que esta fechando a que esta sem barra. Os comandos são indicados entre os marcadores chamados TAG que vem entre os símbolos de < e >.Primeira Pagina em HTML Uma pagina básica em HTML e um arquivo de texto simples contendo o texto da pagina e os comandos HTML que definem a formatação das mesmas. .

Criando sua primeira página HTML. assim facilita e muito o desenvolvimento dele. De preferencia na Area de trabalho (Desktop). • Primeiramente crie uma pasta para salvar as paginas. • Sempre deixe os arquivos do site muito bem organizados. • Menu Iniciar>Programas>Acessórios>Bloco de Notas . • Depois de criado uma pasta no Desktop ou em qualquer outro lugar de sua preferencia abra o Bloco de Notas.

Criando sua primeira página HTML. • Depois de aberto digite o seguinte codigo: <html> <head> <title> Minha Primeira Página em HTML!!!</title> </head> <body> <p align="center"> Essa é a primeira página HTML!!! </p> </body> </html> .

Explicando o que vc fez? • Agora vou explicar tudo o que voce escreveu. • A TAG <BODY> indica que se iniciou o corpo da pagina. • A TAG <HEAD> indica que voce abriu um cabecalho. E dentro desta TAG que vai boa parte das TAG utilizadas para fazer uma pagina. serve para colocar titulo na pagina. • A TAG <HTML> indica que voce iniciou um arquivo HTML. e aquela frase que aparece na barrinha azul do Windows XP quando a pagina esta aberta. . • A TAG <TITLE> que deve ser usada dentro do cabecalho <HEAD>.

Explicando o que vc fez? • A TAG <p> indica que abriu um novo paragrafo. Deixe a codificacao como ANSI. O atributo ALIGN como o proprio nome diz serve para especificar o alinhamento. • Depois de digitado o codigo acima.html no final do nome do arquivo. Caso voce queira colocar o texto na esquerda troque o CENTER por LEFT. .html. E CENTER significa que o alinhamento e no centro. Pois se digitar apenas primeira e ja clicar em salvar o Bloco de notas vai pensar que voce esta fazendo um arquivo de texto comum. salve o arquivo como primeira. e ira salvar em formato TXT. Lembre-se de digitar o . ou por RIGHT para a direita e ainda pode colocar JUSTIFY para deixar o texto justificado.

título. </head> • Seção do cabeçalho.. etc. definições lógicas sobre o documento (identificação. respectivamente.....Elementos: • <html> . </html> • Indicam.. catalogação. </title>: .) • <title> . vínculos. o início e o fim do documento • <head> .

Exemplo1 <HTML> <HEAD> <TITLE>Minha Página</TITLE> </HEAD> </HTML> .

</h*> • Identificação dos 6 níveis de títulos diferentes em um documento (* = 1. 5... ou 6) • <p> . 4.. </body> • Definição de todo o conteúdo do documento que será exibido pelos navegadores • <h*> ..Elementos • <body> . 3. 2.. </p> • Definem um bloco de texto como um parágrafo ..

Exemplo 2 <body> <h1>Bem Vindo!!!</h1> Essa é minha primeira página <p>O que você achou dela?</p> </body> .

.......</b> • <br> • insere uma quebra na linha do parágrafo • utilizado para pular linhas • <hr> • insere uma linha horizontal no parágrafo .</i> • <strong> . </em> • Enfatizam o texto em itálico • equivalente a <i>..Elementos do corpo • <em> . </strong> • Enfatizam o texto em negrito • equivalente a <b>.

Exemplo 3 <body> <h1>Bem Vindo!!!</h1> <strong>Essa</strong> é minha <em>primeira</em> página <p>O que <i>você</i> <b>achou</b> dela?</p> <hr> .

Ligações e Imagens • <a href=" endereço do link"> Nome do link</a> • insere um link • href representa o endereço • <img src="nome da imagem" width="largura" height="altura"> • • • • insere uma imagem src representa o nome do arquivo width – a largura em pixels height – altura em pixels .

com/">Cores para Web</a> <br> <a href="http://apostilas.com/hipermidia">Tec nologia Hipermídia</a> .wikidot.Exemplo 4 <p>Conheça minha páginas favoritas</p> <a href="http://html-color-codes.

jpg" width="200" height="150"> .Exemplo 5 <hr> <p>Minhas imagens</p> <img src="PC.

contendo as seguintes informações: • Cabeçalho (com título: nome meu do seu sítio) • Corpo: • • • • • Seu nome (título 1) Curso (título 2) Matrícula (título 3) Lista das disciplinas cursadas links para 3 páginas que você goste . no bloco de notas.Exercício • Crie um documento HTML.