APRENDENDO HTML E CSS na prática - computacao...

APRENDENDO HTML E CSS na prática

Autora: Profª. Danielle Costa

Formiga, MG 2013

DESENVOLVIMENTO WEB PROF. DANIELLE COSTA

2

Índice A Linguagem HTML ................................................................................................................. 3

Introdução ................................................................................................................................ 3

Estrutura da página .................................................................................................................. 3

Estrutura do documento HTML .............................................................................................. 3

Formatação do Texto ............................................................................................................... 5

Definição de Listas .................................................................................................................. 7

Imagens .................................................................................................................................. 10

Tabelas ................................................................................................................................... 11

Hyperlinks ............................................................................................................................. 12

Formulários ............................................................................................................................ 14

Frames ................................................................................................................................... 19

Tags especiais ........................................................................................................................ 22

Elementos Div ....................................................................................................................... 25

CSS (Cascading Style Sheets) - Folhas de estilo em cascata ................................................ 27

Introdução .............................................................................................................................. 27

Como criar estilos .................................................................................................................. 27

Seletores ................................................................................................................................ 28

As folhas de estilo ................................................................................................................. 29

Modelo de caixa em CSS ...................................................................................................... 31

Layers .................................................................................................................................... 39

Vantagens e Desvantagens .................................................................................................... 39

Atributos do CSS ................................................................................................................... 39


3

A Linguagem HTML Introdução HTML (Hypertext1 Markup Language) - é uma linguagem padrão de marcação (tags) de hipertexto, não-proprietário, para exibição de conteúdo no World Wide Web da Internet. Não é considerada uma linguagem de programação porque não possui comandos para tomada de decisões (if..then..else), estruturas de repetição (do..while, repeat..while), funções etc. Compõe-se de diretivas (tags e atributos) que são interpretadas pelos navegadores. Ao interpretar as diferentes diretivas temos a apresentação de uma página seguindo a formatação de texto, cores e imagens definida pelo “autor”.

Página - é um hipertexto no WWW que associa diferentes tipos de mídia como textos, imagens, áudio e vídeo, conectados por hiperlinks. Pode ser única ou estar ligada a outras páginas formando um sistema de informações ou um website. Vale a pena ressaltar que uma página html é composta de texto e deve ser salva como htm ou html.

Página principal ou Home Page - A página de entrada ou página inicial. Editores gráficos - O uso dos editores permitem que o autor crie uma página sem conhecer os códigos da linguagem HTML. São exemplos de editores HTML: Adobe Dreamweaver, Nvu, Edit Plus, Microsoft FrontPage e Mozilla Composer,etc. Além de Editores existem também programas Assistentes que transformam documentos gerados em MSWord, PowerPoint e Excel em páginas HTML. Estrutura da página <HTML> e </HTML> - São tags que dizem que o documento é do tipo html, ou seja, uma página web. Estrutura do documento HTML

• cabeçalho <HEAD> e </HEAD> - aqui especifica-se o título da página <TITLE> e </TITLE>, será apresentado na barra superior do navegador.

• Corpo <BODY> e </BODY> - aqui especifica-se: cores de fundo, texto, links, e o início do documento. Tudo que estiver entre essas tags é interpretado como “corpo” do documento e será exibido pelo navegador

Propriedades aplicadas a tag body, se não forem aplicadas assumem um valor padrão:

1 Um hipertexto contém um conjunto de textos interligados e recursivos, ele não começa em lugar algum nem tem final e apresenta várias seqüências de leitura.


4

• bgcolor - cor de fundo para a página • background - imagem nos formatos .jpg ou .gif usada de fundo da página • text - define uma cor para o texto • link - define uma cor para os links • vlink - define cor para os link já visitados • alink - define a cor para o link na hora que for ativado

• topmargin -controla a distância do corpo do texto e a margem superior • bottommargin - controla a distância do corpo do texto e a margem inferior • leftmargin - controla a distância do corpo do texto e a margem esquerda • rightmargin - controla a distância do corpo do texto e a margem direita

Exemplo 1 <BODY BACKGROUND=nome_imagem BGCOLOR=nome_cor TEXT=nome_cor LINK=nome_cor VLINK=nome_cor ALINK=nome_cor> Exemplo 2 <BODY BACKGROUND=nome_imagem BGCOLOR=#RRGGBB TEXT=#RRGGBB LINK=#código_cor VLINK=#RRGGBB ALINK=#RRGGBB > A Figura 1 abaixo exibe o código HTML visualizado por meio do navegador.

Figura 1 – Código de uma página HTML


5

Formatação do Texto O texto pode ser formatado com as tags de tamanho, itálico, negrito e fonte monoespaçada, sobrescrito e subscrito. Para todas elas é necessário delimitar o início e o fim do texto a ser formatado.

• Cor e fonte : <font color = nome_cor> Texto </font> <font face = tipo_letra > Texto </font> <font size =+n>Texto </font> , onde n seria o incremento ao tamanho original.

Tabela 1 – Cores

Nome da cor (português) Nome da cor (inglês) Hexadecimal Bege Beige #F5F5DC Preta Black #000000 Azul Blue #0000FF Ouro Gold #FFD700 Verde Green #008000 Cinza Gray #808080

Amarela Yellow #FFFF00 Magenta Magenta #FF00FF Marrom Brown #A52A2A Laranja Orange #FFA500

Vermelha Red #FF0000 Rosa Pink #FFC0CB

Púrpura Purple #800080 Branca White #FFFFFF

Tipos de fonte definidas pela linguagem HTML:

• Cabeçalhos : <H1> Tamanho H1</H1> <H2> Tamanho H2</H2> <H3> Tamanho H3</H3> <H4> Tamanho H4</H4> <H5> Tamanho H5</H5> <H6> Tamanho H6</H6>

Exemplo 3: h6, h5, h4, h3, h2, h1


6

• Outros estilos : <B> Texto em Negrito ( Bold ) </B> --Texto em Negrito ( Bold ) <I> Texto em Itálico </I> --Texto em Itálico

<TT> Texto com fonte monoespaçada </TT> --Texto com fonte monoespaçada <U> Texto sublinhado </u> Texto sublinhado <SUP> Texto sobrescrito </SUP> --Texto sobrecrito

