API tools faq
paste
am_dot_com

SW20210312

am_dot_com
Mar 12th, 2021 (edited)
145
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5 7.91 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>HTML continuação e exercícios</title>
  6. </head>
  7. <body>
  8.     <!--
  9.    Criar um mecanismo para navegação interna direta, até cada uma das secções
  10.    Usando o elemento a (âncoras) com hrefs para fragmentos desde mesmo documento
  11.  
  12.    idSectionAboutAnchor
  13.    idSectionExercicio
  14.    idSectionOnCitations
  15.    -->
  16.     <!-- top-down -->
  17.     <section id="idSectionInternalNavigation">
  18.         <h1>Escolha a secção do documento que pretende ler</h1>
  19.         <nav><!-- para delimitar conteúdo dedicado à navegação interna ou externa -->
  20.             <!-- objetos para navegação interna -->
  21.             <a href="#idSectionAboutAnchor">Sobre o elemento âncora</a><br>
  22.             <a href="#idSectionExercicio">Um exercício relacionado com símbolos reservados</a><br>
  23.             <a href="#idSectionOnCitations">Sobre formas de fazer citações</a><br>
  24.             <a href="1.html">O primeiro documento do dia</a>
  25.         </nav>
  26.     </section>
  27.     <hr>
  28.     <!-- navegação interna no documento (por contraste com navegação para fora do documento / navegação externa) -->
  29.     <!-- notação do camelo / camel notation
  30.    prática para nomes de identificadores
  31.    um identificador deve começar por uma letra pequena do alfabeto US, de a-z
  32.    seguida de qualquer sequência de letras pequenas ou grandes (de a a z),
  33.    e/ou digitos de 0 a 9
  34.    e também é aceitável o underscore _
  35.    -->
  36.     <section id="idSectionAboutAnchor">
  37.         <h1>O elemento âncora (a)</h1>
  38.         <h2>com o qual fazemos hiperligações</h2>
  39.         <p>A hiperligação é o objeto fundamental em hipertexto, permitindo a navegação entre <strong>partes
  40.             do mesmo documento</strong> e/ou entre documentos diferentes.</p>
  41.         <p>Essa navegação, assim livre, permite o consumo não linear de conteúdos.</p>
  42.         <p>Em HTML podemos fazer hiperligações pelo elemento "a", que significa "âncora".</p>
  43.  
  44.         <a></a><!-- âncora vazia - a âncora mais simples -->
  45.         <br>
  46.         <a>uma âncora com conteúdo</a><!-- âncora com conteúdo, mas sem hiperligação ; ou seja, inútil -->
  47.         <br>
  48.         <a href="Uniform Resource Locator (URL) ao qual liga">conteúdo</a><!-- endereço inválido -->
  49.         <br>
  50.         <!-- navegação para fora deste documento / navegação externa -->
  51.         <a
  52.            id="idPrimeiraAncora"
  53.            href="https://arturmarques.com/edu/sw/"
  54.            title="um website externo a esta página"
  55.        >A página de suporte de Sistemas Web</a>
  56.         <!--
  57.        href deve ter como valor um URL / Uniform Resource Locator
  58.        um mecanismo de endereçamento de objetos
  59.        serviceSchema://[user:password@]domainName/path|#fragment
  60.  
  61.        http://artur:1234@arturmarques.com/caminho1/sub-caminho1/doc.pdf
  62.        https://artur:1234@arturmarques.com/caminho1/sub-caminho1/doc.pdf
  63.  
  64.        ftp://artur:1234@arturmarques.com/caminho1/sub-caminho1/doc.pdf
  65.        ftp://site.net/caminho1/sub-caminho1/doc.pdf
  66.        URLs não são necessariamente únicos
  67.         -->
  68.         <br>
  69.         <!-- phishing / navegação externa / para o exterior do documento corrente -->
  70.         <a href="https://siteObscuro.com" title="https://www.cgd.pt/">https://www.cgd.pt/</a>
  71.     </section>
  72.  
  73.     <hr>
  74.     <!--
  75.    o id é um atributo global (pode ser utilizado em qualquer elemento)
  76.    o seu valor é uma string que deve ser única por documento
  77.    serve para identificar univocamente o elemento; ie para distingui-lo de qualquer outro elemento
  78.    em situações em que a identificação única seja relevante:
  79.    - para navegação interna (TODO "to do")
  80.    - na programação JS
  81.    -->
  82.     <!--<p id="idSectionExercicio">Isto funciona</p>-->
  83.     <section id="idSectionExercicio" lang="pt"><!-- delimitar conteúdo considerado "uno", consistente -->
  84.         <header><!-- contentor de headings / cabeçalhos / meta-informações de relevância de ordem n-->
  85.             <h1>Exercício #01</h1>
  86.             <h2>a necessidade de codificação especial para certos símbolos (reservados)</h2>
  87.         </header>
  88.         <!-- &codificação;
  89.        &agrave;
  90.        &ccedil;
  91.        &eacute;
  92.        &#65;
  93.        -->
  94.         <!--
  95.        Exercício #1: escrever um documento HTML que, quando interpretado por um browser
  96.        moderno, faça aparecer o seguinte texto:
  97.        a marca <html> inaugura um documento HTML
  98.        -->
  99.         a marca &lt;html&gt; inaugura um documento HTML<br>
  100.         o elemento &lt;p&gt; é para delimitar parágrafos<br>
  101.  
  102.         <p>2&lt;3</p>
  103.     </section>
  104.     <hr><!-- quebra semântica -->
  105.     <section id="idSectionOnCitations">
  106.         <header>
  107.             <h1>Elementos relacionados com citações</h1>
  108.             <h2>situações de atribuição de conteúdo a uma fonte</h2>
  109.             <h3>cite, q, blockquote</h3>
  110.         </header>
  111.         <!-- citação muito pobre, a exigir melhoria TODO: utilizar âncoras para documentos  -->
  112.         <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite -->
  113.         <p>O site
  114.             <cite>
  115.                 <a href="https://netmetrics.com/">com mais tráfego durante janeiro foi google.com</a>
  116.             </cite>
  117.         </p>
  118.  
  119.         <!-- citações single-line -->
  120.         <!-- cite é um elemento e é um atributo, também, em HTML -->
  121.         <!-- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q -->
  122.         <q cite="fonte da citação, que pode ser plain text">
  123.             conteúdo não delimitado por elementos
  124.         </q><br>
  125.         <q cite="William Shakespeare">To be or not to be, that is the question</q><br>
  126.         <q cite="https://en.wikipedia.org/wiki/Niki_Lauda">Victory teaches you nothing</q><br>
  127.  
  128.         <!--
  129.        dois atalhos de keyboard relevantes em PHPSTORM
  130.        ALT+1 - colapsar/expandir a janela de projeto
  131.        CTRL+Q - ajuda em contexto
  132.        -->
  133.         <!-- citações que podem incluir outros elementos -->
  134.         <blockquote cite="https://en.wikipedia.org/wiki/Mike_Tyson">
  135.             <p>Everyone has a plan, until punched on the face.</p>
  136.             <p>I dare you.</p>
  137.         </blockquote>
  138.  
  139.         <p>Vimos o interpretador a utilizar uma apresentação em itálico, aquando
  140.         da utilização do elemento cite.</p>
  141.         <!-- lt = less than < ; gt = greater than > -->
  142.         <p>Vejamos o que aparece com os elementos
  143.             <abbr title="emphasize">&lt;em&gt;</abbr> e
  144.             <abbr title="italic">&lt;i&gt;</abbr>
  145.         </p>
  146.         <p>Exemplo de <abbr title="emphasize">&lt;em&gt;</abbr>:
  147.             <em>isto é importante</em>
  148.         </p>
  149.         <p>Exemplo de <abbr title="italic">&lt;i&gt;</abbr>:
  150.             <i>isto é itálico</i>
  151.         </p>
  152.  
  153.         <!--
  154.        em significa "emphasize", "enfatizar", "dar relevância"
  155.        e deve ser utilizado para delimitar conteúdo que consideremos que, precisamente,
  156.        deve ser "enfatizado"/"relevado"/"destacado"
  157.  
  158.        i significa conteúdo com a semântica de apresentado em itálico
  159.  
  160.        b significa conteúdo para ser apresentado a "bold"
  161.  
  162.        strong significa conteúdo de forte importância
  163.  
  164.        b e strong conduzem à mesma apresentação
  165.        -->
  166.  
  167.         <strong>Isto é de FORTE importância</strong><br>
  168.         <b>Isto é bold semântico, uma herança de elementos apresentações pre-HTML5</b>
  169.     </section>
  170.  
  171.     <hr>
  172.     <section><!-- segue-se conteúdo que faz sentido "junto" -->
  173.         <!-- div , del  -->
  174.         <div><!-- sem semântica é um mero agrupador de construções -->
  175.             <p>Agora está <del>sol</del> nevoeiro.</p>
  176.             <p>O vencedor da prova foi o <del>João</del> Fernando.</p>
  177.         </div>
  178.  
  179.         <p>A equação mais conhecida de Albert Einstein: E=MC<sup>2</sup></p>
  180.         <p>Eu só gosto de beber H<sub>2</sub>O</p>
  181.     </section>
  182.  
  183. </body>
  184. </html>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!