content: html-intro - update

ifpb · Oct 22, 2024 · 20275d8 · 20275d8
1 parent d16bd7f
commit 20275d8
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 90 deletions.
diff --git a/public/codes/html/introduction-html/hyperlink-pages/index.html b/public/codes/html/introduction-html/hyperlink-pages/index.html
diff --git a/public/codes/html/introduction-html/image/index.html b/public/codes/html/introduction-html/image/index.html
diff --git a/...roduction-html/basic-structure/index.html → ...l/introduction/basic-structure/index.html b/...roduction-html/basic-structure/index.html → ...l/introduction/basic-structure/index.html
diff --git a/...ml/introduction-html/hyperlink/index.html → ...ntroduction/hyperlink-external/index.html b/...ml/introduction-html/hyperlink/index.html → ...ntroduction/hyperlink-external/index.html
diff --git a/...uction-html/hyperlink-internal/index.html → ...ntroduction/hyperlink-fragment/index.html b/...uction-html/hyperlink-internal/index.html → ...ntroduction/hyperlink-fragment/index.html
diff --git a/public/codes/html/introduction/hyperlink-pages/index.html b/public/codes/html/introduction/hyperlink-pages/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Index</title>
+  </head>
+  <body>
+    <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="/lm/codes/html/introduction/hyperlink-pages/pages/page.html">
+        Index 2 Page
+      </a>
+    </p>
+  </body>
+</html>
diff --git a/...tion-html/hyperlink-pages/pages/page.html → ...roduction/hyperlink-pages/pages/page.html b/...tion-html/hyperlink-pages/pages/page.html → ...roduction/hyperlink-pages/pages/page.html
@@ -8,5 +8,14 @@
   </head>
   <body>
     <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="/lm/codes/html/introduction/hyperlink-pages/index.html">
+        Page 2 Index
+      </a>
+    </p>
   </body>
 </html>
diff --git a/...oduction-html/hyperlink-target/index.html → .../introduction/hyperlink-target/index.html b/...oduction-html/hyperlink-target/index.html → .../introduction/hyperlink-target/index.html
diff --git a/...tion-html/image-parent/imgs/ifpb-logo.png → ...roduction/image-parent/imgs/ifpb-logo.png b/...tion-html/image-parent/imgs/ifpb-logo.png → ...roduction/image-parent/imgs/ifpb-logo.png
diff --git a/...uction-html/image-parent/pages/index.html → ...ntroduction/image-parent/pages/index.html b/...uction-html/image-parent/pages/index.html → ...ntroduction/image-parent/pages/index.html
@@ -4,9 +4,16 @@
     <meta charset="UTF-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Document</title>
+    <title>Imagem</title>
   </head>
   <body>
+    <!-- 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="/lm/codes/html/introduction/image-parent/imgs/ifpb-logo.png"
+      alt="Logo do IFPB"
+    />
   </body>
 </html>
