SlideShare ist ein Scribd-Unternehmen logo
1 von 13
Downloaden Sie, um offline zu lesen
1




WEBDESIGN – AULA 02

 - UNIDADE I -
FUNDAMENTOS PARA A
CONCEPÇÃO E CRIAÇÃO DE
CONTEÚDO EM AMBIENTE WEB
Revisão HTML - Parte 2
HTML (REVISÃO)
2


       TAG PARA INSERIR IMAGEM
        Ex:
        <IMG SRC=“FOTO.JPG” WIDTH=“200”
        HEIGHT=150”

        WIDTH= LARGURA DA IMAGEM EM PIXELS
        HEIGHT= ALTURA DA IMAGEM EM PIXELS
HTML (REVISÃO)
3


       TAG FONT
        <FONT FACE>
        Permitirá alterar o tipo da letra. Havendo
        limitações na escolha de fontes.
        Somente no HTML5 é possível incluir qualquer tipo
        de letra.
        Ex:
        <FONT FACE=“verdana”>....</FONT>
HTML (REVISÃO)
4


       TAG FONT
        <FONT SIZE>
        Permitirá alterar o tamanho da letra.
        Ex:
        <FONT SIZE=“1”>....</FONT>
HTML (REVISÃO)
5


       TAG FONT
        <FONT COLOR>
        Permitirá alterar a cor da letra. A cor pode ser
        aplicada em formato HEXADECIMAL.
        As cores HEXADECIMAIS – letras e números /
        somente números / somente letras
        Ex:
        <FONT COLOR=“#FF0000”>....</FONT>
HTML (REVISÃO)
6


       ALINHAMENTO DE TEXTO
        <P ALIGN=“CENTER”>
        O texto ficará centralizado dentro da página.
        Ex:
        <P ALIGN=“CENTER”> ...</P>
HTML (REVISÃO)
7


       ALINHAMENTO DE TEXTO
        <P ALIGN=“LEFT”>
        O texto ficará alinhado à esquerda dentro da
        página.
        Ex:
        <P ALIGN=“LEFT”> ...</P>
HTML (REVISÃO)
8


       ALINHAMENTO DE TEXTO
        <P ALIGN=“RIGHT”>
        O texto ficará alinhado à direita dentro da
        página.
        Ex:
        <P ALIGN=“RIGHT”> ...</P>
HTML (REVISÃO)
9


       LISTAS NÃO-ORDENADAS
        O texto apresentará com marcadores em forma de
        lista.
        Ex:
        <UL>
             <LI>...</LI>
             <LI>...</LI>
        </UL>
HTML (REVISÃO)
10


        LISTAS ORDENADAS
         O texto apresentará com marcadores em forma de
         lista.
         Ex:
         <OL>
              <LI>...</LI>
              <LI>...</LI>
         </OL>
HTML (REVISÃO)
11


        NAVEGABILIDADE
         Inserir um LINK

         Ex:
         <A HREF=“destino.htm”>Texto do hiperlink</a>
         <A HREF=“http://www.msb.br”>Universidade
         Moacyr Bastos</A>
DICAS
12


        HOSPEDAGEM DE SITE
         www.locaweb.com.br
         www.hostnet.com.br
         www.100br.com.br

         REGISTRO DE SITE
         www.registro.br
OBRIGADO!
13


        PROF. SERGIO XAVIER

         E-mail:
         sergiosx@gmail.com

         Blog:
         www.profsergioxavier.wordpress.com

Weitere ähnliche Inhalte

Was ist angesagt? (19)

0151
01510151
0151
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSSMódulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Html básico
Html básicoHtml básico
Html básico
 
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
CSS tipo de letra (fontes)
CSS tipo de letra (fontes)CSS tipo de letra (fontes)
CSS tipo de letra (fontes)
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Htmlbasico
HtmlbasicoHtmlbasico
Htmlbasico
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
CSS formatação de parágrafos
CSS formatação de parágrafosCSS formatação de parágrafos
CSS formatação de parágrafos
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Introdução ao HTML
Introdução ao HTMLIntrodução ao HTML
Introdução ao HTML
 
