Fundamentos de HTML, CSS e JavaScript
Traduzido por
ScribdTranslationsFundamentos de HTML, CSS e JavaScript
Traduzido por
ScribdTranslationsApresentação em PowerPoint
em
Treinamento Industrial
Fundamentos de Programação com HTML + CSS
+ Javascript
Submetido a:- Submitted By:-
Sr. Papendra Kumar Abhishek Kumar
Professor Assistente 180201
Ciência da Computação e Engenharia CSE- 4thano
Metas
Introdução às tecnologias da web:
● HTML para criar o documento
estrutura e conteúdo
● O CSS controla o aspecto visual
● JavaScript para interatividade
Dentro de um navegador
Os navegadores têm diferenças muito distintas
partes.
Estamos interessados em dois deles:
● o Motor de Renderização (em
responsabilidade de transformar nosso
HTML+CSS em um visual
imagem).
● O Interpretador de Javascript
(também conhecido como VM), em
carga de executar o
Código Javascript.
Tecnologias
● HTML
● CSS
● Javascript
HTML
HTML significa Linguagem de Marcação de Hipertexto. <html>
<cabeça>
O HTML nos permite construir a parte visível de um site. </cabeça>
<body>
<div>
HTML isNOTa programming language, it’s a markup language,
<p>Oi</p>
o que significa que seu propósito é dar estrutura ao conteúdo do </div>
site </body>
</html>
É uma série de tags aninhadas (é um subconjunto de XML) que contêm tudo
as informações do site (como textos, imagens e vídeos). Aqui está um
exemplo de tags:
<title>This is a title</title>
O HTML define a estrutura da página. Um website pode ter vários
HTMLs para diferentes páginas.
HTML: regras básicas
Algumas regras sobre HTML:
● Utiliza a sintaxe XML (tags com atributos, pode conter outras tags).
<tag_name>content</tag_name>
● Ele armazena todas as informações que devem ser mostradas ao usuário.
● Existem diferentes elementos HTML para diferentes tipos de informação e comportamento.
● As informações são armazenadas em uma estrutura semelhante a uma árvore (nós que contêm nós dentro) chamada
DOM (Modelo de Objeto de Documento).
● Isso dá ao documento alguma estrutura semântica (por exemplo, este é um título, esta é uma seção, este é
uma forma) que é útil para os computadores entenderem o conteúdo dos sites.
● Não deve conter informações relacionadas a como deve ser exibido (essa informação
pertence ao CSS), então nenhuma informação de cor, tamanho da fonte, posição, etc.
HTML: exemplo de sintaxe
Tag name
atributos
<divid="main"> comentário
<!-- este é um comentário -->
etiqueta de texto
Este é um texto sem uma etiqueta.
<button class="mini">aperte-me</button>
<img src="[Link]"/> tag de auto-fechamento
</div>
HTML: tags principais
Embora haja muitas tags na especificação HTML, 99% da web utiliza um subconjunto de
Tags HTML com menos de 10 tags, as mais importantes são:
● <div>: um contêiner, geralmente representa uma área retangular com informações dentro.
● <img/>: an image
● <a>: a clickable link to go to another URL
● <p>: um parágrafo de texto
● <h1>: um título (h2,h3,h4 são títulos de menor importância)
● um widget para permitir que o usuário insira informações
● <style>: to insert CSS rules
● <script>: para executar Javascript
● <span>: uma tag nula (não faz nada)
HTML: envolvendo as informações
Usamos tags HTML para envolver diferentes informações em nosso site.
The more structure has the information, the easier will be to access it and present it.
Podemos mudar a forma como a informação é representada na tela dependendo das tags
onde está contido, então não devemos nos preocupar em usar muitas tags.
Tecnologias
● HTML
● CSS
● Javascript
CSS
Permite especificar como apresentar (renderizar) as informações do documento armazenadas no HTML.
Permite controlar todos os aspectos da visualização e algumas outras funcionalidades:
● Colors: content, background, borders
● Margins: interior margin, exterior margin
● Posição: onde colocá-lo
● Sizes: width, height
● Behaviour: changes on mouse over
exemplo de CSS
* {
color: azul;/*um comentário */
margin: 10px;
font: 14pxTahoma;
}
Isso mudará todas as tags na minha web ('*' significa todas) para ficarem com a cor azul usando a fonte Tahoma com
14px, e deixando uma margem de 10px ao redor.
Campos CSS
Here is a list of the most common CSS fields and an example:
● color: #FF0000; red; rgba(255,00,100,1.0);//different ways to specify colors
● background-color: red;
● imagem-de-fundo: url('[Link]');
● fonte: 18px 'Tahoma';
● borda: 2px sólida preta;
● borda-topo: 2px sólido vermelho;
● border-radius: 2px; //para remover os cantos e torná-los mais arredondados
● margem: 10px; //distância da borda para os elementos externos
● preenchimento: 2px; //distância da borda aos elementos internos
● largura: 100%; 300px; 1.3em; //muitas maneiras diferentes de especificar distâncias
● height: 200px;
● texto-alinhado: centro;
● sombra-da-caixa: 3px 3px 5px preto;
● cursor: ponteiro;
● exibir:inline-block;
● transbordar: oculto;
CSS como adicioná-lo
Existem três maneiras de adicionar regras CSS ao seu site:
● Inserting the code inside a style tag
<style>
p { cor: azul }
</style>
● Referencing an external CSS file
<link href="[Link]" rel="stylesheet" />
● Usando o atributo estilo em uma tag
<p style="color: blue; margin: 10px">
Seletores CSS
E se quisermos mudar uma tag específica (não todas as tags do mesmo tipo).
Podemos especificar seletores mais precisos além do nome da tag. Por exemplo, por classe
ou id:
[Link] {
color: red;
}
Isso afetará apenas a tag <pclass="intro">
Seletores CSS
Você também pode especificar tags pelo seu contexto, por exemplo: tags que estão dentro de tags que correspondem a um
seletor. Basta separar os seletores por um espaço:
div#[Link] { ... }
Isso afetará as tags p da classe intro que estão dentro da tag div do id main.
<div id="main">
<p class="intro">....</p>← Afeta este aqui
</div>
<p class="intro">....</p>← mas não este
Tecnologias
● HTML
● CSS
● JavaScript
Javascript
Uma linguagem de programação regular, fácil de começar, difícil de dominar.
Permite dar alguma interatividade aos elementos na web.
Sintaxe semelhante ao C ou Java, mas sem tipos.
Você pode alterar o conteúdo do HTML ou o CSS aplicado a um elemento.
Você pode até enviar ou recuperar informações da internet para atualizar o conteúdo
da web sem recarregar a página.
Javascript: Sintaxe
Muito semelhante ao C++ ou Java, mas muito mais simples.
varmy_number = 10;//isto é um comentário
var my_string ="hello";
var my_array = [10,20,"name",true];
var my_object = { name:"javi", city:"Barcelona" };
função dizer( str )
{
for(var i = 0; i < 10; ++i)
[Link](" diga: " + str );
}
Exemplo de Javascript
<html>
<corpo>
<h1>Este é um título</h1>
<script>
var titulo = [Link]("h1");
[Link] ="This is another title";
</script>
</body>
</html>
Exemplo de um site
HTML no [Link] Javascript [Link]
<link href="[Link]" rel="stylesheet"/> //buscar o botão do DOM
<h1>Bem-vindo</h1> varbutton=[Link]("botão");
<p>
<button> Clique em mim </button> //anexar e um evento quando o usuário clicar nele
</p> [Link]("clique", minhaFuncao);
<script src="[Link]"/>
//crie a função que será chamada quando o
o botão é pressionado
CSS [Link]
função minhaFunção()
{
h1 { cor: #333; } //isso mostra uma janela pop-up
botão{ alert("botão clicado!");
borda: 2px sólida #AAA; }
cor de fundo: #555;
}
Mais informações
HTML + CSS:
[Link]
Selectors: [Link]
Aprender Javascript.
[Link]
Aprender jQuery:
[Link]
O Fim