Anda di halaman 1dari 5

1. INTRODUCAO 2.

PRIMEIROS ELEMENTOS HTML: PARAGRAFOS, CABEQALHOS E LISTAS

0 sistema com o qual esta construfdo a web se chama hipertexto e e u m emaranhado A finalidade da ( X ) HTML, desde sua invengao, e a de ser uma linguagem de marcagao e
de paginas conectadas com links. A web nao so se limita a apresentar textos e links, tambem estruturagao de hipertextos. Um documento e visto como um conjunto de eventos
pode nos oferecer imagens, videos, audio e todo tipo de apresentagdes, chegando a ser o concorrentes dependentes de tempo ( audio, video, etc.), conectados por webs ou hiperlinks. 0
servigo mais rico em meios da Internet. Por esta razao, para nos referir ao sistema que HTML fornece a base para a construgao de sistemas hipertexto padronizados, consistindo de
implementa o web ( hipertexto ), foi acunhado um novo termo que e hipermidia, fazendo documentos que aplicam os padroes de maneira particular. Para escrever ( X ) HTML existem
referenda a que o web permite conteudos multimidia. elementos que sao representados por tags ou etiquetas.
A construgao de paginas web baseiam-se nas linguagem XHTML + CSS + JAVASCRIPT, Tags sao pares de sinais destinados a englobar conteudos e tern finalidade informar ao
que sao linguagens utilizadas para estruturar e formatar o conteudo de um website. Quando navegador sobre qual o tipo de conteudo esta nela contido.
vemos uma pagina web em nosso navegador, ou cliente web, ela parece ser uma so entidade,
mas nao e assim. Uma pagina WEB e composta por uma infinidade de diferentes arquivos, Observe a marcagao a seguir:
como sao as imagens, os possiveis videos e o mais importante: o codigo fonte. < tag inicial > Nonon OnoNonono < /tag final >

0 codigo das paginas esta escrito em uma linguagem chamada HTML, que indica
basicamente onde colocar cada texto, cada imagem ou cada video e a forma que terao ao
serem colocados na pagina. A sintaxe geral da HTML segue o modelo mostrado acima, ou seja, uma marcagao
indicando o inicio e outra mostrando o fim de um conteudo. As marcas inicial e final sao
Cascading Style Sheets ( ou simplesmente CSS) e uma linguagem de estilo utilizada para chamadas de tags, que, alem de delimitar conteudos, informam a natureza desses conteudos.
definir a apresentagao de documentos escritos em uma linguagem de marcagao, como HTML Um par de tags constitui um elemento.
ou XML. Seu principal beneficio e prover a separagao entre o formato e o conteudo de um
documento.Ao inves de colocar a formatagao dentro do documento, o desenvolvedor cria um Observe a marcagao ( X ) HTML para um paragrafo:
link ( ligagao) para uma pagina que contem os estilos, procedendo de forma identica para todas < p > Texto de um paragrafo < / p >
as paginas de um portal. Quando quiser alterar a aparencia do portal basta portanto modificar
apenas um arquivo. Cabem a CSS todas as fungoes de apresentagao de um documento e ao
HTML todas as fungoes de marcagao e estruturagao de conteudos. Uma pagina web e Escrevem-se as tags de abertura e de fechamento entre os sinais: "<" e ">" e usa -se
composta entao de CSS + HTML. uma barra invertida "\" logo apos o sinal "<" para indicar a tag de fechamento.

JavaScript e uma linguagem de programagao criada principalmente para as fungoes de Existem alguns elementos que sao representados por uma tag. Sao os elementos
validagao de formularios no lado cliente ( programa navegador ) e interagao com a pagina. vazios, assim chamados por nao englobarem conteudos. Tais elementos sao empregados na
marcagao para acrescentar informagao ao documento. Ha um elemento ( X )HTML destinado a
Assim, foi feita como uma linguagem de script. Javascript tern sintaxe semelhante a do
causar uma quebra de linha em um texto, para forgar um quebra de linha existe o elemento
Java, mas e totalmente diferente no conceito e no uso. Podemos fazer com JavaScript as
seguintes operagoes: "br". Para efeito de padronizagao o elemento "br" e representado com uma barra antes do
sinal de fechamento da tag e o espago em branco antes da mesma.
Adicionar mensagens que rolam na tela ou alterar as mensagens na linha de
Exemplo tag "br":
status do navegador.
Validar os conteudos de um formulario e fazer calculos. < p > Texto na primeira linha < br / > Texto na segunda linha < / p >
Exibir mensagens para o usuario, tanto como parte de um pagina da Web
como em caixas de alertas.
Fazer animagoes de imagens ou criar imagens que mudam quando voce move Atributos sao informagoes adicionais sobre um elemento HTML. Os atributos sao
o mouse sobre elas. definidos dentro da tag de abertura do elemento. No exemplo a seguir, o atributo style e
Detectar o navegador em utilizagao e exibir conteudo diferente para utilizado para um elemento paragrafo.
navegadores diferentes.
Detectar plug-ins instalados e notificar o usuario se um plug-ins foi exigido .
Exemplo:
Etc. < p style ="color:red"> Paragrafo na cor vermelha < /p >
A sintaxe para atributos consiste no nome do atributo seguido por um sinal = ( igual) e </html>
o valor do atributo escrito entre aspas. Outro exemplo:

<a href="notas.html"> Notas da IV Unid.</a> 0 elemento <body> identifica o corpo da pagina. Todo o conteudo da pagina deve
estar dentro da tag <body>:

A marcapao acima diz ao navegador que o texto e um hiperlink que remete o usuario
ao documento que contem as notas da IV Unidade. Estudaremos neste capitulo os seguintes <html>
elementos: <head>
<title>Estee o titulo. Veja mais no proximo
Tags para estrutura geral da pagina : slide.</title>
<html>, <head > e <body> </head>
<body>
Tags para titulos, cabegalhos e paragrafos ... A sua pagina...
</body>
<title>, <hl> a <h6> e <p>
</html>
Tags para comentarios

<!- ... -> 0 elemento <title > indica o titulo da pagina e deve ser especificado entre os
elementos <head> ... </head>. 0 titulo aparece na barra de titulos do navegador e e utilizado
Tags para lista
em sistemas de buscas e como favoritos do navegador.
<ol>, <ul>, <li>, <dt> e <dd>

2.2. Tags para cabegalho e paragrafo: <p>, <hl> a <h6>


2.1. Tags para estrutura geral de uma pagina: <html>, <head> e <body>

As tags para estrutura geral de uma pagina HTML sao: <html>, <head> e < body >. A
Os cabegalhos (<hl<, h2>, <h3>, <h4>, <h5>, < h6 >) servem para dividir segoes de
TAG <html> engloba toda a marcagao HTML do documento, que e chamado de elemento raiz
texto. Exemplo:
do documento. Os demais codigos HTML estao localizados entre as suas tags de abertura e
fechamento . <hl >Faturamento da Industria Paulista cai 13,4 % em um ano </hl>

Exemplo:
Ao contrario dos titulos, os cabegalhos podem ter qualquer extensao e deverao ser
<html>
especificados no corpo do documento <body> </body>.
... A sua pagina
</html>

Existem seis niveis de cabegalho, veja exemplo :


0 elemento <head> Especifica que as linhas dentro dos pontos de inicio e termino da
tag sao destinadas a agrupar outros elementos contendo informagoes sobre o documento,
<body>
<hl >Este e um cabegalho de nivel l</hl>
como titulo do documento, folha de estilo ( css), links entre outras informagoes sobre o
<h2>Este e um cabegalho de nivel 2</h2>
conteudo do documento .
<h3>Este e um cabegalho de nivel 3</h3>
Exemplo: <h4>Este e um cabegalho de nivel 4 </h4>
<h 5>Este e um cabegalho de nivel 5</h5>
<html> <h6>Este e um cabegalho de nivel 6</h6>
<head> </body>
<title>Este e o titulo. Veja mais nos proximos
slides</title>
</head>
2.3. Tags para listas: <ul>, <ol > a <li>

0 codigo HTML de cabegalhos mostrado acima sera apresentado assim no navegador: Existe tres tipos de listas:

Listas numeradas, ou classificadas, geralmente marcadas com numeros;


Listas com marcadores, ou listas nao classificadas;

Este é um cabeçalho de nível 1 Listas de glossario, nas quais cada item na lista tern um termo e uma definigao para
ele, e que e organizada de forma que o termo esteja de alguma forma selecionado
Este é um cabeçalho de nível 2 ou destacado.

As listas numeradas sao listas nas quais cada item e numerado sequencialmente. Para
Este é um cabeçalho de nível 3 a lista numeradas utiliza -se a tag <ol>...</ ol>. Para os itens lista utiliza -se a tag <li>...</li> .
Este é um cabeçalho de nível 4 Exempio:

Este é um cabeçalho de nível 5