Curso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSSCurso Desenvolvimento WEB com PHP - CSS
Curso Desenvolvimento WEB com PHP - CSS
 
Html
HtmlHtml
Html
 
Php aula1
Php aula1Php aula1
Php aula1
 

Andere mochten auch

Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDomingos Teruel
 
Gerência de Armazenamento: Interface do Sistema de Arquivos
Gerência de Armazenamento: Interface do Sistema de ArquivosGerência de Armazenamento: Interface do Sistema de Arquivos
Gerência de Armazenamento: Interface do Sistema de ArquivosAlexandre Duarte
 
Design Digital Exemplos de guestalt no Design Digital
Design Digital Exemplos de guestalt no Design DigitalDesign Digital Exemplos de guestalt no Design Digital
Design Digital Exemplos de guestalt no Design DigitalDESIGN DIGITAL UNIARA 2012
 
Experiência do Usuário: uma introdução
Experiência do Usuário: uma introduçãoExperiência do Usuário: uma introdução
Experiência do Usuário: uma introduçãoJuliana Dorneles
 
Unb 2012.1 - dweb - 03 - fundamentos web
Unb   2012.1 - dweb - 03 - fundamentos webUnb   2012.1 - dweb - 03 - fundamentos web
Unb 2012.1 - dweb - 03 - fundamentos webClaudenio Alberto
 
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_20131.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013Dra. Camila Hamdan
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webÍtalo Waxman
 
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e InteraçãoCRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e InteraçãoCauê de Souza
 
Webdesign - Elementos de um página web
Webdesign - Elementos de um página webWebdesign - Elementos de um página web
Webdesign - Elementos de um página webOdair Cavichioli
 
Fundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout webFundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout webRicharley Menescal
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLDra. Camila Hamdan
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digitalMarconi Pacheco
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um gridEduardo Novais
 

Andere mochten auch (20)

Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User InterfaceDesenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
 
Gerência de Armazenamento: Interface do Sistema de Arquivos
Gerência de Armazenamento: Interface do Sistema de ArquivosGerência de Armazenamento: Interface do Sistema de Arquivos
Gerência de Armazenamento: Interface do Sistema de Arquivos
 
Projeto_site_1
Projeto_site_1Projeto_site_1
Projeto_site_1
 
Design Digital Exemplos de guestalt no Design Digital
Design Digital Exemplos de guestalt no Design DigitalDesign Digital Exemplos de guestalt no Design Digital
Design Digital Exemplos de guestalt no Design Digital
 
Experiência do Usuário: uma introdução
Experiência do Usuário: uma introduçãoExperiência do Usuário: uma introdução
Experiência do Usuário: uma introdução
 
Unb 2012.1 - dweb - 03 - fundamentos web
Unb   2012.1 - dweb - 03 - fundamentos webUnb   2012.1 - dweb - 03 - fundamentos web
Unb 2012.1 - dweb - 03 - fundamentos web
 
Aula03 webdesign
Aula03 webdesignAula03 webdesign
Aula03 webdesign
 
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_20131.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013
 
Layout
LayoutLayout
Layout
 
Tudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para webTudo o que você precisa saber sobre layouts para web
Tudo o que você precisa saber sobre layouts para web
 
Aula05 webdesign
Aula05 webdesignAula05 webdesign
Aula05 webdesign
 
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e InteraçãoCRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
 
Webdesign - Elementos de um página web
Webdesign - Elementos de um página webWebdesign - Elementos de um página web
Webdesign - Elementos de um página web
 
Fundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout webFundamentos do desenvolvimento de um layout web
Fundamentos do desenvolvimento de um layout web
 
Principios basicos de Layout.
Principios basicos de Layout.Principios basicos de Layout.
Principios basicos de Layout.
 
WebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTMLWebDesign AULA 2: Introdução a HTML
WebDesign AULA 2: Introdução a HTML
 
Simplificando o design digital
Simplificando o design digitalSimplificando o design digital
Simplificando o design digital
 
