Introdução ao HTML

Sintase do HTML

Tags

Estrutura de uma tag
openning              closing
tag      content      tag
┌┴┐┌────────────────┐┌─┴─┐
<p>Lorem ipsum dolor.</p>
└────────────────────────┘
        Element
Estrutura de uma tag
openning              closing
tag      content      tag
┌┴┐┌────────────────┐┌─┴─┐
<p>Lorem ipsum dolor.</p>
└────────────────────────┘
        Element

Exemplos:

Mais exemplos: HTML Reference | MDN
TipoTags
Main root<html>
Document metadata<base>, <head>, <link>, <meta>, <style>, <title>
Sectioning root<body>
Content sectioning<address>, <article>, <aside>, <footer>, <header>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <hgroup>, <main>, <nav>, <section>
Text content<blockquote>, <dd>, <div>, <dl>, <dt>, <figcaption>, <figure>, <hr>, <li>, <menu>, <ol>, <p>, <pre>, <ul>
Inline text semantics<a>, <abbr>, <b>, <bdi>, <bdo>, <br>, <cite>, <code>, <data>, <dfn>, <em>, <i>, <kbd>, <mark>, <q>, <rp>, <rt>, <ruby>, <s>, <samp>, <small>, <span>, <strong>, <sub>, <sup>, <time>, <u>, <var>, <wbr>
Image and multimedia<area>, <audio>, <img>, <map>, <track>, <video>
Embedded content<embed>, <iframe>, <object>, <picture>, <portal>, <source>
SVG and MathML<svg>, <math>
Scripting<canvas>, <noscript>, <script>
Demarcating edits<del>, <ins>
Table content<caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
Forms<button>, <datalist>, <fieldset>, <form>, <input>, <label>, <legend>, <meter>, <optgroup>, <option>, <output>, <progress>, <select>, <textarea>
Interactive elements<details>, <dialog>, <summary>
Web Components<slot>, <template>
Obsolete and deprecated elements<acronym>, <applet>, <bgsound>, <big>, <blink>, <center>, <dir>, <font>, <frame>, <frameset>, <image>, <keygen>, <marquee>, <menuitem>, <nobr>, <noembed>, <noframes>, <param>, <plaintext>, <rb>, <rtc>, <spacer>, <strike>, <tt>, <xmp>

Referências:

Atributo de tag

Formato de atributo de tag
attribute (chaves="valor")
   ┌─────┴────┐
<p lang="pt-BR">Lorem ipsum dolor.</p>
Formato de atributo de tag
attribute (chaves="valor")
   ┌─────┴────┐
<p lang="pt-BR">Lorem ipsum dolor.</p>
Tags sem conteúdos
<meta name="description" content="A description of the page" />
Tags sem conteúdos
<meta name="description" content="A description of the page" />

Exemplos:

Mais exemplos: HTML attribute Reference | MDN
AtributosTags
accept<form>, <input>
accept-charset<form>
accesskeyGlobal attribute
action<form>
align<applet>, <caption>, <col>, <colgroup>, <hr>, <iframe>, <img>, <table>, <tbody>, <td>, <tfoot>, <th>, <thead>, <tr>
allow<iframe>
alt<applet>, <area>, <img>, <input>
async<script>
autocapitalizeGlobal attribute
autocomplete<form>, <input>, <select>, <textarea>
autofocus<button>, <input>, <keygen>, <select>, <textarea>
autoplay<audio>, <video>
background<body>, <table>, <td>, <th>
bgcolor<body>, <col>, <colgroup>, <marquee>, <table>, <tbody>, <tfoot>, <td>, <th>, <tr>
border<img>, <object>, <table>
buffered<audio>, <video>
capture<input>
challenge<keygen>
charset<meta>, <script>
checked<input>
cite<blockquote>, <del>, <ins>, <q>
classGlobal attribute
code<applet>
codebase<applet>
color<font>, <hr>
cols<textarea>
colspan<td>, <th>
content<meta>
contenteditableGlobal attribute
contextmenuGlobal attribute
controls<audio>, <video>
coords<area>
crossorigin<audio>, <img>, <link>, <script>, <video>
csp Experimental<iframe>
data<object>
data-*Global attribute
datetime<del>, <ins>, <time>
decoding<img>
default<track>
defer<script>
dirGlobal attribute
dirname<input>, <textarea>
disabled<button>, <fieldset>, <input>, <keygen>, <optgroup>, <option>, <select>, <textarea>
download<a>, <area>
draggableGlobal attribute
enctype<form>
enterkeyhint Experimental<textarea>, contenteditable
for<label>, <output>
form<button>, <fieldset>, <input>, <keygen>, <label>, <meter>, <object>, <output>, <progress>, <select>, <textarea>
formaction<input>, <button>
formenctype<button>, <input>
formmethod<button>, <input>
formnovalidate<button>, <input>
formtarget<button>, <input>
headers<td>, <th>
height<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>
hiddenGlobal attribute
high<meter>
href<a>, <area>, <base>, <link>
hreflang<a>, <link>
http-equiv<meta>
idGlobal attribute
integrity<link>, <script>
intrinsicsize Deprecated<img>
inputmode<textarea>, contenteditable
ismap<img>
itempropGlobal attribute
keytype<keygen>
kind<track>
label<optgroup>, <option>, <track>
langGlobal attribute
language Deprecated<script>
loading Experimental<img>, <iframe>
list<input>
loop<audio>, <bgsound>, <marquee>, <video>
low<meter>
manifest Deprecated<html>
max<input>, <meter>, <progress>
maxlength<input>, <textarea>
minlength<input>, <textarea>
media<a>, <area>, <link>, <source>, <style>
method<form>
min<input>, <meter>
multiple<input>, <select>
muted<audio>, <video>
name<button>, <form>, <fieldset>, <iframe>, <input>, <keygen>, <object>, <output>, <select>, <textarea>, <map>, <meta>, <param>
novalidate<form>
open<details>, <dialog>
optimum<meter>
pattern<input>
ping<a>, <area>
placeholder<input>, <textarea>
playsinline<video>
poster<video>
preload<audio>, <video>
readonly<input>, <textarea>
referrerpolicy<a>, <area>, <iframe>, <img>, <link>, <script>
rel<a>, <area>, <link>
required<input>, <select>, <textarea>
reversed<ol>
roleGlobal attribute
rows<textarea>
rowspan<td>, <th>
sandbox<iframe>
scope<th>
scoped Deprecated<style>
selected<option>
shape<a>, <area>
size<input>, <select>
sizes<link>, <img>, <source>
slotGlobal attribute
span<col>, <colgroup>
spellcheckGlobal attribute
src<audio>, <embed>, <iframe>, <img>, <input>, <script>, <source>, <track>, <video>
srcdoc<iframe>
srclang<track>
srcset<img>, <source>
start<ol>
step<input>
styleGlobal attribute
summary Deprecated<table>
tabindexGlobal attribute
target<a>, <area>, <base>, <form>
titleGlobal attribute
translateGlobal attribute
type<button>, <input>, <embed>, <object>, <ol>, <script>, <source>, <style>, <menu>, <link>
usemap<img>, <input>, <object>
value<button>, <data>, <input>, <li>, <meter>, <option>, <progress>, <param>
width<canvas>, <embed>, <iframe>, <img>, <input>, <object>, <video>
wrap<textarea>

Referência:

Entidades do HTML (Símbolos)

CaracterDescriçãoNomeNúmero
”quotation mark&quot;&#34;
’apostrophe&apos;&#39;
&ampersand&amp;&#38;
<less-than&lt;&#60;
>greater-than&gt;&#62;
©copyright&copy;&#169;

Referências:

Estrutura básica

basic-structure 
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Bem-vindos</title>
  </head>
  <body>
    <h1>Olá, turma!</h1>
    <p>Meu primeiro parágrafo</p>
  </body>
</html>
 
<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <title>Bem-vindos</title>
  </head>
  <body>
    <h1>Olá, turma!</h1>
    <p>Meu primeiro parágrafo</p>
  </body>
</html>

Tags do HTML

hyperlink = url + content (text, image…):

Sintaxe Básica
<a href="url">content</a>
Sintaxe Básica
<a href="url">content</a>

Link externo:

hyperlink-external
Lista ifpb 
<a href="http://www.ifpb.edu.br/">ifpb</a>
<a href="http://www.ifpb.edu.br/">ifpb</a>

Atributo target:

hyperlink-target
Lista ifpb 
<a href="http://www.ifpb.edu.br/" target="_blank">ifpb</a>
<a href="http://www.ifpb.edu.br/" target="_blank">ifpb</a>

Link interno:

Estrutura da URL
                                                 query
 schema      domain   port        path           string   fragment