diff --git a/...ntroduction-html/image/imgs/ifpb-logo.png → ...tml/introduction/image/imgs/ifpb-logo.png b/...ntroduction-html/image/imgs/ifpb-logo.png → ...tml/introduction/image/imgs/ifpb-logo.png
diff --git a/public/codes/html/introduction/image/index.html b/public/codes/html/introduction/image/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Image</title>
+  </head>
+  <body>
+    <!-- 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="/lm/codes/html/introduction/image/imgs/ifpb-logo.png"
+      alt="Logo do IFPB"
+    />
+  </body>
+</html>
diff --git a/...es/html/introduction-html/list/index.html → ...c/codes/html/introduction/list/index.html b/...es/html/introduction-html/list/index.html → ...c/codes/html/introduction/list/index.html
diff --git a/src/components/CodeHtmlPreview.astro b/src/components/CodeHtmlPreview.astro
@@ -29,7 +29,7 @@ const {
 const htmlPath = `${src}/${htmlFile ?? 'index.html'}`;
 ---
 
-<div class="flex flex-col space-y-0.5">
+<div class="flex flex-col space-y-0.5 mb-8">
   <HtmlPreview
     src={htmlPath}
     height={height}

diff --git a/src/consts.ts b/src/consts.ts
@@ -46,8 +46,8 @@ export const GITHUB_EDIT_URL = 'https://github.com/ifpb/lm/tree/main';
 export const CONTENT_SLUGS = [
   // 'web-server/live-server',
   'markup/markup-language',
-  'html/introduction-html',
-  'css/introduction-css',
+  'html/introduction',
+  'css/introduction',
   'css/cascade-inheritance',
   'css/text-style',
   'css/web-fonts',

diff --git a/...classnotes/css/introduction-css/index.mdx → ...ent/classnotes/css/introduction/index.mdx b/...classnotes/css/introduction-css/index.mdx → ...ent/classnotes/css/introduction/index.mdx
diff --git a/...assnotes/html/introduction-html/index.mdx → ...nt/classnotes/html/introduction/index.mdx b/...assnotes/html/introduction-html/index.mdx → ...nt/classnotes/html/introduction/index.mdx
@@ -2,9 +2,10 @@
 title: Introdução ao HTML
 ---
 
+import CodeTree from '../../../../components/CodeTree.astro';
 import CodePreview from '../../../../components/CodePreview.astro';
 import HtmlPreview from '../../../../components/HtmlPreview.astro';
-import CodeHtmlCssPreview from '../../../../components/CodeHtmlCssPreview.astro';
+import CodeHtmlPreview from '../../../../components/CodeHtmlPreview.astro';
 
 export const imageCodeTree = ``;
 
@@ -229,15 +230,16 @@ Referência:
 - [HTML attribute reference | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes)
 - [Attributes | WHATWG](https://html.spec.whatwg.org/multipage/indices.html#attributes-3)
 
-### Entidades do HTML
+### Entidades do HTML (Símbolos)
 
-| Caracter | Descrição      | Nome   | Número |
-| -------- | -------------- | ------ | ------ |
-| \"       | quotation mark | &quot; | &#34;  |
-| \'       | apostrophe     | &apos; | &#39;  |
-| \&       | ampersand      | &amp;  | &#38;  |
-| \<       | less-than      | &lt;   | &#60;  |
-| \>       | greater-than   | &gt;   | &#62;  |
+| Caracter | Descrição      | Nome       | Número     |
+| -------- | -------------- | ---------- | ---------- |
+| \"       | quotation mark | &amp;quot; | &amp;#34;  |
+| \'       | apostrophe     | &amp;apos; | &amp;#39;  |
+| \&       | ampersand      | &amp;amp;  | &amp;#38;  |
+| \<       | less-than      | &amp;lt;   | &amp;#60;  |
+| \>       | greater-than   | &amp;gt;   | &amp;#62;  |
+| ©        | copyright      | &amp;copy; | &amp;#169; |
 
 Referências:
 
@@ -246,87 +248,70 @@ Referências:
 
 ### Estrutura básica
 
-<CodeHtmlCssPreview
-  src="/codes/html/introduction-html/basic-structure"
+<CodeHtmlPreview
+  src="/codes/html/introduction/basic-structure"
   onlyBody={false}
 />
 
 ## Tags do HTML
 
 ### Hyperlink
 
-```plaintext title="Sintaxe"
-hyperlink = content + url
-
-content = text, image...
-```
+hyperlink = url + content (text, image...):
 
 ```html title="Sintaxe Básica"
 <a href="url">content</a>
 ```
 
-Exemplo Básico:
+Link externo:
 
-<CodeHtmlCssPreview
-  src="/codes/html/introduction-html/hyperlink"
+<CodeHtmlPreview
+  src="/codes/html/introduction/hyperlink-external"
   isShowIframe={false}
 />
 
 Atributo `target`:
 
-<CodeHtmlCssPreview
-  src="/codes/html/introduction-html/hyperlink-target"
+<CodeHtmlPreview
+  src="/codes/html/introduction/hyperlink-target"
   isShowIframe={false}
 />
 
-Link interno (#):
+Link interno:
 
-<HtmlPreview title ="hyperlink-internal">
-  <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>
-</HtmlPreview>
+```plaintext title="Estrutura da URL"
+                                                 query
+ schema      domain   port        path           string   fragment
+┌───┴──┐┌──────┴─────┐┌┴┐┌─────────┴──────────┐┌───┴────┐┌───┴────┐
+https://ifpb.github.io:80/dw/html/introduction/?name=ifpb#hyperlink
+```
 
-<CodePreview
-  src="/codes/html/introduction-html/hyperlink-internal/index.html"
-  onlyBody={true}
-/>
+<CodeHtmlPreview src="/codes/html/introduction/hyperlink-fragment" />
 
 Link entre páginas:
 
-<CodeHtmlCssPreview
-  src="/codes/html/introduction-html/hyperlink-pages"
-  codeTree={true}
-  isShowIframe={false}
-/>
+<CodeTree src="/codes/html/introduction/hyperlink-pages" />
+
+<CodeHtmlPreview src="/codes/html/introduction/hyperlink-pages" />
+
+<CodeHtmlPreview src="/codes/html/introduction/hyperlink-pages/pages" htmlFile="page.html" />
 
 ### Imagem
 
 ```html title="Sintaxe"
 <img src="url" alt="text alternative" />
 ```
 
-Exemplo (Abrir no Liver Server e localmente):
-
-```plaintext showLineNumbers title="Arquivos"
-/
-└── var
-    └── www
-        └── site
-            └── pages
-                ├── index.html
-                └── img
-                    └── image.png
-```
+<CodeTree src="/codes/html/introduction/image" />
 
-<CodeHtmlCssPreview src="/codes/html/introduction-html/image" />
+<CodeHtmlPreview src="/codes/html/introduction/image" />
 
-Diretório (..):
+Parent directory:
 
-<CodeHtmlCssPreview
-  src="/codes/html/introduction-html/image-parent"
+<CodeTree src="/codes/html/introduction/image-parent" />
+
+<CodeHtmlPreview
+  src="/codes/html/introduction/image-parent"
   codeTree={true}
   htmlFile="pages/index.html"
   linkName="image-parent"
@@ -342,4 +327,17 @@ Diretório (..):
 
 Exemplo:
 
-<CodeHtmlCssPreview src="/codes/html/introduction-html/list" />
+<CodeHtmlPreview src="/codes/html/introduction/list" />
+
+### Tabela
+
+```plaintext title="Conteúdo Tabular"
+Linguagem Utilização
+Python    14.51%
+C         14.41%
+Java      13.23%
+C++       12.96%
+C#        8.21
+```
+
+<CodeHtmlPreview src="/codes/css/table/table-html" />