SlideShare ist ein Scribd-Unternehmen logo
1 von 4
Downloaden Sie, um offline zu lesen
Tuturial de iniciação ao html

1-Irá proceder a criação da sua primeira página web.Usando o seu editor de texto crie
um novo arquivo e escreva nele o texto seguinte:

<html>
<head>
<title>Título da página</title>
</head>
<body>
Esta é a minha primeira página da Web.
<b>Este texto está em negrito</b>
</body>
</html>




Salve o arquivo com o nome "pagina.html". Abra o documento "pagina.html" no local
em que você salvou o arquivo e observe o resultado.



2-Dentro da etiqueta body irá acrescentar uma tabela por recurso ao codigo:
(verificar que esta tabela não apresenta border)
<table border="0">
<tr>
<td>
Esta é a minha primeira tabela.
</td>
</tr>
</table>

Salvar e ver o resultado.



3-acrescentar uma segunda tabela verificando que esta já possui border:
(Acrescentar este código ao código já existente)

<table border="2">
<tr>
<td>
Esta é a minha segunda tabela.
</td>
</tr>
</table>

Salvar e ver o resultado.




Prof. Tiago Martins
4-Acrescentar paragrafos recorrendo para isso ao código seguinte:
<p>Isto é um parágrafo.</p>
<p>Isto é outro parágrafo.</p>
<p>
Os parágrafos definem-se com o elemento &lt;p&gt;
</p>

Salvar e ver o resultado.



5-acrescentar paragrafos mas que apresentem quebra de linha. Para isso reccorrer ao
seguinte código:
<p>
Isto<br> é um pará-<br>grafo
com quebras de linha
</p>

Salvar e ver o resultado.



6-acrescentar vários parágrafos seguidos recorrendo ao código seguinte:
<p>
No código fonte este parágrafo tem três
linhas, mas o browser ignora isso e pode
apresentar outro número.
</p>
<p>No código fonte o texto deste parágrafo tem
vários espaços seguidos, mas o
browser trata-os como se eles formassem
um único espaço.
</p>
<p>O número de linhas de um parágrafo depende
do tamanho da janela do browser. Ao alterar
a largura desta provocará alterações no
número de linhas
</p>

Salvar e ver o resultado.



7- colocar cabeçalhos. Vamos experimentar os vários tipos de cabeçalhos.acrescente o
seguinte código:
<h1>Isto   é   um   cabeçalho   de   nível   1</h1>
<h2>Isto   é   um   cabeçalho   de   nível   2</h2>
<h3>Isto   é   um   cabeçalho   de   nível   3</h3>
<h4>Isto   é   um   cabeçalho   de   nível   4</h4>
<h5>Isto   é   um   cabeçalho   de   nível   5</h5>
<h6>Isto   é   um   cabeçalho   de   nível   6</h6>

Salvar e ver o resultado.




Prof. Tiago Martins
8-vamos agora centrar um cabeçalho:

<h1 align="center"
>este é um cabeçalho alinhado ao centro</h1>

Salvar e ver o resultado.

9- o elemento <hr> permite desenhar linhas em html para verificar isso
acrescente ao seu código:

<p>O elemento hr desenha uma linha horizontal:</p>
<hr>
<p>Isto é um parágrafo</p>
<p>Isto é um parágrafo</p>


Salvar e ver o resultado.



10-Colocar cometarios.é possivel colocar comentários entre o codigo que não são
exibidos quando é mostrada a página. Para isso experimentar o código:
(a segunda linha serve apenas para se verificar que de facto o comentário ficou
omitido entre as linhas anteriores e esta)
<!-- Este comentário não será visível -->
<p>Isto é um parágrafo normal</p>

Salvar e ver o resultado.



11-Vamos agora aplicar estilos. De seguida tem a palicação de alguns elementos que
formatam o texto experimente acrescentar o seguinte codigo:

<b>Isto é texto em negrito</b> <br>
<strong>Isto é texto forte</strong> <br>
<big>Isto é texto maior</big> <br>
<em>Isto é texto enfatizado</em> <br>
<i>Isto é texto itálico</i> <br>
<small>Isto é texto mais pequeno</small> <br>
Este texto contém uma parte alinhada mais <sub>abaixo</sub>
<br>
Este texto contém uma parte alinhada mais <sup>acima</sup>

