SlideShare uma empresa Scribd logo
1 de 34
Baixar para ler offline
Curso HTML & CSS
       > Herbet Ferreira Rodrigues
      > contato@herbetferreira.com
Sumário

> Apresentação
> Introdução ao HTML
          História
      •

          Começando a Programar
      •


> Tags em HTML
          Headings (Cabeçalhos)
      •

          Parágrafos
      •

          Formatação
      •

          Fonte
      •

          Adicionando Imagens
      •

          Criando Links
      •

          Trabalhando com Tabelas
      •




                                    2
Apresentação
> Nome: Herbet Ferreira Rodrigues
> Atividades:
           Cursando 7º Período de Ciência da Computação – UFPB
       •

           Colaborador ativo da NeCTI
       •

             > Site do Departamento de Informática, UFPB
             > Sistema para o Total Card
           Experiência de 8 anos com a Linguagem HTML
       •

           Desenvolvimento Web
       •

             > XHTML 1.1
             > CSS 2.0
             > PHP 5.0
             > MySQL 4.0
             > Web Standards
             > Tableless


                                                                 3
Introdução ao HTML
História

> Desenvolvida em 1980 por Tim Berners-Lee e
  seus colaboradores do CERN (Conselho Europeu
  de Pesquisas Nucleares)
          Manter seus documentos organizados
      •


> Em 1990 foi definida em especificações formais
> Em 2000 a linguagem tornou-se uma norma
  Internacional
          Versão HTML 4.1 lançada pela W3C
      •


> Desenvolvimento do XHTML
          Especificação HTML baseado em XML
      •




                                                   5
Introdução

> O que significa HTML?
         HyperText Markup Language
     •


> O que pode conter?
         Textos, Figuras, Frames, Folhas de Estilo, Cores…
     •


> Quem padroniza tudo isso?
         W3C (World Wide Web Consortium)
     •

         Estabelece compatibilidade das informações na
     •

         Internet




                                                             6
Começando a Programar

> Ferramentas para Desenvolvimento
          Microsoft FrontPage, UltraDev, Adobe GoLive,
      •

          Macromedia Dreamweaver

> Navegadores (Browsers)
          Mozilla Firefox, Opera, Flock, Internet Explorer
      •


> Bloco de Notas




                                                             7
Tags em HTML
Tags em HTML
> Tag é uma palavra-chave que define um item (imagem,
  texto, hyperlink, etc.) que irá compor uma página.

> É identificada pelos símbolos < (menor) e > (maior),
  podendo ser simples ou composta.

> Tags simples são formadas por um único termo
          <hr> - exibe uma linha horizontal na página
      •


> Tags compostas são formadas por dois termos, um de
  abertura, e outro de fechamento.
          <title> Título da Página </title> - esta é uma tag que
      •

          define o título da página.




                                                                   9
Tags em HTML

> Estrutura de uma página HTML:
<html>
<head>
   <title>Título da Página</title>
   <meta http-equiv=“Content-Type”
content=“text/html; charset=iso-8859-1”>
</head>

<body bgcolor=“#FFFFFF”>
Curso de HTML e CSS - NecTI
</body>
</html>


                                           10
Tags em HTML

> <html> e </html>
         Início e Fim do conteúdo de um documento HTML
     •


> <head> e </head>
         Área reservada para o cabeçalho
     •


> <title> e </title>
         Define o título da página
     •


> <body> e </body>
         Corpo do documento. Onde será inserido o conteúdo
     •

         da página.


                                                         11
Tags em HTML (2)
> <meta>
          Tag bastante utilizada pelos programadores para definir quais serão
      •

          as palavras utilizadas para procurar nos sites de busca.

> <meta name=“Author” content=“Herbet Ferreira”>
          Define quem foi o criador da página HTML
      •


> <meta name=“Keywords” content=“curso, html, css, necti”>
          Define quais palavras-chaves que poderão ser utilizadas pelos sites
      •

          de busca

> <meta http-equiv=“Content-type” contet=“text/html;
  charset=iso-8859-1”>
          Especifica o conjunto de caracteres utilizados na página: iso-8859-1
      •




                                                                                 12
Prática

1.Acesse o Bloco de Notas
2.Digite a estrutura padrão de um documento
  HTML
3.Após a digitação, salve o arquivo com a
  extensão .htm
4.Abre o Navegador e digite o endereço da
  página (ou apenas dê um duplo clique no
  arquivo recém-criado).

                                              13
Headings (Cabeçalhos)