<SUB> Texto subscrito </SUB> -- Texto subscrito

Acentuação e Caracteres Especiais A codificação2 permite a qualquer equipamento interpretar os códigos e exibir na tela o caractere desejado. Funcionamento:

• Primeiro o caractere "&" • Seguido da letra que deverá ser acentuada, pode ser minúscula ou maiúscula • Veja a tabela abaixo e coloque o código do acento desejado • Acrescente o caractere " ; " ( ponto de vírgula )

Exemplo 4 : diário = diário natação = natação Acentos

Caracteres Especiais

Disposição do Texto na Página Diretivas para uma formatação básica de um texto em uma página: <CENTER>: centraliza o texto em relação à página <BR>: quebra de linha, iniciando o texto seguinte na linha logo abaixo <P>: força o fim de um parágrafo, ou seja, pula uma linha antes de iniciar outro parágrafo

2 HTML não diferencia maiúsculas ou minúsculo nos identificadores de tags e nome de atributos

Agudo Grave Circunflexo Til Trema Cedilha &_acute &_grave &_circ &_tilde &_uml; &_cedil;

E < > (c) Espaço em Branco &amp &lt &gt &copy &nbsp


7

<HR>: régua horizontal; inclui uma linha horizontal no texto, separando o texto em blocos width = _% comprimento. Ex. width=50% size = _ espessura do traço. Ex. size=6

<PRE> : respeita a formatação original do texto inserido na página Definição de Listas Listas são utilizadas para organizar seu texto em uma relação de itens e subitens, ordenados ou não. Tipos de listas: Listas ordenadas, listas não-ordenadas e listas de definição. Listas Ordenadas <ol> - inicia uma lista type - define o tipo de numeração da lista que pode ser:

A - Letras maiúsculas a - Letras minúsculas I - Algarismos romanos 1 - Números arábicos

</ol> - finaliza a lista <li> - determina um item da lista Exemplo 5: Código html <ol type=”1”>

<li>Primeiro <li>Segundo <li>Terceiro </ol>

No browser 1. Primeiro 2. Segundo 3. Terceiro

Listas Não Ordenadas <ul> - marca o início da lista type - define o tipo de marcador de cada item da lista que pode ser:

disc - pequeno disco sólido square - quadrado preenchido circle - círculo cheio

</ul>- marca o final da lista <li> - determina um item da lista Exemplo 6: Código html <ul type=”disc”>

<li>Primeira <ul> <li>Filha <li>Filha </ul> <li>Segunda <li>Terceira </ul>

No browser

• Primeira � Filha � Filha

• Segunda • Terceira


8

Listas de Definição <dl> marca o início da lista <dt>indica termo a ser definido <dd>indica a definição do termo acima Exemplo 7: Código html <dl>

<dt> LW <dd>Linguagem Web <dt>ED <dd>Estrutura de Dados </dl>

No browser

LW Linguagem Web ED Estrutura de Dados


9

Exercícios de fixação:

1) Crie uma página chamada ex1.html e deixe-a com o seguinte layout: a) O texto “Aula de HTML” deve ter tamanho 4 e ficar centralizado. b) Após o texto incluir uma Linha Horizontal tamanho 2 e cor Cinza. c) O texto “Estrutura da página” deve ser em fonte Arial, tamanho 3 e cor Azul. d) O texto “Estrutura do Documento” deve ser em fonte Arial, Negrito, tamanho 3 e

cor Verde. e) O texto “Formatação de Texto” deve ser em fonte Arial, Itálico, tamanho 3, cor

vermelha. f) O texto “Disposição do texto nas páginas” deve ser em texto pré-formato, fonte

Arial, tamanho 5 e cor Magenta.

2) Crie uma página chamada ex2.html e deixe-a com o seguinte layout: a) O cabeçalho “Definição de Listas:” deve ter tamanho 4. b) Após o cabeçalho incluir uma linha horizontal tamanho 2 e cor cinza. c) Crie as listas com os seguintes itens:

1. Lista Ordenada 1. Primeiro Item da lista ordenada 2. Segundo Item da lista ordenada

2. Lista não Ordenada

� Primeiro Item da lista não ordenada � Segundo Item da lista não ordenada

3. Lista de Definição

E1 Exemplo1

Cada item deve ter fonte tamanho 2, alternar as cores das linhas em Verde e Vermelho.

3) Utilizar a página do ex1.html e inserir os comandos necessários para que a mesma tenha uma cor de fundo. Altere o exemplo para receber como fundo uma imagem "fundo.gif".

Comandos mínimos para se criar uma página HTML: <html> <head><title></title></head> <body> </body> </html


10

Imagens

A tag <img> inclui uma imagem dentro de um documento HTML. Elas podem ser usadas Em conjunto com alguns parâmetros como: border para determinar a moldura da imagem. Exemplo 8: Imagem com borda:

<IMG border=6 SRC=”imagens/figura.gif”> width para determinar a largura da imagem height para determinar a altura da imagem

Exemplo 9: Imagem com limitação de Altura e Comprimento:

<IMG width=50 height=90 SRC=”figura.gif”> Alinhar um texto em relação a uma imagem. Parâmetros de alinhamento : align=left para alinhar a imagem a esquerda do texto. Exemplo 10: Imagem com texto alinhado a esquerda

Texto que acompanha a figura.

<IMG align=left SRC=”figura.gif”> Texto

Outros alinhamentos: align=right para alinhar a imagem a direita do texto <IMG align=right SRC=”figura.gif”> align=top para alinhar o texto com o topo da imagem. <IMG align=top SRC=”figura.gif”>. align=bottom para alinhar o texto com a parte inferior da imagem. <IMG align=bottom SRC=”figura.gif>. align=middle para alinhar o texto com o meio da imagem. Imagem com texto alinhado a meia altura da imagem <IMG align=middle SRC=”figura.gif”>


11

Tabelas Além do propósito original de exibir dados tabulados, as tabelas3 passaram a ser usadas com sucesso para posicionar elementos nas páginas. As tags <TABLE> </TABLE> identificam a tabela, especifica a espessura da borda com o parâmetro BORDER.