Salvar e ver o resultado.




Prof. Tiago Martins
12-vamos experimentar alterar a cor do fundo para isso vamos alterar as propriedades
do elemento <body>. Para isso deverão acrescentar bgcolor="yellow" a tag <body>
para que fique com o seguinte aspecto:
<body bgcolor="yellow">

Salvar e ver o resultado.



13-Acrescentar ancoras (links).
Para acrescentar ancoras ou links como lhes costumamos chamar deveremos usar o
seguinte código:

<a href="url">Texto a mostrar</a>

Exemplo: <a href="http://www.ojogo.pt">site do jogo</a>

Acrescentar três links a seu gosto.




Prof. Tiago Martins

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (15)

5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
5 - Introdução ao Desenvolvimento Web - Formulários (pt 2)
 
0151
01510151
0151
 
Ex2 html
Ex2 htmlEx2 html
Ex2 html
 
Ajustando larguras do template do blogger
Ajustando larguras do template do bloggerAjustando larguras do template do blogger
Ajustando larguras do template do blogger
 
Ex1 html
Ex1 htmlEx1 html
Ex1 html
 
Aula01 webdesign
Aula01 webdesignAula01 webdesign
Aula01 webdesign
 
Peticionamento eletronico | Manual do usuário
Peticionamento eletronico | Manual do usuárioPeticionamento eletronico | Manual do usuário
Peticionamento eletronico | Manual do usuário
 
HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2HTML - HyperText Markup Language - 2
HTML - HyperText Markup Language - 2
 
2 html,xhtml e css
2   html,xhtml e css2   html,xhtml e css
2 html,xhtml e css
 
Css tutorial
Css tutorialCss tutorial
Css tutorial
 
HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3HTML - HyperText Markup Language - 3
HTML - HyperText Markup Language - 3
 
Como criar banner rotativo
Como criar banner rotativoComo criar banner rotativo
Como criar banner rotativo
 
Curso html
Curso htmlCurso html
Curso html
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Básico PHP: Introdução HTML
Básico PHP: Introdução HTMLBásico PHP: Introdução HTML
Básico PHP: Introdução HTML
 

Ähnlich wie Tuturial Html (20)

Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Apostila html,xhtml e css
Apostila html,xhtml e cssApostila html,xhtml e css
Apostila html,xhtml e css
 
Web design
Web designWeb design
Web design
 
Curso HTML e CSS
Curso HTML e CSSCurso HTML e CSS
Curso HTML e CSS
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
 
Crud
CrudCrud
Crud
 
Aula 1 linguagem html (1)
Aula 1   linguagem html (1)Aula 1   linguagem html (1)
Aula 1 linguagem html (1)
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
Apresentação1.pptx
Apresentação1.pptxApresentação1.pptx
Apresentação1.pptx
 
Html básico
Html básicoHtml básico
Html básico
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Ficha html e css
Ficha   html e cssFicha   html e css
Ficha html e css
 
HTML5 & CSS3
HTML5 & CSS3HTML5 & CSS3
HTML5 & CSS3
 
HTML - Introducao
HTML - Introducao HTML - Introducao
HTML - Introducao
 
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estruturaAula 2 – Introdução a HTML - conceitos básicos e estrutura
Aula 2 – Introdução a HTML - conceitos básicos e estrutura
 
Curso html
Curso htmlCurso html
Curso html
 
Html
HtmlHtml
Html
 

Mehr von tiagosouselo

Regimento das be aves
Regimento das be avesRegimento das be aves
Regimento das be avestiagosouselo
 
Plano actividades bes 09
Plano actividades bes 09Plano actividades bes 09
Plano actividades bes 09tiagosouselo
 
Ficha 12 Segundo Periodo
Ficha 12 Segundo PeriodoFicha 12 Segundo Periodo
Ficha 12 Segundo Periodotiagosouselo
 
Ficha 11 Segundo Periodo
Ficha 11 Segundo PeriodoFicha 11 Segundo Periodo
Ficha 11 Segundo Periodotiagosouselo
 
Ficha 10 Segundo Periodo
Ficha 10 Segundo PeriodoFicha 10 Segundo Periodo
Ficha 10 Segundo Periodotiagosouselo
 
Ficha 9 Segundo Periodo
Ficha 9 Segundo PeriodoFicha 9 Segundo Periodo
Ficha 9 Segundo Periodotiagosouselo
 
