HTML

Pacote Web
HTML + CSS +
Javascript
Jornada de Cursos - CITi
Renato Viana Ferreira
06/19/23
Web
207.218.76.108 -> vrml.organic.com
GET /VRML2.0/FINAL/Overview.html HTTP/1.0
06/19/23
Cliente X Servidor
• Cliente
• HTML
• CSS
• Javascript
• Vbscript
• Servidor
• PHP
• ASP.NET
• JSP
06/19/23
<html>
06/19/23
HTML
• HyperText Markup Language
• Tags
• Diz ao browser como renderizar
a página
• *.html, *.htm
06/19/23
Hello World
<html>
<head>
<title>Hello World</title>
</head>
<body>
Hello World!!!
</body>
</html>
helloWorld.htm
06/19/23
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
06/19/23
Tags básicas
• <br>
• <hX> X é um número de
1-6
• <p>
• <hr>
tagsBasicas.htm
06/19/23
Comentários
• 
comentario.htm
06/19/23
Cores
• Texto ou RGB (Red, Green
Blue)
• “red”, “blue”, “green”,
“#000000”, “#FFFFFF”
• http://www.w3schools.com/
html/html_colors.asp
bgcolor.htm
06/19/23
Texto
• <b>
• <i>
• <small>
• <strong>
• <em>
• <big>
• <sup>
• <sub>
• <pre>
• <address>
• <acronym>
formatacaoTexto.htm
preFormatacao.htm
06/19/23
Direção do Texto
• <bdo dir=“rtl”>
• Bi-directional Override
• Right-to-left
• Left-to-right
redirecionamentoTexto.htm
06/19/23
Texto inserido e deletado
• <ins>
• <del>
insDel.htm
06/19/23
Alinhamento
• <div align=“”>
• Right
• Center
• Left
• Justify
06/19/23
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
06/19/23
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
06/19/23
Targets
• Vamos ver frames
primeiro???
06/19/23
Frames
• Mais de uma página html
na mesma janela.
• Independentes uns dos
outros
06/19/23
Frames
<html>
<frameset
rows="25%,50%,25%">
<frame src="frame_a.htm">
<frame src="frame_b.htm">
<frame src="frame_c.htm">
</frameset>
</html>
06/19/23
Frames
• Pode-se aninhar
conjuntos de frames para
fazer estruturas mais
complexas
frameset.htm
06/19/23
Iframes
• Inline Frames
• Pode-se inserir páginas
dentro de outras páginas
• <iframe
src=“iframe.htm”>
</iframe>
06/19/23
Targets
• _self
• _blank
• _parent
• _top
targets.htm
06/19/23
Tabelas
• Organizam o layout da página
<table>
<tr>
<th></th>
</tr>
<tr>
<td></td>
</tr>
</table>
06/19/23
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
06/19/23
Tabelas
• Colspan
• Rowspan
• Cell padding
• Cell spacing
tables.htm
06/19/23
Listas
• <ul> - Unordered List
• <ol> - Ordered List
• <li> - item da lista
listas.htm
06/19/23
Forms
• Formulários são utilizados
para entrada de dados
pelo usuário do site
<form name=“formulario”
method=“get”
action=“handleForm.php”>
06/19/23
Input
• Tipos:
• Button
• CheckBox
• File
• Hidden
• Image
• Password
• Radio
• Reset
• Submit
• Text
06/19/23
Drop down lists
<select>
<option></option>
</select>
06/19/23
Textarea
<textarea rows=“10”
cols=“30”>
</textarea>
forms.htm
06/19/23
Imagens
• Atributo background
• <img src="imagens/hacker.gif"
alt="Hacker" align="left"
height="48" width="48">
imagens.htm
06/19/23
<head>
• Base – Todos os
documentos serão
referenciados a partir do
endereço base.
noBase.htm
base.htm
06/19/23
<head>
• Meta – Dá informações
sobre a sua página
meta.htm
06/19/23
TagList
• http://
www.w3schools.com/
tags/default.asp
06/19/23
XHTML
• eXtensible HyperText
Markup Language
• Substituirá HTML
• O quê??? E o que eu
acabei de aprender???
06/19/23
XHTML
• Calma...
• É só uma versão mais
rígida e limpa de html
• Problema: HTML escrito
errado é normalmente
renderizado nos
browsers...
06/19/23
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
06/19/23
XHTML
• Todas as tags devem ser
fechadas
• <p></p>
• Tags únicas devem ter uma
barra indicando o
fechamento
• <br /> <input />
06/19/23
XHTML
• Atributos não podem ser
minimizados
HTML: <option selected>

