Skip to content

Commit

Permalink
content: html-intro - update
Browse files Browse the repository at this point in the history
  • Loading branch information
@luizchaves
luizchaves committed Oct 22, 2024
1 parent f041da8 commit 038cebc
Show file tree
Hide file tree
Showing 9 changed files with 61 additions and 56 deletions.
0 ...es/html/introduction/hyperlink/index.html → ...ntroduction/hyperlink-external/index.html
View file
File renamed without changes.
0 ...ntroduction/hyperlink-internal/index.html → ...ntroduction/hyperlink-fragment/index.html
View file
File renamed without changes.
13 changes: 10 additions & 3 deletions public/codes/html/introduction/hyperlink-pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,19 @@
<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>Lista</title>
<title>Index</title>
</head>
<body>
<h1>Index</h1>
<p>
<a href="pages/page.html">Page</a><br />
<a href="./pages/page.html">Page</a>
<!-- 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>
</body>
</html>
9 changes: 9 additions & 0 deletions public/codes/html/introduction/hyperlink-pages/pages/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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="/dw/codes/html/introduction/hyperlink-pages/index.html">
Page 2 Index
</a>
</p>
</body>
</html>
9 changes: 8 additions & 1 deletion public/codes/html/introduction/image-parent/pages/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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="/dw/codes/html/introduction/image-parent/imgs/ifpb-logo.png"
alt="Logo do IFPB"
/>
</body>
</html>
13 changes: 9 additions & 4 deletions public/codes/html/introduction/image/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,18 @@
<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>Image</title>
</head>
<body>
<!-- Endereço relativo (index.html => image.png) -->
<!-- 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 -->
<img src="/var/www/site/pages/img/ifpb-logo.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"
/>
</body>
</html>
2 changes: 1 addition & 1 deletion src/components/CodeHtmlPreview.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
2 changes: 1 addition & 1 deletion src/components/HtmlPreview.astro
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const codeName = src?.split('/')?.at(-2);
}
</div>

<div class="code-preview overflow-hidden">
<div class="code-preview overflow-hidden m-0">
{
src && isShowIframe ? (
<Iframe
Expand Down
69 changes: 23 additions & 46 deletions src/content/classnotes/html/introduction/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 = ``;

Expand Down Expand Up @@ -247,7 +248,7 @@ Referências:

### Estrutura básica

<CodeHtmlCssPreview
<CodeHtmlPreview
src="/codes/html/introduction/basic-structure"
onlyBody={false}
/>
Expand All @@ -256,31 +257,27 @@ Referências:

### 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/hyperlink"
<CodeHtmlPreview
src="/codes/html/introduction/hyperlink-external"
isShowIframe={false}
/>

Atributo `target`:

<CodeHtmlCssPreview
<CodeHtmlPreview
src="/codes/html/introduction/hyperlink-target"
isShowIframe={false}
/>

Link interno (#):
Link interno:

```plaintext title="Estrutura da URL"
query
Expand All @@ -289,51 +286,31 @@ Link interno (#):
https://ifpb.github.io:80/dw/html/introduction/?name=ifpb#hyperlink
```

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

<CodePreview
src="/codes/html/introduction/hyperlink-internal/index.html"
onlyBody={true}
/>
<CodeHtmlPreview src="/codes/html/introduction/hyperlink-fragment" />

Link entre páginas:

<CodeHtmlCssPreview
src="/codes/html/introduction/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" />

<CodeHtmlPreview src="/codes/html/introduction/image" />

<CodeHtmlCssPreview src="/codes/html/introduction/image" />
Parent directory:

Diretório (..):
<CodeTree src="/codes/html/introduction/image-parent" />

<CodeHtmlCssPreview
<CodeHtmlPreview
src="/codes/html/introduction/image-parent"
codeTree={true}
htmlFile="pages/index.html"
Expand All @@ -350,7 +327,7 @@ Diretório (..):

Exemplo:

<CodeHtmlCssPreview src="/codes/html/introduction/list" />
<CodeHtmlPreview src="/codes/html/introduction/list" />

### Tabela

Expand All @@ -363,4 +340,4 @@ C++ 12.96%
C# 8.21
```

<CodeHtmlCssPreview src="/codes/css/table/table-html" />
<CodeHtmlPreview src="/codes/css/table/table-html" />

0 comments on commit 038cebc

Please sign in to comment.