Hello,
I have been playing around with some of the TM4C129 examples to learn how to design an embedded web server. So far I am able to make LWIP work and output a simple web html web page by declaring a string constant index_html below. I also created a string constant index_css. I send index_html and index_css consecutively to the web browser. I am able to output the webpage but the CSS strings just show up as strings.
Here I am sending index.html and index_css consecutively
num_bytes = send(Ser_State.Server_Sock_ID, (char *)index_html,
sizeof(index_html), 0);
num_bytes = send(Ser_State.Server_Sock_ID, (char *)index_css,
sizeof(index_css), 0);
static const char index_html[] =
"HTTP/1.1 200 OK\r\n"
"Content-type: text/html\r\n"
"\r\n"
"<!DOCTYPE html>"
"<html lang=\"en\" dir=\"ltr\">"
"<head>"
"<meta charset=\"utf-8\">"
"<title>Index.html</title>"
"<link rel=\"stylesheet\" type=\"text/css\">" -----------------------> I know this is where I insert the CSS file name if I were to create a web page on my PC
"</head>"
"<body>"
"<h1>This is the heading</h1>"
"<p>Let's see a list</p>"
"<ol>"
"<li>Item One</li>"
"<li>Item Two</li>"
"<li>Item Three</li>"
"</ol>"
"<h4>Heading 4</h4>"
"</body>"
"</html>";
Below is the CSS
stringstatic const char index_css[] =
"Content-type: text/css\r\n"
"h1{color:blue;}"
"li{color: rgb(30,50,100);}"
"p{color: #eab01c;}"
"h4{color:rgba(13,90,140,0.5);}";
The CSS does not make any changes on the web page. Index_css just shows up as a string below. I know the enet_io example shows a web browser example but it doesn't really explain how it links the css to the html. It looks like it uses a utility to convert everything to array of hex numbers. I'd like to understand how to link it the way I'm doing it below. I know how to link the CSS to HTML if I were creating a web page on the PC just by adding the filename on the line <link rel="stylesheet" type=\"text/css\" href="CSS_example1.css">. However, it doesn't exactly work this way in an embedded web server. How will I tell the browser how to link the HTML and the CSS I'm sending? Any input and help is very much appreciated. Thanks.
Here is the output from the browser
This is the heading
Let's see a list
- Item One
- Item Two
- Item Three
Heading 4
Content-type: text/css h1{color:blue;}li{color: rgb(30,50,100);}p{color: #eab01c;}h4{color:rgba(13,90,140,0.5);
Thanks
AJ
