Cadastre-se para receber mais informações sobre a formação
Fale Conosco pelo WhatsApp
Gostaria de informação sobre esse e outros cursos imediatamente?
O que é o HTML?
HTML é a abreviação para HyperText Markup Language ou Linguagem de Marcação de HiperTexto. Em desenvolvimento Web ela serve para criar a estrutura de qualquer site ou aplicação na Internet.
Com a proliferação do mundo móvel e a necessidade de criação de portais cada vez mais inteligentes, a versão mais recente do HTML (o HTML5) trás, entre outras coisas novidades como suporte a áudio e vídeo embutidos. Novas tags semânticas para facilidade de leitura dos third party apps (aplicativos de terceiros) e até mesmo validação em Front-End com expressões regulares.
O que é o CSS?
CSS é a abreviação para Cascading Style Sheet ou Folhas de Estilo em Cascata. De acordo com o W3C, é um mecanismo simples para adicionar estilos em uma página web tais como fontes, cores, espaçamentos e etc.
Com esse recurso, o HTML ganha a finalidade inicial para a qual foi concebida, a de ser a estruturação de um Web Site, cabendo ao CSS a apresentação do documento. O CSS encontra-se na versão 3, chamado popularmente de CSS3.
Ainda com os novos módulos e recursos da versão 3, é possível aplicar designs arrojados e estilosos as suas páginas Web, transições e animações sem precisar de Javascript ou algum Web Hack.
Aprender CSS é um dos pré requisitos para se tornar dos Web Designers (ou programadores Front-End) do futuro.
O que é o Design Responsivo?
Chamamos de Design Responsivo um conjunto de técnicas de layout onde um site (ou páginas web) é capaz de adaptar e distribuir a visualização do seu conteúdo para qualquer resolução de tela, independentemente do tipo do dispositivo usado (seja ele um computador, um tablet ou smartphone), por meio do uso do CSS3 (incluindo também o uso de 'media-queries'). Atualmente essa é a prática de desenvolvimento web mais usada hoje em dia.
Para quem se destina:
Esse curso é recomendado para:
- Iniciantes que estejam interessados em desenvolvimento web.
- Desenvolvedores e Web Designers que desejam atualizar seus conhecimentos.
- Profissionais que trabalhem direta ou indiretamente com Internet.
Por que estudar no ADV Informática?
Porque aqui, nossas aulas são individuais, onde o professor pode dar explicações personalizadas para cada aluno de forma a facilitar o aprendizado. Você aprenderá todas as técnicas do processo inicial de criação de um site usando o HTML5 com o uso das folhas de estilo CSS3, direcionando a construção de layouts com foco no Design Responsivo.
Será abordado deste o funcionamento de um site na Internet até a construção passo a passo da estrutura de um página web com HTML5, conhecendo suas tags e suas respectivas funções. Assim também vamos aprender como definir passo a passo o conjunto de estilos dos elementos da página por meio do uso do CSS3 (definindo o seu comportamento, cores de texto, cores de fundo, fonte, tamanhos, animações, interações e etc.), aplicando em paralelo o esquema do layout responsivo, adaptando o conteúdo da página para diversas resoluções de tela.
Curso intensivo (sem redução de carga horária):
O aluno pode fazer este treinamento de forma intensiva. Sendo assim, há possibilidade de concluir o curso num intervalo de tempo menor que o convencional. Isto significa que poderá aumentar tanto a sua carga horária diária como o número de aulas por semana sem aumento no valor do treinamento. EX : Um curso de 35 horas pode ser concluído em 5 dias consecutivos com 7 horas de aula por dia , ou dependendo da disponibilidade do aluno a carga horária diária pode ser aumentada.
Consulte nossos representantes comerciais e saiba mais!
Coordenação de ensino:
A coordenação de ensino é administrada pela Engenheira Suely Pires, doutorada em Ciência da Computação pela COPPE UFRJ e Mestre em Ciência da Computação pelo IME.ATENÇÃO: Os treinamentos e formações poderão, sem aviso prévio, ter seus conteúdos atualizados, alterados e substituídos, à medida que ocorram atualizações ou descontinuação nas tecnologias.
Veja alguns exemplos de páginas que serão trabalhadas e construídas no curso
Para realizar este módulo, o aluno deverá ter conhecimentos de informática e Windows.
A carga horária deste curso é de 24h.
PROGRAMA: HTML5 + CSS3 Responsivo
- Introdução ao desenvolvimento Web
- O que é um site?
- O que é a linguagem HTML5?
- O que é a linguagem CSS3?
- Qual a importância de cada linguagem em um site?
- Um pouco sobre as outras linguagens, bibliotecas e frameworks
- JavaScript
- JQuery
- AngularJS
- Vue.js
- React.js
- O que é desenvolvimento FRONT-END e BACK-END?
- Linguagens usadas no FRONT-END?
- Linguagens usadas no BACK-END?
- O que é Design Responsivo?
- Por que priorizar o Design Responsivo nos sites?
- Introdução ao HTML5
- Conhecendo a estrutura da linguagem HTML5
- A tag <html>
- A tag <head>
- A tag <title>
- A tag <meta>
- A tag <body>
- Conhecendo algumas tags de conteúdo básicas
- A tag <h1> até <h6>
- A tag <p>
- A tag <br/>
- A tag <hr/>
- As tags <strong> e <em>
- A tag <center>
- A tag <mark>
- A tag <blockquote>
- Construindo nossa primeira página
- Conhecendo o editor de código
- Desenvolvendo o código
- Salvando o código
- Visualizando a página no navegador
- Entendendo o funcionamento
- Conhecendo a estrutura da linguagem HTML5
- Introdução ao CSS3
- Conhecendo a estrutura do CSS3
- Seletores
- Atributos
- Valores
- A tag <style>
- Conhecendo alguns atributos básicos do CSS3
- Criando os estilos para as tags da página
- Visualizando novamente a página com o CSS3
- Entendendo o funcionamento
- Conhecendo a estrutura do CSS3
- Utilizando o Design Responsivo
- Criando regras CSS3 para obter o design responsivo
- Declarando o 'viewport' no cabeçalho do HTML
- Testando a página
- No monitor do PC
- Em um Tablet
- Em um SmartPhone
- Trabalhando com Listas no HTML5
- Listas Ordenadas
- A tag <ol>
- Parâmetros da tag <ol>
- O atributo [type]
- Lista Não Ordenadas
- A tag <ul>
- A tag <li>
- Criando uma página usando listas
- Construindo o código da página com HTML5
- Conhecendo regras CSS3 para listas ordenadas e não ordenadas
- Aplicando estilos CSS3 a página
- Tornando a página responsiva
- Listas Ordenadas
- Trabalhando com o elemento <div>
- O que é o elemento <div>?
- Inserindo elementos <div> em na página HTML5
- Formatando elementos <div> usando o CSS3 (com responsividade)
- Introdução ao uso de media queries
- O que é uma ‘media query’ e como funciona?
- Estrutura básica do uso do media query no CSS3
- Aplicando o uso do media query em uma página HTML
- Trabalhando com imagens
- O elemento <img>
- Conhecendo os atributos do elemento <img>
- Inserindo imagens na página web usando o <img>
- Formatando a imagem com CSS3
- Inserindo a imagem como fundo da página
- Formatando palavras de frases individuais
- Conhecendo o elemento <span>
- Conhecendo algumas regras CSS para formatação de textos
- Aplicando o uso do elemento <span> em páginas HTML5 com CSS
- Trabalhando com Tabelas no HTML5
- A tag <table>
- A tag <th>
- A tag <tr>
- A tag <td>
- Criando uma página usando tabelas
- Formatando a tabela com regras CSS3
- Mesclando células (colspan e rowspan)
- Criando tabelas com células mescladas
- Tornando uma tabela responsiva
- Trabalhando com links e navegação
- A tag <a>
- Os atributos do elemento <a>: [href], [target] e [download]
- Navegação entre conteúdos de diferentes páginas
- Formatando a exibição de links com CSS3
- Navegando entre conteúdos na mesma página
- Criando menus de navegação
- A tag <nav> e sua estrutura
- Criando uma página demonstrando o uso do menu de navegação
- Formatando o menu com CSS3
- Tornando o menu responsivo
- Trabalhando com conteúdos incorporados
- Conhecendo o elemento <iframe>
- Parâmetros do <iframe>: [src], [name],[width],[height],[frameborder] [scrolling]
- Criando uma página web que carrega conteúdos incorporados
- Vinculando o link da página <a> ao elemento <iframe> para exibir conteúdo
- Trabalhando com formulários
- A tag <form>
- Os atributos [action], [method] e [enctype]
- Elementos de entrada de dados
- A tag <input>
- Tipos de dados de entrada: Text, RadioButton, Password, CheckBox, Submit e Hidden
- A tag <select>
- Estrutura e atributos da tag <select>: [value], [multiple] e [selected]
- A tag <textarea>
- Um pouco sobre Validação de dados
- Criando uma página usando formulários
- Criando o código da página com HTML5
- Aplicando o CSS3 aos elementos do formulário
- Tornando a página responsiva
- Reproduzindo áudio e vídeo
- Adicionando som nas páginas
- A tag <audio> e sua estrutura
- Formatos de áudios suportados
- Atributos da tag <audio>: [src],[controls],[autoplay],[loop],[muted]
- Demonstrando o uso do elemento <audio> em uma página
- Adicionando vídeo nas páginas
- A tag <video> e sua estrutura
- Atributos da tag <video>
- Formatos de vídeos suportados
- Demonstrando o uso do elemento <video> em uma página
- Tornando o elemento <video> responsivo com CSS3
- Elementos para rankeamento do site (seo)
- A tag <meta> e seus parâmetros para rankeamento: [description], [keywords], [robots],[author].
- Outros elementos importantes para rankemaneto
- Aplicando as tags de rankeamento em uma página Web
- Procedimentos para que uma página seja vista pelos mecanismos de busca
- Utilizando fontes externas em seu site
- Utilizando uma fonte externa a partir de um arquivo de fonte
- A estrutura CSS3 @font-face
- Declaração CSS3 da utilização do @font-face
- Formatos de fontes suportados
- Criando uma página Web demonstrando o uso de uma fonte externa
- Utilizando uma fonte externa a partir do Google Fonts
- Declaração do cabeçalho do Google Fonts na página HTML e seus parâmetros
- Utilizando uma fonte externa na página disponível no Google Fonts
- Utilizando uma fonte externa a partir de um arquivo de fonte
- Criando animações no site via CSS3
- Conhecendo a estrutura @keyframes
- Declaração e uso da estrutura @keyframes
- Comandos de execução, interação e comportamento da animação
- Atribuindo as animações dos elementos da página criadas na estrutura @keyframes via CSS3
- Realizando ajustes em uma animação
- Animação de sprites
- O que é uma Sprite?
- Comandos de animação para manipulação de sprites
- Demonstrando a animação de sprites em uma página Web
- Adicionando um Ícone (Favicon) ao site
- O tag <link rel='icon'/>
- Formatação de dimensões do ícone
- Carregando e visualizando o ícone desejado no site
Cursos Relacionados
Confira os cursos relacionados abaixo
Nosso Endereço
Av. Treze de Maio nº 23 - 8º Andar Centro - Rio de Janeiro RJ
Telefone +55 (21) - 2210 - 1180
WhatsApp: +55 (21) - 97879-2520
Email: cursoadv@cursoadv.com.br