What does a web page look like in binary?

chrstrbrts

Senior member
Aug 12, 2014
522
3
81
Hello,

What I mean is, let's say that I have a web page that I want to push out to clients.

My web page will put the word "Hello" in plain text in the top corner of the screen, feature a CSS addendum to format that text, and feature a JS script such that when you hover the mouse pointer over the text, it changes in some way and returns to its normal state after you pull the mouse pointer away.

Possibly the simplest front end dynamic site you can imagine.

How many packets would it take to send this code out?

What would the payload of these packets look like in binary / hex?

What I'm really asking is, how are HTML / CSS / JS encoded?

Also, this is all just binary coming at a browser. How does a browser know where HTML ends and CSS begins? Same with JS. Are there delimiters?
 

mxnerd

Diamond Member
Jul 6, 2007
6,799
1,103
126
For simple web pages, it's just text files with HTML, CSS, Javascript code in them.

For rich website, it's text file with links to other binary files/stream sources like images or videos, but the web page itself is still text file.

For a simple website, the web server only sends out plain text or javascript (also text) to client's browser. It's then cached in browser's memory.

After that, when you hover the mouse over the button and maybe text changed color or text, it's the javascript engine inside the browser processing these things (HTML, CSS, Javscript code).

There is no text/binary traffic between client and server for this mouse activity.
 
Last edited:

chrstrbrts

Senior member
Aug 12, 2014
522
3
81
For simple web pages, it's just text files.

Transmitted in ASCII?

For rich website, it's text file with links to other data files/stream sources like images or videos, but the web page itself is still text file.

What about CSS and JS? How are they encoded?

For a simple website, the web server only sends out plain text or javascript (also text) to client's browser. It's then cached in browser's memory.

Is the JS sent over as JSON?

After that, when you hover the mouse over the button and maybe text changed color, it's the javascript engine inside the browser processing these things.

There is no text/binary traffic between client and server for this mouse activity.

Yes, I knew that.

How are HTML, CSS, and JS delimited? How does the browser know where one ends and the other begins?
 

mxnerd

Diamond Member
Jul 6, 2007
6,799
1,103
126
Transmitted in ASCII?

Yep.

When you are using Chrome, open it's built-in Developer tools (CTRL+SHIFT+I), you will see what's transmitted over the internet.

What about CSS and JS? How are they encoded?
They are not encoded, also transmitted in plain text to browser.

Is the JS sent over as JSON?
No, just plain text.

JSON is for structured data, not code.


How are HTML, CSS, and JS delimited? How does the browser know where one ends and the other begins?
I'm not familiar with CSS.

But HTML code begin with <html> and end with </html> tags

Javascript code begin with <script> and end with </script> tags

==

html, css or javascript code can be in the same or different web page text files.
 
Last edited:

Gryz

Golden Member
Aug 28, 2010
1,551
204
106
This is not secret stuff.
HTML and HTTP are Internet Standards.
That means they are described in RFCs and other standards documents.

A quick google-search brought me to this specification of HTML5.1.
https://www.w3.org/TR/html51/

HTML is the spec that describes the content of webpage. The format. The stuff that goes inside the page.
If you want to know how it is transported, you need to look at HTTP.
HTTP1.1. is defined in these 2 RFCs.
https://tools.ietf.org/html/rfc7230
https://tools.ietf.org/html/rfc7231

Now I understand that the W3 doc and the 2 RFCs are huge documents.
And if you're new to html/http, they will be impossible to navigate through.
But once you get more familiar with them, you should be able to find your way around and figure out quickly any detail you wanna know.

The point I'm trying to get across is: all Internet-protocols and standards are open. You can look em up, search them, understand them. Don't be scared.

Also, this is all just binary coming at a browser.
This is where you are wrong. All content "in a web-page" is human readable. Not binary. (Well, everything besides the jpegs themselves, movies, audio, etc).

Open a web-page. Find the "show source" option in your browser-menu. E.g. in Firefox this is under the "Tools" menu -> "Web Developer" -> "Page Source".

Look at the source. Everything is tagged. Everything is structured. Everything is human-readable. Maybe when you see html-source you will understand ?
Good luck.