> Os cabeçalhos servem para iniciar seções
  dentro de um documento HTML, distintos do
  restante do texto, identificando o início de um
  tópico.
> Existem seis tamanhos a serem utilizados,
  <h1>, <h2>, <h3>, <h4>, <h5> e <h6> e
  todos eles devem ser fechados pelas suas tags
  de fechamanto, </h1>, …, </h6>


                                                    14
Prática

1.Crie um novo documento HTML
2.Digite seis cabeçalhos diferentes utilizando as
  tags headings de <h1> até <h6>
3.Salve o arquivo com o nome cabecalhos.htm
4.Visualize no browser
5.Também podemos alinhas o cabeçalho através
  do parâmetro align



                                                    15
Parágrafos

> <p> e </p>
        Delimita o início e o fim de um parágrafo. Pode-se,
    •

        também, utilizar o alinhamento de texto através do
        parâmetro align

> <br>
        Essa tag força uma quebra de linha, porém, não encerra o
    •

        parágrafo.
        Tag simples, não existe a tag </br>
    •




                                                                   16
Formatação

> Conjunto de tags de início e fim que permitem criar
  efeitos no texto:
> <b>texto</b> - negrito
> <i>texto</i> - itálico
> <u>texto</u> - sublinhado
> <s>texto</s> - tachado

> <big>texto</big> fonte         maior
> <small>texto</small> - fonte menor


                                                        17
Fonte

> <font> e </font>
           Permite determinar as características do texto, como
       •

           o tamanho, a cor e o tipo de fonte a ser utilizada.

> Parâmetro size – tamanho da fonte
> Parâmetro color – cor da fonte
> Parâmetro face – tipo de fonte

<font color=“#0000FF” size=“6” face=“Arial”>Texto</font>

Neste exemplo, colocamos a fonte na cor azul, tamanho 6 e a fonte Arial


                                                                   18
Fonte (2)

> Importante!
         Definir uma seqüência de fontes para que, no caso o
     •

         navegador não encontrar a primeira opção, tenha
         uma segunda ou terceira forma de visualização da
         fonte.



 <font face=“Arial, Helvetica, sans-serif”>Fontes</font>




                                                               19
Linhas Horizontais

> <hr>
        Permite criar uma linha horizontal
    •

        Podemos definir os parâmetros size e width para a
    •

        espessura e o comprimento respectivamente.



                 <hr width=“75%” size=“10”>




                                                            20
Prática

1.Crie um novo documento HTML
2.Digite diversos textos com tamanhos
  diferentes, cores, tipos de fontes e linhas
  horizontais.
3.Salve o arquivo com o nome fontes.htm
4.Visualize no browser




                                                21
Inserindo Imagens

> <img>
          Essa tag é utilizada para a inserção das imagens e precisa
      •

          ser acompanhada por alguns parâmetros.

> Parâmetro src –define o local em que a imagem
  encontra-se.
> Parâmetro width – determina a largura da imagem em
  pixels.
> Parâmetro height – determina a altura da imagem em
  pixels.



                                                                       22
Inserindo Imagens (2)

> Parâmetro border – define se a figura terá
  borda e a sua espessura.
> Parâmetro alt – permite digitar um texto que
  será mostrado no momento em que o usuário
  posicionar o mouse sobre a figura.


 <img src=“teste.gif” width=“54” height=“49” border=“0”
                      alt=“Imagem”>




                                                          23
Ligando Dados (Links)

> Ligar conteúdos (criar vínculos) para que sua
  página seja dinamizada, possibilitando a
  navegação.
> <a> e </a>
         Através das tags <a> e </a>, conseguiremos criar
     •

         nossos vínculos (Hyperlinks)
         A primeira tag deve possuir o parâmetro
     •

         href=“local”, para indicar a página que será
         carregada.



                                                            24
Ligando Dados (Links) (2)

> Links para Downloads
         <a href=“curso.zip”>Material do Curso</a>

> Links para E-mail
<a href=“mailto:contato@herbetferreira.com”>contato</a>

> Âncoras
         Hyperlinks que proporcionam navegar na própria
     •

         página

          <a name=“inicio”>Início da Página</a>

              <a href=“#inicio”>Voltar</a>
                                                          25
Ligando Dados (Links) (3)

> Direcionando Links
          Utilização do parâmetro target (alvo)
      •


           >_blank – abre uma nova janela do navegador
           >_parent – carrega o documento linkado dentro
             do frame-mestre (pai)

           >_self – carrega o documento linkado na mesma
             página. (parâmetro padrão)

           >_top – carrega o documento linkado em toda a
             janela, elimiando frames que possivelmente
             estejam nela


                                                           26
