html básico 1

Disciplina: PROGRAMAÇÃO PARA INTERNET – Prof. Luciano [email protected] 1

HTML BÁSICO

Professor Luciano


O que é HTML?

HTML é a "língua mãe" do seu navegador.

HTML é a abreviatura de "HyperText Mark-up Language"


O que são Tags HTML?

Tags são rótulos usados para informar ao navegador como deve ser apresentado o website.

Todas as tags têm o mesmo formato: começam com um sinal de menor "<" e acabam com um sinal de maior ">".

Genericamente falando, existem dois tipos de tags - tags de abertura: <comando> e tags de fechamento: </comando>. A diferença entre elas é que na tag de fechamento existe um barra "/".


Estrutura básica de uma página web.

<html> <head> </head> <body> </body> </html>


Título da página do site.

Para dar um título ao documento, título este que apareça no topo da barra do navegador você deverá usar a seção"head". A tag para acrescentar um título é <title>:

<title>Minha primeira página web</title>


Tag de parágrafo

A letra p na tag <p> é a abreviatura para "paragraph" (parágrafo) que é exatamente o que o texto é - um texto parágrafo.

<p>Esta é a minha primeira página web.</p>


Tags de cabeçalhos

<h1>Cabeçalho</h1>

<h2>Subtítulo</h2>

<h3>Sub-subtítulo1</h3>





Tags de negrito e itálico

<b>Torna o texto negrito.</b>

<i>Torna o texto itálico.</i>


Tag SMALL

Para deixar o texto com letras menores, utilize a tag small, desta forma:

<small>Este texto deve ser com letras em tamanho small.</small>


Posso usar várias tags simultaneamente?

Sim você pode usar quantas tags queira desde de que as aninhe convenientemente. Veja como fazer isto no exemplo abaixo:

Para escrever um texto em negrito e itálico faça como mostrado a seguir: <b><i>Texto em negrito e itálico.</i></b>

Observe que no primeiro exemplo a primeira tag de abertura <b> corresponde a última tag de fechamento </b>, e o aninhamento está certo. Isto evita confusão para quem escreve o código e para o navegador que lê o código.


Tags que são abertas e fechadas em única tag

Estas tags são comandos isolados, ou seja, não contém nenhum texto dentro delas para poder funcionar. Um exemplo é a tag <br /> que serve para criar uma quebra de linha:

Exemplo: Um texto<br /> e mais texto em nova linha


Tag HR

Esta tag <hr /> que serve para definir uma linha horizontal ("hr" vem "horizontal rule" - régua horizontal ):

Exemplo:

<hr />

Tag para fazer “comentários” no código

Caso queira fazer comentários ou apenas anular parte do código sem apagá-lo, usa-se as seguintes tags:


Lista não numerada

A Tag <ul>, com a tag auxiliar <li>, são usadas para criar uma lista de itens não numerada.

Veja:

<ul>

<li>Um item de lista</li>

<li>Outro item de lista</li>

</ul>


Lista numerada ou ordenada

É semelhante a anterior não numerada, exceto porque utiliza a marcação <ol> ao invés de <ul>

Veja:

<ol>

<li>Um item de lista</li>

<li>Outro item de lista</li>

</ol>


Atributos

Em algumas tags você pode ser mais específico, acrescentando na tag, informações adicionais de comando. Isto é feito através dos atributos.

Exemplo:

<h2 style="background-color:#ff0000;">Eu adoro HTML</h2>


Como é isto?

Existem vários atributos. O primeiro que você aprenderá é o atributo style. Com o atributo style você pode adicionar estilização e layout ao seu website. Por exemplo, uma cor de fundo e cor da letra:

Exemplo: <html> <head> </head> <body style="background-color:black; color:white;"> </body> </html>


Como funciona as cores no código?

Cada cor é representada por um número hexadecimal. A seguir alguns exemplos:

Branco: #FFFFFF Preto: #000000 (zeros) Vermelho: #FF0000 Azul: #0000FF Verde: #00FF00 Amarelo: #FFFF00 Um código hexadecimal para cores é formado por um sinal # seguido

de seis dígitos e/ou letras. Para algumas cores, você pode usar o nome das cores em inglês

(white, black, red, blue, green e yellow - branco, preto, vermelho, azul, verde, amarelo).

Exemplo: <body style="background-color: red;">


Atributo style em outras tags

Posso também aplicar o atributo style em outras tags como parágrafo e cabeçalhos. Veja:

<h1 style="background-color:white; color:blue;">CABEÇALHO 1</h1>

<p style="color:blue;">primeiro site html</p>


Sub-comandos da tag BODY

Os atributos BGCOLOR e TEXT também são usados na tag <body> para alterar a cor do fundo e a cor da letra, respectivamente. Veja:

Exemplo:

<body bgcolor=black text=blue>


Exercícios para fixação

Criar algumas páginas que compõem o site usando as seguintes formatações.

Utilizar as tags aprendidas nesta aula, tags de cabeçalhos, parágrafos, negrito, itálico, etc.


Empresa.html

Titulo: Luciano Enxovais Conteúdo: A Luciano Enxovais nasceu em 1999 em Ibitinga, capital

nacional do bordado, mas nossa experiência em produzir bordado de alta qualidade existe a mais de 20 anos.

Durante todo esse tempo aprendemos que um produto de qualidade é aquele feito sob medida para você. Por isso cada peça produzida na Luciano Enxovais é minuciosamente preparada para tornar o seu lar ainda mais belo.

A Luciano Enxovais se preocupa com a qualidade e delicadeza na produção de cada peça do começo ao fim.

Este é o compromisso da Luciano Enxovais. Deixando sua casa ainda mais bela, do jeito que você gosta.


Departamentos.html

Titulo: departamentos da empresa Criar uma lista usando as tags específicas da

seguinte forma:

Comercial André Junior

Financeiro 1. Adriana 2. Juliana

html básico 1

Education