Aprenda através dessa sequência de slides que serão como capítulos de um livro, como funciona essa linguagem sensacional que é o HTML, atualmente sendo a linguagem mais utilizada para estruturação de páginas web no mundo inteiro. Conheça de uma maneira interessante e nem um pouco chata, como essa linguagem é fascinante e tem gerado abertura de horizontes no mercado de trabalho para todos nós.
Aprenda através dessa sequência de slides que serão como capítulos de um livro, como funciona essa linguagem sensacional que é o HTML, atualmente sendo a linguagem mais utilizada para estruturação de páginas web no mundo inteiro. Conheça de uma maneira interessante e nem um pouco chata, como essa linguagem é fascinante e tem gerado abertura de horizontes no mercado de trabalho para todos nós.
[Veja mais em http://www.monolitonimbus.com.br/como-funciona-a-internet/] Aula de introdução à linguagem HTML, para quem vai começar do zero a escrever páginas de internet (apresentação do que é CSS, PHP, MySQL e JavaScript)
Apresentação feita para o treinamento dos colaboradores da Vitrio.
Público alvo do treinamento: Analistas de conteúdo, Designers e equipe de Marketing Digital.
O principal assunto era uma breve introdução ao JavaScript ,jQuery e plugins. Entretanto, abrangemos outros tópicos, tais como: Desenvolvimento em Camadas, requisições, performance de web sites e algumas ferramentas.
Apresentação realizada durante a Semana Nacional de Ciência e Tecnologia de 2014, no Instituto Federal de Educação, Ciência e Tecnologia, em São Carlos.
O minicurso "DOMinando Javascript" pretende mostrar os primeiros passos em Javascript, a linguagem mais utilizada no GitHub, passando do primeiro "Hello World" em um escopo global no navegador, até a manipulação de DOM (Document Object Model).
Utilizado para a atividade da disciplina de Metodologia do Ensino Superior do curso de Especialização em Engenharia de Software da Universidade Federal do Paraná - UFPR.
Slides do curso técnico de informática do IFPE - Campus Garanhuns. Disciplina de linguagens de programação para a web. Apresenta uma introdução sobre o desenvolvimento para esta área e introduz o HTML.
Aula 04 PHP - Utilizando Funções e Manipulando ArquivosDaniel Brandão
Função é um trecho de código com um objetivo específico, encapsulado sob uma estrutura única que recebe parâmetros e retorna um valor. Aqui aprenderemos a usar essa estrutura utilizando a linguagem PHP.
Confira a apresentação do curso de HTML online.
Você vai conhecer informações sobre o criador, origem, html e suas versões.
Acesse: www.talesaugusto.biz
[Veja mais em http://www.monolitonimbus.com.br/como-funciona-a-internet/] Aula de introdução à linguagem HTML, para quem vai começar do zero a escrever páginas de internet (apresentação do que é CSS, PHP, MySQL e JavaScript)
Apresentação feita para o treinamento dos colaboradores da Vitrio.
Público alvo do treinamento: Analistas de conteúdo, Designers e equipe de Marketing Digital.
O principal assunto era uma breve introdução ao JavaScript ,jQuery e plugins. Entretanto, abrangemos outros tópicos, tais como: Desenvolvimento em Camadas, requisições, performance de web sites e algumas ferramentas.
Apresentação realizada durante a Semana Nacional de Ciência e Tecnologia de 2014, no Instituto Federal de Educação, Ciência e Tecnologia, em São Carlos.
O minicurso "DOMinando Javascript" pretende mostrar os primeiros passos em Javascript, a linguagem mais utilizada no GitHub, passando do primeiro "Hello World" em um escopo global no navegador, até a manipulação de DOM (Document Object Model).
Utilizado para a atividade da disciplina de Metodologia do Ensino Superior do curso de Especialização em Engenharia de Software da Universidade Federal do Paraná - UFPR.
Slides do curso técnico de informática do IFPE - Campus Garanhuns. Disciplina de linguagens de programação para a web. Apresenta uma introdução sobre o desenvolvimento para esta área e introduz o HTML.
Aula 04 PHP - Utilizando Funções e Manipulando ArquivosDaniel Brandão
Função é um trecho de código com um objetivo específico, encapsulado sob uma estrutura única que recebe parâmetros e retorna um valor. Aqui aprenderemos a usar essa estrutura utilizando a linguagem PHP.
Confira a apresentação do curso de HTML online.
Você vai conhecer informações sobre o criador, origem, html e suas versões.
Acesse: www.talesaugusto.biz
O que é semântica? Para que serve o HTML? O que é marcação de dados? Entenda como a semântica do HTML nos ajuda a publicar informação na web de forma mais inteligente.
Slides da apresentação HTM Básico para inciantes.
Este tutorial é destinado para inciantes em HTML e que pretende ter uma base de conhecimento mínimo para poder avançar seus estudos. O material faz parte de um contexto de uma apresentação, assim sendo, seria muito relevante assistir também sua apresentação.
Espero que gostem!
Palestras: HTML5 – A moderna linguagem de marcação / CSS3 – Estilizando a Web do futuro
Palestrante: Leonardo Balter (iLearn/RJ)
Local: Auditório da Faculdade São Lucas
Quais são os desafios e as oportunidades que essa tecnologia vai propiciar, qual é o impacto no desenvolvimento para internet e como a Adobe pode auxiliá-los a usufruir aos máximos dos benefícios do HTML 5 e suas linguagens parceiras (CSS e Java Script)
The land change models require large amounts of data, are difficult to be reproduced, as well as to be reused. Some initiatives to open and link data increase the reproducibility of scientific experiments and data reuse. One pillar of the linked data concept is the use of Uniform Resource Identifier (URI). In this paper, we propose DBCells – an architecture for publication of a global cellular space where each cell has a URI. This new approach will allow comparison, reproduction and the reuse of models and data. However, in order to succeed, this proposal requires participation, partnerships and investments. Our main purpose in this paper is to present the architecture, benefits and challenges for debating with the scientific community.
12. HTML vs XHTML
HTML: dont worry !! escreva algo que o
navegador fará o seu melhor para renderizar.
XHTML: se não é para fazer direito, melhor
nem começar. Como vais querer que o
JavaScript, CSS, AJAX funcione ?
● rigidez do XML
13. HTML
● HyperText Markup Language (HTML) ou Linguagem de
Marcação de Hipertexto é a linguagem usada pelos
navegadores para mostrar as páginas web ao usuário.
● Ela permite combinar textos, imagens e áudios, além
introduzir referências a outras páginas por meio dos
links hipertextos.
14. Tags, elementos e atributos
● A sintaxe da HTML baseia-se em um elemento chamado
tag (etiqueta).
● Tags são rótulos usados para informar ao navegador
como o conteúdo deve ser apresentado.
15. Tags, elementos e atributos
● A tag tem a seguinte forma geral:
<tag> ..... </tag>
● Tudo que estiver contido entre uma tag de abertura <> e
uma tag de fechamento </> será processado segundo o
comando contido na tag.
● Algumas tags, chamadas tags de comandos isolados,
não necessitam de um conteúdo para serem
processados.
<BR>
● Tag para pular linha
17. E quanto aos atributos ?
Atributos modificam as tags, dizendo algo
sobre os elementos
< html >
< head >
< title > Popular Websites: Google < /title >
< /head >
< body >
< h1 > About Google < /h1 >
< p > Google is best known for its search engine, although Google now offers a
number of other services. < /p >
< p > Google’s mission is to organize the world’s information and make it
universally accessible and useful. < /p >
< p > Its founders Larry Page and Sergey Brin started Google at Stanford
University. < /p >
< p > < a href=”http://www.Google.com/” > Click here to visit Google’s Web site. < /a > < /p >
< /body >
< /html >
18. Tags, elementos e atributos
Com a evolução da web, novos padrões,
crescimento na complexidade dos grandes
sistemas ...
Algumas tags perderam o uso para outros
padrões. Então temos :
● Bad tags, conheça para não usar :)
● Good tags
19. Bad Tags
Tag
Explanation
b
Presentational. Use strong instead.
basefont
Deprecated.
big
Presentational. Use CSS instead.
center
Deprecated.
dir
Deprecated.
font
Deprecated.
hr
Presentational. Use CSS instead.
i
Presentational. Use em instead.
u
Deprecated.
25. HTML – Seção HEAD
● O elemento HEAD (Cabeçalho) define uma seção que
contém informações sobre o documento HTML.
● A seção pode incluir scripts, instruções para o browser
encontrar os estilos, metadados, entre outros.
● As tags que podem estar na seção HEAD são:
● <title>
● <base>
● <link>
● <meta>
● <script>
● <style>
26. HTML – Seção HEAD
Elemento TITLE
● Define o título do documento
● O elemento título é obrigatório em todos os documentos
HTML/XHTML.
● Esse título é referenciado em buscas pela rede, dando
uma identidade ao documento.
● Ao adicionar uma página aos seus Favoritos
(Bookmarks), o título da página se torna a âncora de
atalho para ela.
27. HTML – Seção HEAD
Elemento TITLE
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Home Page do Sérgio Costa</title>
</head>
<body>
</body>
</html>
28. HTML – Seção HEAD
Elemento BASE
● Define uma url padrão para os links do
documento.
● <base href =http://meusite.com.br />
● Define um target padrão para os links do
documento.
● <base target =“_blank” />
29. HTML – Seção HEAD
Elemento LINK
● Define ligações do documento HTML com outros
arquivos como CSS, scripts, etc.
● Tem como atributos as tags rel, type e href
● Onde rel define o tipo de relacionamento
● Type fornece informações aos navegadores sobre o
conteúdo do elemento que o contém (dado, estilo,
script...)
● HREF informa a URL que o link aponta
● A tag <link> é mais usada para ligar o documento HTML
com o style sheets:
<link rel = “stylesheet” type = “text/css” href=“estilo.css”/>
30. HTML – Seção HEAD
Elemento META
● O propósito do elemento meta é prover meta-informação
sobre o documento.
● Metadados – dados sobre dados
● Usado tipicamente para especificar descrição da página,
palavras-chave, autor do documento, última modificação e
outros metadados.
● Muito frequentemente esse elemento é usado para prover
informação que é relevante para os navegadores ou para as
ferramentas de busca como a descrição do conteúdo do seu
documento.
<meta name = “ ” content = “ ” />
31. HTML – Seção HEAD
Elemento META
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
<meta charset="UTF-8">
</head>
<body>
<p>All meta information goes in the head section...</p>
</body>
</html>
32. HTML – Seção HEAD
Elemento META
● Um dos elementos do meta é o HTTP-EQUIV.
● Uma das funcionalidades é dizer ao navegador o tipo de
dado que ele encontrará no documento.
33. HTML – Seção HEAD
Elemento META
● Um exemplo de uso comum do atributo HTTP-EQUIV é
promover a mudança automática de páginas, atribuindolhe o valor Refresh.
view-source:http://www.dpi.inpe.br/~scosta/
<meta http-equiv="refresh" content="3; URL=http://sites.google.com/site/skosta/">
34. HTML – Seção HEAD
Elemento SCRIPT
Usado para definir um script do lado do cliente, como um
código do javascript.
Torna as páginas mais dinâmicas e iterativas.
Utiliza o atributo type para especificar a linguagem
utilizada.
<script type = “text/javascript>
// código javascript
</script>
35. HTML – Seção HEAD
Elemento SCRIPT
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display an alert box.
</p>
<button onclick="myFunction()">Try
it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
36. HTML – Seção HEAD
Elemento STYLE (CSS)
Incorpora ao documento HTML, a folha de estilos
<style type = “text/css>
grupo{nome_atributo: valor;}
grupo{nome_atributo: valor;}
grupo{nome_atributo: valor;}
</style>
CSS será visto
mais a frente
37. HTML – Seção BODY
● Tudo que estiver contido em <BODY> será apresentado
ao leitor na janela principal do browser.
● <BODY> pode conter títulos, parágrafos, listas, tabelas,
links para outros documentos, imagens, formulários,
animações, vídeos, sons e scripts embutidos.
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
38. O que pode ter no HTML ?
Elementos estruturantes
39. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
41. HTML – Seção BODY
Parágrafos e Títulos
Prudência com as
tags de títulos.
42. HTML – Seção BODY
Tags de Formatação
<i> x <em>
<b> x <strong>
<del> x <strike>
43. HTML – Seção BODY
Tags de Formatação
NÃO usem tags de
formatação, apenas
"strong" e "em", que
tem uma semântica
associada.
<i> x <em>
<b> x <strong>
<del> x <strike>
44. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
45. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
47. HTML – Seção BODY
Listas
● Em HTML, as listas podem ser itens numerados ou não.
● As listas não numeradas usam a tag <ul> de Unordered
Lists para marcar o começo e fim da lista e a tag <li>
para cada item da lista.
● Os itens da lista são marcados com bullets
<ul>
<li> ... </li>
<li> ... </li>
</ul>
48. HTML – Seção BODY
Listas
● Em HTML, as listas podem ser itens numerados ou não.
● As listas numeradas usam a tag <ol> de Ordered Lists
para marcar o começo e fim da lista e a tag <li> para
cada item da lista.
● Os itens da lista são marcados com números
<ol>
<li> ... </li>
<li> ... </li>
</ol>
49. HTML – Seção BODY
Listas
● As listas podem ser compostas
<ul>
<li> ... </li>
<ul>
<li> ... </li>
<li> ... </li>
</ul>
</ul>
● Nivel 1
● Nivel 2
● Nível 2
● Nível 1
50. HTML – Seção BODY
Listas
● As listas podem usar o atributo type.
● Nas listas não ordenadas, o <type> altera o bullet usado
e pode ter os valores CIRCLE, SQUARE e DISC
(default)
<ul type = square>
<li> ... </li>
<ul type = circle>
<li> ... </li>
<li> ... </li>
</ul>
</ul>
Com CSS podemos
criar outros estilos
para as listas.
51. HTML – Seção BODY
Tabelas
● Tabelas são definidas pela tag <table>.
● Uma tabela tem linhas (rows) e colunas.
● Em HTML, define-se uma linha com a tag <tr>, de table
row.
● A linha é dividia em colunas, onde os dados são
inseridos através da tag <td>, de table data.
● Dentro de um table data, pode-se inserir texto, figura,
links, listas, formulários, outras tabelas, etc.
53. HTML – Seção BODY
Tabelas
● Linhas de cabeçalho podem ser definidas utilizando a
tag <th>, de table header, o que definirá o texto como
negrito e centralizado
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
54. HTML – Seção BODY
Tabelas
● Para inserir uma legenda à tabela, usa-se a tag
<caption>
<table border="1">
<caption>Monthly savings</caption>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$50</td>
</tr>
</table>
55. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
Links e imagens
56. HTML – Seção BODY
Hiperlink (Anchor)
● Em HTML, um link é criado utilizando a tag <a>, de duas
maneiras:
● Para criar um link para outro documento
● Atributo HREF
● Para criar um link para o próprio documento (âncora ou bookmark),
criando um apelido para determinada parte do documento.
● Atributo NAME
● O endereço indicado pelo link pode ser carregado na mesma
janela em que o usuário se encontra, ou em outra janela.
● Essa característica é determinada pelo atributo TARGET
● _self
● _blank
<a href="http://www.w3schools.com">Visit W3Schools.com!</a>
57. HTML – Seção BODY
Imagens
● Para inserir imagens em um documento HTML, utiliza-se
a tag <img>.
● Os seguintes atributos devem ser configurados:
● src
● Endereço da imagem (source)
● alt
● Texto mostrado no lugar da imagem, caso a mesma,
por algum motivo não puder ser carregada
● width
● Largura da imagem
● heigh
● Altura da imagem
58. HTML – Seção BODY
Imagens
<!DOCTYPE html>
<html>
<body>
<img src="smiley.gif" alt="Smiley
face" width="42" height="42">
</body>
</html>
59. O que pode ter no HTML ?
Elementos estruturantes
Elementos chaves
Listas e dados
Formulários
Links e imagens
60. HTML – Seção BODY
Formulários
● Formulários são usados para enviar dados para um
servidor web.
● Os elementos de um formulário permitem o usuário
entrar com informações, como campos de texto, campos
de área de texto, menus drop-down, botões radiais,
caixas de seleção, etc.
61. HTML – Seção BODY
Formulários
● A tag <form> define uma área de formulário.
<form>
...
elementos de entrada
...
</form>
62. HTML – Seção BODY
Formulários
● A tag <input> define um elemento de entrada.
● É a tag mais utilizada em formulários.
● Um elemento de entrada pode ser um campo de texto,
um checkbox, um campo de senha, um botão de radio,
um botão de envio (submit), entre outros.
● Definido pelo atributo type
63. HTML – Seção BODY
Formulários
● Campo de texto
● <input type = “text” name = “nome” />
<!DOCTYPE html>
<html>
<body>
<form action="demo_form.asp">
First name: <input type="text" name="FirstName" value="Mickey"
><br>
Last name: <input type="text" name="LastName" value="Mouse"
><br>
<input type="submit" value="Submit">
</form>
<p>Click the "Submit" button and the form-data will be sent to a
page on the server called "demo_form.asp".</p>
</body>
</html>
64. HTML – Seção BODY
Formulários - Tipos
Text
Radio
Checked
Submit
74. Inline CSS (bad)
<body>
<p style = "color:red ;"> Ola Mundo </p>
</body>
Mistura
apresentação
com estrutura
75. Inline CSS (bad)
<body>
<p style = "color:red ;"> Ola Mundo </p>
</body>
É aceito no
HTML
Mistura 4.01
strict e no
apresentação
XHTML
com estrutura
91. 2. Class
.menu { }
Seleciona todos os elementos da classe "menu"
. significa "esse é um nome de uma
classe"
92. 3. id
#rodape { }
Seleciona o elemento com id "rodape"
# significa "esse é um nome de um id"
93. 4. posição no documento
<div id ="rodape">
<p> aqui é aplicada </p>
<span>aqui nao se aplica</span>
</div>
<p>aqui nao se aplica</p>
#rodape p { color:red; }
Seleciona todos elementos "p" descendentes de
rodape.
aqui é aplicada
aqui nao se aplica
aqui nao se aplica
94. 4. posição no documento
<div id ="rodape">
<p class ="primeiro p" > aqui é aplicada </p>
<p class ="segundo p"> aqui nao se aplica </p>
</div>
<p>aqui nao se aplica</p>
p.primeiro { color:red; }
Seleciona todos elementos "p" descendentes de
rodape.
aqui é aplicada
aqui nao se aplica
aqui nao se aplica
95. 4. posição no documento
#header div.content form p em.required {}
O que estamos selecionando pelo
seletor acima ?
96. Pseudo classes
a:link {}
a:visited {}
a:hover {}
a:active {}
/* link não visitado */
/* link visitado */
/* mouseover */
/* link selecionado */
100. CSS define diversas coisas que
podemos declarar. Exemplo
font
color
background-color
border
(essas são as propriedades)
101. Cada propriedade possui um
conjunto de valores que pode de
ser aplicado.
font: 12px normal Verdana, sans-serif;
color: #123;
background-color: red;
border: 1px solid rgb(193,193,193);
104. Propriedades tem diferentes
granularidades
Por exemplo a propriedade "border" ...
border
font
border-color
border-bottom
border-width
border-left
border-top
border-right
....
font-family
font-size
font-style
font-weight
109. Unidades absolutas
Pixels (px) are unidades absolutas.
Elas são sempre do mesmo “tamanho”.
Independentemente do dispositivo
110. Unidades relativas
em é sempre relativa ao valor corrente do
tamanho da fonte.
width: 2em;
font-size: 2em;
% é relativo a diferentes coisas em
diferentes contextos
width: 50% ; 50% da largura disponível
font-size: 50% ; 50% do tamanho corrente da fonte
111. Unidades relativas
em é sempre relativa
tamanho da fonte.
width: 2em;
font-size: 2em;
HTML5
ao valor em
usaremos corrente
para fonts e
não mais px.
% é relativo a diferentes coisas em
diferentes contextos
width: 50% ; 50% da largura disponível
font-size: 50% ; 50% do tamanho corrente da fonte
do
113. Como é calculado ?
body {font-size:12 px;}
h1 {font-size: 200 % ;}
h1 a {font-size: 75%;}
114. Como é calculado ?
body {font-size:12 px;}
h1 {font-size: 200% ;}
O texto de h1 é 24 pixels (12*2)
h1 a {font-size: 75%;}
Um link dentro de um h1 é 18 pixel
(12*2*.75)
115. Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
116. Como é calculado ?
body {font-size:100%;}
h1 {font-size: .75em;}
Considerando o tamanho de 16 pixels
para o browser, temos 0.75 * 16 = 12
118. Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
119. Cascata
Como e quais declaração serão
aplicadas aos elementos;
Regras para aplicação das declarações
Especificidade
Herança
120. Usualmente, as declarações
são aplicadas na ordem de
definição
p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
121. Usualmente, as declarações
são aplicadas na ordem de
definição
ESPECIFICIDADE.
p {color: red;}
p {color: blue;}
A ultima declaração é a valida para todos
elementos “p”.
122. Usualmente, as declarações
são aplicadas na ordem de
definição
p {color: red;}
p {color: blue;}
A ultima declaração é
elementos “p”.
ESPECIFICIDADE.
A última
a valida para
declaração
mais
específica.
todos
123. <div id =“a”>
<div id =“b”>
<h1> </h1>
</div>
</div>
#a #b h1 {color:red;}
#a h1 {color: blue;}
Qual seletor é mais específico ?
Qual será a cor de h1 dentro de #b ?
124. Regras para determinar a
especificade
Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
●
125. Regras para determinar a
especificade
Elemento é 1 ponto
●Uma classe é 10 pontos
●Um id é 100 pontos
●
126. Regras para determinar a
especificade
○
○
○
Elemento é 1 ponto
Uma classe é 10 pontos
Um id é 100 pontos
p a {} = 2 pontos
p.intro a {} = 12 pontos
#about p.intro a {} = 112 pontos
128. #blog {color: red;}
<div id=“blog”>
<p>Ola</p>
</div>
O elemento “p” por ser descendente de
#blog, terá cor vermelha.
129. #blog {color: red;}
<div id=“blog”>
<p>Ola</p>
</div>
O elemento “p” por ser descendente de
Atenção,
nem
#blog, terá cor vermelha. todos os
estilos são
“herdáveis”.
135. Declarando margin ou
padding
margin: 1em;
Todas as margens = 1em
margin: 1em 2em;
Superior e inferior = 1em e direita e esquerda =
2em
margin: 1em 2em 3em 4em ;
Superior = 1em, direita = 2em, inferior = 3em e
esquerda = 4em
136. Declarando margin ou
padding
margin: 1em;
Todas as margens = 1em
margin: 1em 2em;
Superior e inferior = 1em e direita e esquerda =
2em
Movimento
do relógio
margin: 1em 2em 3em 4em ;
Superior = 1em, direita = 2em, inferior = 3em e
esquerda = 4em
137. Fluxo (“propriedade display”)
Em linha (inline)
Mostra na mesma linha
Ex: <span>, <a>, <input>, <img> ..
Nível de bloco (block)
Mostra em uma linha posterior
Ex: <h1>,<p>, <ul>, <div>