SlideShare uma empresa Scribd logo
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

Mais conteúdo relacionado

PDF
Html5 - Estrutura Básica
PPTX
02 html - fontes e estilos
PPTX
Aula de XHTML
PDF
PDF
HTML básico
PPTX
Codificações basicas em HTML e XML
PDF
HTML Principios Básicos
Html5 - Estrutura Básica
02 html - fontes e estilos
Aula de XHTML
HTML básico
Codificações basicas em HTML e XML
HTML Principios Básicos

Mais procurados (19)

PDF
PDF
Html aula 1
PPTX
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
PDF
HTML Formatando Textos
DOCX
Html básico
PDF
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
PPTX
CSS tipo de letra (fontes)
PDF
Aula 1 linguagem html (1)
PDF
Htmlbasico
PDF
Manual curso php
PDF
Css tutorial
PPTX
CSS formatação de parágrafos
PDF
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
PPTX
Curso Desenvolvimento WEB com PHP - HTML
PPT
Introdução ao HTML
PPTX
Curso Desenvolvimento WEB com PHP - CSS
Html aula 1
Módulo: 4 – Desenvolvimento de Páginas Web Estáticas: CSS
HTML Formatando Textos
Html básico
Apresentação do Curso Primeiros Passos na Web com HTML e CSS - Profite e Univ...
CSS tipo de letra (fontes)
Aula 1 linguagem html (1)
Htmlbasico
Manual curso php
Css tutorial
CSS formatação de parágrafos
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Curso Desenvolvimento WEB com PHP - HTML
Introdução ao HTML
Curso Desenvolvimento WEB com PHP - CSS
Anúncio

Destaque (20)

KEY
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
PPT
Gerência de Armazenamento: Interface do Sistema de Arquivos
PPTX
Projeto_site_1
PPT
Design Digital Exemplos de guestalt no Design Digital
PDF
Experiência do Usuário: uma introdução
PDF
Unb 2012.1 - dweb - 03 - fundamentos web
DOCX
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013
PDF
PDF
Tudo o que você precisa saber sobre layouts para web
PDF
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
PPS
Webdesign - Elementos de um página web
PDF
Fundamentos do desenvolvimento de um layout web
PDF
Principios basicos de Layout.
PDF
WebDesign AULA 2: Introdução a HTML
PDF
Simplificando o design digital
PPT
Design Digital Fundamentos do Design
PPT
Designdigital
KEY
[DIG2012] Criando um grid
Desenvovelndo Aplicações com PHP, AJAX e Y!UI Yahoo User Interface
Gerência de Armazenamento: Interface do Sistema de Arquivos
Projeto_site_1
Design Digital Exemplos de guestalt no Design Digital
Experiência do Usuário: uma introdução
Unb 2012.1 - dweb - 03 - fundamentos web
1.inovacao e tecnologia de seguranca grupo 1 matutino_1_2013
Tudo o que você precisa saber sobre layouts para web
CRP- 0420: Comunicação Digital - Aula 7: Design de Experiência e Interação
Webdesign - Elementos de um página web
Fundamentos do desenvolvimento de um layout web
Principios basicos de Layout.
WebDesign AULA 2: Introdução a HTML
Simplificando o design digital
Design Digital Fundamentos do Design
Designdigital
[DIG2012] Criando um grid
Anúncio

Semelhante a Aula02 webdesign (20)

PDF
Curso html
DOCX
PDF
Criação de sites
PPTX
Apresentação1.pptx
PDF
Minicurso de HTML básico - Atualizado para HTML5
PPTX
USAR.pptx
PDF
Manual curso php
PDF
Pequeno resumo de comandos HTML
PDF
Pequeno resumo de comandos HTML
PDF
Pequeno resumo de comandos HTML
PDF
Pequeno resumo de comandos HTML
PDF
Html5 em 15 minutos
PDF
Html básico
PDF
FIS146 - Informática Aplicada a Fı́sica
PPTX
PDF
Apostila html,xhtml e css
PDF
Apostila html
PDF
Manual HTML
PDF
Apostila de HTML para iniciantes
PDF
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)
Curso html
Criação de sites
Apresentação1.pptx
Minicurso de HTML básico - Atualizado para HTML5
USAR.pptx
Manual curso php
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
Pequeno resumo de comandos HTML
Html5 em 15 minutos
Html básico
FIS146 - Informática Aplicada a Fı́sica
Apostila html,xhtml e css
Apostila html
Manual HTML
Apostila de HTML para iniciantes
HTML_Manual_CursoBasico.pdf (Hypertext Markup Language)

Mais de IBMR Laureate International Universities (20)

PDF
Palestra como_criar_uma_logo_no_illustrator
PDF
Você está preparado para ser um profissional 3.0?
PDF
A visão das redes sociais como ferramenta de ampliação de negócios nas empresas
PDF
Aula13 editoracao eletronica
PDF
Aula10 editoracao eletronica
PDF
Aula03 editoracao eletronica
PDF
Aula02 editoracao eletronica
PDF
Aula01 editoracao eletronica
PPTX
Aula01 - Estudo de Novas Mídias Digitais
Palestra como_criar_uma_logo_no_illustrator
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
Aula13 editoracao eletronica
Aula10 editoracao eletronica
Aula03 editoracao eletronica
Aula02 editoracao eletronica
Aula01 editoracao eletronica
Aula01 - Estudo de Novas Mídias Digitais

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