Ficha 8 Segundo Periodo
Ficha 8 Segundo PeriodoFicha 8 Segundo Periodo
Ficha 8 Segundo Periodotiagosouselo
 
Ficha 7 Segundo Periodo
Ficha 7 Segundo PeriodoFicha 7 Segundo Periodo
Ficha 7 Segundo Periodotiagosouselo
 
Ficha 6 Segundo Periodo
Ficha 6 Segundo PeriodoFicha 6 Segundo Periodo
Ficha 6 Segundo Periodotiagosouselo
 
Ficha 5 Segundo Periodo
Ficha 5 Segundo PeriodoFicha 5 Segundo Periodo
Ficha 5 Segundo Periodotiagosouselo
 
Ficha 4 Segundo Periodo
Ficha 4 Segundo PeriodoFicha 4 Segundo Periodo
Ficha 4 Segundo Periodotiagosouselo
 
Ficha 3 Segundo Periodo
Ficha 3 Segundo PeriodoFicha 3 Segundo Periodo
Ficha 3 Segundo Periodotiagosouselo
 
Ficha 2 Segundo Periodo
Ficha 2 Segundo PeriodoFicha 2 Segundo Periodo
Ficha 2 Segundo Periodotiagosouselo
 
ficha trabalho word
ficha trabalho wordficha trabalho word
ficha trabalho wordtiagosouselo
 
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.01191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0tiagosouselo
 

Mehr von tiagosouselo (18)

Regimento das be aves
Regimento das be avesRegimento das be aves
Regimento das be aves
 
Plano actividades bes 09
Plano actividades bes 09Plano actividades bes 09
Plano actividades bes 09
 
Plano acção
Plano acçãoPlano acção
Plano acção
 
Ficha 12 Segundo Periodo
Ficha 12 Segundo PeriodoFicha 12 Segundo Periodo
Ficha 12 Segundo Periodo
 
Ficha 11 Segundo Periodo
Ficha 11 Segundo PeriodoFicha 11 Segundo Periodo
Ficha 11 Segundo Periodo
 
Ficha 10 Segundo Periodo
Ficha 10 Segundo PeriodoFicha 10 Segundo Periodo
Ficha 10 Segundo Periodo
 
Ficha 9 Segundo Periodo
Ficha 9 Segundo PeriodoFicha 9 Segundo Periodo
Ficha 9 Segundo Periodo
 
Ficha 8 Segundo Periodo
Ficha 8 Segundo PeriodoFicha 8 Segundo Periodo
Ficha 8 Segundo Periodo
 
Ficha 7 Segundo Periodo
Ficha 7 Segundo PeriodoFicha 7 Segundo Periodo
Ficha 7 Segundo Periodo
 
Ficha 6 Segundo Periodo
Ficha 6 Segundo PeriodoFicha 6 Segundo Periodo
Ficha 6 Segundo Periodo
 
Ficha 5 Segundo Periodo
Ficha 5 Segundo PeriodoFicha 5 Segundo Periodo
Ficha 5 Segundo Periodo
 
Ficha 4 Segundo Periodo
Ficha 4 Segundo PeriodoFicha 4 Segundo Periodo
Ficha 4 Segundo Periodo
 
Ficha 3 Segundo Periodo
Ficha 3 Segundo PeriodoFicha 3 Segundo Periodo
Ficha 3 Segundo Periodo
 
Ficha 2 Segundo Periodo
Ficha 2 Segundo PeriodoFicha 2 Segundo Periodo
Ficha 2 Segundo Periodo
 
ficha trabalho word
ficha trabalho wordficha trabalho word
ficha trabalho word
 
Exerciciohtml2
Exerciciohtml2Exerciciohtml2
Exerciciohtml2
 
Exerciciohtml2
Exerciciohtml2Exerciciohtml2
Exerciciohtml2
 
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.01191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
1191535521 Curso De Html 41.01 E Introducao Ao Xhtml 1.0
 