┌───┴──┐┌──────┴─────┐┌┴┐┌─────────┴──────────┐┌───┴────┐┌───┴────┐
https://ifpb.github.io:80/dw/html/introduction/?name=ifpb#hyperlink
Estrutura da URL
                                                 query
 schema      domain   port        path           string   fragment
┌───┴──┐┌──────┴─────┐┌┴┐┌─────────┴──────────┐┌───┴────┐┌───┴────┐
https://ifpb.github.io:80/dw/html/introduction/?name=ifpb#hyperlink
hyperlink-fragment 
<nav>
  <a href="#tags">Tags</a><br />
  <a href="#atributo-de-tag">Atributo de tag</a><br />
  <a href="#entidade-do-html">Entidade do HTML</a>
</nav>
 
<h3 id="tags">Tags</h3>
<p>...</p>
 
<h3 id="atributo-de-tag">Atributo de tag</h3>
<p>...</p>
 
<h3 id="entidade-do-html">Entidade do HTML</h3>
<p>...</p>
<nav>
  <a href="#tags">Tags</a><br />
  <a href="#atributo-de-tag">Atributo de tag</a><br />
  <a href="#entidade-do-html">Entidade do HTML</a>
</nav>
 
<h3 id="tags">Tags</h3>
<p>...</p>
 
<h3 id="atributo-de-tag">Atributo de tag</h3>
<p>...</p>
 
<h3 id="entidade-do-html">Entidade do HTML</h3>
<p>...</p>

Link entre páginas:

Arquivos
hyperlink-pages
├── index.html
└── pages
    └── page.html
Arquivos
hyperlink-pages
├── index.html
└── pages
    └── page.html
hyperlink-pages 
<h1>Index</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="pages/page.html">Index 2 Page</a><br />
  <a href="./pages/page.html">Index 2 Page</a><br />
 
  <!-- Endereço absoluto (page.html) -->
  <a href="/dw/codes/html/introduction/hyperlink-pages/pages/page.html">
    Index 2 Page
  </a>
</p>
<h1>Index</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="pages/page.html">Index 2 Page</a><br />
  <a href="./pages/page.html">Index 2 Page</a><br />
 
  <!-- Endereço absoluto (page.html) -->
  <a href="/dw/codes/html/introduction/hyperlink-pages/pages/page.html">
    Index 2 Page
  </a>
</p>
pages 
<h1>Page</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="../index.html">Page 2 Index</a><br />
 
  <!-- Endereço absoluto (index.html) -->
  <a href="/dw/codes/html/introduction/hyperlink-pages/index.html">
    Page 2 Index
  </a>
</p>
<h1>Page</h1>
<p>
  <!-- Endereço relativo (index.html => page.html) -->
  <a href="../index.html">Page 2 Index</a><br />
 
  <!-- Endereço absoluto (index.html) -->
  <a href="/dw/codes/html/introduction/hyperlink-pages/index.html">
    Page 2 Index
  </a>
</p>

Imagem

Sintaxe
<img src="url" alt="text alternative" />
Sintaxe
<img src="url" alt="text alternative" />
Arquivos
image
├── imgs
│   └── ifpb-logo.png
└── index.html
Arquivos
image
├── imgs
│   └── ifpb-logo.png
└── index.html
image 
<!-- Endereço relativo (index.html => ifpb-logo.png) -->
<img src="imgs/ifpb-logo.png" alt="Logo do IFPB" />
<img src="./imgs/ifpb-logo.png" alt="Logo do IFPB" />
<img src="imgs/none.png" alt="Logo do IFPB" />
 
<!-- Endereço absoluto (ifpb-logo.png) -->
<img
  src="/dw/codes/html/introduction/image/imgs/ifpb-logo.png"
  alt="Logo do IFPB"
/>
<!-- Endereço relativo (index.html => ifpb-logo.png) -->
<img src="imgs/ifpb-logo.png" alt="Logo do IFPB" />
<img src="./imgs/ifpb-logo.png" alt="Logo do IFPB" />
<img src="imgs/none.png" alt="Logo do IFPB" />
 
<!-- Endereço absoluto (ifpb-logo.png) -->
<img
  src="/dw/codes/html/introduction/image/imgs/ifpb-logo.png"
  alt="Logo do IFPB"
/>

Parent directory:

Arquivos
image-parent
├── imgs
│   └── ifpb-logo.png
└── pages
    └── index.html