Ligando Dados (Links) (4)
> Cores dos Links
         Definir a cor do link ativo, do link acessado e do link
     •

         não visitado, para uma melhor compreensão e
         visualização na tela. Isso é possível através dos
         parâmetros link, vlink e alink, inseridos na tag
         <body>.

          >link – define a cor dos links ainda não visitados pelo
            usuário

          >alink – define a cor dos links no momento do clique do
            mouse

          >vlink – define a cor dos links que já foram visitados

<body link=“#666FF” vlink=“#00FFFF” alink=“FF6666”>
                                                                    27
Organizando os Dados em Tabelas

> As tabelas são um meio eficaz de controlar o
  layout da página e dispor as infirmações de
  forma mais clara.

    <table width=“75%” border=“1”>
      <tr>
         <td>textos</td>
         <td>tabelas</td>
      </tr>
      <tr>
        <td>figuras</td>
        <td>formulários</td>
      </tr>
                                                 28
    </table>
Organizando os Dados em Tabelas (2)

> Utilize em conjunto com os parâmetros indicados abaixo:
          width=“n” – especifica a largura da tabela em pixels.
      •

          align=“alinhamento” – especifica o alinhamento horizontal da
      •

          tabela.
          valign=“alinhamento” – especifica o alinhameno vertical da tabela.
      •

          border=“n” – especifica a largura da borda da tabela.
      •

          cellspacing=“valor” – especifica o espaço, entre as célular e seu
      •

          conteúdo.
          cellpadding=“valor” – especifica o espaço entre a borda de cada
      •

          célula e seu conteúdo.




                                                                               29
Organizando os Dados em Tabelas (3)

> <tr> e </tr>
         Utilizado para definir as linhas da tabela.
     •


> <td> e </td>
         Utilizado para definir as colunas na tabela.
     •




                                                        30
Mesclando Células

> Parâmetro Colspan
         Permite que as células da tabela sem mescladas, ou seja,
     •

         ocupen uma das mais colunas na tabela.


  <table width=“75%” border=“1”>
    <tr>
           <td colspan=quot;2quot;>&nbsp;</td>
    </tr>
    <tr>
      <td height=“24”>&nbsp;</td>
      <td height=“24”>&nbsp;</td>
    </tr>
  </table>

                                                                    31
Mesclando Células

> Parâmetro Rowspan
         Funciona de forma idêntica ao parâmetro colspan, porém
     •

         em vez de unir colunas, são as linhas que passarão a ser
         uma só.


  <table width=“75%” border=“1”>
    <tr>
      <td rowspan=quot;2quot;>&nbsp;</td>
           <td height=“24”>&nbsp;</td>
    </tr>
    <tr>
      <td height=“24”>&nbsp;</td>
    </tr>
  </table>
                                                                    32
FIM
Aguardem cenas do próximos capítulos...




                                          33
Contato

> Nome: Herbet Ferreira Rodrigues

> E-mail: contato@herbetferreira.com

> Material para Download: http://www.herbetferreira.com




                                                    34

Mais conteúdo relacionado

Mais procurados

Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01 Léo Dias
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSSledsifes
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosTiago Antônio da Silva
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfCesar Braz
 
Desenhando Componentes de Software com UML
Desenhando Componentes de Software com UMLDesenhando Componentes de Software com UML
Desenhando Componentes de Software com UMLRildo (@rildosan) Santos
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTMLLeonardo Soares
 
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, FormulárioArthur Emanuel
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujoorenatoaraujo
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação webCentro Paula Souza
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento WebSérgio Souza Costa
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento webRodrigo Rodrigues
 
Introdução ao GitHub e Git
Introdução ao GitHub  e GitIntrodução ao GitHub  e Git
Introdução ao GitHub e GitIgor Steinmacher
 
Programação orientada a objetos
Programação orientada a objetosProgramação orientada a objetos
Programação orientada a objetosCleyton Ferrari
 

Mais procurados (20)

Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Html
HtmlHtml
Html
 
Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01   Curso de HTML5 - Aula 01
Curso de HTML5 - Aula 01
 
Curso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSSCurso de Desenvolvimento Web - Módulo 02 - CSS
Curso de Desenvolvimento Web - Módulo 02 - CSS
 
Apresentação HTML e CSS
Apresentação HTML e CSSApresentação HTML e CSS
Apresentação HTML e CSS
 
