Can someone help me with my site?

I’m trying to build my website and so far I’ve got this:

What I’m missing is the menu on top, because I don’t know how to import other html files.
Could anyone help me with this?

Here’s my code:

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <link rel="import" href="base.html">
  </head>
<body>

<link rel="import" href="navbar.html">

<div class="container">
  <h1>Introduction</h1>
  <p>
  Esperango is a fun attempt to make a European language for the EU.
  It is yet another Esperandito which I'm making up as I go.
  </p>

</div>


</body>
</html>

base.html

<title>Esperango</title>
	
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta charset="utf-8">
    
<link rel="stylesheet" href="/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="/assets/font-awesome/css/font-awesome.min.css">
<script src="/assets/jquery/js/jquery.min.js"></script>
<script src="/assets/bootstrap/js/bootstrap.min.js"></script>

navbar.html

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Esperango</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Changes
      <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="/changes/introduction.html">Introduction</a></li>
          <li><a href="/changes/accent.html">Accent</a></li>
          <li><a href="/changes/phonology.html">Phonology</a></li>
          <li><a href="/changes/words.html">Words</a></li>
          <li><a href="/changes/focus_influential.html">Focus influential</a></li>
          <li><a href="/changes/jossive_expressive.html">Jossive expressive</a></li>
        </ul>
      </li>
      <li class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Q&amp;A
      <span class="caret"></span></a>
        <ul class="dropdown-menu">
        <li><a href="/qna/other_languages.html">Other languages</a></li>
          <li><a href="/qna/short.html">Q&amp;A - short</a></li>
          <li><a href="/qna/why.html">Q&amp;A - long</a></li>
        </ul>
      </li>
    </ul>
  </div>
</nav>
1 Like

I like that you are thinking about your site in modules.

Something worth looking into for generating a static site, with modules as you are thinking, is Jekyll: https://jekyllrb.com

One fun thing you could do with Jekyll is translate your site from Esperango to as many languages as you like, using data config files with just one html template, instead of having a separate html document for each language.

8 Likes

You can’t include/import html in a static website so you would have to copy the HTML into index. HTML using a text editor rather than import it.

Scripts can be referenced in external files, but again not imported/included. This means you can call functions defined in another JS file.

I suggest you examine how other static websites are constructed to see what works. Or find a tutorial on the web and work through that to build a simple website with a menu. Just beware that you don’t try to adapt code from a dynamic website (ie something that uses a scripting language like PHP, or one which uses server side includes, because these won’t work. You may already know that, but I mention it because you have got the impression that you can include html from other files, and server side code is the only way you can do so).

I haven’t used Jekyll myself, as Hunter suggests, but have heard it is very good for this kind of thing.

5 Likes

I suspected as much, but wasn’t sure. Thanks for clearing that up for me.

Thank you for your suggestion. I was vaguely aware of it and forgot it’s name and the term static site generator in general.
As Rust is the future, I’m going to dive into Cobalt instead.

4 Likes

I’ve got a new problem now. I want to test my site on Eclipse before I publish it on the SAFE Network and Eclipse is being weird.

1 Like

I finally figured out why atom is so loved in this community.
It has atom-live-server and platform-ide-terminal and thus everything that’s necessary to build and test a static site, while Eclipse is a very Java-oriented IDE.

It took me a long time also because I had an accident damaging my inner ear and brain :frowning:.

4 Likes

And an even longer time to recover.
It’s still not 100% gone, but I can work and play again.

Anyway, I’ve got a first version done and I’m a high level enough to upload it to the testnet I think.
How do I get onto the testnet?

[Update]
I figured it out.

This topic was automatically closed after 60 days. New replies are no longer allowed.