How do GIS web apps work?
A more complete list (the first answer mainly refer to OpenGeo stack, that is excellent, but there are plenty of other options out there):
User Interface
- OpenLayers
- GeoExt (based on OpenLayers)
- MapQuery (based on OpenLayers)
- Leaflet
- Polymaps
- Mapstraction
- Modest Maps
- Wax
Map Services
- MapServer
- GeoServer
- Mapnik
- FeatureServer
- QGIS Server
Web Applications
- MapBox TileMill
- Ushahidi
Tile/Cache Services
- MapProxy
- GeoWebCache
- TileCache
- MapCache
Data Services
For vectorial datasets:
- PostGIS
- Spatialite
- MySQL Spatial
- plain formats (for example shapefile)
for raster datasets:
- PostGIS Raster
- Rasterlite
- plain formats (for example geotiff)
SDI Services
- GeoNetwork
- GeoNode
Note that this list only refer to Open Source software, otherwise we would need to add more software and tools (most notably ArcGIS Server and Oracle Spatial).
You have your shape files, which the web browsers cannot read if you put them on a server somewhere. A user could download them and view them in an application but that's not what you want.
So this is where GeoServer, MapServer, OpenLayers, PostGIS come into play.
You would use PostGIS to store the data in your shape file as it's a spatial database.
You would use GeoServer or MapServer to Expose that data in an OGC Standard way to represent your layers.
And finally you would use OpenLayers to display those layers however you want in a pretty map on the web.
Update:
This might help you visualize it:
You could work though my course (though there's no credit I'm afraid). It provides a 9 step plan to get you up to speed on some of the concepts that you seem to be struggling with.