Roteiro 2: Conceitos de Tags HTML

Tamanho: px

Começar a partir da página:

Download "Roteiro 2: Conceitos de Tags HTML"

Victor Gabriel Casado Palha
10 Há anos
Visualizações:

1 Roteiro 2: Conceitos de Tags HTML Objetivos Detalhar conceitos sobre TAGS HTML: elementos, atributos, elemento vazio, links. Implementar páginas de internet com uso da linguagem HTML; Ferramentas Necessárias NotePad ++, Navegador de internet Introdução Este roteiro apresenta um detalhamento sobre TAGS e sua utilização no desenvolvimento de páginas HTML. Serão exploradas várias características da linguagem HTML necessárias para o desenvolvimento de páginas. <TAG> É utilizada na linguagem HTML para realizar a marcação de conteúdos de páginas. Normalmente as TAGS costumam ser inseridas aos pares, sendo utilizada uma tag de abertura < e uma tag de fechamento > circundando o comando a ser inserido. Ex: <h1 > inserindo um título </h1>. Elemento HTML: é sobre como identificamos os itens que são programados internamente a uma página. Normalmente podemos nos referir aos itens <h1>, <p>, <br />, etc. como Elemento HTML. Desta forma estaremos mais adequados aos padrões utilizados atualmente. Elemento vazio: São elementos que são representados apenas pela tag de abertura <>, e não possuem uma tag de fechamento. São chamados de elementos vazios, cuja principal característica é não possuírem conteúdos e se destinarem a fornecer informações adicionais para a renderização do documento. Ex: <br /> Comentários: Consistem em regiões de código que são ignoradas pela execução do programa. No caso de páginas HTML funcionam da mesma forma que comentários existentes em qualquer programa desenvolvido em outras linguagens. Para inserir um comentário HTML utilizamos o marcador . Ex: <-- este código não será renderizado pelo navegador. --> Atributos: controlam as configurações disponíveis em um elemento inserido na sua página, como exemplo, se inserir um parágrafo é possível controlar configurações como largura, tamanho do texto, etc. A sintaxe de escrita de um atributo consiste na escrita do nome do atributo seguido do seu valor colocado entre aspas. Exemplo: <body text = #D2B48C> OBSERVAÇÃO: Devido ao HTML estar em nova fase de mudanças atualmente, alguns atributos para determinados elementos não são mais utilizados, sendo trocados para o uso de CSS (cascading Style Cheets) para a sua formatação correta. Pág 13

desenvolvimento de páginas HTML. Serão exploradas várias características da linguagem HTML necessárias para o desenvolvimento de páginas.

2 XHTML É uma evolução da Linguagem HTML. Não se trata de outra linguagem, porém é o próprio HTML padronizado de forma a ser mais compatível com alguns programas e também com os navegadores que foram se modernizando ao passar do tempo. A sintaxe HTML não costuma ser muito exigente com tags de elementos escritas em maiúsculas ou minúsculas. Porém a sintaxe XHTML é sensível ao tamanho de letras(case sensitive), e devemos sempre escrever tags, nomes de atributos e demais comandos sempre em minúsculas para adaptarmos nossas páginas tanto em linguagem HTML quanto em XHTML. TAGS HTML adicionais: TAG ATRIBUTO DEFINIÇÃO Exemplo de uso <img> width Quanto utilizada permite o controle da largura de elementos, muito utilizada para controlar larguras de imagens e de páginas. Seu padrão de medida utilizada é em pixels. height Quanto utilizada permite o controle da altura de elementos, muito utilizada para controlar alturas de imagens e de páginas. Seu padrão de medida é em pixels. <img src = imagens/senac.jpg width = 200px heigth = 100 /> #insere uma imagem com tamanho de 200 x 100 pixels. src Conhecido como source, e define o caminho de origem da imagem que está sendo inserida na página. <body> bgcolor Modifica a cor de fundo da página, aceita cores em nome, hexadecimal e rgb. <ol> <ul> <p> <table> text leftmargin rightmargin topmargin bottommargin Modifica a cor do texto da página, aceita cores em nome, hexadecimal e rgb. Controla a margem da esquerda, medida padrão em pixels. Controla a margem da direita, medida padrão em pixels. Controla a margem superior, medida padrão em pixels. Controla a margem inferior, medida padrão em pixels. Elemento de lista ordenada, destinado a servir de container para itens de listas ordenadas. Trabalha em conjunto com os seus subitens <li> Elemento de lista não ordenada, destinado a servir de container para itens de listas não ordenadas. Trabalha em conjunto com os subitens <li>. Destinado a realizar a criação de parágrafos, marca todo o texto inserido entre as TAGS inicial e final como um parágrafo de texto, inserindo um espaçamento entre todos os parágrafos automaticamente. Destinado a realizar a criação de tabelas. Utilizado em conjunto com as tags <tr> para a criação de linhas e <td> para a criação de colunas. Possui configurações adicionais que podem ser exploradas posteriormente. <body bgcolor = red > #formata o corpo do documento para cor vermelha. <body bgcolor = red text = blue > #formata o corpo da página para fundo vermelho e cor de texto azul. <ol> </ol> <ul> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> <li>elemento 1</li> <li>elemento 2</li> <li>elemento 3</li> </ul> <p> este é um parágrafo.</p> <p> este é outro parágrafo.</p> <table> <tr> <td>coluna 1</td> <td>coluna 2</td> </tr> <tr> Pág 14