Tuturial Html

  • 1. Tuturial de iniciação ao html 1-Irá proceder a criação da sua primeira página web.Usando o seu editor de texto crie um novo arquivo e escreva nele o texto seguinte: <html> <head> <title>Título da página</title> </head> <body> Esta é a minha primeira página da Web. <b>Este texto está em negrito</b> </body> </html> Salve o arquivo com o nome "pagina.html". Abra o documento "pagina.html" no local em que você salvou o arquivo e observe o resultado. 2-Dentro da etiqueta body irá acrescentar uma tabela por recurso ao codigo: (verificar que esta tabela não apresenta border) <table border="0"> <tr> <td> Esta é a minha primeira tabela. </td> </tr> </table> Salvar e ver o resultado. 3-acrescentar uma segunda tabela verificando que esta já possui border: (Acrescentar este código ao código já existente) <table border="2"> <tr> <td> Esta é a minha segunda tabela. </td> </tr> </table> Salvar e ver o resultado. Prof. Tiago Martins
  • 2. 4-Acrescentar paragrafos recorrendo para isso ao código seguinte: <p>Isto é um parágrafo.</p> <p>Isto é outro parágrafo.</p> <p> Os parágrafos definem-se com o elemento &lt;p&gt; </p> Salvar e ver o resultado. 5-acrescentar paragrafos mas que apresentem quebra de linha. Para isso reccorrer ao seguinte código: <p> Isto<br> é um pará-<br>grafo com quebras de linha </p> Salvar e ver o resultado. 6-acrescentar vários parágrafos seguidos recorrendo ao código seguinte: <p> No código fonte este parágrafo tem três linhas, mas o browser ignora isso e pode apresentar outro número. </p> <p>No código fonte o texto deste parágrafo tem vários espaços seguidos, mas o browser trata-os como se eles formassem um único espaço. </p> <p>O número de linhas de um parágrafo depende do tamanho da janela do browser. Ao alterar a largura desta provocará alterações no número de linhas </p> Salvar e ver o resultado. 7- colocar cabeçalhos. Vamos experimentar os vários tipos de cabeçalhos.acrescente o seguinte código: <h1>Isto é um cabeçalho de nível 1</h1> <h2>Isto é um cabeçalho de nível 2</h2> <h3>Isto é um cabeçalho de nível 3</h3> <h4>Isto é um cabeçalho de nível 4</h4> <h5>Isto é um cabeçalho de nível 5</h5> <h6>Isto é um cabeçalho de nível 6</h6> Salvar e ver o resultado. Prof. Tiago Martins
  • 3. 8-vamos agora centrar um cabeçalho: <h1 align="center" >este é um cabeçalho alinhado ao centro</h1> Salvar e ver o resultado. 9- o elemento <hr> permite desenhar linhas em html para verificar isso acrescente ao seu código: <p>O elemento hr desenha uma linha horizontal:</p> <hr> <p>Isto é um parágrafo</p> <p>Isto é um parágrafo</p> Salvar e ver o resultado. 10-Colocar cometarios.é possivel colocar comentários entre o codigo que não são exibidos quando é mostrada a página. Para isso experimentar o código: (a segunda linha serve apenas para se verificar que de facto o comentário ficou omitido entre as linhas anteriores e esta) <!-- Este comentário não será visível --> <p>Isto é um parágrafo normal</p> Salvar e ver o resultado. 11-Vamos agora aplicar estilos. De seguida tem a palicação de alguns elementos que formatam o texto experimente acrescentar o seguinte codigo: <b>Isto é texto em negrito</b> <br> <strong>Isto é texto forte</strong> <br> <big>Isto é texto maior</big> <br> <em>Isto é texto enfatizado</em> <br> <i>Isto é texto itálico</i> <br> <small>Isto é texto mais pequeno</small> <br> Este texto contém uma parte alinhada mais <sub>abaixo</sub> <br> Este texto contém uma parte alinhada mais <sup>acima</sup> Salvar e ver o resultado. Prof. Tiago Martins
  • 4. 12-vamos experimentar alterar a cor do fundo para isso vamos alterar as propriedades do elemento <body>. Para isso deverão acrescentar bgcolor="yellow" a tag <body> para que fique com o seguinte aspecto: <body bgcolor="yellow"> Salvar e ver o resultado. 13-Acrescentar ancoras (links). Para acrescentar ancoras ou links como lhes costumamos chamar deveremos usar o seguinte código: <a href="url">Texto a mostrar</a> Exemplo: <a href="http://www.ojogo.pt">site do jogo</a> Acrescentar três links a seu gosto. Prof. Tiago Martins