I just posted a simple web page of a news clipping about my 1st cousin, Joseph Walker, receiving a certificate. Ever wonder what’s “under the hood” of a web page?
I’m going to intentionally oversimplify, but in general, every webpage you look at is an HTML file, as presented by your web browser (Chrome, Firefox, Safari, iOS, Android, etc.)
Web pages are written in two (or sometimes three languages. HTML (HyperText Markup Language) and CSS (Cascading Style Sheets). And, if you are going to interact with the page by clicking on buttons, check boxes, etc. a third language, JavaScript controls that.) The HTML has what it is the reader will see, and some of the “broad brush” controls of how it’s presented to you. And the CSS controls the more detailed aspects of how it’s presented to you. I’m not trying to teach you HTML or CSS, only to give you an idea of how web pages work.
Every HTML file contains two parts — a HEAD and a BODY. Instructions (tags) are enclosed in < > symbols. Every HTML file contains <html><head> … </head><body>…</body></html>, where the tags containing a slash, /, signify the end of something. The file for the webpage I just published, https://www.campbellluggblackwell.com/ClipJosWalker1948.html, consists of 58 lines of code; plus a JPEG file of an image.
If you’re interested in how it works, we’ll take a quick tour.
Line 1, <!DOCTYPE html> is standard and tells the browser that it’s reading an HTML file.
Line 2, <html lang=”en”> tells the browser that it’s reading the beginning of an HTML file, and that it’s written in English.
The section circled in red is the HEAD portion of the HTML file.
The <meta …> statements contain info about the file.
The section circled in green is used by search engines to index the webpage and to describe it. (Text in the BODY portion is also used in indexing the page.)
The upper box circled in blue imports CSS rules from the files specified.
The lower box circled in blue specifies internally CSS files that are to be used b the browser — in this case to size each character in heading lines one and two at 4% of the screen width.
And the section circled in yellow imports Google typefonts that are used by many of our webpages.
It may look strange at first, but these browser instructions are quite simple.
To be continued.