Html - capitulo 05
0 gostou405 visualizações
Este documento apresenta os principais elementos de uma página HTML, incluindo tags, estrutura básica e elementos como títulos, imagens, texto e links. Explica tags importantes como <HTML>, <HEAD>, <TITLE> e <BODY> e como formatar texto usando tags como <H1-H6>, <B> e <I>.
Html - capitulo 05
- 1. AG8 Informática 3ª PARTE 30 CAPÍTULO 05 Este capítulo abrangerá : 1. Uma linguagem de marcação: HTML. 2. Tags ou comandos 3. Elementos que compõem uma página HTML
- 2. AG8 Informática HTML: UMA LINGUAGEM DE MARCAÇÃO A HTML é uma linguagem de marcação. Criar um documento em uma linguagem de marcação significa que você começa com o texto da sua página e inclui tags especiais no início e no final de determinadas palavras ou parágrafos. As tags indicam as diversas partes da página e produzem diferentes 31 efeitos no navegador. Os arquivos recebem a extensão .html e possuem como ícone a seguinte imagem: O ícone a esquerda pertence ao Netscape e o a direita ao Internet Explorer 5. A primeira página a ser exibida geralmente recebe o nome de index.htm ou .html, dependendo do provedor que hospeda a página. As tags normalmente são especificadas em pares, delimitando um texto que sofrerá algum tipo de formatação. As tags são identificadas por estarem entre os sinais < > e < / >. Entre os sinais < > são especificados os comandos propriamente ditos. No caso de tags que necessitam envolver um texto, sua finalização deve ser feita usando-se a barra de divisão /, indicando que a tag está finalizando a marcação de um texto. O formato genérico de uma tag é: <nome da tag> texto</nome da tag> Mas algumas tags não possuem finalização. Vejamos agora alguns comandos e o tipo de efeito que estes causam ao texto quando interpretados pelo browser. Assim como outras linguagens, a HTML possui uma estrutura básica para seus programas. Para que um browser interprete corretamente o
- 3. AG8 Informática programa, ele deve possuir alguns comandos básicos que sempre deverão estar presentes. Alguns browsers até dispensam seu uso, porém é melhor assumir como parte fundamental do programa tais comandos. Um programa HTML possui três partes básicas, a estrutura principal, o cabeçalho e o corpo do programa. Todo programa deve iniciar com o comando, tag, <html> e ser encerrado com o comando </html>. Esse par de comandos é essencial. A área de cabeçalho é opcional e é delimitada pelo par de comandos <head> e </head>. Estes comandos para cabeçalho são usados para especificar alguns poucos comandos da linguagem. Eles são opcionais, ou seja, um programa HTML pode funcionar sem eles. Mas é conveniente usá-los, pois o título da página é acrescentado através deles.E ainda temos as tags <Title> e </Title>, estes comandos delimitam o texto que irá aparecer na barra de título do browser. A maioria dos comandos será especificado no corpo do programa que é 32 delimitado pelas tags <body> e </body>. É um comando obrigatório. <HTML> <HEAD> </HEAD> <BODY> </BODY> </HTML> <HTML> </HTML> Esta tag marca o início do programa HTML <HEAD> </HEAD> Esta tag marca início e fim de cabeçalho <TITLE> </TITLE> Esta tag delimita o texto que irá ser visualizado na barra de título do browser. <BODY> </BODY> Esta tag delimita o corpo do programa, aonde a maior parte do comando serão colocados
- 4. AG8 Informática 33 1. OS PRINCIPAIS ELEMENTOS DE UMA PÁGINA HTML Uma página HTML é composta basicamente de títulos, textos, parágrafos, imagens e links, responsáveis pela chamada de outras páginas para a tela. Todos esses elementos são posicionados na página por meio de comandos específicos da linguagem. TÍTULO É o texto que aparece na barra de título do browser. IMAGEM São figuras, desenhos e fotos usados para ilustrar a página. TEXTO É a informação mais comum dentro da página. Pode ser formatado através de vários comandos. LINK É um trecho que aparece destacado do restante do texto, normalmente sublinhado e com outra cor. Ao clicar no link, o browser acessa outra região da página atual ou uma página localizada em qualquer lugar da Internet. Uma figura também pode ser usada como um link, ou seja, clicando na figura saltamos para outro local. CABEÇALHO São linhas de texto com tamanhos especiais. Existem seis tamanhos prefixados de cabeçalho.
- 5. AG8 Informática 34 TÍTULO IMAGEM CABEÇALHO TEXTO 2. TÍTULO LINK O título de uma página web indica qual o assunto abordado e irá aparecer na barra de título do browser. Este título é utilizado por programas de lista (hotlist) do seu navegador e também por outros programas que catalogam páginas da Internet. Para atribuir um título a página você deverá utilizar a tag: <Title> </Title>. Esta tag sempre será incluída no cabeçalho (entre as tags <Head> </Head> e descrevem a mesma). Considerações sobre o título: 1. Você poderá ter apenas um título 2. texto deverá ser simples e não poderá ter outras tags 3. Escolha um texto curto e que descreva o conteúdo da página
- 6. AG8 Informática 35 3. CABEÇALHOS Os cabeçalhos são usados para dividir seções do texto, como capítulos de um livro. A HTML divide seis tamanhos de cabeçalhos, de H1 a H6, que aplicam um tamanho de fonte diferenciado no texto que envolvem, uma linha antes e depois e além disso dão um efeito de negrito. O maior tamanho é o H1 e o menor é o H6. <H1> Texto </H1> Experimente o seguinte código: </html> <head><title>Cabeçalhos</title></head> <body> <h1>C</h1> <h2>A</h2> <h3>B</h3> <h4>E</h4> <h5>ç</h5> <h6>A</h6> <h5>L</h5> <h4>H</h4> <h3>O</h3> <h2>S</h2> </body> </html> Vejamos um exemplo de outro código em HTML: <html> <head><b> A FORMAÇÃO DE UM WEBMASTER</b></HEAD> <body> <p> A formação de um <i>Webmaster</i> envolve diversos tipos de conhecimentos.<br> Afinal, ele será o responsável pela administração de um site. </body> </html> Em nosso exemplo introduzi mais algumas tags. Os comandos:
- 7. AG8 Informática 36 <B> </B> Aplica o estilo negrito ao texto <I> </I> Aplica o estilo itálico ao texto. <P> </P> Inicia um novo parágrafo. <BR> Faz uma quebra de linha. 4. PARÁGRAFOS Para forçar o início de um novo parágrafo, ou seja, avançar uma linha em branco e iniciar o texto na Segunda linha após o final do parágrafo anterior, deve ser usado o comando <p>. Esse comando pode aparecer individualmente ou em par: <p> </p>. Quando um comando <p> é inserido em um local do programa, o browser irá sempre avançar uma linha em branco, posiciona-se na linha seguinte ao comando <p>. 5. QUEBRA DE LINHA O comando <br> faz uma espécie de quebra de linha. Este comando inseri uma linha em branco no seu local ou na linha seguinte á qual ele foi inserido, caso esteja no meio de uma linha e não em seu final. A função deste comando é avançar para a linha imediatamente após aquela em que ele ocorre.
- 8. AG8 Informática 37 EXERCÍCIOS 1. Qual a extensão de um arquivo de um programa em HTML? 2. A primeira página de um site geralmente recebe que nome? 3. Escreva a estrutura básica de um programa HTML. 4. Quais os principais elementos exibidos em uma home page? 5. O que é link? 6. Qual as função das tags abaixo: a) <HTML> </HTML> b) <HEAD> </HEAD> c) <TITLE> </TITLE> d) <H2> </H2> e) <BODY> </BODY> f) <B> </B> g) <I> </I> h) <P> i) <BR> 7. Utilize o que você já aprendeu nesta seção e crie seu primeira página HTML. Use a linguagem HTML e faça uma página falando das suas expectativas para este curso, como pretende usar o conhecimento que está adquirindo e quais outros cursos que pretende fazer. Seu texto deve ter no máximo 5 linhas. Salve na unidade A: com o nome de projetos.html. 8. Faça um página utilizando os comandos que você já conhece para falar sobre uma pessoa. Pode ser alguém que você admire, do seu círculo de amigos, ou uma pessoa pública (ator, atriz, etc). Seu texto deve ter no máximo 5 linhas. Salve na unidade A: com o nome de Pessoa admirável.html. ANOTAÇÕES