SlideShare uma empresa Scribd logo
HTML e CSS
                                                     Starting




 Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
Starting
                                             HTML


 Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
O que é HTML?

 • Linguagem utilizada para a criação de páginas Web;

 • Abreviatura de Hyper Text Markup Language;

 • Não é uma linguagem de programação mas sim uma
 linguagem de marcação;

 • Liguagem de marcação = grupo de “tags” de marcação
 que descrevem as páginas Web;




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
O que são “tags” HTML?

 • tags HTML = tags de marcação HTML;

 • São palavras-chave contidas entre o sinal de menor (<)
 e maior (>);

 • Existe sempre uma de abertura (<body>) e uma de fe-
 cho (</body>);

 • Existem tags de abertura e fecho simultâneo (<br/>);




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
O que são Elementos HTML?

 • É tudo o que começa com uma tag de abertura
 (<body>) e uma tag de fecho (</body>);

 • Termina sempre com uma tag de fecho (</body>);

 • O seu conteúdo é tudo o que está entre as tags de ab-
 ertura e de fecho;

 • Existem elementos HTML sem conteúdo (<br/>);




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
O que são Elementos HTML?

 • O elementos sem conteúdo abrem-se e fecham-se na
 mesma tag (<br/>);

 • A maior parte dos elementos HTML podem ter atribu-
 tos;

 • Pode haver elementos HTML dentro de outros elemen-
 tos HTML;




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Elementos HTML
 • <html> ... </html> define todo o documento HTML
 e o seu conteúdo são outros elementos HTML, como por
 exemplo:

 • <head> ... </head> onde está contida a metadata
 e o seu conteúdo são outros elementos HTML, como por
 exemplo:

 • <title> ... </title> nome que vai aparecer no separa-
 dor/barra do browser;

 • <keywords> ... </keywords> contém todas as pala-
 vras chaves, para quando numa pesquisa num motor de
 busca mostre-nos também o nosso site;
        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Elementos HTML
 • <link ... /> define a relação entre o documento HTML
 e uma fonte externa (Folha CSS);

 • <body> ... </body> define o todo o documento
 HTML e contém outros elementos HTML, como por exem-
 plo:

 • <p> ... </p> define um parágrafo num documento
 HTML;

 • <a href=”meusite.html” > ... </a> define um link
 para uma página HTML;

 • <br/> ou <br> elemento HTML vazio que define uma
 quebra de linha;
         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Elementos HTML
 • <h1> ... </h1> define um título com um tamanho de
 letra já predefinido;

 • <table> ... </table> cria uma tabela e contém outros
 elementos HTML que dão forma à tabela, como por ex-
 emplo:

 • <tr > ... </tr> define o número de linhas de uma tab-
 ela;

 • <td> ... </td> define uma célula de cada linha;

 • <img src=”eu.png”> ... </img> insere uma imagem;



          Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
O que são Atributos HTML?

 • Atribuem informação adicional a um elemento HTML;

 • São sempre especificados na tag de abertura (<a
 href=”meusite.html”>);

 • São sempre definidos dentro da tag de abertura como
 nome=”valor”, onde as aspas são obrigatórias;




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Headings HTML

 • Definidos com as tags <h1> a <h6>;

 • Quanto maior o número (<h6>), menor o tamanho da
 letra apresentada;




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Headings HTML - Exemplo

 • Abrir editor de HTML (Notepad, Dreamweaver);

 • Entre as tags de abertura e fecho do “body”, escrever
 o seguinte código:

               <h1>O meu título “h1”</h1>
               <h2>O meu título ”h2”</h2>
               <h3>O meu título “h3”</h3>
               <h4>O meu título “h4”</h4>
               <h5>O meu título “h5”</h5>
               <h6>O meu título “h6”</h6>

         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Headings HTML - Exemplo

  • Obtem-se:




       Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Parágrafos HTML - Exemplo

 • Abrir editor de HTML (Notepad, Dreamweaver);

 • Entre as tags de abertura e fecho do “body”, escrever
 o seguinte código:


        <p>O meu primeiro parágrafo</p>

        <p>O meu segundo parágrafo</p>




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Parágrafos HTML - Exemplo

  • Obtem-se:




       Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
tags de formatação
 • <b> ... </b> põe um texto, uma palavra, letra(s) a
 bold;

 • <i> ... </i> põe um texto, uma palavra, letra(s) a
 itálico;

 • <big> ... </big> põe um texto, uma palavra, letra(s)
 um pouco maior;

 •<code> ... </code> muda o tipo de letra para o que
 normalmente é utilizado em programação;




            Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
tags de formatação
 • <sub> ... </sub> põe palavra(s), texto, letra(s) em
 subscrito;

 • <sup> ... </sup> põe palavra(s), texto, letra(s) em
 sobrescrito;




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
tags de formatação - Exemplo

 • Abrir editor de HTML (Notepad, Dreamweaver);

 • Entre as tags de abertura e fecho de um parágrafo,
 escrever o seguinte código:

       <b>Texto em Bold</b>
       <i>Texto em itálico</i>
       <big>Texto maior</big>
       <code>Texto com letra de código</code>
       <sub>Texto subscrito</sub>
       <sup>texto sobrescrito</sup>

         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
