Page 1

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.

HTML  

HTML code manual

Read more
Read more
Similar to
Popular now
Just for you