Developing a simple website from scratch using https://css-tricks.com/app-from-scratch-1-design/ - html

I am following all the steps from beginning. In chapter four there are codes displayed.. I am not getting where to paste those codes in my local pc.. that is in xamp...can anyone help me?

If you are on mac
Copy all your files & paste them into the Applications > XAMPP > htdocs (root folder).
Then Navigate to localhost/index.php
If you are on windows
Copy all your files & paste them into the c:\xampp\htdocs (root folder).
Then Navigate to localhost/index.php from the browser
Note : Before you navigate to the localhost/index.php you have to start the Server.

You need to concentrate on setting up a localhost. BTW, there is a very easy way to set it up if you are using php: Link
So, name your first file to be called as index.php or index.html, and do
php -S localhost:8000 in console from the same directory. After that it should propose you to go to the browser and see your content at http://localhost:8000/

Related

How do I set the root directory for links while editing offline?

I'm making a website that I used to edit directly online on Neocities, but due to some problems, I'm looking to switch my editing to local offline. But I can't make my links point correctly to their targets, such as the favicon or my css files because locally, "/" doesn't point to the root.
Is there any program that allows me to set a folder as the root directory so these links can point properly? I'm currently trying Notepad++ but I haven't found a way to do so.
I know I could put the full path as "C:\folder\folder\file.css" for examle, but that would mean I'd have to edit the html of every single of my many pages and then re-edit them when I upload them online, and that's very undesirable. I need a way to preview the html locally without changing any paths, so my favicon link, for example, which currently is href="/favicon.png" can stay unchanged on all the pages. I could remove the "/" but then it wouldn't work for any pages within subfolders, and there's a lot of those in my project.
It's possible that I'm just missing some simple detail but I'm really just very much a beginner to making websites in general.
You can run a local web server to serve the contents of your root directory at a domain like http://localhost:8080. So rather than opening index.html in the browser you visit that URL instead.
There are a bunch of simple web servers you can use - my favourite for purposes like this is the NPM package http-server. It requires Node to be installed.
Install node
Install http-server by executing npm install -g http-server in your Terminal
Run the http-server by navigate to the website root folder and run http-server in your Terminal
http-server will produce an output that will tell you where to access the site.
Starting up http-server, serving ./
http-server version: 14.1.0
Available on:
http://127.0.0.1:8080
http://localhost:8080
Hit CTRL-C to stop the server

How deploy .htm extension on a server?

I want to learn AngularJs from http://www.tutorialspoint.com/angularjs
but an example must be deployed a server. I don't know anything about it.
Please give me some hint about deploy .htm extension file to a server.
Example url is following;
http://www.tutorialspoint.com/angularjs/angularjs_includes.htm
I believe that they just mean placing the files somewhere inside the web root. The web root should be deployed by your local or remote server.
Example:
Download and install MAMP.
Set your root directory as the MAMP root directory in preferences.
Now you can use your own paths -- just follow the example in the link you provided.
https://www.mamp.info/en/
Also, I'm of the opinion that it's good practice to at least use a local web server as opposed to running your website without one.
You don't need a webserver to test the code given in that example. ng-include using relative paths works fine.
However, if you really want to use a webserver for other examples/projects, depending upon your OS, you can use *AMP. where * means
W for windows
L for linux
once you have it installed, place the files in www folder. and access it in browser using http://localhost
Firstly I add my app folder under
D:\tomcat7\apache-tomcat-7.0.67-windows-x64\apache-tomcat-7.0.67\webapps
after I run tomcat server .
And run
http://localhost:8080/an/ht.htm
It is working :) Thanks #ketchupisred #Mridul Kashyap

How to create a website with xampp?

I created this little html file test.html:
<p>It works!</p>
and try to host it with apache. I downloaded and installed XAMPP and started apache. But where to put test.html so i can access it in the browser?
I search now for 30 minutes but can't find anything to start with.
xampp/htdocs folder, this is where index.html takes place.
You can access it via your browser like this: http://localhost/index.html
In order to add/view new files/projects, just add them to htdocs directory and access them via localhost/filename address.
Hope it works :)
In XAMPP root directory you can find 'htdocs' folder. You could create here a new folder for each web that you want to create and put inside your files. You can access in your browswer like:
http://localhost/test.html
http://localhost/NewFolder/test.html

Object not found - XAMPP

I recently installed XAMPP on my laptop - windows-7 64-bit. I just wrote a very basic and elementary "Hello World" script in HTML. But, however when i'm trying to run it, it says Object Not found. Error 404.
Here's what i'm doing:
Wrote the script.
Saved it as test.html in xampp/apache/htdocs.
Opened the browser, typed localhost/test.html in the space provided for the URL.
The bizarre thing is, i am able to run the index.html file stored in xampp/apache/htdocs. And i'm also able to run the localhost page. But any new page that i'm creating, i'm unable to run it. Please help me solve this problem.
Thank you in advance :)
It seems xampp is not able to locate your file.
Check DocumentRoot setting in XAMPP\apache\conf\httpd.conf to find currently it is pointing to which folder.
If you want you can point it to some other folder like,
D:/phpprojects/
By the way, You sure htdocs is in xampp/apache/htdocs ? Mine is in xampp/htdocs.
if problem is in linux
Folders not should be cut from Windows into Linux
folders permissions not set . change it
You just need to change the root of project from xampp/apache/htdocs to xampp/htdocs.
I mean your project folder has to be in xampp/htdocs root .(e.g: xampp/htdocs/project).
And your project address will be localhost/project

html showing contents of folder

i am creating a web page to show the contents of a folder so that people can view the files and download them if needed.
Click here to view Folder
But i wanna do this without any coding what so ever, i found this code which lets me view files.
The problem i am facing is that when i double click the html page and open it this hyperlink works and i get what i need but when i access the page through a server (IIS 7) then the hyperlink does nothing ?
am i to set some permissions or what ?
can someone tell me what im doing wrong ?
The link will work when the file you want to download is on your own personal computer, which in your case is true if you're just showing the HTML file locally. It won't be true for users visiting your website from another computer though.
If you want to serve the file on a server, you need to link to the path on the server itself, that is, if the file is in C:\inetpub\wwwroot\test_pages, your A HREF looks like this:
Click here to view Folder
Offcourse, this will work for simple files. For folders, you need to enable the webserver to show directory contents by enabling Directory Browsing.
There are security implications of linking to a local file from an online source. It works when the page is held locally but when on a server it puts a stop to it.
You can also use linux build-in command Tree, in example below you can see that i only want to add files that are matching .tar.gz or .zip or .tar.bz2
tree -P "*.tar.gz|*.zip|*.tar.bz2" -h -D --dirsfirst -r -H . > index.html;
You can also add a custom css to the page for a better looking output.
Straighforward and highly secure since the result is only html
as you use windows you can use www.cygwin.com to emulate a linux environement