tags de formatação - Exemplo

  • Obtem-se:




       Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como inserir imagens?
 • Definidas em HTML com a tag <img>;

 • Tem que conter o atributo “src” (source);

 • O valor do atributo “src” é o URL da imagem;

 • URL indica onde está a imagem (quer seja no computa-
 dor quer seja online);

 • Pode conter o atributo “alt”, que atribui um texto à im-
 agem quando esta não for visualizada;

 •Apresentada no browser no sítio onde está inserida no
 documento;



         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como inserir imagens?
 • Pode conter os atributos “height” (altura) e “width” (lar-
 gura);

 • “height” e “width” definem a altura e a largura da ima-
 gem, respectivamente;

 • Os valores dos atributos “height” e “width” são defini-
 dos em pixeis;

 •Não tem tag de fecho;




          Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como inserir imagens? - Exemplo

 • Abrir editor de HTML (Notepad, Dreamweaver);

 • Entre as tags de abertura e fecho de um parágrafo,
 escrever o seguinte código:



<img src=”http://www.iasfa.pt/imagens/images/
acordo/ulp.gif” alt=”logo_ULP” height=”300px”
width=”500px”>




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como inserir imagens? - Exemplo

 • Obtem-se;




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como criar tabelas?
 • Definida pela tag <table>;

 • São divididas em linhas (<tr>);

 • Cada linha é dividida em células (<td>);

 • Pode-se definir a espessura da borda da tabela com o
 atributo “border”;

 • Podem-se definir cabeçalhos a cada coluna da tabela
 com a tag <th>;




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como criar tabelas? - Exemplo

 • Abrir editor de HTML (Notepad, Dreamweaver);

 • Entre as tags de abertura e fecho de um parágrafo,
 escrever o seguinte código:
                  <table border=”2”>
                  <tr>
                  <th>Primeiro Cabeçalho</th>
                  <th>Segundo Cabeçalho</th>
                  </tr>
                  <tr>
                  <td>Primeira célula, primeira linha</td>
                  <td>Segunda célula, primeira linha</td>
                  </tr>
                  <tr>
                  <td>Primeira célula, segunda linha</td>
                  <td>Segunda célula, segunda linha</td>
                  </tr>
                  </table>

         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como criar tabelas? - Exemplo

 • Obtem-se:




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como criar listas?
 • Podem-se criar listas ordenadas e não ordenadas;

 • <ul> tag de abertura de uma lista não ordenada;

 • <ol> tag de abertura de uma lista ordenada;

 • <li> tag de abertura de cada item da lista;

 • Os items das listas não ordenadas são antecedidos de
 uma bola preenchida a negro;

 • Os items das listas ordenadas são antecedidos de um
 número (1) e um ponto (.);




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como criar listas? - Exemplo

 • Abrir editor de HTML (Notepad, Dreamweaver);

 • Entre as tags de abertura e fecho de um parágrafo,
 escrever o seguinte código:


                               <ul>
                               <li>Estudar</li>
                               <li>Não estudar</li>
                               </ul>
                               <ol>
                               <li>Estudar</li>
                               <li>Não estudar</li>
                               </ol>




         Mónica Ferreira   |    2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
HTML
Como criar listas? - Exemplo

 • Obtem-se;




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
Starting
                                                   CSS


 Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
