Apostila, Programação e Desenvolvimento Web

Curso Tecnologia da Informação – CCPA 2023
Prof. Rodolpho Andreazza Marinho - rodolpho.marinho@fatec.sp.gov.br
Programação e Desenvolvimento Web

1. Hypertext Markup Language (HTML)
1.1 Introdução ao HTML
HTML significa Hypertext Markup Language e é uma linguagem de marcação usada para
criar páginas da web. HTML é a espinha dorsal da web e é usado em conjunto com outras
tecnologias como CSS (Cascading Style Sheets) e JavaScript para criar páginas da web
interativas e atraentes.
Aqui estão os passos básicos para começar com HTML:

1. Crie um arquivo HTML: O primeiro passo é criar um arquivo HTML. Você pode
usar um editor de texto simples como o Bloco de Notas ou um editor mais
avançado como o Visual Studio Code ou o Sublime Text.
2. Estrutura básica do HTML: Todo documento HTML começa com uma estrutura
básica. Aqui está um exemplo:
<!DOCTYPE html>
<html>
<head>
<title>Minha primeira página</title>
</head>
<body>
<h1>Bem-vindo ao meu site!</h1>
<p>Este é um exemplo de parágrafo.</p>
</body>
</html>
Aqui estão algumas coisas importantes para observar nesta estrutura:
<!DOCTYPE html> define a versão do HTML que está sendo usada.

<html> é o elemento raiz do documento.
<head> contém informações sobre o documento, como o título da página.
<title> define o título da página, que aparece na guia do navegador.
<body> contém o conteúdo da página, como cabeçalhos, parágrafos, imagens e assim
por diante.
1
1.2 Salvar e visualizar as páginas

Para salvar um arquivo HTML no Notepad e depois abri-lo em um navegador, siga estes
passos:
Abra o Notepad no seu computador. Você pode fazer isso pesquisando por "Notepad"
no menu Iniciar (Windows) ou usando o Spotlight (Mac).
Crie o seu arquivo HTML no Notepad, digitando o código HTML no espaço em branco.
Certifique-se de salvar o arquivo com a extensão ".html" para que o navegador possa
reconhecê-lo como uma página web.
Para salvar o arquivo HTML, clique em "Arquivo" na barra de menu do Notepad e

selecione "Salvar como". Escolha um nome para o arquivo e adicione a extensão ".html"
no final do nome. Certifique-se de escolher "Todos os arquivos" no menu suspenso
"Tipo" e salve o arquivo em um local fácil de lembrar, como a área de trabalho.
Agora que o arquivo HTML está salvo, abra o seu navegador da web preferido. Os
navegadores mais populares são o Google Chrome, Mozilla Firefox, Microsoft Edge,
Safari e Opera.
Na barra de menu do navegador, clique em "Arquivo" e selecione "Abrir arquivo" ou use

a combinação de teclas "Ctrl + O" (Windows) ou "Command + O" (Mac).
Na janela "Abrir Arquivo", navegue até o local onde o seu arquivo HTML está salvo,
selecione-o e clique em "Abrir". O seu arquivo HTML agora será aberto em uma nova
aba ou janela do navegador, dependendo da configuração do seu navegador.
Se você preferir, também pode abrir o arquivo HTML simplesmente arrastando e

soltando o arquivo na janela do seu navegador.
Lembre-se de que, se o seu arquivo HTML incluir referências a outros arquivos, como
folhas de estilo CSS ou scripts JavaScript, esses arquivos também devem estar presentes
no mesmo diretório que o arquivo HTML e ter os caminhos corretos especificados no
código HTML para que sejam exibidos corretamente no navegador.
2
1.3 Estrutura da página:

A seguir veremos com mais detalhes alguns elementos das páginas HTML:
<!DOCTYPE html>: Este elemento declara o tipo de documento HTML. Sempre aparece
no início do documento e é necessário para garantir que o navegador interprete
corretamente o código HTML.
<html></html>: Este elemento envolve todo o conteúdo HTML da sua página. É o

elemento raiz do documento e contém todos os outros elementos.
<head></head>: Este elemento contém informações sobre o documento, como o título

da página, links para arquivos CSS e JavaScript, meta tags para SEO, etc. O conteúdo do
elemento head não é exibido na página web.
<title></title>: Este elemento define o título da página que é exibido na aba do