<th>... </th> “table head” define o cabeçalho de cada coluna <tr> ... </tr> “table row” delimita a linha <td> ... </td> “table data” delimita cada elemento da tabela, cada célula.

Atributos que podem ser usados nas tabelas: colspan : específica quantas colunas da tabela a célula ocupará rowspan : específica quantas linhas da tabela a célula ocupará width : define a largura exata da célula height : define a altura exata da célula align : alinhamento horizontal ( right, center, left ) valign : alinhamento vertical ( top, middle, bottom ) cellspacing: define o espaço entre as células Exemplo 11: <table border=4 height =”300”> <th>Coluna 1</th><th>Coluna 2</th> <tr><td width = “150”>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> <tr><td width = “150”>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> </table> Resultado na tabela: Coluna 1 Coluna 2 linha 1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2 Exemplo 12: <table border=4> <th colspan=2>Colunas 1 e 2</th> <tr> <td>linha1, coluna 1</td><td> linha 1, coluna 2</td></tr> <tr><td>linha 2, coluna 1</td><td>linha 2, coluna 2</td></tr> <th rowspan=3>3 linhas</th> <td>uma linha</td> <tr><td>duas linhas</td></tr> <tr><td>três linhas</td></tr> </table>

3 Dica: Planeje cada tabela antes de iniciar a codificação. Faça um esboço no papel para ter idéia da estrutura. O esquecimento de uma tag pode comprometer a estrutura da tabela. O ideal é escrever a tag de fechamento sempre após a tag de abertura, antes de incluir o conteúdo.


12

Resultado na tabela: Colunas 1 e 2

linha 1, coluna 1 linha 1, coluna 2 linha 2, coluna 1 linha 2, coluna 2

3 linhas

uma linha duas linhas três linhas

Hyperlinks A idéia central dos hyperlinks é proporcionar liberdade ao usuário para navegar entre diferentes documentos, clicando em termos ou frases que levem a outros documentos. Fazer links para outros documentos ( páginas, imagens, sons, etc ), através da tag <A> </A>, chamadas de âncoras (anchor tag). Informar o HREF(endereço de onde está a página que será acessada ) e o TEXTO/IMAGEM que indicará o link. < A HREF=http://endereço/documento> texto/imagem </A> Referência a outro documento pode ser feita por :

� Caminho Absoluto : corresponde ao endereço completo do documento, utilizado quando os documentos estão em servidores ou pastas diferentes. < A HREF=http://máquina/diretório/pagina.html > texto/imagem </A>

� Caminho Relativo : quando o documento a ser acessado está no mesmo

servidor ou pasta que a página atual. < A HREF=../outra-página.html > texto/imagem </A>

Um link “mailto” permite que os usuários enviem mensagens para um endereço de e-mail definido, clicando no hyperlink. Exemplo 13 <html> <head> <title> Usando Hyperlinks </title> </head> <body> <A HREF=”ex1.html” > Exercício de Fixação 1 </A><br> <A HREF=”ex2.html” > Exercício de Fixação 2 </A><br> <A HREF=”mailto:[email protected]”> E-mail </A> </body> </html


13


4) Crie uma página chamada ex4.html e deixe-a com o seguinte layout:

5) No ex4.html adicione hyperlinks nos nomes dos alunos. Cada hyperlink deve direcionar para a página pessoal de cada aluno.


14

Formulários Os formulários em uma página Web permitem coletar informações dos usuários que visitam uma página. Usando campos de entrada de textos, menus e botões é possível colher dados para diversos fins.Também definimos que ação será tomada assim que o formulário for preenchido e enviado. É preciso saber que o HTML oferece apenas os meios para receber as informações do usuário e enviá-las a um servidor ou endereço de e-mail. O HTML não provê meios para tratar ou armazenar essas informações. Para manipular e validar os dados inseridos pelo usuário antes de enviá-los ao servidor é preciso ainda de uma linguagem de script cliente-side (do lado do cliente) como o Javascript por exemplo. Definição do Formulário Um formulário é definido pelas tags <form>e</form>. A tag de formulário mais usada é a tag <input>. O tipo de input é especificado com o atributo

type. Os tipos de input mais comumente usados são explicados abaixo. Campos Tipo Texto <FORM> Nome:<INPUT TYPE=TEXT NAME="Nome"> Senha:<INPUT TYPE=PASSWORD NAME="Senha" > </FORM>

Alguns Atributos VALUE- inicializa o campo com um valor definido. MAXLENGTH – define a quantidade máxima de caracteres permitidos no campo DIABLED – desabilita o campo para digitação <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome" VALUE="Danielle Costa"> Senha:<INPUT TYPE=PASSWORD NAME="Senha" MAXLENGTH="8"> </FORM>


15

SIZE- Delimita o tamanho do espaço para entrada do valor nos campos. <FORM> Nome: <INPUT TYPE=TEXT NAME="Nome"

SIZE=30 >

Senha:<INPUT TYPE=PASSWORD NAME="Senha"> </FORM>

Campos Tipo Múltipla Escolha <FORM> Frutas : <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Abacaxi">Abacaxi <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Morango">Morango <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Limão">Limão <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Pera">Pera <INPUT TYPE=CHECKBOX NAME="fruta" VALUE="Laranja">Laranja </FORM> O atributo CHECKED serve para inicializar um item como já escolhido.

Campos Tipo Escolha Única <FORM> Estado Civil : <INPUT TYPE=RADIO NAME="estciv" VALUE="Solteiro">Solteiro <INPUT TYPE=RADIO NAME="estciv" VALUE="Casado">Casado <INPUT TYPE=RADIO NAME="estciv" VALUE="Viuvo">Viuvo <INPUT TYPE=RADIO NAME="estciv" VALUE="Divorciado">Divorciado <INPUT TYPE=RADIO NAME="estciv" VALUE="Outros">Outros </FORM>


16

