My website code sample:
<a href=/post/64/page-name><img src=/img-folder/2015/09/image.jpg></a>
<div id=cont2><a href=/post/64/page2>page 2 link</a></div>
My first question is, can I start links just with /? Is it a bad practise? because all website sources that I looked it starts with www.website.com/... not just /
Second question is quotes. It is not needed since html 2.0, but is it important in the example above?
My website is having some problems on google to show correctly... may it be because this problems?
It isn't bad practice. A URL starting with / is merely a relative URL that's relative the the base path. You're using it just fine.
Another example usage is when you want to reference a CSS or JavaScript file and you're deep down into the path.
<script src="/scripts/main.js"></script>
Then, no matter where the user is on your site, they'd always request http://example.com/scripts/main.js. Where example.com is your site's domain.
Additionally: Always quote attribute values. (attribute="value" and not attribute=value).
/ means start of where you are currently. So if your resource is located under same directory, you are allowed to use / to start with. If you refer to external resources, you can't use / to start. (E.g. www.google.com means google website, while /www.google.com means folder under your current directory named www.google.com, like http://localhost/www.google.com)
Quotes are needed when you use white-space in your attributes values (e.g. class="my super classs-name that has white-space" | class=my super classs-name that has white-space).
My website is having some problems on google to show correctly SEO stuff. What problems? Your page is not under first page of Google search? It's separate topic about that.
It is not forbidden. When you start your link with slash / it just a path relative to base element.
You can read more about BASE element here: http://www.w3.org/TR/html4/struct/links.html#h-12.4
For example, if you are already at: http://example.com/folder/index.html
/posts/index.html would link to: http://www.example.com/posts/index.html
posts/idnex.html would link to http://www.example.com/folder/posts/index.html
if you reference external sources you have to add the full path/adress
if you reference local resources its up to you.(more or less) take a llok at How to properly reference local resources in HTML?
You should use either double " or single ' qoutations - thats a good practise at least.
But you dont have to if there is no whitespace.
When you start your link with "/" its mean that you start from the root directory.
Example: Your website is in the directory /web/html.
When you now start your link with "/" its goes to the root folder. In this case the web folder.
I know this is old and answered, but it came up on Google when I was searching for something similar, so I just wanted to add to the answers.
Sometimes, when I need to do something real quick with simple HTML site that doesn't require a server, I usually just open index.html in Terminal to quickly preview the page in browser. However when you open your site like that, using the leading slash to load resources (ie. /js/main.js) won't work. That's because when you load your website by opening a file in your browser, the browser takes the root of your drive as the base path for your website.
So if you have your files like this for instance:
drive/Users/username/Documents/www/index.html
drive/Users/username/Documents/www/js/main.js
And you reference your script like this:
<script src="/js/main.js"></script>
The browser will think you're actually pointing here (if you open the file directly in browser):
drive/js/main.js
Because / in this case means drive and not the website's root (www in this case) folder as it would on a server.
Nope, it is not a bad habit to put '/' when starting links. But not having a quote in every html attribute? I don't think so. But i would suggest to put quote(") in every html attribute for it to be more readable.
Related
I am currently creating a website with over 700 pages and I would like to be able to link them together before I upload the files to my host server if possible. Is there a good way to link pages together pre-upload without for sure knowing what the final URLs are going to be?
I am working in and plan to upload/manage my website files through Dreamweaver.
I have seen the prompt in Dreamweaver to update links before. If I link the file paths now, will it update to the URLs when the site is uploaded?
you need to use root-relative links. do some searching on that. as long as you don't change your file structure you will be good where your site is run.
instead of using absolute links such as http://www.website.com/folder1/page1
you would use /folder1/page1
as long as your root was where you started the paths from you can start with "/" as above.
there are some instances where you would do a relative link from a certain folder to another one ../folder1/page1 this is not something i would recommend here.
good luck and comment on this if you have more questions.
Just wondering how/why this works, when I'm making a simple html file and linking in some css, then dragging my html file into the browser, no static web server is needed for me to view the file.
Why is that so..
I'm looking at my browser's network tab, and no request is made for the css file, and my browser still displays it perfectly..
Is there a way to do without a static file server on the web for html, css, js files, like when dragging and dropping a file into a browser?
Just going back and requestionning basics here..
Thanks in advance!
Because the link to your CSS file is relative, and your CSS file is accessible locally. Browsers can be used to access local files, not just files on the Internet.
When working with links, you may see just the name of the file referenced, as such:
Link
This is known as a relative link. file.html is relative to wherever the document is that is linking to it. In this case, the two files would be in the same folder.
There's a second type of link, known as an absolute URL, where the full path is specified.
Consider a typical absolute website link:
Link
With a local file, this would essentially be:
Link
The file protocol can be used to access local files.
Considering both the homepage (presumably index.html) and file.html would live in the same folder on both a web server and your local machine, Link would work for either scenario. In fact, with a relative link, the location of the second file is automatically determined based on the location of the first file. In my example, index.html would live at file://[YOUR WEBSITE]/index.html, so your browser is smart enough to known to look in file://[YOUR WEBSITE]/ when searching for any relative URLs.
Note that the same scenario applies to any other file! <link> and <script> tags will look for files in the exact same way -- that includes your stylesheet :)
Hope this helps!
Sounds like you are new to HTML and web development.
It all has to do with relative versus absolute file paths.
Check out these articles and have fun coding! Always remember that Google is your friend, improve your search-foo and you will not have to ask questions like this.
God speed.
http://www.geeksengine.com/article/absolute-relative-path.html
http://www.coffeecup.com/help/articles/absolute-vs-relative-pathslinks/
How to properly reference local resources in HTML?
When we launch a website, we usually see webpage name (menu.php or admin.aspx) but I would like to hide that name and show only virtual path or just website name. I don't want it for the first page because I did that with default.aspx but I want to implement it for the whole website.
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
Note: My code is not MVC code and server is Apache.
Use .htaccess to rewrite the URL. Millions of tutorials are out there for that ;)
What you are asking is achieved using (for xampp, wamp, lamp or any other apache powered webserver setup) htaccess rewriterules. The rules take the URL and break it into parts that can be modified or used as variables to feed other pages - whilst still keeping the URL you typed. Neat huh!
Showing www.abcd.com/faq/ instead of www.abcd.com/faq/faq.html
call the file placed into the folder faq simply index.html (not faq.html) and then www.abcd.com/faq/
will display the page without the filename. (Make sure, you have defined index.html as a valid Directory index.)
There are more options with using mod_rewrite etc - but since you seem to use a prety static directory based navigation layout, that would be the easiest way.
I work on a very large enterprise web application - and I created a prototype HTML page that is very simple - it is just a list of CSS and JS includes with very little markup. However, it contains a total of 57 CSS includes and 271 javascript includes (crazy right??)
In production these CSS/JS files will be minified and combined in various ways, but for dev purposes I am not going to bother.
The HTML is being served by a simple apache HTTP server and I am hitting it with a URL like this: http://localhost/demo.html and I share this link to others but you must be behind the firewall to access it.
I would like to package up this one HTML file with all referenced JS and CSS files into a ZIP file and share this with others so that all one would need to do is unzip and directly open the HTML file.
I have 2 problems:
The CSS files reference images using URLs like this url(/path/to/image.png) which are not relative, so if you unzip and view the HTML these links will be broken
There are literally thousands of other JS/CSS files/images that are also in these same folders that the demo doesn't use, so just zipping up the entire folder will result in a very bloated zip file
Anyway -
I create these types of demos on a regular basis, is there some easy way to create a ZIP that will:
Have updated CSS files that use relative URLs instead
Only include the JS/CSS that this html references, plus only those images which the specific CSS files reference as well
If I could do this without a bunch of manual work, if it could be automatic somehow, that would be so awesome!
As an example, one CSS file might have the following path and file name.
/ui/demoapp/css/theme.css
In this CSS file you'll find many image references like this one:
url(/ui/common/img/background.png)
I believe for this to work the relative image path should look like this:
url(../../common/img/background.png)
I am going to answer my own question because I have solved the problem for my own purposes. There are 2 options that I have found useful:
Modern browsers have a "Save Page As..." option under the File menu, or in Chrome on the one menu. This, however does not always work properly when the page is generated by javascript
I created my own custom application that can parse out all of the CSS/Javascript resources and transform the CSS references to relative URLs; however, this is not really a good answer for others.
If anyone else is aware of a commonly available utility or something like that which is better than using the browser built in "Save page as..." option - feel free to post another answer.
<file_name>
link
<slash><file_name>
link
<dot+slash><file_name>
link
Which of these is recommended/preferred?
Do any of them impact the speed of retrieval?
What are the pros and cons when using either of them?
There's an extensive article on URLs by skorks here: What Every Developer Should Know About URLs, but it does not give answers to any of my questions.
There is no specific recommendation.
The retrieval speed has no bearing on how the URI is constructed.
The only thing that you need to consider is whether the linking page and the page you are linking to are part of a group of pages - if you move them together then if your links are in style 2 they will break. If file.html will always be on the root of the site, then moving this file will make no difference.
I don't see the point of style 3.
Number 2 is NOT the same as the others, because it resolves to the root of the website and not the current folder.
This question sounds suspiciously like micro-optimization to me, and the answer is fairly simple: The browser resolves the paths when a link is encountered, using the current URL or the <base href="..." /> if one is provided. Therefore there is absolutely no difference.
Option 1 and 3 produce the exact same HTTP GET request. Option 2 is different because a path starting with / will try to retrieve the file from the root rather than the current path.
There's no reasonable difference between them in terms of speed/retrival.
- First and third are the same case: the resource named file.html resides in the same directory of the current file.
- In the second option "/file.html" means the file is located in the webroot of your application.
Here is explained w3school