Arquivos
image-parent
├── imgs
│   └── ifpb-logo.png
└── pages
    └── index.html
image-parent 
<!-- Endereço relativo (index.html => ifpb-logo.png) -->
<img src="../imgs/ifpb-logo.png" alt="Logo do IFPB" />
 
<!-- Endereço absoluto (ifpb-logo.png) -->
<img
  src="/dw/codes/html/introduction/image-parent/imgs/ifpb-logo.png"
  alt="Logo do IFPB"
/>
<!-- Endereço relativo (index.html => ifpb-logo.png) -->
<img src="../imgs/ifpb-logo.png" alt="Logo do IFPB" />
 
<!-- Endereço absoluto (ifpb-logo.png) -->
<img
  src="/dw/codes/html/introduction/image-parent/imgs/ifpb-logo.png"
  alt="Logo do IFPB"
/>

Lista

TiposTags
Lista ordenada<ol>, <li>
Lista não ordenada<ul>, <li>
Lista de descrição<dl>, <dt>, <dd>

Exemplo:

list 
<!-- Ordered List - OL -->
<h1>Developer Roles</h1>
<ol>
  <li>Web developer</li>
  <li>Desktop applications developer</li>
  <li>Mobile developer</li>
</ol>
 
<!-- Unordered List - UL -->
<h1>Browser Market Share</h1>
<ul>
  <li>Chrome</li>
  <li>Safari</li>
  <li>Edge</li>
  <li>Firefox</li>
</ul>
 
<p>
  Fonte: (<a
    href="https://en.wikipedia.org/wiki/Usage_share_of_web_browsers"
    >Wikipedia</a
  >)
</p>
 
<!-- Description List - DL -->
<h1>Web Terms</h1>
<dl>
  <dt>HTTP</dt>
  <dd>HyperText Transfer Protocol</dd>
  <dt>URL</dt>
  <dd>Uniform Resource Locator</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>JavaScript</dd>
</dl>
<!-- Ordered List - OL -->
<h1>Developer Roles</h1>
<ol>
  <li>Web developer</li>
  <li>Desktop applications developer</li>
  <li>Mobile developer</li>
</ol>
 
<!-- Unordered List - UL -->
<h1>Browser Market Share</h1>
<ul>
  <li>Chrome</li>
  <li>Safari</li>
  <li>Edge</li>
  <li>Firefox</li>
</ul>
 
<p>
  Fonte: (<a
    href="https://en.wikipedia.org/wiki/Usage_share_of_web_browsers"
    >Wikipedia</a
  >)
</p>
 
<!-- Description List - DL -->
<h1>Web Terms</h1>
<dl>
  <dt>HTTP</dt>
  <dd>HyperText Transfer Protocol</dd>
  <dt>URL</dt>
  <dd>Uniform Resource Locator</dd>
  <dt>HTML</dt>
  <dd>HyperText Markup Language</dd>
  <dt>CSS</dt>
  <dd>Cascading Style Sheets</dd>
  <dt>JS</dt>
  <dd>JavaScript</dd>
</dl>

Tabela

Conteúdo Tabular
Linguagem Utilização
Python    14.51%
C         14.41%
Java      13.23%
C++       12.96%
C#        8.21
Conteúdo Tabular
Linguagem Utilização
Python    14.51%
C         14.41%
Java      13.23%
C++       12.96%
C#        8.21
table-html 
<h1>Table</h1>
<table>
  <thead>
    <tr>
      <th>Linguagem</th>
      <th>Utilização</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python</td>
      <td>14.51%</td>
    </tr>
    <tr>
      <td>C</td>
      <td>14.41%</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>13.23%</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>12.96%</td>
    </tr>
    <tr>
      <td>C#</td>
      <td>8.21%</td>
    </tr>
  </tbody>
</table>
<h1>Table</h1>
<table>
  <thead>
    <tr>
      <th>Linguagem</th>
      <th>Utilização</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Python</td>
      <td>14.51%</td>
    </tr>
    <tr>
      <td>C</td>
      <td>14.41%</td>
    </tr>
    <tr>
      <td>Java</td>
      <td>13.23%</td>
    </tr>
    <tr>
      <td>C++</td>
      <td>12.96%</td>
    </tr>
    <tr>
      <td>C#</td>
      <td>8.21%</td>
    </tr>
  </tbody>
</table>

Editar esta página