Este é um cabeçalho de nível 6 <body>
<p> Instalando o seu novo sistema operacional. </p>
OBS: Quanto menor o numero do cabegalho, maior sera o tamanho da fonte <ol>
-
<li> Insira o CD ROM no seu drive de CD ROM. </li> -
<li> Selecione EXECUTAR. </ li>
Para separar blocos de texto em paragrafos, usamos o elemento paragrafo: <p>.
<li> Digite a letra para o drive do seu CD ROM. </li>
< li> Siga as instrugoes do programs de instalagao. </li >
-
Exempio: <li> Reinicie o seu computador depois de instalar todos os
<body> arquivos.</li>
<p> Os paragrafos delimitados por etiquetas "p" podem ser <li> Cruze os dedos </li>
facilmente justificados a esquerda , ao centro ou a direita, </ol>
especificando tal justificagao no interior da etiqueta por meio </body>
de um atributo align. Um atributo nao e mais do que um parametro
incluido no interior da etiqueta que ajuda a definir o
funcionamento da etiqueta de uma forma mais pessoal.
</p> 0 codigo HTML da lista acima sera apresentado assim no navegador:
<P>
Os atributos tern seus valores indicados entre aspas (").0
atributo align toma determinados valores que sao escritos entre
aspas. Em algumas ocasioes necessitamos especificar alguns
Instalando o seu novo sistema operacional
atributos para o funcionamento correto da etiqueta. Em outros
1. Insira o CD-ROM no seu drive de CD-ROM.
casos, o proprio navegador toma um valor definido por padrao.
Para o caso de align , o valor padrao e left. 2. Selecione EXECUTAR.
</p>
</body> 3. Digite a letra para o drive do seu CD-ROM.
4. Siga as instruções do programa de instalação.
5. Reinicie o seu computador depois de instalar todos os
arquivos.
6. Cruze os dedos Amaldiçoar os barulhos de construção por trazerem o mau
0 atributo start, aplicado a tag <ol> indica o valor inicial da lista que e sera sempre um
humor.
valor numerico. Uma lista de glossario possue duas partes.

Exemplo: Um termo;
<ol start="10"> A definigao do termo.

-
<li> Insira o CD ROM no seu drive de CD ROM. </li> -
<li> Selecione EXECUTAR. </li>
<li> Digite a letra para o drive do seu CD ROM. </li>
<li> Siga as instrugoes do programs de instalagao. </li>
- Para o termo usa -se a tag <dt> e para a definigao do termo usa -se a tag <dd>. Toda
lista de glossario e indicada entre as tags <dl>...</dl>. Exemplo:
<li> Reinicie o seu computador depois de instalar todos os
arquivos.</li>
<li> Cruze os dedos </li> <body>
</ol> <dl>
<dt> Manjericao </dt>
<dd >
As listas nao classificadas, sao listas nas quais cada item e representado por
Anual. Pode crescer ate quatro pes de altura, o
marcadores ( bullets). Para a lista nao -classificadas utiliza -se a tag <ul>...</ ul> e para os itens
perfume de suas pequenas flores brancas e paradisiaco.
lista utiliza -se a tag <li>...</li>. Exemplo:
</dd>
<body> <dt> Oregano </dt>
<p> Coisas que eu gostaria de fazer de manha. </p> <dd>
<ul> Perene. Espalha raizes no subsolo e e dificil de ser
<li> Tomar uma xicara de cafe. </ li> evitado quando se estabelece.
<li> Ver o sol nascer. </li> </dd>
<li> Ouvir o canto dos passaros. </li> </dl>
<li> Ouvir o vento assobiando nas arvores. </li> </body>
<li> Amaldigoar os barulhos de construgao por trazerem o
mau humor.</li>
</ul>
</body> 0 codigo HTML apresentado acima, sera apresentado assim no navegador:

Manjericão
0 codigo HTML apresentado acima, sera apresentado assim no navegador:
Anual. Pode crescer até quatro pés de altura, o perfume de
suas pequenas flores brancas é paradisíaco.
Coisas que eu gostaria de fazer de manhã.
Orégano
Tomar uma xícara de café.
Perene. Espalha raízes no subsolo e é difícil de ser evitado
Ver o sol nascer. quando se estabelece.
Ouvir o canto dos pássaros.
Ouvir o vento assobiando nas árvores.
Um resumo dos elementos basicos pode ser representado pelas imagens a seguir:

TAG Descricao
< html> Indica o initio de um documento HTML.
< head> Indica um prologo de um documento HTML.
<body> Indica o corpo de um documento HTML.
<title> Indica o titulo de um documento HTML.
< hl> a <h6> Cabegalhos do nivel 1 ao nivel 6 .
<P> Indica um paragrafo
Indica um comentario

[Elementos Basicos
I T I I I I I
html head body title hi a h 6 p <! -- -- >

TAG Descrigao
<ol> Indica uma lista ordenada .
<ul> Indica uma lista nao ordenada .
<li> Indica um item da lista .
<dl> Indica uma lista de definigao ou glossario.
<dt> Indica o termo da lista de definigao.
<dd> Indica a definigao do termo da lista de definigao .

Listas Atributos das Listas

1 i 1 1
ol ul dl ol ul li
"" ""
Q. Q. dt type 1 type type

dd start value

Anda mungkin juga menyukai