Home | Academic & Research Portal

Lab 2: Introduction to HTML and CSS

Mon, 01 Jan 0001 00:00:00 +0000

Welcome to the second lab! In this lesson, we’ll learn about the basics of HTML5.

Aims of the lab

Lab-4

Mon, 01 Jan 0001 00:00:00 +0000

Test

Lab 5: HTML5 Semantic Elements

Mon, 01 Jan 0001 00:00:00 +0000

Στα προηγούμενα labs μάθαμε τα βασικά HTML tags (headings, paragraphs, lists, links, images) και πώς να οργανώνουμε δεδομένα με πίνακες και να προσθέτουμε multimedia. Σήμερα θα δούμε τα HTML5 semantic elements - tags που μας βοηθούν να δομήσουμε το περιεχόμενο των σελίδων μας με τρόπο που έχει νόημα.

Στόχοι του Εργαστηρίου

Μετά το πέρας αυτού του εργαστηρίου θα μπορείτε να:

Κατανοείτε τη διαφορά μεταξύ semantic και non-semantic HTML
Χρησιμοποιείτε τα βασικά HTML5 structural (δομικά) elements
Δομείτε σελίδες με σωστή ιεραρχία και οργάνωση
Εφαρμόζετε semantic HTML σε πραγματικά σενάρια (portfolio, product pages, articles)

1. Το `<div>` Tag και η Ανάγκη για Semantic HTML

1.1 Τι είναι το `<div>`

Το <div> (division) είναι ένα generic container element - ένα “γενικό δοχείο” χωρίς ειδικό νόημα. Απλά ομαδοποιεί άλλα στοιχεία μαζί, χωρίς να δηλώνει τι ακριβώς περιέχει.

Το <div> χρησιμοποιούνταν πάρα πολύ στο παρελθόν (και ακόμα χρησιμοποιείται σήμερα) για να ομαδοποιήσουμε περιεχόμενο. Το πρόβλημα; Δεν λέει τίποτα για το τι περιέχει - είναι σαν ένα άδειο κουτί χωρίς ετικέτα.

Γιατί είναι αυτό πρόβλημα;

Όταν εσείς ως προγραμματιστές (ή άλλοι developers) διαβάζετε τον κώδικα και βλέπετε <div>, δεν ξέρετε αν είναι:

Header της σελίδας;
Navigation menu;
Κύριο περιεχόμενο;
Sidebar;
Footer;

“Μα ο χρήστης δεν βλέπει τα tags, γιατί μας ενδιαφέρει;”

Καλή ερώτηση! Ο χρήστης όντως δεν βλέπει τα tags, αλλά:

Screen readers

(για άτομα με προβλήματα όρασης) “διαβάζουν” τα tags και χρησιμοποιούν τη σημασία τους για να πλοηγηθούν στη σελίδα
Search engines

(Google, Bing, κλπ.) αναλύουν τα tags για να καταλάβουν ποιο περιεχόμενο είναι σημαντικό
Άλλοι developers

(ή εσείς στο μέλλον!) χρειάζεται να διαβάσουν και να τροποποιήσουν τον κώδικα
Browsers

μπορούν να προσφέρουν καλύτερες λειτουργίες όταν καταλαβαίνουν τη δομή (π.χ. reader mode)

Για αυτό η HTML5 εισήγαγε semantic elements - tags με συγκεκριμένο νόημα που περιγράφουν τι περιέχουν. Αυτά θα δούμε σήμερα!

1.2 Η Παλιά Προσέγγιση (Πριν το HTML5)

Πριν το HTML5, όλα γίνονταν με <div> και classes:

Το πρόβλημα:

Δεν είναι ξεκάθαρο τι κάνει κάθε τμήμα (χρειάζεται να διαβάσεις τα ονόματα κλάσεων - θα δούμε τις κλάσεις πολύ αναλυτικά στα εργαστήρια CSS)
Δύσκολο για screen readers (accessibility)
Δύσκολο για search engines να καταλάβουν τη δομή

1.3 Η Λύση: HTML5 Semantic Elements

Το HTML5 μας έδωσε semantic tags - tags που περιγράφουν το περιεχόμενό τους:

Τα πλεονεκτήματα:

Καθαρότερος κώδικας
- βλέπεις αμέσως τι κάνει κάθε τμήμα
Accessibility
- screen readers καταλαβαίνουν τη δομή
SEO
- search engines ξέρουν ποιο περιεχόμενο είναι σημαντικό
Maintainability
- πιο εύκολο να δουλέψεις με τον κώδικα αργότερα

Σημαντικό: Το <div> δεν “χάθηκε” - το χρησιμοποιούμε ακόμα όταν χρειαζόμαστε ένα generic container (π.χ. για styling με CSS). Αλλά όταν υπάρχει κατάλληλο semantic tag, το προτιμάμε!

2. Βασικά Δομικά Elements

2.1 `<header>` - Επικεφαλίδα

Το <header> χρησιμοποιείται για την επικεφαλίδα μιας σελίδας ή ενός section. Συνήθως περιέχει:

Logo ή όνομα site
Navigation menu
Εισαγωγικό περιεχόμενο

Πότε το χρησιμοποιούμε:

Στην κορυφή της σελίδας (page header)
Στην αρχή ενός

<article>

ή

<section>

(section header)

Σημείωση: Μπορούμε να έχουμε πολλά <header> elements σε μια σελίδα (ένα για τη σελίδα, ένα για κάθε article, κλπ.)

2.2 `<nav>` - Πλοήγηση

Το <nav> περιέχει navigation links - τα κύρια links (το βασικό μενού πλοήγησης) για να πλοηγηθείς στο site:

Πότε το χρησιμοποιούμε:

Για το

κύριο menu

του site
Για breadcrumbs (π.χ. Home > Portfolio > Project 1)
Για table of contents σε μεγάλα άρθρα

Προσοχή: Δεν χρειάζεται <nav> για κάθε ομάδα links - μόνο για τα σημαντικά navigation sections.

2.3 `<main>` - Κύριο Περιεχόμενο

Το <main> περιέχει το κύριο περιεχόμενο της σελίδας - αυτό που είναι μοναδικό σε αυτή τη σελίδα.

Σημαντικό:

Μόνο

ένα

<main>

ανά σελίδα
Δεν μπαίνει μέσα σε

<header>

,

<footer>

,

<nav>

, ή

<aside>
Περιέχει το μοναδικό περιεχόμενο (όχι πράγματα που επαναλαμβάνονται σε κάθε σελίδα)

2.4 `<footer>` - Υποσέλιδο

Το <footer> χρησιμοποιείται για το υποσέλιδο μιας σελίδας. Συνήθως περιέχει:

Copyright information
Contact info
Links σε social media
Σύνδεσμοι σε σημαντικές σελίδες (privacy policy, terms of service, κλπ.)

Το <footer> μπαίνει στο κάτω μέρος της σελίδας (page footer).

2.5 `<article>` - Αυτόνομο Περιεχόμενο

Το <article> περιέχει self-contained content - περιεχόμενο που έχει νόημα μόνο του, ανεξάρτητα από τη σελίδα.

Πότε το χρησιμοποιούμε:

Blog posts
News articles
Forum posts
Portfolio pieces
Product cards

Κριτήριο: Αν μπορείτε να το πάρετε και να το βάλετε αλλού (άλλη σελίδα) και να έχει ακόμα νόημα → είναι <article>

2.6 `<section>` - Θεματική Ενότητα

Το <section> ομαδοποιεί θεματικά σχετικό περιεχόμενο. Συνήθως έχει ένα heading (h2, h3, κλπ.).

Πότε το χρησιμοποιούμε:

Για να χωρίσεις μια σελίδα σε θεματικές ενότητες
Μέσα σε ένα

<article>

για να οργανώσεις το περιεχόμενο σε υπο-ενότητες

Διαφορά <article> vs <section>:

<article>

= αυτόνομο, μπορεί να σταθεί μόνο του
<section>

= θεματική ομάδα, μέρος κάτι μεγαλύτερου

2.7 `<aside>` - Παράπλευρο Περιεχόμενο

Το <aside> περιέχει περιεχόμενο που σχετίζεται αλλά είναι ξεχωριστό από το κύριο περιεχόμενο.

Πότε το χρησιμοποιούμε:

Sidebar με σχετικό περιεχόμενο
Callout boxes (π.χ. “Γνωρίζετε το…;”)
Σχετικά links
Λίγα λόγια για τον αρθρογράφο (author bio)
…

