Curso de HTML5 CSS3 e JS

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">

<p>Seu navegador não suporta áudio HTML5 ou o formato Opus.</p>
</audio>
</body>
</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>

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 ﬁle. <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

Recomendados

Mais conteúdo relacionado

Semelhante a Curso de HTML5 CSS3 e JS (20)

Mais de Luis Gustavo Almeida (9)

Último (10)

Curso de HTML5 CSS3 e JS