0% acharam este documento útil (0 voto)

10 visualizações

HTML5 CSS3

O documento descreve a evolução da Internet e da World Wide Web, desde a criação da ARPANET até as linguagens atuais como HTML, CSS e JavaScript. É abordada a estrutura básica do HTML e exemplos de tags comuns.

Enviado por

mariapromocoesonline

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

10 visualizações

HTML5 CSS3

Enviado por

mariapromocoesonline

Direitos autorais

Formatos disponíveis

Baixe no formato PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 80

TECNOLOGIAS MULTIMÉDIA

LICENCIATURA EM MULTIMÉDIA
JOÃO DONGA
ESMAD/IPP
CRIAÇÃO DE WEBSITES
INTERNET

A INTERNET SURGE NA SEQUÊNCIA DA

GUERRA FRIA ENTRE OS EUA E A UNIÃO
SOVIÉTICA
ARPANET

A DARPA (DEFENCE ADVANCED RESEARCH PROJECTS

AGENCY) CRIA UMA REDE, A ARPANET QUE PERMITA
A TROCA DE INFORMAÇÕES..
FUNCIONAVA ATRAVÉS DE UM SISTEMA DE
TRANSMISSÃO DE PACOTES
EM 29/10/1969 É ENVIADO O PRIMEIRO EMAIL. O
TEXTO ERA LOGIN MAS APÓS A LETRA “O” DEIXA DE
FUNCIONAR.
ARPANET

A ARPANET NA DÉCADA DE 70 DIVIDE-SE ENTRE DUAS

REDES. A MILNET PARA USO MILITARY E A ARPANET
PARA INVESTIGAÇÃO E OUTROS USOS NÃO
MILITARES.
SURGE A NECESSIDADE DE CRIAR STANDARDS E
EM 1973 COMEÇA ESSE TRABALHO
DESENVOLVENDO-SE UM PROTOCOLO DESIGNADO
INTERNETWORKING DO QUAL NASCE O TERMO
INTERNET
INTERNET

O TCP/IP PASSA A SER O

ÚNICO PROTOCOLO
APROVADO PELA ARPANET
EM 1 DE JANEIRO DE 1983
INTERNET

• Transmissão de informação
• https://www.submarinecablemap.com

• TCP/IP
• Roteadores
• Cliente/Servidor/Pacotes/Dados
INTERNET

• Endereço IP
• IPv4 (32 bits)
• IPv6 (128 bits)

• Servidor DNS (Domain Name

Server)

• https://www.iplocation.net
INTERNET

• Dominio

• URL (Uniform Resource Locater)

• TLD (Top Level Domain).
• GTLD: São TLDs genéricos, sem indicação de país. Alguns dos domínios
genéricos são .com, .net, .gov, .org, .io, .info, .online, .store, etc.
• ccTLD: São TLDs com designação do país (coutry code). Alguns dos domínios
desse tipo são .com.br, .edu.us, .co.fr, .jp, .es, etc.
INTERNET

• Hospedagem
WORLD WIDE
WEB?
• Tim Berners-Lee do CERN
desenvolveu a World Wide
Web, a linguagem HTML e o
protocol HTTP em 1992
WORLD WIDE WEB?

• Primeiro browser MOSAIC (1992-1997)

• Netscape lança HTTPS e browser (1994-2008)
COMO FUNCIONA A WORLD WIDE WEB?

• É uma grande rede de computadores interligados e capazes de compartilhar informações e recursos.

• Para disponibilizar de modo mais acessível são criadas páginas de hypertexto para que o utilizador
possa interagir com estas informações.
• Hipertexto são conjuntos de elementos ou nós ligados por conexões. Estes elementos podem ser palavras,
imagens, vídeos, áudio, documentos dentre outros.
• Segundo a World Wide Web Consortium (W3C) a Web é baseada em 3 pilares:
• Esquema de nomes para localização (URL)
• Protocolo de acesso (HTTP)
• Linguagem de Hypertexto (HTML)
COMO FUNCIONA A WORLD WIDE WEB?
LINGUAGENS WEB

