I am trying to build my first blog webpage.
The code I wrote so far at the bottom of the question.
I wish it has a function when I click "my name" or "Home" it can turns to the very beginning main page. And when I click "Blog", it can link to the area where has picture or word contains.
However, so far my code does not have such function, instead, they just display as words (cannot click).
This is the template I tried to followed
And after comparing it, I find that I need to have href: / in order to make them as button. And also I realise their link is for example "https://www.personname.com/".
However, it makes me feels like that I should first has a personal webpage in order to put that link as a back to home page button. But...that is what I am doing, I am trying to build a webpage...
I tired add the code below and it links to a wrong position. :(
<a href="/">
"Home"
<span class="sr-only">(current)</span>
</a>
I also tried to have a button feature, but it display as this grey trangle box in the picture and cannot click as well.
How can I fix this problem?
And below are the code I wrote so far
You can use named anchor tags to get this behavior.
html {
scroll-behavior: smooth;
}
<a name="top"></a>
<a href="#top">Home</a>
<a href="#blog">Blog</a>
<section style="height: 100vh">
<h1>Welcome Home</h1>
</section>
<section style="height: 100vh">
<a name="blog"></a>
<h1> Blog </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<a href="#top">Back to Top</a>
</section>
Thank you so much for helping with detailed example and link. One more question, If I have local pictures. Should I first upload them to somewhere online before add into HTML? I.e. What href should I write then? (I saw others using style="background-image:url('/img/header-slides/bg.jpg')" But turnd out this is also a link such as www.personname.come/pictures which I cannot use )
its hard to say because that depends on how you are serving the files. The browser is for good reason not allowed to simply look into the users file system. So usually the files are served by a server. If and only if the files are served from the same server as your HTML page, you could write it like you tried
/img/header-slides/bg.jpg
. If its served from somewhere else you need to give the full url, including the server name where the files are served i,e,https://my-file-server/my-picutre.png
.try using this until you understand it better -> marketplace.visualstudio.com/… . So you can focus on building stuff. When its time for hosting and such you can look more into it. pages.github.com is a great start.