Curso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicosCurso CSS 3 - Aula Introdutória com conceitos básicos
Curso CSS 3 - Aula Introdutória com conceitos básicos
 
07 html formulários
07 html   formulários07 html   formulários
07 html formulários
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Front End x Back End
Front End x Back EndFront End x Back End
Front End x Back End
 
Desenhando Componentes de Software com UML
Desenhando Componentes de Software com UMLDesenhando Componentes de Software com UML
Desenhando Componentes de Software com UML
 
Criação de tabelas com HTML
Criação de tabelas com HTMLCriação de tabelas com HTML
Criação de tabelas com HTML
 
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
HTML -  Listas, Estilos, Tabelas, Div, Span, FormulárioHTML -  Listas, Estilos, Tabelas, Div, Span, Formulário
HTML - Listas, Estilos, Tabelas, Div, Span, Formulário
 
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScriptCurso de Desenvolvimento Web - Módulo 03 - JavaScript
Curso de Desenvolvimento Web - Módulo 03 - JavaScript
 
html, css e java script - renato araujo
html, css e java script - renato araujohtml, css e java script - renato araujo
html, css e java script - renato araujo
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Introdução sobre desenvolvimento web
Introdução sobre desenvolvimento webIntrodução sobre desenvolvimento web
Introdução sobre desenvolvimento web
 
Introdução ao GitHub e Git
Introdução ao GitHub  e GitIntrodução ao GitHub  e Git
Introdução ao GitHub e Git
 
Programação orientada a objetos
Programação orientada a objetosProgramação orientada a objetos
Programação orientada a objetos
 

Destaque

Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1dionyso
 
Lista de Seletores e Propriedades
Lista de Seletores e PropriedadesLista de Seletores e Propriedades
Lista de Seletores e PropriedadesAntonio Silva
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTMLTales Augusto
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Felipe Fernandes
 
Conecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoConecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoAntonio Silva
 
HTML - Formatação de Textos
HTML - Formatação de TextosHTML - Formatação de Textos
HTML - Formatação de TextosMayza de Oliveira
 
Top Plugins de Segurança para WordPress
Top Plugins de Segurança para WordPressTop Plugins de Segurança para WordPress
Top Plugins de Segurança para WordPressTales Augusto
 
Curso de html - Como Criar Furmulários em HTML
Curso de html  - Como Criar Furmulários em HTMLCurso de html  - Como Criar Furmulários em HTML
Curso de html - Como Criar Furmulários em HTMLTales Augusto
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Eduardo Bertolucci
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTMLDiego Eis
 
Como fazer um trabalho em word
Como fazer um trabalho em wordComo fazer um trabalho em word
Como fazer um trabalho em wordAnaGomes40
 

Destaque (20)

HTML Principios Básicos
HTML Principios BásicosHTML Principios Básicos
HTML Principios Básicos
 
Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1Curso prático de HTML - Aula 1
Curso prático de HTML - Aula 1
 
Lista de Seletores e Propriedades
Lista de Seletores e PropriedadesLista de Seletores e Propriedades
Lista de Seletores e Propriedades
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
Gestão de negócios
Gestão de negóciosGestão de negócios
Gestão de negócios
 
Curso de html - Introdução ao HTML
Curso de html -  Introdução ao HTMLCurso de html -  Introdução ao HTML
Curso de html - Introdução ao HTML
 
Web Design > HTML (aula 1)
Web Design > HTML (aula 1)Web Design > HTML (aula 1)
Web Design > HTML (aula 1)
 
HTML Formatando Textos
HTML Formatando TextosHTML Formatando Textos
HTML Formatando Textos
 
Curso html basico_aula-003
Curso html basico_aula-003Curso html basico_aula-003
Curso html basico_aula-003
 
Conecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - ApresentaçãoConecte - Curso de HTML - Apresentação
Conecte - Curso de HTML - Apresentação
 
HTML - Formatação de Textos
HTML - Formatação de TextosHTML - Formatação de Textos
HTML - Formatação de Textos
 
Natal 2013
Natal 2013Natal 2013
Natal 2013
 
GingaHero
GingaHeroGingaHero
GingaHero
 
Curso html basico_aula-001
Curso html basico_aula-001Curso html basico_aula-001
Curso html basico_aula-001
 
Top Plugins de Segurança para WordPress
Top Plugins de Segurança para WordPressTop Plugins de Segurança para WordPress
Top Plugins de Segurança para WordPress
 
Web Design > Aula 00
Web Design > Aula 00Web Design > Aula 00
Web Design > Aula 00
 