XHTML: <option
selected=“selected” />
06/19/23
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."
06/19/23
Pacote Web
HTML + CSS +
Javascript
06/19/23
CSS
06/19/23
CSS
• Cascading Style Sheets
• Define como os elementos
HTML serão exibidos
• Reduzem bastante o
trabalho de formatação das
páginas
06/19/23
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
06/19/23
Sintaxe
• identificador
{propriedade: valor;}
primeiroCss.css
06/19/23
Linkando Css e HTML
• Dentro da tag <head>
• <link rel="stylesheet"
type="text/css"
href="mystyle.css" />
primeiroCss.css
primeiroCss.htm
06/19/23
Background
background-color
background-image
background-attachment (fixed,
scroll)
background-position
background-repeat
estiloBackground.htm
estiloBackground2.htm
06/19/23
Textos
letter-spacing
word-spacing
text-align
text-decoration
text-indent
text-transform
white-space
estiloTexto.htm
06/19/23
Fontes
font-family
font-size
font-style
font-variant
font-weight
estiloTexto2.htm
06/19/23
Bordas
border-style
border-color
border-width
border-left
border-right
border-top
border-bottom
estiloBordas.htm
06/19/23
Margens
margin-left
margin-right
margin-top
margin-bottom
estiloMargens.htm
06/19/23
Listas
• list-style
http://www.w3schools.com
/css/css_list.asp
06/19/23
Posicionamento
• position
http://
www.w3schools.com/css/
css_positioning.asp
06/19/23
JavaScript
06/19/23
JavaScript
• É “a” linguagem para
browser scripting
• Dá iteratividade a
documentos HTML
• Linguagem de Programação
interpretada pelo browser
06/19/23
JavaScript
• Adiciona texto
dinamicamente no
documento HTML
• Trata eventos
• Usado para validar dados
06/19/23
JavaScript
• O JavaScript deve ser
colocado entre tags HTML
<script
type="text/javascript">
document.write("Hello
World!")
</script>
06/19/23
document.write(“String”)
• Escreve a string entre aspas
no documento HTML
helloWorldJs.htm
06/19/23
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
06/19/23
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
06/19/23
Estruturas de controles
• Condicionais
• Laços
06/19/23
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
06/19/23
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
06/19/23
Operadores
• Operadores Aritméticos
• +  Soma
• -  Subtração
• *  Multiplicação
• /  Divisão
• %  Módulo (resto da
divisão)
• ++  Incremento
• --  Decremento
06/19/23
Operadores
• Operadores de Comparação
• ==  Igualdade de valores
• ===  Igualdade de valores
e tipos
• !=  Diferente
• <  Menor
• >  Maior
• <=  Menor ou igual
• >=  Maior ou igual
06/19/23
Operadores
• Operadores Lógicos
• &&  “e”
• ||  “ou”
• !  “não”
06/19/23
Popups Boxes
• Alert
• Confirm
• Prompt
popUpBoxes.htm
06/19/23
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
06/19/23
For
for(var=valorInicial; condicao;
incremento) {
comandos...
}
for.htm
06/19/23
While
while(condicao) {
comandos...
}
while.htm
06/19/23
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
06/19/23
Eventos
• http://
www.w3schools.com/js/
js_events.asp
06/19/23
Arrays
• Arrays guardam um
conjunto de valores
• Valores são acessados por
indices
arrays.htm
06/19/23
Date
• Objeto que representa
datas
• A data atual é dada por
new Date();
• http://
js_obj_date.asp
06/19/23
Math
• Objeto que contêm várias
funções e constantes
matemáticas
• Funções randômicas
• http://
js_obj_math.asp
06/19/23
String
• http://
js_obj_string.asp
06/19/23
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
06/19/23
Pacote Web
HTML + CSS +
Javascript
06/19/23

HTML

Enviado por

Dados do documento

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

HTML

Enviado por

Direitos autorais:

Formatos disponíveis

Pacote Web

Renato Viana Ferreira

207.218.76.108 -> vrml.organic.com

GET /VRML2.0/FINAL/Overview.html HTTP/1.0

• Todas as tags devem ser

HTML: <option selected>

W3C once said: "Dynamic

Renato Viana Ferreira

Renato Viana Ferreira

Você também pode gostar