Desenvolvimento Web -HTML, Manuais, Projetos, Pesquisas de Web Design e Desenvolvimento

Baixe Desenvolvimento Web -HTML e outras Manuais, Projetos, Pesquisas em PDF para Web Design e Desenvolvimento, somente na Docsity!

CURSO DE DESENVOLVIMENTO

WEB

MÓDULO I - HTML

AUTOR: JOSÉ AILTON BATISTA DA SILVA

SUMÁRIO

• INTRODUÇÃO
  • O que é a Internet?
  • O que são Redes de Computadores?
  • O que é WWW?
  • Principais Protocolos de Redes
  • Servidor HTTP
• HTML.................................................................................................................................................
  • O que HTML?
  • Linguagens de Marcação
  • O que é “marcação”?
  • Sintaxe de marcação HTML
  • Criando um documento HTML........................................................................................................
  • Marcadores de Cabeçalho e de Corpo
  • A estrutura do documento HTML
  • A sintaxe de marcação HTML – Parte
  • Sistemas de Cores
  • Usando os atributos da tag BODY
  • Formatando Texto: Títulos e parágrafos
  • Formatando textos II
  • Criando listas de definição, marcação e numeradas
  • Usando o hipertexto
  • O atributo name
  • Usando links locais
  • Trabalhando com imagens
  • Usando Plug’in
  • Inserindo Caracteres Especiais
  • Usando tabelas HTML...................................................................................................................
  • Usando iFrames............................................................................................................................
  • Usando Frames.............................................................................................................................
• BIBLIOGRAFIA

Principais Protocolos de Redes Temos diversos serviços disponíveis pela internet como serviço de e-mail, controle remoto, grupo de noticias, etc. Temos então protocolos adicionais ao TCP/IP, os principais são:  TCP – Protocolo responsável pela comunicação de dois Computadores e garante a transmissão e recepção de dados de forma correta.  IP – Protocolo responsável pela identificação do computador na rede, endereçando cada maquina com um numero.  Telnet – Protocolo responsável pelo controle remoto de computador de serviço de terminal do Windows.  POP3 – Protocolo responsável pela Leitura das mensagens disponíveis da Caixa de entrada do servidor de e-mail.  SNMP – Protocolo responsável pelo envio de mensagens de e-mail.  FTP – Protocolo responsável pela transferência de Arquivos entre computadores.  HTTP – Protocolo responsável pela transferência de paginas em hipertexto usados nos navegadores para acessar sites. Servidor HTTP Quando uma pessoa abre o navegador, digita “http://www.google.com” e pressiona ENTER. O navegador envia uma requisição HTTP ao computador do Google. Essa requisição é um pedido para enviar uma determinada pagina do site, que no caso é a pagina inicial. Um servidor HTTP ou simplesmente servidor Web é um programa instalado em uma máquina que ficar esperando requisições HTTP dos clientes. Essas requisições são pedidos de envio de paginas, imagens, áudio, etc.

HTML

O que HTML? HTML significa HyperText Markup Language , isto é, Linguagem de marcação de hipertexto. É uma linguagem de marcação ou metalinguagem usada para criar documentos web. O HTML é a linguagem padrão no mundo para o uso nos navegadores. Linguagens de Marcação Existem diversas linguagens de marcação para os diferentes tipos de aplicação, mas o comum entre elas são o modo de funcionamento. As linguagens de marcação são usadas como uma base de anotação para guardar informação. As linguagens mais conhecidas são:  XML – Usada geralmente como banco de dados.  SVG – Usada para criar gráficos vetoriais.  CFML – Usada no servidor web ColdFusion  VRML – Usada para criar modelos em 3D.  XHTML – Novo padrão HTML pelas normas da W3C O que é “marcação”? Marcações são abstração de objetos reais. No caso do HTML podemos dizer que são comandos para gerar objetos como imagens, textos, hiperlinks, botões, etc. Cada marcação referencia um objeto no navegador como, por exemplo, o marcador “” referencia-se a uma imagem. Sintaxe de marcação HTML Para criar marcações em um documento HTML precisamos estabelecer algumas regras para que o navegador possa entender o código. A primeira regra é que todo marcador deve esta entre o sinal de “<” e “>”. Exemplo: , , , .