Curso de html - Como Criar Furmulários em HTML
Curso de html  - Como Criar Furmulários em HTMLCurso de html  - Como Criar Furmulários em HTML
Curso de html - Como Criar Furmulários em HTML
 
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
Trabalho de HTML, CSS e JavaScript - Eduardo Bertolucci - UNOPAR 2010
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
Como fazer um trabalho em word
Como fazer um trabalho em wordComo fazer um trabalho em word
Como fazer um trabalho em word
 

Semelhante a Curso HTML e CSS Part1

Semelhante a Curso HTML e CSS Part1 (20)

Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 
HTML e Hipertexto
HTML e HipertextoHTML e Hipertexto
HTML e Hipertexto
 
HTML Básico 2
HTML Básico 2HTML Básico 2
HTML Básico 2
 
Academia Verão 2011 - HTML
Academia Verão 2011 - HTMLAcademia Verão 2011 - HTML
Academia Verão 2011 - HTML
 
Academia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSSAcademia verao 2011 - HTML + CSS
Academia verao 2011 - HTML + CSS
 
W3 c
W3 cW3 c
W3 c
 
HTML - Parte 1
HTML - Parte 1HTML - Parte 1
HTML - Parte 1
 
Mini curso html5 slides
Mini curso html5   slidesMini curso html5   slides
Mini curso html5 slides
 
Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03Desenvolvimento para a Internet - Aula 03
Desenvolvimento para a Internet - Aula 03
 
Curso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTMLCurso Desenvolvimento WEB com PHP - HTML
Curso Desenvolvimento WEB com PHP - HTML
 
Aula02
Aula02Aula02
Aula02
 
HTML5?
HTML5?HTML5?
HTML5?
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Aula1
Aula1Aula1
Aula1
 
Curso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JSCurso de HTML5 CSS3 e JS
Curso de HTML5 CSS3 e JS
 
Html slide
Html slideHtml slide
Html slide
 
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor FranciosneyRevisão HTML, CSS e BOOTSTRAP - Professor Franciosney
Revisão HTML, CSS e BOOTSTRAP - Professor Franciosney
 
Aula html
Aula htmlAula html
Aula html
 
Curso HTML e CSS Part2
Curso HTML e CSS Part2Curso HTML e CSS Part2
Curso HTML e CSS Part2
 

Último

Recurso Casa das Ciências: Geodiversidade, um bem comum
Recurso Casa das Ciências: Geodiversidade, um bem comumRecurso Casa das Ciências: Geodiversidade, um bem comum
Recurso Casa das Ciências: Geodiversidade, um bem comumCasa Ciências
 
Poder do convencimento,........... .
Poder do convencimento,...........         .Poder do convencimento,...........         .
Poder do convencimento,........... .WAGNERJESUSDACUNHA
 
PPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptx
PPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptxPPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptx
PPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptxLucianoPeixoto16
 
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...Colaborar Educacional
 
Texto informativo - Bullying não é brincadeira
Texto informativo  - Bullying não é brincadeiraTexto informativo  - Bullying não é brincadeira
Texto informativo - Bullying não é brincadeiraMary Alvarenga
 
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123JaineCarolaineLima
 
Seminário sobre a Escrita Alfabetica.pptx
Seminário sobre a Escrita Alfabetica.pptxSeminário sobre a Escrita Alfabetica.pptx
Seminário sobre a Escrita Alfabetica.pptxRBA
 
QUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptx
QUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptxQUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptx
QUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptxRailsonLima12
 
Poema sobre o mosquito Aedes aegipyti -
Poema sobre o mosquito Aedes aegipyti  -Poema sobre o mosquito Aedes aegipyti  -
Poema sobre o mosquito Aedes aegipyti -Mary Alvarenga
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...Unidad de Espiritualidad Eudista
 
Ppt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptx
Ppt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptxPpt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptx
Ppt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptxRodrigoBrito411997
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxtaloAugusto8
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresEu Prefiro o Paraíso.
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfItaloAtsoc
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024gilmaraoliveira0612
 
O-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus SousaO-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus SousaTeresaCosta92
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXHisrelBlog
 

Último (20)

Recurso Casa das Ciências: Geodiversidade, um bem comum
Recurso Casa das Ciências: Geodiversidade, um bem comumRecurso Casa das Ciências: Geodiversidade, um bem comum
Recurso Casa das Ciências: Geodiversidade, um bem comum
 
