Tecnologias para Internet - Aula 2

Profº Thyago Maia

Tecnologias para Internet

Aula 2

Sumário

Camada de Apresentação Introdução ao HTML

Introdução ao HTML

HTML: Hypertext Markup Language, ou Linguagem de marcação de hipertexto;

Trata-se de uma linguagem de marcação, utilizada na descrição de páginas Web; Não é uma linguagem de programação!!!! Uma linguagem de marcação é composta por uma

série de TAGs de marcação; Não é case sensitive;


Tags HTML

São palavras chave, digitadas entre < e >, como em <html>;

Normalmente são utilizadas em pares, como em <b> Texto em Negrito </b>, onde... <b> : Tag de abertura; </b>: Tag de fechamento;


Documentos HTML = Páginas Web Documentos HTML descrevem páginas Web; Documentos HTML contém tags HTML e texto;

Navegadores (Browsers) Lêem documentos HTML, apresentando-os como

páginas Web; Não apresentam as tags HTML...

Usam as tags para interpretar o conteúdo de uma página Web;


Corpo (simples) de uma página HTML:

Onde:

O texto entre <html> e </html> descreve a página Web;

O texto entre <body> e </body> é o conteúdo visível da página;

O texto entre <h1> e </h1> é apresentado como um título;

O texto entre <p> e </p> é apresentado como um parágrafo;

<html><body>

<h1>Meu primeiro título</h1><p>Meu primeiro título</p>

</body></html>


Do que eu preciso para escrever e documentos HTML? Um editor de texto (apenas!!) ...

Bloco de notas; Word Pad; Notepad++; Gedit (Linux); Entre outros;

Um navegador Web Firefox, IE, Chrome...


Como salvar um documento HTML? Todo documento HTML deverá ser salvo com a

extensão .htm ou .html;


Tags de Título São definidas através das tags <hx> e </hx>, onde

o x define o nível do título, através de um número de 1 a 6;

Exemplos:

<html><body>

<h1>Título da página</h1><h2>Subtítulo</h2><h3>Subtítulo do subtítulo</h3>

</body></html>


Tag de Parágrafo É definida através das tags <p> e </p>; Exemplos:

<html><body>

<p>Sport Club do Recife</p><p>Campeão Brasileiro de 87</p><p>Campeão da Copa do Brasil de 2008</p>

</body></html>


Tag de Link É definida através das tags <a> e </a>; Exemplos:

<html><body>

<a href=”http://www.sportrecife.com.br”>Ir para o site do Sport Club do Recife</a>

</body></html>

http://www/


Tag de Imagem É definida através das tag <img>; Exemplos:

<html><body>

<img src=”bandeira.jpg” width=”104” height=”142” />

</body></html>


Elementos HTML Um elemento HTML é o conjunto formado por uma

tag de abertura, uma tag de fechamento e seu conteúdo (o que estiver entre as tags);

<html><body>


</body></html>

Um elemento HTML

http://www/


Sintaxe dos elementos HTML Um elemento HTML começa com uma tag de

abertura e termina com uma tag de fechamento; O conteúdo de um elemento HTML é tudo aquilo

que está entre tags; Vários elementos HTML não tem conteúdo (como a

tag de imagem); Elementos sem conteúdo são fechados na própria

tag de abertura (como na tag de imagem); Vários elementos HTML podem ter atributos (como

na tag de imagem e de link);


Aninhamento de elementos HTML Alguns elementos HTML podem ser aninhados, isto

é, podemos inserir elementos HTML como conteúdo de outros elementos;

<html><body>

<p>Sport Club do Recife</p><p><img src=”fig.jpg” widht=”200” height=”10” /></p><p><b>O melhor do Nordeste</b></p>

</body></html>


Atributos HTML Atributos fornecem informações adicionais aos

elementos HTML; Elementos HTML podem ou não ter atributos; Atributos são sempre especificados nas tags de

abertura; Atributos são formados pelo seguinte conjunto:

nome=”valor” Valores de atributos sempre devem estar

delimitados por aspas duplas ou simples;


Exemplo de atributo HTML Links HTML são definidos pela tag <a>. O

endereço do link é especificado pelo atributo href;

<html><body>


</body></html>

http://www/


Linhas HTML A tag <hr/> cria uma linha horizontal em uma

página HTML, podendo ser usada para separar conteúdo;

Exemplo:

<html><body>

<p>Sport Club do Recife</p><hr/><p>Campeão de 87!!!</p>

</body></html>

Comentários HTML Comentários podem ser inseridos em um código

HTML para torná-lo mais legível e compreensível; São ignorados pelo navegador e não são

apresentados;

<html><body>

<p>Parágrafo</p>

</body></html>


Quebras de Linha HTML Use a tag <br/> caso deseje pular uma linha em um

documento HTML; Exemplo:

<html><body>

Parágrafo<br/>Parágrafo

</body></html>

Tecnologias para Internet - Aula 2

Technology

Transcript of Tecnologias para Internet - Aula 2