Criando um documento HTML Vamos iniciar a partir de agora a parte prática. Os conceitos vão sendo vistos conforme cada passo. Para criarmos um documento HTML só precisamos de um editor de texto ASCII, ou seja, os editores de texto simples como o “Bloco de Notas” do Windows ou o “KEdit” do Linux. Iremos então ao sistema Windows pressionar [CTRL] + [R] para abrir a janela “Executar” e digitar “notepad”. Com o Bloco de Notas aberto então digite o código abaixo:

Ola Mundo!

Agora clique no menu Arquivo > Salvar como.... IMPORTANTE!!! Crie uma pasta em algum lugar no Computador com o Nome “CURSO DE WEB”, nela salvaremos os projetos criados. Salve o documento com o nome “pagina_exemplo.html”.

É muito importante digitarmos o texto “ponto html” (.html) ao final do nome do arquivo, como na figura acima, pois fazendo isso criamos uma pagina web. Com o arquivo salvo, entre na pasta “CURSO DE WEB” e dê dois cliques no arquivo. A pagina deverá abrir no navegador padrão. No exemplo digitado temos o marcador html , esse marcador indica o inicio e o fim do documento. Então tudo que estiver entre e é o conteúdo do documento. O marcador head indica o inicio e o fim do cabeçalho. É no cabeçalho onde digitaremos as informações da pagina como nome do autor, titulo da pagina, etc. O marcador body indica o inicio e o fim o corpo da pagina, isto é, a parte mostrada na tela do navegador. Observe que o que esta entre e é somente o texto “Ola Mundo!” e o mesmo foi mostrado no navegador. Marcadores de Cabeçalho e de Corpo Outra regra usada no HTML é que existem marcadores somente para o corpo ou para o cabeçalho. Vamos ao exemplo: Digite o código abaixo no “notepad” e salve como “segunda_pagina.html”.

A estrutura do documento HTML Um documento HTML deve ser estruturado da seguinte forma: ;Indica Inicio de Documento HTML ;Indica Inicio de Cabeçalho Aqui fica o cabeçalho! ;Indica o Fim do cabeçalho ;Indica inicio do corpo (parte visual) Aqui fica o Conteúdo da Pagina ;Indica fim de corpo ;Indica Fim de Documento HTML Essa é a estrutura padrão de um documento HTML e deve ser seguida para não haver problemas na visualização da pagina no navegador. A sintaxe de marcação HTML – Parte 2 Vamos mostrar agora alguns marcadores novos: blink - Faz o texto piscar. Obs. Está tag só funciona no Firefox e Netscape. hr(horizontal row) – Cria uma linha horizontal no navegador.

Terceira pagina

Isto tem que estar piscando no FF

Observe que alguns marcadores estão em maiúsculo e outros em maiúsculo e minúsculo. Isso não influencia no código, pois o HTML não é case-sensitive , por isso podemos digitar em qualquer caixa, alta ou baixa.

Alguns objetos HTML podem ser mudados suas propriedades como cor, largura, altura, fundo, etc. Para mudarmos usando marcação, temos de usar os chamados “atributos de marcação”. Veja as regras para dos atributos HTML. 1ª. Os atributos só podem ser inseridos no marcador de inicio. 2º. Cada marcador tem um atributo especifico que pode existir em outros ou não. 3º. Não há ordem na inserção de atributos, isso é, posso escrever os atributos antes ou depois de qualquer um. Exemplo global de inserção de atributos:

Vamos então alterar as propriedades do objeto linha usando seus atributos principais que são: size=”pixeis” – Altera a altura da linha. O valor inserido nesse atributo são pixeis, isso é, é um valor numérico com o sufixo px para indicar pixel; width=”numero, pixeis, porcentagem” – Altera o comprimento da linha. O valor inserido pode ser numero, pixeis ou porcentagem. noshade=”noshade ou nada” – Alterna fundo sombra da linha. Caso digite o valor “noshade” você adiciona o fundo sombra, se não, a propriedade fica desativada. color=”cor em inglês, código RGB, código Hex” – Altera cor da linha. O valor pode ser uma cor em inglês ou código RGB ou hexadecimal. (Você verá códigos de cores adiante). align=”left, center, right” – Altera alinhamento da linha. O valor “center” centraliza a linha na pagina, “left” alinha a esquerda e “right” alinha a direita.

