Microsoft Official Course

Módulo 1

Visão geral do HTML e CSS

Visão geral do módulo

• Visão geral do HTML

• Visão geral do CSS
• Criando um aplicativo Web usando o Visual Studio
2012
Lição 1: Visão geral do HTML

• A estrutura de uma página HTML

• Tags, elementos, atributos e conteúdo
• Exibindo texto em HTML
• Exibindo imagens e lincando documentos em
HTML
• Coletando a entrada do usuário usando
formulários em HTML
• Demonstração: Criando um Formulário de Contato
simples
• Anexar Scripts a uma página HTML
A estrutura de uma página HTML

• Todas as páginas HTML têm a mesma estrutura

• Declaração DOCTYPE
• Contendo da seção HTML:
• Header
• Body

• Cada versão de HTML tem sua própria declaração

DOCTYPE
• O navegador usa a declaração DOCTYPE para
determinar como interpretar a marcação HTML
• Para páginas HTML5, especifique um DOCTYPE de html
Tags, elementos, atributos e conteúdo

• Elementos HTML definem a estrutura e a

semântica de conteúdo em uma página web
• Elementos identificam seu conteúdo cercando-
os com uma tag início e uma tag final
• Os elementos podem ser aninhadas:
<p>
<strong>Elementos</strong> consistem de
<strong>conteúdo</strong> marcado por uma
tag <em>início</em> e uma tag<em>final</em>.
</p>

• Use atributos para fornecer informações adicionais

sobre o conteúdo de um elemento
Exibindo texto em HTML

Texto em HTML pode ser marcado:

• Como cabeçalhos e parágrafos
<h1>Uma introdução ao HTML</h1>
<p>Neste módulo, nós olharemos a história do HTML e CSS.</p>
<h2>No começo</h2>
<p>WorldWideWeb foi criado por Sir Tim Berners-Lee no CERN. </p>

• Com ênfase
<strong>Enfatizar</strong> é dar peso extra para (a comunicação);
<em>" Seu gesto enfatizou suas palavras"</em>

• Nas listas <ul>

<li>Notepad</li>
<li>Textmate</li>
<li>Visual Studio</li>
</ul>
Exibindo imagens e lincando documentos em HTML

• Use a tag <img> para exibir uma imagem

• O atributo src especifica a URL da fonte da imagem:

<img src="logo.jpg" alt="Meu logotipo do site"

height="100" width="100" />

• Use a tag <a> para definir um link

• O atributo href especifica o destino do link:

<a href="default.html" alt="Página Inicial">Início</a>

Coletando a entrada do usuário usando
formulários em HTML

• O elemento <form> fornece um mecanismo para a

obtenção de entrada do usuário
• O atributo action especifica para
onde os dados serão enviados
• O atributo method especifica como
os dados serão enviados
• Muitos tipos diferentes de entrada
estão disponíveis
Demonstração: Criando um
Formulário de Contato simples

Nesta demonstração, você vai ver como:

• Criar uma página HTML
• Adicionar conteúdo à página
• Adicionar um formulário com controles de entrada
• Ver a página
Anexar Scripts a uma página HTML

• HTML é estático, mas as páginas pode usar

JavaScript para adicionar comportamento
dinâmico
• Use o elemento <script> para especificar o local
do código JavaScript:
<script type="text/javascript" src="alertme.js"></script>

• A ordem dos elementos <script> é importante

• Garanta que os objetos e funções estejam ativos no
escopo antes de serem usados
• Use o elemento <noscript> para alertar aos
usuários com navegadores que tenham script
desativado.
Lição 2: Visão geral do CSS

• Visão geral da sintaxe CSS

• Como Seletores CSS trabalham
• Como a herança HTML e o CSS afetam o estilo
• Adicionando estilos em uma página HTML
Visão geral da sintaxe CSS

• Todas as regras de CSS tem a mesma sintaxe:

selector {
property1:value;
property2:value;
..
propertyN:value;
}

• Os comentários são
/* Targets level 1 headings */
delimitados por /* ... */ h1 {
font-size: 42px;
color: pink;
font-family: 'Segoe UI';
}
Como Seletores CSS trabalham