(58 ESTUDO DE MARCOS) A MAIOR MARCHA DA HISTORIA.
(58 ESTUDO DE MARCOS) A MAIOR MARCHA DA HISTORIA.(58 ESTUDO DE MARCOS) A MAIOR MARCHA DA HISTORIA.
(58 ESTUDO DE MARCOS) A MAIOR MARCHA DA HISTORIA.
 
Poder do convencimento,........... .
Poder do convencimento,...........         .Poder do convencimento,...........         .
Poder do convencimento,........... .
 
PPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptx
PPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptxPPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptx
PPT - FORMAÇÃO DOS ALUNOS PARA ELETIVA.pptx
 
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
Apresente de forma sucinta as atividades realizadas ao longo do semestre, con...
 
Texto informativo - Bullying não é brincadeira
Texto informativo  - Bullying não é brincadeiraTexto informativo  - Bullying não é brincadeira
Texto informativo - Bullying não é brincadeira
 
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
SEMIOSES DO OLHAR - SLIDE PARA ESTUDO 123
 
Seminário sobre a Escrita Alfabetica.pptx
Seminário sobre a Escrita Alfabetica.pptxSeminário sobre a Escrita Alfabetica.pptx
Seminário sobre a Escrita Alfabetica.pptx
 
QUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptx
QUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptxQUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptx
QUIZ AULA DE CIÊNCIAS EVOLUÇÃO ESTRELAR.pptx
 
Poema sobre o mosquito Aedes aegipyti -
Poema sobre o mosquito Aedes aegipyti  -Poema sobre o mosquito Aedes aegipyti  -
Poema sobre o mosquito Aedes aegipyti -
 
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
A Congregação de Jesus e Maria, conhecida também como os Eudistas, foi fundad...
 
Ppt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptx
Ppt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptxPpt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptx
Ppt6.1_Ciclo de matéria e fluxo de energia_8ºano (1).pptx
 
Apresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptxApresentação sobrea dengue educação.pptx
Apresentação sobrea dengue educação.pptx
 
Como fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de GestoresComo fazer um Feedback Eficaz - Comitê de Gestores
Como fazer um Feedback Eficaz - Comitê de Gestores
 