Design Digital Fundamentos do Design
Design Digital Fundamentos do DesignDesign Digital Fundamentos do Design
Design Digital Fundamentos do Design
 
Designdigital
DesigndigitalDesigndigital
Designdigital
 
[DIG2012] Criando um grid
[DIG2012] Criando um grid[DIG2012] Criando um grid
[DIG2012] Criando um grid
 

Ähnlich wie Aula02 webdesign

Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptxssusercbd9c4
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Jose Augusto Cintra
 
Manual curso php
Manual curso phpManual curso php
Manual curso phpalexinaa
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLguest6aa5a1b
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLguest975dcd
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLguest6aa5a1b
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLguest1377881
 
FIS146 - Informática Aplicada a Fı́sica
FIS146 - Informática Aplicada a Fı́sicaFIS146 - Informática Aplicada a Fı́sica
FIS146 - Informática Aplicada a Fı́sicaMarcilio Guimarães
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e cssmario_venancio
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantesWelington Carvalho
 
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)ElsaValada
 

Ähnlich wie Aula02 webdesign (20)

Curso html
Curso htmlCurso html
Curso html
 
Html
HtmlHtml
Html
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5Minicurso de HTML básico - Atualizado para HTML5
Minicurso de HTML básico - Atualizado para HTML5
 
USAR.pptx
USAR.pptxUSAR.pptx
USAR.pptx
 
Manual curso php
Manual curso phpManual curso php
Manual curso php
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
 
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTMLPequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
 
Html5 em 15 minutos
Html5 em 15 minutosHtml5 em 15 minutos
Html5 em 15 minutos
 
Html básico
Html básicoHtml básico
Html básico
 
FIS146 - Informática Aplicada a Fı́sica
FIS146 - Informática Aplicada a Fı́sicaFIS146 - Informática Aplicada a Fı́sica
FIS146 - Informática Aplicada a Fı́sica
 
Html
HtmlHtml
Html
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apostila html
Apostila htmlApostila html
Apostila html
 
Manual HTML
Manual HTMLManual HTML
Manual HTML
 
Apostila de HTML para iniciantes
Apostila de HTML para iniciantesApostila de HTML para iniciantes
Apostila de HTML para iniciantes
 
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
 

Mehr von IBMR Laureate International Universities

A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresasA visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresasIBMR Laureate International Universities
 

Mehr von IBMR Laureate International Universities (20)

Palestra como_criar_uma_logo_no_illustrator
 Palestra como_criar_uma_logo_no_illustrator Palestra como_criar_uma_logo_no_illustrator
Palestra como_criar_uma_logo_no_illustrator
 
Você está preparado para ser um profissional 3.0?
 Você está preparado para ser um profissional 3.0? Você está preparado para ser um profissional 3.0?
Você está preparado para ser um profissional 3.0?
 
A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresasA visão das redes sociais como ferramenta de ampliação de negócios nas empresas
A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
 
Aula13 editoracao eletronica
Aula13 editoracao eletronicaAula13 editoracao eletronica
Aula13 editoracao eletronica
 
Aula10 editoracao eletronica
Aula10 editoracao eletronicaAula10 editoracao eletronica
Aula10 editoracao eletronica
 
Aula07 midia digital
Aula07 midia digitalAula07 midia digital
Aula07 midia digital
 
Aula06 midia digital
Aula06 midia digitalAula06 midia digital
Aula06 midia digital
 
Aula03 editoracao eletronica
Aula03 editoracao eletronicaAula03 editoracao eletronica
Aula03 editoracao eletronica
 
Aula05 midia digital
Aula05 midia digitalAula05 midia digital
Aula05 midia digital
 
Aula04 midia digital
Aula04 midia digitalAula04 midia digital
Aula04 midia digital
 
Aula02 editoracao eletronica
Aula02 editoracao eletronicaAula02 editoracao eletronica
Aula02 editoracao eletronica
 
Aula01 editoracao eletronica
Aula01 editoracao eletronicaAula01 editoracao eletronica
Aula01 editoracao eletronica
 
Aula03 midia digital
Aula03 midia digitalAula03 midia digital
Aula03 midia digital
 
