SlideShare uma empresa Scribd logo

Aula 05

Aula HTML e CSS

1 de 17
Baixar para ler offline
Html e CSS
TAG <img>
● Anteriormente havíamos aprendido a inserir imagens
como plano de fundo de nossas página web, através
do atributo background da tag body.
● Agora iremos aprender a inserir imagens na própria
página web, para isso utilizamos a tag img. Vejamos a
estrutura:
TAG <img>
● Note que o atributo src indica o local e nome da imagem a
ser inserida. Caso a imagem encontre­se no mesmo
diretório do documento HTML em que ela será inserida,
então basta colocarmos o nome do arquivo de imagem e
sua extensão (ex: <img src= “imagem.jpg”>), no entanto,
caso a imagem encontre­se em outro diretório, será
necessário indicar também o caminho do arquivo de
imagem, como ocorreu no exemplo acima: a
imagem html_logo.jpg encontra­se em um diretório
chamado imagens, esse diretório encontra­se no mesmo
diretório do documento HTML em questão.
TAG <img>
● Alguns atributos da tag img são muito importantes e
devemos conhecê­los bem, são eles:
1. Alt: texto que descreve brevemente a
imagem, mostrado em browsers que não
carregam ou carregaram a imagem.
2.Width: dimensiona a largura da imagem em pixeis.
3.Height: dimensiona a altura da imagem em pixeis.
4.Border: dimensiona o tamanho das bordas da
imagem.
TAG <img>
● Align: responsável por definir como o texto adjacente a imagem irá se alinhar.
– Align= “Left” → a imagem será alinhada à esquerda e o texto adjacente ao
seu redor, iniciando do topo da imagem.
– Align= “Right” → a imagem será alinhada à direita e o texto adjacente ao
seu redor, iniciando do topo da imagem.
– Align= “Top” → alinha o texto adjacente com o topo da imagem.
– Align= “Bottom” → alinha o texto adjacente com a parte inferior da imagem.
– Align= “Middle” → alinha o texto adjacente com o centro da imagem.
TAG <img>

Recomendados

Modelos de banco de dados
Modelos de banco de dadosModelos de banco de dados
Modelos de banco de dadosEdgar Stuart
 
Aula 4 - Diagrama Entidade Relacionamento (com exercício no final)
Aula 4  - Diagrama Entidade Relacionamento (com exercício no final)Aula 4  - Diagrama Entidade Relacionamento (com exercício no final)
Aula 4 - Diagrama Entidade Relacionamento (com exercício no final)Janynne Gomes
 
Memoria virtual
Memoria virtualMemoria virtual
Memoria virtualMauro Melo
 
Banco de Dados I - Aula 11 - Linguagem de Consulta SQL (Comandos DDL)
Banco de Dados I - Aula 11 - Linguagem de Consulta SQL (Comandos DDL)Banco de Dados I - Aula 11 - Linguagem de Consulta SQL (Comandos DDL)
Banco de Dados I - Aula 11 - Linguagem de Consulta SQL (Comandos DDL)Leinylson Fontinele
 
Sistemas de Arquivos FAT x NTFS
Sistemas de Arquivos FAT x NTFSSistemas de Arquivos FAT x NTFS
Sistemas de Arquivos FAT x NTFSCleber Ramos
 

Mais conteúdo relacionado

Mais procurados

Cinema levantamento de requisitos 42756538
Cinema levantamento de requisitos   42756538Cinema levantamento de requisitos   42756538
Cinema levantamento de requisitos 42756538Alex Sampaio
 
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)Leinylson Fontinele
 
Memoria cache princípio da localidade
Memoria cache   princípio da localidadeMemoria cache   princípio da localidade
Memoria cache princípio da localidadeClaudia Costa
 
Aula1 - Apresentação de Banco de Dados
Aula1 - Apresentação de Banco de DadosAula1 - Apresentação de Banco de Dados
Aula1 - Apresentação de Banco de DadosRafael Albani
 
Análise e Projeto de Sistemas
Análise e Projeto de SistemasAnálise e Projeto de Sistemas
Análise e Projeto de SistemasGuilherme
 
