HTML.ppt

3/17/2023
Pacote Web
HTML + CSS +
Javascript
Jornada de Cursos - CITi
Renato Viana Ferreira

3/17/2023
Web
207.218.76.108 -> vrml.organic.com
GET /VRML2.0/FINAL/Overview.html HTTP/1.0

3/17/2023
Cliente X Servidor
• Cliente
• HTML
• CSS
• Javascript
• Vbscript
• Servidor
• PHP
• ASP.NET
• JSP

3/17/2023
HTML
• HyperText Markup Language
• Tags
• Diz ao browser como renderizar
a página
• *.html, *.htm

3/17/2023
Hello World
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World!!!
</body>
</html>
helloWorld.htm

3/17/2023
Tags
• Tags marcam os elementos
de HTML
• São cercadas por “<“ e “>”
• Normalmente são abertas
e fechadas <b> </b>
• Atributos das tags entre
aspas (simples ou duplas)
helloWorldExtendido.htm

3/17/2023
Tags básicas
• <br>
• <hX> X é um número de
1-6
• <p>
• <hr>
tagsBasicas.htm

3/17/2023
Comentários
• 
comentario.htm

3/17/2023
Cores
• Texto ou RGB (Red, Green
Blue)
• “red”, “blue”, “green”,
“#000000”, “#FFFFFF”
• http://www.w3schools.com/ht
ml/html_colors.asp
bgcolor.htm

3/17/2023
Texto
• <b>
• <i>
• <small>
• <strong>
• <em>
• <big>
• <sup>
• <sub>
• <pre>
• <address>
• <acronym>
formatacaoTexto.htm
preFormatacao.htm

3/17/2023
Direção do Texto
• <bdo dir=“rtl”>
• Bi-directional Override
• Right-to-left
• Left-to-right
redirecionamentoTexto.htm

3/17/2023
Texto inserido e deletado
• <ins>
• <del>
insDel.htm

3/17/2023
Alinhamento
• <div align=“”>
• Right
• Center
• Left
• Justify

3/17/2023
Links
• Uso da tag <a> (Anchor)
• Uma âncora pode apontar para
qualquer tipo de recurso
• Outra parte da mesma página
• Outra página web
• Imagem
• Arquivos para download
• <a href=‘paginaDestino’>
Texto </a>
ancoras.htm

3/17/2023
Targets
• Vamos ver frames
primeiro???

3/17/2023
Frames
• Mais de uma página html
na mesma janela.
• Independentes uns dos
outros

3/17/2023
Frames
<html>
<frameset
rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>

3/17/2023
Frames
• Pode-se aninhar
conjuntos de frames para
fazer estruturas mais
complexas
frameset.htm

3/17/2023
Iframes
• Inline Frames
• Pode-se inserir páginas
dentro de outras páginas
• <iframe
src=“iframe.htm”>
</iframe>

3/17/2023
Targets
• _self
• _blank
• _parent
• _top
targets.htm

3/17/2023
Tabelas
• Organizam o layout da página
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>

3/17/2023
Tabelas
• <caption> - Descrição da
tabela
• <table frame=“valor”>
Atributo frame: indica
quais bordas devem
aparecer
• above, below, border, box,
hsides, lhs, rhs, void,vsides

3/17/2023
Tabelas
• Colspan
• Rowspan
• Cell padding
• Cell spacing
tables.htm

3/17/2023
Listas
• <ul> - Unordered List
• <ol> - Ordered List
• <li> - item da lista
listas.htm

3/17/2023
Forms
• Formulários são utilizados
para entrada de dados
pelo usuário do site
<form name=“formulario”
method=“get”
action=“handleForm.php”>

3/17/2023
Input
• Tipos:
• Button
• CheckBox
• File
• Hidden
• Image
• Password
• Radio
• Reset
• Submit
• Text

3/17/2023
Drop down lists
<select>
<option></option>
</select>

3/17/2023
Textarea
<textarea rows=“10”
cols=“30”>
</textarea>
forms.htm

3/17/2023
Imagens
• Atributo background
• <img src="imagens/hacker.gif"
alt="Hacker" align="left"
height="48" width="48">
imagens.htm

3/17/2023
<head>
• Base – Todos os
documentos serão
referenciados a partir do
endereço base.
noBase.htm
base.htm

3/17/2023
<head>
• Meta – Dá informações
sobre a sua página
meta.htm

3/17/2023
TagList
• http://www.w3schools.co
m/tags/default.asp

3/17/2023
XHTML
• eXtensible HyperText
Markup Language
• Substituirá HTML
• O quê??? E o que eu
acabei de aprender???

3/17/2023
XHTML
• Calma...
• É só uma versão mais
rígida e limpa de html
• Problema: HTML escrito
errado é normalmente
renderizado nos
browsers...

3/17/2023
XHTML
• XHTML requer que o código
HTML seja bem escrito...
HTML: <b><i>A</b></i>
XHTML: <b><i>A</i></b>
• Todas as tags devem ser
em letras minúsculas

3/17/2023
XHTML
• Todas as tags devem ser
fechadas
• <p></p>
• Tags únicas devem ter uma
barra indicando o
fechamento
• <br /> <input />

3/17/2023
XHTML
• Atributos não podem ser
minimizados
HTML: <option selected>
XHTML: <option
selected=“selected” />

3/17/2023
DHTML
Dynamic HTML
W3C once said: "Dynamic
HTML is a term used by
some vendors to describe
the combination of HTML,
style sheets and scripts
that allows documents to
be animated."

