SlideShare uma empresa Scribd logo
21ª Jornada de Iniciação Científica
Curso de HTML5 - CSS3 - JS - Frameworks
Segunda-feira, 17 de outubro de 2022 - 18:00 até 20:00pm
https://meet.google.com/jjq-gwzy-tzp
Luis Gustavo Almeida
Estudante de Doutorado na UniRio
Luis Gustavo Almeida
Doutorando em Informática na UniRio e Freelancer no RJ
TikTok: @omestredocomputador
YouTube: Gustavo Almeida
GitHub: lga37
www.LGA.com.br
HyperText Markup Language
Trata-se da linguagem de formatação de um documento de hipertexto. O
código html é renderizado nos navegadores e assim é concebida uma página
da internet.
Segundo a Wikipedia:
HTML5 (Hypertext Markup Language, versão 5) é uma linguagem de
marcação para a World Wide Web e é a quinta versão da linguagem HTML.
Em particular, HTML5 adiciona várias novas funções sintáticas. Elas
incluem as tags de <video>, <audio>, <header> e elementos <canvas>, assim
como a integração de conteúdos SVG. Outros novos elementos, como
<section>, <article>, <header> e <nav>, são projetados para enriquecer o
conteúdo semântico dos documentos.
Existem diferenças de como os navegadores tratam o HTML5?
Arquitetura Cliente Servidor
Modelo predominante na Web baseado em regras do protocolo HTTP.
‘E assim funciona a internet !’
Os recursos <tags></tags> do HTML5 em categorias
• a
• article
• blockquote
• br
• button
• div
• dl
• fieldset
• footer
• form
• h1 .. h6
• header
• hr
• i
• iframe
• img
• input
• label
• nav
ul, p, …
• a
• audio
• button
• details
• iframe
• img (usemap)
• input (X hidden)
• keygen
• label
• select
• textarea
• video (control)
Hipertexto é o termo que remete a um texto ao qual se agregam outros conjuntos de informação na forma de
blocos de textos, palavras, imagens ou sons no meio digital denominadas hiperligações. Ocorrem na forma de
termos destacados no corpo de texto principal, ícones gráficos ou imagens e têm a função de interconectar os
diversos conjuntos de informação.
Elementos do tipo bloco - Ocupam uma certa altura e o próximo vai abaixo (h1,p,table).
Elementos de linha - Ocupam a posição vizinha do anterior (a, span, img)
A Estrutura Básica e o “Hello World”
Aqui é onde de fato ocorre
toda a ‘magia’ de uma
página.
Códigos para testes de HTML5:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Teste de Página</title>
</head>
<body>
<h5>Teste de página</h5>
<p>Um teste de página</p>
<p><i>Este texto está em itálico</i></p>
</body>
</html>
Código HTML5 para reproduzir áudio sem a necessidade de plug-ins:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<title>Áudio em HTML5</title>
</head>
<body>
<audio controls autoplay>
<source src="audio.ogg">
<!-- Mensagem explicando que o navegador não suporta áudio ou o formato usado. -->
<p>Seu navegador não suporta áudio HTML5 ou o formato Opus.</p>
</audio>
</body>
</html>
index.html
<form …>
<fieldset>
<legend>Your address</legend>
…
<form method=””>
<fieldset>
<legend>Personal Details</legend>
<label for="name">name</label><input type="text" id="name" name="name" />
<label for="email">email</label><input type="text" id="email" name="email" />
<label for="subject">subject</label><input type="text" id="subject" name="subject" />
<label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>
<button>OK</button>
</fieldset>
</form>
<table>
<thead>
<tr>
<th>...</th>
</tr>
</thead>
<tbody>
<tr>
<td>xyz</td>
</tr>
</tbody>
</table>
atributos rowspan e colspan
CSS - Cascade Style Sheets - Folha de Estilo em Cascata
Existem 3 modos de se aplicar estilo ao html :
● Inline style - giving a style attribute to HTML elements. Ex. <p
style=”border:1px solid red;”>parágrafo</p>
● Internal style - using the <style> element in the <head> section
● External style - creating an external CSS file. <link rel=”stylesheet”
type=”text/css” href=”estilo.css”>
1) Inline
<h1 style="color:#1c87c9">Some heading</h1>
<p style="color:#8ebf42; font-size:15px">Some paragraph</p>
2) Usando a tag <style>
Basicamente: Elementos, classes e ids.
<style>
h1 {
color: #1c87c9;
}
#blue {
color: #1c87c9;
}
.blue {
color: #1c87c9;
}
</style>
3) Arq. css externo
DOM e HTML5
O Modelo de Objetos do Documento (DOM, na sigla em inglês) é a interface entre a linguagem Javascript e os objetos do HTML.
DOM é o método padrão para construção de aplicações ricas com Javascript e é amplamente conhecido e utilizado.
Frameworks de desenvolvimento :
Bootstrap 5
Tailwind v3
Boas práticas em front-end e SEO (Search Engine Optimization)
Atente para a tag title
<title>Six Revisions - Web Development and Design Information</title>
Nao se esqueca das tags meta
<meta name="description" content="Six Revisions is a blog that shares useful information about web development and design,ld websites." />
<meta name="keywords" content="web design, web development" />
Separar conteúdo da apresentação. Em outras palavras, evite o inline.
<p style="color:#abc; font-size:14px; font-family:arial,sans-serif;">I hate to separate my content from presentation</p>
Use ferramentas que minificam e unificam o CSS e o JS.
CSS em cima e JS em baixo
Use de maneira hierárquica os elementos heading
<h1>This is the topmost heading</h1> <h2>This is a sub-heading underneath the topmost heading.</h2> <h3>sub-heading underneath the h2
heading.</h3>
Não use divs indiscriminadamente
Valide online seu código HTML.
Use <ul> para menus
<ul id="main_nav">
<li><a href="#" class="active">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
</ul>
CSS
#main_nav { position:absolute; right:30px; top:40px;} #main_nav li { float:left; margin-left:2px; } #main_nav li a{ font-size:16px; color:#fff;
text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;} #main_nav li a.active,
#main_nav li a:hover{ background-color:#0b86cb; }
Use sempre caixa baixa
Bad Practice<DIV> <IMG … Good Practice <div id="test"> <img src="
Use alt para imagens e title para links
<img id="logo" src="images/bgr_logo.png" alt="Six Revisions Logo" />
<a href="http://blog.com/all-articles" title="A list of all articles.">Click here.</a>
Em formulários use fieldset e labels
<fieldset> <legend>Personal Details</legend> <label for="name">name</label><input type="text" id="name" name="name" /> <label
for="email">email</label><input type="text" id="email" name="email" /> <label for="subject">subject</label><input type="text" id="subject"
name="subject" /> <label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea>
</fieldset>
Identação sempre
Curso de HTML5 CSS3 e JS