Onde red, green e blue são números de 0 a 255. Exemplos: rgb(255,0,0);rgb(0,255,0);rgb(255,255,0);rgb(130,145,10) Podemos gerar códigos RGB utilizado o Paint do Windows. Veja como: Abra o Paint: Clique no botão “Editar Cores”. A caixa de Cores irá aparecer.

Selecione a cor desejada usando a paleta deslizante e ponteiro deslizante. Observe que há três campos de textos com nome vermelho, verde, azul, copie os valores para a sintaxe, assim você poderá inserir a cor desejada no documento. Exemplo: rgb(64,180,189). Muitos navegadores têm problemas com a sintaxe do RGB, mas existe um padrão usado por todos os navegadores que são o sistema RGB em hexadecimal. O sistema consiste em usar um numero hexadecimal de dois algarismos para representar a cor. A sintaxe é: #RRGGBB. Onde RR, GG e BB é um numero hexadecimal de 0x00 a 0xFF. Exemplos: #FF0000 ; #00FFFF ; #C0C0C Podemos usar então uma calculadora cientifica para passar os valores capturados no paint e transformar-los em hexadecimal. Usando os atributos da tag BODY Iremos agora ver como alterar os propriedades da tag BODY. Os principais atributos são: Atributo Valor Descrição bgcolor cor Altera a cor de fundo do documento. text cor Altera cor padrão do texto. link cor Altera cor padrão dos links. alink cor Altera a cor padrão dos links acionados vlink cor Altera cor padrão dos links visitados background URL Adiciona um fundo ao documento. Veja então o exemplo abaixo.

Formatando Texto: Títulos e parágrafos Digite o seguinte código:

formatando texto – parte 1

Isso eh um Titulo Aqui é meu paragrafo 1!!! Aqui é meu paragrafo 2!!! Autor Aqui é meu subtítulo Aqui é meu parágrafo.

Veja o seguinte: no corpo da pagina digitamos algo que seria um titulo, parágrafos e subtítulo, veja que criamos varias quebra de linhas e espaços. Vamos agora salvar o arquivo como “formatacao_parte1.html” e depois abrir no navegador.

Observe que ao visualizarmos no navegador, todas as quebras de linhas e os vários espaços antes na palavra “autor” não foram mostradas. Isso acontece porque as quebras de linhas e os vários espaçamentos não influenciam no código HTML, então podemos escrever todo código somente numa linha como abaixo: isso eh um tituloIsso eh o corpo Para criamos então títulos e parágrafos devemos utilizar marcadores HTML com essa finalidade. Os marcadores usados para criar títulos e subtítulos são os H1, H2, H3, H4, H5, H6. Vamos a outro exemplo:

Titulos

Titulo Nivel 1 Titulo Nivel 2 Titulo Nivel 3 Titulo Nivel 4 Titulo Nivel 5 Titulo Nivel 6

Observe que utilizando o marcador Hnº podemos criar até seis níveis de títulos e que depois de cada Hnº é gerada automaticamente uma quebra de linha. Vamos então agora ao exemplo no inicio do tópico e criar os títulos utilizando os marcados HTML.

formatando texto – parte 1

Isso eh um Titulo Aqui é meu paragrafo 1!!!

Podemos utilizar também o atributo align para formatar o alinhamento os títulos e parágrafos.

alinhamento

Titulo1

paragrafo1

paragrafo2

paragrafo3

Subtitulo1 Sub- subtitulo1

Formatando textos II Podemos formatar texto usando os estilos negrito , itálico e sublinhado. Observe o exemplo:

estilos

Lorem ipsum dolor

sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est.

Para deixarmos o texto em negrito usamos a tag B(Bold) ou STRONG , observe no exemplo acima que a frase “Purus lectus” esta entre B e a palavra “massa” esta entre Strong , mas os dois estão em negrito. A palavra “libero” esta em itálico, pois a tag utilizada para deixar em itálico é o . Já a palavra que esta entre a tag U(Under-line) ficou sublinhado. Vamos utilizar agora o marcador font utilizado para formatar tipo, tamanho e cor de texto. Veja abaixo os principais atributos: Atributo Valor Descrição Face Nome de fonte Altera estilo de fonte do texto Size Numero em pixeis Altera o tamanho do texto Color cor RGB Altera a cor do texto Vamos agora ao exemplo:

usando o FONT

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus.

Obs: A tag font está obsoleta, pois nos novos padrões, o HTML não é usado para a estilização. Logo essa tag apresentará problemas nos navegadores atuais.