• Quando trabalhamos na criação de projetos de

ambientes web usamos mais de uma linguagem
onde cada uma tem um papel a cumprir.
• HTML -> Conteúdo
• CSS –> Estilo
• JavaScript -> Interactividade
HTML

• Hypertext Markup Language (Linguagem de Marcação de Hipertexo)

• Linguagem Interpretada por um Browser
• Define o formato do documento e as ligações com outros documentos
HTML

• Desenvolvido originalmente por Tim Berners-Lee

• Entre 1993 e 1995, o HTML ganhou as versões HTML+, HTML2.0 e HTML3.0
• Ainda não era um padrão;
• Em 1997 o W3C criou a versão 3.2
• A partir daí HTML se tornou um padrão
• Em 1999 saiu a especificação do HTML4.
ESTRUTURA DO HTML5

• A estrutura básica do HTML é relativamente simples. Utilizam-se marcadores chamados de tag’s.

Cada tag é representada da seguinte forma:
• <html> - Tag de abertura
• </html> - Tag de fechamento

• A maioria das tags é aberta e fechada como mostrado acima, com o conteúdo entre as duas.
ESTRUTURA DO HTML5

• A estrutura básica do HTML é relativamente simples. Utilizam-se marcadores chamados de tag’s.

Cada tag é representada da seguinte forma:
• <html> - Tag de abertura
• </html> - Tag de fechamento

• A maioria das tags é aberta e fechada como mostrado acima, com o conteúdo entre as duas.
ESTRUTURA DO HTML5

• <!doctype html>
• <html>
• <head>
• <meta charset="utf-8">
• <title>Titulo da Página</title>
• </head>
• <body>
• Corpo da Página
• </body>
• </html>
ESTRUTURA DO HTML5

• <!doctype html> Indica que se trata de um documento do tipo HTML ressaltando que se trata da
versão 5. Deve ser a primeira tag do código antes mesmo da tag <html>.
• <html> Indica que todo seu conteúdo deve ser tratado como um código HTML..
• <head> Indica o cabeçalho do documento HTML onde muito de seu conteúdo não é visível ao
usuário. Nesta parte ficam os metadados que são informações sobre a página e o conteúdo ali
publicado.
ESTRUTURA DO HTML5

• <meta charset="utf-8"> Existem mais de uma tag meta. São chamadas de metatags e são
responsáveis por passar informações de configuração. A propriedade charset informa a tabela de
caracteres. No nosso caso passamos o valor utf-8, que representa o padrão europeu já que nosso
idioma tem acentos e outros caracteres especiais de origem europeia.
• <title> Esta tag guarda o titulo do documento geralmente exibido na guia do navegador.
• <body> Tudo que está dentro desta tag faz parte do corpo do documento e será exibido na tela.
TAGS HTML

• O HTML possui algumas regras básicas sobra a organização de elementos desde as primeiras versões.
Elas fazem referências às duas categorias: elementos de linhas e de bloco. Estas regras definem onde os
elementos podem ou não estar. Se eles podem ser filhos ou pais de outros elementos e quais os seus
comportamentos. Isto é muito importante para a organização mas também influenciará a formatação no
CSS. Vamos ver algumas premissas simples:
• 1. Elementos de linha podem conter outros elementos de linha
• 2. Elementos de linha nunca podem conter elementos de bloco.
• 3. Elementos de bloco sempre podem conter elementos de linha.
• 4. Elementos de bloco podem conter elementos de bloco, dependendo da categoria que ele se encontra. Por
exemplo, um parágrafo não pode conter um DIV. Mas o contrário é possível
TAGS HTML

• Os elementos HTML são divididos em algumas categorias de acordo com suas similaridades.
• Metadata content
• Flow content
• Sectioning content
• Heading content
• Phrasing content
• Embedded content
• Interactive content
ELEMENTOS SEMÂNTICOS

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Titulo da Página</title>
</head>
<body>
<div id=“header”> Cabeçalho
<div id=“navbar”> Menu </div>
</div>
<div id=“content”> Conteúdo </div>
<div id=“sidebar”> Barra lateral </div>
<div id=“footer”> Rodapé </div>
</body>
</html>
ELEMENTOS SEMÂNTICOS
ELEMENTOS SEMÂNTICOS