Aula02 midia digital
Aula02 midia digitalAula02 midia digital
Aula02 midia digital
 
Aula01 midia digital
Aula01 midia digitalAula01 midia digital
Aula01 midia digital
 
Aula01 - Estudo de Novas Mídias Digitais
Aula01 - Estudo de Novas Mídias DigitaisAula01 - Estudo de Novas Mídias Digitais
Aula01 - Estudo de Novas Mídias Digitais
 
Aula05 prod grafica
Aula05 prod graficaAula05 prod grafica
Aula05 prod grafica
 
Aula06 webdesign
Aula06 webdesignAula06 webdesign
Aula06 webdesign
 
Aula04 prod grafica
Aula04 prod graficaAula04 prod grafica
Aula04 prod grafica
 
Aula03 prod grafica
Aula03 prod graficaAula03 prod grafica
Aula03 prod grafica
 

Aula02 webdesign

  • 1. 1 WEBDESIGN – AULA 02 - UNIDADE I - FUNDAMENTOS PARA A CONCEPÇÃO E CRIAÇÃO DE CONTEÚDO EM AMBIENTE WEB Revisão HTML - Parte 2
  • 2. HTML (REVISÃO) 2  TAG PARA INSERIR IMAGEM Ex: <IMG SRC=“FOTO.JPG” WIDTH=“200” HEIGHT=150” WIDTH= LARGURA DA IMAGEM EM PIXELS HEIGHT= ALTURA DA IMAGEM EM PIXELS
  • 3. HTML (REVISÃO) 3  TAG FONT <FONT FACE> Permitirá alterar o tipo da letra. Havendo limitações na escolha de fontes. Somente no HTML5 é possível incluir qualquer tipo de letra. Ex: <FONT FACE=“verdana”>....</FONT>
  • 4. HTML (REVISÃO) 4  TAG FONT <FONT SIZE> Permitirá alterar o tamanho da letra. Ex: <FONT SIZE=“1”>....</FONT>
  • 5. HTML (REVISÃO) 5  TAG FONT <FONT COLOR> Permitirá alterar a cor da letra. A cor pode ser aplicada em formato HEXADECIMAL. As cores HEXADECIMAIS – letras e números / somente números / somente letras Ex: <FONT COLOR=“#FF0000”>....</FONT>
  • 6. HTML (REVISÃO) 6  ALINHAMENTO DE TEXTO <P ALIGN=“CENTER”> O texto ficará centralizado dentro da página. Ex: <P ALIGN=“CENTER”> ...</P>
  • 7. HTML (REVISÃO) 7  ALINHAMENTO DE TEXTO <P ALIGN=“LEFT”> O texto ficará alinhado à esquerda dentro da página. Ex: <P ALIGN=“LEFT”> ...</P>
  • 8. HTML (REVISÃO) 8  ALINHAMENTO DE TEXTO <P ALIGN=“RIGHT”> O texto ficará alinhado à direita dentro da página. Ex: <P ALIGN=“RIGHT”> ...</P>
  • 9. HTML (REVISÃO) 9  LISTAS NÃO-ORDENADAS O texto apresentará com marcadores em forma de lista. Ex: <UL> <LI>...</LI> <LI>...</LI> </UL>
  • 10. HTML (REVISÃO) 10  LISTAS ORDENADAS O texto apresentará com marcadores em forma de lista. Ex: <OL> <LI>...</LI> <LI>...</LI> </OL>
  • 11. HTML (REVISÃO) 11  NAVEGABILIDADE Inserir um LINK Ex: <A HREF=“destino.htm”>Texto do hiperlink</a> <A HREF=“http://www.msb.br”>Universidade Moacyr Bastos</A>
  • 12. DICAS 12  HOSPEDAGEM DE SITE www.locaweb.com.br www.hostnet.com.br www.100br.com.br REGISTRO DE SITE www.registro.br
  • 13. OBRIGADO! 13  PROF. SERGIO XAVIER E-mail: sergiosx@gmail.com Blog: www.profsergioxavier.wordpress.com