(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS(42-ESTUDO - LUCAS)  DISCIPULO  DE JESUS
(42-ESTUDO - LUCAS) DISCIPULO DE JESUS
 
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdfARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
ARTE BARROCA E ROCOCO BRASILEIRO-min.pdf
 
Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024Atividade de matemática para simulado de 2024
Atividade de matemática para simulado de 2024
 
O-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus SousaO-P-mais-importante.pptx de Maria Jesus Sousa
O-P-mais-importante.pptx de Maria Jesus Sousa
 
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARXA CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
A CONCEPÇÃO FILO/SOCIOLÓGICA DE KARL MARX
 
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdfAbordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
Abordagem 3. Análise interpretativa (Severino, 2013)_PdfToPowerPoint.pdf
 

Curso HTML e CSS Part1

  • 1. Curso HTML & CSS > Herbet Ferreira Rodrigues > contato@herbetferreira.com
  • 2. Sumário > Apresentação > Introdução ao HTML História • Começando a Programar • > Tags em HTML Headings (Cabeçalhos) • Parágrafos • Formatação • Fonte • Adicionando Imagens • Criando Links • Trabalhando com Tabelas • 2
  • 3. Apresentação > Nome: Herbet Ferreira Rodrigues > Atividades: Cursando 7º Período de Ciência da Computação – UFPB • Colaborador ativo da NeCTI • > Site do Departamento de Informática, UFPB > Sistema para o Total Card Experiência de 8 anos com a Linguagem HTML • Desenvolvimento Web • > XHTML 1.1 > CSS 2.0 > PHP 5.0 > MySQL 4.0 > Web Standards > Tableless 3
  • 5. História > Desenvolvida em 1980 por Tim Berners-Lee e seus colaboradores do CERN (Conselho Europeu de Pesquisas Nucleares) Manter seus documentos organizados • > Em 1990 foi definida em especificações formais > Em 2000 a linguagem tornou-se uma norma Internacional Versão HTML 4.1 lançada pela W3C • > Desenvolvimento do XHTML Especificação HTML baseado em XML • 5
  • 6. Introdução > O que significa HTML? HyperText Markup Language • > O que pode conter? Textos, Figuras, Frames, Folhas de Estilo, Cores… • > Quem padroniza tudo isso? W3C (World Wide Web Consortium) • Estabelece compatibilidade das informações na • Internet 6
  • 7. Começando a Programar > Ferramentas para Desenvolvimento Microsoft FrontPage, UltraDev, Adobe GoLive, • Macromedia Dreamweaver > Navegadores (Browsers) Mozilla Firefox, Opera, Flock, Internet Explorer • > Bloco de Notas 7
  • 9. Tags em HTML > Tag é uma palavra-chave que define um item (imagem, texto, hyperlink, etc.) que irá compor uma página. > É identificada pelos símbolos < (menor) e > (maior), podendo ser simples ou composta. > Tags simples são formadas por um único termo <hr> - exibe uma linha horizontal na página • > Tags compostas são formadas por dois termos, um de abertura, e outro de fechamento. <title> Título da Página </title> - esta é uma tag que • define o título da página. 9
  • 10. Tags em HTML > Estrutura de uma página HTML: <html> <head> <title>Título da Página</title> <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”> </head> <body bgcolor=“#FFFFFF”> Curso de HTML e CSS - NecTI </body> </html> 10
  • 11. Tags em HTML > <html> e </html> Início e Fim do conteúdo de um documento HTML • > <head> e </head> Área reservada para o cabeçalho • > <title> e </title> Define o título da página • > <body> e </body> Corpo do documento. Onde será inserido o conteúdo • da página. 11
  • 12. Tags em HTML (2) > <meta> Tag bastante utilizada pelos programadores para definir quais serão • as palavras utilizadas para procurar nos sites de busca. > <meta name=“Author” content=“Herbet Ferreira”> Define quem foi o criador da página HTML • > <meta name=“Keywords” content=“curso, html, css, necti”> Define quais palavras-chaves que poderão ser utilizadas pelos sites • de busca > <meta http-equiv=“Content-type” contet=“text/html; charset=iso-8859-1”> Especifica o conjunto de caracteres utilizados na página: iso-8859-1 • 12
  • 13. Prática 1.Acesse o Bloco de Notas 2.Digite a estrutura padrão de um documento HTML 3.Após a digitação, salve o arquivo com a extensão .htm 4.Abre o Navegador e digite o endereço da página (ou apenas dê um duplo clique no arquivo recém-criado). 13
  • 14. Headings (Cabeçalhos) > Os cabeçalhos servem para iniciar seções dentro de um documento HTML, distintos do restante do texto, identificando o início de um tópico. > Existem seis tamanhos a serem utilizados, <h1>, <h2>, <h3>, <h4>, <h5> e <h6> e todos eles devem ser fechados pelas suas tags de fechamanto, </h1>, …, </h6> 14
  • 15. Prática 1.Crie um novo documento HTML 2.Digite seis cabeçalhos diferentes utilizando as tags headings de <h1> até <h6> 3.Salve o arquivo com o nome cabecalhos.htm 4.Visualize no browser 5.Também podemos alinhas o cabeçalho através do parâmetro align 15
  • 16. Parágrafos > <p> e </p> Delimita o início e o fim de um parágrafo. Pode-se, • também, utilizar o alinhamento de texto através do parâmetro align > <br> Essa tag força uma quebra de linha, porém, não encerra o • parágrafo. Tag simples, não existe a tag </br> • 16
  • 17. Formatação > Conjunto de tags de início e fim que permitem criar efeitos no texto: > <b>texto</b> - negrito > <i>texto</i> - itálico > <u>texto</u> - sublinhado > <s>texto</s> - tachado > <big>texto</big> fonte maior > <small>texto</small> - fonte menor 17
  • 18. Fonte > <font> e </font> Permite determinar as características do texto, como • o tamanho, a cor e o tipo de fonte a ser utilizada. > Parâmetro size – tamanho da fonte > Parâmetro color – cor da fonte > Parâmetro face – tipo de fonte <font color=“#0000FF” size=“6” face=“Arial”>Texto</font> Neste exemplo, colocamos a fonte na cor azul, tamanho 6 e a fonte Arial 18
  • 19. Fonte (2) > Importante! Definir uma seqüência de fontes para que, no caso o • navegador não encontrar a primeira opção, tenha uma segunda ou terceira forma de visualização da fonte. <font face=“Arial, Helvetica, sans-serif”>Fontes</font> 19
  • 20. Linhas Horizontais > <hr> Permite criar uma linha horizontal • Podemos definir os parâmetros size e width para a • espessura e o comprimento respectivamente. <hr width=“75%” size=“10”> 20
  • 21. Prática 1.Crie um novo documento HTML 2.Digite diversos textos com tamanhos diferentes, cores, tipos de fontes e linhas horizontais. 3.Salve o arquivo com o nome fontes.htm 4.Visualize no browser 21
  • 22. Inserindo Imagens > <img> Essa tag é utilizada para a inserção das imagens e precisa • ser acompanhada por alguns parâmetros. > Parâmetro src –define o local em que a imagem encontra-se. > Parâmetro width – determina a largura da imagem em pixels. > Parâmetro height – determina a altura da imagem em pixels. 22
  • 23. Inserindo Imagens (2) > Parâmetro border – define se a figura terá borda e a sua espessura. > Parâmetro alt – permite digitar um texto que será mostrado no momento em que o usuário posicionar o mouse sobre a figura. <img src=“teste.gif” width=“54” height=“49” border=“0” alt=“Imagem”> 23
  • 24. Ligando Dados (Links) > Ligar conteúdos (criar vínculos) para que sua página seja dinamizada, possibilitando a navegação. > <a> e </a> Através das tags <a> e </a>, conseguiremos criar • nossos vínculos (Hyperlinks) A primeira tag deve possuir o parâmetro • href=“local”, para indicar a página que será carregada. 24
  • 25. Ligando Dados (Links) (2) > Links para Downloads <a href=“curso.zip”>Material do Curso</a> > Links para E-mail <a href=“mailto:contato@herbetferreira.com”>contato</a> > Âncoras Hyperlinks que proporcionam navegar na própria • página <a name=“inicio”>Início da Página</a> <a href=“#inicio”>Voltar</a> 25
  • 26. Ligando Dados (Links) (3) > Direcionando Links Utilização do parâmetro target (alvo) • >_blank – abre uma nova janela do navegador >_parent – carrega o documento linkado dentro do frame-mestre (pai) >_self – carrega o documento linkado na mesma página. (parâmetro padrão) >_top – carrega o documento linkado em toda a janela, elimiando frames que possivelmente estejam nela 26
  • 27. Ligando Dados (Links) (4) > Cores dos Links Definir a cor do link ativo, do link acessado e do link • não visitado, para uma melhor compreensão e visualização na tela. Isso é possível através dos parâmetros link, vlink e alink, inseridos na tag <body>. >link – define a cor dos links ainda não visitados pelo usuário >alink – define a cor dos links no momento do clique do mouse >vlink – define a cor dos links que já foram visitados <body link=“#666FF” vlink=“#00FFFF” alink=“FF6666”> 27
  • 28. Organizando os Dados em Tabelas > As tabelas são um meio eficaz de controlar o layout da página e dispor as infirmações de forma mais clara. <table width=“75%” border=“1”> <tr> <td>textos</td> <td>tabelas</td> </tr> <tr> <td>figuras</td> <td>formulários</td> </tr> 28 </table>
  • 29. Organizando os Dados em Tabelas (2) > Utilize em conjunto com os parâmetros indicados abaixo: width=“n” – especifica a largura da tabela em pixels. • align=“alinhamento” – especifica o alinhamento horizontal da • tabela. valign=“alinhamento” – especifica o alinhameno vertical da tabela. • border=“n” – especifica a largura da borda da tabela. • cellspacing=“valor” – especifica o espaço, entre as célular e seu • conteúdo. cellpadding=“valor” – especifica o espaço entre a borda de cada • célula e seu conteúdo. 29
  • 30. Organizando os Dados em Tabelas (3) > <tr> e </tr> Utilizado para definir as linhas da tabela. • > <td> e </td> Utilizado para definir as colunas na tabela. • 30
  • 31. Mesclando Células > Parâmetro Colspan Permite que as células da tabela sem mescladas, ou seja, • ocupen uma das mais colunas na tabela. <table width=“75%” border=“1”> <tr> <td colspan=quot;2quot;>&nbsp;</td> </tr> <tr> <td height=“24”>&nbsp;</td> <td height=“24”>&nbsp;</td> </tr> </table> 31
  • 32. Mesclando Células > Parâmetro Rowspan Funciona de forma idêntica ao parâmetro colspan, porém • em vez de unir colunas, são as linhas que passarão a ser uma só. <table width=“75%” border=“1”> <tr> <td rowspan=quot;2quot;>&nbsp;</td> <td height=“24”>&nbsp;</td> </tr> <tr> <td height=“24”>&nbsp;</td> </tr> </table> 32
  • 33. FIM Aguardem cenas do próximos capítulos... 33
  • 34. Contato > Nome: Herbet Ferreira Rodrigues > E-mail: contato@herbetferreira.com > Material para Download: http://www.herbetferreira.com 34