• Há três seletores CSS básicos

• O seletor de elemento: h2{}
• O seletor de classe: .myClass {}
• O seletor de id: #thisId {}

• Seletores CSS podem ser combinados para criar

regras mais específicas
• O seletor curinga * retorna o conjunto de todos os
elementos
• Utilize [...] para refinar seletores baseados em
valores de atributos
Como a herança HTML e o CSS afetam o estilo

• A herança HTML e o mecanismo de cascata CSS

determinam como navegadores aplicam regras de
estilo

• A herança HTML determina quais propriedades de

estilo de um elemento herdam de seu pai

• O mecanismo de cascata determina como

propriedades de estilo são aplicadas quando as
regras conflitantes se aplicam ao mesmo elemento
 Adicionando estilos em uma página HTML

• Use o atributo style de um

<p style="color:blue;">
elemento para definir some text </p>
estilos específicos para esse
elemento:

• Use o elemento <style> no <style type="text/css">

p { color: blue; }
<head> para incluir estilos </style>
específicos para uma página:

• Use o elemento <link> para referenciar uma folha

de estilo externa:
<link rel="stylesheet" type="text/css" href="mystyles.css" media="screen">
Lição 3: Criando um aplicativo Web usando o Visual
Studio 2012

• Desenvolvimento de aplicações Web usando o

Visual Studio 2012
• Demonstração: Criando um site usando o Visual
Studio 2012
• Usando o Internet Explorer F12 Developer Tools
• Demonstração: Explorando o Aplicativo Contoso
Conferência
Desenvolvimento de aplicações Web usando o Visual
Studio 2012

• Visual Studio 2012 fornece ferramentas para:

• Criar um projeto web application, e adicionar pastas
para estruturar o conteúdo
• Debugging de código JavaScript, examinar e modificar
variáveis​​, e ver a pilha de chamadas
• Implantar um web application para um servidor web ou
para a nuvem

• Recursos do Visual Studio 2012 incluem:

• Suporte completo para HTML5
• IntelliSense para código JavaScript
• Suporte para propriedades CSS3 e valores
• CSS Color Picker
Demonstração: Criando um site usando o Visual
Studio 2012

Nesta demonstração, você vai ver como:

• Criar um projeto de Web Site
• Adicionar e editar arquivos no Projeto
• Executar o Web Application
• Modificar a aplicação ao vivo
 Usando o Internet Explorer F12 Developer Tools

As ferramentas de desenvolvimento F12 permite aos

desenvolvedores (F12 Developer Tools):
• Inspecionar e validar HTML e CSS
• Executar e depurar o código JavaScript
• Página de perfil
com os tempos
de carga
• Ver uma página
como se
estivesse sendo
vista em
qualquer versão
do Internet
Explorer V7.0
em diante
Demonstração: Explorando o Aplicativo Contoso
Conferência

Nesta demonstração, você vai aprender a abrir o

aplicativo Conferência Contoso no Visual Studio, e
como executar o aplicativo.
Laboratório: Explorando o Aplicativo Conferência
Contoso

• Exercício 1: Explorando o Aplicativo Conferência

Contoso
• Exercício 2: Examinando e modificando o
aplicativo Conferência Contoso

Informações de Logon
• Virtual Machines: 20480B-SEA-DEV11
• User Name: Student
• Password: Pa$$w0rd

Estimated Time: 30 minutes

Cenário do Laboratório

• ContosoConf é uma conferência técnica anual que

descreve as mais recentes ferramentas e técnicas para a
construção de aplicações web HTML5. Os organizadores
criaram um site para apoiar a conferência, utilizando as
mesmas tecnologias que a conferência mostra.

• Você é um desenvolvedor que cria sites usando HTML,

CSS e JavaScript, e que teve acesso ao código do web
site para a última conferência. Você decide dar uma
olhada neste aplicativo web para ver como ele funciona
e como o desenvolvedor usou o Visual Studio 2012 para
criá-lo.
Module Review and Takeaways

• Review Question(s)