O que é CSS?

 • Abreviatura de Cascading Style Sheet;

 • Definimos a disposição dos elementos HTML;

 • Permite ter um documento HTML mais “limpo”;

 • Permite-nos mudar a formatação de todos os nossos
 documentos HTML ao mesmo tempo;




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Sintaxe CSS

 • Cada regra CSS é composta por duas partes: Selector
 e a Declaração;

 •O selector é aquilo que queremos formatar;

 • Exemplo:



       body { background-color:#fff; };


    Selector                           Declaração


        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Sintaxe CSS

 • Cada declaração é composta por Propriedades e re-
 spectivos Valores;

 • Exemplo:

               body { background-color:#fff; };


          Selector                      Propriedade                                 Valor




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |    Diurno
CSS
Como introduzir CSS?

 • Folha de estilos externa;

 • Folha de estilos interna;

 • “Inline style”;




          Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Folha de estilos externa

 • Ideal quando se quer aplicar estilos a várias páginas;

 • Pode-se mudar o aspecto todo de um website mudando
 apenas um ficheiro;

 • Cada página tem que ter um link para a folha de esti-
 los (<link>) que se insere na tag <head>;

 • Pode ser criada em qualquer editor de texto (notepad,
 Dreamweaver), guardado com a extensão “.CSS”;

 • Não contém tags HTML;



         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Folha de estilos externa

 • Exemplo:


    <head>
    <link rel=”stylesheet” type=”text/css” href=”meucss.css” />
    </head>




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Folha de estilos Interna

 • Deve ser utilizada quando um dado documento tem um
 estilo específico;

 • Definida com a tag <style> inserida na tag <head> do
 documento HTML;

 • Exemplo:
   <head>
   <style type=”text/css”>
   hr {color:#fff;}
   p {margin-to:200px;}
   body {background-color:blue);}
   </style>
   </head>

         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
“Inline Style”

 • Perde muitas das vantagens das folhas de estilo
 porque mistura o conteúdo do documento com a apre-
 sentação do mesmo;

 • Necessário utilizar o atributo de estilo na tag pretend-
 ida;

 • O atributo pode conter qualquer propriedade CSS;

 • Exemplo:

        <p style=”color:#fff; margin:auto”>...</p>



          Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Selectores CSS

 • CSS permite-nos atribuir dois selectores: “id” e
 “class”;

 • “id” usado para especificar um estilo para um só ele-
 mento;

 • “id” definido no CSS com cardinal (#estilo);

 • <div id=”estilo”> código para designar um estilo a um
 determinado elemento HTML;




            Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Selectores CSS

 • “class” usado para especificar um estilo para um grupo
 de elementos HTML;

 • “class” usado em mais do que um elemento HTML, ao
 contrário do “id”;

 • “class” definido no CSS com um ponto(.classe);




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Propriedade “background”


 • Utilizada para atribuir um fundo a um elemento do
 documento;

 • “background-color” - atribui uma cor ao fundo;

 • “background-image” - atribui uma imagem ao fundo;

 • “background-repeat” - define se a imagem se repete
 no eixo xOy;




        Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
Propriedade “background”


 • “background-attachment” - define se a imagem é
 fixa ou se “anda” quando se utiliza a barra de rolamento;

 • “background-position” - define a posição da imagem
 do fundo;

 • “background” - podem-se inserir todas as caracterís-
 ticas anteriores numa só declaração;




         Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno
CSS
    Propriedade “background”


      • Exemplo:

      body {
      background: #ffffff url(‘img_tree.png’) no-repeat fixed right top;
      };
                            Cor            Imagem                        Repetição                        Posição
                          (color)           (image)                         (repeat)                  (position)

                                                                                            Fixação
                                                                                          (attachment)




• NOTA: A ordem tem obrigatoriamente de ser a apresentada, mas podem-se não utilizar todas as
características.


                   Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia     |    Diurno
CSS
   Propriedade “text”


     • Utilizada para formatar texto;

     • “text-color” - define a cor do texto;	

     • “text-align” - define o alinhamento horizontal do texto;

     • “text-decoration” - define se há ou não alguma for-
     matação adicional ao texto (rasurado, linha por cima, sub-
     linhado, blink (bold));



• NOTA: “blink” não é aceite por alguns browsers como o Google Chrome, Internet Explorer, Safari



                  Mónica Ferreira   |   2º Ano de Comunicação audiovisual e Multimédia   |   Diurno

Mais conteúdo relacionado

Mais procurados

Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
Sérgio Souza Costa
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
Leonardo Soares
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
Centro Paula Souza
 
Aula javascript
Aula  javascriptAula  javascript
Aula javascript
Gabriel Moura
 
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
orenatoaraujo
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
Salvador Torres
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Html Básico
Html BásicoHtml Básico
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
Bruno Catão
 
Html
HtmlHtml
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
andreluizlc
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
Tiago Luiz Ribeiro da Silva
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
Carlos Eduardo Kadu
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
Kaoru Hatake
 
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
André Constantino da Silva
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
Daniel Brandão
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
Pablo Sanches
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
Jorge Ávila Miranda
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
Cristiano Pires Martins
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
Daniel Brandão
 

Mais procurados (20)

Introdução ao desenvolvimento Web
Introdução ao desenvolvimento WebIntrodução ao desenvolvimento Web
Introdução ao desenvolvimento Web
 
Introdução a programação para a Internet
Introdução a programação para a InternetIntrodução a programação para a Internet
Introdução a programação para a Internet
 
01 Introdução à programação web
01 Introdução à programação web01 Introdução à programação web
01 Introdução à programação web
 
Aula javascript
Aula  javascriptAula  javascript
Aula 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
 
Introdução a HTML5
Introdução a HTML5Introdução a HTML5
Introdução a HTML5
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Html Básico
Html BásicoHtml Básico
Html Básico
 
Introdução a JavaScript
Introdução a JavaScriptIntrodução a JavaScript
Introdução a JavaScript
 
Html
HtmlHtml
Html
 
Aula 3. frameworks front end
Aula 3. frameworks front endAula 3. frameworks front end
Aula 3. frameworks front end
 
HTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no htmlHTML - Aula 01 - Estrutura básica e tags básicas no html
HTML - Aula 01 - Estrutura básica e tags básicas no html
 
Introdução básica ao JavaScript
Introdução básica ao JavaScriptIntrodução básica ao JavaScript
Introdução básica ao JavaScript
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
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
 
Aula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para WebAula 1 - Programação Dinâmica para Web
Aula 1 - Programação Dinâmica para Web
 
Curso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScriptCurso HTML, CSS e JavaScript
Curso HTML, CSS e JavaScript
 
Aula01-JavaScript
Aula01-JavaScriptAula01-JavaScript
Aula01-JavaScript
 
Javascript aula 01 - visão geral
Javascript   aula 01 - visão geralJavascript   aula 01 - visão geral
Javascript aula 01 - visão geral
 
Aula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHPAula 02 - Introdução ao PHP
Aula 02 - Introdução ao PHP
 

Destaque

Parceiro Programador
Parceiro ProgramadorParceiro Programador
Parceiro Programador
Carlos Henrique Muller
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
Morvana Bonin
 
ebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSSebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSS
David Arty
 
Curso html
Curso htmlCurso html
Curso html
richard_romancini
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
Talita Pagani
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
People Strategists
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
Diego Eis
 
Ninja html 5 css javascript
Ninja html 5 css javascriptNinja html 5 css javascript
Ninja html 5 css javascript
Danilo Sousa
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
Edureka!
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
Abel LIFAEFI MBULA
 
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...
Uni Buscapé Company
 

Destaque (11)

Parceiro Programador
Parceiro ProgramadorParceiro Programador
Parceiro Programador
 
Css cascading style sheet
Css cascading style sheetCss cascading style sheet
Css cascading style sheet
 
ebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSSebook Solidário Fluência de HTML & CSS
ebook Solidário Fluência de HTML & CSS
 
Curso html
Curso htmlCurso html
Curso html
 
Construindo layout de sites com CSS
Construindo layout de sites com CSSConstruindo layout de sites com CSS
Construindo layout de sites com CSS
 
HTML/HTML5
HTML/HTML5HTML/HTML5
HTML/HTML5
 
A verdadeira semântica do HTML
A verdadeira semântica do HTMLA verdadeira semântica do HTML
A verdadeira semântica do HTML
 
Ninja html 5 css javascript
Ninja html 5 css javascriptNinja html 5 css javascript
Ninja html 5 css javascript
 
Web Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScriptWeb Development with HTML5, CSS3 & JavaScript
Web Development with HTML5, CSS3 & JavaScript
 
Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3Cours d'introduction aux HTML5 & CSS3
Cours d'introduction aux HTML5 & CSS3
 
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...
 

Semelhante a HTML e CSS

Apostila html
Apostila htmlApostila html
Apostila html
Danielle Almeida
 
Ambiente web
Ambiente webAmbiente web
Ambiente web
Washington Oliveira
 
Apostila html1
Apostila html1Apostila html1
Apostila html1
Mércia Regina da Silva
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
JEANCLEVERSONPRATAS
 
Aula2 - Elementos Semânticos
Aula2 -  Elementos SemânticosAula2 -  Elementos Semânticos
Aula2 - Elementos Semânticos
Dorival Silva
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
George Mendonça
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
Centro Paula Souza
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
fernandamota929941
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing Pages
Rangel Javier
 
Desenvolvimento sites html
Desenvolvimento sites htmlDesenvolvimento sites html
Desenvolvimento sites html
Washington Oliveira
 
Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranha
fevooduck
 
Aula 3 - HTML
Aula 3 - HTMLAula 3 - HTML
Aula 3 - HTML
thiagofilipec_07
 
HTML e Hipertexto
HTML e HipertextoHTML e Hipertexto
HTML e Hipertexto
aguiarense
 
DESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEBDESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEB
Patrick Monteiro
 
Html slide
Html slideHtml slide
Html slide
Html slideHtml slide
Html slide
Html slideHtml slide
Html slide
Html slideHtml slide
Tema 1 | Introdução a PHP
Tema 1 | Introdução a PHPTema 1 | Introdução a PHP
Tema 1 | Introdução a PHP
Henry Raúl González Brito
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
Sergio Finamore
 

Semelhante a HTML e CSS (20)

Apostila html
Apostila htmlApostila html
Apostila html
 
Ambiente web
Ambiente webAmbiente web
Ambiente web
 
Apostila html1
Apostila html1Apostila html1
Apostila html1
 
AULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptxAULA 01 - Conceitos de HTML.pptx
AULA 01 - Conceitos de HTML.pptx
 
Aula2 - Elementos Semânticos
Aula2 -  Elementos SemânticosAula2 -  Elementos Semânticos
Aula2 - Elementos Semânticos
 
HTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - ConceitosHTML HardCore Parte 1 - Conceitos
HTML HardCore Parte 1 - Conceitos
 
02 html - fontes e estilos
02 html  - fontes e estilos02 html  - fontes e estilos
02 html - fontes e estilos
 
Slides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSSSlides Linguagem de Programação HTML e CSS
Slides Linguagem de Programação HTML e CSS
 
Tecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing PagesTecnologias Web com foco na criação de Landing Pages
Tecnologias Web com foco na criação de Landing Pages
 
Desenvolvimento sites html
Desenvolvimento sites htmlDesenvolvimento sites html
Desenvolvimento sites html
 
Aula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo AranhaAula1 - Curso Web-Design - ETECA Camargo Aranha
Aula1 - Curso Web-Design - ETECA Camargo Aranha
 
Aula 3 - HTML
Aula 3 - HTMLAula 3 - HTML
Aula 3 - HTML
 
HTML e Hipertexto
HTML e HipertextoHTML e Hipertexto
HTML e Hipertexto
 
DESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEBDESENVOLVIMENTO DE APLICAÇÕES WEB
DESENVOLVIMENTO DE APLICAÇÕES WEB
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
Html slide
Html slideHtml slide
Html slide
 
Tema 1 | Introdução a PHP
Tema 1 | Introdução a PHPTema 1 | Introdução a PHP
Tema 1 | Introdução a PHP
 
Xhtml 2011 - atualizado
Xhtml   2011 - atualizadoXhtml   2011 - atualizado
Xhtml 2011 - atualizado
 

Último

Caderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdf
Caderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdfCaderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdf
Caderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdf
shirleisousa9166
 
Desafio matemático - multiplicação e divisão.
Desafio matemático -  multiplicação e divisão.Desafio matemático -  multiplicação e divisão.
Desafio matemático - multiplicação e divisão.
Mary Alvarenga
 
oficia de construção de recursos para aluno DI.pdf
oficia de construção de recursos para aluno DI.pdfoficia de construção de recursos para aluno DI.pdf
oficia de construção de recursos para aluno DI.pdf
marcos oliveira
 
Trabalho Colaborativo na educação especial.pdf
Trabalho Colaborativo na educação especial.pdfTrabalho Colaborativo na educação especial.pdf
Trabalho Colaborativo na educação especial.pdf
marcos oliveira
 
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
Sandra Pratas
 
EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23
EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23
EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23
Sandra Pratas
 
Relatório de Atividades 2021/2022 CENSIPAM.pdf
Relatório de Atividades 2021/2022 CENSIPAM.pdfRelatório de Atividades 2021/2022 CENSIPAM.pdf
Relatório de Atividades 2021/2022 CENSIPAM.pdf
Falcão Brasil
 
Caderno 1 - Módulo Água JMS 2024 (1).pdf
Caderno 1 -  Módulo Água JMS 2024 (1).pdfCaderno 1 -  Módulo Água JMS 2024 (1).pdf
Caderno 1 - Módulo Água JMS 2024 (1).pdf
SupervisoEMAC
 
Caça-palavras - multiplicação
Caça-palavras  -  multiplicaçãoCaça-palavras  -  multiplicação
Caça-palavras - multiplicação
Mary Alvarenga
 
Caça-palavras e cruzadinha - Encontros consonantais.
Caça-palavras e cruzadinha -  Encontros consonantais.Caça-palavras e cruzadinha -  Encontros consonantais.
Caça-palavras e cruzadinha - Encontros consonantais.
Mary Alvarenga
 
IV Jornada Nacional Tableau - Apresentações.pptx
IV Jornada Nacional Tableau - Apresentações.pptxIV Jornada Nacional Tableau - Apresentações.pptx
IV Jornada Nacional Tableau - Apresentações.pptx
Ligia Galvão
 
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdfHistória das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
LeideLauraCenturionL
 
Licao de adultos Topico 1 CPAD edit.pptx
Licao de adultos Topico 1 CPAD edit.pptxLicao de adultos Topico 1 CPAD edit.pptx
Licao de adultos Topico 1 CPAD edit.pptx
jetroescola
 
apresentação metodologia terapia ocupacional
apresentação metodologia terapia ocupacionalapresentação metodologia terapia ocupacional
apresentação metodologia terapia ocupacional
shirleisousa9166
 
As Ideias Têm Consequências - Richard M. Weaver
As Ideias Têm Consequências - Richard M. WeaverAs Ideias Têm Consequências - Richard M. Weaver
As Ideias Têm Consequências - Richard M. Weaver
C4io99
 
escrita criativa utilizada na arteterapia
escrita criativa   utilizada na arteterapiaescrita criativa   utilizada na arteterapia
escrita criativa utilizada na arteterapia
shirleisousa9166
 
Slides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptx
Slides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptxSlides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptx
Slides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptx
LuizHenriquedeAlmeid6
 
Relatório de Atividades 2019 CENSIPAM.pdf
Relatório de Atividades 2019 CENSIPAM.pdfRelatório de Atividades 2019 CENSIPAM.pdf
Relatório de Atividades 2019 CENSIPAM.pdf
Falcão Brasil
 
Caça - palavras e cruzadinha com dígrafos
Caça - palavras  e cruzadinha   com  dígrafosCaça - palavras  e cruzadinha   com  dígrafos
Caça - palavras e cruzadinha com dígrafos
Mary Alvarenga
 

Último (20)

Caderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdf
Caderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdfCaderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdf
Caderno_de_referencias_Ocupacaohumana_IV_FlaviaCoelho_compressed.pdf
 
Desafio matemático - multiplicação e divisão.
Desafio matemático -  multiplicação e divisão.Desafio matemático -  multiplicação e divisão.
Desafio matemático - multiplicação e divisão.
 
oficia de construção de recursos para aluno DI.pdf
oficia de construção de recursos para aluno DI.pdfoficia de construção de recursos para aluno DI.pdf
oficia de construção de recursos para aluno DI.pdf
 
Trabalho Colaborativo na educação especial.pdf
Trabalho Colaborativo na educação especial.pdfTrabalho Colaborativo na educação especial.pdf
Trabalho Colaborativo na educação especial.pdf
 
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
EBOOK_HORA DO CONTO_O SONHO DO EVARISTO_RITA E CLÁUDIA_22_23
 
EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23
EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23
EBOOK_HORA DO CONTO_MARINELA NEVES & PAULA FRANCISCO_22_23
 
Relatório de Atividades 2021/2022 CENSIPAM.pdf
Relatório de Atividades 2021/2022 CENSIPAM.pdfRelatório de Atividades 2021/2022 CENSIPAM.pdf
Relatório de Atividades 2021/2022 CENSIPAM.pdf
 
Caderno 1 - Módulo Água JMS 2024 (1).pdf
Caderno 1 -  Módulo Água JMS 2024 (1).pdfCaderno 1 -  Módulo Água JMS 2024 (1).pdf
Caderno 1 - Módulo Água JMS 2024 (1).pdf
 
FOTOS_AS CIÊNCIAS EM AÇÃO .
FOTOS_AS CIÊNCIAS EM AÇÃO                .FOTOS_AS CIÊNCIAS EM AÇÃO                .
FOTOS_AS CIÊNCIAS EM AÇÃO .
 
Caça-palavras - multiplicação
Caça-palavras  -  multiplicaçãoCaça-palavras  -  multiplicação
Caça-palavras - multiplicação
 
Caça-palavras e cruzadinha - Encontros consonantais.
Caça-palavras e cruzadinha -  Encontros consonantais.Caça-palavras e cruzadinha -  Encontros consonantais.
Caça-palavras e cruzadinha - Encontros consonantais.
 
IV Jornada Nacional Tableau - Apresentações.pptx
IV Jornada Nacional Tableau - Apresentações.pptxIV Jornada Nacional Tableau - Apresentações.pptx
IV Jornada Nacional Tableau - Apresentações.pptx
 
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdfHistória das ideias pedagógicas no Brasil - Demerval Saviani.pdf
História das ideias pedagógicas no Brasil - Demerval Saviani.pdf
 
Licao de adultos Topico 1 CPAD edit.pptx
Licao de adultos Topico 1 CPAD edit.pptxLicao de adultos Topico 1 CPAD edit.pptx
Licao de adultos Topico 1 CPAD edit.pptx
 
apresentação metodologia terapia ocupacional
apresentação metodologia terapia ocupacionalapresentação metodologia terapia ocupacional
apresentação metodologia terapia ocupacional
 
As Ideias Têm Consequências - Richard M. Weaver
As Ideias Têm Consequências - Richard M. WeaverAs Ideias Têm Consequências - Richard M. Weaver
As Ideias Têm Consequências - Richard M. Weaver
 
escrita criativa utilizada na arteterapia
escrita criativa   utilizada na arteterapiaescrita criativa   utilizada na arteterapia
escrita criativa utilizada na arteterapia
 
Slides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptx
Slides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptxSlides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptx
Slides Lição 3, CPAD, Rute e Noemi, Entrelaçadas pelo Amor.pptx
 
Relatório de Atividades 2019 CENSIPAM.pdf
Relatório de Atividades 2019 CENSIPAM.pdfRelatório de Atividades 2019 CENSIPAM.pdf
Relatório de Atividades 2019 CENSIPAM.pdf
 
Caça - palavras e cruzadinha com dígrafos
Caça - palavras  e cruzadinha   com  dígrafosCaça - palavras  e cruzadinha   com  dígrafos
Caça - palavras e cruzadinha com dígrafos
 

HTML e CSS

  • 1. HTML e CSS Starting Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 2. Starting HTML Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 3. HTML O que é HTML? • Linguagem utilizada para a criação de páginas Web; • Abreviatura de Hyper Text Markup Language; • Não é uma linguagem de programação mas sim uma linguagem de marcação; • Liguagem de marcação = grupo de “tags” de marcação que descrevem as páginas Web; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 4. HTML O que são “tags” HTML? • tags HTML = tags de marcação HTML; • São palavras-chave contidas entre o sinal de menor (<) e maior (>); • Existe sempre uma de abertura (<body>) e uma de fe- cho (</body>); • Existem tags de abertura e fecho simultâneo (<br/>); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 5. HTML O que são Elementos HTML? • É tudo o que começa com uma tag de abertura (<body>) e uma tag de fecho (</body>); • Termina sempre com uma tag de fecho (</body>); • O seu conteúdo é tudo o que está entre as tags de ab- ertura e de fecho; • Existem elementos HTML sem conteúdo (<br/>); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 6. HTML O que são Elementos HTML? • O elementos sem conteúdo abrem-se e fecham-se na mesma tag (<br/>); • A maior parte dos elementos HTML podem ter atribu- tos; • Pode haver elementos HTML dentro de outros elemen- tos HTML; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 7. HTML Elementos HTML • <html> ... </html> define todo o documento HTML e o seu conteúdo são outros elementos HTML, como por exemplo: • <head> ... </head> onde está contida a metadata e o seu conteúdo são outros elementos HTML, como por exemplo: • <title> ... </title> nome que vai aparecer no separa- dor/barra do browser; • <keywords> ... </keywords> contém todas as pala- vras chaves, para quando numa pesquisa num motor de busca mostre-nos também o nosso site; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 8. HTML Elementos HTML • <link ... /> define a relação entre o documento HTML e uma fonte externa (Folha CSS); • <body> ... </body> define o todo o documento HTML e contém outros elementos HTML, como por exem- plo: • <p> ... </p> define um parágrafo num documento HTML; • <a href=”meusite.html” > ... </a> define um link para uma página HTML; • <br/> ou <br> elemento HTML vazio que define uma quebra de linha; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 9. HTML Elementos HTML • <h1> ... </h1> define um título com um tamanho de letra já predefinido; • <table> ... </table> cria uma tabela e contém outros elementos HTML que dão forma à tabela, como por ex- emplo: • <tr > ... </tr> define o número de linhas de uma tab- ela; • <td> ... </td> define uma célula de cada linha; • <img src=”eu.png”> ... </img> insere uma imagem; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 10. HTML O que são Atributos HTML? • Atribuem informação adicional a um elemento HTML; • São sempre especificados na tag de abertura (<a href=”meusite.html”>); • São sempre definidos dentro da tag de abertura como nome=”valor”, onde as aspas são obrigatórias; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 11. HTML Headings HTML • Definidos com as tags <h1> a <h6>; • Quanto maior o número (<h6>), menor o tamanho da letra apresentada; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 12. HTML Headings HTML - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho do “body”, escrever o seguinte código: <h1>O meu título “h1”</h1> <h2>O meu título ”h2”</h2> <h3>O meu título “h3”</h3> <h4>O meu título “h4”</h4> <h5>O meu título “h5”</h5> <h6>O meu título “h6”</h6> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 13. HTML Headings HTML - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 14. HTML Parágrafos HTML - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho do “body”, escrever o seguinte código: <p>O meu primeiro parágrafo</p> <p>O meu segundo parágrafo</p> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 15. HTML Parágrafos HTML - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 16. HTML tags de formatação • <b> ... </b> põe um texto, uma palavra, letra(s) a bold; • <i> ... </i> põe um texto, uma palavra, letra(s) a itálico; • <big> ... </big> põe um texto, uma palavra, letra(s) um pouco maior; •<code> ... </code> muda o tipo de letra para o que normalmente é utilizado em programação; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 17. HTML tags de formatação • <sub> ... </sub> põe palavra(s), texto, letra(s) em subscrito; • <sup> ... </sup> põe palavra(s), texto, letra(s) em sobrescrito; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 18. HTML tags de formatação - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <b>Texto em Bold</b> <i>Texto em itálico</i> <big>Texto maior</big> <code>Texto com letra de código</code> <sub>Texto subscrito</sub> <sup>texto sobrescrito</sup> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 19. HTML tags de formatação - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 20. HTML Como inserir imagens? • Definidas em HTML com a tag <img>; • Tem que conter o atributo “src” (source); • O valor do atributo “src” é o URL da imagem; • URL indica onde está a imagem (quer seja no computa- dor quer seja online); • Pode conter o atributo “alt”, que atribui um texto à im- agem quando esta não for visualizada; •Apresentada no browser no sítio onde está inserida no documento; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 21. HTML Como inserir imagens? • Pode conter os atributos “height” (altura) e “width” (lar- gura); • “height” e “width” definem a altura e a largura da ima- gem, respectivamente; • Os valores dos atributos “height” e “width” são defini- dos em pixeis; •Não tem tag de fecho; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 22. HTML Como inserir imagens? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <img src=”http://www.iasfa.pt/imagens/images/ acordo/ulp.gif” alt=”logo_ULP” height=”300px” width=”500px”> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 23. HTML Como inserir imagens? - Exemplo • Obtem-se; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 24. HTML Como criar tabelas? • Definida pela tag <table>; • São divididas em linhas (<tr>); • Cada linha é dividida em células (<td>); • Pode-se definir a espessura da borda da tabela com o atributo “border”; • Podem-se definir cabeçalhos a cada coluna da tabela com a tag <th>; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 25. HTML Como criar tabelas? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <table border=”2”> <tr> <th>Primeiro Cabeçalho</th> <th>Segundo Cabeçalho</th> </tr> <tr> <td>Primeira célula, primeira linha</td> <td>Segunda célula, primeira linha</td> </tr> <tr> <td>Primeira célula, segunda linha</td> <td>Segunda célula, segunda linha</td> </tr> </table> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 26. HTML Como criar tabelas? - Exemplo • Obtem-se: Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 27. HTML Como criar listas? • Podem-se criar listas ordenadas e não ordenadas; • <ul> tag de abertura de uma lista não ordenada; • <ol> tag de abertura de uma lista ordenada; • <li> tag de abertura de cada item da lista; • Os items das listas não ordenadas são antecedidos de uma bola preenchida a negro; • Os items das listas ordenadas são antecedidos de um número (1) e um ponto (.); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 28. HTML Como criar listas? - Exemplo • Abrir editor de HTML (Notepad, Dreamweaver); • Entre as tags de abertura e fecho de um parágrafo, escrever o seguinte código: <ul> <li>Estudar</li> <li>Não estudar</li> </ul> <ol> <li>Estudar</li> <li>Não estudar</li> </ol> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 29. HTML Como criar listas? - Exemplo • Obtem-se; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 30. Starting CSS Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 31. CSS O que é CSS? • Abreviatura de Cascading Style Sheet; • Definimos a disposição dos elementos HTML; • Permite ter um documento HTML mais “limpo”; • Permite-nos mudar a formatação de todos os nossos documentos HTML ao mesmo tempo; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 32. CSS Sintaxe CSS • Cada regra CSS é composta por duas partes: Selector e a Declaração; •O selector é aquilo que queremos formatar; • Exemplo: body { background-color:#fff; }; Selector Declaração Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 33. CSS Sintaxe CSS • Cada declaração é composta por Propriedades e re- spectivos Valores; • Exemplo: body { background-color:#fff; }; Selector Propriedade Valor Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 34. CSS Como introduzir CSS? • Folha de estilos externa; • Folha de estilos interna; • “Inline style”; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 35. CSS Folha de estilos externa • Ideal quando se quer aplicar estilos a várias páginas; • Pode-se mudar o aspecto todo de um website mudando apenas um ficheiro; • Cada página tem que ter um link para a folha de esti- los (<link>) que se insere na tag <head>; • Pode ser criada em qualquer editor de texto (notepad, Dreamweaver), guardado com a extensão “.CSS”; • Não contém tags HTML; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 36. CSS Folha de estilos externa • Exemplo: <head> <link rel=”stylesheet” type=”text/css” href=”meucss.css” /> </head> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 37. CSS Folha de estilos Interna • Deve ser utilizada quando um dado documento tem um estilo específico; • Definida com a tag <style> inserida na tag <head> do documento HTML; • Exemplo: <head> <style type=”text/css”> hr {color:#fff;} p {margin-to:200px;} body {background-color:blue);} </style> </head> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 38. CSS “Inline Style” • Perde muitas das vantagens das folhas de estilo porque mistura o conteúdo do documento com a apre- sentação do mesmo; • Necessário utilizar o atributo de estilo na tag pretend- ida; • O atributo pode conter qualquer propriedade CSS; • Exemplo: <p style=”color:#fff; margin:auto”>...</p> Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 39. CSS Selectores CSS • CSS permite-nos atribuir dois selectores: “id” e “class”; • “id” usado para especificar um estilo para um só ele- mento; • “id” definido no CSS com cardinal (#estilo); • <div id=”estilo”> código para designar um estilo a um determinado elemento HTML; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 40. CSS Selectores CSS • “class” usado para especificar um estilo para um grupo de elementos HTML; • “class” usado em mais do que um elemento HTML, ao contrário do “id”; • “class” definido no CSS com um ponto(.classe); Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 41. CSS Propriedade “background” • Utilizada para atribuir um fundo a um elemento do documento; • “background-color” - atribui uma cor ao fundo; • “background-image” - atribui uma imagem ao fundo; • “background-repeat” - define se a imagem se repete no eixo xOy; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 42. CSS Propriedade “background” • “background-attachment” - define se a imagem é fixa ou se “anda” quando se utiliza a barra de rolamento; • “background-position” - define a posição da imagem do fundo; • “background” - podem-se inserir todas as caracterís- ticas anteriores numa só declaração; Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 43. CSS Propriedade “background” • Exemplo: body { background: #ffffff url(‘img_tree.png’) no-repeat fixed right top; }; Cor Imagem Repetição Posição (color) (image) (repeat) (position) Fixação (attachment) • NOTA: A ordem tem obrigatoriamente de ser a apresentada, mas podem-se não utilizar todas as características. Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno
  • 44. CSS Propriedade “text” • Utilizada para formatar texto; • “text-color” - define a cor do texto; • “text-align” - define o alinhamento horizontal do texto; • “text-decoration” - define se há ou não alguma for- matação adicional ao texto (rasurado, linha por cima, sub- linhado, blink (bold)); • NOTA: “blink” não é aceite por alguns browsers como o Google Chrome, Internet Explorer, Safari Mónica Ferreira | 2º Ano de Comunicação audiovisual e Multimédia | Diurno