navegador.
<body></body>: Este elemento contém todo o conteúdo visível da sua página web,
como texto, imagens, links, etc.
<h1></h1> até <h6></h6>: Estes elementos são usados para definir os títulos e
subtítulos na página. <h1> é o título mais importante e <h6> é o menos importante.
<p></p>: Este elemento é usado para definir um parágrafo de texto.
<a></a>: Este elemento é usado para criar um link para outra página web ou para uma
seção diferente da mesma página. O atributo href é usado para especificar o URL do link.
<img>: Este elemento é usado para exibir uma imagem na página. O atributo src é usado
para especificar o caminho para a imagem.
<ul></ul> e <li></li>: Estes elementos são usados para criar listas não ordenadas (com
marcadores) na página.
3
<ol></ol> e <li></li>: Estes elementos são usados para criar listas ordenadas
(numeradas) na página.
<div></div>: Este elemento é usado para agrupar outros elementos HTML e aplicar
estilos CSS a eles.
1.4 Classes:
Classes em HTML são atributos que podem ser adicionados a elementos HTML para
agrupá-los com outros elementos que compartilham a mesma classe. Uma classe é
definida usando o atributo class e pode ser qualquer palavra que você escolher.
Aqui está um exemplo simples de como usar classes em HTML:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de classes em HTML</title>
<style>
.vermelho {
color: red;
}
.azul {
color: blue;
}
</style>
</head>
<body>
<h1 class="vermelho">Este é um título vermelho</h1>
<p class="azul">Este é um parágrafo azul</p>
<p>Este é um parágrafo comum</p>
</body>
</html>
Neste exemplo, criamos duas classes chamadas "vermelho" e "azul" e definimos estilos
CSS diferentes para cada uma delas. Em seguida, aplicamos essas classes a elementos
HTML usando o atributo class. O título <h1> é definido como "vermelho", então ele é
exibido em vermelho, enquanto o parágrafo <p> é definido como "azul", então ele é
exibido em azul.
As classes em HTML são úteis porque permitem que você aplique estilos CSS específicos
a grupos de elementos sem precisar especificar um ID exclusivo para cada um. Além
disso, você pode usar a mesma classe em vários elementos em sua página, permitindo
que você os agrupe e estilize de forma consistente.
4
Em resumo, as classes em HTML são uma maneira de agrupar elementos com o mesmo
estilo ou comportamento e são úteis para manter a consistência visual em toda a página.
1.5 CSS e ASP.NET:

CSS e ASP.NET são duas tecnologias que podem ser usadas juntas com HTML para criar
sites dinâmicos e estilizados. Aqui está uma breve explicação de como elas funcionam
juntas:
CSS é uma linguagem de estilo usada para definir a aparência e o layout de elementos
HTML em uma página da web. Você pode usar CSS para aplicar estilos visuais a
elementos individuais ou a grupos de elementos em sua página, tornando mais fácil
manter uma aparência consistente em toda a sua página. Para usar CSS em sua página
HTML, você pode incluir uma seção de estilo no cabeçalho da página usando o elemento
<style>, ou pode vincular um arquivo CSS externo à sua página HTML usando o elemento
<link>.
ASP.NET é um framework de desenvolvimento web da Microsoft que permite criar sites

e aplicativos da web dinâmicos e interativos usando várias linguagens de programação,
incluindo C# e Visual Basic. Você pode usar ASP.NET para criar páginas dinâmicas que se
ajustam ao comportamento do usuário ou que exibem dados de bancos de dados,
serviços web ou outras fontes de dados.
Para usar CSS e ASP.NET juntos em uma página HTML, você pode usar o framework de
controle de servidor ASP.NET para adicionar classes CSS dinamicamente a elementos
HTML. Por exemplo, você pode criar um controle de servidor ASP.NET que verifica o
estado de um usuário e adiciona uma classe CSS diferente a elementos HTML com base
nesse estado.
Além disso, você pode usar a vinculação de dados do ASP.NET para exibir dados
dinamicamente em sua página HTML e aplicar estilos CSS a esses dados. Por exemplo,
você pode vincular dados de um banco de dados a uma tabela HTML e aplicar estilos CSS
diferentes a células individuais com base nos valores dos dados.
Em resumo, CSS e ASP.NET são tecnologias poderosas que podem ser usadas em
conjunto com HTML para criar sites e aplicativos da web dinâmicos e estilizados. Usando
o ASP.NET, você pode adicionar classes CSS dinamicamente a elementos HTML e vincular
dados a elementos HTML para aplicar estilos CSS personalizados e exibir dados
dinamicamente.
5
1.6 Exemplo Prático:

Exemplo básico de uma página inicial usando HTML e CSS:
(ATENÇÃO, O CÓDIGO NESTA PÁGINA E NA SEGUINTE SÃO UM SÓ ARQUIVO HTML)
<!DOCTYPE html>
<html>
<head>
<title>Minha Página Inicial</title>
<style>
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
font-size: 2em;
}
nav {
background-color: #f2f2f2;
padding: 10px;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
justify-content: space-between;
}
nav li {
margin: 0 5px;
}
nav a {
color: #333;
text-decoration: none;
padding: 5px;
}
nav a:hover {
color: #fff;
}
section {
margin: 20px;
}
6
footer {
color: #fff;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>Minha Página Inicial</h1>
</header>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Sobre</a></li>
<li><a href="#">Contato</a></li>
</ul>
</nav>
<section>
<h2>Bem-vindo à minha página inicial!</h2>
<p>Esta é uma página de exemplo que demonstra como
criar uma página inicial básica usando HTML e CSS.</p>
</section>
<footer>
© 2023 Minha Empresa, Todos os direitos
reservados.
</footer>
</body>
</html>
Neste exemplo, eu criei uma página HTML básica que inclui um cabeçalho <header> com
um título <h1>, um menu de navegação <nav> com links para outras páginas, uma seção
<section> com conteúdo da página e um rodapé <footer> com informações de direitos
autorais. Para estilizar a página, eu usei CSS para definir as cores, tamanhos de fonte,
espaçamento e outros estilos visuais.
Este é apenas um exemplo simples de como criar uma página inicial básica usando HTML
e CSS, mas espero que isso ajude você a começar a criar suas próprias páginas da web!
7
1.7 Estilos com CSS:

No exemplo prático você pode ter reparado no <style><style>, ele é um elemento
do CSS que nos permite definir “estilos”.
CSS Styles são usados para definir a aparência e o layout de uma página da web. Com
CSS, você pode controlar a cor do texto, o tamanho da fonte, o espaçamento entre as
palavras, a cor do plano de fundo, a posição dos elementos na página e muito mais.
Os estilos CSS podem ser aplicados a elementos HTML de várias maneiras. A maneira
mais comum é usar o seletor de elemento, que é o nome do elemento HTML (por
exemplo, "p" para parágrafos ou "h1" para títulos). Por exemplo, para definir a cor do
texto de todos os parágrafos em uma página, você pode usar o seguinte estilo:
p {
color: red;
}
Além do seletor de elemento, há muitos outros tipos de seletores CSS que permitem
direcionar elementos mais precisamente. Por exemplo, você pode usar um seletor de
classe para aplicar um estilo a todos os elementos com uma determinada classe (por
exemplo, ".destaque") ou um seletor de ID para aplicar um estilo a um único elemento
com um determinado ID (por exemplo, "#cabecalho").
Os estilos CSS também podem ser definidos em arquivos separados e, em seguida,

vinculados a uma página HTML usando a tag <link> no <head> da página. Isso permite
que você mantenha seus estilos separados do conteúdo da página e os reutilize em
várias páginas.
Aqui está um exemplo de alguns estilos CSS simples aplicados a um elemento HTML:
<!DOCTYPE html>
<html>
<head>
<title>Exemplo de CSS</title>
<style>
/* Define um estilo para todos os parágrafos */
p {
color: blue;
font-size: 16px;
margin-bottom: 10px;
}
8
/* Define um estilo para todos os links */

a {
color: red;
text-decoration: none;
}
/* Define um estilo para uma classe específica */

.destaque {
background-color: yellow;
}
</style>
</head>
<body>
<h1>Exemplo de CSS</h1>
<p>Este é um parágrafo comum.</p>
<p class="destaque">Este é um parágrafo com a classe
"destaque".</p>
<p>Este é outro parágrafo comum. <a href="#">Este é um
link</a>.</p>
</body>
</html>
Os estilos, ou styles, para os parágrafos definem a cor do texto, o tamanho da fonte e a

margem inferior. Os estilos para links definem a cor do texto e removem a sublinhado
padrão. O estilo para a classe "destaque" define a cor de fundo para o parágrafo com a
classe "destaque".
1.8 Como utilizar o ASP.NET

ASP.NET é um framework da Microsoft que permite a criação de aplicativos web usando
várias linguagens de programação, como C# e Visual Basic. Ele usa o modelo de
programação de servidor, em que o código é executado no servidor e o resultado é
enviado para o navegador do usuário.
Para começar a usar o ASP.NET, você precisará de um ambiente de desenvolvimento

integrado (IDE), como o Visual Studio. Com o Visual Studio, você pode criar um novo
projeto ASP.NET e selecionar o modelo que deseja usar, como aplicativo web ou API web.
Uma vez criado o projeto, você pode começar a adicionar páginas e recursos à sua
aplicação web. As páginas ASP.NET geralmente têm a extensão ".aspx" e contêm
elementos HTML e código do lado do servidor. O código do lado do servidor é escrito em
C# ou Visual Basic e pode ser usado para executar operações como consulta de banco
de dados, validação de entrada de usuário e geração dinâmica de conteúdo da página.
9
Além das páginas ASP.NET, você também pode adicionar arquivos de classe e recursos à
sua aplicação web. Os arquivos de classe contêm o código do lado do servidor que pode
ser reutilizado em várias páginas e recursos, como imagens e folhas de estilo CSS, podem
ser usados para personalizar a aparência da sua aplicação.
O ASP.NET também inclui recursos avançados, como suporte para autenticação e

autorização de usuários, gerenciamento de sessão e suporte para serviços web.
Em resumo, o ASP.NET é uma plataforma poderosa para a criação de aplicativos web com
recursos avançados e integração com outros serviços e tecnologias da Microsoft. Para
começar a usar o ASP.NET, você precisará de um ambiente de desenvolvimento integrado
(IDE) e um conhecimento básico de programação em C# ou Visual Basic.
2. C#
C# é uma linguagem de programação moderna e orientada a objetos, criada pela
Microsoft para desenvolvimento de aplicativos para Windows e .NET. Ela é uma das
linguagens mais populares do mundo e é amplamente utilizada em várias áreas,
incluindo jogos, aplicativos de desktop, serviços web e dispositivos móveis.
A sintaxe do C# é semelhante a outras linguagens orientadas a objetos, como Java e C++.

O C# é fortemente tipado, o que significa que todas as variáveis devem ser declaradas
com um tipo específico e que os tipos são verificados em tempo de compilação. Ele
também suporta a coleta de lixo automática, o que significa que o próprio runtime
gerencia a memória alocada para objetos.
O C# tem uma ampla biblioteca de classes e recursos que podem ser usados para criar
aplicativos eficientes e de alto desempenho. Ele também oferece recursos avançados,
como suporte para programação assíncrona, suporte para LINQ (Language Integrated
Query) e recursos de programação paralela.
Para começar a programar em C#, você precisará de um ambiente de desenvolvimento

integrado (IDE), como o Visual Studio, e um conhecimento básico de programação
orientada a objetos. Você pode começar aprendendo sobre conceitos básicos, como
variáveis, tipos de dados, operadores e estruturas de controle de fluxo. Em seguida, você
pode passar para conceitos mais avançados, como classes, objetos, herança,
polimorfismo e programação assíncrona.
10
Você pode baixar o Visual Studio no site da Microsoft:

https://visualstudio.microsoft.com/pt-br/downloads/
11

Apostila, Programação e Desenvolvimento Web

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

Apostila, Programação e Desenvolvimento Web

Enviado por

Direitos autorais:

Formatos disponíveis

Curso Tecnologia da Informação – CCPA 2023

Prof. Rodolpho Andreazza Marinho - rodolpho.marinho@fatec.sp.gov.br

Programação e Desenvolvimento Web

Aqui estão os passos básicos para começar com HTML:

Aqui estão algumas coisas importantes para observar nesta estrutura:

<!DOCTYPE html> define a versão do HTML que está sendo usada.

1.2 Salvar e visualizar as páginas

Para salvar o arquivo HTML, clique em "Arquivo" na barra de menu do Notepad e

Na barra de menu do navegador, clique em "Arquivo" e selecione "Abrir arquivo" ou use

Se você preferir, também pode abrir o arquivo HTML simplesmente arrastando e

1.3 Estrutura da página:

<html></html>: Este elemento envolve todo o conteúdo HTML da sua página. É o

<head></head>: Este elemento contém informações sobre o documento, como o título

<title></title>: Este elemento define o título da página que é exibido na aba do

<p></p>: Este elemento é usado para definir um parágrafo de texto.

1.5 CSS e ASP.NET:

ASP.NET é um framework de desenvolvimento web da Microsoft que permite criar sites

1.6 Exemplo Prático:

1.7 Estilos com CSS:

Os estilos CSS também podem ser definidos em arquivos separados e, em seguida,

/* Define um estilo para todos os links */

/* Define um estilo para uma classe específica */

Os estilos, ou styles, para os parágrafos definem a cor do texto, o tamanho da fonte e a

1.8 Como utilizar o ASP.NET

Para começar a usar o ASP.NET, você precisará de um ambiente de desenvolvimento

O ASP.NET também inclui recursos avançados, como suporte para autenticação e

A sintaxe do C# é semelhante a outras linguagens orientadas a objetos, como Java e C++.

Para começar a programar em C#, você precisará de um ambiente de desenvolvimento

Você pode baixar o Visual Studio no site da Microsoft:

Você também pode gostar