A sintaxe HTML não costuma ser muito exigente com tags de elementos escritas em maiúsculas ou minúsculas.

3 <td>coluna 1</td> <td>coluna 2</td> </tr> 1.1 O elemento Link <A> É possível definir links de hipertexto com uso do elemento <A> no seguinte formato: <a> texto de link </a>. O conteúdo do elemento <a> torna-se clicável na página web. Normalmente este elemento é utilizado em conjunto com o atributo href, que diz ao browser qual será o destino do link criado. Exemplos: <a href = Texto de link</a> <a href = /site/admin/config.html >Configurações do site</a> TAG ATRIBUTO DEFINIÇÃO href Define para qual destino será apontado o link. O mesmo pode ser um endereço externo de uma página ou o endereço local para uma página de sua estrutura de sites, ou mesmo para um arquivo em disco. Define em qual local será carregado o link clicado, as configurações mais comuns a estes são: <a> target _blank Para direcionar o link para uma nova janela _top Para direcionar o carregamento do link para um frame (quando utilizados) _self Para direcionar o carregamento do link para substituir os frames existentes(quando utilizados) _parent Para direcionar o carregamento do link para o frame-pai (quando utilizados) Em resumo, podemos criar páginas navegáveis com o uso de links, isto torna a página capaz de direcionar o usuário para diferentes regiões internas de um site permitindo-o explorar todo o conteúdo publicado. Pág 15

Exemplos: <a href = http://www.gogle.com.br> Texto de link</a> <a href = /site/admin/config.html >Configurações do site</a> TAG ATRIBUTO DEFINIÇÃO href Define para qual destino será apontado o link.

4 Tarefas: 1) Através do NotePad ++ reproduza a página de acordo com Figura 1: Figura 1 - roteiro2 página modelo a. O nome da página inicial deve ser roteiro2-index.html b. Os dois itens referentes aos cursos ADS e Redes são links apontando para cursos/roteiro2-ads.html e cursos/roteiro2-redes.htm (deve-se utilizar caminho relativo para links em páginas web e não c:\ xxxxx) c. Inserir duas linhas horizontais para a separação das áreas de cursos; d. Todos os títulos devem utilizar as TAGS <h1> a <h6>; 2) Crie outra página, salve-a como ADS.HTML, inclua um título <h1> informando o nome do curso Análise e desenvolvimento de sistemas. a. Inclua um parágrafo explicando sobre do que se trata o curso. b. Crie um título de cabeçalho <h3> com o texto 1º semestre, e em seguida uma lista todas as unidades curriculares que são ministradas no primeiro semestre do seu curso. c. Após a lista, inclua um link contendo a mensagem VOLTAR PARA INICIAL, e crie um link para a página onde estão os cursos. 3) Crie outra página com o nome REDES.HTML no mesmo modelo da página ADS.HTML. 4) Insira uma imagem no início das páginas ADS e REDES com tamanho fixo de width = 400px e heigth = 350px. A imagem pode ser retirada da internet e deve ser em formato.jpg. 5) Altere os links criados na página inicial para que abram as páginas destino em novas páginas. (DICA: utilize o target com o valor _blank). Pág 16

$htm (deve-se utilizar caminho relativo para links em páginas web e não c:\ xxxxx) c. Inserir duas linhas horizontais para a separação das áreas de cursos; d.$

5 Desafio UC Programação para a Internet 6) Pesquisar sobre CSS e Criar um CSS interno nas páginas para controlar as propriedades de cor, borda, background e fonte dos elementos de lista, títulos e tabelas. a. O seu CSS pode utilizar qualquer cor, fonte ou background, escolha você! b. Copie o seu CSS criado para todas as páginas da estrutura. 7) Transforme a listagem de unidades curriculares do ADS para uma tabela e crie uma regra CSS para controlar o visual desta tabela. a. Personalize o que quiser da tabela, mas pelo menos modifique a cor das linhas; Referências Criando Sites com HTML, Maurício Samy Silva; Material disponibilizado em aula. Pág 17

Documentos relacionados

Desenvolvedor Web Docente André Luiz Silva de Moraes

Desenvolvedor Web Docente André Luiz Silva de Moraes Roteiro 2: Introdução a Linguagem HTML Neste roteiro é explorada a linguagem HTML. A linguagem HTML (Hypertext Markup Language) é amplamente utilizada na construção de páginas de internet e é responsável