Estas são algumas das tags:

• <article> Define uma artigo ou conteúdo de texto
• <aside> Esta tag demarca a área para uma barra lateral
• <header> Define um cabeçalho de conteúdo
• <nav> Marca uma barra de navegação seja ela principal ou secundária.
• <section> Define uma nova seção genérica no documento
• <hgroup> Este elemento consiste em um grupo de títulos.
• <footer> Define um rodapé de conteúdo
• <time> Marca parte do texto que exibe um horário ou uma data
ELEMENTOS SEMÂNTICOS
<!doctype html>

<html>

<head>

<title>Titulo da Página</title>

</head>

<body>

<header> Cabeçalho </header>

<nav> Menu </nav>

<article> Conteúdo </article>

<aside> Barra lateral </aside>

<footer> Rodapé </footer>

</body>

</html>
HTML5

Tags
HTML5

Estrutura

<body>
<div>
<h1>Cabeçalho</h1>
<p>Parágrafo</p>
</div>
</body>
HTML5

Cabeçalhos
<body>
<h1>Cabeçalho 1</h1>
<h2>Cabeçalho 2</h2>
<h3>Cabeçalho 3</h3>
<h4>Cabeçalho 4</h4>
<h5>Cabeçalho 5</h5>
<h6>Cabeçalho 6</h6>
<h7>Cabeçalho 7</h7>
</body>
HTML5

Container div
<body>
<div>
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
HTML5

Atributos id
<body>
<div id=“atributos">
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
HTML5

Parágrafo p
<body>
<div id=“atributos">
<h1>Why use divs?</h1>
<p>Great for grouping elements!</p>
</div>
</body>
HTML5

Estilos
<em></em> itálico
<strong></strong> bold
<br> return
HTML5

Listas
<ul></ul> lista não ordenada
<ol></ol> lista ordenada
Exemplo:
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
HTML5

Imagens
<img>

Exemplo:
<img src=”nome_do_ficheiro.sfx" />

<img src=" nome_do_ficheiro.sfx " alt=”texto alternativo" />

HTML5

Video
<video>

Exemplo:
<video src="myVideo.mp4" width="320" height="240"
controls> Video not supported </video>
CSS

Cascading Style Sheets

Linguagem de estilos
Criado em 1994 por Hakon Wium Lie
Versão atual CSS3
CSS

Síntaxe
selector {
propriedade1:valor;
propriedade2:valor;
}
CSS

Exemplo
h1 {
color: blue;
}
CSS

Classes
Podem ser utilizadas mais que uma vez.

.nome_classe {
propriedade1:valor;
propriedade2:valor;
}
CSS

Classes
atribuição de classe em HTML5 <div class="container">
criação de classe em CSS3
.container{
width:80%;
margin:auto;
overflow:hidden;
}
CSS

ID
Só podem ser utilizadas uma vez.

