________________________________________
HTML5 Template:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<style>
body {
font-family: sans-serif;
padding-left: 20%;
padding-right: 20%;
}
p, ol, ul {
font-size: 15px;
}
blockquote {
font-size: 15px;
}
</style>
</head>
<body>
<!-- -->
<h1></h1>
<p></p>
<br>
<img src=“img.png” alt=“img”>
<p><a href="" target="blank">
link</a></p>
</body>
</html>
________________________________________
Links do Curso
https://github.com/gustavoguanabara
https://gustavoguanabara.github.io
https://github.com/gustavoguanabara/html-css/tree/master/aulas-pdf
________________________________________
Referências online
https://developer.mozilla.org/en-US/
https://developer.mozilla.org/pt-BR/
https://html.spec.whatwg.org/multipage/
________________________________________
Livros
Editora Oreilly HTML5 CSS Flexbox in CSS Grid layout in CSS
Editora Altabooks: Elizabeth Castro e Bruce Hyslop - HTML5 e CSS3 Jon Duckett - HTML&CSS Elisabeth Robson e Eric Freeman - HTML e CSS Nate Cooper e Kim Gee - Crie seu próprio site
Livros de Design
Editora GG: David Dabner e outros - Curso de design gráfico Eva Heller - Psicologia das cores Ellen Lupton - Pensar com tipos
Editora Senac: Bob e Maggie Gordon
Livros digitais
Editora OSTRaining Jorge Montoya e Stephen Burge - Flexbox explained And OSTraining
Editora Bookman Bill Sanders - Smashing HTML5 Eric Meyer - Smashing CSS
________________________________________
Links Úteis
https://pt.m.wikipedia.org/wiki/ARPANET
https://pt.m.wikipedia.org/wiki/ARPANET
https://pt.m.wikipedia.org/wiki/National_Science_Foundation_Network
https://pt.m.wikipedia.org/wiki/Interligação_de_redes
https://www.submarinecablemap.com
VOX: How Does the Internet Work? - Glad You Asked S1:
https://en.m.wikipedia.org/wiki/Gopher_(protocol)
https://pt.m.wikipedia.org/wiki/Hypertext_Transfer_Protocol
https://pt.m.wikipedia.org/wiki/World_Wide_Web
https://pt.m.wikipedia.org/wiki/Mosaic
https://pt.m.wikipedia.org/wiki/Protocolo_de_Transferência_de_Arquivos
Chrome web store extension: web developer !!!
________________________________________
Software Recomendado
https://www.google.com/chrome/
https://code.visualstudio.com/
________________________________________
Conteúdo HTML
<h1> Título </1>
<p> parágrafo </p>
<img src=“foto.png” alt=“exemplo de foto”>
<!-- Estilo CSS: -->
h1{
font-family: Arial;
font-size: 20pt;
color: blue;
}
<!-- Estrutura básica de documento HTML: -->
<!DOCTYPE html>
<html lang=“pt-br”>
. <head>
. . <meta charset=“UTF-8”>
. . <meta name=“viewport”
. . content=“width=device-width,
. . initial-scale=“1.0”>
. . <title> document </title>
. </head>
. <body>
. . <h1> Olá, mundo 🌍! </h1>
. .
. .
. </body>
</html>
________________________________________
Tags <>
<h1>título</h1>
<p>paragrafo</p>
<hr> linha horizontal
<br> quebra de linha
<!-- Comment -->
& l t <(sem espaços) aparecem as tags & g t >
& r e g; ®
& c o p y; ©
& t r a d e; ™
& u a r r; ↑ Arrows
& l a r r; ←
& r a r r; →
& d a r r; ↓
________________________________________
Icones
<!DOCTYPE html><html>
<head><meta charset="utf-8">
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon">
<title>Link para favicon</title>
<style>
________________________________________
Hierarquia de Títulos
<h1> Título Principal </h1>
<h2> 1. Secundário </h2>
<h3> 1.1 </h3>
<h3> 1.2 </h3>
<h2> 2. </h2>
<h2> 3. </h2>
<h3> 3.1 </h3>
<h4> 3.1.1 </h4>
<h4> 3.1.2 </h4>
<h2> 4. </h2>
________________________________________
html5 obsolet tags
https://www.w3.org/TR/2014/REC-html5-20141028/obsolete.html
alink on body elements
bgcolor on body elements
link on body elements
marginbottom on body elements
marginheight on body elements
marginleft on body elements
marginright on body elements
margintop on body elements
marginwidth on body elements
text on body elements
vlink on body elements
clear on br elements
align on caption elements
align on col elements
char on col elements
charoff on col elements
valign on col elements
width on col elements
align on div elements
compact on dl elements
align on embed elements
hspace on embed elements
vspace on embed elements
align on hr elements
color on hr elements
noshade on hr elements
size on hr elements
width on hr elements
align on h1—h6 elements
align on iframe elements
allowtransparency on iframe elements
frameborder on iframe elements
hspace on iframe elements
marginheight on iframe elements
marginwidth on iframe elements
scrolling on iframe elements
vspace on iframe elements
align on input elements
hspace on input elements
vspace on input elements
align on img elements
border on img elements (except as noted in the previous section)
hspace on img elements
vspace on img elements
align on legend elements
type on li elements
align on object elements
border on object elements
hspace on object elements
vspace on object elements
compact on ol elements
align on p elements
width on pre elements
align on table elements
bgcolor on table elements
bordercolor on table elements
cellpadding on table elements
cellspacing on table elements
frame on table elements
rules on table elements
width on table elements
align on tbody, thead, and tfoot elements
char on tbody, thead, and tfoot elements
charoff on tbody, thead, and tfoot elements
valign on tbody, thead, and tfoot elements
align on td and th elements
bgcolor on td and th elements
char on td and th elements
charoff on td and th elements
height on td and th elements
nowrap on td and th elements
valign on td and th elements
width on td and th elements
align on tr elements
bgcolor on tr elements
char on tr elements
charoff on tr elements
valign on tr elements
compact on ul elements
type on ul elements
background on body, table, thead, tbody, tfoot, tr, td, and th elements
________________________________________
Semântica
Atualmente o papel da HTML não é apenas estruturar documentos para a
web, mas também descrever o significado do conteúdo presente nesses
documentos por meio de tags semânticas. O HTML semântico tem como
objetivo descrever o significado do conteúdo presente em documentos
HTML, tornando-o mais claro tanto para programadores quanto para
browsers e outras engines que processam essa informação.
Cite:
https://www.devmedia.com.br/html-semantico-conheca-os-elementos-semanticos-da-html5/3806
<strong> destaque </strong> (obsoleto <b> negrito </b>)
<em> ênfase </em> (obsoleto <i> itálico </i>)
<style> é um parametro CSS </style>
<p>texto <mark style=“background-color:lime;”>marcado</mark>inline com a tag mark.
<span style="color:green"> Cor do texto</span></p>
texto marcado inline com a tag mark. Cor do texto
Para criar um estilo para toda a página em CSS
Abaixo de title crie a tag style e um seletor mark:
<title>
<style>
body { font-family: sans-serif;
}
mark { background-color: aqua;
}
</style>
Formatações de texto
<p> Texto <span style="font-size: larger;"> maior </span> e <small>menor</small> ,
Texto <del> deletado </del> e <ins> inserido </ins>.</p>
Texto maior e menor ,
Texto deletado e inserido .
- - - - - - - - - - - - - -
<p> x<sup>2</sup>+3 and H<sub>2</sub>O </p>
x2+3 and H2O
- - - - - - - - - - - - - -
A tag “code” deixa a fonte monoespaçada.
A tag “pre” mantém a indentação.
A tag “q” é para citações simples e “blockquote” para citações completas.
O parâmetro “cite” dentro de blockquote é apenas uma referência para mecanismos de buscas.
<p> O comando <code> document.getElementById(‘test’) </code>
é escrito em linguagem JavaScript. </p>
O comando document.getElementById(‘test’) é escrito em linguagem JavaScript.
<pre><code>
num = int(input(‘Digite um número’)
if num % 2 == 0:
print(f’ O número {num} é par.’)
else:
print(f’ O número {num} é impar.’)
print(‘Fim do programa.’)
</code></pre>
________________________________________
Citações simples
<p> Como diria o pai de um amigo:
<q> O computador é um burro muito rápido. </q></p>
Como diria o pai de um amigo:
O computador é um burro muito rápido.
Citações completas
<p> Segundo Jeff Noble em seu livro HTML para Leigos: </p>
<blockquote cite=”https://www.amazon.com.br/HTML-XHTML-CSS-para-leigos/dp/8576086972 ”>
A diferença entre blocos inline e um bloco de texto é importante.
Os elementos HTML neste capítulo descrevem os blocos de texto.
</blockquote>
Segundo Jeff Noble em seu livro HTML para Leigos:
A diferença entre blocos inline e um bloco de texto é importante. Os elementos HTML neste capítulo descrevem os blocos de texto.
________________________________________
Abreviações
<p><abbr title= “HyperText_Markup_Language”> HTML </abbr>
e <abbr title= “Cascading_Sytle_Sheets”> CSS </abbr>.
Coloque o ponteiro do mouse sobre as abreviações. </p>
HTML e CSS . Coloque o ponteiro do mouse sobre as abreviações.
________________________________________
Texto invertido
Da direita para esquerda. Da esquerda para direita.________________________________________
Diferenças de pontuação
" quotation mark | Unicode 0022 | UTF-8 22
' apostrophe/quote (single quotation mark) | Unicode 0027 | UTF-8 27
‘ single turned comma quotation mark | Unicode 2018 | UTF-8 E28098
’ single comma quotation mark | Unicode 2019 | UTF-8 E28099
‚ low single comma quotation mark | Unicode 201A | UTF-8 E2809A
‛ single reversed comma quotation mark | Unicode 201B | UTF-8 E2809B
“ double turned comma quotation mark (left) | Unicode 201C | UTF-8 E2809C
” double comma quotation mark (right) | Unicode 201D | UTF-8 E2809D
„ low double comma quotation mark | Unicode 201E | UTF-8 E2809E
‟ double reversed comma quotation mark | Unicode 201F | UTF-8 E2809F
¨ Trema ou Diacritical mark
Cite: https://op.europa.eu/en/web/eu-vocabularies/formex/physical-specifications/character-encoding/quotation-marks
________________________________________
Trabalhando com Lista
Listas Ordenadas
<ol type=“1” start=“2” >
<li>Acordar
<li>Tomar café
<li>Escovar os dentes
<li> A partir do HTML5 o /li de fechamento é opcional!
</ol>
- Acordar
- Tomar café
- Escovar os dentes
- A partir do HTML5 o /li de fechamento é opcional!
(<ol> types= "1, A, a, I, i")
Listas não Ordenadas
<ul type=“square”>
<li> Pão 🥖
<li> Leite 🥛
<li> Tomate 🍅
<li> Alface 🥬
<li> Arroz 🍚
</ul>
- Pão 🥖
- Leite 🥛
- Tomate 🍅
- Alface 🥬
- Arroz 🍚
(<ul> types= disc, circle, square")
________________________________________
