6ª Feira de Oportunidades
Desenvolvimento de páginas com HTML
Prof. Marcelo da Silveira Siedler
[email protected]
SERVIÇO NACIONAL DE APRENDIZAGEM COMERCIAL
FACULDADE DE TECNOLOGIA SENAC PELOTAS
Páginas Web
Criando Web Sites
o Necessidade de Criar páginas web que o
navegador (browser) consiga entender o que
estamos querendo representar.
o Entender–Interpretar no mundo da informática.
o Regras de criação do site são definidadas
através de uma linguagem.
o Linguagem HTML.
Linguagem HTML
o Formada por tags de marcação.
o Tags representam elementos em uma página.
o Textos
o Parágrafos
o Imagens
o Links
o Formulários
o Formatação visual (cor, alinhamento, fonte, ...)
o Tags são definidas utilizando os caracteres < e
>.
o Exemplo: <elemento>
Linguagem HTML
o Maioria das tags devem ser “fechadas”.
o Exemplo:
o <elemento></elemento>
o Criando minha primeira página Web.
o Representação do conjunto de tags básicas
para o funcionamento de uma página.
<html>
<body>
Minha primeira página Web.
</body>
</html>
Primeira.html
<html>
<body>
<h1>Minha segunda página Web.</h1>
<p>6ª Feira de Oportunidades SENAC.</p>
</body>
</html>
Segunda.html
Páginas HTML
o Formatando o texto que é exibido na página.
o Títulos
<h1> Comparando Tamanhos </h1>
<h2> Comparando Tamanhos </h2>
<h3> Comparando Tamanhos </h3>
<h4> Comparando Tamanhos </h4>
<h5> Comparando Tamanhos </h5>
<h6> Comparando Tamanhos </h6>
Páginas HTML
o Um parágrafo: <p></p>
Definindo alinhamento:
<p align=’left’> Texto à esquerda </p>
<p align=’center’> Texto centralizado </p>
<p align=’right’> Texto à direita </p>
<p align=’justify’> Texto justificado</p>
* Prática
Formatando o texto
o Negrito: Tag <b> texto</b>
<p> Texto normal, mas agora com <b> negrito </b> . </p>
o Itálico: Tag <i> texto</i>
<p> Agora em <i> itálico </i> . </p>
o Sublinhado: Tag <u> texto</u>
<p> Agora <u> sublinhado </u> . </p>
Formatando Texto
o Quebrando linhas: <br/>
Exemplo:
<html>
<body>
<h3>Título 3</h3>
Exemplo de texto na primeira linha.<br/>
Mais um exemplo de texto em segunda
linha com <b>negrito</b>.<br/>
Outra Linha<br/>
</body>
</html>
Prática
Trabalhando com atributos
o Permitir alterar/definir as funcionalidades das
tag.
o Exemplo:
o <body bgcolor=“red”>
o Dividindo em seções:
o <hr/>
Criando links entre as páginas
o Tag a
o Atributo href
o <p>Texto:<a href=’www.google.com.br’>Clique
Aqui</a></p>
o Texto 2: <a href=’pagina3.html’>Clique
Aqui</a>
Inserindo imagens
o Tag img
o Atributo src – caminho da foto
o Exemplo:
<img src=‘foto.jpg’>