Προσοχή: Το <aside> δεν σημαίνει αυτόματα “θα εμφανιστεί στο πλάι”. Η τοποθέτηση γίνεται με CSS (που θα δούμε στο επόμενο lab). Το <aside> δηλώνει τη σημασία του περιεχομένου, όχι την εμφάνισή του.

3. Άλλα χρήσιμα Content Tags

3.1 `<mark>` - Επισημασμένο Κείμενο

Το <mark> χρησιμοποιείται για να επισημάνουμε κείμενο - σαν highlighter:

Πότε το χρησιμοποιούμε:

Search results (επισημαίνουμε σχετικούς όρους)
Σημαντικά κομμάτια κειμένου
Αλλαγές σε αρχεία κειμένου

3.2 `<pre>` - Προμορφοποιημένο Κείμενο

Το <pre> διατηρεί spaces και line breaks ακριβώς όπως τα γράφετε:

Πότε το χρησιμοποιούμε:

Κώδικα (code snippets)
ASCII art
Formatted data (όπως το παραπάνω)
Ποίηση (όπου τα line breaks είναι σημαντικά)

3.3 `<details>` και `<summary>` - Collapsible Content

Το <details> δημιουργεί expandable/collapsible sections χωρίς JavaScript!

Πότε το χρησιμοποιούμε:

FAQs (Frequently Asked Questions)
Λεπτομέρειες προϊόντων
“Show more” κομμάτια

Σημείωση: Το <summary> είναι το κείμενο που φαίνεται πάντα (το “clickable” κομμάτι). Το υπόλοιπο περιεχόμενο μέσα στο <details> εμφανίζεται όταν το ανοίξετε.

3.4 Quick Reminder: `<figure>` και `<figcaption>`

Θυμηθείτε από προηγούμενο lab:

Τα χρησιμοποιούμε για images, diagrams, code listings που χρειάζονται caption.

4. Ολοκληρωμένα Παραδείγματα

4.1 Παράδειγμα 1: Απλό άρθρο νέων

Ας δούμε μια απλή δομή για ένα απλό άρθρο νέων:

Δομή:

<article>
- το article είναι αυτόνομο (self-contained)
<header>

μέσα στο article - τίτλος και metadata
<footer>

μέσα στο article - tags/categories

4.2 Παράδειγμα 2: Product Detail Page

Ας δούμε μια πιο σύνθετη σελίδα για ένα προϊόν:

Δομή:

Page

<header>

με

<nav>
- κοινό σε όλες τις σελίδες
<main>
- το κύριο περιεχόμενο
<article>
- το προϊόν (self-contained)
Πολλαπλά

<section>

μέσα στο article - διαφορετικά aspects του προϊόντος
<aside>
- related content (reviews, related products)
Page

<footer>
- κοινό σε όλες τις σελίδες

4.3 Παράδειγμα 3: Portfolio Showcase

Τώρα ας δούμε μια ολοκληρωμένη portfolio page - πιο κοντά στις ανάγκες σας ως σχεδιαστές:

Τι βλέπουμε εδώ:

Ολοκληρωμένη δομή

page header → main → aside → footer
Navigation