Mais conteúdo relacionado

Semelhante a Curso de HTML5 CSS3 e JS

Introdução de web
Introdução de webIntrodução de web
Introdução de web
Sedu
 
Html5
Html5Html5
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
Clécio Bachini
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
Cesar Braz
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
Reinaldo Vieira dos Santos
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
Sérgio Souza Costa
 
Programação para Web II: HTML5
Programação para Web II: HTML5Programação para Web II: HTML5
Programação para Web II: HTML5
Alex Camargo
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
Rodrigo Bueno Santa Maria, BS, MBA
 
Html completo
Html completoHtml completo
Html completo
EMSNEWS
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
Mario Sergio
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
Sérgio Laranjeira
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
Sedu
 
HTML5
HTML5HTML5
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
Clécio Bachini
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
Mércia Regina da Silva
 
CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014
Rodrigo Donini
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
Silvio Sales do Nascimento Júnior
 
HTML Básico
HTML BásicoHTML Básico
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
Luiz Felipe Fernandes Machado Costa
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
info_cimol
 

Semelhante a Curso de HTML5 CSS3 e JS (20)

Introdução de web
Introdução de webIntrodução de web
Introdução de web
 
Html5
Html5Html5
Html5
 
Road Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - JaúRoad Show TI Senac São Paulo - Jaú
Road Show TI Senac São Paulo - Jaú
 
HTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdfHTML+&+CSS++Fundamentos.pdf
HTML+&+CSS++Fundamentos.pdf
 
Apoio1020 apostila html
Apoio1020 apostila htmlApoio1020 apostila html
Apoio1020 apostila html
 
Introdução ao HTML e CSS
Introdução ao HTML e CSSIntrodução ao HTML e CSS
Introdução ao HTML e CSS
 
Programação para Web II: HTML5
Programação para Web II: HTML5Programação para Web II: HTML5
Programação para Web II: HTML5
 
Curso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTMLCurso de Desenvolvimento Web - Módulo 01 - HTML
Curso de Desenvolvimento Web - Módulo 01 - HTML
 
Html completo
Html completoHtml completo
Html completo
 
Curso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-endCurso de Java (Parte 6) Introdução a Front-end
Curso de Java (Parte 6) Introdução a Front-end
 
Html5 workshop
Html5 workshopHtml5 workshop
Html5 workshop
 
Html aula 1
Html aula 1Html aula 1
Html aula 1
 
HTML5
HTML5HTML5
HTML5
 
HTML5- Road Show TI - Senac Jaboticabal
HTML5- Road Show TI -  Senac Jaboticabal HTML5- Road Show TI -  Senac Jaboticabal
HTML5- Road Show TI - Senac Jaboticabal
 
Apresentando o HTML
Apresentando o HTMLApresentando o HTML
Apresentando o HTML
 
CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014CODE N' TELL 17/02/2014
CODE N' TELL 17/02/2014
 
Apresentação para aula de HTML básico
Apresentação para aula de HTML básicoApresentação para aula de HTML básico
Apresentação para aula de HTML básico
 
HTML Básico
HTML BásicoHTML Básico
HTML Básico
 
Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)Minicurso Web. Front-end e HTML5 (parte 2)
Minicurso Web. Front-end e HTML5 (parte 2)
 
E-Book de estudos
E-Book de estudosE-Book de estudos
E-Book de estudos
 

Mais de Luis Gustavo Almeida

Php curl - Coleta de dados na web
Php curl - Coleta de dados na webPhp curl - Coleta de dados na web
Php curl - Coleta de dados na web
Luis Gustavo Almeida
 
Geolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e RoutesGeolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e Routes
Luis Gustavo Almeida
 
Criando uma blockchain com PHP
Criando uma blockchain com PHPCriando uma blockchain com PHP
Criando uma blockchain com PHP
Luis Gustavo Almeida
 
Php criptomoedas e blockchain
Php criptomoedas e blockchainPhp criptomoedas e blockchain
Php criptomoedas e blockchain
Luis Gustavo Almeida
 
Palestra de segurança em PHP - Hacking
Palestra de segurança em PHP - HackingPalestra de segurança em PHP - Hacking
Palestra de segurança em PHP - Hacking
Luis Gustavo Almeida
 
ReactPHP && programacao assincrona em PHP
ReactPHP && programacao assincrona em PHPReactPHP && programacao assincrona em PHP
ReactPHP && programacao assincrona em PHP
Luis Gustavo Almeida
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP
Luis Gustavo Almeida
 
Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017
Luis Gustavo Almeida
 
Migrando para PHP7 - Novidades
Migrando para PHP7 - NovidadesMigrando para PHP7 - Novidades
Migrando para PHP7 - Novidades
Luis Gustavo Almeida
 

Mais de Luis Gustavo Almeida (9)

Php curl - Coleta de dados na web
Php curl - Coleta de dados na webPhp curl - Coleta de dados na web
Php curl - Coleta de dados na web
 
Geolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e RoutesGeolocalização em PHP - Google Places, Maps e Routes
Geolocalização em PHP - Google Places, Maps e Routes
 
