0841 Servidores Web e acesso à internet HTML HTML (acrónimo para a expressão inglesa HyperText Markup Language, que significa Linguagem de Marcação de Hipertexto) é uma linguagem de marcação utilizada para produzir páginas na Web. Os documentos HTML funcionam com etiquetas (tag’s) que são interpretados pelos navegadores (browser). Esta linguagem permite adicionar textos, imagens, áudio e vídeo. O HTML cresceu de forma anárquica e foi com a criação de padrões como HTML 4.01 que se conseguiu estabelecer ordem e planeamento e estruturas fixas para se trabalhar. Com a introdução de outras tecnologias como as CSS, Javasript,entre outras que optimizam o funcionamento da internet de modo a suprir deficiências do próprio html . Deve se ter em conta que os navegadores tem as suas especificidades e não representam o código de uma maneira unificada, para tal também devemos ter em conta a posição dominante no mercado do Internet Explorer. Deveremos utilizar o bloco de notas na nossa aula, mas poderemos utilizar outros editores HTML, como o FrontPage e o Dreamweaver. Exemplo de código de um documento html. <html> <head> <title>Título da página</title> </head> <body> Exepmlo </body> </html>
Estrutura de uma página HTML: <html> Inicia-se o html <head> Inicia-se o cabeçalho
Página6
Neste Local pomos os dados que não são visíveis na nossa página mas que são importantes para catalogá-la: Título, palavras-chaves, contéudo, etc. </head> fechar cabeçalho <body> iniciar corpo Etiquetas e conteúdo do corpo. Parte do documento que será mostrada pelo navegador: Textos e imagens
0841 Servidores Web e acesso à internet </body> fechar corpo </html> fechar html A utilização de maiúsculas não e relevante a escrever as etiquetas.
Página6
Exemplo Final
0841 Servidores Web e acesso à internet Sintaxe Body Hiperlinks Exemplos: link="#ffffff" vlink="#FFFFFF" alink="#FFFFFF" Especifica a cor das ligações activas no original.
Fundo Exemplo: background="images.jpg" Usar imagem como fundo.
Bgcolor Exemplo: bgcolor="#CCCCCC" Cor de fundo.
Texto Exemplo: text="#006699" Cor do texto.
Parágrafo Criar parágrafo e alinhar o texto <p align="justify">Texto Justicado............................................................................. a todo e qualquer momento............................................................................. por favor, aguarde.................... parece que j&aacute; est&aacute;</p> <p align="center">Texto Centrado............................................................................. a todo e qualquer momento............................................................................. por favor, aguarde.................... parece que j&aacute; est&aacute;</p> <p align="left">Texto Esquedo............................................................................. a todo e qualquer momento............................................................................. por favor, aguarde.................... parece que j&aacute; est&aacute;</p>
Página6
<p align="right">Texto Direito............................................................................. a todo e qualquer momento............................................................................. por favor, aguarde.................... parece que j&aacute; est&aacute;</p>
0841 Servidores Web e acesso à internet Break Exemplo: quebra <br /> Quebra de linha
Linha Horizontal Linha Horizontal Exemplo: primeiro texto <hr size="4" /> segundo texto
Titulo Escolha de títulos e alinhamento. Exemplos: <H1>Titulo1</H1> <H4 align="center"> Titulo4</H4> <H3 align="left"> > Titulo3</H3> <H6 align="center"> > Titulo6</H6> <H3 align="right"> > Titulo3</H3> <H1> Titulo1</H1>
DIV Serve para dar um alinhamento aos elementos integrados neste espaço. Exemplo: <div align="center">>primeiro texto<img src="…/images.jpg" /> segundo texto </div>
Fonte
Página6
Exemplos: <font size="5" color="black" face="arial"> Escola Secundária Marques de Castilho< font> Estabelecer os atributos da fonte. size="5" tamanho da fonte
0841 Servidores Web e acesso à internet color="black" Cor também podem ser por códigos, #000000 face="arial" tipo ou família da letra Outros Atributos Negrito <b>Texto em negrito</b> Itálico <i>Texto em itálico</i> Sublinhado <u> Sublinhado </u> Sobrescritos <sup> e </sup> Subscritos <sub> e </sub>
Listas Listas desordenadas <ul> <li>Brasil</li> <li>Espanha</li> <li>Austrália</li> </ul> Resultado • •
Brasil Espanha
•
Austrália
Listas ordenadas <p>Regras</p> <ol> <li>O professor tem sempre razão</li> <li>Em caso de dúvida, aplicar a regra 1</li> </ol>
Página6
Resultado
Regras 1. O professor tem sempre razão
0841 Servidores Web e acesso à internet 2. Em caso de dúvida aplicar a regra 1 Outros exemplos: <p>Ordenamos por números</p> <ol type="1"> <li>Elemento 1</li> <li>Elemento 2</li> </ol> <p>Ordenamos por letras</p> <ol type="a"> <li>Elemento a</li> <li>Elemento b</li> </ol>
Listas de definição <p>Futebol</p> <dl> <dt>Benfica</dt> <dd>Jogadores </dd> <dt>Beira Mar</dt> <dd>Jogadores</dd> </dl>
Resultado: Futebol Benfica Jogadores Beira Mar Jogadores Principais termos das listas de definição <dl> e </dl> (definition list). As etiquetas do elemento e sua definição são <dt> (difinition term) e <dd> (definition definition)
Página6
Tabelas As tabelas são definidas pelas etiquetas <table> e </table>. As tabelas são descritas por linhas da esquerda para a direita e são definidas inicialmente por um <tr> - Table Row </tr>. Dentro desse <tr> existem células <td> - Table Data </td>.
0841 Servidores Web e acesso à internet Atributos Célula align align="center" Formata o texto da mesma forma que se fosse o de um parágrafo. valign valign="bottom" Alinhamento vertical. bgcolor bgcolor="#000033" Cor. bordercolor bordercolor="#003366" Define a cor dos lilmites. Linhas e Tabela background background="…/images.jpg" Fundo imagem ou por url. height height="600" Define a altura da célula em pixéis ou percentagem. width width="800" Define a largura da célula em pixéis ou percentagem. colspan <td colspan="2">&nbsp;</td> Expande um célula horizontalmente. rowspan <td rowspan="2">&nbsp;</td> Expande um célula verticalmente.
Tabela Border border="0" Define o número de pixéis do limite. bordercolor bordercolor="#003366" Define a cor do limite. cellpadding cellpadding="2" Define, em pixéis, o espaço entre o limite da célula e o conteúdo da mesma.
Página6
cellspacing cellspacing="2" Define o espaço entre os limites em pixéis.
0841 Servidores Web e acesso à internet Frames O uso de frames permite que diferentes arquivos HTML componham uma só página, permitindo dividir o espaço da janela do navegador em colunas e/ou linhas e controlar o seu tamanho, determinando quantas serão as subdivisões e qual será sua distribuição na tela. <html> <head> <title>Frames</title> </head> <frameset rows="20%,*,50"> <frame src="pagina1.html"> <frame src="pagina2.html"> <frame src="pagina3.html"> </frameset> </html>
Mapas Mapas de imagens, ou seja, imagens que têm vários links associados em distintas áreas. Exemplo: <p>Click em um dos planetas: </p>
Página6
src do <img = " planets.gif " largura = " 145 " alturas = " 126 " alt= " planetas " usemap = " #planetmap "/> <map identificação = " planetmap " name= " planetmap " > forma do <area = coords do " rect " = " 0.0.82.126 " href = alvo de " sun.htm " = " _blank " alt= " Sun "/> forma do <area = coords do " círculo " = " 90.58.3 " href = alvo de " mercur.htm " = " _blank " alt= " Mercury "/> forma do <area = coords do " círculo " = " 124.58.8 " href = alvo de " venus.htm " = " _blank " alt= " Venus "/> </map>
0841 Servidores Web e acesso à internet
CSS Cascading Style Sheets, serve para centralizar código, é uma linguagem de estilos porque utiliza fontes, cores, margens, linhas, alturas, larguras, imagens de fundo, posicionamentos e muito mais, serve então para formatar conteúdos. O efeito cascata nada mais é, do que o estabelecimento de uma prioridade para aplicação da regra de estilo ao html. 1. padrão do navegador do usuário; 2. folha de estilo do desenvolvedor; o
estilo externo (importado ou linkado).
o
estilo incorporado (definido na seção head do documento);
o
estilo inline (dentro de um elemento HTML);
Na página onde devem aparecer as formatações da CSS a estrutura de chamada da folha de estilos deve ser semelhante a: <link href="css.css" rel="stylesheet" type="text/css" />
Modo de funcionamento das CSS
Seletor: é o elemento HTML identificado por sua tag, classe, etc, e para o qual a regra será Página6
válida (por exemplo: <Body>, <p>, <h1>, minhaclasse, etc...);
Propriedade: é o atributo do elemento (por exemplo: font, color, background, etc...).
0841 Servidores Web e acesso à internet Valor: é a característica assumida pela propriedade (por exemplo: letra tipo arial, cor azul,
Página6
fundo verde, etc...)
0841 Servidores Web e acesso à internet Classe As classes podem ser aplicadas a qualquer elemento HTML, pode inclusive aplicar estilos diferentes para o mesmo tipo de elemento do HTML, usando classes diferentes para cada um deles. Os nomes são criados por nós, exemplo em baixo: elemento HTML.minhaclasse { propriedade: valor; }
Background •
background-color: cor de fundo 1. código hexadecimal: #CCCCC 2. nome da cor: red, blue, green...etc 3. transparente: transparent
•
background-image: imagem de fundo 1. URL: url(caminho/imagem.gif)
•
background-repeat: repetição da imagem de fundo 1. não repete: no-repeat 2. repete vertical e horizontal: repeat 3. repete vertical: repeat-y 4. repete horizontal: repeat-x
•
background-attachment: movimento da imagem 1. imagem fixa na tela: fixed 2. imagem movimentasse com o scroll: scroll
•
background-position: posição da imagem 1. x-posição y-posição 2. x-% y-%
Página6
3. top left 4. top center 5. top right
0841 Servidores Web e acesso à internet 6. center left 7. center center 8. center right 9. bottom left 10. bottom center 11. bottom right
Exemplo da organização do código: body { background-color: #FFCC66; background-image: url("ola.gif"); background-repeat: no-repeat; }
Fonte •
color: cor da fonte 1. código hexadecimal: #CCCCCC 2. código rgb: rgb(255,205,0) 3. nome da cor: red, blue, green...etc
•
font-family: tipo de fonte 1. family-name: nome da fonte, p. ex:"verdana", "helvetica", "arial", etc. 2. generic-family: letra serifa, sem serifa, etc, p. ex:"serif", "sans-serif", "cursive", etc.
•
font-size: tamanho de fonte 1. xx-small
Página6
2. x-small 3. small 4. medium
0841 Servidores Web e acesso à internet 5. large 6. x-large 7. xx-large 8. smaller 9. larger 10. length: uma medida reconhecida pelas CSS (px, pt,) 11. % •
font-style: estilo de fonte 1. normal: fonte normal na vertical 2. italic: fonte inclinada 3. oblique:fonte obliqua
•
font-weight: 1. normal 2. bold 3. bolder 4. lighter 5. 100 6. ….
Exemplo da organização do código: h1 {font-style: italic;} h2 {font-style: normal;} p {font-weight: bold;}
Texto
Página6
•
color: cor 1. código hexadecimal: #111111 2. código rgb: rgb(255,235,0)
0841 Servidores Web e acesso à internet 3. nome da cor: red, blue, green...etc •
letter-spacing: espaçamento de letra 1. normal: default 2. lenght: uma medida reconhecida pelas CSS (px, pt, em, cm, ...) São válidos valores negativos
•
word-spacing: espaçamento de palavras 1. normal: default 2. lenght: uma medida em (px, pt) São válidos valores negativos
•
text-align: alinhamento do texto 1. left: alinha o texto a esquerda 2. right: alinha o texto a direita 3. center: alinha o texto no centro 4. justify: justifica o texto
•
text-decoration: decoração do texto 1. none: nenhuma decoração 2. underline: coloca sublinhado no texto 3. overline: coloca um sobrelinhado no texto 4. line-through: coloca uma linha em cima do texto 5. blink: faz o texto piscar
•
text-indent: recuo do texto 1. lenght: (px, pt) 2. % : porcentagem da largura do elemento pai
•
text-transform: forma das letras 1. none: texto normal 2. capitalize: todas as primeiras letras do texto em maiúsculas
Página6
3. uppercase: todas as letras do texto em maiúsculas
0841 Servidores Web e acesso à internet 4. lowercase: todas as letras do texto em minúsculas
•
direction: direcção do texto 1. ltr: texto escrito da esquerda para a direita 2. rtl: texto escrito da direita para a esquerda
Exemplo da organização do código: p {letter-spacing: 5px;} h2 {text-decoration: overline;}
Limites •
color: cor 1. código hexadecimal: #FFFFFF 2. código rgb: rgb(255,235,0) 3. nome da cor: red, blue, green...etc
•
style: estilo 1. none: nenhum limite 2. hidden: equivalente á anterior 3. dotted: limite pontilhado 4. dashed: limite tracejado 5. solid: limite contínuo 6. double: limite duplo 7. groove: limite entalhado 8. ridge: limite em ressalto
Página6
9. inset: limite em baixo relevo 10. outset: limite em alto relevo •
width: espessura
0841 Servidores Web e acesso à internet 1. thin: limite fino 2. medium: limite de espessura média 3. thick: limite de espessura grossa 4. length: uma medida reconhecida pelas CSS (px, pt) Exemplo da organização do código: h2 { border-width: 20px; border-style: solid; border-color: red; }
Pseudo classes Uma pseudo-classe permite estilizar as hiperligações de acordo com o estado do link ou seja visitado, não visitado, activo ou com o ponteiro do mouse sobre o link.
:link é usada para links não visitados. Exemplo: a:link {color: #CCCCCC;}
:visited é usada para links visitados. Exemplo: a:visited {color: Black;}
:active é usada para links ativos. Exemplo: a:active{color: Black;}
:hover é usada para quando o ponteiro do mouse está sobre o link. Exemplo: a:hover{color: green;}
Página6
Outras Questões Exemplo se usar o código .selector{propriedade:valor} tem a possibilidade de chamar esse selector sempre que necessário, se utilizar pelo contrário este código h1 {font-size: 30px;, este código aplicasse sempre ao Heading 1.
0841 Servidores Web e acesso à internet Página WEB
Página6
Exemplo como chamar o código: <h3 class="chamado">T1</h3> Código CSS .chamado {color: #00000}.
0841 Servidores Web e acesso à internet Formulários Os formulários servem para dar feedback dos usurários das páginas Web. Para tal usam-se elementos especiais de controlo (caixas de selecção, botões de rádio, menus, etc.) e as respectivas etiquetas. Os usurários "completam" um formulário ao modificar os seus controlos (inserindo o texto, seleccionando os itens do menu, etc.), antes de o submeter. Eis aqui o exemplo de um formulário simples incluindo etiquetas, botões de rádio e botões de selecção (para esvaziar ou submeter o formulário): <FORM action="http://somesite.com/prog/adduser" method="post"> <P> <LABEL for="firstname">Primeiro nome: </LABEL> <INPUT type="text" id="firstname"><BR> <LABEL for="lastname">Último nome: </LABEL> <INPUT type="text" id="lastname"><BR> <LABEL for="email">Email: </LABEL> <INPUT type="text" id="email"><BR> <INPUT type="radio" name="sex" value="Male"> Masculino<BR> <INPUT type="radio" name="sex" value="Female"> Feminino<BR> <INPUT type="submit" value="Enviar"> <INPUT type="reset" value="apagar"> </P> </FORM>
Atributos Acção action OURL para onde se envia a informação submetida. Método method get Este método envia os dados através do URL: name=value&name=value. Nota: Se o formulário tiver caracteres que não sejam ASCII ou excedem 100 caracteres usa-se o método post. method post Este método envia os dados através do corpo do pedido.
Página6
Name nome do formulário Target _blank, _self, _parent, _top - Local onde abrir a página alvo.
0841 Servidores Web e acesso à internet Elementos do Form
Podemos inserir vários tipos de entrada de dados num formulário, a maioria delas definidas pela tag input. Todos os elementos possuem um parâmetro name que é utilizado para identificar a variável onde o dado está contido no script destino.
Campo Texto Campo para entrada de texto comum.
Parâmetros Size – O tamanho do elemento em caracteres. Maxlength – É o tamanho máximo do texto que pode ser inserido no elemento. Value Um valor do elemento Campo Senha – substituição por estrelas nas palavras passe. exemplo type="password"
Radio button Botão Rádio Utilizado para entradas de escolha múltipla onde o usuário só pode escolher uma única opção.
<input type="radio" name="sex" value="Male" />
Parâmetros Checked – Se for declarado o elemento terá seu estado inicial como seleccionado. Value – É o valor que será passado à página destino quando o formulário é submetido se este elemento estiver selecionado.
Botão Submeter Botão que submete o formulário para a página de destino especificada no parâmetro action do form.
<INPUT type="submit" value="Enviar">Parâmetros
Parâmetros
Página6
Value – O texto que aparecerá no Botão.
0841 Servidores Web e acesso à internet Botão Reset faz um reset dos valores. <INPUT type="reset" value="apagar"> Parâmetros Value – O texto que aparecerá no Botão.
CGI Common Gateway Interface
Página6
Consiste numa tecnologia que permite gerar páginas dinâmicas, permitindo a um navegador 8 browser) passar parâmetros para um programa alojado num servidor Web (exemplo Alojamento da SAPO). OS scripts CGI são programas que interpretam esses parâmetros e geram a página depois de os processar, como se através de alguma introdução de dados pelos utilizadores mas respeitando sempre os templates anteriormente criados.