Curso html basico_aula-004
-
Upload
eem-dr-romao-sampaio -
Category
Design
-
view
516 -
download
0
description
Transcript of Curso html basico_aula-004
![Page 1: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/1.jpg)
Faculdade Paraíso do
Ceará - FAP
2011.1
Curso de Web e DesignHTML Básico
1
![Page 2: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/2.jpg)
Aula-004
Criando Listas
Tamanho do Texto
Alinhando Texto
2011.1 Curso de HTML Básico – Derlival Barros 2
Alinhando Texto
Cores de Texto
Cores de Fundo
![Page 3: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/3.jpg)
Criando ListasCriando Listas
2011.1 Curso de HTML Básico – Derlival Barros 3
![Page 4: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/4.jpg)
Criando Listas
• Uma lista é uma coleção de itens relacionados;• Você usa uma lista para organizar dados como
sequência de passos ou itens em um grupo;• Nesta aula, você aprenderá sobre os tipos de listas do
HTML e também a criar diferentes tipos de listas emuma página Web.
2011.1 Curso de HTML Básico – Derlival Barros 4
uma página Web.
![Page 5: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/5.jpg)
Tipos de Listas
• O HTML fornece quatro tipos:• Ordenadas ou Numeradas• Marcadores ou Não Numeradas• Definição• Intercaladas
2011.1 Curso de HTML Básico – Derlival Barros 5
• Intercaladas
![Page 6: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/6.jpg)
Listas Ordenadas (Numeradas)
• Uma lista ordenada é usada para exibir um conjunto deitens depois de um número ou letra;
• Uma lista ordenada é também chamada de listanumerada
• As tags responsáveis por esta função são: <ol> e </ol>;
2011.1 Curso de HTML Básico – Derlival Barros 6
• Para especificar os itens da lista utiliza-se a tag <li>.
Obs.: A tag <li> não necessita de uma correspondente </li> para fechamento e é usada para definir os itens de todos os tipos de listas.
![Page 7: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/7.jpg)
Listas Ordenadas (Exemplo)
2011.1 Curso de HTML Básico – Derlival Barros 7
![Page 8: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/8.jpg)
Marcadores (Não Ordenadas)
• Uma lista com marcadores ou não ordenadas é usadapara exibir um conjunto de itens depois de umamarcação;
• Uma lista com marcadores é chamada também de listade marcação, não numerada ou ainda não ordenada;
• As tags responsáveis por esta função são: <ul> e </ul>.
2011.1 Curso de HTML Básico – Derlival Barros 8
• As tags responsáveis por esta função são: <ul> e </ul>.
![Page 9: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/9.jpg)
Marcadores (Exemplo)
2011.1 Curso de HTML Básico – Derlival Barros 9
![Page 10: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/10.jpg)
Tamanho do
TextoTexto
2011.1 Curso de HTML Básico – Derlival Barros 10
![Page 11: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/11.jpg)
A tag <font>
• Como vimos até agora, a formatação que você podefazer com o conjunto básico de tags HTML é bemlimitado;
• Uma maneira de controlar o tamanho do texto é feitocom a tag <FONT>;
• As tags responsáveis por esta função são: <font> e
2011.1 Curso de HTML Básico – Derlival Barros 11
• As tags responsáveis por esta função são: <font> e</font>.
![Page 12: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/12.jpg)
Atributo Size (Tamanho)
• O atributo SIZE dentro da tag <font> controla o tamanhodo texto incluso;
• Infelizmente a tag <font> não permite que vocêespecifique o tamanho em pixels ou pontos.
2011.1 Curso de HTML Básico – Derlival Barros 12
Obs.: O * é uma variável, representa um valor numér ico que varia de 1 até 7.
![Page 13: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/13.jpg)
Atributo Face
• O atributo FACE dentro da tag <font> é usado paraespecificar uma face de tipos para o texto;
• A face de tipos selecionada será usada apenas se elafor encontrada na máquina do usuário.
2011.1 Curso de HTML Básico – Derlival Barros 13
Obs.: O * é uma variável, representa o nome da font e que será utilizada e deverá ser escrito entre aspas.
![Page 14: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/14.jpg)
Alinhando TextoAlinhando Texto
2011.1 Curso de HTML Básico – Derlival Barros 14
![Page 15: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/15.jpg)
Alinhando Texto
• O HTML dá aos designers controle sobre o alinhamentode texto;
• O texto pode ser alinhado na margem esquerda, namargem direita ou centralizado;
• O atributo ALIGN pode ser usado nas tags de parágrafoe cabeçalho.
2011.1 Curso de HTML Básico – Derlival Barros 15
e cabeçalho.
Obs.: O * é uma variável, representa o nome do atri buto de alinhamento, pode ser representado por: left, right ou center.
![Page 16: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/16.jpg)
Alinhamento a Esquerda
• Quando você definir o valor ALIGN para left, o textoficará alinhado na margem esquerda.
2011.1 Curso de HTML Básico – Derlival Barros 16
![Page 17: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/17.jpg)
Alinhamento Centralizado
• Quando você definir o valor ALIGN para center, o textoficará alinhado no centro da página.
2011.1 Curso de HTML Básico – Derlival Barros 17
![Page 18: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/18.jpg)
Alinhamento a Direita
• Quando você definir o valor ALIGN para right, o textoficará alinhado na margem direita.
2011.1 Curso de HTML Básico – Derlival Barros 18
![Page 19: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/19.jpg)
Cores de TextoCores de Texto
2011.1 Curso de HTML Básico – Derlival Barros 19
![Page 20: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/20.jpg)
Atributo Color (Cor)
• O atributo COLOR dentro da tag <font> é usado paraespecificar uma cor para o texto;
• Você pode especificar cores usando um dos 140 nomesde cores.
2011.1 Curso de HTML Básico – Derlival Barros 20
Obs.: O * é uma variável, representa o nome da cor em inglês ou seu código correspondente em hexadecimal.
![Page 21: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/21.jpg)
Tabela de Cores
Cor HTML Tom Mais Claro/Escuro
Preto Black Darkgrey
Branco White Ghostwhite
Verde Green Lime
Amarelo Yellow darkgoldenrod
Azul Blue Aqua
Vermelho Red Darkred
Rosa Pink Crimson
Roxa Violet Lavander
Laranja Orange Darkorange
Cinza Gray Lightgray
2011.1 Curso de HTML Básico – Derlival Barros 21
![Page 22: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/22.jpg)
Cores de FundoCores de Fundo
2011.1 Curso de HTML Básico – Derlival Barros 22
![Page 23: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/23.jpg)
Atributo Background
• O atributo BGCOLOR é utilizado para definir a cor defundo de várias tags como <body>, <table>, <td>, entreoutras do documento HTML;
2011.1 Curso de HTML Básico – Derlival Barros 23
Obs.: O * é uma variável, representa o nome da cor em inglês ou seu código correspondente em hexadecimal.
![Page 24: Curso html basico_aula-004](https://reader031.fdocumentos.com/reader031/viewer/2022020207/557c9276d8b42a775b8b4625/html5/thumbnails/24.jpg)
Perguntas?
2011.1 24Curso de HTML Básico – Derlival Barros