Botões de Ação SUBMIT - Envia os dados preenchidos no formulário para o servidor, iniciando a execução do programa especificado no atributo ACTION. RESET - Reinicializa o formulário com os valores previamente definidos. O atributo VALUE define a mensagem sobre o botão. FILE - Exibe a janela para procura de um arquivo HIDDEN - Além dos campos definidos no formulário que estão visíveis e serão preenchidos pelo visitante podemos definir campos não visíveis que estarão passando parâmetros para o programa a ser executado. <FORM> <INPUT TYPE=SUBMIT VALUE="Enviar"> <INPUT TYPE=RESET VALUE="Cancelar"> </FORM>

Botões de Seleção SELECT- é utilizada juntamente com a diretiva <OPTION> para definir uma lista de valores a serem selecionados. Pode-se definir um valor como padrão usando o atributo <OPTION SELECTED>valor O atributo SIZE é utilizado para se apresentar mais de um valor na página. <FORM> <SELECT NAME="plataforma" SIZE=3> <OPTION>PC <OPTION>Workstation <OPTION>Alpha <OPTION>Mainframe IBM </SELECT> </FORM>

Àrea de Texto A Diretiva TEXTAREA define uma área para entrada de textos. Os atributos COLS e ROWS definem o tamanho da janela. <FORM> <TEXTAREA COLS=60 ROWS=10 NAME="texto">Área para entrada de texto </TEXTAREA> </FORM>


17

Passagem de parâmetros pelo formulário

O atributo METHOD define o método de acesso a URL onde está o script, programa a ser executado no servidor, especificado pelo atributo ACTION. <FORM METHOD=GET/POST4 ACTION= script ></FORM> Exemplo 14: <html> <head> <title> Usando tipo oculto </head> <body> <form method=post action= teste.js>

<input type=submit name=”enviar” value="enviar informações"> </form> </body> </html> 4 O método GET envia os dados do formulário em pares/valor anexados à URL descrita em action, separando cada campo como caractere “?”. Não é recomendado quando não se deseja que o usuário veja o que está sendo enviado. O método POST envia os dados ocultos no corpo da mensagem.


18


6) Construa um formulário HTML com os seguintes campos: a) Nome: Texto, usuário pode digitar no máximo 20 caracteres. b) Idade: Caixa de seleção com os itens:

Entre 0 e 20 Entre 21 e 29 Entre 30 e 35 36 ou Mais Sexo: Dois botões de radio, tendo um radio o value “Masculino” e outro radio com o value “Feminino”.

c) E-Mail: Texto, usuário pode digitar no máximo 40 caracteres. d) Observações: TextArea com sete linhas e 40 colunas. 7) Construa o código HTML para o formulário mostrado abaixo.


19

Frames Frames ou quadros permitem a divisão da tela de exposição do navegador em diferentes áreas. Assim, é possível, por exemplo, que se determine uma área da tela para ser a página principal eoutras áreas para menus ou links. O Frameset ou conjunto de frames, indica como será estruturado cada quadro na tela em termos de Linhas (rows) e colunas (cols), e quais páginas deverão ser apresentadas em cada um desses quadros. É possível ainda definir atributos em nosso Frameset que controlam a visualização e navegação coordenada entre os frames. Atributos de controle

• Margem: marginwidth : determina as margens direita e esquerda do frame marginheight : determina as margens superior e inferior do frame

• Barra de rolagem : Scrolling : determina se o frame terá barra de rolagem se necessário ou não. Eliminação da barra de rolagem < FRAME src = ... SCROLLING = "NO" >

• Alteração da estrutura :

Os navegadores permitem que o visitante altere a posição dos frames. Para tanto o atributo noresize inibe esta possibilidade e torna os frames fixos conforme definido. < FRAME src = ... NORESIZE>

• Bordas : É possível definir se nossa estrutura de quadros será apresentada ressaltando-se as bordas entre os frames ou não usando os atributos frameborder e border.

Eliminação das bordas dos frames: < FRAMESET src = ... FRAMEBORDER="NO" >

Eliminação do espaço entre os frames : < FRAMESET src = .... FRAMEBORDER="NO" BORDER="0">

Direcionamento

O atributo target (alvo) é o que indica onde uma página deverá ser apresenta assim que o visitante clica em um link . Por definição uma nova página será apresentada na mesma área onde está link. Para redirecionar a página para outra área temos as possibilidades a seguir que devem constar na definição no link ( <a href=pagina.html target= ... > ) :


20

target="nome da área " : carrega a página na área especificada. target=_top : limpa a tela e abre a nova página ocupando toda a tela. target=_blank : abre uma nova janela para exibir a página. target=_self : carrega a página na mesma área do link. Opção é default. Exemplo 15: Como montar dois frames em coluna: <FRAMESET COLS="x, y">

<FRAME SRC="col1.html"> <FRAME SRC="col2.html">

</FRAMESET> Dois frames em linha: <FRAMESET ROWS="x, y">

<FRAME SRC="lin1.html"> <FRAME SRC="lin2.html">

</FRAMESET> Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em coluna e compor a segunda coluna com dois frames em linha: <FRAMESET COLS="x, y">

<FRAME SRC="col1.html"> <FRAMESET ROWS="x, y">

<FRAME SRC="lin1.html"> <FRAME SRC="lin2.html">

</FRAMESET> </FRAMESET> Para montar esta estrutura abaixo, deve-se criar primeiro dois frames em linha e compor a segunda linha com dois frames em coluna: <FRAMESET ROWS="x, y">

<FRAME SRC="lin1.html"> <FRAMESET COLS="x, y">

<FRAME SRC="col1.html"> <FRAME SRC="col2.html">

</FRAMESET> </FRAMESET>


21

Exercícios de Fixação

8) Construa a página abaixo utilizando frames.

9) Altere o exercício anterior para exibir bordas e depois barra de rolagem.


22

Tags especiais Músicas Inserir música em uma página web é relativamente fácil nos dias de hoje. No passado, várias tags tinham de ser usadas porque os navegadores não tinham um padrão uniforme para arquivos de mídia incorporados. A música é inserida em uma página o uso da tag <embed>. Há outras maneiras de ligar a música, mas incorporar agora é considerado o padrão para a mídia de inserção. A tag <embed> não requer um marca de fechamento. Os seus controles, incluindo Play, Stop, Pause e volume, já estão incluídos. Para personalizar a aparência do player certifique-se de definir os seguintes atributos.