με internal links (#about, #projects, κλπ.)
Πολλαπλά <article>

για κάθε project - κάθε ένα είναι self-contained
Nested <section>

μέσα σε articles (για project details)
<details> και <summary>

για expandable content - keeps page clean
<aside>

με skills/education - σχετικό αλλά ξεχωριστό περιεχόμενο
Χρήση <figure> και <figcaption>

για project images
<mark>

για highlighting (βραβείο)
Mix of image services

(placehold για profile, picsum για projects)

Σημείωση: Στο επόμενο lab θα μάθουμε CSS για να στυλάρουμε αυτή τη σελίδα - προς το παρόν επικεντρωνόμαστε στη σωστή δομή!

Θέλετε να δείτε πώς φαίνεται με CSS styling;

Δείτε το ίδιο portfolio με styling: Ανοίξτε το Styled Preview εδώ →

ΣΗΜΑΝΤΙΚΟ: Το HTML είναι ΑΚΡΙΒΩΣ το ίδιο με το παραπάνω παράδειγμα - δεν άλλαξε ούτε ένα tag! Η μόνη διαφορά είναι η προσθήκη CSS styling. Αυτό δείχνει τη δύναμη του CSS - το ίδιο περιεχόμενο και δομή, εντελώς διαφορετική εμφάνιση!

(Θα ασχοληθούμε και θα εμβαθύνουμε στον κώδικα CSS από το επόμενο εργαστήριο - προς το παρόν απλά δείτε τι μπορείτε να πετύχετε!)

Στο styled preview θα παρατηρήσετε:

Gradient header με χρώματα
Centered layout με grid
Rounded corners και shadows στα articles
Sticky sidebar που μένει στη θέση του
Hover effects στα navigation links
Responsive design (προσαρμόζεται σε μικρές οθόνες)
Typography styling (fonts, sizes, spacing)

Αυτά και πολλά άλλα θα μάθουμε στα επόμενα εργαστήρια CSS!

5. Καλές και Συνήθεις Πρακτικές

5.1 `<article>` vs `<section>` - Πότε τι;

Χρησιμοποιούμε <article> όταν:

Το περιεχόμενο μπορεί να σταθεί μόνο του
Μπορεί να αναδημοσιευτεί αλλού
Παραδείγματα: blog post, portfolio piece, product card, news article

Χρησιμοποιούμε <section> όταν:

Ομαδοποιούμε θεματικά σχετικό περιεχόμενο
Είναι μέρος κάτι μεγαλύτερου
Παραδείγματα: chapters σε article, tabs, θεματικά τμήματα σελίδας

Μπορούμε να τα συνδυάσουμε:

5.2 Nesting Rules

Επιτρέπεται:

<article>

μέσα σε

<section>

[✓]
<section>

μέσα σε

<article>

[✓]
<article>

μέσα σε

<article>

[✓] (π.χ. comments σε blog post)
<header>

και

<footer>

μέσα σε

<article>

ή

<section>

[✓]

Δεν επιτρέπεται:

<main>

μέσα σε

<header>

,

<footer>

,

<aside>

, ή

<nav>

[X]
<header>

μέσα σε

<header>

ή

<footer>

[X]
<footer>

μέσα σε

<header>

ή

<footer>

[X]

5.3 Πότε Χρησιμοποιούμε `<div>`

Το <div> χρησιμοποιείται όταν:

Χρειάζεσαι container για

styling purposes

(CSS)
Δεν υπάρχει κατάλληλο semantic tag
Θέλεις να ομαδοποιήσεις elements χωρίς semantic meaning

Το εξωτερικό <div> είναι OK - χρησιμοποιείται για layout/styling. Το εσωτερικό <article> δίνει semantic meaning.

5.4 Typical Page Patterns

Pattern 1: Blog/Portfolio Structure

Pattern 2: Product/Landing Page

Pattern 3: Article/Documentation

5.5 Συχνά λάθη

[X] Λάθος: Χρήση <article> για οτιδήποτε

[✓] Σωστό:

[X] Λάθος: Πολλαπλά <main> elements

[✓] Σωστό:

[X] Λάθος: <nav> για κάθε ομάδα links

[✓] Σωστό:

Συνοπτικά

Αυτά που είδαμε σήμερα:

1. Το <div> tag:

Generic container χωρίς semantic meaning
Χρήσιμο για styling, αλλά όχι για structure

2. Essential Structural Elements:

<header>
- Επικεφαλίδα (page ή section)
<nav>
- Navigation links
<main>
- Κύριο περιεχόμενο (ένα ανά σελίδα)
<footer>
- Υποσέλιδο (page ή section)
<article>
- Self-contained content
<section>
- Θεματική ενότητα
<aside>
- Παράπλευρο περιεχόμενο

3. Useful Content Tags:

<mark>
- Highlighted text
<pre>
- Preformatted text
<details>

&

<summary>
- Collapsible content

4. Γιατί Semantic HTML:

Καθαρότερος κώδικας
Better accessibility
Better SEO
Easier maintenance

5. Επόμενα Βήματα: Στο επόμενο lab θα αρχίσουμε CSS - θα μάθουμε πώς να στυλάρουμε όλο αυτό το σωστά δομημένο HTML που δημιουργήσαμε!

Χρήσιμοι Πόροι για Projects:

Placeholder images:

https://placehold.co
Random images:

https://picsum.photos
Free stock photos:

Pexels, Unsplash

Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:Αποτέλεσμα:

v1.1 — Footer & Icon Improvements

Wed, 18 Feb 2026 00:00:00 +0000

What’s New

Multi-column Footer — New columns footer style with logo, tagline, and navigation
Social Icons — Site-wide social links rendered in the footer via identity.social.links
Icon Rendering — Robust SVG sizing strategy with 1em default for inline icons

Improvements

Icons now self-size to 1em by default, eliminating 0px collapse bugs
Footer branding supports configurable logo height and SVG scaling
Feature block icons bumped to larger size for better visual presence

Content

Changelog Section — New standalone section at /changelog/ using the date-title-summary view

v1.0 — Initial Release

Thu, 15 Jan 2026 00:00:00 +0000

What’s New

Page Builder — Build landing pages with drag-and-drop blocks
Block System — Hero, Features, CTA, Testimonials, Stats, and more
Tailwind CSS 4 — Modern utility-first styling with dark mode support
Preact Components — Fast, lightweight client-side interactivity
SEO Optimized — Automatic sitemaps, RSS feeds, and structured data
Multi-language — 35+ language packs out of the box

Getting Started

Check out the documentation to get started with your first site.

Privacy

Fri, 01 Dec 2023 00:00:00 +0000

Add your company privacy policy here…

Terms of Service

Fri, 01 Dec 2023 00:00:00 +0000

Add your company legal terms here…

🎉 Easily create your own simple yet highly customizable blog

Fri, 27 Oct 2023 00:00:00 +0000

Welcome 👋

Table of Contents

Overview

The Hugo Blox website builder for Hugo, along with its starter templates, is designed for professional creators, educators, and teams/organizations - although it can be used to create any kind of site
The template can be modified and customised to suit your needs. It’s a good platform for anyone looking to take control of their data and online identity whilst having the convenience to start off with a no-code solution (write in Markdown and customize with YAML parameters) and having flexibility to later add even deeper personalization with HTML and CSS
You can work with all your favourite tools and apps with hundreds of plugins and integrations to speed up your workflows, interact with your readers, and much more

Get Started

👉 Create a new site
📚 Personalize your site
💬 Chat with the Hugo Blox community or Hugo community
🐦 Twitter: @GoOwnable #MadeWithHugoBlox
💡 Request a feature or report a bug for Hugo Blox
⬆️ Updating Hugo Blox? View the Update Guide and Release Notes

Crowd-funded open-source software

To help us develop this template and software sustainably under the MIT license, we ask all individuals and businesses that use it to help support its ongoing maintenance and development via sponsorship.

As a token of appreciation for sponsoring, you can unlock these awesome rewards and extra features 🦄✨

Ecosystem

Bibtex To Markdown: Automatically import publications from BibTeX

Inspiration

Learn what other creators are building with this template.

Features

Page builder - Create anything with no-code blocks and elements
Edit any type of content - Blog posts, publications, talks, slides, projects, and more!
Create content in Markdown, Jupyter, or RStudio
Plugin System - Fully customizable color and font themes
Display Code and Math - Code syntax highlighting and LaTeX math supported
Integrations - Google Analytics, Disqus commenting, Maps, Contact Forms, and more!
Beautiful Site - Simple and refreshing one-page design
Industry-Leading SEO - Help get your website found on search engines and social media
Media Galleries - Display your images and videos with captions in a customizable gallery
Mobile Friendly - Look amazing on every screen with a mobile friendly version of your site
Multi-language - 35+ language packs including English, 中文, and Português
Multi-user - Each author gets their own profile page
Privacy Pack - Assists with GDPR
Stand Out - Bring your site to life with animation, parallax backgrounds, and scroll effects
One-Click Deployment - No servers. No databases. Only files.

Themes

Hugo Blox and its templates come with automatic day (light) and night (dark) mode built-in. Visitors can choose their preferred mode by clicking the sun/moon icon in the header.

Choose a stunning theme and font for your site. Themes are fully customizable.

License

Released under the MIT license.

🧠 Sharpen your thinking with a second brain

Thu, 26 Oct 2023 00:00:00 +0000

Create a personal knowledge base and share your knowledge with your peers.

Hugo Blox web framework empowers you with one of the most flexible note-taking capabilities out there.

Create a powerful knowledge base that works on top of a local folder of plain text Markdown files.

Use it as your second brain, either publicly sharing your knowledge with your peers via your website, or via a private GitHub repository and password-protected site just for yourself.

Mindmaps

Hugo Blox supports a Markdown extension for mindmaps.

With this open format, can even edit your mindmaps in other popular tools such as Obsidian.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides
```

renders as

- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides

Anh here’s a more advanced mindmap with formatting, code blocks, and math:


```markmap
- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/kit)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$
```

renders as

- Mindmaps
- Links
- [Hugo Blox Docs](https://docs.hugoblox.com/)
- [Discord Community](https://discord.gg/z8wNYzb)
- [GitHub](https://github.com/HugoBlox/kit)
- Features
- Markdown formatting
- **inline** ~~text~~ *styles*
- multiline
text
- `inline code`
-
```js
console.log('hello');
console.log('code block');
```
- Math: $x = {-b \pm \sqrt{b^2-4ac} \over 2a}$

Highlighting

Highlight important text with mark:

<mark>Highlighted text</mark>

Callouts

Use callouts (aka asides, hints, or alerts) to draw attention to notes, tips, and warnings.

Use the > [!NOTE] syntax to create a callout.

> [!NOTE]
> A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

renders as

Note

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

Or use the warning callout type so your readers don’t miss critical details:

Warning

A Markdown aside is useful for displaying notices, hints, or definitions to your readers.

📈 Communicate your results effectively with the best data visualizations

Wed, 25 Oct 2023 00:00:00 +0000

Hugo Blox is designed to give technical content creators a seamless experience. You can focus on the content and Hugo Blox handles the rest.

Use popular tools such as Plotly, Mermaid, and data frames.

Charts

Hugo Blox supports the popular Plotly format for interactive data visualizations. With Plotly, you can design almost any kind of visualization you can imagine!

Save your Plotly JSON in your page folder, for example line-chart.json, and then add the {{< chart data="line-chart" >}} shortcode where you would like the chart to appear.

Demo:

You might also find the Plotly JSON Editor useful.

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example flowchart:

```mermaid
graph TD
A[Hard] -->|Text| B(Round)
B --> C{Decision}
C -->|One| D[Result 1]
C -->|Two| E[Result 2]
```

renders as

graph TD A[Hard] -->|Text| B(Round) B --> C{Decision} C -->|One| D[Result 1] C -->|Two| E[Result 2]

An example sequence diagram:

```mermaid
sequenceDiagram
Alice->>John: Hello John, how are you?
loop Healthcheck
John->>John: Fight against hypochondria
end
Note right of John: Rational thoughts!
John-->>Alice: Great!
John->>Bob: How about you?
Bob-->>John: Jolly good!
```

renders as

sequenceDiagram Alice->>John: Hello John, how are you? loop Healthcheck John->>John: Fight against hypochondria end Note right of John: Rational thoughts! John-->>Alice: Great! John->>Bob: How about you? Bob-->>John: Jolly good!

An example class diagram:

```mermaid
classDiagram
Class01 <|-- AveryLongClass : Cool
Class03 *-- Class04
Class05 o-- Class06
Class07 .. Class08
Class09 --> C2 : Where am i?
Class09 --* C3
Class09 --|> Class07
Class07 : equals()
Class07 : Object[] elementData
Class01 : size()
Class01 : int chimp
Class01 : int gorilla
Class08 <--> C2: Cool label
```

renders as

classDiagram Class01 <|-- AveryLongClass : Cool Class03 *-- Class04 Class05 o-- Class06 Class07 .. Class08 Class09 --> C2 : Where am i? Class09 --* C3 Class09 --|> Class07 Class07 : equals() Class07 : Object[] elementData Class01 : size() Class01 : int chimp Class01 : int gorilla Class08 <--> C2: Cool label

An example state diagram:

```mermaid
stateDiagram
[*] --> Still
Still --> [*]
Still --> Moving
Moving --> Still
Moving --> Crash
Crash --> [*]
```

renders as

stateDiagram [*] --> Still Still --> [*] Still --> Moving Moving --> Still Moving --> Crash Crash --> [*]

Data Frames

Save your spreadsheet as a CSV file in your page’s folder and then render it by adding the Table shortcode to your page:

{{< table path="results.csv" header="true" caption="Table 1: My results" >}}

renders as

Table 1: My results
customer_id	score
1	0
2	0.5
3	1

👩🏼‍🏫 Teach academic courses

Tue, 24 Oct 2023 00:00:00 +0000

HugoBlox Kit is designed to give technical content creators a seamless experience. You can focus on the content and the HugoBlox Kit which this template is built upon handles the rest.

Embed videos, podcasts, code, LaTeX math, and even test students!

On this page, you’ll find some examples of the types of technical content that can be rendered with Hugo Blox.

Video

Teach your course by sharing videos with your students. Choose from one of the following approaches:

Youtube:

{{< youtube w7Ft2ymGmfc >}}

Bilibili:

{{< bilibili id="BV1WV4y1r7DF" >}}

Video file

Videos may be added to a page by either placing them in your assets/media/ media library or in your page’s folder, and then embedding them with the video shortcode:

{{< video src="my_video.mp4" controls="yes" >}}

Podcast

You can add a podcast or music to a page by placing the MP3 file in the page’s folder or the media library folder and then embedding the audio on your page with the audio shortcode:

{{< audio src="ambient-piano.mp3" >}}

Try it out:

Test students

Provide a simple yet fun self-assessment by revealing the solutions to challenges with the spoiler shortcode:

{{< spoiler text="👉 Click to view the solution" >}}
You found me!
{{< /spoiler >}}

renders as

👉 Click to view the solution

You found me 🎉

Math

HugoBlox Kit supports a Markdown extension for $\LaTeX$ math. You can enable this feature by toggling the math option in your config/_default/params.yaml file.

To render inline or block math, wrap your LaTeX math with {{< math >}}$...${{< /math >}} or {{< math >}}$$...$${{< /math >}}, respectively.

Note

We wrap the LaTeX math in the Hugo Blox math shortcode to prevent Hugo rendering our math as Markdown.

Example math block:

{{< math >}}
$$
\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}
$$
{{< /math >}}

renders as

$$\gamma_{n} = \frac{ \left | \left (\mathbf x_{n} - \mathbf x_{n-1} \right )^T \left [\nabla F (\mathbf x_{n}) - \nabla F (\mathbf x_{n-1}) \right ] \right |}{\left \|\nabla F(\mathbf{x}_{n}) - \nabla F(\mathbf{x}_{n-1}) \right \|^2}$$

Example inline math {{< math >}}$\nabla F(\mathbf{x}_{n})${{< /math >}} renders as $\nabla F(\mathbf{x}_{n})$ .

Example multi-line math using the math linebreak (\\):

{{< math >}}
$$f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\
1-p_{0}^{*} & \text{if }k=0.\end{cases}$$
{{< /math >}}

renders as

$$ f(k;p_{0}^{*}) = \begin{cases}p_{0}^{*} & \text{if }k=1, \\ 1-p_{0}^{*} & \text{if }k=0.\end{cases} $$

Code

HugoBlox Kit utilises Hugo’s Markdown extension for highlighting code syntax. The code theme can be selected in the config/_default/params.yaml file.

```python
import pandas as pd
data = pd.read_csv("data.csv")
data.head()
```

renders as

import pandas as pd
data = pd.read_csv("data.csv")
data.head()

Inline Images

{{< icon name="python" >}} Python

renders as

Python

✅ Manage your projects

Mon, 23 Oct 2023 00:00:00 +0000

Easily manage your projects - create ideation mind maps, Gantt charts, todo lists, and more!

Ideation

Hugo Blox supports a Markdown extension for mindmaps.

Simply insert a Markdown code block labelled as markmap and optionally set the height of the mindmap as shown in the example below.

Mindmaps can be created by simply writing the items as a Markdown list within the markmap code block, indenting each item to create as many sub-levels as you need:


```markmap {height="200px"}
- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides
```

renders as

- Hugo Modules
- Hugo Blox
- netlify
- netlify-cms
- slides

Diagrams

Hugo Blox supports the Mermaid Markdown extension for diagrams.

An example Gantt diagram:

```mermaid
gantt
section Section
Completed :done, des1, 2014-01-06,2014-01-08
Active :active, des2, 2014-01-07, 3d
Parallel 1 : des3, after des1, 1d
Parallel 2 : des4, after des1, 1d
Parallel 3 : des5, after des3, 1d
Parallel 4 : des6, after des4, 1d
```

renders as

gantt section Section Completed :done, des1, 2014-01-06,2014-01-08 Active :active, des2, 2014-01-07, 3d Parallel 1 : des3, after des1, 1d Parallel 2 : des4, after des1, 1d Parallel 3 : des5, after des3, 1d Parallel 4 : des6, after des4, 1d

Todo lists

You can even write your todo lists in Markdown too:

- [x] Write math example
 - [x] Write diagram example
- [ ] Do something else

renders as

Write math example
- Write diagram example
Do something else

dgasdafsdfasdfa

Mon, 01 Jan 0001 00:00:00 +0000

Home | Academic & Research Portal

Lab 2: Introduction to HTML and CSS

Aims of the lab

Lab-4

Lab 5: HTML5 Semantic Elements

Στόχοι του Εργαστηρίου

1. Το <div> Tag και η Ανάγκη για Semantic HTML

1.1 Τι είναι το <div>

1.2 Η Παλιά Προσέγγιση (Πριν το HTML5)

1.3 Η Λύση: HTML5 Semantic Elements

2. Βασικά Δομικά Elements

2.1 <header> - Επικεφαλίδα

2.2 <nav> - Πλοήγηση

2.3 <main> - Κύριο Περιεχόμενο

2.4 <footer> - Υποσέλιδο

2.5 <article> - Αυτόνομο Περιεχόμενο

2.6 <section> - Θεματική Ενότητα

2.7 <aside> - Παράπλευρο Περιεχόμενο

3. Άλλα χρήσιμα Content Tags

3.1 <mark> - Επισημασμένο Κείμενο

3.2 <pre> - Προμορφοποιημένο Κείμενο

3.3 <details> και <summary> - Collapsible Content

3.4 Quick Reminder: <figure> και <figcaption>

4. Ολοκληρωμένα Παραδείγματα

4.1 Παράδειγμα 1: Απλό άρθρο νέων

4.2 Παράδειγμα 2: Product Detail Page

4.3 Παράδειγμα 3: Portfolio Showcase

5. Καλές και Συνήθεις Πρακτικές

5.1 <article> vs <section> - Πότε τι;

5.2 Nesting Rules

5.3 Πότε Χρησιμοποιούμε <div>

5.4 Typical Page Patterns

5.5 Συχνά λάθη

Συνοπτικά

v1.1 — Footer & Icon Improvements

What’s New

Improvements

Content

v1.0 — Initial Release

What’s New

Getting Started

Privacy

Terms of Service

🎉 Easily create your own simple yet highly customizable blog

Overview

Get Started

Crowd-funded open-source software

❤️ Click here to become a sponsor and help support Hugo Blox’s future ❤️

Ecosystem

Inspiration

Features

Themes

License

🧠 Sharpen your thinking with a second brain

Mindmaps

Highlighting

Callouts

Did you find this page helpful? Consider sharing it 🙌

📈 Communicate your results effectively with the best data visualizations

Charts

Diagrams

Data Frames

Did you find this page helpful? Consider sharing it 🙌

👩🏼‍🏫 Teach academic courses

Video

Podcast

Test students

Math

Code

Inline Images

Did you find this page helpful? Consider sharing it 🙌

✅ Manage your projects

Ideation

Diagrams

Todo lists

Did you find this page helpful? Consider sharing it 🙌

dgasdafsdfasdfa

1. Το `<div>` Tag και η Ανάγκη για Semantic HTML

1.1 Τι είναι το `<div>`

2.1 `<header>` - Επικεφαλίδα

2.2 `<nav>` - Πλοήγηση

2.3 `<main>` - Κύριο Περιεχόμενο

2.4 `<footer>` - Υποσέλιδο

2.5 `<article>` - Αυτόνομο Περιεχόμενο

2.6 `<section>` - Θεματική Ενότητα

2.7 `<aside>` - Παράπλευρο Περιεχόμενο

3.1 `<mark>` - Επισημασμένο Κείμενο

3.2 `<pre>` - Προμορφοποιημένο Κείμενο

3.3 `<details>` και `<summary>` - Collapsible Content

3.4 Quick Reminder: `<figure>` και `<figcaption>`

5.1 `<article>` vs `<section>` - Πότε τι;

5.3 Πότε Χρησιμοποιούμε `<div>`