Criando uma blockchain com PHP
Criando uma blockchain com PHPCriando uma blockchain com PHP
Criando uma blockchain com PHP
 
Php criptomoedas e blockchain
Php criptomoedas e blockchainPhp criptomoedas e blockchain
Php criptomoedas e blockchain
 
Palestra de segurança em PHP - Hacking
Palestra de segurança em PHP - HackingPalestra de segurança em PHP - Hacking
Palestra de segurança em PHP - Hacking
 
ReactPHP && programacao assincrona em PHP
ReactPHP && programacao assincrona em PHPReactPHP && programacao assincrona em PHP
ReactPHP && programacao assincrona em PHP
 
Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP Crawling - Coleta de dados na Web com PHP
Crawling - Coleta de dados na Web com PHP
 
Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017 Mini Curso PHP Twig - PHP Conference 2017
Mini Curso PHP Twig - PHP Conference 2017
 
Migrando para PHP7 - Novidades
Migrando para PHP7 - NovidadesMigrando para PHP7 - Novidades
Migrando para PHP7 - Novidades
 

Curso de HTML5 CSS3 e JS

  • 1. 21ª Jornada de Iniciação Científica Curso de HTML5 - CSS3 - JS - Frameworks Segunda-feira, 17 de outubro de 2022 - 18:00 até 20:00pm https://meet.google.com/jjq-gwzy-tzp Luis Gustavo Almeida Estudante de Doutorado na UniRio
  • 2. Luis Gustavo Almeida Doutorando em Informática na UniRio e Freelancer no RJ TikTok: @omestredocomputador YouTube: Gustavo Almeida GitHub: lga37 www.LGA.com.br
  • 3. HyperText Markup Language Trata-se da linguagem de formatação de um documento de hipertexto. O código html é renderizado nos navegadores e assim é concebida uma página da internet. Segundo a Wikipedia: HTML5 (Hypertext Markup Language, versão 5) é uma linguagem de marcação para a World Wide Web e é a quinta versão da linguagem HTML. Em particular, HTML5 adiciona várias novas funções sintáticas. Elas incluem as tags de <video>, <audio>, <header> e elementos <canvas>, assim como a integração de conteúdos SVG. Outros novos elementos, como <section>, <article>, <header> e <nav>, são projetados para enriquecer o conteúdo semântico dos documentos.
  • 4. Existem diferenças de como os navegadores tratam o HTML5?
  • 5.
  • 6. Arquitetura Cliente Servidor Modelo predominante na Web baseado em regras do protocolo HTTP. ‘E assim funciona a internet !’
  • 7. Os recursos <tags></tags> do HTML5 em categorias • a • article • blockquote • br • button • div • dl • fieldset • footer • form • h1 .. h6 • header • hr • i • iframe • img • input • label • nav ul, p, … • a • audio • button • details • iframe • img (usemap) • input (X hidden) • keygen • label • select • textarea • video (control)
  • 8. Hipertexto é o termo que remete a um texto ao qual se agregam outros conjuntos de informação na forma de blocos de textos, palavras, imagens ou sons no meio digital denominadas hiperligações. Ocorrem na forma de termos destacados no corpo de texto principal, ícones gráficos ou imagens e têm a função de interconectar os diversos conjuntos de informação.
  • 9.
  • 10. Elementos do tipo bloco - Ocupam uma certa altura e o próximo vai abaixo (h1,p,table). Elementos de linha - Ocupam a posição vizinha do anterior (a, span, img)
  • 11. A Estrutura Básica e o “Hello World” Aqui é onde de fato ocorre toda a ‘magia’ de uma página.
  • 12.
  • 13. Códigos para testes de HTML5: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Teste de Página</title> </head> <body> <h5>Teste de página</h5> <p>Um teste de página</p> <p><i>Este texto está em itálico</i></p> </body> </html> Código HTML5 para reproduzir áudio sem a necessidade de plug-ins: <!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="UTF-8"> <title>Áudio em HTML5</title> </head> <body> <audio controls autoplay> <source src="audio.ogg"> <!-- Mensagem explicando que o navegador não suporta áudio ou o formato usado. --> <p>Seu navegador não suporta áudio HTML5 ou o formato Opus.</p> </audio> </body> </html>
  • 15.
  • 17. <form method=””> <fieldset> <legend>Personal Details</legend> <label for="name">name</label><input type="text" id="name" name="name" /> <label for="email">email</label><input type="text" id="email" name="email" /> <label for="subject">subject</label><input type="text" id="subject" name="subject" /> <label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea> <button>OK</button> </fieldset> </form>
  • 20. CSS - Cascade Style Sheets - Folha de Estilo em Cascata Existem 3 modos de se aplicar estilo ao html : ● Inline style - giving a style attribute to HTML elements. Ex. <p style=”border:1px solid red;”>parágrafo</p> ● Internal style - using the <style> element in the <head> section ● External style - creating an external CSS file. <link rel=”stylesheet” type=”text/css” href=”estilo.css”> 1) Inline <h1 style="color:#1c87c9">Some heading</h1> <p style="color:#8ebf42; font-size:15px">Some paragraph</p>
  • 21. 2) Usando a tag <style> Basicamente: Elementos, classes e ids. <style> h1 { color: #1c87c9; } #blue { color: #1c87c9; } .blue { color: #1c87c9; } </style> 3) Arq. css externo
  • 22.
  • 23.
  • 24. DOM e HTML5 O Modelo de Objetos do Documento (DOM, na sigla em inglês) é a interface entre a linguagem Javascript e os objetos do HTML. DOM é o método padrão para construção de aplicações ricas com Javascript e é amplamente conhecido e utilizado.
  • 25.
  • 26. Frameworks de desenvolvimento : Bootstrap 5 Tailwind v3
  • 27.
  • 28.
  • 29. Boas práticas em front-end e SEO (Search Engine Optimization) Atente para a tag title <title>Six Revisions - Web Development and Design Information</title> Nao se esqueca das tags meta <meta name="description" content="Six Revisions is a blog that shares useful information about web development and design,ld websites." /> <meta name="keywords" content="web design, web development" /> Separar conteúdo da apresentação. Em outras palavras, evite o inline. <p style="color:#abc; font-size:14px; font-family:arial,sans-serif;">I hate to separate my content from presentation</p> Use ferramentas que minificam e unificam o CSS e o JS. CSS em cima e JS em baixo Use de maneira hierárquica os elementos heading <h1>This is the topmost heading</h1> <h2>This is a sub-heading underneath the topmost heading.</h2> <h3>sub-heading underneath the h2 heading.</h3> Não use divs indiscriminadamente Valide online seu código HTML.
  • 30. Use <ul> para menus <ul id="main_nav"> <li><a href="#" class="active">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Portfolio</a></li> </ul> CSS #main_nav { position:absolute; right:30px; top:40px;} #main_nav li { float:left; margin-left:2px; } #main_nav li a{ font-size:16px; color:#fff; text-decoration:none; padding:8px 15px; -moz-border-radius:7px; -webkit-border-radius:7px; border-radius:7px;} #main_nav li a.active, #main_nav li a:hover{ background-color:#0b86cb; } Use sempre caixa baixa Bad Practice<DIV> <IMG … Good Practice <div id="test"> <img src=" Use alt para imagens e title para links <img id="logo" src="images/bgr_logo.png" alt="Six Revisions Logo" /> <a href="http://blog.com/all-articles" title="A list of all articles.">Click here.</a> Em formulários use fieldset e labels <fieldset> <legend>Personal Details</legend> <label for="name">name</label><input type="text" id="name" name="name" /> <label for="email">email</label><input type="text" id="email" name="email" /> <label for="subject">subject</label><input type="text" id="subject" name="subject" /> <label for="message" >message</label><textarea rows="10" cols="20" id="message" name="message" ></textarea> </fieldset> Identação sempre