• width - a largura do player de mídia. • height - a altura do player de mídia. • hidden - determina se o media player é visível. Se esse valor é definido como "true", o media player não será exibido. Recomenda-se usar esse atributo apenas se você sabe que seus visitantes não vão querer a opção de parar a música que está tocando em sua página web (Os valores são "true" ou "false"). • autostart - permite o player para começar automaticamente (os valores são "true" e "falso"). • loop - define se o arquivo de mídia vai repetir (os valores são "true" e "falso"). • volume - define o volume do arquivo de mídia (os valores variam de "0" a "100").

• src - define a localização do arquivo para incorporar na página.

Exemplo 16: <html> <head><title> Player de música</title></head> <body> <p>Para parar a música pressione Stop/Pause</p> <embed src="beethoven.mid" width="360" height="165" autostart="true" loop="false" volume=”60”> </body> </html> Vídeos Os arquivos de vídeo, incluindo vídeos do YouTube, são incorporados em um documento HTML usando a tag <embed>. O atributo src define o arquivo de vídeo para incorporar na página.


23

Flash (.swf) e (Mov) também são tipos de arquivo suportados pela tag <embed>. • swf - tipos de arquivo Macromedia Flash - compressão muito alta, ótimo para a web. • wmv - Microsoft Window Media - de boa qualidade, compressão variável. • mov - formato da Apple filme Quick Time - de boa qualidade, compressão variável. • mpeg - O padrão aceito para arquivos da web filme criado pelo Moving Pictures Expert Group de boa qualidade, compressão variável. É possível também simplesmente colocar a URL de seus arquivos de mídia no valor do atributo href, bem como o conceito de imagens "thumbnailing". Exemplo 17: <html> <head><title> Vídeo em flash</title></head> <body> <p>Para parar o vídeo pressione Stop/Pause</p> <a href="http://www.tizag.com/pics/flash/motiontween1easy.swf"> motiontween1easy.swf </a> </body> </html> Vídeos do YouTube podem ser incluídos em documentos HTML, e o Google oferece o código para fazê-lo. Exemplo 18: <html> <head><title> Vídeo do YouTube</title></head> <body> <p>Para parar o vídeo pressione Stop/Pause</p> <object width="425" height="344"><param name="movie" value=" http://www.youtube.com/v/opVb89Cmrtkamp;hl=enamp;fs=1”> </param> <param name="allowFullScreen" value="true></param> </param><param name="allowscriptaccess" value="always"></param> <embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"> <embed src="http://www.youtube.com/v/opVb89Cmrtk&hl=en&fs=1"type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344”> </embed> </object> </body> </html>


24


10) Altere o exercício anterior para exibir no índice músicas e vídeos.


25

Elementos Div A tag <div> nada mais é do que uma unidade de recipiente que encapsula outros elementos da página e divide o documento HTML em seções. Os desenvolvedores da Web usam elementos <div> para agrupar elementos HTML e aplicar estilos CSS a elementos de uma só vez. Por exemplo, envolvendo um conjunto de elementos de parágrafo em um elemento <div>, o desenvolvedor pode tirar proveito de estilos CSS e aplicar uma fonte de todos os parágrafos de uma só vez, aplicando um estilo de fonte para a marca <div> em vez de codificar o mesmo estilo de cada elemento do parágrafo.

Existem muitos layouts de blogs baseados em tags "div", justamente porque você pode atribuír-lhes altura/largura e a distância do canto superior esquerdo da janela do navegador esquerda/superior. Mais as opções de fundo ou cor de fundo, e jogar o conteúdo lá dentro e está tudo pronto! Mas cuidado: Não são todos os navegadores que interpretam bem estes códigos todos.

Exemplo 19: <html> <head><title> Exemplo de tag div</title></head> <body> <div id="myDiv" name="myDiv" title="Examplo Div Elemento" style="font-family: Helvetica; font-size: 12pt; border: 1px solid black;"> <div id="subDiv1" name="subDiv1" title="Subdivision Div Element" style="color: #FF0000; border: 1px dotted black;"> <h5>Seção 1</h5> <p>O site é dividido em seções. </p> <p>Cada seção tem seu significado e carrega informações de diversos assunt</p> </div> <br /> <div id="subDiv2" name="subDiv2" title="Subdivisao Div Elemento" style="color: #FF00FF;border: 1px dashed black;"> <h5>Seção 2</h5> <p>Este parágrafo será seu parágrafo de conteúdo..</p> <p>Este outro parágrafo será o de artigos.</p> </div> </div> </body> </html>


26


11) Imagine que exista uma seção chamada NOTÍCIAS: 1. 2. 3. ... Dentro dessa seção há 3 colunas de assuntos diversos que dividem as chamadas 1. 2. 3. ... 4. 5. 6. ... 7. 8. 9. ... Suponha que cada uma colunas seja de um assunto diferente, por exemplo: Esporte, Política e Educação. Crie uma página HTML utilizando a tag <div> para dividir as colunas em 3 seções diferentes.


27

CSS (Cascading Style Sheets) - Folhas de estilo em cascata

Introdução Todo documento escrito utiliza certos elementos de desenho para formatar seções de texto a fim de manter a mesma aparência, seguir um padrão. Por exemplo, um elemento de desenho Heading 1 é geralmente alguma fonte grande que identifica todas as principais divisões de tópicos de um capítulo, artigo ou página da web. Um elemento de desenho Heading 2 identifica todos os títulos dos subtópicos. A HTML inclui uma tag para praticamente todos os elementos de desenho comumente utilizados. No passado, a tag <H1> em quase todos os web sites parecia a mesma, o texto preto era consideravelmente maior que o corpo do texto normal. Se você quisesse fazer seus próprios títulos diferenciados, tinha que formatar cada tag de título individualmente, utilizando tags <FONT> ou similares. As folhas de estilo em cascata mudam tudo isso. Com uma folha de estilo, é possível fazer uma "declaração global", como "quero que todos os meus títulos <H1> sejam verdes". É preciso dizer isso somente uma vez e cada título <H1> em seu site será verde. Se depois decidir que azul é uma cor melhor, não é preciso voltar e alterar cada tag <H1> para a cor azul. Em vez disso, basta alterar o estilo - a "regra" - para "quero que todos os meus títulos <H1> sejam azuis". Como criar estilos As formatações do CSS são normalmente aplicadas aos elementos (tags) do HTML, como, por exemplo, nos elementos table, p, h1 ou body. No CSS esses elementos são chamados seletores. Cada estilo criado é definido como uma regra CSS. Cada regra deve utilizar a seguinte sintaxe:

elemento {atributo1: valor; atributo2: valor ...}

Elemento - descreve o elemento de design ao qual o estilo será aplicado.

Atributo5 - o aspecto específico do elemento que você quer usar como estilo. Deve ser um nome de atributo CSS válido, como o atributo font-size.

Valor - a configuração aplicada ao atributo. Deve ser uma configuração válida para o atributo em questão, como 20pt para font-size.

Atributo: valor - parte da declaração da regra. É possível atribuir múltiplas declarações separando-as por ponto-e-vírgula (;).

5 O w3c apresenta um guia de referência completo de atributos CSS. O guia está disponível no endereço: http://www.w3c.br/divulgacao/guiasreferencia/css2/


28

Exemplo 1 H2 {font-size: 24pt; color: blue} Todos os títulos de nível 2 (tags <H2>) devem ter tamanho de 24 pontos e cor azul; Seletores Existem diversas maneiras de selecionar o conteúdo que deve receber alguma informação de estilo: Seletor de elementos múltiplos Elemento1, Elemento2... {atributo1: valor; atributo2: valor ...} H1, H2, H3 {font-weight:bold} /* Faz com que o conteúdo dos elementos H1, H2, H3 fiquem em negrito */ Seletor universal *{atributo1: valor; atributo2: valor ...} /* Faz com que o conteúdo dos elementos fiquem em negrito */ Seletor de elementos adjacentes Elemento1 + Elemento2 {atributo1: valor; atributo2: valor ...} H1+P {atributo1: valor; atributo2: valor ...} /* Faz com que o conteúdo do elemento P fique em negrito, mas somente quando estiver logo após um elemento H1 */ Seletor de elementos filhos Elemento1> Elemento2 {atributo1: valor; atributo2: valor ...} DIV>P {font-weight:bold} /* Faz com que o conteúdo dos parágrafos que estiverem dentro de algum DIV, fiquem em negrito */ Seletor HTML: Class . NomeDaClasse {atributo1: valor; atributo2: valor ...}, ou Elemento.NomeDaClasse {atributo1: valor; atributo2: valor ...} <html> <head><title></title> <STYLE TYPE=”TEXT/CSS”> .conteudo{font-style:italic; Font-size:24 } </STYLE> </head> <body><p class=”conteudo”>Bem vindo a página! Tamanho da fonte 24</p> <p>Texto normal</p> </body> </html>


29

Seletor HTML: Id #NomeDoIdentificador {atributo1: valor; atributo2: valor ...} <html> <head><title></title> <STYLE TYPE=”TEXT/CSS”> #cabeçalho{font-style:italic} </STYLE> </head> <body><p id=”cabeçalho”>Bem vindo a página!</p> <p>Texto normal</p> </body> </html> As folhas de estilo

É possível definir regras de CSS de três formas. São elas:

Externo - Externo significa que você coloca as regras de CSS em um arquivo separado, e então sua página HTML pode fazer um link para esse arquivo. Essa abordagem lhe permite definir regras em um ou mais arquivos que podem ser aplicadas em alguma página do seu web site.

Exemplo 2 Arquivo meu_estilo.css

H1 {font-family: 'Comic Sans MS'; font-size: 36pt; color: blue } H2 {font-family: 'Courier'; margin-left: 0.5in } <html> <title>Exemplo Estilo Externo</title> <head> <LINK REL="STYLESHEET" HREF="meu_estilo.css" TYPE="text/css"> </head> <body><H1>Texto com a primeira formatação em css <H2>Texto com a segunda formatação em css </body> </html>

Sempre que quiser utilizar esses estilos em uma nova página, basta colocar uma tag <LINK> no cabeçalho que referencia meu_estilo.css.


30

<LINK REL="STYLESHEET" HREF="meu_estilo.css" TYPE="text/css">

Você deve inserir este texto entre as tags <HEAD>...</HEAD> e colocar a localização correta do seu arquivo e seu nome.

Incorporado - Incorporado significa que você especifica as regras de CSS no cabeçalho do documento. As regras incorporadas afetam somente a página atual.

Se quiser criar um conjunto de estilos que se aplicam a uma única página, pode-se configurar os estilos exatamente como no Exemplo 2 dos estilos externos, mas em vez de colocar as tags <STYLE>...</STYLE> e as regras em um arquivo separado, coloque estas tags na própria página HTML. A estrutura básica de uma página da web que utiliza estilos incorporados é semelhante ao seguinte código:

Exemplo 3 <html><head><title>Exemplo Estilo Incorporado</title> <STYLE TYPE="text/css"> P {background-color: #FFFFFF; font-family:'Comic Sans MS'; font-size: 14pt} </STYLE> </head><body></body> </html> Inline - Inline significa que você especifica as regras de CSS dentro da tag de HTML. Essas regras afetam somente a tag atual. Os estilos inline afetam somente a tag atual e não outras tags na página e tampouco outros documentos. A sintaxe para definir um estilo inline é a seguinte:

Exemplo 4

<A STYLE="color: green; text-decoration: none" HREF="http://www.seusite.com">

Note que em vez das tags <STYLE>...</STYLE>, você apenas utiliza um atributo STYLE dentro da tag para definir o estilo. E, em vez de colocar as regras de CSS entre colchetes, você as coloca entre aspas, separando-as com ponto-e-vírgula como de costume.

As definições de estilo aplicáveis a um documento podem se originar de três lugares diferentes:

Desenvolvedor: o desenvolvedor define as regras de apresentação do documento


31

Usuário: caso o browser permita, o leitor pode definir suas regras de apresentação.

Browser: o próprio browser possui um conjunto de regras que são utilizadas quando nenhum outro estilo for definido. São as regras “default” do browser.

Dessa maneira uma parte do documento pode receber estilos conflitantes de diversas origens. O browser gera um único “CSS virtual” e utilizando as regras de prevalência a seguir.

Menor importância ⇔ Maior importância Origem Estilo default do

browser Estilo do usuário Estilo do

desenvolvedor Métodos Externo Incorporado Inline

Elementos seletor class id Utilizando a tag <DIV> As tags HTML <DIV>...</DIV> podem ser usadas para formatar um grande bloco de texto, uma divisão, abrangendo diversos parágrafos e outros elementos. Desta forma essas tags são boa opção para definir estilos que afetam grandes seções de um texto em uma página.

Exemplo 5

<STYLE TYPE="text/css"> DIV.sidebar {font=family: "Arial"; font-size: 12pt; text-align: right; background-color: #C0C0C0; margin-left: 1in; margin-right: 1in} </STYLE>

Ao colocar na tag <DIV> o atributo CLASS, você estará fazendo com que todos os elementos que estejam englobados nesta tag sigam estes padrões.

Modelo de caixa em CSS O modelo de caixa em CSS, descreve os boxes que estão sendo geradas pelos elementos HTML. O modelo de caixa contém ainda opções detalhadas de ajuste de margens, bordas, padding e conteúdo para cada elemento. O diagrama abaixo mostra como o modelo de caixa é construída:


32

• Padding: espaço que pode existir entre o conteúdo e suas bordas. • Border: designa o limite do elemento. • Margin: pode existir e separa o elemento de outros da mesma página. • Largura do elemento: é determinada pela largura do conteúdo. • Largura da caixa: é determinada pela soma das larguras do conteúdo, mais as larguras. • Ocupadas pelas linhas de contorno (border), pelo espaço em branco (padding) e pelas

larguras das margens.

A ilustração mostra que cada um dos elementos é cercado por caixas que podem ser ajustadas com o CSS. O exemplo abaixo contém dois elementos: <h1> e <p>. O modelo de caixa para os dois elementos podem ser ilustradas como se segue: <h1> Artigo 1: </h1> <p> Todos os seres humanos nascem livres e iguais em dignidade e direitos. São dotados de razão e consciência e devem agir em relação umas às outras com espírito de fraternidade </ p>


33

Bordas CSS

As propriedades de borda permitem-lhe especificar o estilo, a cor, e a largura de um elemento border. Em HTML usamos tabelas para criar bordas em torno de um texto, mas com as propriedades de borda na CSS podemos criar bordas com belos efeitos, e elas podem ser aplicadas a qualquer elemento.

Exemplo 6: Cor das bordas <html> <head> <style type="text/css"> p.one { border-style: solid; border-color: #0000ff } p.two { border-style: solid; border-color: #ff0000 #0000ff } p.three { border-style: solid; border-color: #ff0000 #00ff00 #0000ff } p.four { border-style: solid; border-color: #ff0000 #00ff00 #0000ff rgb(250,0,255) } </style> </head> <body> <p class="one"><b>Observação:</b> A propriedade "border-color" não é reconhecida no Internet Explorer se for usada sozinha. Use a propriedade "border-style" para configurar as bordas antes no Internet Explorer.</p> <p class="two">Some text</p>


34

<p class="three"><b>Observação:</b> O Netscape 4 não suporta a propriedade "border-color". Use a propriedade "border" para configurar as bordas e as cores no Netscape.</p> <p class="four">Algum texto.</p> </body> </html> Exemplo 7:Estilo das bordas <html> <head> <style type="text/css"> p.dotted {border-style: dotted} p.dashed {border-style: dashed} p.solid {border-style: solid} p.double {border-style: double} p.groove {border-style: groove} p.ridge {border-style: ridge} p.inset {border-style: inset} p.outset {border-style: outset} </style> </head> <body> <p>A propriedade "border-style" não é reconhecida pelo Netscape 4.</p> <p>O Netscape 6 suporta todos os estilos de bordas.</p> <p>O Internet Explorer 5.5 suporta todos os estilos de bordas. O Internet Explorer 4.0 - 5.0 não suporta os valores "dotted" e "dashed".</p> <p class="dotted"> Uma borda pontilhada</p> <p class="dashed"> Um borda tracejada</p> <p class="solid"> Uma borda sólida</p> <p class="double"> Uma borda dupla</p> <p class="groove">


35

Uma borda com canaleta</p> <p class="ridge"> Uma borda saliente</p> <p class="inset"> Uma borda rebaixada</p> <p class="outset"> Uma borda em relêvo</p> </body> </html> Exemplo 8: Largura das bordas <html> <head> <style type="text/css"> p.one { border-style: solid; border-width: 5px } p.two { border-style: solid; border-width: 5px 10px } p.three { border-style: solid; border-width: 5px 10px 1px } p.four { border-style: solid; border-width: 5px 10px 1px medium } </style> </head> <body> <p class="one"> A propriedade "border-width" não é


36

reconhecida no Internet Explorer se for usada sozinha. Use a propriedade "border-style" para especificar as bordas antes no Internet Explorer. </p> <p class="two"> Algum texto. </p> <p class="three"> Algum texto. </p> <p class="four"> Algum texto. </p> </body> </html> Margem em CSS

As propriedades de margem definem o espaço em volta dos elementos. É possível usar valores negativos para sobrepor o conteúdo. As margens superior, direita, inferior, e esquerda podem ser mudadas independentemente usando propriedades separadas. Uma propriedade de margem estenográfica pode também ser usada para mudar todas as margens de uma só vez.

Como primeiro exemplo, vamos olhar se define as margens para o documento, ou seja, para o elemento <body>. A ilustração abaixo mostra como queremos que as margens da página.


37

body { margin-top: 100px; margin-right: 40px; margin-bottom: 10px; margin-left: 70px; }

Ou

body { margin: 100px 40px 10px 70px; }

Exemplo 9

<html> <head> <style type="text/css"> p.margin {margin: 2cm 4cm 3cm 4cm} </style> </head> <body> <p> Este é um parágrafo </p> <p class="margin"> Este é um parágrafo com margens </p> <p> Este é um parágrafo </p> </body> </html>

Enchimento em CSS

As propriedades de enchimento definem o espaço entre a borda do elemento e o conteúdo do elemento. Valores negativos não são permitidos. O enchimento superior, direito, inferior, e esquerdo podem ser mudados independentemente usando propriedades separadas. Uma


38

propriedade de enchimento estenográfica é também criada para controlar múltiplos lados de uma só vez.

Exemplo 10 <html> <head> <style type="text/css"> td {padding: 1.5cm} td.twovalues {padding: 0.5cm 2.5cm} </style> </head> <body> <table border="1"> <tr> <td> Esta é uma célula de tabela com enchimento em cada lado. </td> </tr> </table> <br> <table border="1"> <tr> <td class="twovalues"> Esta é uma célula de tabela com enchimento em cada lado. Os enchimentos superior e inferior têm o mesmo valor (0,5cm), enquanto que os enchimentos esquerdo e direito têm outro valor (2,5). </td> </tr> </table> </body> </html>


39

Layers Algumas das limitações das páginas Web é a dificuldade de se posicionar texto ou imagem precisamente em uma página e de sobrepor elementos HTML. Uma maneira de implementar layers é controlá-los através folhas de estilo. Vantagens e Desvantagens

A grande vantagem na utilização do css é a separação lógica da estruturação e da formatação das informações e redução do tamanho e de tempo de carregamento das páginas. Mas é importante ressaltar que diferentes navegadores interpretam o css de forma diferente principalmente as versões antigas.

Atributos do CSS A Tabela 2 a seguir descreve os principais atributos que podem ser utilizados nos aquivos css.

Tabela 2 – Atributos css

Atributo de CSS O que ele formata

background Cor de fundo, imagem, transparência.

background-attachment Rolagem do fundo / Marca d'água.

background-image Imagem de fundo.

background-color Cor de fundo ou transparência.

background-position Posicionamento da imagem de fundo.

background-repeat Configuração lado-a-lado da imagem de fundo.

Border Largura, estilo e cor de todas as 4 bordas.

border-bottom Largura, estilo e cor da borda inferior.

border-bottom-color Cor da citada borda.

border-bottom-style Estilo da citada borda.

border-bottom-width Largura da citada borda.

border-color Cor das 4 bordas.

border-left Largura, estilo e cor da borda esquerda.

border-left-color Cor da borda citada.

border-left-style Estilo da borda citada.

border-left-width Largura da borda citada.

border-right Largura, estilo e cor da borda direita.

border-right-color Cor da borda citada.

border-right-style Estilo da borda citada.


40

border-right-width Largura da borda citada.

border-style Estilo de todas as 4 boras.

border-top Largura, estilo e cor da borda superior.

border-top-color Cor da borda citada.

border-top-style Estilo da borda citada.

border-top-width Largura da borda citada.

border-width Largura de todas as 4 bordas.

Clear Elementos flutuantes à esquerda ou à direita de um elemento.

Clip Parte visível de um elemento.

Color Cor de primeiro plano.

Cursor Tipo de ponteiro do mouse.

Display Se o elemento é exibido e o espaço é reservado para ele.

Filter Tipo de filtro aplicado ao elemento.

Float Se o elemento flutua.

Font Estilo, variante, peso, tamanho e altura da linha do tipo de fonte.

@font-face Incorporação da fonte ao arquivo HTML.

font-family Tipo de fonte.

font-size Tamanho da fonte.

font-style Fonte itálico.

Fonte-variant Fonte bold.

font-weight Peso da fonte de claro a negrito.

Height Altura exibida ao elemento.

@import Folha de estilo a importar.

Left Posição do elemento em relação a margem esquerda da página.

letter-spacing Distância entre as letras.

line-height Distância entre linhas de base.

list-style Tipo, imagem e posição do estilo da lista.

list-style-image Marcador de item de lista.

list-style-position Posição do marcador de item da lista.

list-style-type Marcador de item de lista alternativo.

Margin Tamanho de todas as 4 margens.

margin-left Tamanho da margem esquerda.

margin-right Tamanho da margem direita.

margin-bottom Tamanho da margem inferior.


41

margin-top Tamanho da margem superior.

Overflow Exibição de imagens que são maiores do que suas molduras.

Padding Espaço em torno de um elemento em todos os lados.

Padding-bottom Espaço a partir da margem inferior de um elemento.

Padding-left Espaço à esquerda do elemento.

Padding-right Espaço à direita do elemento.

Padding-top Espaço a partir da margem superior do elemento.

page-break-after Inserir quebra de página depois de um elemento.

page-break-before Inserir quebra de página antes de um elemento.

Position Como o elemento é posicionado na página.

text-align Alinhamento do texto.

text-decoration Sublinhado, sobrelinhado ou riscado.

text-indent Recuo da primeira linha do parágrafo.

text-transform Transformação para todas maiúsculas, minúsculas ou inicial maiúscula.

Top Posição do elemento em relação a parte superior da página.

vertical-align Alinhamento vertical do elemento.

Visibility Se elemento é visível ou invisível.

Width Largura do elemento.

z-index Posição do elemento na pilha Exercícios de fixação: 1) Comece com algumas modificações simples em amostra1.html e css_teste

a) modifique a cor da fonte e do background nas tags H1, H2, e H3 b) modifique o tamanho das fontes nos parágrafos para 12pt

2) Agora veja os resultados no arquivo css_teste.html, usando o seu navegador.

a) modifique a largura da borda nos elementos de borda das classes .primeiro e .ultimo para "thin" b) modifique o estilo da borda do elemento H1 para "solid"

3) Agora tente acrescentar novas classes:


42

a) crie uma classe chamada .highlight - ajuste a cor do background para amarelo (#FFFF00)

b) crie uma classe chamada .minhaclasse - ajuste a font-family para "monospace", o tamanho para "large", a cor para verde (#00FF00), e o background para preto (#000000)

c) modifique o arquivo css_teste.html para poder acomodar as novas classes. Você vai poder vê-las usando qualquer tag com um atributo de classe ajustado para o nome da classe (sem o ponto inicial) - exemplo: <div class=" minhaclasse">esta é a classe minhaclasse</div>

APRENDENDO HTML E CSS na prática - computacao...

Documents

Transcript of APRENDENDO HTML E CSS na prática - computacao...