FelipeInTokyo2022: HTML5

________________________________________

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

Curso em video no YT

https://github.com/gustavoguanabara

https://gustavoguanabara.github.io

https://www.cursoemvideo.com

https://www.hostnet.com.br

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://www.w3.org/standards/

https://html.spec.whatwg.org/multipage/

https://www.w3schools.com

________________________________________

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

Localizar IP

Chrome web store extension: web developer !!!

________________________________________

Software Recomendado

https://www.google.com/chrome/

https://code.visualstudio.com/

https://www.gimp.org/

________________________________________

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>

________________________________________

Icones

https://www.iconarchive.com

https://favicon.io


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

x²+3 and H₂O

- - - - - - - - - - - - - -

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

________________________________________

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

________________________________________

FelipeInTokyo2022

Sunday, April 30, 2023

HTML5

HTML5 Template:

Links do Curso

Referências online

Livros

Livros de Design

Livros digitais

Links Úteis

Software Recomendado

Conteúdo HTML

Tags <>

Icones

Hierarquia de Títulos

html5 obsolet tags

Semântica

Para criar um estilo para toda a página em CSS

Formatações de texto

Citações simples

Citações completas

Abreviações

Texto invertido

Diferenças de pontuação

Trabalhando com Lista

Listas Ordenadas

Listas não Ordenadas

No comments:

Post a Comment

How to Create GEOMETRIC FIGURES in Gimp

Report Abuse

Labels