Banco de Dados I - Aula 09 - Normalização de Dados
Banco de Dados I - Aula 09 - Normalização de DadosBanco de Dados I - Aula 09 - Normalização de Dados
Banco de Dados I - Aula 09 - Normalização de DadosLeinylson Fontinele
 
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)Leinylson Fontinele
 
Python - Programação funcional
Python - Programação funcionalPython - Programação funcional
Python - Programação funcionalfabiocerqueira
 
POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição (ver...
POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição  (ver...POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição  (ver...
POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição (ver...Marcello Thiry
 
Psi-mod-13
Psi-mod-13Psi-mod-13
Psi-mod-13diogoa21
 
Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...
Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...
Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...Marcos Alves Vieira
 
Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...
Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...
Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...Leinylson Fontinele
 
Programação em Banco de Dados - Aula 23/08/2018
Programação em Banco de Dados - Aula 23/08/2018Programação em Banco de Dados - Aula 23/08/2018
Programação em Banco de Dados - Aula 23/08/2018Elaine Cecília Gatto
 
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Sérgio Souza Costa
 
Uml Diagramas Estruturais
Uml   Diagramas EstruturaisUml   Diagramas Estruturais
Uml Diagramas Estruturaisthaisedd
 

Mais procurados (20)

Cinema levantamento de requisitos 42756538
Cinema levantamento de requisitos   42756538Cinema levantamento de requisitos   42756538
Cinema levantamento de requisitos 42756538
 
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
Banco de Dados I - Aula 06 - Banco de Dados Relacional (Modelo Lógico)
 
Memoria cache princípio da localidade
Memoria cache   princípio da localidadeMemoria cache   princípio da localidade
Memoria cache princípio da localidade
 
Aula1 - Apresentação de Banco de Dados
Aula1 - Apresentação de Banco de DadosAula1 - Apresentação de Banco de Dados
Aula1 - Apresentação de Banco de Dados
 
Aula 7 banco de dados
Aula 7   banco de dadosAula 7   banco de dados
Aula 7 banco de dados
 
Banco de dados
Banco de dadosBanco de dados
Banco de dados
 
Diagrama de fluxo de dados DFD
Diagrama de fluxo de dados DFDDiagrama de fluxo de dados DFD
Diagrama de fluxo de dados DFD
 
Java - Primeiros passos
Java - Primeiros passosJava - Primeiros passos
Java - Primeiros passos
 
Análise e Projeto de Sistemas
Análise e Projeto de SistemasAnálise e Projeto de Sistemas
Análise e Projeto de Sistemas
 
Banco de Dados I - Aula 09 - Normalização de Dados
Banco de Dados I - Aula 09 - Normalização de DadosBanco de Dados I - Aula 09 - Normalização de Dados
Banco de Dados I - Aula 09 - Normalização de Dados
 
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
Banco de Dados I - Aula 05 - Banco de Dados Relacional (Modelo Conceitual)
 
Python - Programação funcional
Python - Programação funcionalPython - Programação funcional
Python - Programação funcional
 
POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição (ver...
POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição  (ver...POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição  (ver...
POO - Unidade 2 (parte 2) - Classe de Associação, Agregação, Composição (ver...
 
Aula 9 banco de dados
Aula 9   banco de dadosAula 9   banco de dados
Aula 9 banco de dados
 
Psi-mod-13
Psi-mod-13Psi-mod-13
Psi-mod-13
 
Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...
Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...
Engenharia Dirigida por Modelos no Desenvolvimento de Aplicações Ubíquas: Tec...
 
Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...
Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...
Introdução à Computação - Aula Prática 3 - Banco de Dados (Conversão do model...
 
Programação em Banco de Dados - Aula 23/08/2018
Programação em Banco de Dados - Aula 23/08/2018Programação em Banco de Dados - Aula 23/08/2018
Programação em Banco de Dados - Aula 23/08/2018
 
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
Software Livre (Conceitos, contextualização histórica, licenças, sistemas ope...
 
Uml Diagramas Estruturais
Uml   Diagramas EstruturaisUml   Diagramas Estruturais
Uml Diagramas Estruturais
 

Destaque (20)

Aula 03
Aula 03Aula 03
Aula 03
 
Aula 06
Aula 06Aula 06
Aula 06
 
Aula 01
Aula 01Aula 01
Aula 01
 
Aula 10
Aula 10Aula 10
Aula 10
 
Aula 09
Aula 09Aula 09
Aula 09
 
Aula 07
Aula 07Aula 07
Aula 07
 
Aula 02
Aula 02Aula 02
Aula 02
 
Aula 08
Aula 08Aula 08
Aula 08
 
Aula 11
Aula 11Aula 11
Aula 11
 
Aula 04
Aula 04Aula 04
Aula 04
 
Aula 01
Aula 01Aula 01
Aula 01
 
Aula 04
Aula 04 Aula 04
Aula 04
 
Aula 03
Aula 03Aula 03
Aula 03
 
Aula 02
Aula 02Aula 02
Aula 02
 
teAula 11
teAula 11teAula 11
teAula 11
 
Aula 9 semana
Aula 9 semanaAula 9 semana
Aula 9 semana
 
Aula 6 semana
Aula 6 semanaAula 6 semana
Aula 6 semana
 
Aula02
Aula02Aula02
Aula02
 
Aula03
Aula03Aula03
Aula03
 
Aula01 - POO
Aula01 - POOAula01 - POO
Aula01 - POO
 

Semelhante a Aula 05

HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia iiFábio Costa
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia iiFábio Costa
 
Curso de Html - Aula 7 - Trabalhando com imagens e links
Curso de Html - Aula 7 - Trabalhando com imagens e linksCurso de Html - Aula 7 - Trabalhando com imagens e links
Curso de Html - Aula 7 - Trabalhando com imagens e linksErick L. F.
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantesWelington Carvalho
 
01-Introdução HTML - DDW II
01-Introdução HTML - DDW II01-Introdução HTML - DDW II
01-Introdução HTML - DDW IIEvelyn Ramos
 
Wordpress SEO - Manual de boas práticas
Wordpress SEO - Manual de boas práticasWordpress SEO - Manual de boas práticas
Wordpress SEO - Manual de boas práticasFelipe Bazon
 
Html completo
Html completoHtml completo
Html completoEMSNEWS
 

Semelhante a Aula 05 (20)

Aula3
Aula3Aula3
Aula3
 
Html 02
Html 02Html 02
Html 02
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
 
Aula 05 ferramentas para autoria de produtos multimídia ii
Aula 05   ferramentas para autoria de produtos multimídia iiAula 05   ferramentas para autoria de produtos multimídia ii
Aula 05 ferramentas para autoria de produtos multimídia ii
 
Aula03
Aula03Aula03
Aula03
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
HTML - Introducao
HTML - Introducao HTML - Introducao
HTML - Introducao
 
Curso de Html - Aula 7 - Trabalhando com imagens e links
Curso de Html - Aula 7 - Trabalhando com imagens e linksCurso de Html - Aula 7 - Trabalhando com imagens e links
Curso de Html - Aula 7 - Trabalhando com imagens e links
 
Aula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e linksAula 4 – Linguagem HTML - Imagens e links
Aula 4 – Linguagem HTML - Imagens e links
 
Curso html
Curso htmlCurso html
Curso html
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantes
 
Web 2.0 costa manso
Web 2.0 costa mansoWeb 2.0 costa manso
Web 2.0 costa manso
 
01-Introdução HTML - DDW II
01-Introdução HTML - DDW II01-Introdução HTML - DDW II
01-Introdução HTML - DDW II
 
Técnicas de SEO
Técnicas de SEOTécnicas de SEO
Técnicas de SEO
 
Publicando no wordpress
Publicando no wordpressPublicando no wordpress
Publicando no wordpress
 
Aula 33. css sprite
Aula 33. css spriteAula 33. css sprite
Aula 33. css sprite
 
Html básico 2 imagens
Html básico 2   imagensHtml básico 2   imagens
Html básico 2 imagens
 
Wordpress SEO - Manual de boas práticas
Wordpress SEO - Manual de boas práticasWordpress SEO - Manual de boas práticas
Wordpress SEO - Manual de boas práticas
 
Html completo
Html completoHtml completo
Html completo
 

Mais de Jorge Ávila Miranda (20)

Aula16 - Jquery
Aula16 - JqueryAula16 - Jquery
Aula16 - Jquery
 
Aula15 - Array PHP
Aula15 - Array PHPAula15 - Array PHP
Aula15 - Array PHP
 
Aula13 - Estrutura de repetição (for e while) - PHP
Aula13 - Estrutura de repetição (for e while) - PHPAula13 - Estrutura de repetição (for e while) - PHP
Aula13 - Estrutura de repetição (for e while) - PHP
 
Aula14 - Funções em PHP
Aula14 - Funções em PHPAula14 - Funções em PHP
Aula14 - Funções em PHP
 
Aula Herança
Aula HerançaAula Herança
Aula Herança
 
Aula05 - Poojava
Aula05 - PoojavaAula05 - Poojava
Aula05 - Poojava
 
Aula12- PHP
Aula12- PHPAula12- PHP
Aula12- PHP
 
Aula11 - PHP
Aula11 - PHPAula11 - PHP
Aula11 - PHP
 
Aula10 -PHP
Aula10 -PHPAula10 -PHP
Aula10 -PHP
 
Aula09 - Java Script
Aula09 - Java ScriptAula09 - Java Script
Aula09 - Java Script
 
Aula08 - Java Script
Aula08 - Java ScriptAula08 - Java Script
Aula08 - Java Script
 
Aula07 - JavaScript
Aula07 - JavaScriptAula07 - JavaScript
Aula07 - JavaScript
 
Aula04-POOJAVA
Aula04-POOJAVAAula04-POOJAVA
Aula04-POOJAVA
 
Aula06 - JavaScript
Aula06 - JavaScriptAula06 - JavaScript
Aula06 - JavaScript
 
Aula05-JavaScript
Aula05-JavaScriptAula05-JavaScript
Aula05-JavaScript
 
Aula04-JavaScript
Aula04-JavaScriptAula04-JavaScript
Aula04-JavaScript
 
Aula03 - JavaScript
Aula03 - JavaScriptAula03 - JavaScript
Aula03 - JavaScript
 
Aula02 - JavaScript
Aula02 - JavaScriptAula02 - JavaScript
Aula02 - JavaScript
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Aula07 - Arquitetura e Manutenção de Computadores
Aula07 - Arquitetura e Manutenção de ComputadoresAula07 - Arquitetura e Manutenção de Computadores
Aula07 - Arquitetura e Manutenção de Computadores
 

Último

ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docxATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx2m Assessoria
 
MAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docx
MAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docxMAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docx
MAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docxjosecarlos413721
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxjosecarlos413721
 
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxMAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxjosecarlos413721
 
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxMAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx2m Assessoria
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx2m Assessoria
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx2m Assessoria
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxjosecarlos413721
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxjosecarlos413721
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx2m Assessoria
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx2m Assessoria
 
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxjosecarlos413721
 
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docxMAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx2m Assessoria
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx2m Assessoria
 
MAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docx
MAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docxMAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docx
MAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docx2m Assessoria
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx2m Assessoria
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx2m Assessoria
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx2m Assessoria
 

Último (20)

ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docxATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
ATIVIDADE 1- LÓGICA PARA COMPUTAÇÃO - 512024.docx
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docxATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - ADMINISTRAÇÃO FINANCEIRA E ORÇAMENTÁRIA - 512024.docx
 
MAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docx
MAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docxMAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docx
MAPA - TÓPICOS ESPECIAIS EM ENGENHARIA DE SOFTWARE I - 512024.docx
 
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
ATIVIDADE 1 - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxMAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
 
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docxMAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
MAPA - PROGRAMAÇÃO E CÁLCULO NUMÉRICO - 512024.docx
 
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docxATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
ATIVIDADE 1 - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docxMAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
MAPA - ESTATÍSTICA E PROBABILIDADE - 512024.docx
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 51-2024.docx
 
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docxATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
ATIVIDADE 1 - RH - TEORIAS DA ADMINISTRAÇÃO - 512024.docx
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
 
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docxMAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
MAPA - INTRODUÇÃO À ENGENHARIA - 51-2024.docx
 
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docxMAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
MAPA - CÁLCULO DIFERENCIAL E INTEGRAL II - 512024.docx
 
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docxMAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES  - 512024.docx
MAPA - ADSIS - FUNDAMENTOS E ARQUITETURA DE COMPUTADORES - 512024.docx
 
MAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docx
MAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docxMAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docx
MAPA - GCOM - TÉCNICAS DE NEGOCIAÇÃO E VENDAS - 512024.docx
 
MAPA - DESENHO TÉCNICO - 51-2024.docx
MAPA   -   DESENHO TÉCNICO - 51-2024.docxMAPA   -   DESENHO TÉCNICO - 51-2024.docx
MAPA - DESENHO TÉCNICO - 51-2024.docx
 
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docxMAPA -INTRODUÇÃO À ENGENHARIA  - 512024.docx
MAPA -INTRODUÇÃO À ENGENHARIA - 512024.docx
 
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docxATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
ATIVIDADE 1 - CCONT - PERÍCIA, ARBITRAGEM E ATUÁRIA - 512024.docx
 

Aula 05

  • 2. TAG <img> ● Anteriormente havíamos aprendido a inserir imagens como plano de fundo de nossas página web, através do atributo background da tag body. ● Agora iremos aprender a inserir imagens na própria página web, para isso utilizamos a tag img. Vejamos a estrutura:
  • 3. TAG <img> ● Note que o atributo src indica o local e nome da imagem a ser inserida. Caso a imagem encontre­se no mesmo diretório do documento HTML em que ela será inserida, então basta colocarmos o nome do arquivo de imagem e sua extensão (ex: <img src= “imagem.jpg”>), no entanto, caso a imagem encontre­se em outro diretório, será necessário indicar também o caminho do arquivo de imagem, como ocorreu no exemplo acima: a imagem html_logo.jpg encontra­se em um diretório chamado imagens, esse diretório encontra­se no mesmo diretório do documento HTML em questão.
  • 4. TAG <img> ● Alguns atributos da tag img são muito importantes e devemos conhecê­los bem, são eles: 1. Alt: texto que descreve brevemente a imagem, mostrado em browsers que não carregam ou carregaram a imagem. 2.Width: dimensiona a largura da imagem em pixeis. 3.Height: dimensiona a altura da imagem em pixeis. 4.Border: dimensiona o tamanho das bordas da imagem.
  • 5. TAG <img> ● Align: responsável por definir como o texto adjacente a imagem irá se alinhar. – Align= “Left” → a imagem será alinhada à esquerda e o texto adjacente ao seu redor, iniciando do topo da imagem. – Align= “Right” → a imagem será alinhada à direita e o texto adjacente ao seu redor, iniciando do topo da imagem. – Align= “Top” → alinha o texto adjacente com o topo da imagem. – Align= “Bottom” → alinha o texto adjacente com a parte inferior da imagem. – Align= “Middle” → alinha o texto adjacente com o centro da imagem.
  • 7. EXERCICIO ● Crie um novo documento HTML com o seguinte nome PaginaHTMLcomImagem.html, esse documento deverá possuir duas imagens com o mesmo tamanho, uma alinhada à esquerda e outra alinhada à direita. Entre as imagens deve ter um pequeno texto com alinhamento justificado.
  • 8. Tag <audio> ● O HTML5 introduz o suporte de mídia embutido por meio dos elementos <audio> e <video>, oferecendo a possibilidade de incorporar facilmente mídia em documentos HTML.
  • 10. Formatos de Audios suportados
  • 11. Tag <video> ● Para inserirmos vídeo em uma página HTML utilizamos a tag <video>. Vejamos o exemplo abaixo para visualizarmos a estrutura dessa tag.
  • 12. Formatos de videos suportados
  • 13. Inserindo videos do Youtube ● Após ter criado a página, acesse o site do YouTube e encontre o vídeo que deseja colocar na página. Quando você clicar no vídeo para fazer a visualização logo abaixo aparecerá um campo com o seguinte nome: COMPARTILHAR, ● Depois de apertar em COMPARTILHAR, você verá um link chamado INCORPORAR. Neste campo você terá o código que deve ser copiado. Ainda você pode ajustar os padrões de tamanhos
  • 14. Inserindo videos do Youtube ● Selecione todo o código que está dentro do campo e copie-o para a página HTML.
  • 16. Exercicio ● Crie um documento HTML com o seguinte nome: PaginaHTMLcomMultimidia.html, esse documento deverá possuir: imagem, vídeo e texto.
  • 17. Use a imaginaçãoUse a imaginação