HTML

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á está</p> <p align="center">Texto Centrado............................................................................. a todo e qualquer momento............................................................................. por favor, aguarde.................... parece que já está</p> <p align="left">Texto Esquedo............................................................................. a todo e qualquer momento............................................................................. por favor, aguarde.................... parece que já está</p>

Página6

<p align="right">Texto Direito............................................................................. a todo e qualquer momento............................................................................. por favor, aguarde.................... parece que já está</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"> </td> Expande um célula horizontalmente. rowspan <td rowspan="2"> </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.


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.