Aprofundando o HTML CRD – Filipe Pacheco.

Aprofundando o HTML CRD – Filipe Pacheco

Cabeçalhos e Corpo <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <html> </html> <head> </head> Título, palavras chave, etc, etc… <body> </body> Conteúdo da página propriamente dito

Tags básicas <h1>, <h2>,... <h6> : cabeçalhos e títulos no documento em diversos tamanhos. (quanto menor for o número, maior será o tamanho da letra) <p>: um parágrafo. <br/>: quebra de linha. <table>: cria uma tabela (linhas são criadas com <tr> e novas células com <td>. A linha dos cabeçalhos de coluna é criada com a etiqueta <th>.) <div>: determina um bloco de texto na página a qual pode possuir variadas formatações. <b>, <i>, <u> : negrito, itálico, sublinhado, respectivamente. <img />: imagem. <a>: hiperligação para um outro local, seja uma página, endereço de ou outro serviço. Nota: excepto para <br /> e <img />, todas as tags aqui listadas devem ter uma tag de início e outra de fim

Um documento HTML básico
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <html> <head> <title>Index of /~ffp/crd</title> </head> <body> <h1>Index of /~ffp/crd</h1> <img src="/icons/blank.png" alt="Icon "> <a href="?C=N;O=D">Name</a> <a href="?C=M;O=A">Last modified</a> <a href="?C=S;O=A">Size</a> <a href="?C=D;O=A">Description</a><hr /> <img src="/icons/back.png" alt="[DIR]"> <a href="/~ffp/">Parent Directory</a> - <img src="/icons/unknown.png" alt="[ ]"> <a href="Bin%c3%a1rio,%20Hexadecimal,%20Decimal.pptx">Binário, Hexadecimal, Decimal.pptx</a> 27-Sep :10 72K <img src="/icons/unknown.png" alt="[ ]"> <a href="HTTP_HTML.pptx">HTTP_HTML.pptx</a> 17-Nov :50 69K<br /> <img src="/icons/compressed.png" alt="[ ]"> <a href="TCPExample.zip">TCPExample.zip</a> 10-Nov :03 128K<br /> <img src="/icons/compressed.png" alt="[ ]"> <a href="TCPExample_v2.zip">TCPExample_v2.zip</a> 10-Nov :09 164K<br /> </body></html>

Headings <h1> - <h6>
Permitem definir títulos, sub-títulos, etc. Exercício: Fazer copy&paste do documento HTML do slide anterior para o notepad Gravar o ficheiro com extensão “.html” (garantir que não grava como .txt selecionando “View All Files” na janela de escolha do ficheiro) Abrir o ficheiro num browser (Internet Explorer, Mozilla Firefox, Google Chrome, etc…) Experimentar as tags <h1> a <h6> no código HTML Ter o cuidado de usar sempre a tag de início (e.g. <h1>) e de fim (e.g. </h1>)

Parágrafos e Linhas<p> <br />
Permitem definir parágrafos e quebras de linha Parágrafos: iniciados por <p>, terminados por </p> Quebras de Linha: com <br /> Exercício: Fazer copy do texto seguinte e inserir o mesmo num documento HTML já existente no notepad Novas concessões nas renováveis penalizam consumidores Lurdes Ferreira As contrapartidas financeiras que o Estado cobrou às energias renováveis à cabeça permitiam reduzir em 55 por cento o défice tarifário que sobrecarrega especialmente os consumidores domésticos. 27 Comentários170+ ECONOMIA Sector eléctrico comparado a sistema fiscal Modelo vai mudar, admite Carlos Zorrinho Fundo das eólicas paga pavilhão de Xangai Usar <p> e <br /> para que as linhas apareçam correctamente no browser… ver as diferenças entre usar <p> e <br />

Estilos básicos <i>, <b> e <u>
Permitem marcar texto em itálico (<i>), negrito/bold (<b>) e sublinhado/underline (<u>) Podem ser combinados entre si, por exemplo: <i>Olá <b>Mundo</b>! Isto é um <u>teste</u></i> Ficará como: Olá Mundo! Isto é um teste Ter cuidado para fechar correctamente as tags (para cada <i> deve haver sempre um </i> mais tarde no texto) Exercício: Usar o mesmo exemplo do slide anterior e experimentar as diversas formatações

Imagens <img … />
Formato básico: <img src=“nomedaimagem.jpg” /> Apresenta a imagem nomedaimagem.jpg que tem de existir no mesmo local do ficheiro .html Para apresentar uma imagem num servidor, usar o endereço completo da mesma: <img src=“ /> Note-se que é o endereço da Imagem… não da página HTML!

Ligações <a> Fazer ligação para outro site:
<a href=“ Público</a> Fazer ligação para outro documento HTML que está no mesmo local: <a href=“pagina2.html”>Página 2</a> Abrir ligação numa nova janela: <a href=“ target=“_blank”>Jornal Público</a> Colocar descrição na ligação: <a href=“ target=“_blank” title=“Abre numa nova janela”>Jornal Público</a>

Ligações <a> - Âncoras
É possível fazer uma ligação para uma secção específica de uma página Na página de destino, marcar a secção com: <a name=“seccao”></a> Na ligação usar # e o nome da secção de destino: <a href=“#seccao”>Saltar para a Secção</a> Também funciona para sites ou outras páginas <a href=“ /2008</a>

Aprofundando o HTML CRD – Filipe Pacheco.

Apresentações semelhantes

Apresentação em tema: "Aprofundando o HTML CRD – Filipe Pacheco."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback

Login

Autorizar-se através da rede social:

Aprofundando o HTML CRD – Filipe Pacheco.

Apresentações semelhantes

Apresentação em tema: "Aprofundando o HTML CRD – Filipe Pacheco."— Transcrição da apresentação:

Apresentações semelhantes

Sobre projeto

Feedback