3/17/2023
CSS
• Cascading Style Sheets
• Define como os elementos
HTML serão exibidos
• Reduzem bastante o
trabalho de formatação das
páginas

3/17/2023
CSS
• Por que Cascading?
• Porque o estilo usado é o
mais próximo do alvo...
• A ordem é
• Default do Browser
• Folha de Estilo externa
• Folha de Estilo interna, na tag
head
• Estilo interno do elemento html

3/17/2023
Sintaxe
• identificador
{propriedade: valor;}
primeiroCss.css

3/17/2023
Linkando Css e HTML
• Dentro da tag <head>
• <link rel="stylesheet"
type="text/css"
href="mystyle.css" />
primeiroCss.css
primeiroCss.htm

3/17/2023
Background
background-color
background-image
background-attachment (fixed,
scroll)
background-position
background-repeat
estiloBackground.htm
estiloBackground2.htm

3/17/2023
Textos
letter-spacing
word-spacing
text-align
text-decoration
text-indent
text-transform
white-space
estiloTexto.htm

3/17/2023
Fontes
font-family
font-size
font-style
font-variant
font-weight
estiloTexto2.htm

3/17/2023
Bordas
border-style
border-color
border-width
border-left
border-right
border-top
border-bottom
estiloBordas.htm

3/17/2023
Margens
margin-left
margin-right
margin-top
margin-bottom
estiloMargens.htm

3/17/2023
Listas
• list-style
http://www.w3schools.com
/css/css_list.asp

3/17/2023
Posicionamento
• position
http://www.w3schools.com
/css/css_positioning.asp

3/17/2023
JavaScript
• É “a” linguagem para
browser scripting
• Dá iteratividade a
documentos HTML
• Linguagem de Programação
interpretada pelo browser

3/17/2023
JavaScript
• Adiciona texto
dinamicamente no
documento HTML
• Trata eventos
• Usado para validar dados

3/17/2023
JavaScript
• O JavaScript deve ser
colocado entre tags HTML
<script
type="text/javascript">
document.write("Hello
World!")
</script>

3/17/2023
document.write(“String”)
• Escreve a string entre
aspas no documento HTML
helloWorldJs.htm

3/17/2023
Onde colocar o JavaScript?
• <head>
• Funções que serão utilizadas pelos
scripts do <body>
• <body>
• Chamadas de funções, escritas
• Externo
• Funções comuns a vários
documentos HTML
usoJavaScript.htm
javaScriptExterno.js

3/17/2023
Variáveis
• Armazenam um valor
• Não possuem tipo
específico
• JavaScript é Case Sensitive
• Nomes devem começar
com letras ou _
• var temp = 1;
variaveis.htm

3/17/2023
Estruturas de controles
• Condicionais
• Laços

3/17/2023
If... Else...
if (condição) {
código a ser executado
caso a condição seja
verdadeira
} else {
código a ser executado
caso a condição seja falsa
}
ifelse.htm

3/17/2023
Switch
switch (valor) {
case 1:
código a ser executado caso o valor seja =
1;
break;
case 2:
código a ser executado caso o valor seja =
2;
break;
default:
código a ser executado caso o valor seja
diferente de todos os valores acima;
break;
}
switch.htm

3/17/2023
Operadores
• Operadores Aritméticos
• +  Soma
• -  Subtração
• *  Multiplicação
• /  Divisão
• %  Módulo (resto da
divisão)
• ++  Incremento
• --  Decremento

3/17/2023
Operadores
• Operadores de Comparação
• ==  Igualdade de valores
• ===  Igualdade de valores
e tipos
• !=  Diferente
• <  Menor
• >  Maior
• <=  Menor ou igual
• >=  Maior ou igual

3/17/2023
Operadores
• Operadores Lógicos
• &&  “e”
• ||  “ou”
• !  “não”
.

3/17/2023
Popups Boxes
• Alert
• Confirm
• Prompt
popUpBoxes.htm

3/17/2023
Funções
• Tratamento de eventos
• Código utilizado mais de
uma vez.
• Muitas vezes são colocadas
em arquivos externos
• Podem retornar valores
funcoesJavaScript.htm
funcoesJavaScript.js

3/17/2023
For
for(var=valorInicial; condicao;
incremento) {
comandos...
}
for.htm

3/17/2023
While
while(condicao) {
comandos...
}
while.htm

3/17/2023
Break and Continue
• Break
• Interrompe a execução do
laço
• Continue
• Finaliza iteração atual do laço
e continua com o próximo
valor
breakContinue.htm

3/17/2023
Eventos
• http://www.w3schools.com
/js/js_events.asp

3/17/2023
Arrays
• Arrays guardam um
conjunto de valores
• Valores são acessados por
indices
arrays.htm

3/17/2023
Date
• Objeto que representa
datas
• A data atual é dada por
new Date();
/js/js_obj_date.asp

3/17/2023
Math
• Objeto que contêm várias
funções e constantes
matemáticas
• Funções randômicas
/js/js_obj_math.asp

3/17/2023
String
/js/js_obj_string.asp

3/17/2023
JavaScript HTML DOM
• Document Object Model
• Define uma maneira padrão
de acesso e manipulação de
documentos HTML
/htmldom/default.asp
/js/js_obj_htmldom.asp

HTML.ppt

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie HTML.ppt

Ähnlich wie HTML.ppt (20)

Mehr von AlexSouza974126

Mehr von AlexSouza974126 (10)

HTML.ppt