Html-Css

Programao Web Prof. Ricardo S.
Arajo (Carvo)
HTML
CSS
HyperText Mark-up Language
DTD Document Type Definition

Ele define o que pode (ou no pode)
Composto por tags ou etiquetas
Tags so rtulos usados para informar ao

navegador como o documento deve ser apresentado o website Sempre entre os sinais < e >
<tag>
Se abrir, feche!
A maioria tem sua equivalente para fechamento

<tag> ... </tag>
Ou seja, tudo que estiver entre a tag ser devidamente interpretado pelo navegador
Elementos vazios no marcam uma regio do texto, apenas introduzem alguma coisa no documento Elemento visvel
<hr /> (cria uma linha horizontal)
Elemeto invisvel
<br /> (quebra de linha)
Primeira a abrir a ultima a fechar

<a> <b> <c> .. </c> </b> </a> (correto) <a> <b> <c> .. </a> </b> </c> (incorreto)
Documento HTML comea (e finaliza) com a TAG <html> e de preferncia possui duas filhas
<head> ... </head> <body> ... </body>
HEAD
Cabealho da pgina
title, meta, script*, style*, ...
BODY
Corpo do documento
table, form, ul, ...
Demais tags
http://www.w3schools.com/html/default.asp
Detalhe da linguagem
CASE INSENSITIVE Comentrio  Acentuaes e caracteres especiais

http://www.w3schools.com/tags/ref_entities.asp
No
linguagem de programao!!
<html> <body> <h1>Cabeçalho tipo 1</h1> <hr> <p>Um exemplo de como fazer um texto formatado por um parágrafo</p> </body> </html>
<h1> <hr> <p>
Preparar um documento com os elementos abaixo: 1) Cabealhos do tipo 2, 3 e 4, nesta ordem.
2) Adicionar um pargrafo abaixo.

3) Adicionar uma linha horizontal vermelha abaixo do pargrafo.
Cada tag tem o seu conjunto de atributos e seus possveis valores

<tag atributo1=valor1 atributo2=valor2>
No exemplo acima, faltou??

FECHAR A TAG!!
Atributos informam caractersticas especficas da tag Sempre so informados na tag de abertura
Lembrete: normalmente aos pares nome=valor
nome: nome do atributo aceito pela tag valor: valor aceito pelo atributo
<html> <body> <h3>Exemplo com atributo</h3> <hr color=blue> <a href=http://sc.senai.br>Link para o site do Senai</a> </body> </html>
Preparar um documento com os elementos abaixo: 1) Cabealho do tipo 2. 2) Adicionar uma linha horizontal vermelha abaixo do cabealho. 3) Colocar um link para algum site (ex: Senai ou Google). 4) Inserir um pargrafo em azul. 5) Inserir um link dentro do pargrafo.
Cabealho / Ttulo
Usar cabealho apenas como cabealho! No utilizar apenas para ter letras grandes ou negrito
Motores de busca costumam usar os ttulos para indexar a estrutura e contedo da pgina
Definido pela tag <p>
No esquea de fechar a tag

Diferente da quebra de linha <br> De preferncia feche a tag <br />
Era utilizada para estilizar fontes
ERA!
Est deprecated no HTML 4 e foi removido no HTML 5
Utilizado para navegao
Pode ser um texto ou uma imagem

Serve para direcionar para outro documento ou como ncora
Direcionar para outro documento

<a href=url>Link text</a>
Fazer uma ncora
<a name=ancora1>Texto da ancora 1</a> <a href=#ancora1>Click aqui para ir a ancora 1</a>
Uma ncora uma boa opo para textos longos Se o link fizer referencia para uma ncora inexistente, ir para o incio do documento
Definida pela tag <table>
Cada tabela dividida por linhas <tr> (table rows)

Cada linha dividida por clula <td> (table data) que contm o dado para ser exibido Este dado pode ser texto, links, imagens, listas, outras tabelas, formulrios, etc
<table> <tr> <td>linha <td>linha </tr> <tr> <td>linha <td>linha </tr> </table>
1, celula 1</td> 1, celula 2</td> 2, celula 1</td> 2, celula 2</td>
Usados para definir o ttulo de cada coluna
Definido por <thead> com o filho <th>

Poderia ser um <td>? Ento por que utilizar um <th> ?
Dois tipos: ordenadas e no ordenadas
No ordenadas so definidas pela tag <ul> (unordered list)

Ordenadas so definidas pela tag <ol> (ordered list) Ambas utilizam <li> (list item) para definir os itens que a compe
No ordenadas <ul> <li>Item 1</li> <li>Item 2</li> </ul> Ordenadas <ol> <li>Item 1</li> <li>Item 2</li> </ol>
1) Criar uma pasta chamada Ex2 e nele 3 arquivos HTML (pag1, pag2 e pag3). 2) Criar uma tabela no arquivo 1. Nesta tabela, uma coluna com um link pra cada arquivo (pag2 e pag3).
3) No arquivo 2 uma lista com itens a sua escolha e uma imagem associada a cada item.
Definido pela tag <form>
Objetivo de enviar dados para o servidor

