Carregar apresentação
A apresentação está carregando. Por favor, espere
1
Html 4 – Formatação de Páginas
Disciplina de Internet –QI – Aula 4 – Teórica-Prática Prof. Luciano Monteiro
2
Apresentação A linguagem HTML ( Hypertext Markup Language - Linguagem de Marcação de Hipertexto) é usada para criar as páginas divulgadas na World Wide Web, o serviço mais popular da Internet. É com ela que são feitos os hyperlinks que permitem navegar pela Web. Para isso, utiliza marcações, chamadas tags, no ponto da página em que é feito um hyperlink com outra página.
3
Apresentação No linguajar da Web, dizemos que aquele hyperlink aponta para outra página. Clicando sobre aquela palavra ou frase, essa outra página será aberta. Ela pode estar no mesmo computador que a página original ou em qualquer lugar do mundo. Além de palavras e frases, imagens também podem ser usadas como hyperlinks. Além das tags para criação de hyperlinks, existem tags que permitem inserir imagens, formatar texto, criar páragrafos, enfim, definir a aparência e a funcionalidade geral de uma página, e até executar programas.
4
Apresentação A linguagem HTML dispõe de uma grande quantidade de tags, cada uma com uma função diferente. O conjunto de tags representa um recurso poderoso para criação de páginas interativas. O mais importante é que HTML é extremamente fácil de usar. Tudo é feito com texto simples. As tags são palavras-chave contidas entre os sinais < e >
5
Apresentação Existem dois tipos de tags. Alguns são formados aos pares, indicando o início e o fim do trecho afetado, como exemplo: <H1> e </H1>. Outros podem ser colocados individualmente, como o <P> , que simplesmente insere um espaço para dividir parágrafos.
6
Tags Básicos (Estrutura)
Função Abre com Parâmetros Fecha com Comando Mestre <html> nenhum(a) </html> Área de Cabeçalho <head> </head> Título do documento <title> </title> Comentários <!-- --> Corpo do programa <body> background="NomeArquivo" bgcolor="XXXX" text="XXXX" link="XXXX" vlink="XXXX" </body>
7
Exemplo
8
Tags de Texto (formatação)
Finalidade Tag Parâmetros Fecha com Quebra de Linha <br> clear=left/right/all nenhum(a) Parágrafo <p> align=center/right </p> Negrito <b> </b> Itálico <i> </i> Texto de máquina <tt> </tt> Cabeçalho <h1-6> </h1-6> Fonte <font> face="nome,nome" size=+/-XXX color="XXXX" </font> Linha divisória <hr> size=XX width=XX/XX% noshade Block Quote <blockquote> </blockquote> Divisão <div> align=left/center/right </div>
10
Comandos de Lista Finalidade Tag Parâmetros Fecha com
Lista não ordenada <ul> type=disc/circle/square </ul> lista ordenada <ol> type=I/A/1/a/i start=XX </ol> Item de Lista <li> type=all ul e ol nenhum(a) Lista de Definição <dl> </dl> item de Lista de Definição <dt> Definição da lista <dd>
12
Image Tags Finalidade Tag Parâmetros Fecha com Inserção de Imagem
<img> src="NomeArquivo" align=left/right width=XXX height=XXX alt="text" ISMAP USEMAP="#NomeDoMapa" nenhum(a)
13
Comandos de Link Finalidade Tag Parâmetros Fecha com Ancôra <a>
href="NomeArquivo" target="NomeDaJanela" </a> Marca de ancôra name="nomedamarca" nenhum(a)
14
Comandos de Tabela Finalidade Tag Parâmetros Fecha com Table
border=X width=X cellspacing=X cellpadding=X bgcolor="XXXX" </table> Table Row <tr> align=left/center/right valign=top/middle/bottom </tr> Table Data <td> nowrap colspan=X rowspan=X </td>
15
Comandos de Tabela Finalidade Tag Parâmetros Fecha com Table Header
<th> align=left/center/right valign=top/middle/bottom width=X nowrap colspan=X rowspan=X bgcolor="XXXX" </th> Caption <caption> </caption>
16
Exemplo1 - Tabelas <html>
<title>Tabela usando os parâmetros de TABLE</title> <body> <table border = 1 width = 50% cellpadding = 5 bgcolor skyblue> <caption> 1º exemplo de tabela</caption> <tr> <th>-</th> <th>coluna 1 </th> <th>coluna 2 </th> </tr> <th>Linha 1 </th> <td>Célula 1-1 </td> <td>Célula 1-2 </td> <th>Linha 2</th> <td>Célula 2-1 </td> <td>Célula 2-2 </td> </table> </body> </html> 1º exemplo de tabela - coluna 1 coluna 2 Linha 1 Célula 1-1 Célula 1-2 Linha 2 Célula 2-1 Célula 2-2
17
Exemplo2 - Tabelas <html>
<title>Tabela usando os parâmetros de TABLE</title> <body> <table border = 1 width = 50% cellpadding = 5 bgcolor skyblue> <caption> 1º exemplo de tabela</caption> <tr> <th rowspan=2>Linha 1</th> <th>coluna 1 </th> <th>coluna 2 </th> </tr> <td>Célula 1-1 </td> <td>Célula 1-2 </td> <th rowspan=2>Linha 2</th> <td>Célula 2-1 </td> <td>Célula 2-2 </td> <td>Célula 3-1 </td> <td>Célula 3-2 </td> </table> </body> </html> 1º exemplo de tabela Linha 1 coluna 1 coluna 2 Célula 1-1 Célula 1-2 Linha 2 Célula 2-1 Célula 2-2 Célula 3-1 Célula 3-2
18
Exemplo3 - Tabelas <html>
<title>Tabela usando os parâmetros de TABLE</title> <body> <table border = 1 width = 50% cellpadding = 5 bgcolor skyblue> <caption> 1º exemplo de tabela</caption> <tr> <th>-</th> <th colspan=2>coluna 1 </th> <th colspan=2>coluna 2 </th> </tr> <th>Linha 1</th> <td>Célula 1-1 </td> <td>Célula 1-2 </td> <td>Célula 1-3 </td> <td>Célula 1-4 </td> <th>Linha 2</th> <td>Célula 2-1 </td> <td>Célula 2-2 </td> <td>Célula 2-3 </td> <td>Célula 2-4 </td> </table> </body> </html> - coluna 1 coluna 2 Linha 1 Célula 1-1 Célula 1-2 Célula 1-3 Célula 1-4 Linha 2 Célula 2-1 Célula 2-2 Célula 2-3 Célula 2-4
Apresentações semelhantes