#nome_classe {
propriedade1:valor;
propriedade2:valor;
}
CSS
ID
atribuição de ID em HTML5 <aside id="sidebar">
criação de ID em CSS3
#sidebar {
float:right;
width:30%;
background: #333;
color:#fff;
padding:10px;
box-sizing: border-box;
}
CSS
CSS
CSS
Cores
body {
color: red;
background:coral;
}
h1 {
color: #00ff00; }
p{
color: rgb(0,0,255); }
CSS
Pseudo Classes
li:first-child {
}
li:nth-child(2) {
}
li:nth-child(odd) {
}
CSS
Pseudo Classes
a:hover{
color:red; }
a:active{
color:green; }
a:visited{
}
CSS
Texto
h1{
font-family:Tahoma;
font-weight:800;
font-style:italic;
text-decoration:underline;
text-transform:uppercase;
letter-spacing: 0.2em;
word-spacing: 1em;
}
CSS
CSS
Webfonts
https://fonts.google.com/
Declaração em CSS
font-family: 'Xanh Mono', monospace;
Declaração em HTML5
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Xanh+Mono&display=swap"
rel="stylesheet">
BOOTSTRAP – O QUE É
Bootstrap é um framework de código aberto que simplifica o processo de
desenvolvimento web. Ele oferece uma coleção de ferramentas, estilos e componentes
pré-construídos, permitindo aos desenvolvedores criar páginas web responsivas e
estilizadas de forma rápida e eficiente. Originalmente desenvolvido pelo Twitter, o
Bootstrap se tornou um dos frameworks mais populares para o desenvolvimento front-
end.
BOOTSTRAP – ORIGEM
O Bootstrap foi criado por dois engenheiros do Twitter, Mark Otto e Jacob Thornton.
Inicialmente, era conhecido como Twitter Blueprint, mas foi renomeado para Bootstrap
quando foi disponibilizado como um projeto de código aberto em agosto de 2011. A
intenção era fornecer uma estrutura consistente e fácil de usar para os
desenvolvedores, ajudando a manter a consistência visual e de comportamento em
toda a aplicação web do Twitter.
3. Objetivos Iniciais:
• Padronização
• Agilidade no Desenvolvimento
• Reusabilidade
BOOTSTRAP – ORIGEM
Desde a sua introdução, o Bootstrap evoluiu consideravelmente. A comunidade de
desenvolvedores ao redor do mundo contribuiu para seu aprimoramento, e o framework
tornou-se independente do Twitter. A versão mais recente (até a data do meu conhecimento
em janeiro de 2022) é o Bootstrap 5, que continua a oferecer novos recursos, melhorias de
desempenho e uma abordagem mais modular.
BOOTSTRAP – CARACTERÍSTICAS
Sistema de Grade (Grid System): Facilita o design responsivo e a disposição de elementos na
página.
Componentes Pré-construídos: Incluem botões, formulários, navegação, entre outros.
Estilos e Temas: Oferece uma base visual consistente e fácil de customizar.
Compatibilidade com Navegadores: Garante uma experiência consistente em diferentes
navegadores.
BOOTSTRAP – INSTALAÇÃO
https://getbootstrap.com

1. CDN (Content Delivery Network):

Descrição: Utilizar um CDN é a forma mais simples e rápida de começar a usar o Bootstrap.
Isso envolve incluir os links para os arquivos CSS e JS do Bootstrap diretamente no seu HTML.
BOOTSTRAP – INSTALAÇÃO
2. Download e Inclusão Local:
Descrição: Baixar os arquivos do Bootstrap e incluí-los localmente no seu projeto.
Passos:
Acesse o site oficial do Bootstrap e clique no botão "Download".
Descompacte o arquivo baixado e inclua os arquivos CSS e JS no seu projeto.
Adicione os links nos elementos <link> e <script> do seu HTML.
BOOTSTRAP – INSTALAÇÃO
3. Gerenciadores de Pacotes (npm, Yarn, etc.):
Descrição: Usar um gerenciador de pacotes, como npm ou Yarn, para instalar e gerenciar as
dependências do Bootstrap.
Passos:
• Abrir o terminal na pasta do projeto.
• Executar um dos seguintes comandos:
• Para npm: npm install bootstrap
• Para Yarn: yarn add bootstrap
• Importar o Bootstrap no seu código conforme necessário.
BOOTSTRAP – BREAKPOINTS
Os "breakpoints" são pontos específicos nas dimensões da tela em que o
layout da página é alterado para se adaptar a diferentes tamanhos de
dispositivos. Esses breakpoints são usados em conjunto com o sistema de
grade (Grid System) do Bootstrap para criar layouts responsivos.
Os breakpoints permitem ajustar o layout da página de acordo com o
tamanho da tela, proporcionando uma experiência mais otimizada para
diferentes dispositivos.
No Bootstrap o padrão seguido é o mobile first, ou seja, a estilização de
menor dimensão do ecrã para maior.
BOOTSTRAP – BREAKPOINTS
Os breakpoints no Bootstrap são definidos para cinco tamanhos de dispositivos principais:
Extra Small (xs): Para dispositivos muito pequenos, como telefones celulares. Ativado para telas
menores que 576 pixels.
Small (sm): Para dispositivos pequenos, como tablets. Ativado para telas de 576 pixels ou mais.
Medium (md): Para dispositivos médios, como laptops. Ativado para telas de 768 pixels ou mais.
Large (lg): Para dispositivos grandes, como desktops. Ativado para telas de 992 pixels ou mais.
Extra Large (xl): Para dispositivos extra grandes, como monitores maiores. Ativado para telas de
1200 pixels ou mais.
Extra extra Large (xxl): Para dispositivos extra grandes, como monitores maiores. Ativado para
telas de 1400 pixels ou mais.
BOOTSTRAP – BREAKPOINTS
BOOTSTRAP – BREAKPOINTS
Como utilizar breakpoints:
No sistema de grade do Bootstrap, especificamos o layout de uma coluna
com base nos breakpoints usando classes específicas. As classes incluem o
prefixo do tamanho do dispositivo (col-), seguido por um hífen e o número
de colunas que se deseja que a coluna ocupe em um determinado
breakpoint.
BOOTSTRAP – BREAKPOINTS
<div class="container">
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3">

</div>
...
</div>
</div>

Neste exemplo, a classe col-12 é aplicada à colunas, indicando que ocupará 12 colunas em telas de
qualquer tamanho. No entanto, para dispositivos pequenos (sm), cada coluna ocupará 6 colunas, para
dispositivos médios (md) ocuparão 4 colunas, e para dispositivos grandes (lg) ocuparão 3 colunas.
BOOTSTRAP – GRID
O Bootstrap utiliza um Sistema de Grade (Grid System) para facilitar o desenvolvimento de
layouts responsivos e fluidos. Esse sistema é baseado em uma estrutura de 12 colunas, oferecendo
flexibilidade e adaptabilidade.
Cada linha no sistema de grade é dividida em até 12 colunas. As classes col- são usadas para
definir quantas colunas uma seção específica deve ocupar. Por exemplo, col-6 indica que a seção
ocupará metade da largura disponível.
Exemplo:
<div class="row">
<div class="col-6">Coluna 1</div>
<div class="col-6">Coluna 2</div>
</div>
BOOTSTRAP – GRID

• GRID COMPOSTA POR 12

COLUNAS
• ESTRUTURA:
CONTAINER>ROW>COLUNAS
• O CONTAINER ABRIGA A
SECÇÃO
• O ROW DETERMINA A LINHA
(LARGURA DE 100%)
• AS COLUNAS DIVIDEM O
CONTAINER ATÉ 12 PARTES
BOOTSTRAP – GRID
Tamanho das colunas Exemplo:
Podemos ajustar o tamanho das colunas <div class="container">
<div class="row">
x espaços: col-x <div class="col-4"></div>
Até um máximo de 12 divisões <div class="col-4"></div>
O espaço será proporcional de acordo com a <div class="col-4"></div>
divisão decidida </div>
</div>
BOOTSTRAP – GRID
Limite de número de colunas Exemplo:
Podemos limitar o número de colunas numa linha <div class="container">
<div class="row row-cols-2">
A classe a utilizar é: row-cols-x <div class="col"></div>
O grid vai respeitar o número máximo na linha <div class="col"></div>
</div>
<div class="row row-cols-2">
<div class="col"></div>
<div class="col"></div>
</div>
</div>
BOOTSTRAP – GRID
Alinhamento Vertical Exemplo:
As colunas dentro de uma row estão <div class="container vertical">
condicionadas ao flex box <div class="row align-content-center">
<div class="col-6"></div>
A classe deve ficar sempre no elemento row <div class="col-6"></div>
Exemplo: align-items-end, alinha no final da row </div>
</div>
BOOTSTRAP – GRID
Alinhamento Horizontal
A classe deve ficar sempre no elemento row
Exemplo: justify-content-center
Podemos combinar alinhamentos verticais e horizontais

Exemplo:
<div class="container vertical">
<div class="row justify-content-center">
<div class="col-3"></div> </div>
</div>
BOOTSTRAP – GRID
Alinhamento de Itens Exemplo:
O alinhamento de item serve para alinhar um item <div class="container vertical">
individualmente <div class="row">
<div class="col-4"></div>
Exemplo: align-self-center <div class="col-4 align-self-center">
Não há alinhamento unitário na horizontal. Apenas </div>
na vertical. <div class="col-4 align-self-end">
</div>
</div>
</div>
BOOTSTRAP – GRID
Ordem dos itens Exemplo:
É possível alterar a ordem pela qual os itens são <div class="container vertical">
apresentados <div class="row">
<div class="col-3 order-3">3</div>
Utiliza-se a classe order-* <div class="col-3 order-1">1</div>
1 é o primeiro item <div class="col-3 order-4">4</div>
<div class="col-3 order-2">2</div>
Útil no desenvolvimento para ambiente mobile
</div>
</div>
BOOTSTRAP – GRID
Offset de colunas Exemplo:
É possível criar um espaçamento entre colunas <div class="container vertical">
<div class="row">
Utiliza-se a classe offset-md-x <div class="col-3 order-3">3</div>
x é o número de colunas à esquerda <div class="col-3 order-1">1</div>
<div class="col-3 order-4">4</div>
<div class="col-3 order-2">2</div>
</div>
</div>
BOOTSTRAP – GRID
Responsividade com Breakpoints

O Bootstrap utiliza os breakpoints para ajustar o layout com base no tamanho da tela. Classes
como col-md-4 significam que, em telas médias, a coluna ocupará 4 das 12 colunas disponíveis.
Exemplo:
<div class="row">
<div class="col-12 col-md-4">Coluna 1</div>
<div class="col-12 col-md-4">Coluna 2</div>
<div class="col-12 col-md-4">Coluna 3</div>
</div>
BOOTSTRAP – GRID
Alinhamento e Offset no Sistema de Grade

Além de controlar a largura das colunas, o Bootstrap permite alinhar e deslocar colunas. As classes
justify-content e align-items são úteis para alinhamento vertical e horizontal, enquanto offset
desloca colunas.
Exemplo:
<div class="row justify-content-between">
<div class="col-4">Coluna 1</div>
<div class="col-4">Coluna 2</div>
</div>
BOOTSTRAP – CONTAINER
Um container é um elemento de nível superior usado para envolver e centralizar o
conteúdo da página dentro da estrutura de layout. O container é uma parte
fundamental do sistema de grade (Grid System) do Bootstrap e desempenha um
papel crucial na criação de layouts responsivos e consistentes.

Existem três tipos principais de containers em Bootstrap:

• Container Fixo (Fixed Container)
• Container Fluido (Fluid Container)
• Container por breakpoint
BOOTSTRAP – CONTAINER FIXO
Container Fixo (Fixed Container):
Um container fixo tem uma largura fixa em pixels ou outra unidade de medida.
Ele permanece com uma largura constante independentemente do tamanho da tela.
É representado pela classe CSS container.
Exemplo:
<div class="container">

</div>
BOOTSTRAP – CONTAINER FLUIDO
Um container fluido ocupa 100% da largura do elemento pai.
Ele se estende para preencher a largura total da tela, tornando-se totalmente
responsivo.
É representado pela classe CSS container-fluid.
Exemplo:
<div class="container-fluid">

</div>
BOOTSTRAP – CONTAINER POR BREAKPOINT

É representado pela classe CSS container-x.

Esse x pode ser: sm, md, lg e outras classes de breakpoint.
Com este tipo de container obtemos um que respeite a largura máxima que se baseia
numa resolução.
Exemplo:
<div class="container-sm">

</div>