No mnimo um campo para entrada de dado
No mnimo um boto para enviar o formulrio
Composto por tags <input>
Opes da tag input
Definido por um input do tipo radio
Serve para escolha nica

Identifica-se o grupo pelo atribuo name
Ex:
<input type='radio name=sexo /> F <input type='radio name=sexo /> M
Definido pela tag <select>
Serve para escolha nica

Tambm conhecido como combobox ou dropdown
Composto pela tag <option>
Ex:
<select name=estado> <option value=1>SC</option> <option value=2>SP</option> </select>
4) No arquivo 3 um titulo tipo 2 e um formulrio como o modelo abaixo:
Opes da tag <select>: -Em cartaz -Lanamento -Pr-estria -Acervo -Outra
Cascading Style Sheet

Define a apresentao do documento
Define a apresentao do documento!! Centraliza solues (poupa trabalho redundante)
Sintaxe
SELETOR { propriedade: valor; }
Possveis seletores
Prpria tag HTML ID da tag Nome da classe css criada
Exemplo tag HTML

p{ color: red; font-size: 12px;
Exemplo id da tag
#idTag { color: red; font-size: 12px; }
Exemplo classe CSS

.paragrafoVermelho { color: red; font-size: 12px; }
Para aplicar o CSS, tem-se:
Seletor de tag: ser aplicado em todas as tags do documento Seletor por ID: apenas a tag com aquele ID ter os estilos
<div id=idTag > .. </div>
Seletor classe: tags que posuirem o atributo CLASS igual ao definido no style
<div class=paragrafoVermelho > .. </div>
Para usar os estilos

CSS externo ao documento:
<link rel="stylesheet" type="text/css" href="mystyle.css" />
CSS interno ao documento:

<style type="text/css"> hr { color:sienna; } </style>
Inline (interno a tag)

<p style="color:sienna;"> </p>
INLINE
Estilos internos
Estilos externos Padro do navegador
Ambas possuem os principais atributos:

style class id
<div> tem por objetivo dividir a pgina em sesses / reas

<span> semelhante a <div> mas com objetivo de estilizar textos
1) Faa uma lista desordenada com smbolos tipo circle, fonte arial tamanho 10px (usando CSS externo para definir sua apresentao) 2) Faa uma lista ordenada com nmeros romanos utilizando CSS interno ao documento 3) Faa uma lista ordenada com nmeros romanos e dentro uma sub-lista ordenada com letras (alpha) e de cor azul, sem utilizar CSS inline 4) Crie uma tabela definindo cores diferentes para a clula, cabealho e bordas

Html-Css

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Html-Css

Hochgeladen von

Copyright:

Verfügbare Formate

Programao Web Prof. Ricardo S.

HyperText Mark-up Language

DTD Document Type Definition

Composto por tags ou etiquetas

Tags so rtulos usados para informar ao

A maioria tem sua equivalente para fechamento

Primeira a abrir a ultima a fechar

CASE INSENSITIVE Comentrio  Acentuaes e caracteres especiais

<h1> <hr> <p>

Preparar um documento com os elementos abaixo: 1) Cabealhos do tipo 2, 3 e 4, nesta ordem.

2) Adicionar um pargrafo abaixo.

Cada tag tem o seu conjunto de atributos e seus possveis valores

No exemplo acima, faltou??

Atributos informam caractersticas especficas da tag Sempre so informados na tag de abertura

Lembrete: normalmente aos pares nome=valor

Definido pela tag <p>

No esquea de fechar a tag

Era utilizada para estilizar fontes

Utilizado para navegao

Pode ser um texto ou uma imagem

Direcionar para outro documento

Fazer uma ncora

Definida pela tag <table>

Cada tabela dividida por linhas <tr> (table rows)

1, celula 1</td> 1, celula 2</td> 2, celula 1</td> 2, celula 2</td>

Usados para definir o ttulo de cada coluna

Definido por <thead> com o filho <th>

Dois tipos: ordenadas e no ordenadas

No ordenadas so definidas pela tag <ul> (unordered list)

Definido pela tag <form>

Objetivo de enviar dados para o servidor

No mnimo um boto para enviar o formulrio

Composto por tags <input>

Opes da tag input

Definido por um input do tipo radio

Serve para escolha nica

Definido pela tag <select>

Serve para escolha nica

Composto pela tag <option>

4) No arquivo 3 um titulo tipo 2 e um formulrio como o modelo abaixo:

Opes da tag <select>: -Em cartaz -Lanamento -Pr-estria -Acervo -Outra

Cascading Style Sheet

Prpria tag HTML ID da tag Nome da classe css criada

Exemplo tag HTML

Exemplo classe CSS

Para aplicar o CSS, tem-se:

Para usar os estilos

CSS interno ao documento:

Inline (interno a tag)

Ambas possuem os principais atributos:

<div> tem por objetivo dividir a pgina em sesses / reas

Das könnte Ihnen auch gefallen