Download
1 / 32
320 likes | 398 Views
Faculdades Integradas Santa Cruz. Curso Básico de HTML Professor: Julio Eduardo Martins. Introdução. O que é uma página WEB? É um documento composto por texto e códigos especiais chamados tags ; Pode conter também sons, imagens, links para outros documentos e códigos de programação;
E N D
Faculdades Integradas Santa Cruz Curso Básico de HTML Professor: Julio Eduardo Martins
Introdução • O que é uma página WEB? • É um documento composto por texto e códigos especiais chamados tags; • Pode conter também sons, imagens, links para outros documentos e códigos de programação; • As páginas podem ser codificadas em um editor de texto comum.
Introdução (2) • As páginas são “interpretadas” pelo Browser e apresentadas; • O código HTML é independente de plataforma, sistema operacional ou hardware.
HTML • HTML não é uma linguagem em si; • Trata-se apenas de comandos específicos para formatação e apresentação de componentes gráficos. • HTML - Hypertext Markup Language
HTML (2) • Todo o HTML é estruturado em tags. • Uma tag tem o seguinte formato: • <nome_da_tag>Conteudo_da_tag</nome_da_tag> • A grande maioria das tags ocorre em pares e pode ser utilizada de maneira aninhada.
Estrutura Básica de uma Página <html> <head> <title> Titulo da Página </title> </head> <body> <p> Parágrafo 1 </p> </body> </html>
Cabeçalhos • Tags de cabeçalho servem para definir tópicos em um documento HTML. • Os tipos de cabeçalhos podem ser: • <h1> Cabeçalho nível 1 </h1> • <h2> Cabeçalho nível 2 </h2> • <h3> Cabeçalho nível 3 </h3> • <h4> Cabeçalho nível 4 </h4> • <h5> Cabeçalho nível 5 </h5> • <h6> Cabeçalho nível 6 </h6>
Espaços • Espaços em branco não tem sentido em HTML. O browser substitui qualquer seqüência de espaços por um único espaço simples. • Se quisermos forçar uma sequencia de espaços em branco, devemos substituir o espaço em branco por  
Quebras de Linha • Para produzir uma quebra de linha em HTML não basta apenas dar <enter> no código. • É preciso utilizar um caractere especial: <br/>
Parágrafos • Uma forma mais simples e correta de produzir um parágrafo em um documento HTML (melhor do que colocar uma sequencia de quatro  ) é utilizar a tag: <p> Conteúdo_do_Parágrafo</p>
Formatação de Caractere • <b> Texto_em_negrito </b> • <i> Texto_em_itálico </i> • <u> Texto_sublinhado </u> • <sup> Texto_sobrescrito </sup> • <sub> Texto_subscrito </sub> • <blink> Texto_piscante </blink>
Formatação de Caractere (2) • <em> Texto_com_ênfase </em> • <strong> Texto_mais_enfático </strong> • <big> Tamanho_grande </big> • <small> Tamanho_pequeno </small>
Texto sem formatação • Algumas vezes se faz necessária a apresentação de texto sem qualquer formatação adicional realizada pelo browser. Para isto, temos a tag: <pre> Texto_sem_formatação </pre>
Formatação de Fonte • Para formatar a fonte dos carteres a tag é: <font size=n face=nome color=cor> Onde: n : Tamanho da fonte; face: Nome da fonte; color: cor da fonte em RGB ou nome.
Listas • Existem alguns tipos de listas. São elas: • Listas Ordenadas: <ol> • Listas Não Ordenadas: <ul>
Listas (2) • Exemplos: • Listas Ordenadas: <ol> <li> Item 1 </li> <li> Item 2 </li> </ol>
Listas (3) • Exemplos (2): • Listas não ordenadas: <ul> <li> Item 1 </li> <li> Item 2 </li> </ul>
Links • Links em uma mesma página: • É possível criar links direcionados para uma mesma página. Para tal, primeiramente é necessário criar uma âncora (ponto de referência para onde o link irá apontar) <a name=“#Nome da âncora”>Texto em destaque</a>
Links (2) • Links em uma mesma página (2): • Para criar um link que aponte para a âncora previamente estabelecida a sintaxe é: <a href=“#Nome da âncora”>Texto usado como hipertexto</a>
Links (3) • Links para outras páginas: • Para direcionar um link para uma outra página basta usar a sintaxe: <a href=“intro.htm”>Introdução</a> <a href=“conceitos.htm#parte2”>Conceitos Básicos</a> <a href=“biblio/refer.htm”>Referências</a> <a href=“www.juliomartins.net/index.htm”>Legal</a>
Imagens • Geralmente GIF, JPG ou PNG • Sintaxe: <IMG SRC=“arquivo.gif”> <IMG ALiGN=“top/middle/BOTTOM” SRC=“paisagem.jpg”> <IMG SRC=“arquivo.gif” HEIGHT=100 WIDTH=165> <A HREF=“livro-bd.htm”> <IMG SRC=“korth.gif”> </A>
Cores e Fundos • Você pode alterar as cores e alguns padrões alterando atributos da tag <body>: <body bgcolor=#000000 text=#EEEEBB link=#33CCFF vlink=#CC0000> <BODY BACKGROUND=“marmore.gif”>
Endereço e Rodapé de Página • Para dar informações adicionais sobre a data de criação e o autor da página usamos a tag: <address> Informações </address>
Tabelas • As tabelas servem para a apresentação de informação de forma tabular, porém são também um poderoso recurso para a definição do layout de uma página HTML.
Tabelas (2) • Tags: • <table> : Indica o início de uma tabela • <caption>: Cria uma legenda para a tabela • <tr> : (table row) – Cria uma linha na tabela • <td> : (table data) : Define os dados de uma celula • <th> : (table header) : Faz o mesmo que o <td> porém com a formatação diferenciada
Tabelas (3) • Atributos importantes: • align : Define o alinhamento horizontal da célula • valign: Define o alinhamento vertical da célula • colspan: Indica quantas colunas da tabela a célula deve ocupar • rowspan: Indica quantas linhas da tabela a célula deve ocupar • border: Define a espessura da borda da tabela • width: Define a largura da tabela (em % ou absoluta)
Frames • Os frames (molduras) permitem apresentar mais de uma página HTML na tela, simultaneamente. • É necessário, inicialmente, criar um documento especial que contém as definições de todas as janelas.
Frames (2) <frameset cols=tamanho frameborder=1/0 framespacing=espaçamento rows=tamanho> <frame name=nome scrolling=yes/no noresize src=endereço> . . . </frameset>
Frames (3) • Exemplo <html> <frameset cols=30%, * > <frame name=“menu” SRC=“indice.htm”> <frame name=“texto”> </frameset> </html>
Frames (4) <html> <head><title>Menu Principal</title> <base target=“texto”> </head> <body> . . . </body> </html>
Faculdades Integradas Santa Cruz Curso Avançado de HTML Professor: Julio Eduardo Martins
